Relatório de Estágio apresentado para cumprimento dos requisitos necessários à

obtenção do grau de Mestre em Novos Media e Práticas Web realizado sob a

orientação científica de Professor Francisco Rui Cádima e co-orientação de Professor

Vítor Badalinho

Dedicatória

À minha família que sempre me apoiou e ajudou na concretização dos meus objetivos

Agradecimentos

Uma palavra de agradecimento ao Professor Doutor Francisco Rui Cádima por todo o apoio e orientação na concretização deste relatório.

Agradeço também ao Professor Vítor Badalinho pela sua simpatia e disponibilidade e a

todos os professores que tive o privilégio de conhecer ao longo deste mestrado que frequentei com grandes expectativas.

A todos os que me receberam com simpatia na Ogilvy e me ajudaram ao longo do

estágio, um obrigado.

Um agradecimento especial aos meus pais por todo o incentivo que me deram.

Relatório de estágio na agência Ogilvy

A importância dos testes de usabilidade e do Responsive Web Design no

desenvolvimento de projetos digitais

Carla Maria Maximiano Delgado

Resumo

O presente relatório de estágio enquadra-se no método de avaliação final do

Mestrado em Novos Media e Práticas Web, da Faculdade de Ciências Sociais e

Humanas da Universidade Nova de Lisboa e pretende abordar o trabalho desenvolvido

por mim durante o estágio curricular realizado na agência de comunicação e

publicidade Ogilvy.

O estágio decorreu entre novembro de 2014 e fevereiro de 2015, durante o qual

desempenhei o cargo de online producer e fui supervisionada por Sara Cabral Fonseca,

diretora de projeto. Todos os trabalhos tiveram como objetivo principal o

acompanhamento e conhecimento do processo ligado ao desenvolvimento de projetos

digitais, desde o briefing até à programação e conteúdo. Os trabalhos compreenderam

a realização de testes de usabilidade em deskop e mobile dos sites e aplicações

desenvolvidos pelo departamento digital da empresa, e também o apoio na realização

de tarefas ligadas à gestão de conteúdos de vários websites. Este relatório resulta de

todo o trabalho concretizado e pretende efetuar uma contextualização teórica ligada à

importância dos testes de usabilidade e do Responsive Web Design (RWD) na

implementação de projetos digitais.

Palavras-chave: Web, Usabilidade, Responsive Web Design, Mobile First

Abstract

The following traineeship report fits in the final evaluation method of the

Master’s Degree in New Media and Web Practices, from FCSH, Universidade Nova de

Lisboa and pretends to approach the work by me developed during the curricular

traineeship done in the communication and publicity agency Ogilvy.

The traineeship occurred between November 2014 and February 2015, during

which I have worked as an online producer and was supervised by Sara Cabral Fonseca,

project director. The main goal of all the developed works was the accompaniment

and acknowledgement of the process related to the development of digital projects,

from the briefing to the content programming. The developed works comprised the

realization of usability tests, in both desktop and mobile, of the sites and applications

developed by the company digital department, and also the support in the realization

of tasks related to content management of various projects. This report results of all

the concretized work and aims to effectuate a theoretical contextualization

considering the importance of the usability tests and of the Responsive Web Design

(RWD) in the implementation of digital projects.

Key words: Web, Usability, Responsive Web Design, Mobile First

Índice

Introdução ………………………………………………………………………………………………........ 7 Capítulo I: Enquadramento teórico

1) Importância dos testes de usabilidade em projetos online……………….. 8

i) Interação Humano Computador …………………………………………… 9

ii) Conceito de usabilidade ……………………………………………………….. 10

iii) Usabilidade em dispositivos móveis ……………………………………… 11

iv) Testes de usabilidade ……………………………………………………………. 13

2) Importância do Responsive Web Design e Mobile First …………………….. 17

i) Definição de Responsive Web Design ……………………………………. 17

ii) Mobile First …………………………………………………………………………… 20

Capítulo II: O estágio

1) Apresentação da agência Ogilvy ……………………………………………………….. 21

2) Objetivos …………………………………………………………………………………………… 21

3) Metodologia e descrição das atividades desenvolvidas …………………….. 22

Conclusão ……………………………………………………………………………………………………….. 28

Bibliografia ……………………………………………………………………………………………………… 29

Anexos ……………………………………………………………………………………………………………. 31

Página | 7

Introdução

O grande impato causado pela web, assim como as suas potencialidades e

vantagens para a sociedade, gerem o aparecimento de novos conceitos de grande

importância para o desenvolvimento de projetos digitais como websites e aplicações

que encontramos todos os dias na Internet. De entre esses novos termos poderemos

destacar a usabilidade que pode ser entendida como a qualidade de um sistema ser

fácil de usar. Outro dos conceitos que se apresenta na vanguarda da era digital é o

Responsive Web Design que surge como resposta ao aumento do acesso à Internet

através dos dispositivos móveis. É a maneira de programar um site de forma que os

elementos que o compõem se adaptem automaticamente à largura do ecrã do

dispositivo no qual ele está a ser visualizado. O relatório de estágio pretende abordar

esses novos conceitos, estabelecendo uma ligação com as principais atividades

desenvolvidas ao longo do estágio na Ogilvy.

Página | 8

Capítulo I:

Enquadramento teórico

Importância dos testes de usabilidade em projetos online

Vários especialistas defendem a importância estratégica dos testes de

usabilidade em projetos digitais. Devido à crescente popularização da Internet e à

inserção cada vez maior de pessoas, de diversas faixas etárias e classes sociais, no

mundo digital, a par da crescente oferta de serviços disponibilizados online, a

usabilidade ganha grande importância ano após ano. A quantidade e diversidade de

utilizadores da web acentuam-se exponencialmente, por este motivo torna-se

fundamental praticar a usabilidade e garantir que todo o conteúdo é adequado à

capacidade de utilização, compreensão e aprendizagem destes utilizadores. Para tal, os

sites devem ter uma linguagem acessível ajustável à lógica do utilizador para que ele

compreenda facilmente o modo de navegação. Mesmo porque, quando os

