UX Design e Wirefremes

Princípios de UX Design e Wirefreme

Os princípios e padrões de design de interação

são aplicados durante o processo de desenho da
interface, ajudando os designers a traduzir os
requisitos definidos para o produto em
estruturas e comportamentos na interface.
Princípios de UX Design e Wirefreme

Princípios de design de interação

são diretrizes ou regras, tipicamente baseadas
em um conjunto de valores e crenças que os
designers têm, bem como nas suas experiências
em tentar corresponder a esses valores; que
endereçam questões de comportamento, forma
e conteúdo de uma interface.
Princípios de UX Design e Wirefreme
Já os padrões são considerados soluções
recorrentes para problemas comuns, soluções
estas que se destacaram de práticas comuns e já
bem testadas. Padrões de design de interação
não só se preocupam com a estrutura e
organização dos elementos da interface, mas
também com o comportamento dinâmico e
mudanças nesses elementos em resposta às
ações do usuário.
Princípios de UX Design e Wirefreme

O esforço de formalizar os conhecimentos sobre

design de interação e melhores práticas
permitem:

• Reduzir o tempo e esforço de design em novos

projetos;
• Melhorar a qualidade das soluções de design;
• Facilitar a comunicação entre designers e
programadores.
Conceito UX “experiência do usuário”
O campo da experiência do usuário, além de se
constituir como uma área do design, resultou na
criação de outros campos de conhecimento
específico - como design de interação - e trouxe
novas demandas para campos já existentes,
transformando-os - como a incorporação do
meio digital no design de produtos.
Conceito UX “experiência do usuário”
Projetar a experiência do usuário tem exigido a
atuação de profissionais desta área durante
todo o processo de projeto, demandando que os
denominados “ux designers” tenham domínio
sobre as etapas do processo e saibam como
atuar em cada fase.
Conceito UX “experiência do usuário”
Partindo-se de uma definição sobre o conceito
de design, pode-se dizer que “design é a
habilidade de visualizar soluções concretas que
atendam às necessidades e objetivos humanos,
dentro de certas restrições”.
Conceito UX “experiência do usuário”
A partir da definição acima, é possível observar
que o design, em sua essência, já traz o
indivíduo como elemento primordial. São as
necessidades desse indivíduo que orientam o
processo de projeto e o resultado será um
produto que servirá esse mesmo indivíduo.
Conceito UX “experiência do usuário”
Então se você olhar para trás e ligar os pontos,
experiência do usuário é qualquer coisa que
envolve uma pessoa através de algum tipo de
interação ou experiência.
Conceito UX “experiência do usuário”
Apesar de não explícito, projetar pensando no
usuário é também projetar pensando na
experiência que o mesmo irá usufruir ao utilizar
o produto final. Portanto, a experiência do
usuário em si sempre existiu na concepção do
design.
 Conceito UX “experiência do usuário”

Se o design praticamente projeta pensando na

experiência do usuário, por que houve a
necessidade de se cunhar o termo user
experience?
 Conheça o seu tipo de produto
Diferentes produtos têm características,
requisitos e expectativas diferentes dos
usuários. Por exemplo, um site pode ter uma
estrutura linear ou hierárquica, com menus de
navegação, cabeçalhos, rodapés e links. Um
aplicativo pode ter uma estrutura mais dinâmica
e interativa, com gestos, guias, ícones e
animações.
 Conheça o seu tipo de produto
Um software pode ter uma estrutura mais
complexa e modular, com menus, barras de
ferramentas, caixas de diálogo e widgets. Um
dispositivo físico pode ter uma estrutura mais
tangível e ergonômica, com botões,
interruptores, sensores e displays. Conhecer o
tipo de produto ajudará você a escolher as
ferramentas, métodos e elementos de
wireframe apropriados para o seu projeto.
 Defina o escopo do seu produto
Antes de começar o wireframe, você precisa ter
uma ideia clara do que seu produto deve fazer,
para quem ele serve e como ele resolverá seus
problemas. Isso ajudará você a definir o escopo
do seu produto, que é o conjunto de recursos e
funções que você precisa incluir no seu design.
 Defina o escopo do seu produto
Para definir o escopo do produto, você pode
usar técnicas como pesquisa de usuários,
personas de usuários, histórias de usuários,
fluxos de usuários e cenários. Essas técnicas
ajudarão você a entender as necessidades,
objetivos, motivações e comportamentos de
seus usuários e como seu produto se encaixará
no contexto deles.
 Faça um esboço da estrutura do seu
produto
Depois de definir o escopo do produto, você
pode começar a esboçar sua estrutura de
produto. Este é o esboço básico de como seu
produto será organizado e como os usuários
navegarão por ele. Você pode usar esboços para
gerar e testar ideias diferentes rapidamente,
sem se preocupar com os detalhes ou a estética.
 Faça um esboço da estrutura do seu
produto
Os esboços podem ser feitos em papel, quadros
brancos ou ferramentas digitais, dependendo da
sua preferência e conveniência. O principal
objetivo do esboço é criar uma representação
visual da arquitetura, hierarquia e fluxo de
informações do seu produto.
 Refine o layout do produto
Depois de esboçar a estrutura do produto, você
pode refinar o layout do produto. Esta é a
versão mais detalhada e precisa de como seu
produto ficará. Você pode usar wireframes para
definir o layout de cada tela ou página do seu
produto e como os elementos serão organizados
e alinhados.
 Refine o layout do produto
Os wireframes podem ser de baixa ou alta
fidelidade, dependendo do nível de detalhe e
realismo que você deseja alcançar. O principal
objetivo do wireframe é criar um layout claro e
consistente que suporte a funcionalidade e a
usabilidade do seu produto.
 Valide o design do seu produto
Antes de passar para os próximos estágios do
processo de design de UX, como prototipagem e
teste, você precisa validar o design do produto.
Isso significa que você precisa verificar se seu
produto atende às expectativas e requisitos de
seus usuários e partes interessadas, e se ele
resolve os problemas que você pretendia
resolver.
 Valide o design do seu produto
Você pode usar técnicas de validação, como
comentários, avaliações, críticas e testes de
usabilidade para avaliar o design do produto.
Essas técnicas ajudarão você a identificar e
corrigir quaisquer problemas, erros ou lacunas
em seu wireframe e melhorar a qualidade e o
desempenho do seu produto.
 Storytelling em UX design
