O documento fornece dicas para a construção de interfaces web, cobrindo tópicos como usabilidade, cores, hierarquia visual, convenções, sistemas globalizados, ícones e formulários. O objetivo é criar sites que sejam fáceis de usar e compreender para usuários de diferentes culturas em todo o mundo.

1. Dicas na construção de interfaces Web
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

2. Dicas na construção de interfaces Web
Usabilidade:
Termo para descrever a qualidade da interação de uma interface com os
usuários.
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

3. Dicas na construção de interfaces Web
Usabilidade:
Termo para descrever a qualidade da interação de uma interface com os
usuários.
A usabilidade se determina pelas seguintes características:
 Capacidade de aprendizado rápido
 Dificuldade de esquecimentos
 Ausência de erros operacionais
Satisfação do usuário
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

4. Dicas na construção de interfaces Web
A importância das cores:
Dicas para a criação de um site harmonioso
Utilize destaques de cor para capturar o olhar do usuário.
O significado das cores não é universal.
Use poucas cores.
A cor de um website deve estar ligada às cores usadas no logotipo da
empresa.
Usar cores iguais para elementos relacionados entre si.
Usar cores para realçar informações
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

5. Dicas na construção de interfaces Web
A importância das cores:
Dicas para a criação de um site harmonioso
A cor caracteriza um website
Site antigo Site novo
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

6. Dicas na construção de interfaces Web
A importância das cores:
 As linhas entre os itens  Sem confusão visual. Destaque
acrescentam muita confusão. total nos links e não no design do
Alguns usuários teriam uma menu.
confusão visual ao percorrer o
menu.
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

7. Dicas na construção de interfaces Web
Hierarquia visual:
Mostre com clareza e precisão os elementos da página que se relacionam
entre si.
 Uma boa forma de tornar a página fácil de ser compreendida mesmo
que o usuário esteja com pressa.
 Deixar proeminente o que é importante.
 Relacione visualmente o que for relacionado logicamente.
 Aninhar elementos para mostrar quais fazem parte de quais.
Deixe claro o que pode ser clicado.
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

8. Dicas na construção de interfaces Web
Hierarquia visual:
Exemplos:
Muito Importante
Livros de informática Um pouco menos
Um livro em particular Importante
Lorem Ipsum is Nem um pouco importante
simply dummy text
of the printing and
typesetting industry.
Axé
Lorem Ipsum has Dance
been Instrumental
Pagode
Pop
Rock
Sertanejo
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

9. Dicas na construção de interfaces Web
Hierarquia visual:
Com hierarquias visuais o leitor tem informações úteis sobre o conteúdo
da página antes mesmo de ler uma única palavra.
Resumo da
notícia principal
O tamanho
do
cabeçalho
deixa claro O cabeçalho
que essa e a englobando as
história duas colunas
mais de texto torna
importante óbvio que
ambos fazem
parte da
mesma história
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

10. Dicas na construção de interfaces Web
Hierarquia visual:
O usuário não tem dificuldade em encontrar a informação que procura. O
conteúdo está dividido em áreas claramente definidas.
http://www.ist.utl.pt/ (Original)
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

11. Dicas na construção de interfaces Web
Convenções:
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

12. Dicas na construção de interfaces Web
Sistemas Globalizados:
Um website é um sistema globalizado, rompem barreiras geográficas e
culturais e são acessados por pessoas de diversas partes do mundo.
 Os seres humanos diferem muito entre si.
• Termos técnicos
• Gírias
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

13. Dicas na construção de interfaces Web
Sistemas Globalizados:
 O fluxo lógico da informação não é constante. Em alguns países, lê -se da
direita para esquerda. Veja a solução adotada pelo google
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

14. Dicas na construção de interfaces Web
Ícones:
O ícone indica visualmente a existência de uma aplicação ou representa
uma ação (abrir, fechar um programa...).
 Quando bem aplicado possibilita um reconhecimento mais rápido que as
palavras.
 Não dependem do idioma
 Imagens não são reconhecidas universalmente
Ícones não-universais
 Ícones universais
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

15. Dicas na construção de interfaces Web
Aceitação de imagens:
O que é aceito em um lugar pode ser rejeitado em outro, devido as
diferenças nas normas sociais.
 O uso indevido de uma imagem pode ofender uma cultura
• No Egito, as mulheres não aceitam pernas expostas
• Na Índia, considera-se o uso da mão esquerda uma falta de
educação grave. Exemplo: estender a mão esquerda para alguém.
• Em Cingapura, a cegonha representa a morte materna.
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

16. Dicas na construção de interfaces Web
Aceitação de imagens:
Em alguns países como Brasil e Alemanha, o gesto adotado nos EUA para
simbolizar “OK” é considerado vulgar.
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

17. Dicas na construção de interfaces Web
Formulários:
 Seu uso deve ser obrigatório
 Não solicite informações que não vão ser úteis para você.
 Evite formulários longos.
 Campos de preenchimento obrigatórios
Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew