Apostila - COD PDF

Convenções de Design de Interface
Janicy Rocha
2019
Convenções de Design de Interface
Janicy Rocha
© Copyright do Instituto de Gestão e Tecnologia da Informação.
Todos os direitos reservados.
Convenções de Design de Interface – Página 2 de 95

Sumário
Apresentação.. ........................................................................................................... 5
Capítulo 1. Introdução ao Design de Interfaces..................................................... 6
1.1. Interfaces: questões gerais .............................................................................. 6
1.2. Princípios da psicologia para o design de interfaces ..................................... 11
1.3. Padrões de design de interação .................................................................... 12
1.4. Estrutura dos padrões de design de interação............................................... 14
1.5. Bibliotecas de padrões de design de interação .............................................. 15
Capítulo 2. Elementos de inserção de conteúdo ................................................. 18
2.1. Inserção de conteúdo em interfaces .............................................................. 19
2.2. Elementos de inserção de conteúdo: campos e texto rico ............................. 23
2.3. Elementos de inserção de conteúdo: seleções .............................................. 25
Capítulo 3. Elementos de navegação .................................................................. 28
3.1. Sistemas de navegação ................................................................................. 28
3.2. Padrões de navegação para aplicativos móveis ............................................ 31
3.3. Elementos de navegação: links, saltos e breadcrumb ................................... 34
3.4. Elementos de navegação: menus, abas e filtros ............................................ 36
Capítulo 4. Elementos de informação .................................................................. 40
4.1. Informação em interfaces: boas práticas ....................................................... 42
4.2. Informação em interfaces: alertas .................................................................. 44
Capítulo 5. Usabilidade e acessibilidade em interfaces ....................................... 50

5.1. Usabilidade: visão geral ................................................................................. 50
5.2. Usabilidade: metas, métricas e heurísticas .................................................... 52
5.3. Acessibilidade: visão geral ............................................................................. 60
5.4. Acessibilidade: diretrizes................................................................................ 62
Capítulo 6. Tendências de design de interfaces .................................................. 71
6.1. Skeumorfismo vs. Flat Design ....................................................................... 71
6.2. Google Material Design (Android): uma introdução ....................................... 75
Capítulo 7. Guias de Estilo .................................................................................. 80
7.1. Design Atômico .............................................................................................. 80
Capítulo 8. Avaliação do Design de Interfaces .................................................... 83
8.1. Avaliação de interfaces: diferenças entre validação, inspeção e empírica .... 83
8.2. Avaliação de usabilidade e de acessibilidade ................................................ 84
Referências.............. ................................................................................................ 89

Apresentação
Prezados(as) estudantes,
Bem vindos(as) à disciplina Convenções de Design de Interface! Esta

disciplina está organizada em oito unidades de aprendizagem. Em cada unidade de
aprendizagem, você encontrará um ou mais dos elementos descritos a seguir. Atente-
se ao significado de cada um deles:
 Multimídia: sugestão de conteúdos complementares em formatos

diversos.
 Links úteis: fontes de consulta para o dia a dia no exercício da profissão

ou para aprofundamento futuro de conteúdos.
 Sugestão de leitura: livros e textos complementares para leitura futura.
 Leitura recomendada: textos para leitura durante o curso da disciplina
 Para refletir: situações que podem fomentar reflexões ao longo da

disciplina.
 Você sabia que: informações adicionais, de utilidade cotidiana.
Bons estudos!

Capítulo 1. Introdução ao Design de Interfaces
O design de interface, um dos aspectos que compõem a Experiência do

Usuário, tem o papel fundamental de possibilitar uma interação amigável e intuitiva
entre usuário e produto. Interfaces têm o objetivo de estabelecer um diálogo entre
máquina e humano. É a ferramenta que permite ao indivíduo se comunicar com
muitos dispositivos e, como todo diálogo, é bidirecional. Existem vários fatores que
condicionam esse diálogo e, de forma geral, são organizados em forma de padrões,
convenções, heurísticas e/ou diretrizes de design. Para começar nossa reflexão sobre
a influência dos padrões no design de interfaces, vamos a uma visão geral dessa
atividade.
1.1. Interfaces: questões gerais
A interface é a parte do sistema computacional com a qual o usuário se

comunica. É por meio da interface que o usuário realiza as ações desejadas no
sistema, e recebe os resultados destas ações, em um processo de comunicação
denominado interação (PREECE; ROGERS; SHARP, 2002). Interface, conforme
entendidas por van Amstel (2018, online), é “uma área cinza” com, pelo menos, três
formas de comportamento: (i) forma, que possibilita informação; (ii) estrutura, que
possibilita interação; e (iii) função, que possibilita experiência.
Os princípios de design, usados no projeto de interfaces e interações, são

abstrações generalizáveis destinadas a orientar os projetistas a refletirem sobre
diferentes aspectos das interfaces e das habilidades humanas. Derivados de uma
mistura de conhecimento baseado em teoria, experiência e bom senso, eles são
escritos de forma prescritiva, sugerindo aos designers o que utilizar e o que evitar na
interface – os “sim” e “não” – (Dos and Don’ts) do design de interação (PREECE;
ROGERS; SHARP, 2002).
Uma interface mal projetada pode deixar o usuário em dúvida e, como

consequência, a preocupação em não cometer erros durante o uso diminuirá seu foco
na execução das tarefas, influenciando negativamente sua satisfação com o produto.

Insegurança e insatisfação, não raro, são motivações suficientes para que usuários
decidam não mais utilizar produtos, sistemas e interfaces.
Ao projetar uma interface, o profissional – ou equipe – não deve dar margens

para que esses possíveis momentos de insegurança ocorram. Além disso, precisa
deixar muito claro quais serão os resultados da interação com a interface e de quais
formas essa interação pode ocorrer. O objetivo primordial sempre deve ser o de
garantir que um usuário realize todas as ações e tarefas de forma simples e eficiente,
sem demandar grande esforço físico (p. ex.: número de cliques) ou cognitivo (p. ex.:
dificuldade de entendimento).
Ben Shneiderman e Catherine Plaisant, ambos pesquisadores do Laboratório

de Interação Humano-Computador na Universidade de Maryland, apresentaram em
1986 as chamadas 8 Regras de Ouro do Design de Interfaces (Eight Golden Rules
of Interface Design ). Em função das mudanças tecnológicas ocorridas desde então,
as referidas regras são atualizadas constantemente, continuando, portanto,
pertinentes para orientar a concepção e a avaliação de sistemas interativos. São elas
(SHNEIDERMAN; PLAISANT, 2010):
1) Mantenha a consistência: mesmas terminologias devem ser utilizadas em

avisos, menus e telas de ajuda; cores, layout, capitalização e fontes também
devem ser consistentes. Exceções devem ser usadas com parcimônia, apenas
em casos de necessidade (p. ex.: evitar que o usuário aja de forma automática,
motivá-lo a refletir sobre suas ações).
2) Permita que os usuários utilizem atalhos: projetar com flexibilidade

possibilita formas mais rápidas de interação para usuários mais experientes.
3) Ofereça feedbacks informativos: o usuário precisar saber onde está, o que

está acontecendo e para onde ele será direcionado após o término de sua
ação.
4) Crie diálogos que indiquem o fim de ações: fluxos de interação que acabam
sem feedback ao usuário causam dúvida se foram concluídos com sucesso ou
não.

5) Evite erros: toda interface deve possuir mecanismos capazes de evitar ao
máximo que os usuários cometam erros; caso não seja possível evitar, é
necessário oferecer instruções para corrigir o dado incorreto (p. ex.: qual
campo de formulário não foi preenchido corretamente e qual a forma correta
de preenchê-lo).
6) Permita a fácil reversão de ações: esta característica diminui o medo de

cometer erros e incentiva a exploração de opções desconhecidas, pois o
usuário sabe que será possível desfazer ações (CTRL+Z).
7) Dê ao usuário a sensação de controle: usuários gostam de ter a sensação

de que estão no comando da interface e que ela responde às suas ações da
maneira que eles desejam.
8) Reduza a carga de memória de curta duração: toda interface deve ser

estruturada de forma que o usuário realize as ações desejadas sem a
necessidade de memorizar informações de uma tela para usar em outra.
Listas como essas são bem comuns quando o assunto é o design de

interfaces. De forma geral, elas contemplam uma junção de fatores humanos
(relativos às expectativas das pessoas e à maneira como elas interpretam suas
experiências) e computacionais. Elas, no entanto, não têm a intenção de especificar
como realizar o design de uma interface real. São apenas princípios: um conjunto de
itens que devem ser lembrados, podendo ser contemplados e implementados de
diferentes formas. No Quadro 1 resume-se itens considerados por Porter (online, s.d)
como os princípios mais relevantes do design de interfaces do usuário.
Quadro 1 - Princípios do design de interfaces.
PRINCÍPIO JUSTIFICATIVA
Clareza é o objetivo mais

Clareza inspira confiança e cativa o uso.
importante.

Interfaces existem para Interface não é apenas arte, precisa permitir
permitir a interação. realizar tarefas.
Não coloque na interface elementos

Prenda a atenção a todo custo.
desnecessários que distraiam o usuário.
Mantenha o usuário As pessoas se sentem mais confortáveis

no controle. quando se sentem no controle de suas ações.
Interfaces mais compactas desburocratizam a

Manipulação direta é melhor.
interação.
Menos curva de aprendizado, maior facilidade

Um objetivo principal por tela.
de uso.
Mantenha ações secundárias

A funcionalidade existe para uma ação primária.
em segundo plano.
Forneça sempre um Não abandone o usuário só porque ele já

“próximo passo”. efetuou a interação que você queria.
O aspecto segue o Quando algo não se comporta conforme nossas

comportamento. expectativas, ficamos frustrados.
Elementos que tenham a mesma função ou

Questões de consistência. comportamento não devem ter aparências
diferentes.
Hierarquia visual forte Falta de ordem clara para a visualização dos

funciona melhor. diferentes elementos gera confusão.
Uma organização inteligente Não force o usuário a descobrir as coisas,

reduz a carga cognitiva. mostre a ele os caminhos.

Luz do ambiente, tipo e posição da tela, ou até
Não caracterize elementos
mesmo deficiências visuais modificam ou
apenas com a cor.
impedem a compreensão.
Mostre na interface apenas o necessário para a

Revelação progressiva.
tarefa do momento.
Ajude o usuário no momento Não esconda a ajuda, mas deixe-a fora do

em que ele precisa. caminho de quem não precisa dela.
Um momento crucial: o Ofereça suporte e orientação para que os

estado zero. usuários iniciem as tarefas que desejam.
Não crie interfaces para problemas hipotéticos:

Os problemas existentes são
as pessoas procuram soluções para os
mais valiosos.
problemas que já têm.
O bom design é o que passa despercebido: o

O grande projeto é invisível. usuário deve se concentrar em seus próprios
objetivos, e não na interface.
Inspire-se em outras Design gráfico, tipografia, redação, arquitetura

disciplinas além do design. de informação, usabilidade… a lista é infinita.
Interfaces existem para serem O projeto fracassará quando as pessoas

utilizadas. optarem por não usá-la.
Fonte: http://bokardo.com/principles-of-user-interface-design/

1.2. Princípios da psicologia para o design de interfaces
A relação entre leis e princípios da psicologia e o design de interfaces é

tratada por diversos autores. Jon Yablonski, um designer de produtos, reúne diversas
dessas leis no website Laws of UX1. As principais são:
 Lei de Fitts: “A dificuldade para atingir um alvo está relacionada à sua

distância e seu tamanho”. É mais fácil clicar em botões grandes (especialmente
em dispositivos móveis operados a dedo) que em botões pequenos. Da mesma
forma, a distância entre uma área de tarefa de usuário e o botão a ela
relacionado deve ser a menor possível.
 Lei de Hick: “O tempo que um usuário leva para tomar uma decisão aumenta
com o número e a complexidade das escolhas mostradas para ele”. Também
conhecida como “o paradoxo da escolha”, essa lei evidencia que usuários
bombardeados com diversas possibilidades de escolha precisam de tempo
para avaliar e decidir. Por isso, simplifique as opções, dividindo tarefas
complexas em etapas menores.
 Lei de Jakob: “Usuários que possuem experiência com outras interfaces,

desejam que a interface em questão funcione de uma maneira parecida com a
que eles já conhecem”. Essa preferência pode ser respeitada com o uso de
padrões de design.
 Lei de Prägnanz: “Os usuários percebem formas complexas da maneira mais

simples possível, porque é a interpretação que requer menos esforço mental”.
Interfaces que possuem elementos visuais mais simples são mais fáceis de
serem utilizadas e cumprem melhor com seu propósito.
1 Disponível em <https://lawsofux.com/>. Acesso em: 11 mai. 2019.

 Lei da Proximidade (Gestalt Principles): “Objetos próximos tendem a se unir
e, na experiência do usuário, são entendidos como membros do mesmo
grupo”. Elementos pertencentes ao mesmo grupo devem estar juntos.
 Lei da Similaridade (Gestalt Principles): “Elementos que parecem

semelhantes são percebidos como uma unidade”. Elementos que possuem a
mesma cor ou formato são vistos como partes do mesmo conjunto. Essa lei
pode ser muito útil para agrupar elementos que pertencem a uma categoria e
garantir a consistência.
 Efeito von Restorff: “Quando vários objetos similares estão presentes, o que
se diferencia é mais provável de ser lembrado”. Deve ser aplicado em
interfaces quando precisamos destacar alguma funcionalidade ou mostrar uma
notificação para o usuário.
 Posição Serial: “Entre os elementos de uma série, os usuários sempre se

lembrarão melhor do primeiro e do último.” As ações mais importantes devem
ser colocadas nessas posições.
 Lei de Miller: “Uma pessoa em média só pode manter 7 (com margem de 2

para mais ou menos) itens em sua memória de trabalho”. Uma forma de facilitar
é organizar elementos em grupos com menor quantidade de itens.
1.3. Padrões de design de interação
O conceito de padrão de projeto (design pattern) foi proposto em 1964, pelo

arquiteto urbanista Christopher Alexander, no livro Notes on the Synthesis of Form,
onde ele demonstra que todas as construções humanas reproduzem padrões. Desde
então, diversas comunidades especificam padrões para diversos domínios e áreas do
conhecimento. No domínio de interfaces de usuário, padrões têm sido propostos e
adotados com o intuito de atingir princípios como consistência, apreensibilidade e
previsibilidade em produtos interativos.

Padrões de design de interação (Interaction Design Patterns) ou padrões de
design da interface do usuário (User Interface Design Patterns) são soluções
recorrentes para resolução de problemas comuns em projetos. Todavia, não são
regras absolutas e se modificam com o passar do tempo e a consequente evolução
tecnológica. Interfaces projetadas a partir do conhecimento desses padrões tendem
a proporcionar ao usuário melhor experiência, posto que elas reproduzem elementos
de interação com os quais os usuários já estão acostumados.
Mas por que os padrões de design ajudam os usuários? Nielsen (2004)

