Construcao de interfaces web

Dicas na construção de interfaces Web

Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew


Usabilidade:
Termo para descrever a qualidade da interação de uma interface com os
usuários.



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



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



Dicas para a criação de um site harmonioso

A cor caracteriza um website

Site antigo Site novo




 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.



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.



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



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



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)



Convenções:



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



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



Í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



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.



Aceitação de imagens:
Em alguns países como Brasil e Alemanha, o gesto adotado nos EUA para
simbolizar “OK” é considerado vulgar.



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


Construcao de interfaces web

Mais conteúdo relacionado

Semelhante a Construcao de interfaces web

Mais de Carlos Eduardo Kadu

Construcao de interfaces web