Ao construir a experiência do usuário, você está
contando uma história para o usuário, ao longo
do processo de design, para causar uma
impressão duradoura nos usuários. As pessoas
amam histórias, e produtos com histórias
inspiradoras tendem a vender mais. No entanto,
em UX o design narrativo é feito de uma forma
visual.
 Storytelling em UX design
• Usando imagens, vídeos, animações e textos, as equipes de
design transmitem uma narrativa que evoca emoção.
Marcas mundialmente conhecidas como Sephora, Audi e
Tiffany utilizam storytelling visual para comunicar a
identidade da marca ou uma campanha nova.
 Entenda o que é usabilidade
A usabilidade é uma parte crucial que molda UX.
Muita gente acha que um produto usável é o
quão fácil ele é de usar, mas é muito mais que
isso.
 Entenda o que é usabilidade
É sobre como algo pode ser usado de maneira efetiva
para completar o objetivo do usuário de maneira
eficiente e satisfatória. Adaptando para a nossa realidade
a falta da usabilidade pode fazer com o que um usuário:

• Nunca mais retorne ao seu site;

• Nunca mais efetue uma compra em seu e-commerce;
• Exclua seu aplicativo do celular;
• Tenha um sentimento negativo a respeito da marca.
 Entenda o que é usabilidade
• Usabilidade é:

• Acessar um site e ter facilidade de navegação;

• Fazer o download de um aplicativo e conseguir,
sem ver instrução alguma, ou
seja, intuitivamente, completar alguma atividade;
• Usar algo que parece que foi feito sob
medida para você;
• Não sentir raiva de quem desenvolveu o que você
está usando.
 Entenda o que é usabilidade
Resumindo: usabilidade é o quão fácil de usar é
uma interface ou sistema, no qual você navega, sem
nenhuma insegurança e, assim, consegue
completar uma ação desejada, como por exemplo,
a compra de algum produto.

Quando falamos em “facilidade” também deve

estar incluso o aspecto funcional: não adianta a
interface ser fácil de usar, mas não resolver as
necessidades do usuário.
 Entenda o que é usabilidade
Resumindo: usabilidade é o quão fácil de usar é
uma interface ou sistema, no qual você navega, sem
nenhuma insegurança e, assim, consegue
completar uma ação desejada, como por exemplo,
a compra de algum produto.

Quando falamos em “facilidade” também deve

estar incluso o aspecto funcional: não adianta a
interface ser fácil de usar, mas não resolver as
necessidades do usuário.
 Por que a usabilidade é tão
importante em design?
• Usabilidade é uma questão de sobrevivência: se
você não consegue acessar um site ou aplicativo,
quantos minutos você fica tentando? E quanto
tempo você leva para clicar no botão voltar,
fechar a tela ou até mesmo desinstalar um
aplicativo.

• Então, se você não insiste, por que outro usuário

vai insistir? Não, ele NÃO vai ficar tentando
acessar um site até criar calos nos dedos. É mais
fácil sair, não usar mais ou desinstalar o app.
 Por que a usabilidade é tão
importante em design?
• Portanto, reflita sobre isso: usabilidade é
questão de sobrevivência do seu produto,
equipe ou empresa!

Se você tem interesse em propor as melhores

soluções e construí-las, de fato, você precisa se
aprofundar nos estudos sobre Usabilidade,
Design Centrado no Usuário e aplicá-los
imediatamente aos seus projetos.
 Por que a usabilidade é tão
importante em design?
Para isso, comece conhecendo os 5 componentes da
usabilidade que os projetos devem possuir para garantir uma
melhor experiência. São eles:

• Aprendizagem: o quão fácil é para os usuários realizarem

alguma tarefa no primeiro contato com o Design? Eles
sentem algum tipo de dificuldade ou insegurança? Quais
são as reações deles ao terem contato com a interface?

• Eficiência: os usuários estão realizando as tarefas no tempo

estimado? E esse tempo estimado, de fato, condiz com o
tempo justo para realização da tarefa?
 Por que a usabilidade é tão
importante em design?
• Memorabilidade: seus usuários passaram um longo
tempo sem interagir com a interface. Com que
facilidade eles conseguem retornar às atividades que
haviam aprendido?

• Erros: Você sabe mensurar qual a gravidade dos erros

cometidos pelos usuários e com que facilidade eles se
recuperam deles? Quantos erros são cometidos?

• Satisfação: O quanto é agradável utilizar o design

proposto?
 Por que a usabilidade é tão
importante em design?
Portanto, faltando algum ou todos esses
componentes a usabilidade do seu projeto
estará prejudicada. Ou seja, o usuário não
conseguirá de maneira fácil e agradável atingir
os resultados que pretende.
 Design Responsivo e Adaptativo
Com o aumento do uso de dispositivos móveis, é
crucial criar interfaces que sejam responsivas e se
adaptem a diferentes tamanhos de tela.
Um design responsivo garante que o conteúdo seja
exibido de maneira adequada em smartphones,
tablets e desktops, proporcionando uma
experiência consistente em todos os dispositivos.
Isso envolve o uso de layouts flexíveis, imagens
otimizadas e a consideração dos gestos de toque
para interações móveis.
 Design Responsivo e Adaptativo
Características do Design Responsivo:

Layouts Flexíveis:
Uso de grades fluidas (grids) e unidades relativas (como
porcentagens) em vez de unidades fixas (como pixels) para
definir o tamanho dos elementos.
Isso permite que os elementos se redimensionem de acordo
com a largura da tela.

Imagens e Mídias Adaptáveis:

As imagens e vídeos são dimensionados de forma
proporcional para evitar distorções ou sobrecarga de
conteúdo em telas menores.
 Design Responsivo e Adaptativo
Media Queries:
Uso de CSS Media Queries para aplicar estilos específicos
com base nas características do dispositivo, como largura da
tela, resolução e orientação (retrato ou paisagem).

Navegação Simplificada:
Menus e elementos de navegação são ajustados para
dispositivos móveis, como o uso de menus "hambúrguer"
(ícone de três linhas) para economizar espaço.

Texto Legível:
O tamanho da fonte e o espaçamento são ajustados para
garantir que o texto seja fácil de ler em qualquer dispositivo.
 Design Responsivo e Adaptativo
