Este documento fornece 10 maneiras de frustrar os usuários com uma interface, incluindo não informar o status do sistema, usar termos técnicos complexos e não fornecer uma opção para relatórios de problemas. Ele também discute a importância de testes de usabilidade, navegação lógica e design responsivo.

1. USABILIDADE
COMO FRUSTRAR SEUS USUÁRIOS COM A SUA
INTERFACE?

3. # 1
NÃO INFORMAR AO USUÁRIO O
QUE ESTÁ ACONTECENDO

4. 1. Visibilidade de Status do Sistema
.A página parece estar carregando
infinitamente porque o site não
mostra a porcentagem do processo.
-Uma barra de progresso ajudaria.
.O Facebook apresenta imagem e
título antigo e o usuário já
atualizou e não sabe o que está
acontecendo.
O ideal era o facebook não guardar
esse cach, ou atualizar sempre que
o usuário colar aquela url no campo
para compartilhamento.
http://www.expressosaoluiz.com.br/

5. # 2
USAR TERMOS TÉCNICOS OU
ÍCONES POUCO EXPRESSIVOS
CONTROLE REMOTO DE AR CONDICIONADO

6. 2.Análise heurística, Wireframe e Texte A B
. Devemos evitar o uso de siglas ou
letras para simbolizar palavras.
. Uso de ícones que ainda não foram
amplamente difundidos para o seu
público alvo ou fora de contexto.
. Devemos usar metáforas
conhecidas, termos fáceis que
converse com os usuários.
Contexto
Conteúdo Usuários
Arquitetura da Informação

7. # 3
Criar uma interface
Frankenstein
http://www.criacaodesitebr
asil.com.br/manutencao-de-
site.php
http://www.criacaodesitebrasil.com.br/manutencao-de-site.php

8. Guia de estilo + Protótipos Navegáveis
.Não ter um guia de estilo.
.Não ter uma padronização
nos links.
.Unir parte de uma proposta
visual com parte de outra
proposta.
. Usar template de internet
e aplicar a logo do
cliente.
UI Design é a interação entre a interface e o usuário,
UX está relacionado com a experiência do usuário e
com seus sentimentos, já UI é a maneira como o
usuário alcançara essa experiência.

9. # 4
NÃO FORNECER UMA OPÇÃO
PARA INFORMAR UM PROBLEMA

10. Ajuda a solução de problemas
. Por mais que possamos prever a
existência de erro mesmo assim, em
algum momento um usuário pode ter
uma experiência ruim ou não
conseguir cumprir o objetivo de uma
página, então devemos sempre
fornecer uma maneira para o usuário
acessar o suporte técnico.
Manuais, Suporte técnico, fale
conosco, denúnciar spams…
.lançar uma versão beta assistida
[fix]

11. # 5
Não organizar de forma
lógica o menu.

12. Ferramentas para evitar navegação confusa
. Análise de Similares
. Card-Sorting
. Análise Heurística
. Testes AB
. Melhores práticas
. Design Pattern
. Sombra (INEP)

13. # 6
O USUÁRIO TEM QUE LEMBRAR
LEMBRA TUDO

14. Como cheguei aqui?
. Será que já salvei?
. Será que consegui enviar?
. Como Cheguei aqui?
. Onde estou?
. Animação
. Bradcrumbs
. Active
. Pendências

15. # 7
Quanto mais informação
melhor?

16. Economia da Informação
.O sistema precisa ser fácil para usuários leigos, mas
flexível o bastante para se tornar ágil à usuários
avançados.
. Facilidade no uso
. Usar teclas de atalho
. Máscara de conteúdo
. Colocar o mais simples e objetivo primeiro porém
fornecer uma maneira mais apurada de conseguir o
objetivo.
. No celular devemos enxugar a plataforma e focar no
essencial, para que a tela cumpra o seu objetivo de forma
eficiente.

17. # 8
A estética deve sempre
sobrepor a funcionalidade

18. A beleza não deve ser só estética
- Se uma interface está bonita
mas não alcança o objetivo ela
deve ser trabalhada
- Ao criar uma tela devemos nos
preocupar primeiramente com a
funcionalidade e muitas vezes
acabamos por fazer algo sem
funcionalidade então a beleza
verdadeira está em fazer algo
objetivo.
- Interface minimalista, remover
tudo que não é necessário e
encontrar um porquê uma razão
de existir as coisas.

19. #9
Não ofereça uma opção para
desfazer uma ação.

20. #10
Não criar uma opção do
site responsivo.

21. Exemplos de Responsividade
Como criar tabelas responsivas
https://css-tricks.com/accessible-s
imple-responsive-tables/
Responsividade em tela inicial
● Banner Rotativo
● Destaques de notícias
● relógios
● breakpoint

22. Ferramentas
Smartlook - Para testes de
usabilidade
InvisionApp - Para a
criação de protótipos
navegáveis
Axure - Para criar
wireframes
https://www.smartlook.com/p
t/?utm_source=facebook&utm_
medium=cpc&utm_term=fb_br_d
ashLook1Marketing_d&utm_cam
paign=fb_br_dashLook1Market
ing_d

23. Bibliografia
. As 10 Heurísticas de Nielsen sobre
Usabilidade
. Não Me Faça Pensar – Atualizado
Krug, Steve

24. Obrigado
https://www.behance.net/moisesrlima