Upload
marcelo-vianna
View
13.161
Download
44
Embed Size (px)
DESCRIPTION
Palestra sobre Design e Usabilidade na WebMarcelo Vianna
Citation preview
Marcelo Vianna Design e Usabilidade na Web
Design e Usabilidade na Web Projetando interfaces que funcionam
Marcelo Vianna
Marcelo Vianna Design e Usabilidade na Web
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
• Perguntas
Marcelo Vianna Design e Usabilidade na Web
Conceitos
Marcelo Vianna Design e Usabilidade na Web
Conceitos
“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.”
O que é Usabilidade?
É 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)
Outras definições
Marcelo Vianna Design e Usabilidade na Web
Conceitos
É 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.
E o que é Usabilidade de Interação?
Marcelo Vianna Design e Usabilidade na Web
Ergonomia
Conceitos
Ergonomia Identifica fatores humanos referentes à eficiência de utilização de sistemas por parte dos usuários
IHC Interação Humano-computador é uma área de pesquisa dedicada a estudar fenômenos de comunicação entre pessoas e sistemas computacionais
Usabilidade
IHC
Marcelo Vianna Design e Usabilidade na Web
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.
Marcelo Vianna Design e Usabilidade na Web
Metas da Usabilidade
Marcelo Vianna Design e Usabilidade na Web
• O usuário tem que conseguir usar • O usuário tem que querer voltar a usar
Metas da Usabilidade
Marcelo Vianna Design e Usabilidade na Web
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 subjetiva
Marcelo Vianna Design e Usabilidade na Web
Metas da Usabilidade
É 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 desejado
Índice de Sucesso do Serviço
Marcelo Vianna Design e Usabilidade na Web
Principais Técnicas e Metodologias
Marcelo Vianna Design e Usabilidade na Web
• 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 Acessibilidade
Principais Técnicas e Metodologias
Marcelo Vianna Design e Usabilidade na Web
Benefícios Mensuráveis da Usabilidade
Marcelo Vianna Design e Usabilidade na Web
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 treinamento
Marcelo Vianna Design e Usabilidade na Web
Arquitetura de Informação
Marcelo Vianna Design e Usabilidade na Web
Arquitetura de Informação
Arquitetura de informação não se trata apenas de mapas ou diagramas, mas de Comunicação
O que é?
Organizar a informação de um ambiente de forma que seus usuários encontrem com facilidade a informação que procuram
Para que serve?
Arquiteto de Informação
Quem é o responsável?
Marcelo Vianna Design e Usabilidade na Web
Arquitetura de Informação
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.
O que o AI faz?
Marcelo Vianna Design e Usabilidade na Web
Arquitetura de Informação
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
O que ele entrega?
• 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ões
Os deliverables mais comuns são:
Marcelo Vianna Design e Usabilidade na Web
Design de Interface
Marcelo Vianna Design e Usabilidade na Web
Design de Interface
É o planejamento físico e organizacional dos elementos de interface com o usuário
O que é?
Desenvolver graficamente a representação da diagramação e organização espacial dos componentes e elementos de interface
Para que serve?
Designer de Interfaces
Quem é o responsável?
Marcelo Vianna Design e Usabilidade na Web
Design de Interface
• 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 visuais
O que ele entrega?
Marcelo Vianna Design e Usabilidade na Web
Design de Interface
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.
Objetivos
Marcelo Vianna Design e Usabilidade na Web
Princípios Aplicados à Web
Marcelo Vianna Design e Usabilidade na Web
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 sai
Como o Usuário Pensa?
Entendendo o Usuário
Marcelo Vianna Design e Usabilidade na Web
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 surpresa
Entendendo o Usuário
Como o Usuário Pensa?
Marcelo Vianna Design e Usabilidade na Web
10 Princípios Básicos para um Design Efetivo na Web
Marcelo Vianna Design e Usabilidade na Web
1. Não faça o usuário pensar
10 Princípios Básicos para um Design Efetivo na Web
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.
Marcelo Vianna Design e Usabilidade na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
10 Princípios Básicos para um Design Efetivo na Web
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 visitantes
Marcelo Vianna Design e Usabilidade 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
10 Princípios Básicos para um Design Efetivo na Web
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 download
Marcelo Vianna Design e Usabilidade 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
10 Princípios Básicos para um Design Efetivo na Web
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ções
Marcelo Vianna Design e Usabilidade 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
10 Princípios Básicos para um Design Efetivo na Web
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 claros
Marcelo Vianna Design e Usabilidade 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
10 Princípios Básicos para um Design Efetivo na Web
www.wikipedia.org O Wikipedia tem uma interface extremamente simples, totalmente focada na riqueza de conteúdo e na sua natureza colaborativa
Marcelo Vianna Design e Usabilidade 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
10 Princípios Básicos para um Design Efetivo na Web
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 programa
Marcelo Vianna Design e Usabilidade 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”
10 Princípios Básicos para um Design Efetivo na Web
www.skype.com 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 gratificante
Marcelo Vianna Design e Usabilidade 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 Princípios Básicos para um Design Efetivo na Web
www.amazon.com O uso de convenções reduz a curva de aprendizado porque preconiza a experiência anterior do usuário na utilização de recursos e simbologias estabelecidas e popularizadas. O site da Amazon é um bom exemplo de site inovador que, ao mesmo tempo, faz intenso uso de convenções maduras de e-commerce
Marcelo Vianna Design e Usabilidade 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 sempre
10 Princípios Básicos para um Design Efetivo na Web
Marcelo Vianna Design e Usabilidade na Web
10 Boas Práticas Que Você Deve Sempre Ter em Mente
Marcelo Vianna Design e Usabilidade na Web
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 janelas
Marcelo Vianna Design e Usabilidade na Web
Perguntas?