Performance Otimizada:
O design responsivo também considera a eficiência no carregamento da
página, evitando o uso excessivo de recursos que podem tornar o site
lento em dispositivos móveis.
Vantagens do Design Responsivo:
Melhor experiência do usuário: O site funciona bem em qualquer
dispositivo.

Facilidade de manutenção: Um único código base para todas as

plataformas.

SEO aprimorado: Motores de busca como o Google priorizam sites

responsivos.

Custo-benefício: Evita a necessidade de desenvolver versões

separadas para desktop e mobile.
Design Responsivo e Adaptativo
 Elementos Visuais Atraentes e
Coerentes
O aspecto visual de uma interface tem um impacto
significativo na experiência do usuário. O uso de
elementos visuais atraentes, como cores
agradáveis, tipografia legível e imagens de alta
qualidade, pode tornar a interface mais atraente e
envolvente.

Além disso, é importante manter uma coerência

visual em toda a interface, garantindo que os
elementos de design estejam alinhados com a
identidade da marca e transmitam uma mensagem
consistente.
 Elementos Visuais Atraentes e
Coerentes
O aspecto visual de uma interface tem um impacto
significativo na experiência do usuário. O uso de
elementos visuais atraentes, como cores
agradáveis, tipografia legível e imagens de alta
qualidade, pode tornar a interface mais atraente e
envolvente.

Além disso, é importante manter uma coerência

visual em toda a interface, garantindo que os
elementos de design estejam alinhados com a
identidade da marca e transmitam uma mensagem
consistente.
 Elementos Visuais Atraentes e
Coerentes
Elementos visuais

Cor : A paleta de cores deve ser coerente com a identidade da

marca e transmitir a mensagem que se quer passar.
A paleta de cores de uma marca deve ser consistente em
todos os materiais de marketing e produtos.

Tipografia : As fontes usadas devem ser uniformes para

manter a legibilidade e o estilo da marca.

Imagens : Imagens relevantes e visualmente atraentes podem

transmitir emoções, contar histórias e capturar a essência de
uma mensagem.
 Elementos Visuais Atraentes e
Coerentes
Equilíbrio visual : A distribuição harmoniosa dos
elementos visuais em um design pode ser simétrica
ou assimétrica.

Elementos gráficos : Ícones, padrões ou outros

elementos visuais que adicionam profundidade e
interesse.

A combinação de elementos visuais atraentes e

coerentes pode potencializar a eficácia da
comunicação.
 O que são wireframes?

Wireframes são esboços simples de telas de

produtos digitais, como sites e aplicativos. O
intuito é estruturar e validar ideias, por isso os
wireframes não contam com detalhes como
cores, fontes, ícones e imagens.
 O que são wireframes?

Dessa forma, os wireframes conseguem

demonstrar de forma direta a arquitetura final
de uma interface, posicionando os elementos de
forma simples e organizada. Portanto, o
wireframe reflete apenas o necessário da
proposta de uma interface digital.
 O que são wireframes?
• Os wireframes, possuem dois objetivos principais:

• Auxiliar o UX Designer na diagramação e aplicação da identidade visual;

• Alinhar a expectativa do cliente quanto ao que o usuário quer e ao projeto criado.

• Além disso, visam responder três perguntas fundamentais do projeto:

• O quê? — Quais são os grupos de conteúdos que serão utilizados;

• Como? — Como será a visualização da interface e como ela será utilizada pelo
usuário;

• Onde? — Definir o posicionamento e estrutura da informação e conteúdo na

interface.
 Itere os wireframes do seu produto

Wireframe não é uma atividade única ou final,

mas sim um processo iterativo e contínuo. Ao
validar o design do produto, você
provavelmente descobrirá novos insights, ideias
ou desafios que exigirão que você atualize,
modifique ou revise seus wireframe.
 Itere os wireframes do seu produto

Você deve ser flexível e aberto a mudanças e

usar seus wireframe como uma ferramenta de
comunicação e colaboração com seus usuários,
partes interessadas e membros da equipe.
Refinar seus wireframes por meio de iterações
permitirá otimizar o design do seu produto,
assegurando que ele atenda plenamente às
necessidades e expectativas do seu público-alvo.
 Tenha o seu fluxo de usuários
mapeado
Para não se perder em seu próprio projeto, faça
um mapeamento do fluxo que deseja que seu
usuário siga antes de começar a desenhar
wireframes. Nesse sentido, é essencial que você
tenha o conceito e objetivo bem definidos.
 Tenha o seu fluxo de usuários
mapeado
Uma boa estruturação de interface permite que
os usuários sejam autossuficientes e naveguem
intuitivamente. Assim, você diminui o nível de
frustração do usuário e garante que ele
permaneça por mais tempo em sua interface.
 Por que fazer wireframe

Wireframes realmente são úteis quando você

está se comunicando com clientes, pois lhes
permite visualizar suas ideias mais facilmente do
que quando você apenas as descreve
verbalmente. Para casos em que o “cliente” é a
própria empresa em que se trabalha ou para
quando se tratam de projetos pessoais, a
afirmativa também é verdadeira.
 Por que fazer wireframe

Então, que esteja claro: desenvolver wireframes

é realmente um passo necessário no processo
de design! Mesmo se o site que se está
projetando seja incrivelmente minimalista e
simples, fazer o wireframe ajuda a esclarecer
exatamente o que precisa ser feito nos
diferentes tipos de página do projeto.
Por que fazer wireframe
 Por que fazer wireframe
Ao dedicar tempo para criar, pelo menos, um
wireframe simples, tenha certeza de que sua
web design levará em conta todos os elementos
das diferentes páginas que compõem o projeto
e precisam ir para o design.
 Por que fazer wireframe
Além disso, o processo de produção de
wireframes é muito
mais simples, fácil e barato de ser feito do que
quando se “pula” essa etapa e se parte direto
para o HTML/CSS: wireframes podem ser
facilmente revistos, adaptados ou descartados.
 Wireframes x Modelos x Protótipos
Wireframe, modelo (mockup) e protótipo são
frequentemente usados ​como sinônimos, mas
são três coisas diferentes (embora,
frequentemente, haja alguma sobreposição
entre eles).
 Wireframes x Modelos x Protótipos
