Desenho de Telas

Desenho de Telas

Os princípios e padrões de design de interação são aplicados durante o processo de desenho da

interface, ajudando os designers a traduzir os requisitos definidos para o produto em estruturas e
comportamentos na interface.

Os princípios de design de interação são guidelines ou regras, tipicamente baseadas em um conjunto

de valores e crenças que os designers têm, bem como nas sua experiência em tentar corresponder a esses
valores; que endereçam questões de comportamento, forma e conteúdo de uma interface.

Já os padrões são considerados soluções recorrentes para problemas comuns, soluções estas que se
destacaram de práticas comuns e já bem testadas. Padrões de design de interação não só se preocupam
com a estrutura e organização dos elementos da interface, mas também com o comportamento dinâmico
e mudanças nesses elementos em resposta às ações do usuário.

O esforço de formalizar os conhecimentos sobre design de interação e melhores práticas permitem:

• Reduzir o tempo e esforço de design em novos projetos;
• Melhorar a qualidade das soluções de design;
• Facilitar a comunicação entre designers e programadores.
Desenho de Telas

Um grupo de princípios bastante conhecido, devido a popularidade de quem os difundiu, são As 10

Heurísticas de Nielsen. São eles:

1 - Visibilidade do estado do sistema

2 - Correspondência entre o sistema e o mundo real
3 - Liberdade e controle do usuário
4 - Consistência e padrões
5 - Prevenção de erros (design defensivo)
6 - Reconhecimento em vez de memorização
7 - Flexibilidade e eficiência de uso
8 - Estética e design minimalista
9 - Ajudar os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros
10 - Ajuda e documentação.
Desenho de Telas

1 - Visibilidade do estado do sistema

É responsabilidade do sistema informar o que está acontecendo em real time pro usuário.

2 - Correspondência entre o sistema e o mundo real

Em relação ao mundo real podemos considerar: sons, visual e o tom de escrita que usuário utiliza
para se comunicar. Implementamos bastante esta heurística quando utilizamos uma seta, ícones e
utilizamos a cor vermelha para elementos negativos.

3 - Liberdade e controle do usuário

Nesta heurística, a preocupação é de passar pro usuário a liberdade de ele fazer o que quiser dentro do
sistema com exceção das regras que vão contra o negócio ou interferem em outra funcionalidade.

4 - Consistência e padrões
É importante manter a consistência e padrão visual (texto, cor, desenho do elemento, som e etc).

5 - Prevenção de erros (design defensivo)

Não é uma boa ideia deixar seu usuário errar sem explicar previamente o motivo do erro. Melhor do
que isso, tente criar um interface que permite o usuário não errar.
Desenho de Telas
6 - Reconhecimento em vez de memorização
O usuário não tem obrigação de decorar qual foi o caminho que ele fez pra chegar até a página. Nós chamamos
isso de breadcrumb.

7 - Flexibilidade e eficiência de uso

É importante deixar uma experiência boa com seu sistema desde o usuário mais leigo até o mais
avançado.

8 - Estética e design minimalista

Por favor não encha linguiça. Todo informação extra que você deixar pro seu usuário pode na verdade
adicionar mais uma dúvida, ou seja, deixe o seu layout e o conteúdo o mais simples e direto
possível.

9 - Ajudar os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros

As mensagens de erros tem que ser claras e próximas do conteúdo ou ação que causou o erro.

10 - Ajuda e documentação
Implementar documentação e sistema de ajuda sempre é chato e muitos usuários têm o costume de ignorar
ambos mas, se for realmente necessário, deixe a documentação próxima do usuário e do elemento ou ação
que tenha necessidade de uma explicação mais detalhada.
Desenho de Telas

Outros Princípios para Implementar Interfaces Eficazes

Apresente as etapas do processo

Sequências de ações devem ser organizadas em grupos com início, meio e fim. O feedback informativo ao
completar um grupo de ações dá ao usuário satisfação de realização, senso de distinção e uma indicação que
o caminho é claro para se preparar para o próximo conjunto de ações.

Faça uma navegação clara e eficiente

Uma boa navegação ajuda o usuário a saber onde ele está e para onde quer ir. Os segredos de uma
navegação eficiente incluem:
• Organização - separa as areas mais e menos importantes, reflete como as pessoas pensam e as
• prioridades do negócio;
• Dentro do "triângulo de ouro";
• Compacta, para deixar espaço para o conteúdo;
• Rótulos (labels) curtos;
• Mostra visualmente, com clareza, onde o usuário está.
Desenho de Telas

Outros Princípios para Implementar Interfaces Eficazes

Título das páginas reforça a navegação e orienta o usuário

Os elementos que tornam o título das páginas eficaz são:
• (Quase) sempre estão no mesmo lugar;
• Está destacado visualmente;
• É curto;
• O nome coincide com o que está na navegação;
• É consistente na capitalização das letras.

Botões e Links
Normalmente, use botões para tarefas (ações), principalmente as primárias, e links para navegação.

Separe suas tarefas primárias, secundárias e terciárias

Dê às tarefas primárias lugar de destaque e foco visual. Tente limitar a uma ou duas tarefas primárias
por página.
Desenho de Telas
Outros Princípios para Implementar Interfaces Eficazes
Deixe sua interface rápida
A aqui não estamos falando só de tempo de carregamento! Ela deve ser fácil de ver o que fazer, possibilitar o
mínimo de cliques para ir de um lugar a outro ou para completar uma tarefa.

Mantenha proximidade
Itens relacionados devem se manter próximos.

Seletivamente copie interações comuns e já comprovadas

Inove só onde há algo único.

Design visual deve ter total conexão com o de interação

O design visual deve ajudar o de interação a atender os requisitos do produto. Nunca o design visual
pode estragar um trabalho de interação bem feito.

Menos é mais
Interfaces do Usuário incríveis devem ser quase invisíveis.

Fonte: UX e Usabilidade Aplicados em Mobile e Web