utilizadores navegam na web, eles procuram informação e tomam decisões sozinhos.

Se todos os passos de uma interação não estiverem explicados de forma clara,

simplesmente abandonamos o site ou aplicação e acedemos a outros. Muitas vezes,

deixar o utilizador sem resposta ou até mesmo não informá-lo sobre o que está a

acontecer em cada passo, são alguns exemplos de falhas de usabilidade. Para

aproveitar todos os benefícios da usabilidade, o ideal é a realização de testes enquanto

o desenvolvimento do projeto ocorre. Além de minimizar os erros, tem um impacto

direto no custo e na aceitação do projeto. Um sistema funcional e eficiente tem custos

de manutenção e suporte técnico menores, tornando o produto altamente

competitivo no mercado e alcançando um maior número de clientes.

Página | 9

Interação Humano Computador

No desenvolvimento de interfaces web é importante conhecer os utilizadores,

pois as capacidades e limitações dessas pessoas determinam as principais

caraterísticas da interface a ser projetada. Por sua vez, o computador deve ser visto

como um meio favorável à comunicação e que desempenha um papel importante no

tratamento, processamento e distribuição da informação. Assim, podemos afirmar que

a Interação Humano Computador (IHC) é individual, na medida em que cada pessoa é

única no seu conhecimento e expetativas. Uma mesma Interface pode apresentar

diversos significados entre os utilizadores, assim como, entre desenvolvedores e

utilizadores pois cada um fará a sua interpretação mediante o seu conhecimento sobre

o tema e experiência do uso do computador.

Rocha (2003) define a IHC como uma disciplina preocupada com o design,

avaliação e implementação de sistemas computacionais interativos com o uso humano

e com o estudo dos principais fenómenos ao redor deles. O termo IHC nasceu na

década de 80, com objetivo de mostrar que esta área de estudo vai mais além que a

pesquisa sobre design de interfaces e abraça todas as perspetivas que envolvem a

relação homem-máquina.

A IHC desempenha um papel importante na elaboração de projetos, prezando

por caraterísticas como a segurança, a produtividade e a satisfação. Assim, além das

questões da experiência do utilizador e dos processos de comunicação entre interface,

sistema e ser humano, deve-se também ter em atenção as diferentes formas de

apresentar a informação, permitindo que diferentes tipos de utilizadores consigam,

com sucesso, interagir com a interface obtendo as informações de procuram no menor

tempo possível e da forma mais simples e dinâmica. Neste sentido é preciso que a IHC

englobe a funcionalidade da interface mas considere também os aspetos psicológicos,

físicos e cognitivos, prezando pelo comodidade, segurança e satisfação do utilizador

diante do que é apresentado.

Página | 10

Conceito de usabilidade

Vários autores possuem diferentes definições para o termo usabilidade, alguns

conceitos são mais conhecidos e mais respeitados. Seguem-se algumas definições de

usabilidade aplicada à web.

De acordo com a Internacional Standards Organization (ISO 9241-11), a

usabilidade pode ser definida como a eficiência e satisfação com que os utilizadores

conseguem atingir objetivos específicos com um dado produto, em circunstâncias

particulares (tarefa, equipamentos, ambiente físico e social). Além do facto que todos

os utilizadores devem ter igual acesso à informação e funcionalidade. Resumidamente,

usabilidade pode ser definida como a facilidade da interação do utilizador com

determinada interface. Cybis (2007) considera que a ergonomia está na origem da

usabilidade, pois ela visa proporcionar eficácia e eficiência, além do bem-estar e saúde

do utilizador. Pode ser entendida também, como a qualidade de um sistema ser fácil de

utilizar, que é reforçada pela relação entre interface, utilizador, tarefa e ambiente. No

entanto, o seu objetivo principal é garantir que sistemas e dispositivos estejam

adaptados à maneira como o utilizador pensa, como se comporta e trabalha.

Nielsen (1993), declara que a usabilidade é um atributo de qualidade

relacionado à facilidade de uso e rapidez com que os utilizadores podem aprender a

usar um objeto ou, neste caso, uma determinada interface. Para completar a sua

definição o autor recorre a cinco critérios: facilidade de aprendizagem: a utilização do

sistema requer pouco conhecimento; fácil memorização: o utilizador deve lembrar,

depois de algum tempo, como a interface é utilizada; produtividade: a interface deve

permitir que o utilizador realize uma tarefa de forma rápida e eficiente; satisfação: a

interface deve dar confiança e segurança ao utilizador; taxa de erros: no caso de

surgirem erros de navegação a interface deve avisar o utilizador e permitir facilmente a

correção. Deste modo, pode-se entender a usabilidade como um atributo de qualidade

relacionado à facilidade de uso de um sistema digital projetado de forma eficiente, com

o intuito de promover conforto, satisfação e eficácia na recuperação da informação.

Página | 11

Usabilidade em dispositivos móveis

Nielsen e Norman (2010), afirmam que as interfaces de interação gestual têm

sido desenvolvidas colocando de parte os princípios elementares e padrões

consolidados do design de interação. Os princípios fundamentais de usabilidade em

dispositivos móveis são esquecidos, tais como: visibilidade, feedback, consistência e

padrões, descoberta, confiança e scalability. Vários autores desenvolveram estudos

acerca dos aspetos sobre interação em dispositivos móveis. Uma das contribuições

nesta área foi dada pela Little Springs Design que defende o desenvolvimento de

diversos padrões de projeto – design patterns – para o ambiente móvel. Estes padrões

levam em consideração aspetos de interface, usabilidade e portabilidade, que são

fundamentais no desenvolvimento de aplicações web mobile.

Em 2009, o W3C publicou a última versão do Mobile Web Best Practices

(MWBP) que apresenta recomendações de desenvolvimento. O objetivo da MWBP é

reunir todas estas referências de forma a contemplar os principais aspetos que devem

ser tratados pelos desenvolvedores. Analisemos as três diretrizes defendidas pelo

W3C.

Portabilidade

A portabilidade diz respeito à adequação do conteúdo e das funcionalidades da

aplicação às diferentes caraterísticas dos dispositivos móveis e do aproveitamento

destas caraterísticas para promover uma experiência satisfatória para o utilizador. O

MWBP aborda esta questão de duas maneiras: explorar as capacidades do dispositivo

e personalizar o conteúdo de acordo com o aparelho requisitante. Um aparelho móvel

está constantemente conectado e pode ser acedido a qualquer momento e em

qualquer lugar. Explorar as capacidades do dispositivo, como a mobilidade, significa

utilizar todos os recursos nele disponíveis, não restringindo-se apenas à uma interface

web.

Navegação

Neste ponto, o MWBP fornece poucos princípios de design de navegação,

recomendando aos desenvolvedores que mantenham a navegação da página em uma

Página | 12

única direção, preferencialmente vertical; identifiquem os links com cores diferentes

do restante texto; garantam que o utilizador atinja o conteúdo procurado em poucos

passos. É comum para as pessoas iniciarem uma leitura no topo de uma folha de papel,

por exemplo, e terminarem na parte inferior da folha. Processo semelhante ao que

acontece na web. O utilizador espera por uma abordagem neste sentido. Se a

navegação for horizontal ou em ambos os sentidos, o utilizador ficará perdido e terá

problemas em encontrar o que pretende.

Layout e interatividade

Segundo o MWBP, a utilização de imagens e outros elementos multimédia

numa aplicação web mobile devem ser evitados, pois geram um aumento no tráfego

de informações o que pode acarretar maiores custos para o utilizador e aumentar a

espera de carregamento dos elementos. No entanto, com o avanço da tecnologia 3G,

melhorias no desempenho de hardware dos dispositivos e na qualidade dos

navegadores permitem que estes elementos sejam utilizados. O tamanho ou resolução

do ecrã é uma questão abordada por muitos autores. Métodos de ampliação da página

ou mecanismos de deteção de resolução de ecrã são abordagens bastante frequentes.

O desenvolvedor deve estar atento a estas diferenças.

Porém, de acordo com Nemer (2006), não há consenso ao definir que

caraterísticas específicas tornam possível para o utilizador fazer uso eficaz, eficiente e

satisfatório de um dispositivo móvel ou de uma aplicação móvel, em um dado

contexto. Encontra-se na literatura uma abundância de recomendações para a

melhoria da usabilidade em interfaces para dispositivos móveis, assim como existem

várias diretrizes para o desenvolvimento de sites tradicionais. Nemer resume todas

essas recomendações de usabilidade para dispositivos móveis em apenas alguns

critérios, são eles: mobilidade, utilidade, relevância, facilidade de uso, foco no

utilizador, personalização, eficiência, confiabilidade, consistência, estrutura de

navegação e design de conteúdo.

Página | 13

Testes de usabilidade

Nos últimos anos um grande número de métodos de avaliação de usabilidade

tem sido usado no desenvolvimento de projetos digitais. Muitas pesquisas são feitas

nesta área com o objetivo primordial de saber como os utilizadores interpretam a

realidade, perceber que conhecimentos possuem, experiências e dificuldades, afim de

obter uma maior satisfação com a interface apresentada e ultrapassar os problemas de

usabilidade que possam surgir.

De acordo com Cybis (2007), um problema de usabilidade é considerado um

obstáculo quando o utilizador não consegue ultrapassá-lo a ponto de comprometer o

desempenho da interação entre este e a interface. Consideramos um problema de

usabilidade quando uma caraterística da interface provoca perda de tempo e

compromete a qualidade da realização da tarefa.

Os métodos de avaliação podem ser classificados como métodos de inspeção da

usabilidade, feita por profissionais e especialistas de interface, através de vários itens

de avaliação, como é o caso da avaliação heurística introduzida por Nielsen e sobre a

qual se fala mais à frente. A avaliação da usabilidade pode também ser feita através de

testes com a participação dos utilizadores. Estes métodos são feitos através do uso de

questionários ou observação direta ou indireta dos utilizadores durante a utilização da

interface como fonte de informação que possa levar à identificação de problemas.

Cybis (2007) defende que as técnicas de avaliação de usabilidade baseiam-se

em verificações de aspetos ergonómicos das interfaces durante a interação com o

sistema. Assim, o autor divide as técnicas em três tipos:

Avaliações analíticas - correspondem à primeira fase de desenvolvimento de

uma interface, permite filtrar aspetos importantes sobre a realização do projeto e

verificar questões como a consistência e controlo do utilizador. Este tipo de análise

apenas prevê o tempo de interação perfeita. Por essa razão não serve como um

avaliador das ações entre utilizador e sistema mas pode ser útil para comparar

alternativas de interfaces.

Página | 14

Inspecção por listas de verificação (guidelines) - nesta técnica a qualidade da

lista de verificação utilizada determina o sucesso da avaliação. Esta pode oferecer

vantagens como fornecer conhecimento ergonómico sobre os aspetos a avaliar,

sistematizar as avaliações, reduzir a subjetividade e reduzir os custos de avaliação. A

construção de guidelines é resultado de pesquisas nas áreas de ciência cognitiva,

psicologia e ergonomia. Em alguns casos, trata-se de conhecimento prático que foi

acumulado durante o desenvolvimento de vários projetos ou ainda, recomendações de

“bom senso”. A avaliação de usabilidade usando guidelines consiste basicamente em

ter um ou mais avaliadores que investigam a interface e, quando um problema é

identificado este é associado a uma ou mais recomendações que foram violadas. O

processo é simples mas exige uma grande experiência do avaliador, pois o conjunto de

recomendações ultrapassa facilmente algumas dezenas a considerar. Algumas

recomendações não são facilmente aplicadas e exigem a interpretação por parte do

avaliador. Por estes motivos, o processo de avaliação usando recomendações

ergonómicas pode ser bastante exaustivo se o avaliador não tiver conhecimentos

prévios sobre essas recomendações.

Avaliações heurísticas - esta técnica de avaliação não incluiu a participação dos

utilizadores. Geralmente este tipo de avaliação é feita por um grupo de três a cinco