• Cada um tem um propósito diferente do outro
e sua própria importância no processo de
design:
• Wireframes. São “ilustrações básicas” da
estrutura e componentes de uma página web.
Geralmente são o primeiro passo no processo
de design (depois da concepção mental,
obviamente).
 Wireframes x Modelos x Protótipos
• Modelos. Geralmente focam sobre os
elementos de design visual do site. São muitas
vezes bastante próximos ou idênticos à web
design final efetivo e incluem todos os
gráficos, tipografia e outros elementos da
página. Mockups geralmente são apenas
arquivos de imagem.
 Wireframes x Modelos x Protótipos
• Protótipos. São layouts semi-funcionais das
páginas e servem para dar um preview de
maior fidelidade do site real. Esta fase
antecede a programação da lógica de negócios
do site. Enquanto eles não podem ter toda a
funcionalidade, eles geralmente dão aos
clientes a capacidade de interagir com os
elementos e simular a forma como o site irá,
eventualmente, trabalhar. Protótipos podem
ou não incluir elementos de design finalizado.
 Wireframes x Modelos x Protótipos
Em suma, o wireframe vêm em primeiro lugar,
seguido do modelo (ou mockup) e, caso seja
possível/viável, haverá inúmeros benefícios ao
se fazer o uso de protótipo (às vezes chamado
“wireframe funcional“).
 Como criar wireframes
Criar wireframes é tão simples ou tão
complicado quanto você queira. Em sua forma
mais básica, um wireframe poderia ser nada
mais do que um esboço numa folha de papel.
Outros “wireframes” são criados digitalmente e
são realmente mais como protótipos, com
objetos clicáveis ​e toda a interatividade prevista.
 Como criar wireframes
O tipo de wireframe que será criado vai
depender do que o projeto demanda. Projetos
mais complicados provavelmente requerem
wireframes mais elaborados, enquanto sites
simples podem ter wireframes simples.
 Como criar wireframes
• O que incluir em um wireframe
Os wireframes devem incluir informações
suficientes para refletir o que precisa aparecer
em cada página do projeto web. Pense sobre os
elementos gerais da maioria das páginas web:
cabeçalhos, rodapés, barras laterais, áreas de
conteúdo, meta-informação, busca, widgets,
gráficos, etc.
 Como criar wireframes
Depois de ter uma idéia do que terá o site, comece
a criar os wireframes com base nesses elementos.

O quão detalhado deve ser o wireframe também

depende do projeto e de sua finalidade. Se o
wireframe servirá apenas como um documento
orientador para referência, então talvez não seja
uma boa ideia dar muito foco nesta etapa; por
outro lado, se ele vai ser usado por mais de um
designer ou desenvolvedor – ou apresentado a
clientes – então ele precisa ser melhor trabalhado.
 Como criar wireframes
• Wireframes de baixa fidelidade x Wireframes
de alta fidelidade
Existem algumas opções quando se trata do
“estilo” de wireframes. Alguns designers optam
por wireframes de baixa fidelidade, que são
basicamente linhas sobre um fundo liso com
alguns rótulos. Estes incluem tanto os
desenhados a mão, como wireframes digitais, e
são geralmente muito simples.
 Como criar wireframes
Wireframes de alta fidelidade vão um passo
além ao usando determinados elementos de
design dentro do próprio wireframe. Isto pode
incluir o logotipo ou alguns outros elementos
gráficos básicos, bem como o esquema de cores
e outros elementos visuais de design.
 Processo do wireframe
Existem muitas variações, mas há um punhado
de passos fundamentais para a criação de um
wireframe. É provável que você comece com
uma lista de coisas que o site precisa incluir ou
um documento de especificação formal de
design.
 Processo do wireframe
Outros já gostam de começar com um “olhar
geral” do design e ir acrescentando detalhes,
uma vez que se tem os fundamentos básicos do
layout.
 Processo do wireframe
Quer você decida rabiscar algumas coisas no
papel ou trabalhar com algum software, ainda
não descarte um ou outro método. Alguns
designers fazem esboços no papel e depois os
passam para software específicos; outros vão
direto para o software; outros ainda ficam
somente no “wireframe de papel”.
 Processo do wireframe
Tenha em mente que, caso se depare com algum
“entrave criativo”, mudar os formatos com que
se trabalha pode fazer maravilhas para sua
criatividade!

É muito comum experimentar várias ideias e

possibilidades diferentes com wireframes antes
de tomar decisões finais em um projeto.
 Processo do wireframe

Aliás, é justamente para facilitar/agilizar isso que

é muito bom trabalhar com wireframes, já que,
como se tem o mínimo de tempo e energia
investidos, é possível facilmente fazer alterações
e tentar coisas novas.
 Processo do wireframe
Uma vez que um wireframe básico é criado,
você pode enviá-lo para outros membros da
equipe para análise ou colocá-lo um pouco de
lado por 1 ou 2 dias para analisar novamente.
 As dez heurísticas de Nielsen
• Um grupo de princípios bastante conhecido, devido a popularidade
de quem os difundiu, são as 10 Heurísticas de Nielsen. São eles:

1 - Visibilidade do estado do sistema

2 - Correspondência entre o sistema e o mundo real
3 - Liberdade e controle do usuário
4 - Consistência e padrões
5 - Prevenção de erros (design defensivo)
6 - Reconhecimento em vez de memorização
7 - Flexibilidade e eficiência de uso
8 - Estética e design minimalista
9 - Ajudar os usuários a reconhecerem, diagnosticarem e recuperarem-
se de erros
10 - Ajuda e documentação.
 As dez heurísticas de Nielsen
Vejamos cada um deles:
1. Visibilidade do status do sistema
• É responsabilidade do sistema informar o que está acontecendo em
real time pro usuário.
• Quando estamos assistindo/ouvindo uma playlist do Youtube, do
lado direito fica bem claro: qual vídeo estamos assistindo; qual é
próximo; que assistimos ou não.
 As dez heurísticas de Nielsen
2. Correspondência entre o sistema e o mundo real

• Em relação ao mundo real podemos considerar: sons, visual e o tom de escrita que
usuário utiliza para se comunicar. Implementamos bastante esta heurística quando
utilizamos uma seta, ícones e utilizamos a cor vermelha para elementos negativos.
• Um software que usa essa heurística é o Photoshop em sua barra de ferramentas.
 As dez heurísticas de Nielsen