identificou que os usuários esperam que 77% dos elementos de design da web se
comportem de determinada maneira. Conforme o autor, os usuários passam grande
tempo navegando em diversos websites e, quando acessam determinado website,
esperam que ele funcione de maneira semelhante àqueles visitados anteriormente.
Caso o website em questão não siga padrões e convenções com os quais os usuários
estão acostumados, elementos de interface podem funcionar de forma inesperada,
gerando frustrações.
Ainda conforme o referido autor, padrões e convenções de design tendem a

aumentar o senso de domínio dos usuários sobre o website, aumentando sua
capacidade de realizar tarefas e sua satisfação geral com a experiência. Assim,
padrões permitem que os usuários saibam: (i) quais recursos esperar; (ii) como esses
recursos serão exibidos na interface, (iii) onde encontrar esses recursos no website e
na página; e (iv) como operar cada recurso para atingir seu objetivo. Além disso, os
usuários não precisam interpretar o significado de elementos de design por eles
desconhecidos, o que evita que percam recursos importantes por não reconhecê-los
ou tenham surpresas desagradáveis quando algo não funciona conforme o esperado.
Tendo esses benefícios como justificativa, Nielsen (2004) recomenda que padrões e
convenções de design sejam adotados para estruturar páginas e fluxos de
navegação, e para orientar a arquitetura da informação de websites.
Todavia, a existência de padrões não é uma regra que determina que todos
os produtos devem ter a mesma “cara”. As convenções, quando bem aplicadas, se
tornam invisíveis diante o uso de alguma interface. Portanto, o que diferencia uma
interface da outra é a forma como ela é composta e a facilidade com que ela permite

ao usuário atingir suas metas. A familiaridade diminui a curva de aprendizagem de
qualquer tipo de interface; a previsibilidade traz conforto ao usuário.
1.4. Estrutura dos padrões de design de interação
Conforme a Interaction Design Foundation (2002), um padrão de design de

interação geralmente é composto pelos seguintes elementos:
 Problema: relaciona-se ao uso do sistema e é relevante para qualquer

stakeholder interessado na qualidade do produto.
 Contexto de uso: descrição da situação (tarefas, usuários e contexto de uso)

de origem do problema.
 Princípio: um padrão, geralmente, baseia-se em um ou mais princípios de

design, como o gerenciamento de erros, consistência ou orientação do usuário.
 Solução: uma solução comprovada para o problema, na qual é descrito

apenas o núcleo do problema. O profissional tem a liberdade de implementá-
la de várias maneiras.
 Por que: como e por que o padrão realmente funciona, incluindo uma análise
de como isso pode afetar certos atributos de usabilidade.
 Exemplos: devem mostrar uma aplicação de sucesso do padrão. Isso

geralmente é acompanhado por uma captura de tela e uma breve descrição.
 Implementação: alguns padrões fornecem detalhes de implementação.

Figura 1 - Exemplo de padrão de design de interação: mapa do site.
Fonte: http://www.welie.com/patterns/showPattern.php?patternID=sitemap.
1.5. Bibliotecas de padrões de design de interação
Bibliotecas de padrões de design de interação são bastante úteis para o

projeto de recursos e elemento da interface. Elas consistem em bases de
conhecimentos nas quais são armazenadas soluções de sucesso para problemas
recorrentes e podem ser usadas como orientações para o desenvolvimento de
soluções que proporcionem boas experiências de uso.
Existem diversas bibliotecas que catalogam padrões para interfaces, algumas

colaborativas e abertas. Adicionalmente, alguns softwares para o desenvolvimento de
wireframes (p. ex.: Axure, iRise e Omnigraffle) permitem a organização de
componentes em “libraries”, facilitando a criação de bibliotecas pessoais e
organizacionais para auxiliar aqueles que estão iniciando a organização de suas

próprias bibliotecas de padrões. Jared M. Spool, fundador da User Interface
Engineering2, sugere uma forma de estruturá-la (SPOOL, 2006):
 Nome da seção: determinante para o sucesso da biblioteca, deve ser formado

por termos recorrentes da área para agrupar componentes similares. Ex.:
busca, login, menus, grids, navegação, seleção, customização, autocompletar.
 Descrição da seção: deve dizer o que a seção engloba, eliminado qualquer

dúvida que o seu nome pode ter deixado.
 Contexto de uso: informe em que situações o componente pode ser aplicado.

Ex.: um processo de checkout pode atender a qualquer finalização de pedido,
e não apenas de lojas virtuais.
 Onde foi utilizado: indique outros sistemas que utilizaram a mesma solução
para que os desenvolvedores possam vê-la aplicada.
 Especificações: nos casos em que os padrões pertencem a projetos

específicos de uma mesma empresa, detalhe tamanhos de fontes, dimensões
e cores.
 Seções relacionadas: mostre como diferentes padrões de sua biblioteca

podem se relacionar. Ex.: o autocompletar pode ser aplicado a uma busca, a
um formulário e a outros componentes.
 Histórico: quem atualizou um padrão e quando são informações importantes

em um ambiente colaborativo.
 Testes de usabilidade: reporte os resultados de componentes que tenham

sido testados, colocando informações como: período em que o teste foi
realizado, número de testadores, observações feitas por eles, etc.
2 Disponível em <https://www.uie.com/>. Acesso em: 11 mai. 2019.

 Fórum de discussão: permita que a equipe faça comentários na biblioteca
para que o processo do design se mantenha vivo e atualizado.
Teixeira (2014) aponta algumas vantagens de se ter uma biblioteca de

padrões. A primeira delas é a consistência na experiência do usuário. Como
projetos muito grandes costumam ser desenvolvidos em equipe, a padronização
permite que elementos interativos desenvolvidos por diferentes pessoas se
comportem de forma similar. Outra vantagem é a reutilização de elementos pelo
time, o que reduz custos, tempo e evita o retrabalho. Além disso, a manutenção torna-
se mais simples: é possível mensurar a eficácia dos elementos dos padrões contidos
na biblioteca, refiná-los e otimizá-los.
MULTIMÍDIA
SUGESTÃO: para uma visão complementar sobre design de interfaces com padrões de interação,
consulte material (podcast, texto, slides) disponibilizado por Frederick van Amstel. Disponível em:
<http://www.usabilidoido.com.br/design_de_interfaces_com_padroes_de_interacao.html>. Acesso em:
11 mai. 2019.
LINKS ÚTEIS
Bibliotecas de padrões de design de interação como fontes de pesquisa e

referência:
 Designing Interfaces  UI Design Patterns
 Factory Joe  UI Scraps
 Pattern Browser  User Interface Design Patterns
 Pattern Tap  Web Design Practices
 Peter Morville Search Patterns  Web Design Trends 2017
 Pttrns  Wellie
 Sari A. Laakso  Yahoo! Design Pattern Library

Capítulo 2. Elementos de inserção de conteúdo
As possibilidades para inserção de conteúdo em websites e aplicativos

móveis dizem muito sobre a qualidade do produto. Elementos que possibilitam a
inserção de conteúdo são parte essencial do diálogo entre usuários e sistemas. Bem
concebidos, elementos de inserção de conteúdo são poderosos aliados da estratégia
da empresa; por outro lado, se mal concebidos, resultam em obstáculos à conversão,
implicando um risco elevado de perdas.
O objetivo desse capítulo é refletir sobre formas de facilitar o preenchimento

de formulários pelos usuários para que eles sejam bem-sucedidos em processos
como cadastros, compras, solicitações de informação, feedbacks, respostas a
pesquisa e outros. Vamos começar com os dois exemplos de formulários, a seguir.
Ambos utilizam campos para entrada de dados semelhantes (preenchimento livre,
seleção). Caso sinta necessidade de acessá-los, eles estão disponíveis nos links
apontados como fontes das figuras. Supondo que você tenha igual necessidade de
preencher ambos, qual você se sentiria mais motivado a preencher?
Figura 2a – Exemplo de formulário.
Fonte: http://www.funprespjud.com.br/wp-
content/uploads/Formularios/ficha_de_inscricao.pdf.

Figura 2b – Exemplo de formulário.
Fonte: https://warrenbrasil.com/app/#/suitability.
2.1. Inserção de conteúdo em interfaces
As entradas ou campos para inserção de dados/informações permitem que o

usuário forneça o feedback que desejamos e, portanto, devem possibilitar uma
comunicação clara e simplificada com o usuário. Isso pode ser feito por meio de
campos textuais e numéricos, caixas de seleção, botões, controles deslizantes e
outros (ver

Figura 3).

Figura 3 – Possibilidades de campos para inserção de conteúdo.
Fonte: https://cdn-images-1.medium.com/max/800/1*mdkkgIv7bwF-RzaKLhuy5w.png.
Formulários, dentro de um aplicativo móvel ou página web, ajudam a solicitar

informações cruciais para processos como cadastros, logins ou pagamentos online e,
de forma geral, são compostos conforme representado na

Figura 4. Mensagens visam dar feedback ao usuário, mantendo-o atualizado
sobre o processo. Rótulos devem informar claramente ao usuário quais informações
são necessárias em cada campo. Os campos devem permitir que o usuário forneça
o feedback que desejamos no formato mais adequado e menos custoso (em termos
físicos e cognitivos) para ele. Validações são mensagens que informam ao usuário se
as informações digitadas estão corretas ou não. Dicas orientam ao usuário como
preencher os campos. Ações referem-se aos links ou botões que produzem uma ação
quando clicados ou pressionados.

Figura 4 – Anatomia de um formulário.
Um estudo publicado pelo Nielsen Group identificou que, quando formulários

seguem alguns princípios básicos, o tempo de preenchimento reduz drasticamente e
as chances dos usuários terminarem e submeterem os dados sem a ocorrência de
erros são quase duas vezes maiores (78% em formulários que seguem guidelines de
usabilidade vs. 42% em formulários que as negligenciam). Baseado nisso, o estudo
aponta 10 boas práticas que facilitam a inserção de conteúdo por meio de formulários
(WHITENTON, 2016; TEIXEIRA, 2016):
1) Seja breve. Eliminar campos desnecessários requer tempo, mas as vantagens

para os usuários faz esse tempo extra valer a pena. Considere coletar alguns
daqueles dados mais tarde, ou de outra forma. Nem tudo precisa ser pedido de
uma vez só.
2) Agrupe visualmente campos relacionados. Use rótulos para descrever os

campos imediatamente próximos. Evite espaçamento ambíguo, onde os rótulos
estão à mesma distância de vários campos de formulário diferentes. Se seu
formulário pede informações de tópicos diferentes, divida-o em seções e agrupe
os campos de forma que faça mais sentido para o usuário - ao invés de tratar
todos os campos como uma coisa só.

3) Apresente os campos em uma única coluna. Usar um layout de múltiplas
colunas pode distrair o usuário ao invés de deixá-lo focado em uma tarefa só.
Empilhe os campos sempre que possível. A exceção para essa regra são
campos extremamente curtos (como CEP, ou Estado), que podem ser
colocados lado a lado.
4) Siga uma sequência lógica. Toda vez que apresentar campos, faça na
sequência lógica. Quando for pedir os dados de um cartão de crédito, por
exemplo, peça primeiro o número do cartão, depois a data de validade, depois
o código de segurança - já que é também nessa ordem que o usuário vai ler
esses dados quando estiver com o cartão de crédito em mãos. Para campos
com múltiplos valores, considere deixar os valores mais frequentemente usados
no topo da lista.
5) Evite textos que são difíceis de ler. Quando for usar textos em tons claros,
tenha certeza de que a cor escolhida tenha um mínimo de contraste com o fundo
da página para evitar problemas de legibilidade e, consequentemente, de
acessibilidade.
6) Use o tipo certo de campo para o tipo certo de informação. Evite dropdowns
quando for apresentar somente 2 ou 3 opções (que poderiam ser melhor
visualizadas com radio buttons). Os campos de texto devem ser do tamanho
aproximado da informação que você espera que os usuários incluam ali.
7) Diferencie campos opcionais de campos obrigatórios. Primeiro, elimine ao

máximo os campos opcionais - se eles são opcionais, por que você está
pedindo? Tente limitar o número de campos opcionais a apenas 1 ou 2, e
identifique claramente para os usuários que eles são opcionais. Antes de eles
preencherem o campo, obviamente.
8) Explique requisitos de formatação. Se você espera que o usuário crie uma

senha, não espere que ele adivinhe os requisitos do sistema para a criação da
mesma. O mesmo serve para sintaxe, pontuação, espaços em branco para

telefones ou cartões de crédito. O ideal é que o formulário aceite qualquer tipo
de formatação e o usuário não tenha que se preocupar com isso.
9) Chega de botões de “Limpar”. O risco de o usuário clicar acidentalmente no

botão limpar e perder tudo que preencheu é grande. Pense mil vezes antes de
colocar um botão desses no formulário - e considere a hierarquia visual dele em
relação ao botão de “Enviar”.
10) Ofereça mensagens de erro visíveis e bem escritas. Erros devem ser
indicados através de vários affordances visuais diferentes - não somente
mudança de cor. Use ícones, fontes em negrito, bordas, setas. Ser sutil não é
uma boa ideia quando erros acontecem e o usuário já está frustrado com o seu
produto.
DICA DE LEITURA
JARRETT, C.; GAFFNEY, G. Forms that work: designing web forms for usability. Morgan Kaufmann,
2008. Parte do conteúdo e textos adicionais podem ser acessados em: http://www.formsthatwork.com/.
Acesso em: 28 jan. 2019.
Boas práticas para formulários mobile. Disponível em: <https://coletivoux.com/boas-

pr%C3%A1ticas-para-formul%C3%A1rios-mobile-ux-case-7cd2cae12563>. Acesso em: 28 jan. 2019.
2.2. Elementos de inserção de conteúdo: campos e texto rico
Dois elementos importantes para a inserção de conteúdo por meio de

interfaces são a clássica caixa de texto e o editor de texto rico, também chamado de
editor WYSIWYG (What You See Is What You Get), ilustrado na Figura 5. Campos de
texto rico surgiram em processadores de texto, sendo adotado na web com o intuito
de permitir que usuários criassem conteúdos mais extensos, formatados, sem que
precisassem conhecer sobre Hypertext Markup Language (HTML). Anteriormente,
textos longos eram inseridos em campos sem nenhuma opção de formatação. O uso

de editores WYSIWYG permite que a entrada seja semelhante ao que será visto na
tela ou na impressão.
A biblioteca de padrões de design UI Patterns recomenda que o WYSIWYG

