Este documento discute a importância da usabilidade e funcionalidade no design de sites. Ele explica que os sites devem ser auto-explicativos e funcionar bem para o usuário sem problemas técnicos. Também discute problemas comuns de usabilidade como vocabulário confuso e design pouco claro, e fornece dicas sobre como criar uma hierarquia visual clara e separar áreas de forma definida.

1. Usabilidade e funcionalidade DESIGN INDUSTRIAL MULTIMEDIA EVA OLIVEIRA 0708

2. Usabilidade e funcionalidade Usabilidade User Centered-Design Site deve ser “auto-explicativo” Funcionalidade O site funciona bem? O site deve estar a funcionar convenientemente deixando o utilizador fora de questões técnicas Deve ser usável, que é o mesmo que dizer o utilizador consegue manusear o site sem esforço cognitivo.

3. Principais Problemas de Usabilidade Vocabulário e etiquetagem pouco claro Os utilizadores têm muitas vezes que se lembrar os gráficos são confusos e visualmente fracos Design do site pouco apurado Existe pouca conformidade entre o design e o tipo de utilizadores O design não tem como ponto de partida os objectivos dos utilizadores

4. Os 5 W’s Quando um utilizador chega ao site quais as 5 perguntas que não queremos que ele faça? Onde estou eu? Onde devo começar? Onde está o _____ ? Quais os aspectos fundamentais desta página? Porque é que lhes chamaram isto?

5. Por onde começar? Precisamos ter consciência que a forma como se desenha um site não é a forma como as pessoas o vão usar. Deve esperar-se que o utilizador vai apreciar cada pixel e tecer uma consideração sobre ele. O que o utilizador faz é passar uma vista de olhos sobre o site, procurar algum texto e clicar no primeiro link que lhe chame a atenção. Pensamos quase sempre que o nosso site é uma obra prima, e o que o utilizador faz na realidade é passar por ele a 70 km/h.

6. Factos Não se lêem páginas, passam-se os olhos por elas Temos sempre muita pressa Sabemos que não precisamos de ler tudo Somos bons nisto de passar os olhos pelas páginas Não fazemos as escolhas óptimas Quando se desenha uma páginas, achamos que os utilizadores vão olhar, ver, e perceber qual a melhor forma de fazer determinada acção, mão não é assim que funciona.

7. Factos Os utilizadores não lêem instruções Os utilizadores usam as técnicas sem as perceber, muitas vezes com a ideia errada de como as coisas funcionam. Quando fazem alguma coisa que funciona, guardam-na em memória.

8. O que fazer num site Criar uma hierarquia visual em cada página Usar as convenções a nosso favor Separar a página em áreas bem definidas Tornar óbvio o que é clicável Minimizar ruídos Omitir palavras desnecessárias

9. 1 A coisa mais importante é a mais proeminente As coisas estão ligadas visualmente Bread Crumbs (migalhas..que nos indicam o caminho que fizemos)

10. 2 Metáforas normalmente usadas para certas funcionalidades como o shopping cart, ou cloudview

11. CONTEÚDOS INFORMATIVOS MENU CONTEUDOS MENU ESTRUTURAL E PESQUISA FUNCIONALIDADES CONTEÚDOS INFORMATIVOS

12. CONTEÚDOS INFORMATIVOS MENU CONTEUDOS MENU ESTRUTURAL FUNCIONALIDADES CONTEÚDOS INFORMATIVOS

13. Postura do Utilizador Já conhece o site e procura informação - vai directo ao menu ou à pesquisa Não conhece o nosso site, e apanha a informação que lhe chama mais à atenção: Neste caso as duas healines

14. Como determinar se o design é bom O utilizador deve conseguir responder às seguintes perguntas: Que site é este?(ID) Qual a página onde me encontro?(nome da página) Quais as principais opções do site? (secções) Quais as minhas opções neste nível?(local navigation) Onde estou eu?(marca do sítio onde estou) Onde posso procurar?

15. Exercícios Nos sites: http://www.wired.com http://www.thecoolhunter.net Desenhe a estrutura do site. Responda às questões do acetato 14. Quais as funcionalidade do site. Distinga as várias estruturas das páginas e desenhe a hierarquia em arvore Dê soluções para os problemas encontrados baseado nos acetatos anteriores

16. Referência e Recursos Web • Don’t Make Me Think, Steve Krug • Designing Web Usability, Jakob Nielsen • Interactivity By Design • Design Wise, Alison Head • www.useit.com • www.webpagesthatsuck.com • www.fixingyourwebsite.com • www.usableweb.com