3. Liberdade de controle fácil pro usuário
• Essa foi a heurística que me motivou a fazer
esse post. Nesta heurística, a preocupação é
de passar para o usuário a liberdade de ele
fazer o que quiser dentro do sistema com
exceção das regras que vão contra o negócio
ou interferem em outra funcionalidade.
 As dez heurísticas de Nielsen
• Por exemplo quando criamos um tweet é bacana poder deletá-lo se
estivermos afim. Mas não dá pra editar um tweet. Imagina se você
dá um retweet e depois o usuário que fez o tweet original muda o
texto pra outra coisa que você não acha legal. Ai não dá né!
 As dez heurísticas de Nielsen
4. Consistência e padrões
• É importante manter a consistência e padrão visual (texto, cor,
desenho do elemento, som e etc).
• Por exemplo, no fórum GUJ (Grupo de usuário Java), quando vamos
responder um post o botão para enviar a resposta sempre é da
mesma cor, tamanho e texto. O elemento para cancelar a resposta
sempre tem seus padrões:
 As dez heurísticas de Nielsen
5. Prevenção de erros
• Não é uma boa ideia deixar seu usuário errar sem
explicar previamente o motivo do erro. Melhor
do que isso, tente criar uma interface que
permite o usuário não errar.
• A busca do Google faz isso de uma forma muito
inteligente. No momento que começamos
escrever nossa busca ele já te entrega algumas
sugestões, mesmo se a gente escrever a busca
com uma ortografia errada ele realiza a busca e
pergunta se estamos procurando outra
informação com a ortografia correta.
 As dez heurísticas de Nielsen
• Realizando uma busca no Google:
 As dez heurísticas de Nielsen
• Resultado da busca com erro de ortográfica:
 As dez heurísticas de Nielsen
6. Reconhecimento em vez de memorização
O usuário não tem obrigação de decorar qual foi o caminho que ele fez
pra chegar até a página.
Por exemplo, quando você entra em um produto do site da Locaweb é
disponibilizado o caminho que você fez pra chegar até ele. Nós
chamamos isso de (Caminhos de pão ou migalhas de pão).
 As dez heurísticas de Nielsen
7. Flexibilidade e eficiência de uso
É importante deixar uma experiência boa com seu sistema desde o
usuário mais leigo até o mais avançado.
Por exemplo, dentro do Trello (kanban de tarefas online com base em
colunas free) quando você está com o foco em um cartão você pode
utilizar o mouse para navegar em outros cartões, as teclas direcionais
(setas pra cima e pra baixo) ou as letras j (para baixo) e k (para cima).
Teclas que são por sua vez utilizadas no VIM, editor de texto famoso
entre os desenvolvedores.
 As dez heurísticas de Nielsen
8. Estética e design minimalista

Por favor não encha linguiça. Toda informação extra

que você deixar pro seu usuário pode na verdade
adicionar mais uma dúvida, ou seja, deixe o seu
layout e o conteúdo o mais simples e direto
possível.

Um app que gosta muito dessa heurística é o da

Nubank. Pra gerar o boleto de pagamento da sua
fatura só são necessárias duas telas e elas são bem
simples e realmente objetivas.
As dez heurísticas de Nielsen
 As dez heurísticas de Nielsen
9. Ajude os usuários a reconhecerem,
diagnosticarem e recuperarem-se de erros

As mensagens de erros têm que ser claras e

próximas do conteúdo ou ação que causou o erro.

No formulário de cadastro do Spotify caso você não

preencha os dados necessários ele deixa bem claro
quais campos estão faltando, com uma mensagem
clara e objetiva.
As dez heurísticas de Nielsen
 As dez heurísticas de Nielsen
10. Ajuda e documentação

É uma boa não precisar dessa heurística.

Implementar documentação e sistema de ajuda
sempre é chato e muitos usuários têm o costume
de ignorar, mas, se for realmente necessário,
deixe a documentação próxima do usuário e do
elemento ou ação que tenha necessidade de
uma explicação mais detalhada.
 As dez heurísticas de Nielsen
Por exemplo, no formulário de pagamento do
Walmart tem um campo pra preencher o código de
segurança do cartão. Como não é algo muito óbvio,
tem uma imagem próxima ao campo mostrando
onde fica o código de segurança do cartão. Essa é
uma boa forma de fazer uma documentação simples
e feliz.
 Outros princípios para implementar
interfaces eficazes
Além das dez heurísticas de Nielsen, existem outros
princípios para implementar interfaces eficazes.

Apresente as etapas do processo.

Sequências de ações devem ser organizadas em

grupos com início, meio e fim. O feedback
informativo ao completar um grupo de ações dá ao
usuário satisfação de realização, senso de distinção
e uma indicação que o caminho é claro para se
preparar para o próximo conjunto de ações.
Faça uma navegação clara e eficiente
Uma boa navegação ajuda o usuário a saber onde
ele está e para onde quer ir. Os segredos de uma
navegação eficiente incluem:

• Organização - separa as áreas mais e menos

importantes, reflete como as pessoas pensam e
as prioridades do negócio;
• Dentro do "triângulo de ouro";
• Compacta, para deixar espaço para o conteúdo;
• Rótulos (labels) curtos;
• Mostra visualmente, com clareza, onde o usuário
está.
Botões e Links
Normalmente, use botões para tarefas (ações),
principalmente as primárias, e links para
navegação.

Separe suas tarefas primárias, secundárias e

terciárias
Dê às tarefas primárias lugar de destaque e foco
visual. Tente limitar a uma ou duas tarefas
primárias por página.
Deixe sua interface rápida
Aqui não estamos falando só de tempo de
carregamento! Ela deve ser fácil de entender o que
tem a fazer, possibilitar o mínimo de cliques para ir
de um lugar a outro ou para completar uma tarefa.

Mantenha proximidade
Itens relacionados devem se manter próximos.

Seletivamente copie interações comuns e já

comprovadas
Inove só onde há algo único.
Design visual deve ter total conexão com o de
interação

O design visual deve ajudar o de interação a

atender os requisitos do produto. Nunca o
design visual pode estragar um trabalho de
interação bem feito.
Padrões de Design de Interação

Padrões de design de interação podem ser

