Capitulo 11 Livro Nielsen

795 visualizações

Publicada em

Apresentação produzida pelos alunos da Pós em Sistemas Web da UnoChapecó/SC, 2009. Prof. Luiz Agner

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
795
No SlideShare
0
A partir de incorporações
0
Número de incorporações
151
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Capitulo 11 Livro Nielsen

  1. 1. Projeto de Interfaces Web Capítulo 11 Equilibrando Tecnologia com as necessidades das pessoas Alexandre Cauzio Cezar Emerson Vagner
  2. 2. INTRODUÇÃO <ul><li>Neste capítulo discutiremos estratégias para ajudar a evitar a mal implementação da multimídia em sites e usá-la em seu favor. </li></ul><ul><li>Retrospectiva para 2000: uma nota de Jakob Nielsen. </li></ul>
  3. 3. Utilize multimídia quando servir para beneficiar o público <ul><li>Páginas de introdução mal formuladas, sem sentido e pesadas; </li></ul><ul><li>É essencial saber quanta interatividade é adequada e que ferramentas usar em diferentes situações para criar um web site bem-sucedido; </li></ul>
  4. 4. <ul><li>www.atlantis.com </li></ul><ul><ul><li>Carrega rápido, navegação consistente, interação simples. </li></ul></ul><ul><ul><li>Desvantagem: página de splash irritante. Recursos ocultos. </li></ul></ul>
  5. 5. <ul><li>http://automobiles.honda.com </li></ul><ul><ul><li>Divertida, informativa, botões grandes e de fácil navegação. </li></ul></ul><ul><ul><li>Dificuldade: arrastar o mouse pela imagem para controlar o carro </li></ul></ul>
  6. 6. <ul><li>www.optibo.se </li></ul><ul><ul><li>Instruções muito longas; </li></ul></ul>
  7. 7. <ul><li>www.miniusa.com </li></ul><ul><ul><li>Difícil navegação. </li></ul></ul>
  8. 8. <ul><li>www.in-n-out.com </li></ul><ul><li>Alta repetição da canção da empresa; </li></ul><ul><ul><li>Página de splash sem sentido; </li></ul></ul>
  9. 9. <ul><li>www.pepsiworld.com </li></ul><ul><ul><li>Ícones de controle de som não distinguíveis; </li></ul></ul>
  10. 10. Superando barreiras à multimídia <ul><li>A mídia rica (multimídia) pode mais envolve que as páginas HTML; </li></ul><ul><li>Sites de música com áudio; </li></ul><ul><li>Manipuladores em sites automotivos; </li></ul><ul><li>Vídeos em sites de entretenimento; </li></ul><ul><li>Passeios virtuais em site de hotéis e imobiliárias; </li></ul><ul><li>Cada equipamento em frente às necessidades dos usuários; </li></ul>
  11. 11. Acomode usuários que não usam tecnologia recentemente <ul><li>Nem todos os usuários possuem máquinas sofisticadas; </li></ul><ul><li>Tenha sempre conteúdos alternativos para usuários que não tem acesso à multimídia; </li></ul><ul><li>Não use o som como forma principal de apresentar o site; </li></ul><ul><li>Não esqueça dos usuários com deficiência; </li></ul><ul><li>Site para crianças, jovens e adultos: seja realista; </li></ul><ul><li>Gosto pessoal não tem nenhum papel no julgamento da usabilidade; </li></ul>
  12. 12. Projete para a velocidade de conexão de seu público <ul><li>Pesquisas mostram que quase metade dos usuários ainda possuem conexão discada; </li></ul><ul><li>Muitos arquivos de mídia são grandes e exigem muito tempo para download; </li></ul><ul><li>Princípio básico: otimize o tamanho dos arquivos e minimize o tempo de carregamento; </li></ul>
  13. 13. Forneça um indicador de status de download simples e exato <ul><li>Não tem alternativa? Minimize a impaciência do usuário colocando um indicador de status para fornecer um feedback visual; </li></ul><ul><li>Ver exemplos>> </li></ul><ul><li>Evite usar termos técnicos em sua interface; </li></ul>
  14. 14. <ul><li>www.audi.com </li></ul><ul><ul><li>Possui um contador apropriado que informa a porcentagem de dados que foi carregado; </li></ul></ul>
  15. 15. <ul><li>www.ebay.com </li></ul><ul><ul><li>Informações sem animação ou indicador de status não são aconselháveis; </li></ul></ul>
  16. 16. <ul><li>www.travelocity.com </li></ul><ul><ul><li>As estrelas piscando dão às pessoas alguma esperança de que o sistema está funcionando; </li></ul></ul>
  17. 17. Caixas de diálogo enganosas <ul><li>Com essa proliferação de vírus na Web, os usuários temem ao fazer download de qualquer coisa. </li></ul><ul><li>Você notou a palavra publicidade no canto inferior direito? </li></ul>
  18. 18. Subestime o conhecimento técnico dos usuários <ul><li>As pessoas ficam apreensivas sobre a tecnologia. Evitam instalar plug-ins e elementos desconhecidos; </li></ul><ul><li>Escolha um plug-in que seja comum na maioria das máquinas; </li></ul><ul><li>A melhor alternativa e oferecer um conteúdo não-multimídia as pessoas sem plug-ins adequados </li></ul><ul><li>Ver exemplos>> </li></ul>
  19. 19. <ul><li>http://automobiles.honda.com </li></ul><ul><ul><li>Mensagens de segurança confundem as pessoas; </li></ul></ul>
  20. 20. <ul><li>www.mtv.com </li></ul><ul><ul><li>Quando trabalhar com vídeos, use formatos de arquivo que sejam de uma ou duas versões anteriores às novas versões dos Media Players populares; </li></ul></ul>
  21. 21. Detecte a largura de banda dos usuários <ul><li>Não exija que seus usuários selecionem a largura de banda; </li></ul><ul><li>Ofereça a pessoas com conexões lentas funcionalidades específicas; </li></ul><ul><ul><li>Ver exemplos>> </li></ul></ul>
  22. 22. <ul><li>www.apple.com </li></ul><ul><ul><li>As opções de vídeo nessa página são complicadas e muito técnicas a usuários médios; </li></ul></ul><ul><ul><li>Identifique vídeos como pequenos e grandes; </li></ul></ul>
  23. 23. <ul><li>www.miniusa.com </li></ul><ul><ul><li>A página de splash lembra aos usuários as configurações de resolução de tela que devem usar; </li></ul></ul><ul><ul><li>Desativar os bloqueadores de pop-up; </li></ul></ul>
  24. 24. Obedeça às convenções de interface <ul><li>O modelo mental das pessoas de como a web funciona é baseado em suas experiências anteriores na web; </li></ul><ul><li>Não defenda sua interface, corrija-a; </li></ul><ul><li>Não deixe que a tecnologia seja um obstáculo na experiência dos seus usuários; </li></ul><ul><li>Atenha-se a ao que as pessoas já sabem e se sentem confortáveis, não as faça trabalhar mais do que já trabalha; </li></ul><ul><ul><li>Ver exemplos>> </li></ul></ul>
  25. 25. <ul><li>www.coldwellbanker.com </li></ul><ul><ul><li>Símbolo de acesso a casa mal identificados; </li></ul></ul><ul><ul><li>Ao dar foco nas fotos o sistema fica lento; </li></ul></ul><ul><ul><li>Fácil de se perder na casa; </li></ul></ul>
  26. 26. <ul><li>www.atlantis.com </li></ul><ul><ul><li>O painel de navegação está oculto sob o termo Atlantis Navigator; </li></ul></ul>
  27. 27. <ul><li>www.hummer.com / www.miniusa.com </li></ul><ul><ul><li>Bons exemplos de barra de rolagem; </li></ul></ul>
  28. 28. <ul><li>www.haribon.org.ph </li></ul><ul><ul><li>As barras de rolagem parecem indicadores de norte/sul do mapa; </li></ul></ul><ul><ul><li>Não há indicador de controle deslizante; </li></ul></ul>
  29. 29. <ul><li>www.cokemusic.com </li></ul><ul><ul><li>As setas triangulares ao lado de cada figura dentro da caixa não são notadas como setas de rolagem; </li></ul></ul>Barras de rolagem devem ser padrão; Devem ter setas para baixo e para cima, e um indicados de rolagem;
  30. 30. <ul><li>www.bk.com </li></ul><ul><ul><li>O uso excessivo de multimídia é mais prejudicial que benéfico; </li></ul></ul><ul><ul><li>Os anúncios são móveis e difíceis de capturar com o mouse; </li></ul></ul><ul><ul><li>O site agora oferece uma lista de itens de menu em um estilo mais tradicional </li></ul></ul>
  31. 31. <ul><li>www.nestle.com </li></ul>
  32. 32. Excessos de Multimídia <ul><li>Utilize somente se acrescentar valor ao conteúdo; </li></ul><ul><li>Criar é mais caro e mais demorado; </li></ul><ul><li>Utilize sempre a maneira eficiente de ilustrar a questão; </li></ul><ul><li>Beneficio principal de ilustrar melhor o conteúdo e dispensa leitura. </li></ul>
  33. 33. Excessos de Multimídia <ul><li>Controle o volume para que esteja com tom agradável à navegação; </li></ul><ul><li>Utilize som somente para alertar escolhas incorretas ou inconsistências do usuário à navegação; </li></ul><ul><li>Não utilize som e animação somente para chamar atenção. </li></ul><ul><li>Foque no publico alvo, faixa etária é muito importante; </li></ul>
  34. 34. Excessos de Multimídia <ul><li>Permita ao usuário ter controle sobre o som e reprodução de vídeos e áudio; </li></ul><ul><li>Som altos repentinos causam perturbação e são desagradáveis; </li></ul>
  35. 35. Vídeos para Web <ul><li>A Web é interativa, as pessoas gostam de ter controle sobre o conteúdo; </li></ul><ul><li>Os usuários não gostam de ficar na frente do computador vendo vídeos longos; </li></ul><ul><li>Após 24 segundos de vídeo o foco do usuário se dispersa; </li></ul><ul><li>No caso de exibir comerciais, reproduza depois do vídeo principal; </li></ul>
  36. 37. Layout com simplicidade <ul><li>Não é simples; </li></ul><ul><li>Exige coragem e disciplina; </li></ul><ul><li>Tenha em mente como trabalha um decorador experiente e um decorador amador; </li></ul><ul><li>Bons Web designers aproveitam ao máximo o espaço(Tela e banda) </li></ul>
  37. 38. Layout com simplicidade <ul><li>Faça uma crítica do site; </li></ul><ul><li>Simplifique as interações; </li></ul><ul><li>Os ícones, figuras, imagens e animações devem ser funcionais e condizer com o conteúdo; </li></ul>
  38. 39. Antes de inserir um elemento, pergunte–se. <ul><li>Ele simplifica a tarefa do usuário? </li></ul><ul><li>Ele adiciona valor ao usuário? </li></ul>Se a resposta for “não”, elimine-o
  39. 40. Simplifique <ul><li>Inclua recursos para simplificar as tarefas; </li></ul><ul><li>Interações complexas dispersam o usuário; </li></ul><ul><li>É melhor ter poucos recursos úteis de que muitos inúteis. </li></ul>
  40. 41. Simplifique <ul><li>Layouts simples são mais leves, rápidos e econômicos; </li></ul><ul><li>Beneficiam e auxiliam mais o usuário; </li></ul><ul><li>Agregue valor ao layout com informações realmente importantes; </li></ul>
  41. 43. Um design mais elegante <ul><li>Sempre existirão novas tecnologias, os primeiros a adotá-las são minoria; </li></ul><ul><li>Considere que leva tempo para que o usuário aceite e aprenda; </li></ul><ul><li>Interfaces ineficazes são muito enfeitadas; </li></ul><ul><li>Design elegante é agradável e funcional; </li></ul><ul><li>Considere sempre a finalidade do projeto; </li></ul>
  42. 44. <ul><li>“ Mantenha os usuários no centro de seu projeto de design.Seja humilde. Escute-os.Eles o tornarão bem-sucedido” </li></ul><ul><li>Jakob Nielsen </li></ul><ul><li>Hoa Loranger </li></ul>

×