Usabilidade em interface Web

Usabilidade em interface Web

Bibliografia Nielsen, J. Designing Web Usability, New Readers, 2000

Engenharia de Usabilidade Prof.: Clarindo Isaas Pereira da Silva e Pdua

Gestus Departamento de Cincia da Computao - UFMG

Krug, S.; Black, R. Don't Make Me Think: Common Sense Approach to Web Usability, New Riders, Oct 2000

26/8/2008
Clarindo Pd u a

Usabilidade em interface Web

Usabilidade em Interface Web

Comportamento do usurio Desenho de pginas Contedo

Comportamento do usurio

Pensa
Onde devo comear ? Porque eles chamaram isso disto ? Posso clicar nisso? Por que eles puseram isso aqui? Esses 2 links parecem ser os mesmos, seriam realmente?

No pensa OK, isso a lista de produtos deles O driver que preciso deve estar aqui Essas so as ofertas do dia

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Usabilidade em interface Web

Usabilidade em interface Web > Desenho de pginas

Desenho de pginas
Motivao:
A pgina a parte mais visvel do desenho Web Usabilidade na Web muito importante
No desenho de produtos ou de software tradicionais: consumidor paga antes e tem experincia com a usabilidade depois Na Web, usu rio experimenta a usabilidade antes e compra depois Competio acirrada: maior exposi o Perfil do usu rio pode ser mais variado Aspecto de publicidade

Erros comuns em desenho Web:

Modelo de neg cio na Web diferente uma pgina Web no e como um folder/brochura Gerncia de projeto: no administrar como um projeto corporativo tradicional interface e arquitetura da informao deve ser centrada no usurio Desenho da p gina deve considerar situaes realsticas de demora na carga, inexperincia dos usurios, etc cuidado com pginas boas somente em demonstrao

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Usabilidade em interface web > Desenho de p ginas > Erros comuns em desenho Web

Usabilidade em interface web > Desenho de p ginas

Estilo de redao: conciso, objetividade Links: pgina no deve ser tratada como uma ilha; os pontos de entradas devem ser bem planejados

Contedo deve ter valor real No exemplo, somente 20 % de conte do de interesse, 31% para controles do browser (azul), 23% para navegao no site(amarelo) e 16% de branco porque a codificao no permite reformata o. Diretrizes: contedo deve ocupar entre 50 a 80% e navegao ocupando da ordem de 20% em pginas terminais ou mais em pginas intermedi rias. An ncios devem ser considerados como espa o perdido assim como navega o Retire todos os elementos grficos indispens veis (retire e veja se faz falta): simplicidade

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Usabilidade em interface web > Desenho de p ginas > Contedo deve ter valor real

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

10

Pgina muito cheia

Usabilidade em interface web > Desenho de pginas > Contedo deve ter valor real

26/8/2008
Clarindo Pd u a

11

26/8/2008
Clarindo Pd u a

12

Leiaute Melhorado
Usabilidade em interface web > Desenho de pginas > Contedo deve ter valor real

Leiaute Melhorado
Usabilidade em interface web > Desenho de pginas > Contedo deve ter valor real

26/8/2008
Clarindo Pd u a

13

26/8/2008
Clarindo Pd u a

14

Stio Pblico ?
Usabilidade em interface web > Desenho de pginas > Contedo deve ter valor real

Usabilidade em interface Web > Desenho de pginas

Convenes de Navegao
Identificador do S tio Estrutura (links mais importantes) Nome da Pgina Utilitrios Caminho para pgina Pesquisa

26/8/2008
Clarindo Pd u a

15

26/8/2008
Clarindo Pd u a

16

Usabilidade em interface Web > Desenho de pginas > Conven es de navegao

Usabilidade em interface Web > Desenho de pginas

Desenho para vrias plataformas

Na Web, o usurio tem muito mais controle sobre a navega o do que numa interface de programa tradicional Na Web, deve-se esperar uma variedade de telas (dimenses, resolu o), fontes, etc. O desenho deve prever todas essas situaes. Por exemplo, um desenho Web pode ter que acomodar um fator de 100 entre o tamanho de tela de um workstation e um dispositivo de mo. Diretrizes:
Pginas devem ser especificadas de modo que os browsers possam adapt-la a qualquer circunstncia: codifique substncia, no apresentao Deve-se evitar cdigo no padro, que pode ser intrepretado de maneira diferente em cada browser, para especificao de pginas

26/8/2008
Clarindo Pd u a

17

26/8/2008
Clarindo Pd u a

18

Usabilidade em interface Web > Desenho de pginas > Desenho para vrias plataformas

Usabilidade em interface Web > Desenho de pginas

Dados tm longa vida