especialistas que, individualmente procuram identificar os problemas da interface.

Trata-se de um julgamento de valor sobre as qualidades ergonómicas da interação

humano-computador. Pode produzir bons resultados no que diz respeito à rapidez da

avaliação, na quantidade e importância dos problemas diagnosticados mas os bons

resultados dependem dos avaliadores e das estratégias adoptadas.

A avaliação heurística, desenvolvida por Nielsen (1990), é um método

tradicional de avaliação da usabilidade que se baseia numa interação entre avaliadores

e interface e considera a sua adequação e qualidade comparando-as com um grupo de

princípios de usabilidade predefinidos, as heurísticas.

Nielsen sugere um conjunto de 10 recomendações heurísticas que servem de

guia durante a avaliação, são elas:

Página | 15

Diálogos simples e naturais - as interfaces devem ser o mais simples possível.

Deve-se apresentar exatamente a informação que o utilizador precisa, no timing e sítio

exato onde ela é necessária. Tanto a informação, como as operações devem ser

acedidas através de uma sequência compatível com o modo pelo qual os utilizadores

irão realizar as tarefas de forma produtiva. Muitas vezes essas sequências são forçadas

pela própria interface mas o melhor é permitir que o utilizador controle o diálogo o

máximo possível, de tal forma que a sequência possa ajustar-se às preferências do

utilizador.

Falar a linguagem do utilizador - a terminologia da interface deve ser baseada

na linguagem do utilizador e não orientada ao sistema. Para tal deve-se verificar quais

os termos que são utilizados com maior frequência pelos utilizadores. As informações

também devem ser organizadas conforme o modelo mental que o utilizador possuí

sobre interfaces.

Minimizar a sobrecarga de memória do utilizador - a interface deve exibir

elementos de diálogo e permitir que o utilizador faça as suas escolhas sem obriga-lo a

lembrar destes ou daquele comando específico. É recomendável o uso de comandos ou

botões genéricos em toda a interface, pois permitem que tarefas similares ocorram em

diferentes circunstâncias, sendo que o utilizador aprende poucos comandos para

trabalhar com vários tipos de dados.

Consistência - este é um dos princípios básicos da usabilidade. Se os utilizadores

souberem que o mesmo comando ou a mesma ação têm sempre o mesmo resultado,

ganham consequentemente mais confiança no uso da interface e serão encorajados a

fazerem novas descobertas. A mesma operação deverá ser apresentada na mesma

localização em todas os ecrãs e deverá ser formatada da mesma maneira para facilitar

o reconhecimento.

Feedback - a interface deverá informar o utilizador sobre o que ele está a fazer

no momento. O tempo de resposta influencia o tipo de feedback dado ao utilizador.

Por exemplo, um décimo de segundo é o limite para o utilizador pensar que o sistema

Página | 16

está a reagir instantaneamente, o que significa que não é necessário nenhum feedback

especial. Por vezes, os feedbacks especiais são necessários para mostrar o andamento

de uma tarefa ou contextualizar uma navegação mais demorada.

Saídas claramente marcadas - o utilizador deve sentir que pode controlar a

interface, deste modo deverá ser fácil sair das mais variadas situações. Por exemplo

todas as caixas de diálogo devem ter um botão para cancelar uma tarefa. É importante

a existência de um botão “undo” (desfazer) para retroceder em uma dada operação. E

retornar ao estado anterior. Os utilizadores rapidamente aprendem a confiar neste

mecanismo e por isso ele deve estar disponível como um botão genérico em toda a

interface. Consequentemente, o utilizador vai confiar na aprendizagem por exploração,

pois saberá desfazer eventuais erros.

Atalhos - a interface deve possibilitar que o utilizador experimente executar

mais rapidamente operações frequentemente utilizadas, através de atalhos. Temos

como exemplo as abreviações, teclas de função ou botões especiais para funções

frequentes.

Boas mensagens de erro - as mensagens de erro devem seguir algumas regras:

linguagem clara e sem códigos, devem ser precisas, devem ajudar o utilizador a

resolver o problema e não devem intimidar ou culpar o utilizador.

Prevenir erros - melhor do que possuir boas mensagens de erro, é evitar

situações de erro. Conhecendo-se as situações que mais provocam erro, sempre é

possível modificar a interface e tornar improvável a ocorrência de erros mais

frequentes.

Ajuda e documentação - melhor que uma interface fácil de usar é uma interface

que não necessita de ajuda ou documentação. No entanto, se necessário, esta ajuda

deve estar facilmente acessível online.

Página | 17

A usabilidade de um sistema ou interface é a condição essencial para a sua

aceitação por parte do utilizador. Por esse motivo, todos os esforços dispensados na

conceção de testes de usabilidade são importantes pois poderão contribuir para evitar

surpresas desagradáveis e evitar a perda de muito tempo (e às vezes de dinheiro) na

realização de futuras alterações. A utilização de testes de usabilidade num projeto

digital não é só útil como imprescindível.

Importância do Responsive Web Design e Mobile First

Com o objetivo de tornar a navegação cada vez mais confortável para os

utilizadores, o Responsive Web Design (RWD) apresenta-se cada vez mais necessário.

Trata-se de uma técnica de reestruturação do layout para se adaptar a qualquer

tamanho de ecrã desde os desktops até aos smartphones passando pelos tablets. De

acordo com as conclusões apresentadas no Relatório Cisco Visual Networking Index

(VNI)1, prevê-se que, entre 2014 e 2019, o tráfego global de dados móveis vai superar

em três vezes o crescimento do tráfego global de dados fixos. As redes 3G suportarão

44% de todos os dispositivos e ligações móveis à escala global e as 4G 26%. Mas

estas vão gerar 68% do tráfego. Mais de 69% da população

mundial utilizará dispositivos móveis. O RWD surge em resposta ao aumento do acesso

à Internet através dos dispositivos móveis.

Definição de Responsive Web Design

Até há poucos anos, a web significava usar um navegador instalado num desktop

controlado por mouse e teclado num ecrã de tamanho considerável. Os websites

