Академический Документы
Профессиональный Документы
Культура Документы
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
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
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
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
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
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
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
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
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
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
26/8/2008
Clarindo Pd u a
23
26/8/2008
Clarindo Pd u a
24
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
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 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 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
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
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
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