seja usado em situações nas quais: (i) o usuário precise de uma indicação clara de
como será seu conteúdo quando for publicado; (ii) o usuário desconheça o HTML,
mas precisa inserir conteúdo formatado. Todavia, a biblioteca alerta que nem todos
os editores WYSIWYG mantêm a sintaxe do HTML limpa.
Figura 5 – Exemplos de campos de texto rico (WYSIWYG).
Alternativas ao editores WYSIWYG têm surgido com o intuito de apresentar

uma interface de usuário simplificada (algumas adotadas por Google Docs, Slack,
Medium, etc). Alguns oferecem a opção de inserção de conteúdo por meio de blocos,
de forma que os usuários preenchem cada bloco com o conteúdo desejado: texto,
imagens, cabeçalho, etc. Já os comandos de barra ajudam a tornar os atalhos de
teclado mais acessíveis para o usuário comum. Após o usuário digitar uma barra, uma
lista rolável de blocos aparece, permitindo que ele percorra a lista completa ou
continue digitando o nome dos elementos que deseja ("lista", "tabela" etc.) para
restringir a pesquisa.

Figura 6 – Alternativas ao WYSIWYG.
Fonte: https://medium.com/@kimikoro/wysiwyg-or-the-future-of-text-document-
editors-in-2019-1c4a6d974dd5.
2.3. Elementos de inserção de conteúdo: seleções
Estamos familiarizados com o uso de caixas de seleção (checkboxes) e

botões de opção (radio buttons). Embora comuns, o uso inadequado desses
elementos causa confusão, aumenta a carga cognitiva e afeta a experiência geral do
usuário. No design de interface, a caixa de seleção é apresentada como uma pequena
caixa quadrada, com dois estados: marcado e desmarcado. Quando marcado, o
quadrado é preenchido com uma marca de seleção, o botão de opção é apresentado
como um pequeno círculo e também possui dois estados; quando selecionado, o
círculo é preenchido com um ponto sólido.
Figura 7 – a) Caixa de seleção; b) Botão de opção.

As caixas de seleção devem ser usadas quando há uma lista de opções e o
usuário pode selecionar qualquer número delas, inclusive nenhuma. Uma variação,
as caixas de seleção autônomas ou únicas (stand-alone checkbox) são usadas
para oferecer uma opção binária (ativar ou desativar opções), como em casos de
perguntas cujas respostas podem ser verdadeiras/falsas.
Figura 8 – Possibilidades de uso para caixas de seleções.
Fonte: https://blog.prototypr.io/checkboxes-or-radio-buttons-let-the-ui-design-battle-
commence-b46aea686e23.
Botões de opção devem ser usados para listas com dois ou mais itens que
sejam mutuamente exclusivos, ou seja, devem permitir que o usuário selecione
apenas uma opção de um conjunto. Como os botões de opção implicam em uma
resposta, é comum que uma resposta padrão já venha selecionada. Caso queira
seguir esse hábito, atente-se para oferecer como padrão a opção mais segura ou
mais conveniente para o público em questão e nunca para induzir o usuário a escolher
uma opção que ele não escolheria de forma ativa.

Figura 9 - Possibilidades de uso para caixas de seleções.
Fonte: https://blog.prototypr.io/checkboxes-or-radio-buttons-let-the-ui-design-battle-
commence-b46aea686e23.
LINKS ÚTEIS
Boas práticas adicionais para uso de caixas de seleção e botões de opção:
Checkboxes vs. Radio Buttons: Disponível em: <https://www.nngroup.com/articles/checkboxes-vs-

radio-buttons/>. Acesso em: 11 mai. 2019.
Proper usage of check boxes and radio buttons: Disponível em:

<https://www.techrepublic.com/article/proper-usage-of-check-boxes-and-radio-buttons/>. Acesso em:
11 mai. 2019.

Capítulo 3. Elementos de navegação
O hipertexto constitui a base da internet, sendo tal termo utilizado para

designar processos de escrita e leitura não-lineares e não-hierárquicas que ocorrem
em ambientes informacionais digitais. O termo navegar é utilizado para referências às
diversas formas de interação estabelecidas entre usuários e hipertexto. Todavia, a
facilidade de deslocamento pelo hipertexto, associada à grande quantidade de
informação disponível ao custo de poucos cliques, pode levar o usuário à
desorientação.
Nesse cenário, elementos de navegação são recursos diversos utilizados

para auxiliar e orientar o usuário de forma que ele não se perca durante a navegação.
Nielsen (1999) afirma que o sistema de navegação de ambientes digitais deve
possibilitar que o usuário responda três perguntas principais durante toda a
experiência de uso. São essas as perguntas que guiarão o conteúdo desse capítulo:
 Onde estou? | De onde vim? | Para onde posso ir?
Vamos refletir sobre como os diversos elementos e padrões de navegação

podem contribuir para que as respostas a essas perguntas sejam ofertadas ao
usuário, sem que ele precise se esforçar para tal.
3.1. Sistemas de navegação
Os sistemas de navegação, em ambientes informacionais digitais, têm como

objetivo garantir a eficiência da ligação entre telas e funcionalidades. Eles são
compostos por vários elementos ou subsistemas. Para Morville e Rosenfeld (2006),
os subsistemas de navegação global, local e contextual (Figura 10 - a) estão inseridos
no conteúdo dos websites e têm o intuito de oferecer contexto e flexibilidade,
ajudando os usuários a entender onde estão e para onde podem ir. Já os subsistemas
de navegação suplementares (Figura 10 - b) existem à parte das páginas de
conteúdo, fornecendo formas diversas de acesso às mesmas informações.

A navegação global costuma estar presente em todas as páginas de um
website, sendo, geralmente, implementada na forma de um menu de estilo livre,
formado por palavras ou ícones representativos. Ele permite acesso direto às
principais áreas e funções, independentemente do local em que o usuário esteja na
hierarquia do website. Em termos de convenções, barras de navegações globais
costumam ter um link para a página inicial do site, um link para informações sobre a
empresa e, eventualmente, um espaço para busca.
A navegação local complementa a navegação global, permitindo que o

usuário navegue dentro de subáreas ou seções do website utilizando menus
específicos. Já a navegação contextual oferece ao usuário uma forma dinâmica de
navegar entre conteúdos similares espalhados por todo o website,
independentemente de uma estrutura fixa de menus. O intuito é oferecer ao usuário
conteúdos que ele não procurou, mas que são similares ao conteúdo acessado por
ele.
Figura 10 - Sistemas de navegação: a) Navegação global, local e contextual; b)

Navegação suplementar.
Fonte: MORVILLE, ROSENFELD (2006).
Caminhos de navegação, conforme Kalbach e Piveta (2009), são

possibilidades de movimento dentro de um sistema de navegação, exemplificados na

Figura 12. A navegação global pode oferecer acesso às páginas de nível mais alto no
website (linhas grossas vermelhas); a navegação local permite o acesso a subseções
ou páginas secundárias (linhas azuis); já a navegação suplementar permite que a
estrutura do website seja “atravessada” conforme a necessidade de acesso a
conteúdos relacionados (linhas vermelhas pontilhadas).
Figura 11 – Caminhos de navegação pela estrutura de um website.
Fonte: MORVILLE, ROSENFELD (2006).
Ao projetar um sistema de navegação, é importante considerar as

características do ambiente no qual o sistema existirá, já que os sistemas de
navegação podem ter diferentes aparências e comportamentos quando renderizados
em navegadores web ou aplicativos móveis. Ademais, os layouts tendem a assumir
formas diferentes, dados os limites das telas na maioria dos dispositivos móveis (ver
Figura 12).
Figura 12 - Aparência dos sistemas de navegação em aplicações

desktop e mobile.
Fonte: ROSENFELD; MORVILLE; ARANGO (2015).

Por sua vez, Padovani e Moura (2008) afirmam que o sistema de navegação
é formado por componentes como:
 Áreas clicáveis: permitem aos usuários pressionar ou selecionar

elementos através de dispositivos de apontamento. Ex.: os links devem
aparecer sublinhados.
 Mecanismos de identificação de áreas clicáveis: permitem que os

usuários identifiquem, com maior facilidade, os elementos clicáveis. Ex.:
quando se passa o cursor do mouse sobre um botão, ele muda de cor;
links aparecem sublinhados.
 Indicadores de localização: informam ao usuário sua exata localização

dentro do ambiente informacional digital e quais as possibilidades de
navegação a partir daquele ponto. Ex.: breadcrumbs.
 Ferramentas gerais de auxílio à navegação: úteis em situações nas

quais o usuário está confuso quanto à sua localização atual ou
necessitando de orientação sobre recursos e conteúdos disponíveis. Ex.:
menus, mapa do site, etc.
 Ferramentas de retronavegação: auxiliam o usuário a retornar a um ou

mais pontos de navegação recentes (ou não tão recentes) sem precisar
percorrer novamente o caminho que o levou à sua posição atual. Ex.:
botões “Voltar”, “Ir para o topo da página” e similares; breadcrumbs; etc.
 Feedback: mecanismos diversos para informar sobre uma mudança de

estado do sistema. Ex.: mudança de cores em links visitados, barras de
loading e mensagens de conformação de ações, etc.
3.2. Padrões de navegação para aplicativos móveis
Desenvolver aplicativos móveis é uma atividade desafiadora. Diferentes

dispositivos variam em tamanho de tela, formas de interação, quantidade de memória,
dentre outras características que, invariavelmente, demandam soluções

diferenciadas daquelas utilizadas em projetos desktop. Neil (2014) defende que, em
aplicativos móveis, a navegação ruim e o design confuso podem ser corrigidos com
padrões de design para navegação. Defendendo que uma boa navegação, assim
como um bom design, é invisível, a autora apresenta um compilado de padrões
primários e secundários de navegação.
A autora apresenta os padrões primários como aqueles aplicáveis a menus

principais. O primeiro deles é o Springboard (ou Launchpad), caracterizado por uma
página inicial de opções de menu que agem como ponto de partida para o aplicativo.
O Menu de lista também é um ponto de partida para o aplicativo, podendo incluir
recursos adicionais para busca, navegação ou filtragem. O padrão de Abas é
dependente do sistema operacional, tanto no design quanto na localização (p. ex.:
abas inferiores são preferidas pelo iOS; abas superiores são preferidas pelo Android).
O padrão de Galeria exibe itens de conteúdo individuais para navegação, podendo
ser organizado em forma de grade, carrossel ou slideshow. Dashboards fornecem
resumos de métricas que podem ser examinadas individualmente. A Metáfora
consiste em uma landing Page que reflita a metáfora do aplicativo. O Megamenu é
um grande painel sobreposto no qual as opções de menu possuem formatação e
agrupamento personalizados. Tais padrões são ilustrados na Figura 13.
Figura 13 – Padrões primários de navegação.
Fonte: NEIL (2014).

Os padrões secundários são aqueles para suporte à navegação dentro de
uma página ou módulo, sendo que padrões primários podem ser reutilizados como
padrões secundários – p. ex.: Abas com Abas; Abas e Dashboards, SpringBoard e
Galeria, etc (NEIL, 2014). Já os padrões de navegação secundária, geralmente não
funcionam bem para a navegação primária. Como padrões secundários, Neil (2014)
apresenta três. O primeiro, Carrossel de Páginas, é usado para navegar
rapidamente entre um conjunto de página, usando o gesto de “arrastar os dedos”. O
Carrossel de Imagens pode ser um carrossel 2D ou mais (como o CoverFlow,
interface gráfica tridimensional para navegação em bibliotecas digitais de música
através da arte da capa dos álbuns). Já a Lista Expandida permite que uma única
tela seja acessada para revelar, progressivamente, mais detalhes de um objeto.
Figura 14 - Padrões secundários de navegação.
Fonte: NEIL (2014).

DICA DE LEITURA
NEIL, T. Mobile design pattern gallery: UI patterns for smartphone apps. O'Reilly Media, Inc., 2014.
3.3. Elementos de navegação: links, saltos e breadcrumb
No hipertexto, links ou hiperlinks são partes destacadas que, quando

"clicadas", nos levam para outro ponto dentro de um mesmo website ou de um website
diferente. Links permitem que os usuários realizem desvios e saltos instantâneos para
outros locais da rede, de forma prática e rápida. Todavia, o uso excessivo de links em
um texto pode confundir o usuário, por demandar maior esforço cognitivo.
Ao utilizar links, é preciso se atentar para algumas convenções que, apesar

de simples, são significativas para facilitar a navegação. Eles devem ser acessíveis
por teclado e obedecer uma ordem lógica de navegação (geralmente da esquerda
para a direita e de cima para baixo), visando incluir usuários impossibilitados de usar
dispositivos apontadores. Além disso, os textos associados aos links devem ser
significativos, conforme o contexto a que se referem. O uso de expressões isoladas
de contexto (p. ex.: “Clique aqui”; “Saiba mais” e outras) pode confundir os usuários
ou deixá-los em dúvida sobre a relevância daquele link. Prefira: “Acesse o site (nome
do site)”, “Saiba mais no portal (nome do portal)”. Considere que os usuários com
deficiências cognitivas, bem como os usuários cegos que navegam somente pelos
links: ambos precisam de contexto para compreendê-los.
Links devem ter aparência de links: sublinhá-los e destacá-los na cor azul

costuma ser a convenção mais utilizada. Quando esse for o formato adotado, atente-
se para não utilizar formatação semelhante em conteúdos que não sejam links, o que
pode confundir o usuário. Adicionalmente, convencionou-se mostrar ao usuário que
determinado trecho é um link por meio da alteração da aparência do cursor do mouse
ao passar sobre ele. Em websites com conteúdo extenso, no qual o usuário vai
navegar por diversos links, costuma-se diferenciar aqueles já visitados, colocando-os

de outra cor, facilita a navegação. Também se convencionou fazer da logomarca no
cabeçalho de uma página um link para a página inicial do website, o que faz com que
a maioria dos usuários espere esse comportamento.
Links também são utilizados para possibilitar saltos no conteúdo de uma

página, o que favorece, principalmente, a acessibilidade a esses conteúdos. De forma
complementar, a usabilidade também melhora. A opção de pular links é útil para
pessoas que navegam com o teclado, já que poupa o trabalho de percorrer longas
listas de links (p. ex.: menus de navegação global e local) antes de se chegar ao
conteúdo desejado (ver exemplo na Figura 15).
Figura 15 - Exemplos de uso de links como saltos.
Fonte: http://www.agricultura.gov.br/.
Os breadcrumbs ou breadcrumb trail (migalhas de pão ou trilha de migalhas

de pão, em alusão à história de João e Maria) é um elemento de navegação que
melhora tanto a usabilidade quanto a acessibilidade de websites. Eles diminuem o
esforço para o alcance de páginas e oferecem respostas às três perguntas guias
desse capítulo, uma vez que indicam a localização atual do usuário e quais são os
níveis superiores da estrutura para os quais os usuários podem se deslocar a
qualquer momento. Por permitirem esse deslocamento, também possibilitam saltos
por partes do conteúdo. Convencionalmente, localizam-se em uma barra horizontal
na parte superior do website, permitindo rastrear o caminho percorrido. Na Figura 16
é exemplificado um problema a ser solucionado com breacrumb, conforme as