foram construídos pensando nesse cenário. Mas, actualmente, temos ecrâs pequenos,

touch screen, redes móveis e muitas outras formas diferentes de aceder à Internet.

Precisamos, por isso, de uma nova web. Uma web que suporte esta explosão de novos

dispositivos e esteja preparada para o futuro de dispositivos que ainda nem

conseguimos antever. O RWD é a chave para essa nova web. É pensar em sites que se

1 Relatório sobre o tráfego global de dados móveis. http://www.cisco.com/web/PT/index.html

Página | 18

adaptem a todo tipo de dispositivos e contexto de uso. É sair das limitações do

browser de um desktop e do seu tamanho previsível, e pensar em sites com

flexibilidade que suportem todos os tamanhos de ecrã, qualquer tipo de resolução,

interfaces com touch ou mouse.

O conceito surge quando Ethan Marcotte (2010) escreveu um artigo no conhecido

site AlistApart http://alistapart.com/article/responsive-web-design (acedido a 18 de

março de 2015) de que mudaria radicalmente a filosofia e os métodos de

desenvolvimento de layouts. O texto com o título "Responsive Web Design" começa

por citar John Allsopp, que afirmou: “O controlo que os designers têm sobre conteúdos

publicados na mídia impressa e tão desejado para aplicação na web é, simplesmente,

consequência das restrições que a página impressa impõe. Nós devemos nos

consciencializar de que a web não impõe as restrições da mídia impressa, ela necessita

de design flexível”. Ethan demonstra com uso de um exemplo prático como criar uma

interface que se adapte aos diferentes tamanhos de ecrã e, no final do artigo, afirma:

web design responsivo, finalmente, oferece-nos um caminho a seguir, o que nos

permite "projetar para o fluxo e o refluxo das coisas".

O RWD não diz respeito somente à adaptação do layout ao tamanho do ecrã. Vai

muito além disso. O conceito de RWD, na sua forma ampla, deve ser entendido como o

design capaz de "responder" às caraterísticas do dispositivo ao qual é servido.

Responder, nesse contexto, tem o sentido de movimentar-se expandindo e

contraindo. Em outras palavras, o RWD ou layout responsivo expande-se e contrai-se

com a finalidade de se adecuar de forma usável e acessível à área onde é visualizado,

seja um smartphone, um tablet ou um desktop, etc.

Ethan usou o termo "ingredientes técnicos" para relacionar as três tecnologias

fundamentais para desenvolvimento do RWD, são elas: grid fluído; imagens e

multimédia flexíveis; media queries. Grid fluído é um termo que foi popularizado

graças ao aparecimento das frameworks CSS. Antes do advento desses frameworks, o

termo usado era o layout com seus componentes fluídos, que continua válido. Layout

fluído é aquele cujas medidas CSS são definidas em unidades relativas, tais como

porcentagens e sem, e não em medidas absolutas como pixel e milímetros. Multimédia

e imagem flexíveis são aquelas capazes de contrair ou expandir as suas dimensões ou

que têm as suas dimensões alteradas por scripts em função do contexto onde são

Página | 19

renderizadas. Os elementos multimédia mais comuns presentes em layouts são:

vídeos, áudio e widgets. Media queries é uma tecnologia CSS que permite ao

desenvolvedor criar CSS baseada em determinadas caraterísticas do dispositivo ao qual

o layout será apresentado.

Para melhor definir o conceito de RWD, podemos diferenciar os seguintes

princípios do RWD, de acordo com Sandijs Ruluks2:

1- O design responsivo expande-se de forma fluida;

2- Posicionar os elementos de design do website usando pixels em coordenadas

X e Y pode trazer problemas para o seu funcionamento em ecrâs diferentes. É

aconselhável utilizar unidades relativas como a percentagem do ecrã que é usada, ao

invés de unidades estáticas como pixels.

3- À medida que o tamanho do ecrã se torna menor, o conteúdo do website vai

se apresentando verticalmente e qualquer coisa abaixo dele vai sendo empurrada. Isso

é chamado de “fluxo.”

4- "Breakpoints” (pontos de quebra) permitem que o layout mude em pontos

predeterminados. Por exemplo: no desktop o website possui três colunas, mas no

dispositivo móvel apenas uma.

5- O RWD utiliza elementos em espaços predefinidos. Deste modo, é possível

fazer com que os elementos no ecrã se adaptem a um maior ou menor espaço de

maneira uniforme.

6- O ícone do website possui muitos detalhes e alguns efeitos aplicados? Se for

esse o caso recomenda-se usar um bitmap. Se não, podemos considerar usar uma

imagem vetorizada. Isto porque a imagem vetorizada pode mais adequadamente

adaptar-se a diferentes resoluções.

7- É recomendável usar fontes de sistema em vez de webfonts. Fontes de

sistema são mais rápidas quando os dados do site carregam, a não ser quando o

utilizador não possui alguma delas no dispositivo móvel.

2 Co-fundador da Froont, uma empresa norte-americana especializada na criação de ferramentas para

web designers criarem sites responsivos.

Página | 20

Mobile First

O conceito surge através de Luke Wroblewski, quando este publicou um texto

em http://www.lukew.com/ff/entry.asp?933 (acedido a 18 de março de 2015) cujo

título é "Mobile First", defendendo e justificando a necessidade de começar um projeto

digital a partir da sua apresentação em dispositivos móveis. Luke começa o artigo

afirmando que na maioria das vezes, a criação do layout de uma aplicação ou um site

para dispositivos móveis só começa depois que o layout para desktop está pronto. O

autor defende três razões para que o fluxo de criação do layout seja invertido, isto é,

primeiro o layout para dispositivo móvel e a partir daí o layout para desktop, são elas:

uma explosão da tecnologia mobile está em curso; o layout para dispositivo móvel

implica uma otimização de dados e ações a serem projetadas com descarte de

elementos desnecessários; os dispositivos móveis estão a incorporar cada vez mais

funcionalidades nativas e a capacidade de criação de conteúdos ricos, não existentes

na maioria dos navegadores para desktop.

Resumidamente, ao iniciar-se um novo projeto web, em vez de começarmos

