WEB

1. WEB Usabilidade

2. em janeiro de 2000 - 10 milhões de sites 1,6 bilhão de páginas 72 milhões de servidores 275 milhões de usuários navegando a cada 24hs 3,3 milhões de novas páginas 123 000 novos usuários dezembro de 2000 - 25 milhões de sites previsão para fim de 2002 - 100 milhões de sites WEB Por que estudar IHC ?

3. em 1998 cerca de 3 bilhões de dólares deixaram de ser ganhos na WEB norte- americana por causa de designs mal feitos com a enorme oferta de alternativas usuários tem uma notável impaciência e insistência em gratificação imediata WEB Por que estudar IHC ?

4. usabilidade assume uma importância ímpar na economia da Internet no design de produtos e de software tradicionais, usuários pagam antes e experimentam a usabilidade depois na WEB experimentam a usabilidade antes e pagam depois WEB Por que estudar IHC ?

5. Usabilidade na WEB- Ex.: IBM Por que estudar IHC ?

6. O caso IBM • recurso mais popular em seu site • função de busca • as pessoas não conseguiam descobrir como navegar • segundo recurso mais popular • botão de ajuda. • solução • amplo processo de redesign, envolvendo centenas de pessoas e milhões de dólares. • Resultado na primeira semana depois do redesign em fevereiro de 1999 • o uso do botão de ajuda caiu 84% • as vendas aumentaram 400%. Por que estudar IHC ?

7. Usabilidade na WEB • Clareza na arquitetura da informação • essencial que o usuário consiga discernir o que é prioritário e o que é secundário no site. • Um bom arranjo da informação • usuários sempre terão dificuldades em encontrar o que procuram • devem ser ajudados • prover um senso de como a informação está estruturada e localizada. • uma das alternativas adotadas em alguns sites, é prover um mapa do site Por que estudar IHC ?

8. Usabilidade na WEB • Facilidade de navegação • Uma máxima é que o usuário deveria conseguir acessar a informação desejada no máximo em três cliques • Simplicidade • Quem navega quer encontrar o mais rapidamente possível o objetivo da busca. • a pirotecnia deve ser evitada, dando ao usuário paz e tranquilidade para que possa analisar a informação Por que estudar IHC ?

9. Simplicidade Onde estou ? O que este site faz ? Por que estudar IHC ?

10. Simplicidade Por que estudar IHC ?

11. Usabilidade na WEB • A relevância do conteúdo • Sempre que questionados sobre sites, usuários se referem a qualidade e relevância do conteúdo • Um bom texto para essa mídia • o mais conciso e objetivo possível • não promocional ou publicitário • leitores online imprimem textos • necessitam páginas bem curtas • informação secundária deixada para páginas de suporte Por que estudar IHC ?

12. Usabilidade na WEB • Manter a consistência • Quando as coisas acontecem sempre do mesmo jeito, os usuários não precisam se preocupar a respeito do que irá acontecer • um Website deve ser gerenciado como um projeto único de interface com o usuário Por que estudar IHC ?

13. Usabilidade na WEB • Tempo suportável • tempo de carga das páginas deve ser curto • 10 segundos é o máximo de tempo antes que as pessoas percam o interesse • na Web os usuários já têm uma baixa expectativa • limite pode aumentar para 15 segundos • Foco nos usuários • 'sair do caminho' • para que o usuário possa fazer o que quer da maneira mais rápida possível. Por que estudar IHC ?

14. Usabilidade na WEB - resumo • Clareza na arquitetura da informação • Facilidade de navegação • Simplicidade • A relevância do conteúdo • Manter a consistência • Tempo suportável • Foco nos usuários Por que estudar IHC ?

15. Amazon (1995) Por que estudar IHC ?

16. Amazon (2000) Por que estudar IHC ?

17. UOL 1995 A Folha Web, site da Folha de S. Paulo, no ar em1995, trazia reportagens selecionadas do jornal impresso e a charge do dia Por que estudar IHC ?

18. UOL Futuro Barra superior de ajuste do navegador Barra de navegação principal verticalizada à esquerda Nomes das estações no miolo da página Um dos estudos para a homepage do futuroUniverso Online, ainda com o nome de trabalhopara preservar o sigilo Por que estudar IHC ?

19. Por que estudar IHC ?

20. UOL – 28.04.1996 Por que estudar IHC ?

21. UOL - agosto de 1996 Por que estudar IHC ?

22. UOL ( junção com Abril) Em dezembro de 1996, a home page ficoumais quente: foi aberto espaço para imagens Por que estudar IHC ?

23. UOL – 04.1999 No aniversário de 3 anos do UOL, em abril de 1999,a home page do UOL mudou para espelhar ocrescimento do site. Os assinantes votaram eajudaram a escolher a nova cara do UOL Por que estudar IHC ?

24. UOL - 1999 Em outubro de 1999, entra no ar a nova homecom a cor escolhida pelo público. Por que estudar IHC ?

25. UOL 2002 Por que estudar IHC ?

26. USP 2002 Por que estudar IHC ?

27. UNICAMP - 2002 Por que estudar IHC ?

28. WEB Projeto de Navegação

29. Navigation Design • Mais que botões e barras de índice • Estudo do movimento no espaço • Interação entre objetivos do usuário e meios de como facilita-los • Como remover barreiras? • Como construir estradas? Por que estudar IHC ?

