melhores práticas de usabilidade no desenvolvimento web

ESTUDO DAS MELHORES PRÁTICAS DE USABILIDADE NO DESENVOLVIMENTO WEB

Keidi Nienkötter

Prof. Orientador Francisco Spaeth

PORQUE ESTUDAR A USABILIDADE?

Tornar sites fáceis de utilizar; Sites são diferentes de softwares desktop; Manter a atenção do usuário; Satisfazer o usuário para que ele volte.

“A vida atual pede simplicidade, objetividade, clareza e concisão. Um

Website simples é facilmente compreendido, identificado, assimilado...

e recordado.” (DAMASCENO, 2003, p. 17)

ARQUITETURA DE INFORMAÇÃO

Organização do conteúdo; Definição de rótulos para menus e títulos de

páginas; Preparação para estruturar a navegação.

“A arquitetura de informação deve destacar o conteúdo que é realmente

relevante em cada página e agrupar as informações da forma mais parecida possível com o modelo mental dos

usuários, ou seja, com aquilo que eles pensam.” (MEMÓRIA, 2006)

NAVEGAÇÃO

Navegação global; Navegação local; Navegação contextual;

“Navegação clara e bem estruturada é uma das melhores oportunidades que um site possui de criar uma boa

impressão” (KRUG, 2006, p. 35).

NAVEGAÇÃO GLOBAL

“Complementa a informação disposta de modo hierárquico (a

“taxionomia”), habilitando os movimentos verticais e laterais. É

aplicado ao site inteiro e se integra ao design gráfico.”

(AGNER, 2006)

NAVEGAÇÃO LOCAL

NAVEGAÇÃO CONTEXTUAL

MIGALHAS DE PÃO

Migalha de pão de localização: mostra a localização em relação à página inicial;

Migalha de pão de caminho: mostra exatamente o caminho que o usuário percorreu;

Migalha de pão de atributo: demonstra uma classificação do assunto buscado.

FERRAMENTA DE BUSCA

Precisa estar sempre disponível; Deve ser simples sem muitos campos para

se preencher; Ordenar os resultados por relevância; Não repetir as ocorrências.

Um pouco mais da metade dos usuários são voltados à busca, cerca

de um quinto dos usuários são voltados a links e o resto exibe um

comportamento misto. NIELSEN (2000, p.224)

BOTÕES Deve parecer clicável; Posição dos botões de acordo com sua função; Cores (caso tenha distinção) devem seguir uma

lógica já conhecida.

LINKS

Colocar palavras que tem a ver com o conteúdo ao qual o link se refere;

Ter aparência de link.

“As palavras ‘Clique’ e ‘Aqui’ dificilmente contêm informações e,

portanto, não devem ser usadas como elementos de design que atraem a atenção do usuário.”

(NIELSEN, 2000, p. 55)

FORMULÁRIOS

Não exigir o preenchimento de dados desnecessários;

Não exigir que o usuário formate o campo (Ex: CPF);

Apresentar mensagens de erro quando ocorrerem, deixando claro onde está o erro;

Quando ocorrer erro, retornar o formulário com os campos já preenchidos;

Cuidar da aparência do formulário para que não passe despercebido.

PÁGINA PRINCIPAL

É o resumo do site; Deve chamar a atenção para coisas

importantes;

“A home page deve conter somente as informações que interessam ao

usuário”. (AGNES, 2006)

PÁGINAS INTERNAS

A navegação deve permanecer visível; Precisa de um título que identifique o

conteúdo; O usuário deve sempre saber onde está, e

como continuar.

“Os usuários devem ser capazes de encontrar links e navegar para sites

internos e externos sem perder tempos no portal da empresa

propriamente dito.” (AGNES, 2006, p. 67)

TÍTULOS Corresponder ao conteúdo de determinada

página; Mostrar ao usuário que o mesmo chegou ao

lugar esperado; Apresentar hierarquia para facilitar o

entendimento;

“É importante especificar bons títulos de página, pois os títulos são muitas vezes usados como a principal referência às páginas.”

(NIELSEN, 2000, p.123)

CORES

Use cores com alto contraste entre o texto e o fundo.

Use fundos de cores lisas ou padrões de fundos extremamente sutis.

Exemplo

Testes de usabilidade

Importância dos testes de usabilidade; Por que fazer a pesquisa?

“Os testes de usabilidade são de grande utilidade para que possamos

projetar produtos que sejam fáceis de usar e, mais do que isso, capazes de proporcionar uma boa experiência.”

(MEMÓRIA, 2006, p. 138)

PESQUISA - COMO FOI DEFINIDA

Utilizar um site que já está no ar; Um site que tenha alguma característica

incomum; Testes rápidos.

PESQUISA - COMO FOI APLICADA

Feita entre os dias 30/06/2007 e 05/06/2007 com um total de 58 alunos; 25 de Sistemas de Informação (UNIDAVI); 6 de Engenharia de Produção (UNIDAVI); 7 do Curso de Informática Básica (NEP); 20 do Curso Técnico de Manutenção e

Programação de Computadores (SENAI);

PESQUISA - RESULTADOS

Conhecimento em informática: Baixo Intermediário Alto

34%

61%

5%

Alto

Intermediário

Baixo

PESQUISA - RESULTADOS

Qual a periodicidade que você acessa a Internet? Todos os dias Uma vez por semana Uma vez por mês Raramente

88%

9%0%3%

Todos os dias

Uma vez por semana

Uma vez por mês

Raramente

PESQUISA - RESULTADOS

Pra você, qual é a coisa mais marcante no site? Ou o que você clicou primeiro?

45%