pela versão desktop, deve-se iniciar a conceção pela versão móvel, para só depois criar

a versão para desktop. Ao concebermos primeiro a versão mobile, aumenta-se o foco

no que realmente é indispensável para os utilizadores, evitando assim a retirada de

itens necessários ou a inclusão de elementos supérfluos. A aplicação da técnica, além

de aumentar a qualidade dos sites para os dispositivos móveis, também pode melhorar

a qualidade das versões para desktop. Isto porque, após a conceção e validação da

solução móvel, se o desenvolvedor mantiver o mesmo foco e as mesmas prioridades, o

resultado será uma solução desktop mais simples e com objetivos claros. Mas como

toda mudança de paradigma não é tarefa simples, para funcionar, é preciso ter o apoio

de gestores de projeto, além da participação ativa de todos os envolvidos.

Página | 21

Capítulo II:

O estágio

Apresentação da agência Ogilvy

Ogilvy é uma agência multinacional, fundada em 1965 por David MacKenzie

Ogilvy, com presença em Portugal há cerca de 20 anos. Empresa independente nas

áreas da publicidade, marketing direto e interativo, relações públicas, consultoria de

media, desenho gráfico, brand identity e database consultansy. Ogilvy é pioneira no

marketing interativo e os seus projetos englobam uma estratégia de marketing e de

desenvolvimento digital das marcas, desenvolvimento de interfaces multi-plataformas

(web, mobile, jogos), desenvolvimento de sites (user experience design, design e

desenvolvimento de aplicações web, base de dados e marketing) e ainda publicidade

online, social media e marketing direto. Actualmente o grupo Ogilvy está entre as

maiores empresas de comunicação a nível mundial, empregando mais de 15 000

pessoas e operando em 120 países. A Ogilvy Portugal opera com diversos clientes a

nível internacional (Emirates, Ford, IBM, Angola Cables, entre outras marcas) e

nacional (Nestlé, Bene Farmacéutica, Luso, Correio da Manhã, Parmalat, Yoggi, ente

outras).

Objetivos

O estágio na Ogilvy teve como objetivo principal obter conhecimento das várias

etapas inerentes à gestão de projetos digitais, principalmente ter conhecimento de

como se processa as fases de desenvolvimento web e implementação dos projetos. As

atividades desenvolvidas por mim, como online producer, ao longo do estágio

inseriram-se na fase de desenvolvimento e prenderam-se essencialmente na

realização de testes de usabilidade, em desktop e mobile, dos sites e aplicações para

Facebook desenvolvidos pela empresa. Outras tarefas foram executadas,

nomeadamente; tarefas ligadas à gestão do conteúdo dos projetos; apoio e realização

de tarefas ligadas ao departamento de accounting, tais como tratamento e inserção de

Página | 22

conteúdos (texto e imagem em backoffice) e envio de press releases e desenvolvimeno

de newsletters (ver anexos) através da adaptação do código HTML/CSS pré-

desenvolvido pela equipa de produção digital e em conformidade com as normas do

World Wide Web Consortium (W3C).

Metodologia e descrição das atividades desenvolvidas

O processo de integração no ambiente de trabalho da agência, nomeadamente

na equipa de produção digital, deu-se essencialmente através da participação nas

reuniões semanais, durante as quais tive conhecimento dos projetos e atividades

desenvolvidas pelo grupo de trabalho e das tarefas que me foram atribuídas

semanalmente, e pelo acompanhamento sistemático da gestora de projetos e minha

supervisora no local do estágio. Neste capítulo serão apresentados os recursos, assim

como os métodos utilizados na concretização das tarefas entregues, dando principal

destaque à metodologia usada para a realização dos testes de usabilidade. De referir,

que os testes de usabilidade foram realizados apenas por mim por questões de politica

de privacidade3. Os sites e aplicações ainda se encontravam em fase de

desenvolvimento, sendo que não poderia ser divulgada qualquer informação sobre

estes, nem poderiam ser testados por pessoas externas à empresa. Atribuíram-me esta

função por ser imparcial e não estar diretamente envolvida no desenvolvimento dos

produtos, podendo assim representar o utilizador sem divulgar informações

confidenciais.

Além dos testes de usabilidade, outras atividades foram concretizadas ao longo

do estágio como gestão de conteúdos (com recurso a sistemas de gestão de conteúdo

como o Drupal e outras ferramentas, tais como Adobe Photoshop) e desenvolvimento

em HTML de algumas newsletters. Apenas faço referência a estas actividades, sem no

entanto desenvolver a explicação das mesmas, aludindo mais uma vez à política de

privacidade da empresa.

3 “Trabalho que não foi aprovado ou usado pelo cliente não lhe pertence a si para fazer uso dele, e não

pode ser partilhado ou discutido fora da Ogilvy.” (informação contida no dossier entregue a todos os

novos colaboradores da agência)

Página | 23

Seguem alguns dos sites e aplicações testadas (ver screenshots em anexo):

Sites

http://www.angolacables.co.ao/

https://saboreiaavida.nestle.pt/cozinhar/

https://saboreiaavida.nestle.pt/

http://www.receitascomnatas.pt/

Aplicações

App Luso (passatempo para Facebook)

App Fitness Holmes Place (passatempo para Facebook)

App Árvore Petológica (Nestlé Purina)

Considerando que a web é um ambiente dinâmico, assim como os seus

utilizadores, planeei a avaliação dos sites considerando diferentes parâmetros:

Velocidade de ligação à Internet

Sistema operativo: Windows, iOS e Android

Browsers: Interne Explorer, Chrome, Firefox e Safari

Tipo de dispositivo: Destktop (Windows), tablet (iPad) e smartphones (iPhone e

telemóvel Android)

Para a concretização dos testes de usabilidade em desktop e mobile criei uma

checklist como solução alternativa à avaliação através de guidlines completas que em

geral contam com uma centena de recomendações o que pode tornar o processo de

avaliação bastante moroso. A checklist apresenta um conjunto mínimo de

recomendações diretamente aplicáveis aos projetos que focalizam alguns aspetos

