Capitulo 11 Livro Nielsen

834 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
  • Seja o primeiro a comentar

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>

×