bibliotecas de padrões de design UI Patterns e Welie. Informações adicionais sobre
tal padrão podem ser encontradas nos links fonte da figura.
Figura 16 - Problema a ser solucionado com breadcrumb.
Fonte: http://ui-patterns.com/patterns/Breadcrumbs;
http://www.welie.com/patterns/showPattern.php?patternID=crumbs.
3.4. Elementos de navegação: menus, abas e filtros
Menus desempenham papéis fundamentais na navegação em websites e, por

serem tão óbvios, muitas vezes são menosprezados. Além dessa função básica, eles
também representam a estrutura de um website, trazendo um resumo de seu
conteúdo principal. O bom menu é aquele que diz ao usuário se aquele website tem
o conteúdo que ele precisa e onde tal conteúdo está. Portanto, o menu precisa
informar ao usuário sem transmitir expectativas equivocadas, como rótulos de duplo
sentido ou sem contexto.
Menus podem ser utilizados tanto para navegação global quanto para
navegação local. A forma como são organizados visualmente e logicamente
(aparência e conteúdo) pode variar conforme o contexto da aplicação. Nas bibliotecas
de padrão, listadas no capítulo 1 (p. 15), são relacionados diversos padrões de design
para menus, aplicáveis a várias situações e com inúmeras opções de personalização.

Todavia, padrões não são soluções mágicas e suas desvantagens precisam
ser consideradas caso a caso.
Figura 17 – Exemplo de menu que adota as convenções mencionadas nesse

tópico.
Fonte: https://mailchimp.com/.
Se a opção for por criar menus cujos itens são representados graficamente
por meio de ícones, é imprescindível que todos possuam descrição textual, para
permitir o acesso a usuários que navegam utilizando leitores de tela3. Ao projetar
menus, atente-se para os princípios da psicologia aplicáveis ao contexto em questão.
Lembre-se especialmente da Lei de Miller ao organizar itens no menu: “uma pessoa
em média só pode manter 7 itens em sua memória de trabalho, com margem de 2
para mais ou menos”.
3
Software utilizado por pessoas cegas, que transmite informações exibidas na tela por
síntese de voz ou de forma tátil. A leitura de elementos gráficos é feita apenas se elas
tiverem descrição textual.

A biblioteca de padrões Welie recomenda que menus horizontais nos quais a
navegação global (principal) tenha aproximadamente 10 itens, sejam organizados em
abas (Figura 18). Páginas relacionadas a cada aba devem ter navegação local e a
aba selecionada deve ser destacada.
Figura 18 – Padrão de design para navegação com abas.
Fonte: http://www.welie.com/patterns/showPattern.php?patternID=tabbing
Outros importantes elementos de navegação são aqueles que possibilitam a

filtragem de conteúdos, geralmente associados a funcionalidades de busca.
Denominados como padrões de filtragem por Neil (2012, 2014), eles podem ser
utilizados de diferentes formas. Os padrões de filtragem dinâmica são usados para
refinar ou reduzir uma lista existente e visível de objetos. Segundo a referida autora,
eles funcionam bem para refinar conjuntos de dados mais simples, como um catálogo
de endereços, mas costumam ser impraticáveis para uso em grandes conjuntos de
dados originários de várias origens.
A filtragem pode ser feita, ainda, por meio do padrão “autocompletar”, quando
a digitação mostra imediatamente um conjunto de possibilidades para a busca; por
meio de “pesquisas salvas” quando a seleção de pesquisas anteriores diminui o
esforço do usuário: ele não precisa redigitar palavras-chave ou critérios de pesquisa

por meio de formulários de busca, utilizados para buscas avançadas ou para
refinamento de pesquisas (NEIL, 2012). Tais padrões são exemplificados na Figura
19.
Figura 19 – Padrões de design para filtragem de conteúdos.
Fonte: NEIL (2012, 2014).
Sobre filtros é importante balancear dois extremos: excesso de resultados e

ausência de resultados relevantes, mesmo eles existindo. Os usuários abandonam
os websites nos quais não conseguem reduzir o volume de resultados de uma busca
para uma quantidade que exija menor esforço físico e cognitivo. Entretanto, permitir
que eles filtrem a busca ao ponto de ela não gerar nenhum resultado pode resultar
em frustração.
LEITURA RECOMENDADA
NEIL, T. UI Patterns For Mobile Apps: Search, Sort And Filter. Disponível em:
<https://www.smashingmagazine.com/2012/04/ui-patterns-for-mobile-apps-search-sort-filter/>. Acesso
em: 11 mai. 2019.
VASCONCELOS, A. Padrões de navegação mobile: vantagens e desvantagens. Disponível em:
<http://igti.com.br/blog/navegacao-mobile-vantagens-desvantagens/>. Acesso em: 11 mai. 2019.

Capítulo 4. Elementos de informação
O excesso de esforço cognitivo exigido pelas interfaces, não raro, está

relacionado a uma arquitetura de informação mal projetada e ao uso inadequado de
elementos. Interfaces claras e limpas geram menor confusão na mente dos usuários;
interfaces poluídas atrapalham a linha de raciocínio e, consequentemente, a
experiência do usuário. Seguir uma lógica na hierarquia da interface é fundamental
para que o usuário não se perca, fique desinteressado e abandone o website ou
aplicativo.
A Arquitetura de Informação é a disciplina responsável por organizar, rotular

e projetar todo o design estrutural de ambientes informacionais digitais, de forma a
garantir a usabilidade e a encontrabilidade (findability) das informações, sendo
baseada em quatro principais sistemas (MORVILLE; ROSENFELD, 2006). O sistema
de navegação (Capítulo 3) especifica as possibilidades de movimentação pelo espaço
informacional e hipertextual. O sistema de organização determina o agrupamento e a
categorização do conteúdo informacional. O sistema de rotulação estabelece formas
de representação e apresentação da informação, definindo signos para cada
elemento informativo. O sistema de busca (um serviço secundário da navegação)
determina as perguntas que o usuário pode fazer e as respostas que irá obter.
Adicionalmente, elementos de informação que surgem durante a interação,

visando auxiliar o usuário ou oferecer algum tipo de feedback, devem ser usados com
parcimônia. Sem boa motivação e exibidos em momentos incorretos, eles se tornam
irritantes e perdem toda a credibilidade. Opte por usá-los apenas quando forem
agregar algo à interação.
Uma pesquisa, feita pelo Nielsen Norman Group, utilizando a tecnologia de

eyetracking, exemplifica como o padrão do olho humano se comporta ao interagir com
uma interface. O resultado, apresentado na Figura 20, mostra que as áreas superiores
e do canto esquerdo são as áreas de mais interesse para o olho humano. Os autores
da pesquisa afirmam que o padrão de leitura dominante observado parece um F: os
usuários leem primeiro em um movimento horizontal, geralmente na parte superior da
área de conteúdo; em seguida, movem a página um pouco para baixo e leem em um

segundo movimento horizontal que cobre uma área menor que o movimento anterior;
finalmente, escaneiam o lado esquerdo do conteúdo em um movimento vertical.
Figura 20 – Padrão de deslocamento do olhar humano por interfaces.
Fonte: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-
content-discovered/.
A partir disso, os autores apresentam três implicações do padrão F para a

organização de elementos de informação em interfaces: (i) os usuários não lerão seu
texto completamente; (ii) os dois primeiros parágrafos devem indicar as informações
mais importantes; (iii) comece subtítulos, parágrafos e marcadores com palavras
significativas.
Hoober (2013) identificou que a maioria dos usuários segura seus

smartphones apenas com uma mão e usa o polegar direito para interagir, conforme
representado na Figura 21. Assim, para otimizar a interação com smartphones,
recomenda-se organizar as informações de forma que as ações primárias fiquem no
meio ou na parte de baixo da tela, partindo da esquerda para direita, pois dessa forma
o acesso é mais fácil. Mantenha ali os botões e tarefas mais importantes, minimizando
o esforço para executar ações cruciais. Obviamente, há que se considerar
particularidades do público para o qual se projeta, como pessoas que interagem com
a mão esquerda ou com as duas mãos, diferentes tamanhos de telas dos celulares e
outras.

Figura 21 – Espaços de elementos de informação em interfaces para
smartphones.
Fonte: https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-
mobile-devices.php.
DICA DE LEITURA
HOOBER, S. Design for Fingers, Touch, and People, Part 1. Disponível em:
<https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php>.
Acesso em: 11 mai. 2019.
4.1. Informação em interfaces: boas práticas
Um design de interface para ambientes informacionais digitais eficiente é

aquele no qual as informações mais relevantes ganham destaque. Tão importante
quanto pensar em formas, fontes e cores, é pensar na localização mais adequada
para determinado item de informação, na forma que ele terá e em qual momento do
percurso do usuário ele será exibido. Algumas recomendações gerais:

 Clareza e concisão em primeiro lugar: textos concisos e frases curtas
facilitam o entendimento e poupam o tempo do usuário. Além disso, tornam o
conteúdo mais acessível para usuários com deficiência cognitiva. Evite
imagens e palavras supérfluas ou dispensáveis. Adotar uma interface com
excesso de informações, como botões, imagens, linhas e textos exige uma
dose extra de energia na interação, o que cansa o usuário e pode levá-lo à
desistência.
 Mais legibilidade e mais leiturabilidade: Prefira tipografias mais legíveis,

pois elas facilitam compreensão do usuário, inclusive daqueles com alguma
deficiência cognitiva. Tipografias sem serifa em telas de computador ou outros
dispositivos geram mais leiturabilidade e legibilidade do que tipografias
serifadas.
 A importância das cores: mais que apenas ditar a beleza de uma interface,
elas podem impactar diretamente na hierarquia visual e despertar diferentes
sentidos na mente das pessoas. Atente-se ao contraste adequado e não use
apenas cor para apresentar informações relevantes para não prejudicar o
acesso por pessoas daltônicas e com deficiência visual.
 Mescle funções similares ao invés de fragmentá-las: mantenha-se atento

para as funcionalidades duplicadas e que estejam rotuladas de maneiras
diferentes; quanto mais fragmentado a interface, maior a curva de aprendizado
do usuário.
 Recomende, em vez de mostrar diversas opções similares: quanto mais

opções, menor é a chance do usuário tomar uma decisão e por em prática (Lei
de Hick). Enfatizar e destacar algumas opções (p. ex.: itens mais comprados;
itens recomendados ou com melhor custo benefício, etc.) pode ser
determinante.
 Posicione os itens com sabedoria: atente-se para o dispositivo no qual a

informação será acessada e organize os itens de informação de forma a
minimizar o esforço em tarefas importantes e dificultar ações destrutivas.

 Use mensagens cordiais, porém claras: elas transmitem ao usuário a
sensação de respeito sem, no entanto, deixá-lo inseguro.
LINKS ÚTEIS
Website com lista de boas práticas e padrões para interfaces, criado por Jakub Linowski:
GoodUI - A Good User Interface: Disponível em <https://goodui.org/>. Acesso em: 11 mai. 2019.
4.2. Informação em interfaces: alertas
Considerados um tipo de elemento de informação em interfaces, os alertas

auxiliam o diálogo entre sistema e usuário. Basicamente, eles podem ser de dois
formatos: (i) modal e (ii) não modal (toaster); ambos utilizados para exibir algum tipo
de alerta para o usuário durante a interação com a interface. A principal diferença
entre eles é que modais se sobrepõem à janela principal, interrompendo a atividade
corrente do usuário ao contrário dos não modais, ou seja, o diálogo não bloqueia a
janela principal.
Figura 22 – Exemplos de diálogos enquanto elementos de informação.
Fonte: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-
c00c66cddd8c.

Telas (ou janelas) modais criam um modo de visualização que desativa a
janela principal se sobrepondo a ela, apesar de mantê-la visível como uma janela
secundária. Assim, os usuários devem interagir com a tela modal antes que possam
retornar à tela primária. As telas modais podem ser encontradas em diferentes formas
e tamanhos – Fullscreen Modal Views (1); Pop-ups (2); Pop-overs (3); e Lightboxes
(4), exemplificados na Figura 23.
Figura 23 – Formas e tamanhos de telas modais.
c00c66cddd8c.
Telas modais mal construídas podem confundir e, até mesmo, atrapalhar o

usuário. Alguns detalhes no momento de sua construção, destacados na

Figura 24, são apontados por Baskanderi (2017) como necessários na
estrutura de uma modal. O título deve ser significativo de forma a oferecer contexto
ao usuário. Os rótulos de botões devem ser compreensíveis. Uma janela modal não
deve ser muito grande ou muito pequena. Ao iniciar um modal, use o efeito lightbox
(escurecer o fundo), o que chama a atenção para a modal e indica que ele não pode
interagir com a página de origem. Além disso, ofereça uma “saída de emergência”
representada por botões de cancelar, fechar, minimizar e similares, permitindo que o
usuário saia da sobreposição e volte ao nível primário do aplicativo.

Figura 24 – Anatomia de uma modal.
c00c66cddd8c.
A recomendação da Apple (2019) é que modais sejam usadas apenas

quando é essencial chamar a atenção de alguém, quando uma tarefa deve ser
concluída ou abandonada para continuar usando o aplicativo ou para salvar dados
importantes. Um compilado de boas práticas quanto ao uso de modais, retirado das
principais bibliotecas de padrões de design, aponta que elas devem ser usadas
quando for preciso:
 Exibir avisos importantes como forma de prevenir ou corrigir erros críticos.
 Solicitar informações necessárias para continuar o processo, como em

cadastros ou logins.
 Pedir informações que poderiam diminuir significativamente o esforço dos

usuários.
 Prender a atenção do usuário, interrompendo a tarefa atual e chamando a

atenção integral para algo mais importante.

 Mostrar informações adicionais sem perder o contexto da página primária, por
exemplo exibindo imagens ou vídeos maiores.
Modais devem ser evitadas em situações nas quais podem ser percebidas
como irritantes ou diminuir a confiança na empresa. Dentre suas desvantagens, as
modais exigem atenção imediata, dispersando os usuários de suas tarefas. Isso pode
fazer com que o usuário se esqueça ou desista do que estava fazendo, além de
adicionar etapas extras ao fluxo do usuário, aumentando o custo de interação e,
eventualmente, a taxa de abandono do website
Já as mensagens não-modais devem ser usadas para alertar sobre situações

