Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Design e Usabilidade na Web

19.645 Aufrufe

Veröffentlicht am

Palestra sobre Design e Usabilidade na Web
Marcelo Vianna

Veröffentlicht in: Technologie

Design e Usabilidade na Web

  1. 1. Design e Usabilidade na Web Projetando interfaces que funcionamDesign e Usabilidade na Web Marcelo Vianna
  2. 2. O que vamos ver? •  Conceitos •  Metas da Usabilidade •  Principais Técnicas e Metodologias •  Arquitetura de Informação •  Design de Interface •  Princípios Aplicados à Web •  Boas Práticas para um Design Efetivo na Web •  PerguntasDesign e Usabilidade na Web Marcelo Vianna
  3. 3. ConceitosDesign e Usabilidade na Web Marcelo Vianna
  4. 4. Conceitos O que é Usabilidade? “A capacidade de um sistema interativo oferecer a um usuário, em um determinado contexto de operação, a realização de tarefas de maneira eficaz, eficiente e agradável.” Outras definições É a capacidade em termos funcionais humanos de um sistema ser usado facilmente e com eficiência pelo usuário. Shackel (1992) Usabilidade está diretamente ligada ao diálogo na interface. É a capacidade do software em permitir que o usuário alcance suas metas de interação com o sistema Scapin (1993)Design e Usabilidade na Web Marcelo Vianna
  5. 5. Conceitos E o que é Usabilidade de Interação? É a facilidade de utilização, quer seja de uma página Web, um software ou qualquer outro sistema que possua interface de interação com o usuário. A usabilidade de interação refere-se à qualidade ou capacidade de um sistema ou software de ser compreendido, aprendido, utilizado e de ser atrativo ao usuário, em condições específicas de utilização.Design e Usabilidade na Web Marcelo Vianna
  6. 6. Conceitos Ergonomia IHC Identifica fatores humanos Interação Humano-computador é uma referentes à eficiência de área de pesquisa dedicada a estudar utilização de sistemas por fenômenos de comunicação entre parte dos usuários pessoas e sistemas computacionais Ergonomia Usabilidade IHCDesign e Usabilidade na Web Marcelo Vianna
  7. 7. Conceitos Por quê a Usabilidade na Web é tão importante? •  Se um site for difícil de usar, o usuário sai. •  Se a homepage não for clara o suficiente para mostrar o que a empresa oferece e o que é possível fazer, o usuário também sai. •  Se o usuário se perder, ele sai. •  Se demorar para carregar, ele definitivamente sai.Design e Usabilidade na Web Marcelo Vianna
  8. 8. Metas da UsabilidadeDesign e Usabilidade na Web Marcelo Vianna
  9. 9. Metas da Usabilidade •  O usuário tem que conseguir usar •  O usuário tem que querer voltar a usarDesign e Usabilidade na Web Marcelo Vianna
  10. 10. Metas da Usabilidade 1.  Facilidade de aprendizagem O usuário consegue rapidamente explorar o sistema e realizar suas tarefas 2.  Efetividade Aumento de produtividade em função da curva de aprendizado 3.  Memorização Os usuários precisam memorizar as suas tarefas sem sobrecarregar suas interações 4.  Flexibilidade O sistema e a interface devem ser flexíveis aos erros dos usuários 5.  Eficiência Menos trabalho, mais resultado 6.  Satisfação Conforto, segurança e felicidade subjetivaDesign e Usabilidade na Web Marcelo Vianna
  11. 11. Metas da Usabilidade Índice de Sucesso do Serviço É o número de vezes em que ele é completado, dividido pelo número de vezes em que é procurado. O sucesso depende, entre outras coisas, de o usuário conseguir: •  Localizar o serviço que deseja •  Reconhecer o serviço como necessário •  Reconhecer a informação necessária para realizá-lo •  Efetuar sem erros a transação •  Obter o resultado desejadoDesign e Usabilidade na Web Marcelo Vianna
  12. 12. Principais Técnicas e MetodologiasDesign e Usabilidade na Web Marcelo Vianna
  13. 13. Principais Técnicas e Metodologias •  Análise Heurística •  Benchmark •  Questionário Online •  Card Sorting •  Monitoramento Estratégico •  Workshop de Usabilidade •  Testes de Usabilidade •  Análise Contextual •  Avaliação de AcessibilidadeDesign e Usabilidade na Web Marcelo Vianna
  14. 14. Benefícios Mensuráveis da UsabilidadeDesign e Usabilidade na Web Marcelo Vianna
  15. 15. Sites mais usáveis, resultados mensuráveis São muitos os benefícios que o emprego de boas práticas da usabilidade pode proporcionar a um projetos na Web Quantificar esses resultados, permite uma clara percepção do seu impacto sobre o sistema de interação •  Menor custo de desenvolvimento •  Menor custo de manutenção •  Aumento de vendas •  Retenção de consumidores •  Aumento na taxa de sucesso (menos abandono) •  Aumento na eficácia •  Maior eficiência (mais tarefas em menos tempo) •  Menor custo de treinamentoDesign e Usabilidade na Web Marcelo Vianna
  16. 16. Arquitetura de InformaçãoDesign e Usabilidade na Web Marcelo Vianna
  17. 17. Arquitetura de Informação O que é? Arquitetura de informação não se trata apenas de mapas ou diagramas, mas de Comunicação Para que serve? Organizar a informação de um ambiente de forma que seus usuários encontrem com facilidade a informação que procuram Quem é o responsável? Arquiteto de InformaçãoDesign e Usabilidade na Web Marcelo Vianna
  18. 18. Arquitetura de Informação O que o AI faz? Em geral um arquiteto de informação está envolvido com as seguintes etapas: 1. Pesquisa com o usuário O que as pessoas precisam saber e encontrar em um website? 2. Definição de conteúdo e funcionalidades Textos, imagens, buscas, menus, botões, etc. 3. Desenvolvimento e organização de esquemas Como o site será dividido e organizado? Como o usuário navegará pelo site? 4. Desenvolvimento de interface Integração com o designer gráfico ou designer de interfaces.Design e Usabilidade na Web Marcelo Vianna
  19. 19. Arquitetura de Informação O que ele entrega? O mais típico deliverable do arquiteto de informação é o Mapa de Arquitetura. Nele são definidos a estrutura e organização dos grupos de informações do site, a fim de suprir as necessidades dos usuários e os objetivos do negócio Os deliverables mais comuns são: •  Mapas de AI, Diagramas de Fluxo e Story Boards •  Inventário de Conteúdo •  Lista de funcionalidades •  Lista de keywords (palavras-chave) •  Lista de paths (ou fluxos) •  Checklist de padrõesDesign e Usabilidade na Web Marcelo Vianna
  20. 20. Design de InterfaceDesign e Usabilidade na Web Marcelo Vianna
  21. 21. Design de Interface O que é? É o planejamento físico e organizacional dos elementos de interface com o usuário Para que serve? Desenvolver graficamente a representação da diagramação e organização espacial dos componentes e elementos de interface Quem é o responsável? Designer de InterfacesDesign e Usabilidade na Web Marcelo Vianna
  22. 22. Design de Interface O que ele entrega? •  Wireframes especificados, incluindo mensagens de erro, mouse overs, animações, respostas de sistema e até comportamentos temporários. •  Layouts com todas as definições gráficas e visuais de todos os elementos de interface, incluindo cores, tipografias, botões, menus, cabeçalhos, rodapés, banners, etc. •  Modelos básicos em HTML (templates) e imagens tratadas e otimizadas para serem aplicados nas interfaces do site ou sistema •  Manuais e guias de aplicação de padrões e estilos visuaisDesign e Usabilidade na Web Marcelo Vianna
  23. 23. Design de Interface Objetivos Objetos bem desenhados devem ser fáceis de interpretar e compreender. O desenho de uma interface ou produto deve buscar alcançar os objetivos propostos.Design e Usabilidade na Web Marcelo Vianna
  24. 24. Princípios Aplicados à WebDesign e Usabilidade na Web Marcelo Vianna
  25. 25. Entendendo o Usuário Como o Usuário Pensa? Os hábitos dos usuários na Web não são muito diferentes dos hábitos de um consumidor numa loja ou supermercado. Dão uma olhada geral em cada página e clicam no primeiro link ou imagem que capture seu interesse ou que se pareça com o que está procurando. De fato, boa parte da página não é nem vista. A maioria dos usuários procura algo interessante ou útil para clicar. Assim que encontra algo promissor, ele clica. Se o resultado não supre sua expectativa, ele volta e continua procurando ou saiDesign e Usabilidade na Web Marcelo Vianna
  26. 26. Entendendo o Usuário Como o Usuário Pensa? 1.  O Usuário aprecia qualidade e credibilidade O conteúdo é mais importante que o design que o apoia 2.  O Usuário não lê...“scaneia” Ele corre os olhos a procura de referências que o guiem 3.  O Usuário é impaciente e quer gratificação imediata Site “lento” ou pouco objetivo tem alta taxa de abandono 4.  O Usuário não escolhe nem navega linearmente Tende a clicar na primeira opção mais provável ou notável 5.  O Usuário segue a intuição Não importa “como” funciona, desde que ele consiga usar 6.  O Usuário quer ter o controle da navegação Utiliza os recursos do browser e rejeita pop-ups surpresaDesign e Usabilidade na Web Marcelo Vianna
  27. 27. 10 Princípios Básicos para um Design Efetivo na WebDesign e Usabilidade na Web Marcelo Vianna
  28. 28. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar www.twitter.com A página inicial do twitter deixa claro, de imediato e em diversos idiomas, para que serve o site, permite que o visitante faça buscas e acesse alguns perfis em destaque, mesmo antes de se cadastrar. Além disso, oferece ao visitante um formulário bem simples para que ele se cadastre rapidamente ou para que o usuário já cadastrado faça logon e acesse seu perfil.Design e Usabilidade na Web Marcelo Vianna
  29. 29. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário www.facebook.com A página inicial do facebook é um excelente exemplo de página de alta performance, carregamento rápido, informação clara e objetiva, e acesso rápido ao logon do usuário e um formulário para cadastramento de novos visitantesDesign e Usabilidade na Web Marcelo Vianna
  30. 30. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário 3.  Mantenha o foco de atenção do usuário www.humanized.com Software GRÁTIS pode ser uma grande motivação para o usuário. Não é coincidência que o maior elemento neste página seja a palavra FREE e logo ao lado um botão verde para fazer o downloadDesign e Usabilidade na Web Marcelo Vianna
  31. 31. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário 3.  Mantenha o foco de atenção do usuário 4.  Destaque os recursos e benefícios www.netmovies.com.br A página inicial deixa claro rapidamente sobre o que trata o site e destaca as principais características, vantagens, promoções e atraçõesDesign e Usabilidade na Web Marcelo Vianna
  32. 32. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário 3.  Mantenha o foco de atenção do usuário 4.  Destaque os recursos e benefícios 5.  Faça uso de texto objetivo www.mozilla.org/pt-BR/firefox O Texto na Web precisa ser direto e sintetizado e dar a informação de forma objetiva e sem rodeios. A mensagem principal deve estar sempre em maior destaque na página e sempre que possível usar tópicos e links curtos e clarosDesign e Usabilidade na Web Marcelo Vianna
  33. 33. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário 3.  Mantenha o foco de atenção do usuário 4.  Destaque os recursos e benefícios 5.  Faça uso de texto objetivo 6.  Valorize e priorize a simplicidade www.wikipedia.org O Wikipedia tem uma interface extremamente simples, totalmente focada na riqueza de conteúdo e na sua natureza colaborativaDesign e Usabilidade na Web Marcelo Vianna
  34. 34. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário 3.  Mantenha o foco de atenção do usuário 4.  Destaque os recursos e benefícios 5.  Faça uso de texto objetivo 6.  Valorize e Priorize a simplicidade 7.  Não tenha medo de espaços brancos www.dropbox.com O design limpo e quase minimalista da interface dá clareza e objetividade, levando o usuário a uma de três ações possíveis: logon se for usuário, assistir a um vídeo sobre o sistema ou fazer logo o download do programaDesign e Usabilidade na Web Marcelo Vianna
  35. 35. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário 3.  Mantenha o foco de atenção do usuário 4.  Destaque os recursos e benefícios 5.  Faça uso de texto objetivo 6.  Valorize e Priorize a simplicidade 7.  Não tenha medo de espaços brancos www.skype.com 8.  Comunique-se com “linguagem visual” O Site do Skype possui uma interface com cores bem vivas e imagens de pessoas jovens sorridentes usando o computador ou o telefone. Com um ar visualmente alegre e colorido, passa a idéia de que usar o sistema é divertido e gratificanteDesign e Usabilidade na Web Marcelo Vianna
  36. 36. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário 3.  Mantenha o foco de atenção do usuário 4.  Destaque os recursos e benefícios 5.  Faça uso de texto objetivo 6.  Valorize e Priorize a simplicidade 7.  Não tenha medo de espaços brancos www.amazon.com O uso de convenções reduz a curva de aprendizado 8.  Comunique-se com “linguagem visual” porque preconiza a experiência anterior do usuário na utilização de recursos e simbologias estabelecidas e 9.  Convenções são nossas amigas popularizadas. O site da Amazon é um bom exemplo de site inovador que, ao mesmo tempo, faz intenso uso de convenções maduras de e-commerceDesign e Usabilidade na Web Marcelo Vianna
  37. 37. 10 Princípios Básicos para um Design Efetivo na Web 1.  Não faça o usuário pensar 2.  Não abuse da paciência do usuário 3.  Mantenha o foco de atenção do usuário 4.  Destaque os recursos e benefícios 5.  Faça uso de texto objetivo 6.  Valorize e Priorize a simplicidade 7.  Não tenha medo de espaços brancos 8.  Comunique-se com “linguagem visual” 9.  Convenções são nossas amigas 10. Teste antes, teste depois, teste sempreDesign e Usabilidade na Web Marcelo Vianna
  38. 38. 10 Boas Práticas Que Você Deve Sempre Ter em MenteDesign e Usabilidade na Web Marcelo Vianna
  39. 39. 10 Boas Práticas Que Você Deve Sempre Ter em Mente 1.  Não use janelas pop-up ou frames 2.  Não mude o tamanho da janela do usuário 3.  Garanta legibilidade e não use fontes muito pequenas 4.  Use links curtos, claros, objetivos e URLs amigáveis 5.  Não tenha links mortos ou sem saída 6.  Procure ter apenas uma animação por página 7.  Facilite as formas de contato e comunicação 8.  Empregue imagens para apoio ao conteúdo e não para decoração 9.  Evite a necessidade de plug-ins principalmente para navegar 10.  Evite links abrindo novas janelasDesign e Usabilidade na Web Marcelo Vianna
  40. 40. Perguntas?Design e Usabilidade na Web Marcelo Vianna
  41. 41. Grato pela atenção! Marcelo Vianna marcelovianna@me.comDesign e Usabilidade na Web Marcelo Vianna

×