considerados importantes da interface e que, potencialmente, podem hospedar os

problemas mais graves de usabilidade. Este tipo de inspeção pode ser particularmente

interessante quando se deseja realizar avaliações rápidas de usabilidade, investigar a

consistência da interface e verificar mudanças ocasionadas pela manutenção do site.

Trata-se de um tipo de inspeção de custo relativamente baixo que pode ser adaptado

às diversas situações de avaliação, bastando selecionar as recomendações

ergonómicas adequadas. A inspeção de guidelines deve ser utilizada com critério e não

Página | 24

substitui o uso de outros métodos de avaliações com utilizadores. A inspeção com o

uso de guidelines é adequada durante a construção de protótipos funcionais uma vez

que a maioria das recomendações é endereçada a objetos de interação.

Acessibilidade Sim Não Obs.

Tempo de abertura do site é razoável

Flash e add-ons são usados moderadamente

Imagens têm atributo ALT. Captions são usadas em áudio e vídeo

Site tem uma página de erro 404 personalizada

Botões e caixas são facilmente clicáveis e reconhecíveis

Navegação e feedback

Navegação principal é facilmente identificável

A estrutura de navegação é clara e simples

Itens de navegação são claros e concisos

Quantidade de botões e links é razoável

Logo do site tem link para a página inicial

Links são consistentes e fáceis de serem identificados

Não há links quebrados

Caixa de pesquisa é de fácil acesso, ampla e existe em todas as páginas

É fornecido feedback sobre a localização do utilizador no site (mapa do site e breadcrumbs)

Navegação é consistente em todas as páginas

Ligações são descritivas (não existem links “click aqui”)

URL do site é memorável

Existência de um botão “undo”

As URLs devem são curtas e apresentam cores diferentes do restante texto

Navegação da página em uma única direção

É sempre fornecido feedback sobre as acções do utilizador

Os títulos dos links são claros e percetíveis para o utilizador

Redução ao máximo da entrada de dados

Legibilidade

Existe contraste adequado entre o texto e o fundo

Tamanho da fonte/espaçamento facilita a leitura

Estilos e cores são consistentes

Bold e itálico são usados de forma moderada e adequada. Uso de letras maiúsculas é evitado

Anúncios e pop ups não são obstrutivos

A informação mais importante para o utilizador tem destaque suficiente na página

Layout

Layout das páginas é consistente em todo o site

O layout é consistente em todas as plantaformas e ecrãs

Página | 25

O conteúdo mais importante é exibido em primeiro

Existe uma página especifica para impressão

Os ícones usados são consistentes com as ações que executam

Formulários e mensagens

Apenas questões necessárias são apresentadas em formulários

Os itens de preenchimento obrigatório são distinguíveis dos restantes

As mensagens de erro estão junto dos elementos que contem o erro

Os menus dropdown longos são evitados

Existe uma confirmação de envio de formulário

Os campos são rotulados com termos comuns

Os formulários estão a funcionar e enviam para os recipientes corretos

A pesquisa está a funcionar e as mensagens de erro são adequadas

Página inicial

Login com o nome do utilizador é exibido no site

Localização da empresa e informações de contacto são facilmente acessíveis a partir da homepage

Existe uma política de privacidade

O URL do site funciona com ou sem www (URL de redireccionamento)

Ajuda

Existe ajuda contextual nas interações mais complexas

As mensagens de erro ajudam a resolver o problema

Eficiência

O número de cliques para realizar determinada tarefa é mínimo

As opções e funcionalidades fornecidas são as mínimas necessárias

Responsive

O site foi testado em dispositivos de vários tamanhos para verificar a integridade do conteúdo exibido

Os conteúdos multimédia estão adaptados ao contexto mobile

Os conteúdos foram optimizados para mobile

Layout é consistente em todas as plataformas e ecrãs

Todos os elementos gráficos devem ser limitados aos limites dos ecrãs

Após a realização dos testes de usabilidade, através do uso de checklist, aos

sites anteriormente referidos, pude chegar a várias observações e considerações finais,

que passo a descrever.

De um modo geral os sites e aplicações apresentam resposta positiva à maioria

dos itens incluídos na checklist. A navegação principal é facilmente identificável, a

estrututra de navegação é geralmente clara e simples, os itens de navegação são

Página | 26

concisos ao longo de todo o site/aplicação, a navegação é consistente em todas as

páginas, assim como o layout e os ícones. As caixas de pesquisa são amplas e de fácil

acesso. As interfaces fornecem feedback que informa o utilizador sobre o que está a

fazer no momento e onde se encontra no site. As informações relevantes aparecem

em destaque. Estes são os pontos positivos que pude encontrar na maioria das

interfaces. Porém, pontos menos positivos e algumas falhas na concretização de

tarefas, com menor ou maior grau de gravidade, foram registados durante a avaliação

dos sites. Esses erros, principalmente os de maior urgência e que dificultavam a

experiência do utilizador, foram posteriormente corrigidos.

Vejamos quais os principais erros apontados:

- Algumas funcionalidades perderam-se na navegação através dos dispositivos

móveis (por exemplo o login ou a caixa de pesquisa);

- Texto, imagens e botões fora dos limites do ecrã em dispositivos móveis;

- Tempo de abertura dos sites mais demorado com o acesso através de

dispositivos móveis;

- Alguns formulários apresentavam campos com nomes não adequados;

- Existência de pop up’s com pouca visibilidade;

- Contraste entre texto e fundo pouco adequado;

- Ausência de botão “undo”;

- Existência de alguns links quebrados;

- Existência de alguns menus dropdown longos.

Em suma, os sites e aplicações desenvolvidas na Ogilvy apresentam mais erros

de usabilidade quando utilizados em dispositivos móveis. Embora os desenvolvedores

da Ogilvy tenham apresentado esforços para incluir sempre o RWD em todos os

projetos, alguns aspetos devem ser melhorados enquanto a técnica é aplicada:

simplificar ou ocultar elementos desnecessários no ecrã dos dispositivos menores;