não críticas que precisam apenas ser comunicadas, sem interromper a atividade
corrente do usuário. Podem ser usadas também para permitir tarefas concomitantes
entre a janela principal e a de diálogo. Por exemplo, os diálogos não-modais do Gmail
permitem uma fácil alternância entre as informações de escrita e de leitura (Figura
25).
Figura 25 – Diálogo não modal no Gmail.
Fonte: https://gmail.com.

Alguns alertas não-modais deslizam no canto da parte inferior da tela, ficando
parados por alguns instantes. Após alguns segundos (suficientes para a leitura),
deslizam para baixo ocultando a mensagem. Caso usuário passe o mouse sobre a
mensagem, a mesma não é ocultada até haver o Mouse Out.
Figura 26 – Exemplo de alerta não modal.
As respostas de algumas questões podem auxiliar na reflexão sobre a

apresentação e o volume de informações em interfaces: (i) quão simples e claras
estão apresentadas as informações? (ii) Qual o volume de informações ou quantidade
de interações necessárias para se concluir uma tarefa? (iii) quais tipos de alertas
serão disparados e com que frequência? (iv) qual a pertinência e a necessidade
desses alertas?

DICA DE LEITURA
Para saber mais sobre acessibilidade em alertas, acesse:
 How To Make Modal Windows Better For Everyone. Disponível em:

<https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-
everyone/>. Acesso em: 11 mai. 2019.
 How to improve the accessibility of overlay windows – Part 1. Disponível em:

<https://www.nomensa.com/blog/2014/how-improve-accessibility-overlay-windows-part-1>.
 How to improve the accessibility of overlay windows – Part 2. Disponível em:

<https://www.nomensa.com/blog/2014/how-improve-accessibility-overlay-windows-
%E2%80%93-part-2>. Acesso em: 11 mai. 2019.

Capítulo 5. Usabilidade e acessibilidade em interfaces
Usabilidade e acessibilidade podem ser entendidas como características de

qualidade de interfaces. No entanto, ambos os termos não são sinônimos, ainda que
sejam diretamente relacionados e complementares. De forma geral, a acessibilidade
refere-se à possibilidade de qualquer pessoa, não obstante suas limitações sensoriais
e motoras, conseguir acessar e interagir com determinado produto. Já a usabilidade
refere-se à facilidade de uso de determinado produto com efetividade, resultando na
satisfação subjetiva do usuário. Nesse capítulo, refletiremos sobre ambos os
conceitos e veremos formas de aplicá-los em conformidade com as convenções
existentes, com o intuito de projetar e desenvolver produtos mais acessíveis e usáveis
e, consequentemente, melhorar a experiência dos usuários.
5.1. Usabilidade: visão geral
A NBR ISO/IEC4 9126, sobre a qualidade de produtos de software, foi a

primeira norma a apresentar uma definição para o termo usabilidade: “capacidade do
produto de software de ser compreendido, aprendido, operado e atrativo ao usuário,
quando usado sob condições especificadas” (NBR ISO/IEC 9126, 1996). Tal norma
foi substituída pela ISO/IEC 25010, de 2011. A usabilidade, uma característica de
qualidade de software, possui seis subcaracterísticas, a saber: adequabilidade,
aprendizagem, operabilidade, proteção de erro de usuário, estética da interface do
usuário e acessibilidade (ISO/IEC 25010, 2011).
4
ISO é a sigla de International Organization for Standardization, uma entidade de
padronização e normatização criada em Genebra, na Suíça, em 1947. Normas publicadas
pela ISO em conjunto com a International Electrotechnical Commission (IEC) recebem a
sigla ISO/IEC. No Brasil, a ISO é representada pela Associação Brasileira de Normas
Técnicas (ABNT), instituição responsável por elaborar versões brasileiras de normas ISO,
acrescentando a elas a sigla NBR (Norma Brasileira Reguladora).

Já a NBR ISO 9241, em sua parte 11, define usabilidade e explica como
identificar a informação necessária a ser considerada na especificação ou avaliação
de usabilidade de sistemas interativos. A definição de usabilidade é apresentada na
referida norma como a “medida na qual um produto pode ser usado por usuários
específicos para alcançar objetivos específicos com eficácia, eficiência e satisfação,
em um contexto específico de uso” (ABNT NBR ISO 9241, 1998).
Adicionalmente, a norma apresenta definições de eficácia (acurácia e

completude com as quais usuários alcançam objetivos específicos); eficiência
(recursos gastos em relação à acurácia e abrangência com as quais usuários atingem
objetivos) e satisfação (ausência do desconforto e atitudes positivas para com o uso
de um produto). Ela também define que o contexto de uso é formado por componentes
do sistema de trabalho tais como: usuário, equipamento, tarefa, ambiente e produto.
Para especificar ou medir a usabilidade é necessário identificar os objetivos

e decompor eficácia, eficiência e satisfação, e os componentes do contexto de uso
em subcomponentes com atributos mensuráveis e verificáveis (ABNT NBR ISO 9241,
1998). Na Figura 27 são ilustrados os componentes da usabilidade e os
relacionamentos entre eles.
Figura 27- Estrutura de usabilidade.
Fonte: NBR ISO 9241-11 (1998).

Embora não haja um único conceito ou definição para o termo, em linhas
gerais usabilidade é o fator que assegura ao usuário facilidade e efetividade no uso
de determinado produto, ambas proporcionadas por sua interface, resultando na
satisfação subjetiva. A usabilidade de determinada interface pode ser mensurada a
partir de heurísticas, metas e métricas diversas. Algumas delas são apresentadas no
item 5.2.
5.2. Usabilidade: metas, métricas e heurísticas
Existem diversas recomendações feitas por profissionais e pesquisadores da

área de usabilidade, com o intuito de facilitar a identificação de erros e acertos mais
comuns em interfaces. Essas recomendações, geralmente, são chamadas de
heurísticas por se basearem em boas práticas, identificadas com base em
experiências anteriores. Eventualmente, as heurísticas são associadas a metas e
métricas de usabilidade com o objetivo de facilitar sua mensuração. Todavia, as
heurísticas de usabilidade podem variar conforme o domínio a que se referem. Por
exemplo, heurísticas relativas a aplicativos móveis podem diferir daquelas relativas a
interfaces de sistemas desktop.
Jakob Nielsen, um dos mais proeminentes pesquisadores sobre usabilidade,

foi pioneiro ao publicar, na década de 1990, uma lista de heurísticas indispensáveis
em interfaces web usuais. Conhecidas como as “10 heurísticas de Nielsen”, elas
auxiliam no projeto de boas interfaces e também podem ser convertidas em checklists
ou indicadores para avaliação da experiência de uso em interfaces. São elas
(NIELSEN, 1994):
1) Visibilidade do status do sistema: o sistema deve manter o usuário

informado, em tempo real, sobre o que está acontecendo.

Figura 28 - Playlist do Youtube: qual vídeo estamos assistindo; qual é
próximo; quais assistimos ou não.
Fonte: https://www.youtube.com/.
2) Equivalência entre o sistema e o mundo real: nomenclaturas, ícones, cores

e demais representações devem ser contextualizados e coerentes com o
modelo mental do usuário.
Figura 29 - Correspondência entre ícones da barra de ferramenta com

elementos do mundo real.
Fonte: Microsoft Office Word 2007.
3) Liberdade e controle do usuário: o usuário dever a liberdade de fazer o que

quiser dentro do sistema, com exceção de regras contrárias ao negócio ou que
interfiram em outras funcionalidades.

Figura 30 – Possiblidades oferecidas ao usuário que tenta logar na Deezer por
meio da conta Google.
Fonte: https://www.deezer.com/br/.
4) Consistência e padronização: um mesmo comando ou ação deve ter sempre

o mesmo efeito; uma mesma ação deve ser representada sempre com mesmo
ícone ou label. Em suma, manter a consistência visual e de linguagem.
Figura 31 - Consistência em diferentes produtos da Google.
Fonte: https://myaccount.google.com/.

5) Prevenção de erros: ações drásticas como deletar arquivos devem ser bem
sinalizadas, formulários devem apresentar instruções de preenchimento. Em suma,
melhor que mensagens dizendo que o usuário errou é prevenir que o erro ocorra.
Figura 32 – Formulários com instruções de preenchimento.
Fonte: Montagem pela autora.
6) Reconhecimento ao invés de memorização: prefira oferecer ao usuário

formas de reconhecer padrões a obrigá-lo a memorizar várias informações ao
navegar pela aplicação.
Figura 33 – Breadcrumb que informa ao usuário sua localização na página.
Fonte: https://www.submarino.com.br/.

7) Flexibilidade e eficiência de uso: possibilite o uso de atalhos e ajustes
conforme a preferência do usuário. Em suma, torne o sistema ágil para
usuários avançados e fácil de utilizar para os usuários leigos.
Figura 34 – Diferentes formas de um usuário realizar ações referentes a um

email.
Fonte: https://www.gmail.com.
8) Estética e design minimalista: interação simples e direta, com um layout mais

limpo e diálogos naturais que apareçam em momentos oportunos.
Figura 35 – O aplicativo Nubank adota design minimalista em todas as suas

telas.
Fonte: Nubank App.

9) Auxiliar usuários a reconhecer, diagnosticar e recuperar ações erradas:
caso não seja possível prevenir um erro, informe ao usuário que ele cometeu
um erro, onde errou e o que precisa ser feito para corrigir tal erro.
Figura 36 – Orientações ao usuário quanto aos erros cometidos.
Fonte: Montagem da autora.
10) Ajuda e documentação: o ideal é que o software seja tão fácil de usar
(intuitivo) que não necessite de ajuda ou documentação. Se for necessária a
ajuda deve estar ao alcance do usuário, seja por meio de FAQs, instruções e
quaisquer formas de esclarecimento adicionais.
Figura 37 - Formulário com orientações sobre localização do código de

segurança do cartão.
Fonte: https://www.walmart.com.br/.

Diretamente relacionadas a essas heurísticas, estão as “Seis metas de
usabilidade” (NIELSEN, 1999). Definir metas é importante para que se tenham
parâmetros de avaliação da usabilidade do produto. No Quadro 2 são apresentadas
as referidas metas, as perguntas a elas relacionadas, bem como é feita uma
associação com as 10 heurísticas de Nielsen.
Quadro 2 - Heurísticas e metas de usabilidade.
METAS PERGUNTA CHAVE HEURÍSTICAS ASSOCIADAS
Eficácia
O sistema serve ao
(O sistema deve fazer o que (8) Estética e design minimalista.
propósito principal?
se espera dele)
(1) Visibilidade do status do sistema.

Eficiência Quantos recursos são (7) Flexibilidade e eficiência de uso.
(Velocidade com a qual um utilizados para realizar
(9) Auxiliar usuários a reconhecer,
objetivo é alcançado) a tarefa específica?
diagnosticar e recuperar ações
erradas.
O sistema previne o
Segurança usuário de erros ou
ações indesejáveis? (5) Prevenção de erros.
(Prevenir erros e reduzir
riscos) O sistema recupera as
ações anteriores?
Utilidade O sistema oferece ao

usuário a
(Oferecer funcionalidades (3) Liberdade e controle do usuário .
funcionalidade certa
esperadas naquele contexto) segundo o contexto?
(2) Compatibilidade entre sistema e

mundo real.
Aprendizagem É fácil aprender a
(6) Reconhecimento ao invés de
(Fácil de aprender a usar) usar?
memorização.
(10) Ajuda e documentação.
Memorização Que tipo de suporte é

oferecido ao usuário
(Lembrar como utilizar a para auxiliá-lo na (4) Consistência e padronização.
interface, sem precisar realização das
reaprender) tarefas?
Fonte: NIELSEN (1994; 1999).

A preocupação com a usabilidade deve ser premissa fundamental no
desenvolvimento de produtos interativos, caso contrário pode resultar no insucesso
desses produtos. Interfaces usáveis tendem a fidelizar o usuário na medida em que
tendem a não frustrá-los durante a experiência de uso.
PARA REFLETIR
Ter os documentos roubados ou perdidos costuma ser uma experiência estressante. Imagine, então,
a experiência de precisar registrar a ocorrência em um formulário como esse da Figura 38:
 Existe barra lateral, escondendo conteúdo do campo de visão do usuário.
 O formulário contém diversos campos para preenchimento e poucos feedbacks.
 Não existem recursos para facilitar o preenchimento do endereço.
 Não existem botões de ação ou navegação no campo visual.
 Instruções de preenchimento não estão associadas aos campos.
Figura 38 - Exemplo de formulário com usabilidade ruim.
Fonte:http://www.delegaciaeletronica.pr.gov.br/modules/conteudo/conteudo.php?con
teudo=9

5.3. Acessibilidade: visão geral
Considerando a importância da web para a disseminação de informações e

serviços na Sociedade da Informação, a acessibilidade web tem alcançado grande
destaque. Ela refere-se ao acesso, interação, percepção, compreensão, navegação
e colaboração com o conteúdo web (W3C, 2019). Além de beneficiar pessoas com
quaisquer tipos de deficiências, que utilizam a web para acessar informações e
serviços, ela também beneficia pessoas sem deficiências, mas com restrições como
conexão lenta, ambientes e equipamentos especiais, deficiências temporárias ou
causadas pela idade.
Thatcher et al. (2002) afirmam que a acessibilidade web deve possibilitar que
qualquer usuário, assistido por agentes de software, ou hardware compatíveis com
suas necessidades, possa entender e interagir com determinado conteúdo, tendo
garantido o seu direito de inclusão na sociedade, não obstante suas limitações e
particularidades. Cenários aparentemente improváveis tornam-se possíveis, não só
para pessoas com deficiência, mas também para qualquer categoria de usuário
(W3C, 2018):
Uma mulher cega, utilizando um leitor de telas, pesquisa a

restituição de imposto de renda no site da Receita Federal.
Um homem cego e sem braços procura sua ex-professora

em um sistema de busca utilizando um programa de
reconhecimento de voz para entrar comandos no
computador e receber retorno a partir do leitor de telas.
Uma jovem tetraplégica, utilizando apenas um ponteiro na

cabeça, procura informações sobre células-tronco em sítios
especializados.

Um jovem surdo ou com deficiência auditiva que faz um curso
de inglês à distância.
MULTIMÍDIA
Para saber mais como as pessoas com deficiência usam a internet, acesse o vídeo “Acessibilidade
Web: custo ou benefício?”, produzido por integrantes do Acesso Digital. Disponível em:
<https://www.youtube.com/watch?v=hFI4CuxQjSA>. Acesso em: 11 mai. 2019.
Para saber mais sobre como projetar acessibilidade para pessoas com deficiências como cegueira,
dislexia, autismo, TDAH, e surdez, acesse “O que fazer” e “o que não fazer” ao projetar para
Acessibilidade, uma tradução de pôsteres do Serviço Digital do Governo de Londres feita pelo designer
O World Wide Web Consortium (W3C), comitê internacional que regula os

