Embed Size (px)
DESCRIPTION
Os desenvolvedores estão constantemente tendo novas idéias, e hoje em dia é cada vez mais viável colocá-las em prática. Mas não adianta desenvolver um serviço 100% funcional se sua interface não conseguir se comunicar com o usuário. É necessário solucionar sua necessidade não só por funcionalidade, mas também pela sensação de segurança, pelo conforto, e por satisfação pessoal. Nesta apresentação, foram dadas dicas e estratégias de como parar de desenvolver produtos centrados apenas em máquinas, e começar a desenvolver também centrados no usuário.
Citation preview
Entendendo o problema:
1
UX vs. Devs
Quero fazer meu site que vai revolucionar a
Interwebz!
O Produto
Arquitetura da Informação
Design Visual
Ergonomia
Design de Interação
Estratégia de Conteúdo
Valores de Negócio
Arquitetura de Software
Desenvolvimento de Front-end
Desenvolvimento de Back-end
Infraestrutura
Quality Assurance
User Experience?
Arquitetura da Informação
Design Visual
Ergonomia
Design de Interação
Estratégia de Conteúdo
Valores de Negócio
Arquitetura de Software
Desenvolvimento de Front-end
Desenvolvimento de Back-end
Infraestrutura
Quality Assurance
Developers?
Arquitetura da Informação
Design Visual
Ergonomia
Design de Interação
Estratégia de Conteúdo
Valores de Negócio
Arquitetura de Software
Desenvolvimento de Front-end
Desenvolvimento de Back-end
Infraestrutura
Quality Assurance
Mais ou menos
De vez em quando
#comofas/
Golden Rulepara devs
O usuário NÃO é burro. VOCÊ que é convencido demais.
#prontofalei
Keep hearing “nobody reads the manual”... people would RTFM if the FM was a treat, not a chore (and treated user's time as HIGHLY valued).
— Kathy Sierra
Entendendo o usuário:
2
Maslow
Fisiologia
Segurança
Relacionamento
Estima
Realização
Testes/Funcionalidade
Testes/Performance/AI
AI/Features
AI/Customização
Visual/Emoção/Conforto/Desejo
Maslow vs. Produto
Entendendo o usuário:
2.a
Fisiologia » Funcionalidade
O produto precisa funcionar
É simples: se o produto não funciona, o usuário vai embora.
Fisiologia » Testes/Funcionalidade
Fisiologia » Testes/Funcionalidade
[Vídeo] Bad: A loja da Vivo simplesmente não funciona fora do IE. Nada é clicável.
Fisiologia » Testes/Funcionalidade
[Vídeo] Bad: Ao clicar no input field, a página magica-bizarramente dá um refresh.
Fisiologia » Testes/Funcionalidade
Unit tests, continuous integration, basic stuff
Teste nos browsers e devices do público-alvo
Eat your own food: use o produto, convide pessoas para testar
Não confie no código, abra a página (lembre-se: não seja convencido)
Entendendo o usuário:
2.b
Segurança » Testes/Performance
Segurança » Testes/Performance
O usuário precisa se sentir seguro e confiante
“Estou fazendo a coisa certa? Será que foi? Será de deu erro? Será que isso funciona mesmo? Será que vão invadir minha conta? Será? Será?”
Segurança » Testes/Performance
[Vídeo] Good: As mensagens de feedback do Twitter dão segurança ao usuário.
Segurança » Testes/Performance
Bad: Funcionamento duvidoso e erros gramaticais geram insegurança pelo usuário.
Segurança » Testes/Performance
[Vídeo] Bad: Muitos spinners, muito AJAX, alto risco de quebrar o funcionamento.
Segurança » Testes/Performance
Bad: Cadastro que pedem dados sensíveis logo de início geram desconfiança.
Segurança » Testes/Performance
Bad: Opções fora da lógica tradicional geram confusão e erros.
Páginas rápidas: otimize na infra, no front e no back
Feedback: spinners e loadings nos AJAX (mas não exagere)
Feedback: o usuário deve saber o que deu certo e o que deu errado
Revise o conteúdo e o layout: gramática e harmonia aumentam a confiança
Segurança » Testes/Performance
Don’t be evil: não peça dados sensíveis se não forem necessários
Previna erros: quanto menor a chance de erros, maior a confiança
Segurança » Testes/Performance
Entendendo o usuário:
2.c
Relacionamento » AI/Features
Relacionamento » AI/Features
O usuário quer se comunicar, usar, relacionar
As features e as informações devem ser relevantes, fáceis de achar e de usar.“O que eu ganho com isso?”
Relacionamento » AI/Features
[Vídeo] Bad: O extrato do TAM Fidelidade é feito em outro site, com cadastro e interface separados.
Relacionamento » AI/Features
[Vídeo] Bad: Um ponto de interrupção no flow pode fazer com que o usuário desista da ação.
Relacionamento » AI/Features
Good: Logo de início o usuário sabe do que se trata, o que vai ganhar e quanto custa.
Relacionamento » AI/Features
Good: A página de cadastro deixa claro as principais dúvidas — quando, como, o que ocorre no final e se é possível cancelar.
Pergunte ao usuário o que ele quer
Não apenas pergunte: observe o usuário
Navegação consistente e bem estruturada
Padrões de interface: botões são botões, links são links
Estratégia de conteúdo: a mensagem deve ser clara, consistente. Invista em copywriting.
Relacionamento » AI/Features
Transparência: seja claro e honesto sobre o que o usuário vai ganhar/perder
Facilite: use tutoriais, screencasts ou passo-a-passo
Proporcione uma experiência fluida
Evite pontos de dúvida ou falha: o usuário facilmente desiste da ação
Relacionamento » AI/Features
Entendendo o usuário:
2.d
Estima » AI/Customização
Estima » AI/Customização
O usuário quer ter controle e ser bem tratado
É como em um restaurante: você quer ser bem atendido e quer poder pedir seu prato sem salsinha.
Estima » AI/Customização
Bad: Erro nada amigável e agressivo pode assustar o usuário.
Estima » AI/Customização
[Vídeo] Good: O Twitter usa mensagens amigáveis e humanas.
Estima » AI/Customização
Good: O Wordpress oferece muitos controles para customização dos posts.
Estima » AI/Customização
Good: O Google Plus permite controle total sobre quem vai poder ler o post.
Estima » AI/Customização
Good: O Facebook tem um controle granular sobre quem vê o quê.
Não seja técnico ou agressivo nos erros: o usuário não tem culpa
Liberdade: ofereça controles, customizações, opções de privacidade e notificação
O usuário quer cumprir tarefas o mais rápido possível: otimize o flow
No front-end: tabindex, autofocus, autocomplete, AJAX checks
Responsive design: layouts que se adaptam ao contexto
Estima » AI/Customização
Entendendo o usuário:
2.e
Realização » Visual/Emoção/Conforto/Desejo
Realização » Visual/Emoção/Conforto/Desejo
O usuário quer se sentir satisfeito, feliz
Tempo é valioso e irreversível. Não gaste o tempo do usuário sem que no final ele se sinta realizado com o que fez.
Realização » Visual/Emoção/Conforto/Desejo
12px/14px
Bad: O texto no terra.com.br possui corpo e entrelinha pequenos, dificultando a leitura em telas pequenas ou resoluções de dpi alto.
Realização » Visual/Emoção/Conforto/Desejo
15px/21px
Good: O G1 utiliza um corpo maior e entrelinha proporcional de 1.4em, proporcionando boa legibilidade e maior conforto.
Realização » Visual/Emoção/Conforto/Desejo
15px/21px
Este é o mesmo texto do terra.com.br, com o corpo e entrelinha do G1.
Realização » Visual/Emoção/Conforto/Desejo
12px/14px
Comparando, antes era assim: bem menos legível.
Realização » Visual/Emoção/Conforto/Desejo
[Vídeo] Good: O Google Plus é exemplo de animações sutis e naturais que contribuem para a experiência do usuário.
Realização » Visual/Emoção/Conforto/Desejo
Good: O app do Highrise oferece um jogo da velha para distrair enquanto o banco de dados é baixado.
Legibilidade: give typography some love
Eye candy: o visual deve complementar a experiência
Design de interação: efeitos e transições melhoram a experiência
Seja amigável: os usuários tendem a voltar
Pequenas recompensas, easter eggs
Realização » Visual/Emoção/Conforto/Desejo
Colocando na prática:
3
#comofas/
Colocando na prática:
3.a
Soluções prontas
Soluções prontas
Bootstrap, from Twitterhttp://twitter.github.com/bootstrap/
Soluções prontas
jQuery Mobilehttp://www.jquerymobile.com
Soluções prontas
HTML 5 Boilerplatehttp://html5boilerplate.com/
Colocando na prática:
3.b
Ferramentas
Ferramentas
Spin.jshttp://fgnass.github.com/spin.js/
Ferramentas
Google Web Fontshttp://www.google.com/webfonts
Ferramentas
CSS 3 Button Generatorhttp://css3buttongenerator.com/
Soluções prontas
Subtle Patternshttp://www.subtlepatterns.com
Soluções prontas
Silverbackhttp://www.silverbackapp.com
Colocando na prática:
3.b
Referências
Referências
JavaScript: The Good Parts
Referências
Eloquent JavaScript
Referências
Hardboiled Web Design
Referências
HTML 5 for Web Designers
Referências
Responsive Web Design
Referências
O Design do Dia a Dia
Referências
Universal Principles of Design
Referências
Smashing Magazinehttp://smashingmagazine.com
Colocando na prática:
3.c
Inspirações
Inspirações
Little Big Detailshttp://littlebigdetails.com/
Inspirações
Dribbblehttp://www.dribbble.com
Inspirações
House of Buttonshttp://houseofbuttons.tumblr.com/
Resumindo....
4
(se você dormiu, a hora é agora)
O usuário NÃO é burro.
Fisiologia
Segurança
Relacionamento
Estima
Realização
Testes/Funcionalidade
Testes/Performance/AI
AI/Features
AI/Customização
Visual/Emoção/Conforto/Desejo
Entenda o usuário
Use. Observe. Pergunte. Teste. Melhore. Repita.