22%

10%

7%

5%5% 2%

2%

2%

Menu

Fotos

Propaganda Villa Vicenzi

Imóveis

Organização

Lay-out

Praticidade

Simplicidade

História da empresa

PESQUISA - RESULTADOS

Para você qual é a principal função deste site?

34%

47%

9%10%

Divulgação de imóveis

Divulgação de imóveis a venda

Venda e locação de imóveis

Mostrar produtos / Mostrar figuras/ Negócios / Compra de imóveis /Informação / Divulgar o trabalho daimobiliária

PESQUISA - RESULTADOS

Que cores você consegue lembrar que tem no site?

52

6

43

12

49

24

0

10

20

30

40

50

60

Amarelo Laranja Branco Verde Azul Cinza

Amarelo

Laranja

Branco

Verde

Azul

Cinza

PESQUISA - RESULTADOS

O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas? Coluna da esquerda

49

29

1

810

37

0

10

20

30

40

50

60

Menu

Contatos

Informações

Endereço

Telefones

Logotipo

Não respondeu

PESQUISA - RESULTADOS

O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas? Coluna central

25

32

1514

0

5

10

15

20

25

30

35

Banner FormulárioContato

Link empresa Não respondeu

Banner

Formulário Contato

Link empresa

Não respondeu

PESQUISA - RESULTADOS

O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas? Coluna da direita

22%

39%

36%

3%

Somente imóveis

Observou todo o conteúdo

Só observou as fotos

Não respondeu

PESQUISA - RESULTADOS

Teve alguma informação que você queria achar no site e não conseguiu?

Informações mais detalhadas 1

Falta de fotos para alguns imóveis 12

Preço do Villa Vicenza 2

Falta de explicação no formulário 1

Localização Geográfica dos imóveis 3

Busca por preço 2

Imóveis para locação 2

Busca por localização 4

Proprietário dos imóveis 1

PESQUISA - RESULTADOS

Notou algum banner de divulgação?

55%

45%

Sim

Não

PESQUISA - RESULTADOS

Por acaso, você já visitou o site de outra imobiliária?

Caso Sim: São melhores ou piores que o site apresentado?

PESQUISA - RESULTADOS

Em que o site precisa melhorar?

16

21

25

22

0

5

10

15

20

25

30

Organização Beleza Conteúdo Serviços

Organização

Beleza

Conteúdo

Serviços

PESQUISA - RESULTADOS A última questão da pesquisa pedia sugestões dos

usuários para que o site melhore. As sugestões mais relevantes para esta pesquisa são: Melhorar a forma de busca, por preço, por localização ou

buscas personalizadas; Inclusão de mapas de localização dos imóveis; Retirar os links nos e-mails da coluna da esquerda, isso

porque algumas pessoas não sabem como copiar o e-mail e utilizá-lo em seu webmail, por exemplo. (o link no Windows abre automaticamente o Outlook);

Vídeos ou melhores fotos para cada imóvel, ajudando na escolha do usuário.

ANALISE GERAL DA PESQUISA

Conteúdo; Navegação; Links de e-mail; Buscas.

CONCLUSÃO

Verificou-se com este trabalho os principais itens a se observar no desenvolvimento de sites para que a utilização do usuário final seja fácil e eficaz;

Foi demonstrada a importância de fazer testes para identificar possíveis falhas de usabilidade.

PROPOSTAS DE CONTINUIDADE

Aplicar metodologias para a criação de Websites com design centrado no usuário;

Aplicação de testes de usabilidade em fase inicial de desenvolvimento;

Estudar a fundo a arquitetura da informação.

Referências AGNER, Luiz. Ergodesign e arquitetura de informação: trabalhando com

o usuário. Rio de Janeiro: Quartet, 2006.

ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. NBR 9241-11: Requisitos Ergonômicos para Trabalho de Escritórios com Computadores: Orientações sobre Usabilidade. Rio de Janeiro: 2002.

DEITEL, H.M. Internet & World Wide Web, como programar. Tradução de: Edson Furmankiewicz. 2. ed. Porto Alegre: Bookman, 2003.

______. XML, como programar. Tradução de: Luiz Augusto Salgado e Edson Furmankiewicz. Porto Alegre: Bookman, 2003.

DAMASCENO, Anielle. Webdesign: Teoria e Prática. Florianópolis: VisualBooks, 2003.

DIAS, Claudia. Usabilidade na WEB: Criando portais mais acessíveis. 3. ed., Rio de Janeiro: Alta Books, 2003.

FERNANDES, Francisco; LUFT, Celso Pedro; GUIMARÃES, F. Marques. Dicionário Brasileiro Globo. 36. ed., São Paulo: Globo, 1994.

Referências FURGERI, Sérgio. Business to business: Aprenda a desenvolver aplicações.

São Paulo: Érica, 2001.

KRISHNAMURTHY, Balachander; REXFORD, Jennifer. Redes para Web. Tradução de Daniel Vieira. Rio de Janeiro: Campus, 2001.

KRUG, Steve. Não me faça pensar. Tradução de Acauan Pereira Fernandes. Rio de Janeiro: Alta Books, 2006.

MEMÓRIA, Felipe. Design para a Internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.

RADFAHRER, Luli. Design, web, design: 2. São Paulo: Market Press, 2003

RIOS, Rosângela Silqueira Hickson. Projeto de sistemas Web orientados a interface. Rio de Janeiro: Campus, 2003.

ZELDMAN, Jeffrey. Projetando web sites compatíveis: como construir web sites compatíveis com browsers e dispositivos variados. Rio de Janeiro: Elsevier, 2003.

Perguntas?