Your SlideShare is downloading. ×

Design e Usabilidade na Web

13,162

Published on

Palestra sobre Design e Usabilidade na Web …

Palestra sobre Design e Usabilidade na Web
Marcelo Vianna

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
  • Simples e direto ao ponto, muito bom....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
13,162
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
544
Comments
1
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Design e Usabilidade na Web Projetando interfaces que funcionamDesign e Usabilidade na Web Marcelo Vianna
  • 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. ConceitosDesign e Usabilidade na Web Marcelo Vianna
  • 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. 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. 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. 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. Metas da UsabilidadeDesign e Usabilidade na Web Marcelo Vianna
  • 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. 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. 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. Principais Técnicas e MetodologiasDesign e Usabilidade na Web Marcelo Vianna
  • 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. Benefícios Mensuráveis da UsabilidadeDesign e Usabilidade na Web Marcelo Vianna
  • 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. Arquitetura de InformaçãoDesign e Usabilidade na Web Marcelo Vianna
  • 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. 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. 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. Design de InterfaceDesign e Usabilidade na Web Marcelo Vianna
  • 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. 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. 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. Princípios Aplicados à WebDesign e Usabilidade na Web Marcelo Vianna
  • 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. 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. 10 Princípios Básicos para um Design Efetivo na WebDesign e Usabilidade na Web Marcelo Vianna
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 10 Boas Práticas Que Você Deve Sempre Ter em MenteDesign e Usabilidade na Web Marcelo Vianna
  • 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. Perguntas?Design e Usabilidade na Web Marcelo Vianna
  • 41. Grato pela atenção! Marcelo Vianna marcelovianna@me.comDesign e Usabilidade na Web Marcelo Vianna

×