assuntos ligados à Internet, identifica alguns componentes essenciais (

Figura 39) a serem trabalhados para que, de fato, a acessibilidade web seja
alcançada. O primeiro desses componentes é o conteúdo, entendido como quaisquer
tipos de informação em uma página ou aplicação web (texto, imagem e áudio), bem
como o código ou marcação, que define a estrutura e a forma de apresentação. As
ferramentas de criação fornecem meios de se prover textos alternativos em uma
página web, já as ferramentas de aperfeiçoamento são utilizadas para verificar a
existência de textos alternativos. Navegadores e players de mídia apresentam o
conteúdo multimídia. Tecnologia assistiva refere-se a recursos utilizados por
pessoas com deficiência para facilitar o acesso ao conteúdo (p.ex.: programas leitores
de tela, ampliadores de tela, entre outros). Desenvolvedores e usuários são
componentes humanos, dotados de conhecimento, experiência e estratégias para
desenvolvimento e uso da web acessível.

Figura 39 - Componentes fundamentais da acessibilidade web.
Fonte: https://www.w3.org/WAI/fundamentals/components/.
As diretrizes de acessibilidade são adequadas aos diferentes

componentes: (i) as Authoring Tool Accessibility Guidelines (ATAG5) dizem respeito
às ferramentas de criação, (ii) as Web Content Accessibility Guidelines (WCAG6) se
referem ao conteúdo web e (iii) as User Agent Accessibility Guidelines (UAAG7) são
relativas aos navegadores e players de mídia, incluindo alguns aspectos das
tecnologias assistivas. Finalmente, as especificações técnicas8 consistem em
padrões diversos para a web, desenvolvidos pelo W3C.
5.4. Acessibilidade: diretrizes
Diversos conjuntos de recomendações com o objetivo de tornar o conteúdo

web mais acessível têm sido desenvolvidas pelo mundo. Adotar essas diretrizes faz
com que a web se torne acessível a um maior número de pessoas com incapacidades,
5 Disponível em <https://www.w3.org/WAI/standards-guidelines/atag/>. Acesso em: 11 mai. 2019.
6 Disponível em <https://www.w3.org/Translations/WCAG20-pt-PT/>. Acesso em: 11 mai. 2019.
7 Disponível em <https://www.w3.org/WAI/standards-guidelines/uaag/>. Acesso em: 11 mai. 2019.
8 Disponível em <https://www.w3.org/TR/>. Acesso em: 11 mai. 2019.

incluindo cegueira e baixa visão, surdez e baixa audição, dificuldades de
aprendizagem, limitações cognitivas, limitações de movimentos, incapacidade de fala,
fotossensibilidade, daltonismo e outras limitações (w3C, 2014). Dentre essas
diretrizes são apresentadas a seguir aquelas desenvolvidas pelo W3C, por serem a
principal referência internacional de acessibilidade do conteúdo web e aquelas
desenvolvidas pelo governo brasileiro, consideradas adequadas para portais
governamentais.
 Web Content Accessibility Guidelines – WCAG:
As diretrizes WCAG foram elaboradas pela Web Accessibility Initiative (WAI),

grupo de trabalho do W3C, com contribuições de pessoas de todo o mundo. Em
outubro de 2012 foram aprovadas como padrão ISO/IEC International Standard
(ISO/IEC 40500:2012). Atualizadas, as WCAG 2.1 foram publicadas em 05 de junho
de 2018, incluindo recomendações importantes para a acessibilidade para conteúdos
em dispositivos móveis. O documento WCAG 2.1 está estruturado em quatro
princípios e 78 recomendações, apresentados no Quadro 3. A cada recomendação
são associados critérios de sucesso, que consistem em declarações testáveis, que
poderão ser verdadeiras ou falsas quando aplicadas a determinados conteúdos da
web.
Quadro 3 – Princípios e recomendações das WCAG 2.1.
PRINCÍPIOS RECOMENDAÇÕES
1.1.1 - Conteúdo não textual

1.2.1 - Apenas áudio ou apenas vídeo (pré-gravado)
1.2.2 - Legendas (pré-gravado)
1.2.3 - Audiodescrição ou mídia alternativa (pré-
Perceptível gravado)
1.2.4 - Legendas (ao vivo)
1.2.5 - Audiodescrição (pré-gravado)
1.2.6 - Língua de sinais (pré-gravado)
1.2.7 - Audiodescrição estendida (pré-gravado)

1.2.8 - Mídia alternativa (pré-gravado)
1.2.9 - Apenas áudio (ao vivo)
1.3.1 - Informações e relações
1.3.2 - Sequência com significado
1.3.3 - Características sensoriais
1.3.4 - Orientação do dispositivo
1.3.5 - Identificar o objetivo de entrada
1.3.6 - Identificar o objetivo
1.4.1 - Utilização de cores
1.4.2 - Controle de áudio
1.4.3 - Contraste (mínimo)
1.4.4 - Redimensionar texto
1.4.5 - Imagens de texto
1.4.6 - Contraste (melhorado)
1.4.7 - Som baixo ou sem som de fundo
1.4.8 - Apresentação visual
1.4.9 - Imagens de texto (sem exceção)
1.4.10 - Refluxo (Zoom)
1.4.11 - Contraste não textual
1.4.12 - Espaçamento de texto
1.4.13 - Conteúdo em foco por mouse ou teclado
2.1.1 - Teclado
2.1.2 - Sem bloqueio de teclado
2.1.3 - Teclado (sem exceção)
2.1.4 - Atalhos de teclado por caractere
2.2.1 - Ajustável por limite de tempo
Operável
2.2.2 - Colocar em pausa, parar ou ocultar
2.2.3 - Sem limite de tempo
2.2.4 - Interrupções
2.2.5 - Nova autenticação
2.2.6 - Limites de tempo

2.3.1 - Três flashes ou abaixo do limite
2.3.2 - Três flashes
2.3.3 - Animações de interações
2.4.1 - Ignorar blocos
2.4.2 - Página com título
2.4.3 - Ordem do foco
2.4.4 - Finalidade do link (em contexto)
2.4.5 - Várias formas
2.4.6 - Cabeçalhos e rótulos
2.4.7 - Foco visível
2.4.8 - Localização
2.4.9 - Finalidade do link (apenas link)
2.4.10 - Cabeçalhos da seção
2.5.1 - Gestos de acionamento
2.5.2 - Cancelamento de acionamento
2.5.3 - Rótulo no nome acessível
2.5.4 - Atuação em movimento
2.5.5 - Tamanho da área clicável
2.5.6 - Mecanismos de entrada simultâneos
3.1.1 - Idioma da página

3.1.2 - Idioma das partes
3.1.3 - Palavras incomuns
3.1.4 - Abreviações
3.1.5 - Nível de leitura
3.1.6 - Pronúncia
Compreensível
3.2.1 - Em foco
3.2.2 - Em entrada
3.2.3 - Navegação consistente
3.2.4 - Identificação consistente
3.2.5 - Alteração a pedido
3.3.1 - Identificação do erro

3.3.2 - Rótulos e instruções
3.3.3 - Sugestão de erro
3.3.4 - Prevenção de erro (legal, financeiro, dados)
3.3.5 - Ajuda
3.3.6 - Prevenção de erro (todos)
3.1.1 - Idioma da página
3.1.2 - Idioma das partes
3.1.3 - Palavras incomuns
3.1.4 - Abreviações
3.1.5 - Nível de leitura
3.1.6 - Pronúncia
3.2.1 - Em foco
3.2.2 - Em entrada
3.2.3 - Navegação consistente
3.2.4 - Identificação consistente
3.2.5 - Alteração a pedido
3.3.1 - Identificação do erro
3.3.2 - Rótulos e instruções
3.3.3 - Sugestão de erro
3.3.4 - Prevenção de erro (legal, financeiro, dados)
3.3.5 - Ajuda
3.3.6 - Prevenção de erro (todos)
4.1.1 - Análise (código)

Robusto 4.1.2 - Nome, função, valor
4.1.3 - Mensagens de status
Fonte: W3C (2014), SALES (s.d).

LINKS ÚTEIS
Acesso à versão completa das WCAG 2.1, em Inglês: <https://www.w3.org/TR/WCAG21/>.

Acessibilidade Toolkit: desenvolvido pelo designer Marcelo Sales para facilitar o entendimento
das diretrizes WCAG. Contém as recomendações traduzidas, com explicações associadas.
 Modelo de Acessibilidade em Governo Eletrônico – eMAG:
Além das WCAG, utilizadas internacionalmente, muitos países

desenvolveram seus próprios documentos com recomendações de acessibilidade,
inclusive o Brasil. O Modelo de Acessibilidade em Governo Eletrônico (eMAG) é um
documento com recomendações a serem consideradas para que o processo de
acessibilidade dos websites e portais do governo brasileiro seja conduzido de forma
padronizada e de fácil implementação.
Atualmente em sua versão 3.1 (tendo como base as WCAG 2.0), o eMAG
(BRASIL, 2014) orienta que o processo para desenvolver um sítio acessível é
realizado em três passos:
1) Seguir os padrões web, um conjunto de recomendações mantido pelo W3C

para padronização do conteúdo web. Tais recomendações podem ser
encontradas na página do Escritório Brasileiro do W3C: http://w3c.br/.
2) Seguir as diretrizes ou recomendações de acessibilidade: o eMAG no

âmbito do governo federal; as WCAG, no âmbito internacional e as WAI-ARIA
(W3C, 2019b) para resolução de problemas na camada de comportamento.
3) Realizar a avaliação de acessibilidade, mediante o uso de validadores

automáticos (softwares ou serviços online aos quais URLs são submetidas),
validação manual (inspeção por especialistas) e teste com usuários reais.

Diferentemente das WCAG, as recomendações de acessibilidade do eMAG
não estão divididas por níveis de prioridade e sim por área. A cada recomendação
estão associados Critérios de Sucesso das WCAG 2.0, o que facilita que elas sejam
testadas.
Quadro 4 – Áreas e recomendações do eMAG 3.1.
ÁREA RECOMENDAÇÃO
1.1. Respeitar os padrões web

1.2. Organizar o código HTML de forma lógica e semântica
1.3. Utilizar corretamente os níveis de cabeçalho
1.4. Ordenar de forma lógica e intuitiva a leitura e tabulação
Marcação 1.5. Fornecer âncoras para ir direto a um bloco de conteúdo
1.6. Não utilizar tabelas para diagramação
1.7. Separar links adjacentes
1.8. Dividir as áreas de informação
1.9. Não abrir novas instâncias sem a solicitação do usuário
2.1. Disponibilizar todas as funções da página via teclado

2.2. Garantir que os objetos programáveis sejam acessíveis
2.3. Não criar páginas com atualização automática periódica
2.4. Não utilizar redirecionamento automático de páginas
Comportamento
2.5. Fornecer alternativa para modificar limite de tempo
2.6. Não incluir situações com intermitência de tela
2.7. Assegurar o controle do usuário sobre as alterações temporais do
conteúdo
3.1. Identificar o idioma principal da página

3.2. Informar mudança de idioma no conteúdo
3.3. Oferecer um título descritivo e informativo à página
Conteúdo/
3.4. Informar o usuário sobre sua localização na página
Informação
3.5. Descrever links clara e sucintamente
3.6. Fornecer alternativa em texto para as imagens do sítio
3.7. Utilizar mapas de imagem de forma acessível

3.8. Disponibilizar documentos em formatos acessíveis
3.9. Em tabelas, utilizar títulos e resumos de forma apropriada
3.10. Associar células de dados às células de cabeçalho
3.11. Garantir a leitura e compreensão das informações
3.12. Disponibilizar uma explicação para siglas, abreviaturas e
palavras incomuns
4.1. Oferecer contraste mínimo entre plano de fundo e primeiro plano

4.2. Não utilizar apenas cor ou outras características sensoriais para
Apresentação/
diferenciar elementos
Design
4.3. Permitir redimensionamento sem perda de funcionalidade
4.4. Possibilitar que o elemento com foco seja visualmente evidente
5.1. Fornecer alternativa para vídeo

5.2. Fornecer alternativa para áudio
Multimídia 5.3. Oferecer audiodescrição para vídeo pré-gravado
5.4. Fornecer controle de áudio para som
5.5. Fornecer controle de animação
6.1. Fornecer alternativa em texto para os botões de imagem de

formulários
6.2. Associar etiquetas aos seus campos
6.3. Estabelecer uma ordem lógica de navegação
6.4. Não provocar automaticamente alteração no contexto
Formulário 6.5. Fornecer instruções para entrada de dados
6.6. Identificar e descrever erros de entrada de dados e confirmar o
envio de informações
6.7. Agrupar campos de formulário
6.8. Fornecer estratégias de segurança específicas ao invés de
CAPTCHA

? VOCÊ SABIA QUE...
...no Brasil, a acessibilidade web está prevista em leis?

A primeira iniciativa legal para a promoção da acessibilidade na web brasileira é evidenciada pelo
Decreto 5.296/2004, que determina que websites governamentais brasileiros sejam acessíveis para
pessoas com deficiência visual. As orientações para a implementação do referido decreto constam
no Modelo de Acessibilidade do Governo Eletrônico (e-MAG), criado em 2005 (e atualizado desde
então) para atender a necessidade de websites governais brasileiros no que concerne à construção
e adaptação de conteúdos governamentais acessíveis na web.
A Lei Brasileira de Inclusão (LBI), no Artigo 63 fala sobre a acessibilidade em websites “conforme
as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente”. Atualmente, as
diretrizes internacionais mais conhecidas e completas são as Diretrizes de Acessibilidade para
Conteúdo Web (WCAG), mantidas pelo W3C desde 1999.
As recomendações das WCAG são mais adequadas para compliance, já que o e-MAG foi construído
para atender a necessidade de websites governais, um contexto de uso bastante específico. Além
disso, o e-MAG é baseado nas WCAG, sendo um resumo delas (ROCHA, SIRIHAL DUARTE, 2012).
Demais leis, decretos, portarias e similares relacionados à acessibilidade web no Brasil podem ser
consultados em <http://emag.governoeletronico.gov.br/#s1.4>.
LINKS ÚTEIS
Checklist de usabilidade: desenvolvido pela StayInTech com os problemas de usabilidade mais

comuns que os produtos digitais enfrentam. Disponível em: <https://stayintech.com/UX>. Acesso: 13
mai. 2019.
Nielsen Norman Group: website de Jakob Nielsen com materiais diversos sobre usabilidade.
Disponível em: <https://www.nngroup.com/>. Acesso: 13 mai. 2019.
Checklist para avaliação de usabilidade para celulares touchscreen desenvolvido na Universidade

