Usabilidade

1.011 visualizações

Publicada em

Publicada em: Tecnologia, Design
  • Seja o primeiro a comentar

Usabilidade

  1. 1. Usabilidade <ul><li>e funcionalidade </li></ul>DESIGN INDUSTRIAL MULTIMEDIA EVA OLIVEIRA 0708
  2. 2. Usabilidade e funcionalidade <ul><li>Usabilidade </li></ul><ul><ul><li>User Centered-Design </li></ul></ul><ul><ul><li>Site deve ser “auto-explicativo” </li></ul></ul><ul><li>Funcionalidade </li></ul><ul><ul><li>O site funciona bem? </li></ul></ul><ul><li>O site deve estar a funcionar convenientemente deixando o utilizador fora de questões técnicas </li></ul><ul><li>Deve ser usável, que é o mesmo que dizer o utilizador consegue manusear o site sem esforço cognitivo. </li></ul>
  3. 3. Principais Problemas de Usabilidade <ul><li>Vocabulário e etiquetagem pouco claro </li></ul><ul><li>Os utilizadores têm muitas vezes que se lembrar </li></ul><ul><li>os gráficos são confusos e visualmente fracos </li></ul><ul><li>Design do site pouco apurado </li></ul><ul><li>Existe pouca conformidade entre o design e o tipo de utilizadores </li></ul><ul><li>O design não tem como ponto de partida os objectivos dos utilizadores </li></ul>
  4. 4. Os 5 W’s <ul><li>Quando um utilizador chega ao site quais as 5 perguntas que não queremos que ele faça? </li></ul><ul><ul><li>Onde estou eu? </li></ul></ul><ul><ul><li>Onde devo começar? </li></ul></ul><ul><ul><li>Onde está o _____ ? </li></ul></ul><ul><ul><li>Quais os aspectos fundamentais desta página? </li></ul></ul><ul><ul><li>Porque é que lhes chamaram isto? </li></ul></ul>
  5. 5. Por onde começar? <ul><ul><li>Precisamos ter consciência que a forma como se desenha um site não é a forma como as pessoas o vão usar. </li></ul></ul><ul><ul><ul><li>Deve esperar-se que o utilizador vai apreciar cada pixel e tecer uma consideração sobre ele. </li></ul></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul>
  6. 6. Factos <ul><ul><ul><li>Não se lêem páginas, passam-se os olhos por elas </li></ul></ul></ul><ul><ul><ul><ul><li>Temos sempre muita pressa </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Sabemos que não precisamos de ler tudo </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Somos bons nisto de passar os olhos pelas páginas </li></ul></ul></ul></ul><ul><ul><ul><li>Não fazemos as escolhas óptimas </li></ul></ul></ul><ul><ul><ul><ul><li>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. </li></ul></ul></ul></ul>
  7. 7. Factos <ul><ul><ul><ul><li>Os utilizadores não lêem instruções </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Os utilizadores usam as técnicas sem as perceber, muitas vezes com a ideia errada de como as coisas funcionam. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Quando fazem alguma coisa que funciona, guardam-na em memória. </li></ul></ul></ul></ul>
  8. 8. O que fazer num site <ul><ul><ul><ul><li>Criar uma hierarquia visual em cada página </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Usar as convenções a nosso favor </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Separar a página em áreas bem definidas </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Tornar óbvio o que é clicável </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Minimizar ruídos </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Omitir palavras desnecessárias </li></ul></ul></ul></ul>
  9. 9. 1 <ul><ul><ul><ul><li>A coisa mais importante é a mais proeminente </li></ul></ul></ul></ul><ul><ul><ul><ul><li>As coisas estão ligadas visualmente </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Bread Crumbs (migalhas..que nos indicam o caminho que fizemos) </li></ul></ul></ul></ul>
  10. 10. 2 <ul><ul><ul><ul><li>Metáforas normalmente usadas para certas funcionalidades como o shopping cart, ou cloudview </li></ul></ul></ul></ul>
  11. 11. CONTEÚDOS INFORMATIVOS MENU CONTEUDOS MENU ESTRUTURAL E PESQUISA FUNCIONALIDADES CONTEÚDOS INFORMATIVOS
  12. 12. CONTEÚDOS INFORMATIVOS MENU CONTEUDOS MENU ESTRUTURAL FUNCIONALIDADES CONTEÚDOS INFORMATIVOS
  13. 13. Postura do Utilizador <ul><ul><ul><ul><li>Já conhece o site e procura informação - vai directo ao menu ou à pesquisa </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Não conhece o nosso site, e apanha a informação que lhe chama mais à atenção: </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Neste caso as duas healines </li></ul></ul></ul></ul></ul>
  14. 14. Como determinar se o design é bom <ul><li>O utilizador deve conseguir responder às seguintes perguntas: </li></ul><ul><ul><li>Que site é este?(ID) </li></ul></ul><ul><ul><li>Qual a página onde me encontro?(nome da página) </li></ul></ul><ul><ul><li>Quais as principais opções do site? (secções) </li></ul></ul><ul><ul><li>Quais as minhas opções neste nível?(local navigation) </li></ul></ul><ul><ul><li>Onde estou eu?(marca do sítio onde estou) </li></ul></ul><ul><ul><li>Onde posso procurar? </li></ul></ul>
  15. 15. Exercícios <ul><ul><ul><ul><li>Nos sites: </li></ul></ul></ul></ul><ul><ul><ul><ul><li>http://www.wired.com </li></ul></ul></ul></ul><ul><ul><ul><ul><li>http://www.thecoolhunter.net </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Desenhe a estrutura do site. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Responda às questões do acetato 14. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Quais as funcionalidade do site. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Distinga as várias estruturas das páginas e desenhe a hierarquia em arvore </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Dê soluções para os problemas encontrados baseado nos acetatos anteriores </li></ul></ul></ul></ul>
  16. 16. Referência e Recursos Web <ul><li>• Don’t Make Me Think, Steve Krug </li></ul><ul><li>• Designing Web Usability, Jakob Nielsen </li></ul><ul><li>• Interactivity By Design </li></ul><ul><li>• Design Wise, Alison Head </li></ul><ul><li>• www.useit.com </li></ul><ul><li>• www.webpagesthatsuck.com </li></ul><ul><li>• www.fixingyourwebsite.com </li></ul><ul><li>• www.usableweb.com </li></ul>

×