Inrcia de instalao
Dados mostram que o tempo com que os usurios atualizam seus browsers vem aumentando significativamente Recomenda-se ter uma coleo de verses de browers para testes Deve-se ser conservador em adotar novas tecnologias:
Poucos usurios tero acesso aos ltimos browsers Novas tecnologias podem trazer erros Melhor no us-las sem uma boa experincia Se for us -las, certifique-se que isso no prejudica os usu rios com browsers mais antigos.

Hardware tem vida curta, software tem vida mais longa mas dados podem ser eternos! Ex.: a Sun tem sempre usurios consultando informaes sobre seus produtos antigos Diretriz: Trate a informao utilizando padres de modo que a sua atualiza o frente e novas tecnologias fique facilitada

26/8/2008
Clarindo Pd u a

19

26/8/2008
Clarindo Pd u a

20

Usabilidade em interface Web > Desenho de pginas

Usabilidade em interface Web > Desenho de pginas > Tempo de Resposta

Tempo de resposta
O tempo de resposta o critrio mais importante para o desenho de pginas Web A demora percebida pelo usurio tambm importante Pesquisa mostra que os sites mais populares so tambm muito rpidos Um laboratrio (Arup), optou por pginas rpidas ao invs de muitos elementos grficos. Uma pesquisa sobre o stio obteve 201 comentrios (livres) onde 45 louvavam a rapidez de acesso e s um queixava que o stio no era visualmente estimulante

Diretrizes
Diminua a variabilidade no tempo de resposta Indique tamanho do downloading prximo aos links de pginas ou arquivos Invista em melhores servidores No futuro, quem sabe links vo poder mudar de forma conforme a expectativa de velocidade de acesso.

26/8/2008
Clarindo Pd u a

21

26/8/2008
Clarindo Pd u a

22

Usabilidade em interface Web > Desenho de pginas > Tempo de Resposta > Diretrizes

Usabilidade em interface Web > Desenho de pginas > Tempo de Resposta > Diretrizes

Planeje a carga de uma pgina

Remova grficos; aumente trfego Use tabelas coloridas, folhas de estilo e seja criativo com fontes para melhorar o aspecto grfico Reuse imagens. Quando usar elementos grficos, procure usar ocorrncias mltiplas da mesma imagem: imagem pode estar no cache local. O tamanho total de uma p gina d uma idia do tempo de carga. Procure respeitar os critrios de expectativa de tempo de resposta dos usurios O topo deve ser significativo mesmo sem imagens (mais texto menos imagens) Use atributo texto ALT para imagens (descreve imagem antes dela aparecer) Inclua atributos WIDTH e HEIGHT de todas as imagens para permitir ao browser uma carga mais rpida Tabelas complexas devem ser partidas em v rias tabelas.

26/8/2008
Clarindo Pd u a

23

26/8/2008
Clarindo Pd u a

24

Usabilidade em interface Web > Desenho de pginas

Usabilidade em interface Web > Desenho de pginas > Links

Links
H 3 formas de links:
Estruturais de navegao: usados para mudan as de pginas Associativos ou hipertextos: geralmente palavras sublinhadas, apontam para pginas com mais informaes sobre o texto ncora. Links de veja tambm: ajudam o usurio a encontrar o que querem se a pgina corrente no for o que ele deseja.

Diretrizes
Em links de hipertextos, texto ncora no deve ser muito longo: eles so usados pelos usurios como palavras-chave para pesquisas Evite links clique aqui : nem sempre usurio ir acionar o link atravs de cliques; clique aqui no traz informao.
Ex.: ao inv s de para informao sobre o beija-flor verde clique aqui use temos informaes adicionais sobre o beija-flor verde

O texto ncora de links de hipertextos deve ser curtos mas o texto vizinho deve dar mais informaes sobre o contedo do link para ajudar o usurio a decidir se vale a pena pesquis-lo.

26/8/2008
Clarindo Pd u a

25

26/8/2008
Clarindo Pd u a

26

Usabilidade em interface Web > Desenho de pginas > Links > Diretrizes

Usabilidade em interface Web > Desenho de pginas > Links > Diretrizes

Use cores padres para links

Use link-title, uma funcionalidade de browsers que expande uma explicao sobre um link quando um usu rio passa o mouse sobre ele. Indique o nome do stio, se diferente do atual, ou a parte do stio, se no mesmo stio, ao qual o link se refere. Adicione detalhes sobre o contedo do stio de destino Avise sobre possveis problemas ou restries relacionados com o stio alvo: ex.:, requer registro ou taxa cobrada. No podem exceder 80 caracteres; raramente devem exceder 60 No necessrio colocar link title para todos os links . O uso de link-title no dispensa os outros cuidados com rela o a links. Links para pginas ainda no vistas pelos usurios so geralmente azuis, enquanto links para pginas j vistas so p rpuras O uso de cores diferentes do padro desnorteia os usu rios