hierarquicamente organizados a partir do nível
da aplicação e ir descendo até o nível de
componentes individuais da interface. Podem
ser divididos em três tipos:
Padrões de Interação Postural

Uma aplicação com postura transitória significa que uma pessoa a usa
por um breve período de tempo. A aplicação é chamada quando
necessária, aparece, o usuário realiza seu trabalho nela e em seguida a
fecha, continuando suas atividades normais, provavelmente em uma
aplicação com uma postura soberana.

Por sua característica temporária, o usuário não tem a chance de se

tornar muito familiar com ela. Logo, a interface de uma aplicação desse
tipo deve ser simples, clara e ir direto ao ponto; deve ser óbvia,
apresentar seus elementos claramente sem dar possibilidades a
confusão ou erros. Normalmente é limitada a uma única janela e visão.

Por exemplo, abrir o Windows Explorer para localizar e abrir um arquivo

enquanto edita um outro com o Word é um típico cenário transitório. A
calculadora, Yahoo! Widgets e o iTunes são outros exemplos de
aplicações com a postura transitória.
Já programas que dominam a atenção do usuário por um longo período de
tempo possui uma postura soberana. Oferecem uma grande quantidade de
funções relacionadas e os usuários tendem a mantê-la rodando continuamente,
ocupando toda a tela.

Como os usuários dedicam bastante tempo usando aplicações desse tipo, eles
normalmente têm grande interesse em crescer na curva de aprendizado e
tornar-se logo usuários intermediários. Do ponto de vista de design, isso
significa que a aplicação deve ser otimizada para o uso de intermediários
permanentes e não ter como objetivo primário os iniciantes (ou experts).

Aplicações soberanas devem ser otimizadas para uso em tela-cheia ou

maximizada e, como serão utilizadas por longos períodos de tempo, deve-se
tomar cuidado com a apresentação visual. Um design excessivo, com o uso
exagerado de cores e texturas, podem ser atrativos no início, mas com o passar
do tempo torna-se cansativo para quem usa muito a interface. Na medida do
possível, mantenha um estilo conservador. Pixels são preciosos.

Bons exemplos desse tipo de aplicações são processadores de textos, planilhas,

clientes de e-mail, entre outros.
Padrões de Interação Estrutural

Os padrões estruturais são provavelmente os menos documentados.

Um exemplo bem conhecido desse padrão é a estrutura macro do
Microsoft Outlook, com seu painel de navegação na esquerda, um
painel de visão geral na direita, em cima, e uma área de detalhes na
direita inferior. Esse padrão é vastamente utilizado, onde o painel
vertical possibilita a navegação e direciona o conteúdo que será
mostrado no painel de visão geral. Ao selecionar um objeto neste
painel, informações são mostradas no painel inferior.
Padrões de Interação Comportamentais

Padrões de uso normalmente são identificados através da

observação de como os usuários usam os elementos de uma
interface e em quão útil esses elementos, e seus
comportamentos, estão sendo para que o usuário complete
suas tarefas mais facilmente e mais eficientemente. Após
descobrir esses padrões de uso, criamos os padrões de
interações para suportar esses padrões de uso comuns.

Por exemplo, softwares de CRM normalmente vêm com uma

opção "novo" para criar um novo contato. Uma vez clicado em
"novo" aparece o formulário com as opções "salvar" e
"cancelar".
Foi observado como os usuários usavam esse tipo
de ferramenta, descobriu-se que o padrão de uso
era, na maioria das vezes, após clicar em "salvar",
clicar em "novo" para cadastrar mais um contato.
Percebendo esse padrão de uso, apareceu um
terceiro botão no formulário, o "salvar e novo":
A partir daí, esse comportamento pôde ser mapeado em um
novo padrão de design de interação.

Aqui descreveremos alguns padrões conhecidos de design de

interação, divididos em sete categorias principais de padrões
de uso:

• Exploratório
• Navegação em grandes bases de dados
• Busca avançada
• Entrada e alteração de dados
• Informação centralizada
• Guias
• Comunidade
Exploratório

O padrão exploratório é aquele que permite ao usuário explorar a aplicação. Os

padrões de interação associados ao padrão de uso exploratório costumam ter as
seguintes características:

• Suportam navegação segura e previsível;

• Provêm informações para que o usuário se encontre;
• Ajudam a unificar informação em uma única visão que de outra forma iria
requerer muitos cliques para ser acessada;
• Colocam dados e ações relevantes próximos de uma informação principal.

Algumas vezes, em vez de um modo exploratório, pode ser interessante colocar o

usuário em um modo linear de ação. O modo linear, por exemplo, um wizard,
pode ser muito útil em situações onde o usuário não é um especialista, ou
quando queremos dar uma opção simplificada de ação.

Para o padrão de uso exploratório, precisamos pensar em permitir erros e em

mostrar dados e ações.
Permitindo erros

Itens de menu inteligentes: São itens que dizem exatamente o que a

aplicação vai fazer, incluindo informação sobre qual objeto vai sofrer a
ação, deixando a interface auto-explicativa. Nesse padrão de interação,
sempre que o usuário muda o objeto selecionado (em uso), os itens de
menu relativos ao objeto são também mudados.

*Menu de uma aplicação de Calendário. Os itens de menu deixam claro qual

ação será realizada ao clicar nele. *
Undo multi-nível (Desfazer): Permite reverter
facilmente uma série de ações feitas pelo usuário.
Cada ação fica no topo de uma lista à medida que é
executada e cada undo reverte a ação que está no
topo.

*É Possível selecionar uma ou mais ações para desfazê-las. *

Sandbox: Permite ao usuário salvar dados para que possa ser
utilizado no futuro. Assim, é fornecido ao usuário um lugar
para armazenar aquilo que deve persistir durante o uso.

*Aqui é possível adicionar um produto a "lista de desejos" para poder decidir a compra
no futuro.
Mostrando dados
Inspeção: o usuário precisa frequentemente ver mais informações sobre um
determinado item na mesma tela em que está vendo o item. Nesse caso, usa-
se uma área para expor detalhes, normalmente próxima à base da página. Esse
tipo de elemento tipicamente usa o recurso de expandir/recolher.

*Na parte de baixo, são exibidas informações mais detalhadas (documentos, notas,
contatos, produtos, cotas) sobre o item Contrato mostrado acima. *
Tabs dentro de páginas: Permite ver o conteúdo
detalhado sobre o conteúdo principal que está
sendo exibido.

