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



A importância das cores: Dicas para a criação de um site harmonioso

A cor caracteriza um website

Site antigo Site novo



A importância das cores:

As linhas entre os itens acrescentam muita confusão. Alguns usuários teriam uma confusão visual ao percorrer o menu.

Sem confusão visual. Destaque total nos links e não no design do menu.



Hierarquia visual:

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.

Mostre com clareza e precisão os elementos da página que se relacionam entre si.



Hierarquia visual:

Exemplos:

Muito Importante

Um pouco menos Importante

Nem um pouco importante

Axé Dance Instrumental

Pagode Pop Rock Sertanejo

Livros de informática

Um livro em particular

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been



Hierarquia visual:

O cabeçalho englobando as duas colunas de texto torna óbvio que ambos fazem parte da mesma história

O tamanho do cabeçalho deixa claro que essa e a história mais importante

Resumo da notícia principal

Com hierarquias visuais o leitor tem informações úteis sobre o conteúdo da página antes mesmo de ler uma única palavra.



Hierarquia visual:

http://www.ist.utl.pt/ (Original)

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/



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

Design