30. Navegação (site de venda de livros) • Questões gerais: • Onde estou? • Para onde posso ir? • Como eu cheguei aqui? • Como posso voltar para o lugar de onde sai? Por que estudar IHC ?

31. Navegação (site de venda de livros) • Questões “purpose-oriented” • Como eu sei que minhas informações financeiras estão seguras? • Como posso proteger minha privacidade? • Como posso encontrar o item que procuro? • E se eu não estiver seguro do que exatamente quero? • Como posso fazer um preview de produtos para ver se me servem? • E se eu tiver problemas posso devolver? Por que estudar IHC ?

32. Navegação (site de venda de livros) • Questões “product or audience-oriented” • Como posso encontrar livros de um determinado autor? • Como posso encontrar livros que sejam similares aos que eu gosto? • Como posso saber o nível de leitura de um livro? • Como conseguir críticas ou recomendações? • Onde posso encontrar informações sobre novas edições ou prêmios? Por que estudar IHC ?

33. Dez qualidades para uma navegação de sucesso • Poder ser facilmente aprendida • Ser consistente • Prover feedback • Aparecer dentro do contexto • Oferecer alternativas • Economizar ação e tempo • Prover mensagens visuais claras • Usar rótulos claros e compreensíveis • Ser apropriada para os propósitos do site • Atender a comportamentos e objetivos do usuário Por que estudar IHC ?

34. Dez qualidades para uma navegação de sucesso • Poder ser facilmente aprendida • Conteúdo pode ser misterioso, mas chegar a ele não • Sem curva de aprendizagem • Tornar o site transparente e óbvio Por que estudar IHC ?

35. Dez qualidades para uma navegação de sucesso 2. Consistência • Elementos navegacionais sempre presentes, no mesmo lugar e com a mesma aparência • Erro comum – desaparecer com elementos navegacionais do menu quando o usuário está na página correspondente • Se necessária a quebra por exigência de conteúdo – criar subsites Por que estudar IHC ?

36. Dez qualidades para uma navegação de sucesso 3. Prover feedback • Somos condicionados a esperar reações de coisas com as quais interagimos • Toda nossa interação com o ambiente é baseada na avaliação de feedbacks • Criar controles reativos e prover informação sobre localização • Rollovers or mouseovers • Usar flechas ou apontadores para mostrar a posição corrente • http://www.nied.unicamp.br Por que estudar IHC ?

37. Por que estudar IHC ?

38. Dez qualidades para uma navegação de sucesso 4. Aparecer dentro do contexto • O usuário precisa ver possíveis caminhos para tomar decisões sobre movimento • Navegação deve estar sempre presente quando necessária • não deixar para botões do browser • Backlinks e forwardlinks and startlinks • back to / go to / start • ser descritivo • Entender onde as pessoas estarão quando terminarem de fazer alguma coisa (p. ex.: leitura de um grande artigo) Por que estudar IHC ?

39. Dez qualidades para uma navegação de sucesso 5. Oferecer alternativas • Usuários são diferentes tanto em equipamentos computacionais que usam como em preferências • Mapas de sites, busca, sites de menor performance, etc. • Acessibilidade • Importante tentar atender as necessidades de uma pessoa cega bem como de um usuário que não tem um determinado plug-in • Criar alternativa simplificada do site • Ex.: o site da Amazon tem versão somente textual. Por que estudar IHC ?

40. Dez qualidades para uma navegação de sucesso 6. Economizar ação e tempo • Nós ainda estamos aqui?! • sindrome a ser evitada • Enorme número de passos ou enormes formulários são sérias barreiras navegacionais • Prover atalhos de navegação • Mapa do site, index, lista de conteúdo, menus, etc. são essenciais para sites complexos • Estruturas recursivas • http://www.computers.com Por que estudar IHC ?

41. Por que estudar IHC ?

42. Por que estudar IHC ?

43. Dez qualidades para uma navegação de sucesso 7. Prover mensagens visuais claras • Estabelecer hierarquias visuais • Movimento, cor, posição etc. • Estabelecer um vocabulário visual • Padrões de WEB?! Por que estudar IHC ?

44. http://www.dynamicdiagrams.com/ Por que estudar IHC ?

45. Por que estudar IHC ?

46. Por que estudar IHC ?

47. Por que estudar IHC ?

48. Dez qualidades para uma navegação de sucesso 8. Usar rótulos claros e compreensíveis • Boa rotulagem é mais uma arte que uma ciência • Baseado no senso comum e na sensibilidade do usuário e no contexto • Ex.: em um site de restaurante o rótulo map site é associado com o quê? • Links como parte de uma história • Diferença sutil entre mistério e frustração • Economizar sempre que possível (departamento de administração de vendas X vendas) Por que estudar IHC ?

49. Dez qualidades para uma navegação de sucesso 9. Ser apropriada para os propósitos do site • Um site de vendas não necessariamente tem que ter as mesmas soluções de navegação de um site de informação • Comprar um livro é bem diferente de conseguir uma informação sobre um virus! Por que estudar IHC ?

50. Dez qualidades para uma navegação de sucesso 10. Suportar objetivos e comportamento dos usuários • Chave do sucesso de qualquer design • Como conhecer de que forma os usuários vão agir, pensar e o que realmente querem? • Cenários, observação etnográfica, entrevistas, etc. • Teste de usuário • Ex.: recommendation center da Amazon • http;//www.amazon.com Por que estudar IHC ?