*As tabs Descrição e Dados Técnicos apresentam o conteúdo detalhado do produto. *

Mouseover com conteúdo rico: Utilizado quando queremos
dar ao usuário a possibilidade de ver mais informações,
contextualizada, sobre um determinado item. Normalmente a
informação apresentada contém um conteúdo mais rico que
apenas texto, tais como gráficos, links ou ações.

*Ao passar o mouse em um ponto do mapa, mais informações são mostradas referente
a esse ponto. Além de textos, algumas ações também são disponibilizadas. *
Navegação em grandes bases de dados

Esse padrão mostra soluções para quando o usuário se

depara com grandes quantidades de dados em nossa
aplicação. De forma geral, grandes conjuntos de dados são
normalmente navegados por meio de hierarquias. Existem
algumas alternativas, uma vez que as hierarquias:

• São usadas em excesso;

• Podem ser difíceis de navegar por razões de
performance e complexidade;
• Nos dão a tentação de mostrar os dados da forma que
eles estão armazenados no banco de dados e não da
forma que o usuário entende;
• Com 3 ou 4 níveis, a hierarquia já se torna muito difícil
de navegar.
Acordeão: Quando a informação que se deseja mostrar
não cabe em uma hierarquia, usa-se o acordeão (como
por exemplo, parágrafos de texto). No acordeão, ao clicar
em um painel, uma outra área é revelada com as
informações que se quer apresentar.

*Ao clicar em cada título, expande-se uma área com mais informações (texto ou outros
elementos), fazendo um efeito igual ao da sanfona. Para esconder a área, basta clicar
novamente no título. *
Tree-table: Uma mistura de hierarquia com tabela, pois dessa
forma se consegue mostrar mais informações ao usuário para
facilitar sua navegação. Coloque a hierarquia na primeira
coluna e os atributos do item nas demais colunas. As linhas -
um item por linha - normalmente são clicáveis.

*A coluna Nome contém a árvore de hierarquia. Clicando no (+), os itens são

expandidos e seus atributos (localização, descrição) são mostrados nas demais colunas.
*
Gaveta: Usado quando é necessário mostrar informações de um item
da tabela que quebra a formatação dessa tabela. Utilize, nesse caso,
linhas de tabela expansíveis que "abre" apresentando o conteúdo. A
estrutura de grid deve ser diferente da usada na coluna da tabela, para
evitar uma visualização confusa.

*A linha da tabela se expande para poder mostrar algum conteúdo relacionado a ela,
mas bastante extenso para caber adequadamente em uma coluna. *
Filtro de coluna: Quando a tabela contém muita
informação e o usuário quer filtrar somente as
informações relevantes baseadas em um
determinado critério.
*Ao clicar na coluna, abre-se um modal com várias opções de filtro referente a coluna
clicada. Pode-se selecionar uma ou mais itens para que a tabela seja filtrada por essas
opções. *
Busca avançada
Quando falamos de busca, alguns pontos merecem atenção:

• Construir uma consulta de uma busca usando somente

palavras-chave pode ser bem difícil dependendo dos dados;
• Buscas que não retornam informações úteis podem ser
frustrantes. Os usuários podem nunca mais voltar a seu site,
ou pior, abarrotar seus canais de atendimento;
• Mostrar atributos pode aumentar a probabilidade dos
usuários chegarem ao conjunto de informações que eles
procuram (algumas vezes compensa a falta de uma
rotulação de conteúdo eficiente);
• Normalmente os usuários assumem que a busca é baseada
em linguagem natural;
• Forneça exemplos de como pesquisar próximo à caixa de
busca.
Para interações de busca avançada, apresentamos os 4 padrões abaixo:

Busca baseada em atributos: Utilizado quando se tem um número menor de

atributos (de 1 a 10) que podem ser usados para alcançar o resultado de busca
desejado. Os campos devem ser organizados na forma de formulário caso a
quantidade de atributos seja grande.

*Buscas utilizando apenas um atributo, que restringe a busca a um tipo de produto

específico. *

*Neste caso, com a quantidade maior de atributos, a organização dos campos é um

ponto importante que deve ser bem pensado. *
Busca baseada em contexto: Se o número de atributos para
escolher é muito grande - mais de 20 - a busca por atributos
torna-se ineficiente. Uma solução é diminuir o escopo da busca
forçando o usuário a escolher antes um contexto onde deseja
pesquisar e só depois apresentar os atributos específicos.

*Para fazer a busca é preciso primeiro escolher o contexto desejado. Neste caso, será
para fotos. Apenas depois de escolher o contexto é que são mostrados os campos de
atributos específicos para ele. *
Refinamento do resultado usando atributos: Quando a busca
retorna uma grande quantidade de informação, o usuário pode
selecionar alguns atributos para filtrar esse resultado. O ideal é
utilizar controles apropriados ao conteúdo para o filtro de
atributos.

*Filtro de atributos para refinamento do

resultado. Nestes exemplos, pode filtrar
por marcas, cidades, preços, etc.*
Exibição do volume de conteúdo retornado: Usado para
controlar o volume dos dados sendo apresentados. Pode
ser através de links que ajustam o layout da página para
mostrar mais ou menos detalhes ou outros controles que
ajustam o volume em si do conteúdo, apresentando mais
ou menos informações.
*Na primeira imagem, a forma de exibição é em lista e na segunda, o mesmo resultado
em tabela*
Entrada e alteração de dados
São padrões utilizados quando o usuário precisa informar dados.

Autocompletar: Utilizado quando o usuário precisa entrar uma

informação em um campo texto e pode não saber exatamente o que
informar ou tem grandes chances de digitar incorretamente.

*Nesse exemplo, ao digitar

"VENE" uma lista aparece com
sugestões que completam o que
o usuário escreveu no campo. *
Apresentação visual de seleção: Usado quando é
difícil explicar apenas em texto as opções
disponíveis para seleção. Nesses casos, o uso de
imagem mais texto é bem indicado.

*Além do label indicando o tipo de

