Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Capitulo 3 Livro Nielsen

1,448 views

Published on

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

  • Be the first to comment

Capitulo 3 Livro Nielsen

  1. 1. Projeto de Interfaces Web Revendo as descobertas iniciais de usabilidade da Web Alexandre Cauzio Cezar Emerson Vagner
  2. 2. OITO PROBLEMAS QUE NÃO MUDARAM
  3. 3. <ul><li>Links que não mudam de cor quando visitados; </li></ul><ul><li>Alterar a função do botão voltar; </li></ul><ul><li>Abrir novas janelas de navegador; </li></ul><ul><li>Janelas pop-up; </li></ul><ul><li>Elementos de design que parecem anúncios; </li></ul><ul><li>Violação das convenções da Web; </li></ul><ul><li>Conteúdo vago e modismo vazio; </li></ul><ul><li>Conteúdo denso e texto não-escaneável. </li></ul>
  4. 4. Links que não mudam de cor quando visitados <ul><li>Passado, presente, futuro; </li></ul><ul><li>Mudar a cor de um link visitado; </li></ul><ul><li>Mosaic 1993; </li></ul><ul><li>Violar esse convenção, problemas de usabilidade; </li></ul><ul><li>Memória de curto prazo; </li></ul><ul><li>Questionamento de alguns designers; </li></ul><ul><li>A exceção. </li></ul>
  5. 5. Alterar a função do botão voltar <ul><li>Interação Humano-Computador; </li></ul><ul><li>(1980) Aplicativos-desfazer, Web-voltar; </li></ul><ul><li>Usuários especialistas; </li></ul><ul><li>Segundo recurso mais utilizado; </li></ul><ul><li>Benefícios (2--1); </li></ul><ul><li>A lei de Fits(1954); </li></ul><ul><li>Métodos de desativação mais comuns; </li></ul><ul><li>Botão voltar, desabilitado ou não funciona, causa confusão. </li></ul>
  6. 6. Abrir novas janelas de navegador <ul><li>Violação de expectativas; </li></ul><ul><li>Insistência de alguns designers; </li></ul><ul><li>Não perder os visitantes; </li></ul><ul><li>Problema de usabilidade; </li></ul><ul><li>Usuários experientes; </li></ul><ul><li>Múltiplas janelas, confusão; </li></ul><ul><li>Desvantagens; </li></ul><ul><li>Exceção; </li></ul><ul><li>Contradições. </li></ul>
  7. 7. Janelas pop-up <ul><li>Um mau contra a usabilidade; </li></ul><ul><li>Irritação dos usuários; </li></ul><ul><li>Distorcem o que os usuários esperam da web; </li></ul><ul><li>Má fama; </li></ul><ul><li>Dificultam usuários com necessidades especiais; </li></ul><ul><li>Fechados, antes de serem visualizados; </li></ul><ul><li>Utilizados de forma correta; </li></ul><ul><li>Perda nas vendas; </li></ul><ul><li>Pesquisa ; Resposta negativa . </li></ul>
  8. 8. Elementos de design que parecem anúncios <ul><li>Usuários orientados a objetivos; </li></ul><ul><li>Cegueiras a banners; </li></ul><ul><li>Rejeição; </li></ul><ul><li>Caixas coloridas; </li></ul><ul><li>Usuários condicionados; </li></ul><ul><li>Bloqueadores. </li></ul>
  9. 9. Violação das convenções da Web <ul><li>Lei de Jacob; </li></ul><ul><li>Expectativas; </li></ul><ul><li>Exemplo . </li></ul>
  10. 10. Conteúdo vago e modismo vazio <ul><li>Nas empresas falta de clareza e simplicidade; </li></ul><ul><li>Usuários impacientes; </li></ul><ul><li>Web impregnada de conteúdo vago; </li></ul><ul><li>Sistema de pesquisa (SEO); </li></ul><ul><li>Linguagem complexa . </li></ul>
  11. 11. Conteúdo denso e texto não-escaneável <ul><li>Blocos densos de textos; </li></ul><ul><li>Órgãos governamentais; </li></ul><ul><li>Texto breve, escaneável, acessível; </li></ul><ul><li>Nível de escolaridade. </li></ul>
  12. 12. MUDANÇA TECNOLÓGICA: SEU IMPACTO SOBRE A USABILIDADE
  13. 13. As novas tecnologias reduziram os problemas com: <ul><li>Tempo lento de download </li></ul><ul><li>Frames </li></ul><ul><li>Flash </li></ul><ul><li>Listagens de pesquisa de baixa relevância </li></ul><ul><li>Multimídia e vídeos </li></ul><ul><li>Layouts congelados </li></ul><ul><li>Incompatibilidade entre várias plataformas </li></ul>
  14. 14. Tempo lento de download <ul><li>“ A maioria dos sites que cresceram significativamente na década de 1990 apresentavam interfaces simples com poucas imagens gráficas e rápido download de páginas ”. (Pg 86) </li></ul><ul><ul><li>Ex.: Google, eBay, Yahoo, Amazon. </li></ul></ul><ul><li>Hoje esta simplicidade não é mais tão importante mas deve haver equilíbrio. </li></ul>
  15. 15. Frames <ul><li>Desrespeitaram muitas convenções de interface dificultando: </li></ul><ul><ul><li>O envio da URL; </li></ul></ul><ul><ul><li>Marcar como favorito; </li></ul></ul><ul><ul><li>A impressão da página; </li></ul></ul><ul><ul><li>Alem de quebrar o botão voltar. </li></ul></ul><ul><li>Alguns destes problemas já foram resolvidos mas ainda é melhor evitar frames na maioria das vezes. </li></ul>
  16. 16. Flash <ul><li>Deve ser usado para oferecer aos usuários poderes e recursos adicionais que não estão disponíveis em uma página estática. </li></ul><ul><li>Não deve ser usado para embelezar uma página. </li></ul><ul><li>O Flash cria obstáculos que impedem as pessoas de obterem rapidamente o que precisam. </li></ul>
  17. 17. Listagens de pesquisa de baixa relevância <ul><li>O campo de busca é uma das maneiras mais comum das pessoas encontrarem o que procuram. </li></ul><ul><li>Os primeiros softwares de pesquisas eram ineficazes porque ordenavam pela freqüência com que os termos ocorriam. </li></ul><ul><li>A classificação deve ser feita pela relevância dos termos. </li></ul>
  18. 18. Multimídia e vídeos longos <ul><li>Três avanços tornaram a multimídia mais aceitável na Web atual. </li></ul><ul><ul><li>Maior largura de banda. </li></ul></ul><ul><ul><li>Softwares para compressão e reprodução dos vídeos </li></ul></ul><ul><ul><li>Produção voltada para Web. </li></ul></ul>
  19. 19. Layouts congelados <ul><li>Layout congelado = largura fixa da pagina. </li></ul><ul><li>Os usuários odeiam a rolagem horizontal. </li></ul><ul><li>Layouts congelados são indesejáveis mesmo quando a pagina for mais estreita que a janela do usuário. </li></ul><ul><li>Recomenda-se um “layout líquido” que se ajusta a diferentes resoluções. </li></ul>
  20. 20. Incompatibilidade entre várias plataformas <ul><li>Recomenda-se esperar 5 anos após a distribuição de uma nova versão para não se preocupar com a anterior. </li></ul><ul><li>Navegadores mais utilizados: </li></ul><ul><ul><li>Internet Explorer 7 – 47,81% </li></ul></ul><ul><ul><li>Firefox - 19,28% </li></ul></ul><ul><ul><li>Internet Explorer 6 – 19,14% </li></ul></ul><ul><ul><li>Outros – 13,77% </li></ul></ul><ul><ul><ul><li>Fonte O Globo Digital publicado em 02/03/2009 </li></ul></ul></ul>
  21. 21. Incompatibilidade entre várias plataformas <ul><li>Loja virtual da Vivo somente funciona no IE. </li></ul><ul><li>Em resposta à reclamação de um cliente, o atendimento da Vivo diz que o Firefox não suporta HTML. (fonte geek42.org) </li></ul>
  22. 22. <ul><li>Á medida que os usuários adaptam-se ao ambiente on-line os seguintes problemas de usabilidade tornam-se menos importante: </li></ul><ul><ul><li>Clicabilidade incerta </li></ul></ul><ul><ul><li>Links que não são azuis </li></ul></ul><ul><ul><li>Rolagem </li></ul></ul><ul><ul><li>Registro </li></ul></ul><ul><ul><li>Urls complexos </li></ul></ul><ul><ul><li>Menus suspensos e em cascata </li></ul></ul>Adaptação: Como os usuários influenciaram a usabilidade
  23. 23. <ul><li>Clicabilidade incerta </li></ul><ul><ul><li>Os usuários não sabem onde clicar nas telas. </li></ul></ul><ul><ul><li>Deve-se oferecer sugestão de clicabilidade para que os usuários não menosprezem um link. </li></ul></ul><ul><li>Links que não são azuis </li></ul><ul><ul><li>Links devem se destacar claramente do corpo do texto. </li></ul></ul><ul><ul><li>Também devem mudar de cor após ter sido clicado. </li></ul></ul>Adaptação: Como os usuários influenciaram a usabilidade
  24. 24. <ul><li>Rolagem </li></ul><ul><ul><li>Usuários podem abandonar a página após tomar uma decisão com base no que esta visível. </li></ul></ul><ul><ul><li>Utilizar dicas que mostrem que há mais informações abaixo da área visualizável. </li></ul></ul><ul><li>Registro </li></ul><ul><ul><li>Usuários não gostam de se registrar. </li></ul></ul><ul><ul><li>Não fazer perguntas não pertinentes ou que invadam a privacidade. </li></ul></ul>Adaptação: Como os usuários influenciaram a usabilidade
  25. 25. <ul><li>URLs complexos </li></ul><ul><ul><li>Não são mais tão prejudiciais quanto costumavam ser. </li></ul></ul><ul><ul><li>Websites devem ter URLs de até 50 caracteres. </li></ul></ul><ul><li>Menus suspensos e menus em cascata </li></ul><ul><ul><li>Quanto mais complexo o menu, mais difícil é para as pessoas manipulá-lo. </li></ul></ul><ul><ul><li>Tomar cuidado com menus excessivamente elaborados que possuam níveis hierárquicos. </li></ul></ul>Adaptação: Como os usuários influenciaram a usabilidade
  26. 26. COMO OS DESIGNERS ATENUARAM OS PROBLEMAS DE USABILIDADE
  27. 27. <ul><li>Plug-ins e tecnologias de ponta; </li></ul><ul><li>Interface 3D com usuário; </li></ul><ul><li>Design poluído; </li></ul><ul><li>Páginas Splash; </li></ul><ul><li>Componentes da interface gráfica personalizados; </li></ul><ul><li>Exposição dos dados do usuário; </li></ul><ul><li>Palavras Inventadas; </li></ul><ul><li>Conteúdo ultrapassado; </li></ul><ul><li>Inconsistência dentro de um Web site; </li></ul><ul><li>Solicitações prematuras de informações pessoais; </li></ul><ul><li>Vários sites; </li></ul><ul><li>Páginas órfãs; </li></ul>
  28. 28. Plug-ins e tecnologia de ponta <ul><ul><ul><li>A algum tempo, este tópico costumava estar no topo da lista dos fatores de risco para tanto para programadores/designers e ate mesmo usuários. </li></ul></ul></ul><ul><ul><ul><li>As tecnologias existentes eram muitas fezes imaturas, e mal planejadas na questão de portabilidade com novas versões. </li></ul></ul></ul>
  29. 29. Plug-ins e tecnologia de ponta <ul><li>Duas coisas aconteceram desde então: </li></ul><ul><li>Primeiro, os programadores/designers tiveram o bom censo e reconheceram que não se pode forçar novas tecnologias aos usuários. </li></ul><ul><li>Segundo, as pessoas quando encontram uma caixa de dialogo para downloads, elas simplesmente clicam em cancelar, temendo serem infectadas por vírus. O que tornou demorada a atualização/adoção por parte dos usuários. </li></ul>
  30. 30. Plug-ins e tecnologia de ponta <ul><li>Atualmente este item esta maduro, as tecnologias quando criadas já trazem consigo longo tempo de testes e um grande esforço na parte de atualização, visando compatibilidade com versões anteriores. </li></ul><ul><li>O que minimizou em muito o impacto na hora da adoção ou atualização de uma base tecnológica. </li></ul>
  31. 31. Interfaces 3D com o usuário <ul><li>Já ouve uma melhoria considerável neste ponto, mas o seu principal problema esta na tecnologia disponível para seu uso. Imaginem a exibição de imagens em 3D em uma superfície bidimensional (a tela) sendo controlada por um dispositivo de entrada também bidimensional (o mouse), o conjunto destes fatores, tende a diminuir a usabilidade. </li></ul><ul><li>No entanto esta tecnologia tem seu uso assegurado em softwares como aplicativos médicos em que pode ser crucial visualizar tumores e pacientes em 3D. </li></ul>
  32. 32. Design poluído <ul><li>Muitos devem recordar, dos gifs animados, links piscando, cores fortes, uma sobrecarga de elementos na pagina. Esta era a idéia “quanto mais informações mais chance de atrair o usuário”. </li></ul><ul><li>Hoje, as interfaces estão cada vez mais, aderindo a idéia de simplicidade, a chamada interface minimalista. Os sites se concentram mais diretamente nos negócios, que é o mais importante para o cliente. </li></ul>
  33. 33. Paginas splash <ul><li>Hoje raramente são vistas, Mas ainda se encontram alguns sites. Seu uso deve ser extinto pois tornam a navegação lenta e dão a impressão de o site cuida mais de sua imagem do que questões importantes ao usuário. </li></ul><ul><li>O argumento mais forte que justificava esta pratica, era de que as paginas splash serviriam como a capa de uma revista. </li></ul><ul><li>A principal diferença entre uma capa de revista e a homepage de um web site é que a capa precisa ser suficientemente atraente para que o leitor sinta vontade de comprá-la, e o web site o usuário já escolheu. </li></ul>
  34. 34. Paginas splash
  35. 35. Componentes de interface gráfica personalizados. <ul><li>“ Quando você clica em um botão, você espera que ele se comporte como um botão.” </li></ul><ul><li>É este o principio que se deve seguir, se você tem um componente (botão, barra de rolagem, menu) que não se comporte, ou não se assemelhe com o componente padrão, isto com certeza trará dificuldades ao usuário. </li></ul>
  36. 36. Componentes de interface gráfica personalizados.
  37. 37. Exposição dos dados do usuário <ul><li>A garantia de que os dados do usuário não serão usados de maneira incorreta, constitui papel importante para a confiabilidade do site. </li></ul><ul><li>Pensando nisso, muitos sites tem a preocupação em informar dados sobre a empresa, tais como: sua localização e outros meios de contato, para que o usuário possa consultá-los quando achar necessário. E também grande esforço para garantir a segurança dos dados do usuário, para que estes não sejam usados indevidamente. </li></ul>
  38. 38. Palavras inventadas <ul><li>Durante a explosão da onda “pontocom” parecia que cada site precisava ter um vocabulário próprio. Isto prejudicava a usabilidade, pois o usuário não sabia em que opções do menu clicar. Alem de que praticamente tira seu site do mecanismo de busca, pois quando o usuário for fazer uma pesquisa, ela vai procurar pela palavra habitual. </li></ul>
  39. 39. Conteúdo ultrapassado <ul><li>De certa maneira, o site possuir informação desatualizada em si, não constitui um grande problema, se esta informação estive-se organizada na forma de arquivos do site, e com fácil acesso ao usuário, teria sim um grande valor. </li></ul><ul><li>O problema esta em distribuir esta informação “velha” como sendo “nova” ao usuário. </li></ul>
  40. 40. Inconsistência dentro de um web site <ul><li>No inicio, os sites praticavam o “Cada um por si”. Cada nova pagina era projetada para o agora, com pouco planejamento de como ela interagiria com o restante do site. </li></ul><ul><li>Desde o ano 2000, pelo menos as empresas investiram muito na sua apresentação ao cliente, e estão muito mais consistentes pelo menos em termos de conteúdo principal. </li></ul>
  41. 41. Solicitações prematuras de informações do pessoais <ul><li>Se um estranho lhe aborda-se em uma festa, e pedi-se telefone, endereço, CPF, histórico medico, você provavelmente ficaria assustado e sairia correndo. </li></ul><ul><li>O mesmo acontece com os usuários, se os sites forem muito intrometidos, as pessoas se recusam a responder suas perguntas. </li></ul><ul><li>Os melhores web sites tem um estratégia mais apropriada, somente solicitam esse tipo de informação após o usuário ter confirmado que pretende fazer um compra. </li></ul>
  42. 42. Vários sites <ul><li>No inicio as empresas lançavam muitas vezes um site diferente para cada serviço que prestassem e a medida em que crescia o usuário fica perdido, sem saber que endereço utilizar para o serviço q desejava. </li></ul><ul><li>Hoje as empresas sabem que é preciso uma estratégia integrada com a web, e seus serviços estão dispostos todos em seu site principal. </li></ul><ul><li>Mas este problema ainda é muito grave em decorrência de ainda existirem muitos “micro sites” que ainda fazem uso desta pratica. </li></ul>
  43. 43. Paginas órfãs <ul><li>Um problema muito comum nos anos 90, mas hoje isso é muito raro, pois já é uma pratica comum fornecer ao usuário um numero mínimo de operações, para que ele possa se conectar ao restante do site. </li></ul>

×