Federal de Santa Catarina: Disponível em: <http://match.inf.ufsc.br:90/>. Acesso: 13 mai. 2019.
Fonte: BRASIL, 2014.

Capítulo 6. Tendências de design de interfaces
As tendências de design, diferentemente de regras, chegam para oferecer

novos aspectos, um jeito diferente de fazer as interfaces, com o intuito de despertar
o público para o consumo de algo fora da mesmice. Todavia, usar uma tendência só
por usar (para “estar na moda”), sem pensar no impacto da execução para a
experiência do usuário, não é recomendado. É importante conhecer as tendências,
suas vantagens e desvantagens para decisões mais assertivas. Algumas questões
podem ser úteis nessas decisões:
 Por que determinados websites/aplicativos adotam aquela tendência

específica?
 O que esses websites/aplicativos que a utilizam possuem em comum?
 Os usuários desses websites/aplicativos são capazes de compreender

interfaces em conformidades com esses novos elementos de design?
 Qual problema na experiência do usuário aquela tendência de design propõe

resolver? Esse é o problema dos usuários de seu website/aplicativo?
6.1. Skeumorfismo vs. Flat Design
O Skeumorfismo (ou Esqueumorfismo) refere-se a um estilo de design

popularizado com o lançamento do iPhone, que utiliza elementos visuais (ícones,
janelas, etc.) do mundo real, criando metáforas nas interfaces (RIBEIRO; SALGADO
JR., 2014). Estudos indicam que essas metáforas diminuem a curva de aprendizado
por trazer um ambiente de familiaridade ao usuário. Isso inclui desde usar uma lixeira
para arquivos apagados no Windows até um aplicativo de leitura de livros com uma
interface que representa estantes e livros físicos.

Figura 40 – Interface Skeumórfica da Apple antes do iOS 7.
Fonte: http://www.revistacliche.com.br/2013/03/skeumorfismo-uma-analise/.
Já o Flat Design (ou Design Plano) refere-se a um estilo de design mais

recente que busca criar uma experiência clean na navegação, retirando as distrações
do usuário ao minimizar a quantidade de estilos (bordas, sombras, gradientes,
imagens, etc.). Defendendo um desempenho melhor e uma interface mais limpa, o
Flat Design adota uma abordagem minimalista, no que se refere aos adornos,
priorizando tons sólidos e vibrantes, formas geométricas simples e fontes sem serifa.
Figura 41 – Interface com Flat Design.
Fonte: https://uxdesign.blog.br/flat-design-e-a-re-cultura-da-interface-40a3450b457f.

Conforme Agni (2013) é comum que o conceito de Flat Design seja
apresentado como inverso ao Skeumorfismo, entretanto, ambos são abordagens
diferentes que podem, inclusive, ser complementares. A realidade ubíqua, resultante
da evolução humana e tecnológica, demanda interfaces que sejam cross-browsers,
cross-platforms e cross-devices e, nesse cenário, a estética minimalista do Flat
Design privilegia a compreensão sem interferir no conteúdo. Porém, o Skeumorfismo
atualizado, se apropriando de metáforas mais atuais, pode contribuir com
metainformações e complementar o Flat Design.
Figura 42 – Skeumorfismo vs. Flat Design no iOS.
Fonte: RIBEIRO; SALGADO JR. 2014.
Os comparativos entre ambos os estilos de design são frequentes. Enquanto

alguns autores defendem que a grande vantagem do Skeumorfismo é a melhora na
usabilidade, devido à familiaridade dos usuários com as metáforas visuais e os
modelos, outros defendem como grande vantagem do Flat Design a possibilidade de
adaptação do mesmo conteúdo para vários dispositivos.

Quadro 5 – Comparativo Skeumorfismo e Flat Design.
SKEUMORFISMO FLAT DESIGN
Direção mais segura e familiar Facilidade de uso
Associação direta ao mundo físico Design responsivo mais eficiente
Usuários entendem a função mais

Aparência moderna
rapidamente
Interface pode ser mais visualmente poluída Mais leve de carregar
Fonte: https://www.webdesignerdepot.com/cdn-origin/uploads/2013/11/flat-
vs-skeuomorphism.jpg.
Entre o Skeumorfismo e o Flat Design existem outras opções: o material

design é uma delas, representando uma tendência a que alguns autores se referem
como “Design Quase Plano” (Almost Flat Design).
Figura 43 – Tendências de design: da Apple (à esquerda) ao Google (centro) e

à Microsoft (à direita).
Fonte: http://www.matthewmooredesign.com/almost-flat-design/.

LINKS ÚTEIS
Infográfico - Skeumorfismo vs. Flat Design: Disponível em:

<https://www.webdesignerdepot.com/cdn-origin/uploads/2013/11/flat-vs-skeuomorphism.jpg>. Acesso:
13 mai. 2019.
Flat Design. History, Benefits and Practice: Disponível em: <https://uxplanet.org/flat-design-history-

benefits-and-practice-c2b092955f14>. Acesso: 13 mai. 2019.
6.2. Google Material Design (Android): uma introdução
Material Design é um termo criado pelo Google para definir sua nova
linguagem visual, apresentada em 2014, voltada para interfaces web e mobile visando
melhorar a experiência dos usuários. Uma linguagem visual consiste em um sistema
de comunicação composto por determinados elementos visuais. No caso do Google
Material Design, a linguagem visual agrega elementos como cor, luz e movimentos,
não apenas para propiciar uma boa aparência, mas para que a navegação seja a
mais intuitiva possível.
“Sintetizar os princípios clássicos do bom design com a inovação da

tecnologia e da ciência” (MATERIAL DESIGN, 2018, online) o Material design tem
como objetivos: criar um padrão entre as interfaces das plataformas digitais do
Google (e de quem aderir à nova linguagem) e unificar a experiência dos usuários
em plataformas, dispositivos e métodos de entrada, fornecendo uma base flexível que
possibilite customizar a linguagem visual.

Figura 44 – Aparência do Google Material Design.
Fonte: https://material.io/gallery/.
O Google Material Design fundamenta-se em cinco princípios:
1) Material é a metáfora (Material is the metaphor): todos os elementos da

interface são como pedaços de matérias físicas feitas de papel e tinta.
2) Ousado, gráfico e intencional (Bold, graphic, intentional): guiado por

métodos de design impresso - tipografia, grades, espaço, escala, cor e uso de
imagens - para criar hierarquia e significado.
3) Movimento proporciona significado (Motion provides meaning): à medida

que os elementos aparecem na tela, eles transformam e reorganizam o
ambiente, com interações gerando novas transformações, feedbacks sutis e
transições coerentes.
4) Princípios flexíveis (Flexible foundation): integrado a uma base de código

personalizada que permite a implementação perfeita de componentes, plug-ins
e elementos de design.
5) Multiplataforma (Cross-platform): mantém a mesma interface de usuário entre

plataformas.

Figura 45 – Exemplo de produto que adota o Material Design.
Fonte: https://material.io/.
LINKS ÚTEIS
Google Material Design: Disponível em: <https://material.io/>. Acesso: 13 mai. 2019.
Human Interface Guidelines (iOS): uma introdução
Uma extensa lista de recomendações (Human Interface Guidelines) para iOS

é oferecida pela Apple com o intuito de guiar o desenvolvimento de aplicativos com
foco em uma melhor experiência do usuário. Os princípios de design que guiam tais
recomendações são:
 Integridade estética: representa quão bem a aparência e o comportamento

de um aplicativo se integram à sua função.
 Consistência: possível a partir da implementação de elementos de interface,

com padrões familiares e terminologia uniforme.

 Manipulação direta: experimentada quando os usuários giram o dispositivo
ou usam gestos para interagir com o conteúdo da tela, podendo ver os
resultados imediatos e visíveis de suas ações.
 Feedback: a partir do reconhecimento de ações e exibição de resultados para

manter as pessoas informadas.
 Metáforas: objetos e ações virtuais de aplicativos são metáforas de

experiências familiares, estejam elas enraizadas no mundo real ou digital.
 Controle de usuários: os aplicativos podem fazer com que as pessoas se

sintam no controle mantendo elementos interativos e previsíveis, confirmando
ações destrutivas e facilitando o cancelamento de operações.
A documentação é bastante extensa e aborda cada parte do desenvolvimento

de um aplicativo para iOS: anatomia, ícones, estrutura de navegação, interatividade,
animações, gestos, cores, tipografias, etc. Embora apresente diretrizes para serem
seguidas para o aplicativo manter um padrão de acordo com o sistema, não impede
a customização de componentes dos aplicativos.
LINKS ÚTEIS
Human Interface Guidelines - iOS: Disponível em: <https://developer.apple.com/design/human-

interface-guidelines/ios/overview/themes/>. Acesso: 13 mai. 2019.

DICA DE LEITURA
Conheça guidelines de design das principais empresas do mundo: Disponível em:

<http://www.dclick.com.br/2012/01/29/guidelines/>. Acesso: 13 mai. 2019.
PARA REFLETIR
“É muito fácil ser diferente, mas muito difícil ser melhor.”

Jonathan Ive
Antes de adotar determinada tendência de design, reflita sobre as questões apresentadas na

abertura desse capítulo e tenha em mente as palavras do designer britânico Jonathan Ive.
Busque sempre escolher o melhor para seus clientes/usuários; construa para eles experiências
ricas e atraentes.
Vale a pena abrir mão da identidade da marca e dar satisfação de seu cliente para adotar a última
tendência e estar na moda?

Capítulo 7. Guias de Estilo
Os Guias de Estilo (Style Guides) – também chamadas por alguns autores de

Sistemas de Design – referem-se, de forma geral, a padrões para interfaces digitais
e envolvem também outras etapas relacionadas, ainda que indiretamente, ao design.
O principal objetivo das Guias de Estilo é padronizar decisões de projeto com o intuito
de tornar as interfaces de usuário mais consistentes e, consequentemente, contribuir
para a melhoria do seu grau de usabilidade. São vantagens do uso de Guias de Estilo:
 Estabelecer um padrão visual: seguir padrões pré-estabelecidos é

importante para manter a consistência de um produto.
 Gerar todos os componentes necessários: evita surpresas como esquecer

de criar algum ícone ou a escolha de fontes diferentes para o corpo de texto.
 Planejar para diferentes dispositivos: permite a análise da interface para

estabelecer quais componentes serão fáceis ou difíceis de serem convertidos
em um ambiente responsivo.
De forma resumida, durante a fase de design, as Guias de Estilo incentivam

a consistência na identidade visual e ajudam a manter o sistema de interface o mais
lógico possível, o que contribui para uma melhor experiência do usuário. Elas ainda
simplificam a transição do projeto para o desenvolvimento, pois minimizam os erros
de construção e ajudam a incentivar as melhores práticas de desenvolvimento
responsivo e modular.
7.1. Design Atômico
O Design Atômico, uma metodologia para a criação de Sistemas de Design

desenvolvida por Brad Frost, baseia-se na estrutura atômica molecular: se toda a
matéria do universo pode ser decomposta em um conjunto finito de elementos
atômicos; as interfaces podem ser divididas em um conjunto finito de elementos
similares. Assim, de acordo com Frost (2016) o Design Atômico é uma metodologia
composta por cinco etapas distintas que, unidas, permitem criar sistemas de design

de interface de uma maneira mais deliberada e hierárquica. Os cinco estágios do
Design Atômico são: (i) átomos; (ii) moléculas; (iii) organismos; (iv) templates; (v)
páginas.
Átomos são os elementos mínimos presentes em uma página. Considere

como átomos os diversos elementos que compõem um campo de busca: o campo
texto, o botão “buscar”, o label que aparece próximo ao campo dizendo aos usuários
o que eles podem fazer ali (FROST, 2006). Moléculas correspondem à junção desses
elementos em um padrão de interação que faça sentido para a pessoa que está
usando. No exemplo dos átomos acima, quando eles se juntam, eles formam o
módulo que permite que as pessoas iniciem uma busca no website. Organismos são
os agrupamentos dessas moléculas em elementos que norteiam a navegação e a
leitura do conteúdo na interface. No mesmo exemplo: a busca faz parte do header do
website, que é replicado em todos os seus templates – seja na página inicial, na
página de resultados da busca, na página de Dúvidas Frequentes. Logo, os
templates consistem em grupos de organismos que se unem para formar páginas; já
as páginas são instâncias específicas de templates. Na Figura 46 são apresentadas,
de forma visual, as etapas do Design Atômico.
Figura 46 - Design Atômico aplicado ao aplicativo móvel Instagram.
Fonte: http://atomicdesign.bradfrost.com/chapter-2/.