alinhamento, também tem uma
imagem para cada opção que
apresenta visualmente como a
figura será posicionada com relação
ao texto. *
Save for later (Salvar para mais tarde): Esse padrão
normalmente é usado quando uma tarefa é muito longa para
ser completada de uma vez só, ou quando existe um fluxo de
ações que possibilite início/parada/reinício. Nessas situações,
dê ao usuário a opção de salvar para continuar depois.

*Um botão é disponibilizado para que o usuário possa salvar um documento (artigo,
notícia, página) e depois voltar a ele para continuar com o fluxo de edição (passar para
revisão, publicar, etc). *
Informação centralizada

Nesses padrões, serão mostradas algumas maneiras comuns de

apresentação de informações que precisam ser compreendidas pelo
usuário (ou ao menos fazerem sentido) quando ele "passa o olho" por
elas.

São três principais: cabeçalhos, visualizações interativas e painéis

(dashboards).

Cabeçalho: Usado quando o usuário precisa de um contexto mais

abrangente que apenas um título de página para entender a
informação apresentada. Nesses casos, o topo da página mostra uma
área com dados relacionados ao conteúdo. O cabeçalho também pode
fornecer ações relevantes para a página e que, quando utilizadas,
interferem no conteúdo sendo apresentado. É interessante
disponibilizar o recurso de expandir/ocultar a área do cabeçalho para
que o usuário utilize o espaço da forma mais conveniente.
*O cabeçalho mostra alguns dados que identificam o projeto que está sendo
manipulado na página e também possibilita a navegação por projetos existentes. Ao
navegar de um projeto ao outro, automaticamente o conteúdo da página é atualizado.
Aqui o usuário pode esconder (hide) o cabeçalho. *
Visualização interativa: Esse padrão é usado quando a
informação fica muito confusa se apresentada apenas com
textos. Os dados mostrados graficamente e com opções
interativas ajudam na compreensão do que está sendo
visualizado.

Apresentação de informações
usando gráficos. Clicando em um
ano (primeira imagem) são
mostrados os dados mês a mês. E
em cada mês, também é possível
interagir para obter mais
informações sobre o assunto
(próxima imagem).
 *Exemplo com mapas. Na
primeira imagem você visualiza
no mapa a rota de um ponto a
outro, feita de transporte
público. É possível interagir,
arrastando a rota para alterá-la
ou escolhendo algumas ações
diretamente no mapa. *

*Na segunda imagem, a rota feita

com bicicleta. Em ambos os casos,
o trajeto é apresentado
textualmente e também
representado visualmente no
mapa. *
Painel

Esse tipo de padrão resolve o problema de ter que fornecer visões

distintas de vários tipos de informação. Agrupe essas informações em
uma única tela que mostre os dados-chave de uma forma visual
apropriada, como se fosse uma fotografia. Escolher a apresentação
gráfica mais adequada para cada tipo de informação, aliás, é um ponto
crucial para a eficiência do painel. Alguns pontos de atenção para não
errar no uso desse padrão:

• Painéis normalmente possuem visualizações interativas de dados;

• Muitos erram ao mostrar dados que não são úteis ao usuário ou
colocam gráficos e outros elementos sem um contexto que dê
sentido a eles;
• O uso de mecanismos inapropriados prejudica a comunicação do
conteúdo;
• Elementos 3-D frequentemente são problemáticos.
*Alguns exemplos de painéis, utilizando gráficos de vários tipos, mapas (primeira e
segunda imagens). Em algumas situações (terceira imagem), o uso de tabelas ainda é o
mais indicado. *
Guias
É o uso de mensagens, instruções e ajuda contextual para guiar o usuário
durante a execução de uma tarefa.
Três padrões de interação comumente usados para Guias são:

Sistema de mensagens: É usado

quando o usuário precisa ser
informado sobre as possíveis
consequências de uma ação
que ele vai tomar. Cada ação
deve ter explicações claras, os
próximos passos precisam estar
visíveis, caso existam, e deve
fornecer fácil acesso a fontes de
dados relevantes para ajudar o
usuário na tomada de decisão.
 Ajuda contextual: Esse
padrão é utilizado quando o
usuário precisa da
informação para ajudá-lo a
completar uma tarefa, seja
para entender determinadas
terminologias que a tarefa
apresenta ou o motivo de um
dado está sendo solicitado ou
como deve preenchê-lo, etc.
Apresente essa ajuda
exatamente onde o usuário
precisará dela, já
contextualizada, mais que dar
acesso a links genéricos de
ajuda.
Guide me: Padrão utilizado quando o usuário já tem experiência no que está
fazendo, mas pode faltar conhecimento para completar alguma parte dessa
tarefa maior. Nesses casos, use uma área da tela (ou tela separada) que guiará
o usuário através de questões, ou informações detalhadas, para determinar
"como" ou "se" eles devem tomar determinada ação ou escolher determinada
opção, sem perder o contexto da tarefa maior.

*No exemplo acima, a funcionalidade de busca em si pode ser facilmente usada pelo
usuário, mas foi colocado um guia com questões que o ajuda a limitar o resultado da
busca aos mouses que mais se adequam às suas necessidades. *
Comunidade
Esses padrões estão relacionados a um tema bem discutido
ultimamente: padrões de uso e interação para mídias sociais, ou seja,
padrões para funcionalidades presentes em qualquer ferramenta online
que permita a interação social.
Avaliação (rating): Quando o usuário precisa dar sua opinião ou dar sua
nota sobre um determinado conteúdo, mostre itens clicáveis (um
bastante utilizado são estrelinhas) com uma escala clara de avaliação e
o estado desse mecanismo de avaliação deve iniciar "vazio".

*Avaliação de itens de uma

loja virtual. Uma área com as
avaliações já realizadas e uma
área que mostra os
comentários. *
Acompanhamento (follow): Utilizado quando o usuário
precisa acompanhar uma questão ou um tópico dentro de
uma comunidade. Use algum tipo de call to action (CTA)
próximo ao item que pode ser acompanhado, junto com
informações que deixem claro o que será acompanhado.

*Clicando no botão, é exibido formas de acompanhamento com informações

contextualizadas que deixam claro o que e como está sendo acompanhado. *
Status de classificação (ranking): Quando existe a
necessidade de comunicar dentro da comunidade o
status/posição de um usuário, forneça esse status
próximo à informação sobre o usuário.

*No exemplo acima, além da posição no ranking, é mostrado também informações

sobre a atividade do usuário*