Sempre use a mesma URL para se referir a uma mesma pgina, caso contrrio, o browser no poderia reconhecer se um link j foi visitado. Um link sempre tem duas pontas: a partida e a chegada:
Retrica da partida: deixe claro para o usurio porque ele deixa um contexto e o que ele encontra na outra ponta do link Retrica da chegada: claramente situe o usurio na chegada ao novo contexto e dlhe o valor esperado em rela o ao ponto de partida.

26/8/2008
Clarindo Pd u a

27

26/8/2008
Clarindo Pd u a

28

Usabilidade em interface Web > Desenho de pginas > Links > Diretrizes

Usabilidade em interface Web > Desenho de pginas > Links > Diretrizes

Links externos: para fora da estrutura de um stio

No tente prender o usurio no seu stio: dificilmente ir conseguir e poder ganhar sua simpatia se voc puder ajud-lo A tentativa de diferenciar links externos, por exemplo, usando cintilao que no padro da internet, pode confundir o usurio Seja criterioso para no indicar links externos que no sejam teis para os usurios e para indicar o melhor ponto de acesso no stio de destino: usurios tipicamente s tm tempo para explorar 10% dos links que encontram

Links de chegada:
Valorize as referncias a seu s tio: faa as URLs de suas pginas permanentes. Para valorizar seus links evite abordar vrios temas em uma pgina

26/8/2008
Clarindo Pd u a

29

26/8/2008
Clarindo Pd u a

30

Usabilidade em interface Web > Desenho de pginas > Links > Diretrizes

Usabilidade em interface Web > Desenho de pginas > Links > Diretrizes

Links com abertura de nova janela: evitar

Cria nova janela na tela do usu rio sem permisso No permite voltar pgina anterior: pode confundir o usu rio

Links de propaganda
O link de propaganda deve ser objetivo, isto , deve ir direto ao assunto que motivou o interesse do usurio, no a uma p gina corporativa onde o usurio ainda ter que garimpar sua informa o. O banner de propaganda deve ser tratado como um link de hipertexto: a retrica de sada deve dar expectativas reais ao usurio do que encontrar no link para motivar sua sada.

Links de registros
Dificilmente, uma pgina de registro ou pagamento ser referenciada em um link externo: se tiver que exigir registros ou pagamentos, que existam outras pginas livre para os usurios explorarem Micropagamentos, quando estiverem populares, devem ser preferidos

26/8/2008
Clarindo Pd u a

31

26/8/2008
Clarindo Pd u a

32

Usabilidade em interface Web > Desenho de pginas

Usabilidade em interface Web > Desenho de pginas

Folhas de estilo
O desenho da p gina deve funcionar bem mesmo quando a folha de estilo desabilitada pelo usurio: desabilite a folha de estilo e veja o resultado. No use mais que duas fontes mas d vrias alternativas de escolha ao browser No use tamanhos absolutos de fontes use tamanho relativo ao tamanho da fonte base definido pelo usu rio. O uso de tamanho absoluto retira do usurio controle sobre seu tamanho.

Frames
Procure no us-los, Uma p gina Web, como criado originalmente, est associada com:
A viso da informa o na tela pelo usurio A unidade de navegao Um endereo textual usado para recuperar informao O armazenamento de informa o no servidor e a unidade de edi o do autor.

o uso de frames quebra este conceito. A unidade de navegao fica diferente da unidade de viso: dificulta a utiliza o de URLs para referenciar um informao.

26/8/2008
Clarindo Pd u a

33

26/8/2008
Clarindo Pd u a

34

Usabilidade em interface Web > Desenho de pginas > Frames

Usabilidade em interface Web > Desenho de pginas

Frames podem no funcionar bem para uma tela pequena Os browsers podem no imprimir bem os frames Dificultam a ao de mquinas de busca porque requerem uma deciso sobre qual composi o de frames usar como unidade de navegao em seus ndices. Alguns browsers tm dificuldade para registrar bookmark de frames Pesquisas mostram que usu rios preferem o desenho de pginas sem frames.

Credibilidade
Na internet, todos so iguais a princpio: importante dar credibilidade sua pgina. Cuidado com a aparncia Evite excessos de grficos e animaes No futuro, talvez existir um mecanismo de avaliao de pginas pelos usurios

26/8/2008
Clarindo Pd u a

35

26/8/2008
Clarindo Pd u a

36

Usabilidade em interface Web > Desenho de pginas

Impresso
Desenho de p ginas deve prever impresso Uma verso impressa pode requerer fontes e layouts diferentes Faa uma verso da pgina especfica para impresso, inclusive resolvendo a questo hipertextos.

26/8/2008
Clarindo Pd u a

37