Uma das maiores vantagens oferecidas pelo Design Atômico é a capacidade
de se alternar rapidamente entre abstrato e concreto: simultaneamente é possível ver
interfaces quebradas em seus elementos atômicos e como esses elementos
combinam-se para formar experiências finais (FROST, 2016). Mas o autor alerta: o
Design Atômico não é um processo linear. Seria insensato desenhar os elementos
isoladamente e torcer para que tudo se junte, formando um inteiro coeso. Portanto,
não interprete os cinco estágios do Design Atômico como etapas isoladas. A ideia do
Design Atômico é agilizar os entregáveis: uma Guia de Estilo e biblioteca de padrões
em formato HTML e com as interações já funcionando (para ver exemplo, acesse
http://patternlab.bradfrostweb.com/). Outras vantagens derivadas da adoção da
metodologia atômica em um Sistema de Design são: (i) diminuição de tempo e esforço
para design e desenvolvimento, pois novas páginas podem ser rapidamente
montadas a partir dos componentes já armazenados na biblioteca; (ii) melhoria na
comunicação, pois a abordagem do Design Atômico facilita a existência de uma
linguagem compartilhada; e (iii) alinhamento da visão da equipe, pois padroniza a
estruturação e a descrição de componentes.
LINKS ÚTEIS
Para conhecer outras Guias de Estilo, acesse:
 BBC GEL  IBM’s Style
 Bootstrap  Microsoft Universal Windows Platform
 Code for America  Mozilla’s Style Guide
 Duolingo’s Style Guide  Yelp Style Guide
DICA DE LEITURA
FROST, B. Atomic Design. 2016. Disponível em: <http://atomicdesign.bradfrost.com/>. Acesso: 13

mai. 2019.

Capítulo 8. Avaliação do Design de Interfaces
Segundo Freire (2008), a avaliação é importante porque valida a interface de

acordo com os requisitos do usuário, permitindo verificar se ele encontrará
dificuldades em seu uso e identificar barreiras que possam comprometer a interação.
Avaliações formativas são realizadas durante o desenvolvimento dos produtos e
avaliações somativas são realizadas após a conclusão (PREECE; ROGERS; SHARP,
2002). A escolha do momento e da forma de avaliação pode variar de acordo com o
produto de software e com a disponibilidade de pessoas, tempo e recursos.
Nesse capítulo é apresentada apenas uma introdução da avaliação de

interfaces. O conteúdo de forma aprofundada é tratado em outra disciplina do
curso (Métodos e Técnicas de Avaliação de Interface).
8.1. Avaliação de interfaces: diferenças entre validação, inspeção e empírica
As formas de avaliação mais utilizadas classificam-se como validação,

avaliação analítica e avaliação empírica. A validação acontece mediante o uso de
ferramentas automáticas que inspecionam o HTML e o CSS em busca de erros de
sintaxe. A avaliação analítica é realizada apenas por especialistas com conhecimento
sobre interfaces que utilizam checklists, heurísticas e guidelines para encontrar
problemas em uma interface, analisá-los e solucioná-los, ou oferecer recomendações
para tal (PREECE; ROGERS; SHARP, 2005).
A avaliação empírica é realizada com a participação de usuários, através de

atividades que geram dados para análise. Como técnicas de avaliação empírica,
normalmente são utilizadas a coleta de opinião e a observação de usuários. Na coleta
de opinião são utilizadas entrevistas e questionários. A observação de usuários
permite identificar problemas durante a interação, podendo acontecer em ambientes
controlados, como laboratórios, ou em ambientes naturais, como casa ou trabalho do
usuário.

8.2. Avaliação de usabilidade e de acessibilidade
A maioria dos métodos e técnicas para avaliação de acessibilidade é derivada

daqueles utilizados para a avaliação de usabilidade, especialmente da avaliação
analítica e heurística. Para avaliar a acessibilidade de websites, também existem
diversos validadores automáticos de acessibilidade (W3C, 2016) que, a partir da
submissão dos links das páginas, analisam a adequação do código-fonte à diretriz de
acessibilidade.
Com o intuito de fornecer instrumentos que viabilizem a acessibilidade dos

websites governamentais, o Departamento de Governo Eletrônico e a Organização
da Sociedade Civil de Interesse Público (OSCIP) Acessibilidade Brasil desenvolveram
o Avaliador e Simulador de Acessibilidade de Sítios (ASES), uma ferramenta capaz
de avaliar, simular e corrigir páginas web de acordo com as diretrizes de
acessibilidade brasileiras. O ASES propicia a simulação de como pessoas com
diferentes tipos de deficiências visual enxergam os conteúdos, conforme
demonstrado nas figuras a seguir.
Figura 47 - Simulação hipermetropia vs. visão normal.
Fonte: simulação via ASES.

Figura 48 - Simulação miopia vs. visão normal.
Figura 49 - Simulação daltonismo vs. visão normal.
Figura 50 - Simulação catarata vs. visão normal
Fonte: Simulação via ASES.

Figura 51 - Simulação glaucoma vs. visão normal.
A validação no ASES é feita por meio do validador daSilva, que também

funciona sem a integração com o ASES. Basta submeter a ele a URL de cada página
que se deseja validar, escolher a diretriz que orientará a validação, iniciar e aguardar
o resultado. Já os validadores indicados pelo W3C (disponíveis em
https://www.w3.org/WAI/ER/tools/) validam as páginas web conforme o e-MAG.
Figura 52 – Interfaces dos validadores ASES e daSilva.
Fonte: http://www.dasilva.org.br/.

Figura 53 – Parte do resultado de validação de www.igti.com.br.
Fonte: http://asesweb.governoeletronico.gov.br/ases/avaliar.

Embora reduzam significativamente o tempo e o esforço de verificação,
validadores automáticos não identificam todos os problemas que constituem barreiras
à acessibilidade. Alguns problemas são melhores identificados através da avaliação
humana como, por exemplo, o uso de equivalentes textuais para conteúdos gráficos
e sonoros. Nesse caso, o validador apenas identifica a existência do atributo alt, mas
não avalia se o texto fornecido descreve corretamente o conteúdo. Assim, o uso
destas ferramentas é recomendado combinado com outras formas de avaliação.
LINKS ÚTEIS
Validadores automáticos de acessibilidade:
Lista de validadores automáticos de acessibilidade - W3C
daSilva - Validador de acessibilidade
ASES - Avaliador e Simulador de Acessibilidade em Sítios
ASES WEB
Avaliação de contraste
Lista de ferramentas para verificação de contraste
Usabilidade
Checklist de Usabilidade - StayinTech

Referências
AGNI, Edu. Flat Design e a Re-Cultura da Interface. 2013. Disponível em:

<https://uxdesign.blog.br/flat-design-e-a-re-cultura-da-interface-40a3450b457f>.
APPLE. Human Interfaces Guidelines: Modality. 2019. Disponível em:

<https://developer.apple.com/design/human-interface-guidelines/ios/app-
architecture/modality/>. Acesso em: 13 mai. 2019.
BASKANDERI, Naema. Best Practices for Modals / Overlays / Dialog Windows. 2017.
Disponível em: <https://uxplanet.org/best-practices-for-modals-overlays-dialog-
windows-c00c66cddd8c>. Acesso em: 13 mai. 2019.
BRASIL. eMAG - Modelo de Acessibilidade em Governo Eletrônico. Versão 3.1. 2014.

Disponível em: <http://emag.governoeletronico.gov.br>. Acesso em: 13 mai. 2019.
FREIRE, André Pimenta. Acessibilidade no Desenvolvimento de Sistemas Web: um

estudo sobre o cenário brasileiro. 2008. 154f. Dissertação (Mestrado) - Universidade
de São Paulo, Instituto de Ciências Matemáticas e de Computação, São Paulo, 2008.
HOOBER, Steven. How Do Users Really Hold Mobile Devices? Disponível em:
<https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-
devices.php>. Acesso em: 13 mai. 2019.
ISO/IEC 25010. Systems and software engineering - Systems and software Quality
Requirements and Evaluation (SQuaRE) - System and software quality models. 2011.
KALBACH, James. Design de Navegação Web: Otimizando Experiência do Usuário.

Porto Alegre: Bookman, 2009.
MATERIAL DESIGN. Disponível em: <https://material.io/>. Acesso em: 13 mai. 2019.
MORVILLE, Peter; ROSENFELD, Louis; ARANGO, Jorge. Information Architecture

for the World Wide Web. 3. ed. Cambridge: O'Reilly, 2006.
NBR ISO 9241. Requisitos Ergonômicos para Trabalho de Escritórios com

Computadores. Parte 11 – Orientações sobre Usabilidade. 1998.
NBR ISO/IEC 9126. Engenharia de software - Qualidade de produto. Parte 1: Modelo

de qualidade. 1996.
NEIL, T. Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps. O'Reilly
Media, Inc., 2014.

NEIL, T. UI Patterns For Mobile Apps: Search, Sort And Filter. 2012. Disponível em:
<https://www.smashingmagazine.com/2012/04/ui-patterns-for-mobile-apps-search-
sort-filter/>. Acesso em: 13 mai. 2019.
NIELSEN, Jakob. The Need for Web Design Standards. 2004. Disponível em:
<https://www.nngroup.com/articles/the-need-for-web-design-standards/>. Acesso
em: 13 mai. 2019.
NIELSEN, Jakob; MACK, Robert. L. Usability Inspection Methods. New York: John
Wiley & Sons, 1994.
PAPANTONIOU, Bill et al.. The Glossary of Human Computer Interaction. 2002.

Disponível em: <https://www.interaction-design.org/literature/book/the-glossary-of-
human-computer-interaction>. Acesso em: 13 mai. 2019.
PORTER, Joshua. Principles of User Interface Design. Disponível em:

<http://bokardo.com/principles-of-user-interface-design/>. Acesso em: 13 mai. 2019.
PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Interaction Design: Beyond

Human-computer Interaction. New York: John Wiley & Sons, 2002.
RIBEIRO, Rodrigo A.; SALGADO JR., Gilberto P. Redesign da interface do site

www.libertas.edu.br em flat design. Revista de Iniciação Científica da Libertas, v. 4,
n. 2, 2016. Disponível em:
<http://www.libertas.edu.br/revistas/index.php/riclibertas/article/view/58/54>. Acesso
em: 13 mai. 2019.
ROCHA, J. A. P.; SIRIHAL DUARTE, A. B. Diretrizes de acessibilidade web: um

estudo comparativo entre as WCAG 2.0 e o e-MAG 3.0. Inclusão Social, v. 5, p. 73-
86, 2012. Disponível em: <http://revista.ibict.br/inclusao/article/view/1678/1884>.
ROSENFELD, Louis; MORVILLE, Peter; ARANGO, Jorge. Information architecture:

for the web and beyond. 4. ed. Sebastopol, CA: O'Reilly, 2015.
SALES, M. Acessibilidade Toolkit. Disponível em: <http://acessibilida.de/toolkit/>.

SHNEIDERMAN, Ben; PLAISANT, Catherine. Designing the user interface: strategies

for effective human-computer interaction. 5. ed. Boston: Addison-Wesley, 2010.
SPOOL, Jared M. The Elements of a Design Pattern. 2006. Disponível em:

<https://articles.uie.com/elements_of_a_design_pattern/>. Acesso em: 13 mai. 2019.

TEIXEIRA, Fabrício. 10 boas práticas essenciais para formulários online. 2016.
Disponível em: <https://brasil.uxdesign.cc/10-boas-pr%C3%A1ticas-essenciais-para-
formul%C3%A1rios-online-c8c6accc66f2>. Acesso em: 13 mai. 2019.
TEIXEIRA, Fabrício. Introdução e boas práticas em UX Design. Editora Casa do

Código, 2014.
THATCHER, J. et al. Constructing accessible websites. Glasshaus, 2002.
VAN AMSTEL, Frederick. Design de interfaces com padrões de interação. 2018.

Disponível em:
<http://www.usabilidoido.com.br/design_de_interfaces_com_padroes_de_interacao.
html>. Acesso em: 13 mai. 2019.
W3C - Web Accessibility Initiative. Accessible Rich Internet Applications (WAI-ARIA).

2019b. Disponível em: <https://www.w3.org/standards/techs/aria#w3c_all>. Acesso
em: 13 mai. 2019.
W3C - Web Accessibility Initiative. Web Accessibility Evaluation Tools List. 2016.
Disponível em: <https://www.w3.org/WAI/ER/tools/>. Acesso em: 13 mai. 2019.
W3C - Web Accessibility Initiative. Web Content Accessibility Guidelines (WCAG) 2.1.
2018. Disponível em: <https://www.w3.org/TR/WCAG21/>. Acesso em: 13 mai. 2019.
W3C - Web Accessibility Initiative. Web Content Accessibility Guidelines (WCAG)

Overview. 2019a. Disponível em: <https://www.w3.org/WAI/standards-
guidelines/wcag/>. Acesso em: 13 mai. 2019.
WHITENTON, K. Website Forms Usability: Top 10 Recommendations. 2016.

Disponível em: <https://www.nngroup.com/articles/web-form-design/>. Acesso em:
13 mai. 2019.

Apostila - COD PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Apostila - COD PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila - COD PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Convenções de Design de Interface

Convenções de Design de Interface – Página 2 de 95

Capítulo 1. Introdução ao Design de Interfaces..................................................... 6

1.1. Interfaces: questões gerais .............................................................................. 6

1.2. Princípios da psicologia para o design de interfaces ..................................... 11

1.3. Padrões de design de interação .................................................................... 12

1.4. Estrutura dos padrões de design de interação............................................... 14

1.5. Bibliotecas de padrões de design de interação .............................................. 15

Capítulo 2. Elementos de inserção de conteúdo ................................................. 18

2.1. Inserção de conteúdo em interfaces .............................................................. 19

2.2. Elementos de inserção de conteúdo: campos e texto rico ............................. 23

2.3. Elementos de inserção de conteúdo: seleções .............................................. 25

Capítulo 3. Elementos de navegação .................................................................. 28

3.1. Sistemas de navegação ................................................................................. 28

3.2. Padrões de navegação para aplicativos móveis ............................................ 31

3.3. Elementos de navegação: links, saltos e breadcrumb ................................... 34

3.4. Elementos de navegação: menus, abas e filtros ............................................ 36

Capítulo 4. Elementos de informação .................................................................. 40

4.1. Informação em interfaces: boas práticas ....................................................... 42

4.2. Informação em interfaces: alertas .................................................................. 44

Capítulo 5. Usabilidade e acessibilidade em interfaces ....................................... 50

Convenções de Design de Interface – Página 3 de 95

5.2. Usabilidade: metas, métricas e heurísticas .................................................... 52

5.3. Acessibilidade: visão geral ............................................................................. 60

5.4. Acessibilidade: diretrizes................................................................................ 62

Capítulo 6. Tendências de design de interfaces .................................................. 71

6.1. Skeumorfismo vs. Flat Design ....................................................................... 71

6.2. Google Material Design (Android): uma introdução ....................................... 75

Capítulo 7. Guias de Estilo .................................................................................. 80

7.1. Design Atômico .............................................................................................. 80

Capítulo 8. Avaliação do Design de Interfaces .................................................... 83

8.1. Avaliação de interfaces: diferenças entre validação, inspeção e empírica .... 83

8.2. Avaliação de usabilidade e de acessibilidade ................................................ 84

Convenções de Design de Interface – Página 4 de 95

Bem vindos(as) à disciplina Convenções de Design de Interface! Esta

 Multimídia: sugestão de conteúdos complementares em formatos

 Links úteis: fontes de consulta para o dia a dia no exercício da profissão

 Sugestão de leitura: livros e textos complementares para leitura futura.

 Leitura recomendada: textos para leitura durante o curso da disciplina

 Para refletir: situações que podem fomentar reflexões ao longo da

 Você sabia que: informações adicionais, de utilidade cotidiana.

Convenções de Design de Interface – Página 5 de 95

O design de interface, um dos aspectos que compõem a Experiência do

1.1. Interfaces: questões gerais

A interface é a parte do sistema computacional com a qual o usuário se

Os princípios de design, usados no projeto de interfaces e interações, são

Uma interface mal projetada pode deixar o usuário em dúvida e, como

Convenções de Design de Interface – Página 6 de 95

Ao projetar uma interface, o profissional – ou equipe – não deve dar margens

Ben Shneiderman e Catherine Plaisant, ambos pesquisadores do Laboratório

1) Mantenha a consistência: mesmas terminologias devem ser utilizadas em

2) Permita que os usuários utilizem atalhos: projetar com flexibilidade

3) Ofereça feedbacks informativos: o usuário precisar saber onde está, o que

Convenções de Design de Interface – Página 7 de 95

6) Permita a fácil reversão de ações: esta característica diminui o medo de

7) Dê ao usuário a sensação de controle: usuários gostam de ter a sensação

8) Reduza a carga de memória de curta duração: toda interface deve ser

Listas como essas são bem comuns quando o assunto é o design de

Quadro 1 - Princípios do design de interfaces.