evitar elementos que possam prejudicar ou tornar mais lento o desempenho dos sites

quando acessados em dispositivos móveis (por exemplo slideshows e menus de

navegação demasiado longos); tirar vantagem do uso dos recursos mobile como

geolocalização e mudança na orientação do dispositivo (horizontal ou vertical).

Página | 27

A usabilidade nos dispositivos móveis não tem o mesmo peso que a usabilidade

nos computadores desktop. O seu peso é muito maior. É importante destacar que em

frente ao desktop o utilizador tem concentração total enquanto navega na Internet. No

caso de utilização de um dispositivo móvel não é a mesma coisa, o utilizador foca-se

em outras tarefas. Enquanto o telemóvel ou tablet é o foco secundário. Por isso, a

importância de se ter uma boa usabilidade para captar a atenção do utilizador é algo

vital para o desenvolvimento de sites e aplicações de design responsivo.

Os métodos de avaliação de usabilidade são auxílios que devem ser

considerados dentro do processo de desenvolvimento de aplicações e não como uma

etapa isolada. Deve-se lembrar sempre que o objetivo principal de uma avaliação é

melhorar a interface e não apenas estimar o quanto ela é boa ou má. Pode-se dizer

que uma boa avaliação de usabilidade não é aquela que apenas identifica os

problemas de usabilidade mas que auxilia a equipa de desenvolvimento a solucioná-los

e a melhorar a interação do utilizador. Recomenda-se a utilização de mais de um

método de avaliação, pois um único método não é capaz de identificar todos os

problemas possíveis.

Página | 28

Conclusão

O estágio na Ogilvy permitiu-me estar em contato com a realidade de uma

agência de publicidade e comunicação e, mais concretamente, entrar em contato com

uma equipa de produção digital (gestores de projeto, desenvolvedores front-end e

back-end e accounts). Permitiu-me acompanhar e ter conhecimento de todo o

processo ligado ao desenvolvimento de projetos digitais. Permitiu-me também ter

conhecimento das ferramentas e métodos de trabalho mais utilizados pela agência na

produção de aplicações web e, consequentemente, enriquecer a minha apreensão

sobre conceitos que estão na vanguarda da era digital, como por exemplo o Mobile

First.

Ao longo do estágio obtive uma boa experiência prática, encarando os desafios

com dedicação, em condições ótimas de trabalho. O estágio revelou-se uma excelente

oportunidade para por em prática os conceitos teóricos aprendidos na componente

letiva do Mestrado Novos Media e Práticas Web, nomeadamente a aplicação de testes

de usabilidade.

Concluído, este estágio permitiu-me, essencialmente, assimilar a grande

importância de incluir os testes de usabilidade no desenvolvimento de aplicações web,

como forma de melhorar a experiência do utilizador e atrai-lo para o uso da interface.

Tive também a perceção de como o Responsive Web Design está cada vez mais

inserido na política de desenvolvimento de projetos digitais de uma grande agência de

comunicação como a Ogilvy.

Página | 29

Bibliografia

Cybis, W.; Betiol, A.H.; Faust, R. 2007. Ergonomia e Usabilidade. Conhecimentos,

métodos e aplicações. Navatec.

Dix, Alan. 2004. Human-Computer Interaction. Person Education.

ISO 9241-11. 1998. Ergonimics requirements for office work with visual display

terminals, part 11. Guidance on Usability.

Krug, Steve. 2010. Rocket surgery made easy: the do-it-yourself-guide to finding and

fixing usability problems. Berkeley, Ca: New Riders Press.

Nemer, A. C. 2006. Estudo da usabilidade em telephones celulares. Trabalho fonal

(Mestrado Profissional em Computação). Instituto de Computação, Universidade

Estadual de Campinas.

Nielsen, Jackob; Budiu, Raluca. 2012. Mobile Usability. Pearson Education.

Nielsen, Jakob. 1993. Usability Engineering. Mountain View. California: Ed. Academic

Express.

Nielsen, J.; Molich, R. 1990. Heuristic Evaluation of User Interface. Proc. ACM CHI'90

Conf. Seattle, WA, 1–5 April, 249-256.

Norman, D.A.; Nielsen J. 2010. “Gestural Interfaces: A Step Backward in Usability.” Vol.

17. Issue 5.

Marcotte, Ethan. 2014. Responsive Web Design. A Book Apart.

Rocha, H. V.; Baranauskas, M. C. C. Design e avaliação de Interfaces Humano

Computador. Campinas, SP: NIED – UNICAMP, 2003.

Rubin, Jeffrey & Chisnell, Dana. 2008. Handbook of usability testing: How to plan,

design and conducteffective test (2nd ed.). New York: Wiley.

Wroblewski, Luke. 2011. Mobile First. A Book Apart.

Página | 30

Referências online

Marcotte, Ethen. Maio 2010. http://alistapart.com/article/responsive-web-design

Wroblewski, Luke. Novembro 2009. http://www.lukew.com/ff/entry.asp?933

www.w3.org

http://www.w3.org/2002/09/usabilityws.html

http://validator.w3.org/

http://ogilvy.pt/

http://guidelines.usability.gov/

Página | 31

ANEXOS

Página | 32

1 – Site Angola Cables: sreenshots do site em desktop e sreenshots do site em

dispositivos móveis tirados durante o teste de usabilidade.

Página | 33

Página | 34

2 – Site Saboreia a Vida da Nestlé: sreenshots do site em desktop e sreenshots do site

em dispositivos móveis tirados durante o teste de usabilidade.

Página | 35

Página | 36

3 – Site Cozinhar da Nestlé: sreenshots do site em desktop e sreenshots do site em

dispositivos móveis tirados durante o teste de usabilidade.

Página | 37

Página | 38

3 – Site Dá Gosto - Receitas com Natas da Parmalat: sreenshot do site em desktop

Página | 39

4- Aplicação para Facebook da Luso (screenshots) do teste

Página | 40

5- Aplicação para Facebook Fitness Holmes Place

Página | 41

6- Aplicação para Facebook Purina

Página | 42

7- Newsletters

Página | 43

8- Tab Yoggi