Diferença entre UI e UX

São 2 áreas que andam juntas, mas que possuem suas diferenças

UI – User Interface Design

(Design de Interface do Usuário)

Profissional que cria e projeta a interfaces para o usuário. E uma interface é um ponto de ligação entre um
usuário e um sistema/produto/serviço...

Interfaces de web são as mais comuns de se ver, mas por exemplo, quando se vai fazer uma pipoca no micro-
ondas da cozinha, o processo de colocar o alimento dentro, escolher o tempo, esperar isto também é uma forma
de interação.
Essa interação e controle são feitas através de um interface. Essa interface pode ser composta por botões, menus
e qualquer elemento que possibilite a interação entre o usuário e o dispositivo.
Para se chegar a um bom resultado de interface, o profissional deverá se utilizar de vários conhecimentos: design
visual, design de interação, design de UX (Experiência do Usuário), psicologia (Gestalt, psicologia de design de
conversão)...

Para a criação destas interfaces o profissional UI Designer normalmente utiliza as seguintes ferramentas para a
criação:

Sketch / Adobe XD / Photoshop / In Vision / Figma / …

Sketch
Sketch significa esboço, o software segue os mesmos princípios da palavra,
onde o designer terá acesso às ferramentas para construir seu trabalho desde
a concepção da ideia. O Sketch é um  software  fornece todas as ferramentas
necessárias para um processo de design verdadeiramente colaborativo. De ideias iniciais a arte com pixels,
protótipos jogáveis e transferência de desenvolvedores. Podemos até afirmar que o Sketch é concorrente direto
do Canva, outro web app com excelentes ferramentas de criação e de fácil organização colaborativa.

Adobe XD
Uma das ferramentas mais populares do mercado, o Adobe XD  busca trazer soluções para
profissionais de design na criação de seus projetos. Com um leque de recursos disponíveis, é
possível desenvolver toda a estrutura de um aplicativo mobile e também de websites de forma
compartilhada, com animações e responsividade.

Photoshop
Adobe Photoshop é um software caracterizado como editor de imagens bidimensionais do tipo
raster desenvolvido pela Adobe Systems. É considerado o líder no mercado dos editores de imagem
profissionais, assim como o programa de facto para edição profissional de imagens digitais e
trabalhos de pré-impressão.

In Vision
O InVision é a plataforma de design de produto digital usada por organizações com mais de 5 milhões de usuários,
inclusive 100% das empresas listadas pela Fortune 100, para oferecer as melhores experiências ao cliente em todo
o mundo. Use as ferramentas de design e recursos educacionais que permitem que as equipes percorram todas as
etapas do processo de design do produto, da concepção ao desenvolvimento.

Figma

Figma é um editor gráfico de vetor e prototipagem de projetos de design baseado principalmente no

navegador web, com ferramentas offline adicionais para aplicações desktop para GNU/Linux, macOS
e Windows

UX – User Experience Design

(Design de Experiência do Usuário)
Trata do design da experiência do usuário. UX Design é responsável por criar produtos, serviços, sistemas
pensando no usuário, com foco centrado no usuário. Pensando em proporcionar ao usuário a melhor experiência
de utilização daquele produto, serviço ou sistema.

UX lida com as emoções e experiências dos usuários.

A meta do UX é  torna mais amigável “user-friendly”, natural e simples a experiência de uso de um determinado
serviço ou produto.

Logo os UX Designers estudam e projetam com base no comportamento humano.

O UX Designer tem muito a ver com empatia e testes.

Pra chegar a esta empatia com o usuário, o UX se utiliza de pesquisas, de muita investigação (entrevistas,
pesquisas com formulários, quantitativas, qualitativas, ux reserch, benckmarking).

Estas pesquisas poderão resultar na criação de uma Persona, na criação da Jornada do Usuário, no Canvas de
proposta de valor entre outros...

Pra testar, se utiliza de protótipos (como Wireframes – são os protótipos mais comuns na área de UX, protótipos
físicos - ex. feitos em papel – entre outros...) e também de testes de Usabilidade

Ux Design é uma área multidisciplinar, dentro do guarda-chuvas de UX existem diversas abordagens e áreas do
conhecimento que podem colaborar com o desenvolvimento de produtos ou serviços.
User Experience is a team effort - (Experiência do Usuário é empenho em equipe)

Um bom trabalho de UX não fica somente determinado a um profissional, mas a todo um trabalho conjunto de
uma empresa para proporcionar a melhor experiência do usuário.

Diferenças entre UX Design e UI Design

O UI Design está mais conectado
com camada física, tangível e
prática do projeto. Afinal, a
interface que será utilizada
diretamente pelo usuário.

É nessa parte onde se cria e

estiliza os botões, menus e todos
os artefatos que tornaram
possível essa utilização. 

Por outro lado, o UX Designer é

profissional o que estuda e planeja como o usuário se sentirá ao usar interface. Então ao invés de focar na cor ou
no formato do botão, ele irá pelo lado do projeto que pensa como serão as experiências e emoções ao interagir
com aquela interface.
A imagem acima mostra o UI Design como uma ponte que liga:
o que foi planejado pelo UX Design -> com o Usuário.

A ligação entre o Ux e o Ui um depende do outro, não é possível criar uma interface sem pensar na experiência do
usuário e da mesma forma para que um produto que o UX pesquisou, idealizou ir para o ar, precisa de um
profissional UI para transformar todo o conteúdo UX em algo utilizável e bonito esteticamente.
Normalmente o Ux e o Ui são a mesma pessoa.

A parte visual de um trabalho UX não é somente a ponta do Iceberg... Ou seja, existe um trabalho mais profundo
que não é visível.

O Iceberg é uma ilustração feita por Trevor van Gorp, inspirada no livro The Elements of User Experience, de Jesse
James Garrett.
O problema do gráfico de Garret é que ele não representava o grau de relevância de cada um dos elementos
dentro da experiência do usuário, passando a impressão (principalmente para os stakeholders) de que todas as
etapas possuem o mesmo peso e medida. Pensando nisso foi que Trevor Van Gorp criou um novo gráfico a partir
deste, utilizando a metáfora do iceberg, demonstrando entre outras coisas que o design visual é apenas a ponta
desse iceberg e que, para prover uma boa experiência aos usuários, precisamos mergulhar em águas mais
profundas.

Quem são os stakeholders?

Podemos definir o que são stakeholders como: “grupos e indivíduos que, de uma forma ou de outra,
apresentam algum nível de interesse nos projetos, atividades e resultados de uma determinada
organização”. Em uma tradução direta, seria algo parecido com todas as partes interessadas de uma empresa

Os 5 elementos de UX consistem em: 

1) Strategy – Estratégia  
Consiste no trabalho de investigar quais são as necessidades das pessoas que vão interagir com seu
produto/serviço.
Neste momento, é importante colher as user needs, pois é por meio dessas necessidades que as próximas etapas
de todo o processo poderão ser cumpridas. Ou seja, esse é o momento onde as pessoa que trabalham com
pesquisa se encontram, pois é nessa etapa que são levantadas questões importantes como:

 Qual o motivo do produto, aplicativo ou site?

 Por que o criamos?
 Pra quem estamos fazendo isso?
 Por que as pessoas estão dispostas a usá-lo?
 Por que precisam dele?

Isso pode ser feito por meio do Processo de Pesquisa Estratégica, no qual você entrevista usuários e todas as
partes interessadas, além de revisar os produtos ou empresas concorrentes.

2) Scope – Escopo

Esse é o momento de definir os requisitos funcionais e de conteúdo para o produto que está sendo desenvolvido.
Quais os recursos e conteúdos a aplicação devem ter, quais requisitos ela deve cumprir e como eles estarão
alinhados com os objetivos estratégicos da organização.

Requisitos funcionais: vamos primeiro a o que é requisito. Requisito é uma exigência, solicitação,

desejo, necessidade. Um Requisito Funcional nada mais é que uma requisição de uma função que um software
deverá atender/realizar.

Requisitos de Conteúdo: são as informações que precisamos para fornecer o valor ao nosso consumidor.
Informações como textos, imagens, áudio, vídeos, etc. Sem definir o conteúdo que gostaríamos de mostrar, não
temos ideia sobre o tamanho ou o tempo necessário para concluir o projeto.

3) Structure – Estrutura

Nessa etapa é definido como o usuário irá interagir com o produto, como o sistema irá se comportar quando o
usuário interagir com ele, como ele é organizado e como as informações são priorizadas para facilitar o
entendimento. A etapa de Estrutura é composta por dois momentos: o Design de Interação e a Arquitetura da
Informação.

Design de Interação: por meio dos requisitos funcionais, é definido como o usuário pode interagir com a interface
do sistema e como esse sistema vai responder às interações do usuário.

Arquitetura da Informação: depois de entender quais serão os conteúdos mostrados na sua interface, nesse
momento, você irá definir o arranjo desses elementos e como eles serão organizados para facilitar o entendimento
do seu usuário.

Quando o Design de Interação é bem feito, ele:

 Ajuda os usuários a realizarem seus objetivos;

 Comunica de maneira efetiva como as interações e funcionalidades funcionam;
 Informa os usuários sobre as mudanças dos estados (quando uma ação termina, dá ao usuário um
feedback eficaz) enquanto a interação acontece;
 Evita que o usuário cometa erros críticos, como não confirmar uma exclusão de uma dado que pode ser
extremamente prejudicial.

Ao pensar em uma boa Arquitetura da Informação, você permite:

 Que os dados sejam organizados, categorizados e priorizados com base na necessidade do usuário e nos
objetivos da organização;
 A compreensão dos usuários sobre o que está ocorrendo na interface;
  Que toda a estrutura seja flexível para acomodar possíveis crescimentos e adaptar a mudanças;
 Que as informações sejam mostradas da maneira mais simples para o usuário.

4) Skeletron - Esqueleto

O esqueleto determina a forma visual da tela, a apresentação e disposição de todos os elementos que forem
necessários para a que a interação ocorra com uma funcionalidade existente na interface. Além disso, é necessário
pensar em como as informações serão apresentadas para torná-las efetivas e de fácil entendimento.

É nessa etapa onde são criados os famosos wireframes, extremamente úteis para criar um modelo visual de como
ficaria uma interface. Ele é um diagrama estático do produto, composto por conteúdo, navegação e como as
interações irão funcionar.

A etapa esqueleto é composta por três momentos: o Design de interface, Design de navegação e o Design da
informação.

Design de interface: momento onde é projetado como serão organizados e apresentados os elementos de
interface para permitir que os usuários interajam com o sistema;

Design de navegação: é desenvolvido como o usuário navegará pelas informações usando a interface;

Design da informação: define como as informações serão mostradas de maneira que facilite a compreensão do
usuário.

Então, o esqueleto deve responder a estas perguntas:

 Qual será a forma que todas as coisas serão apresentadas na tela;

 Como as interações serão apresentadas para o usuário e como será organizada de forma a facilitar a
compreensão;
 Como os usuários irão se movimentar pela aplicação;
 Como as informações serão mostradas de maneira fácil e clara.

5) Surface –Superfície

É a última camada, mas não menos importante. Por se tratar da camada que está acima de tudo, ela é a soma total
dos trabalhos e decisões que foram tomadas nas etapas anteriores. Esse é o momento onde determinamos como
será o produto e qual será o layout, como será a tipografia, as cores e etc.

Na camada da Superfície é onde estaremos lidando com o Visual Design (Sensory Design), onde nos preocupamos
com a aparência visual do conteúdo, que mostra como os usuários poderão interagir com o produto. Esse é o
momento de tornar todas as coisas mais fáceis de entender, fazendo com que os usuários entendam o que você
quer que eles façam apenas vendo a tela.

3 níveis cognitivos e emocionais:

Segundo Don Norman, fundador da Nielsen
Norman Group: User Experience Research, a
experiência do usuário acontece em três níveis
cognitivos e emocionais:

Nível Visceral (Visceral - i want it – eu quero

isso!)

It looks beautiful, so will I - Parece lindo,

então eu vou!
O nível visceral é um nível subconsciente relacionado ao conceito de “instinto”. A reação visceral é aquele
desencadeada pela verificação sensorial inicial da experiência. É imediata e muitas vezes está além do nosso
controle. Trata-se de um nível biológico, que nos faz gostar de cores brilhantes, saturadas, formas arredondadas e
superfícies consistentes. É esse nível que nos faz sentir atração pela beleza e pela ordenação, e aversão por coisas
feias e desorganizadas. Um produto bonito e atraente pode fazer com que os usuários superem problemas de
usabilidade, acreditando que ele funciona melhor.

Nível Comportamental (Behavioral – i can master it – eu posso dominá-lo!)

It makes me feel smart – Isso me faz sentir inteligente!

O nível médio de processamento é o comportamental, e é aí que a maior parte das coisas é feita. É um nível
subconsciente, de comportamento automático, da qual não nos damos conta. Tem relação não apenas com a
facilidade de uso, mas também com o prazer de uso, o prazer de realizar uma tarefa do início ao fim de forma
fluida e sem interrupções. Design comportamental é sentir-se no controle. É uma resposta do produto por meio de
sua utilização e eficácia, o que inclui a usabilidade e a compreensão.

Nível Reflexivo (Reflective – is completes me – está me completando!)

i can tell stories about it (& me) – eu posso contar historias sobre isso ( & eu)

O terceiro nível é o reflexivo, que é o superego, uma parte do cérebro que não tem controle sobre o que você faz,
e examina tudo aquilo que está acontecendo. É a experiência de associação e de familiaridade, de refletir como
nos sentimos sobre a utilização de um produto. É imaginar como as pessoas estão nos enxergando, de que forma o
produto está ajudando a construir a nossa personalidade e a espelhar a imagem desejada de nós mesmos. É um
nível que tem relação direta com o status social.

Usabilidade
A Usabilidade diz respeito a facilidade de uso de um determinado sistema. Quando falamos de user interface, ela
está ligada diretamentes a relação de Interação Humano-Computador (IHC) e também Engenharia de Software.

A Usabilidade está relacionada a quão bem os usuários podem empregar uma ferramenta ou objeto a fim de
realizar uma tarefa específica.

O principal objetivo de uma boa usabilidade é fazer com que o usuário realize ações sem ter que pensar muito ou
testar diversas vezes.

A ISO 9241–11 (1998) diz que:

Usabilidade é a eficiência, eficácia e satisfação com a qual os públicos do produto alcançam objetivos em um
determinado ambiente.

Notou que a norma fala de ambiente? Não há nenhuma menção a site, aplicativo, tela, smartphone, computador,
relógio, óculos ou qualquer dispositivo. Porque usabilidade se aplica a todos eles.

A orientação encontrada na norma ABNT NBR ISSO 9241-11 determina que a usabilidade deve ser medida através
de processos levando-se em consideração determinados valores, que são:

 Usuário: é a pessoa que interage com o produto.

 Contexto de Uso: deve-se levar em conta os usuários, tarefas, equipamentos (tecnologias, hardware,
software e materiais), ambiente físico e social em que o produto é utilizado.
 Eficácia: diz respeito à precisão com que os usuários atingem objetivos específicos, acessando a
informação certa, concluindo ou gerando ao final os resultados almejados.
  Eficiência: diz respeito à precisão com que os usuários atingem objetivos específicos, com relação ao
despedimento de recursos. Esses recursos podem ser esforço mental ou físico, tempo, equipamentos e
materiais, custos financeiros entre outros.
 Satisfação: diz respeito ao conforto de uso, a aceitabilidade do produto e como os usuários estão livres de
desconfortos durante a utilização e em relação ao produto.

A figura ilustra um usuário em determinado contexto de uso, procurando alcançar um objetivo, ao interagir com a
interface de um sistema interativo.
A interação é um instrumento fundamental dentro do design, por isso que se faz necessário o entendimento do
processo e das necessidades do usuário com relação ao objetivo principal do sistema.
Dentro dessa gama, podemos dividir entre metas de usabilidade e metas de experiência do usuário.

Uma das métricas para medir as métricas de usabilidade são as 10 Heurísticas de Nielsen (Nielsen é considerado o
“pai da usabilidade”).

A figura a seguir ilustra até onde cada ISO alcança.

Obs. ambas as ISO são 9241 e não 9214

Enquanto a preocupação com a usabilidade permite ao Designer pensar em facilitar a vida do usuário, esse pensar
na facilidade está intrinsecamente ligado também a área de UX. Já que usabilidade é um das disciplinas que
compõe a UX..

Então, o UX Designer, ou Designer de experiência como é conhecido, precisa considerar a usabilidade. 

Com um projeto bem pensado no UX e usabilidade, o seu cliente e usuário terá uma ótima experiência.

As 10 Heurísticas de Usabilidade de Jakob Nielsen

Para ajudar a conseguir respeitar os 5 pilares da usabilidade, podemos usar as 10 heurísticas de Jakob Nielsen.
Depois de anos de pesquisa, o dinamarquês Jakob Nielsen, Ph.D em ciência da computação e criou o movimento
“Engenharia da Usabilidade”, onde trabalhou com o ex-vice presidente de pesquisa da Apple Dr.Donald A. Norman,
desempenhando um grande papel na usabilidade tão aclamada presente atualmente nos produtos da Apple.

Estas 10 heurísticas servem como uma espécie de check-list para o desenvolvimento de uma melhor comunicação
com o seu usuário em relação ao seu produto.

Este não é a única forma de se avaliar a usabilidade (por exemplo, existem os testes com o usuário reais) mas elas
podem ser usadas principalmente na fase inicial do projeto.
Elas são regras gerais porque não são heurísticas de usabilidade com determinações específicas, mas abrangentes
para qualquer situação de experiência do design de interface. (interfaces digitais ou não digitais).
1) Visibilidade do Status do Sistema
O design deve sempre manter os usuários informados sobre o que está acontecendo, por meio de
feedback apropriado dentro de um período de tempo razoável.

Exemplo1:
Playlist do
spotify...
informa qual
a musica da
lista está
sendo
tocada!
 Exemplo 2: Aplicativo
da Amazon, ao passar
o mouse sobre o filme,
há uma interação que
informa qual filme foi
selecionado.

2) Correspond
ência entre
o sistema e
o mundo
real
O design deve falar a linguagem dos usuários. Use palavras, frases e conceitos familiares ao usuário, em
vez de jargão interno. Siga as convenções do mundo real, fazendo com que as informações apareçam em
uma ordem natural e lógica.

Exemplo 1: as ferramentas do Photoshop, Illustrator...

pincel ou balde de tinta para “pintar” / bandaid para
“reparar” / ícone de tipografia para trabalhar com “texto”

Exemplo 2: “sacolinhas” /
“carrinhos” nas lojas
virtuais que
correspondem ao
carrinho ou cesta de
compra do mundo real...
 Exemplo 3: “Joinha” para curtir

3) Controle e liberdade do usuário

Os usuários costumam realizar ações por engano. Eles precisam de uma “saída de Emergência” claramente
marcada para deixar a ação indesejada sem ter que passar por processo extenso.

Exemplo
1: loja
virtual
que tem
a opção
de

“remover” um produto do carrinho de compras, para o caso do cliente ter inserido “sem querer” ou
simplesmente dar mais essa opção ao usuário no final do pedido.

4) Consistência e padrões
Os usuários não devem se perguntar se palavras, situações ou ações diferentes significam a mesma coisa.
Mantenha a consistência e padrão visual.

Exemplo 1: vários sites ou sistemas mantem o mesmo padrão de layout para que o usuário não fique
“perdido” se estiver em uma subcamada do sistema.
 Exemplo 2: Google drive que segue o mesmo padrão de layout e disposição dos elementos para todas as
suas ferramentas (apresentação, documento, planilha).

5) Prevenção de erros
Boas mensagens de erro são importantes, mas os melhores designers evitam cuidadosamente a ocorrência
de problemas. Elimine as condições sujeitas a erros ou verifique-as e apresente aos usuários uma opção de
confirmação antes de se comprometerem com a ação.

Exemplo 1: a busca do google que já oferece opções de busca para o caso de estar digitando a palavra de
forma errada.
 Exemplo 2: pesquisa do google que mesmo o usuário insistindo no erro (digitando errado), ele ainda dá
opções para correção ou continuar pesquisando com o termo considerado errado por ele.

Exemplo 3: quando se preenche formulários e o sistema já vai mostrando se você está preenchendo de
forma correta.

6) Reconhecimento ao invés de memorização

Minimize a carga de memória dos usuários tornando os elementos, ações e opções visíveis. O usuário não
deve ter que se lembrar de informações de uma parte da interface para outra

Exemplo 1: os “bread crumbs” (caminhos de pão) dos sites que mostram a navegação que se fez até chegar
na página em que se está atualmente.
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.

Os processos flexíveis podem ser executados de diferentes maneiras, para que as pessoas possa escolher o
método que funciona para elas. O sistema pode oferecer um recurso avançado sem que isso prejudique a
experiência de um usuário leigo.
 Exemplo 1: a opção de atalhos no teclado para determinada função, normalmente os atalhos de teclado
são usados por pessoas que já são expert do sistema.

8) Estética e design minimalista

As interfaces não devem conter informações irrelevantes ou raramente necessárias. Cada unidade extra de
informação em uma interface compete com as unidades relevantes de informação e diminui sua
visibilidade relativa.

Exemplo 1: Interface do Adobe XD segue a linha minimalista (botões apagados que só serão mostrados
quando determinada ferramenta será utilizada).

9) Recuperação diante de erros

As mensagens de erro devem ser expressas em linguagem simples (sem códigos de erro), indicar
precisamente o problema e sugerir uma solução de forma construtiva.
 Exemplo 1: e-mail digitado em formato errado em um campo de formulário de um site. É possível retornar
e corrigir somente o campo em que está ocorrendo o erro.

10) Ajuda e Documentação

É melhor se o sistema não precisar de nenhuma explicação adicional. No entanto, pode ser necessário
fornecer documentação para ajudar os usuários a entender como concluir suas tarefas.

Exemplo 1: Figma tem a opção de “Get Started” com links em que é possível ter mais informações sobre o
sistema e como “iniciar” / começar a usar.

Definindo 5 Componentes de Usabilidade

O Dr. Jakob Nielson, apresenta cinco componentes de usabilidade:

1) Learnability (Capacidade de aprendizado)

  Do users find it easy to complete basic tasks?
Os usuários acham fácil concluir tarefas básicas?

Ou

 How easy is it for users to accomplish basic tasks the first time they encounter the design?
Quão fácil é para os usuários realizar tarefas básicas na primeira vez que encontram o design?

2) Efficiency (Eficiência)
 How quickly can users perform tasks?
Com que rapidez os usuários podem executar tarefas?

Ou

 Once users have learned the design, how quickly can they perform tasks?
Uma vez que os usuários tenham aprendido o design, com que rapidez eles podem executar tarefas?

3) Memorability (Memorabilidade)
 Are users easily able to reestablish proficiency after a long gap?
Os usuários são facilmente capazes de restabelecer a proficiência após um longo intervalo?

Ou

 When users return to the design after a period of not using it, how easily can they reestablish proficiency?
Quando os usuários retornam ao design após um período sem usá-lo, com que facilidade eles podem
restabelecer a proficiência?

4) Errors (Erros)
 How many errors do users make, it´s severity, and are they able to recover speedily?
Quantos erros os usuários cometem, sua gravidade e eles conseguem se recuperar rapidamente?

Ou

 How many errors do users make, how severe are these errors, and how easily can they recover from the
errors?
Quantos erros os usuários cometem, quão graves são esses erros e com que facilidade eles podem
se recuperar dos erros?

5) Satisfaction (Satisfação)
 Did users have a delightful experience?
Os usuários tiveram uma experiência agradável?

Ou

 How pleasant is it to use the design?

Quão agradável é usar o design?

O que é Teste de Usabilidade? E por que isto é importante?

A maneira mais simples de descobrir os muitos motivos subjacentes às falhas do seu aplicativo é o teste de
usabilidade.  “Então, preciso esperar até que meu aplicativo seja lançado no mercado?” você pode perguntar. A
resposta é: negativa!
O teste de usabilidade é uma forma de fundamentar sua ideia – seja um site, aplicativo móvel ou diferentes
padrões de interface do usuário – para construir um produto amigável.

A chave é priorizar as áreas que você deseja avaliar e formar um teste de usabilidade que permita refletir sobre as
ações realizadas por seus participantes.

A avaliação pode expor desafios de design e responder a perguntas como:

 Os participantes foram capazes de navegar intuitivamente pelas tarefas dadas?

 A linguagem foi fácil de entender?
 Houve alguma falha técnica que obstruiu a jornada do usuário?
 Em algum momento durante o exercício, eles sentiram que um aplicativo rival era mais simples de usar em
comparação?
 Eles recomendariam o aplicativo para seus amigos, familiares e colegas?

O objetivo do teste de usabilidade não se limita apenas à análise de métricas de desempenho. Também é uma
ótima maneira de conhecer seus usuários, simpatizar com suas necessidades e proporcionar a eles uma
experiência esplêndida. Você pode executar testes de usuário no início do processo de design, o que pode eliminar
a forma de teste de tentativa e erro e economizar tempo e recursos preciosos.

Além de tudo isso, você nem precisa de um protótipo totalmente funcional para executar os testes. Tudo o que
você precisa fazer é selecionar a abordagem correta – como análise de tarefas, prototipagem baseada em papel ou
de baixa fidelidade, teste de árvore e classificação de cartões, entre outros – para validar seu aplicativo.

Elementos de teste de usabilidade

Existem muitos tipos diferentes de testes de usabilidade, mas os elementos principais na maioria dos testes de
usabilidade são o facilitador, as tarefas e o participante.

O facilitador administra as tarefas ao participante. À medida que o participante executa essas tarefas, o facilitador
observa o comportamento do participante e ouve o feedback. O facilitador também pode fazer perguntas de
acompanhamento para obter detalhes do participante.

Tipos de teste de usabilidade

Qualitativo vs. Quantitativo
O teste de usabilidade qualitativo  concentra-se na coleta de insights, descobertas e anedotas sobre como as
pessoas usam o produto ou serviço. O teste qualitativo de usabilidade é melhor para descobrir problemas na
experiência do usuário. Essa forma de teste de usabilidade é mais comum do que o teste de usabilidade
quantitativo.

O teste quantitativo de usabilidade  se concentra na coleta de métricas que descrevem a experiência do

usuário. Duas das métricas mais comumente coletadas em testes quantitativos de usabilidade são o sucesso da
tarefa e o tempo gasto na tarefa. O teste quantitativo de usabilidade é melhor para coletar benchmarks

Benchmark (cuja tradução literal é “marca de referência”) trata-se de um processo de análise de mercado por meio
da busca de informações sobre concorrentes e referências. Ele também possibilita identificar novas tendências e
oportunidades.
Benchmarking é um processo de avaliação dos seus principais concorrentes, com o intuito de coletar
informações que ajudarão nas tomadas de decisões do negócio (o lançamento de um produto, por exemplo).

Os 8 critérios ergonômicos integrados (UX)

Além das Heurísticas de Nielsen existem mais 3 conjuntos de critérios ergonômicos que permeiam a área de ux
(user experience):

1) As 10 heurísticas de usabilidade de Jakob Nielsen

Uma das mais conhecidas ferramentas para garantir interfaces digitais mais funcionais são as heurísticas
de usabilidade de Nielsen (1994) que visam proporcionar ao usuário:
1. Ajuda e documentação.
2. Consistência e padrões.
3. Design estético e minimalista.
4. Flexibilidade e eficiência de uso.
5. Liberdade e controle para o usuário.
6. Mapeamento entre o sistema e o mundo real.
7. Prevenção de erros.
8. Reconhecer ao invés de lembrar.
9. Suporte para reconhecer, diagnosticar e se recuperar de erros.
10. Visibilidade do estado atual do sistema.
2) As 8 regras de ouro de Ben Shneiderman
Outro importante estudo são as regras de ouro propostas por Shneiderman também tendo em vista o
usuário das soluções de forma a:
1. Fornecer atalhos.
2. Fornecer controle e iniciativa.
3. Fornecer feedback informativo.
4. Fornecer prevenção e manipulação simples de erros.
5. Marcar final dos diálogos.
6. Permitir o cancelamento das ações.
7. Perseguir a consistência.
8. Reduzir carga de memória de trabalho.
3) Os 5 critérios ergonômicos de Dominique Scapin e Christian Bastien
 Ainda mais detalhado são os critérios de Scapin e Bastien que os quebraram em subitens para tornar mais
claro como garantir eficiência nas suas aplicações de forma a oferecer ao usuário:
1. Adaptabilidade (flexibilidade e consideração da experiência do usuário).
2. Carga de trabalho (brevidade de ações e baixa densidade informacional).
3. Condução (convite, agrupamento e distinção entre itens, legibilidade e feedback imediato).
4. Controle explícito (ações explícitas e controle do usuário).
5. Gestão de erros (proteção, qualidade das mensagens, correção, consistência, compatibilidade e
denominações claras).
4) Os 7 princípios de diálogo da norma ISO 924:10
Não menos importante temos os princípios da norma ISO 924:10 que tratam do diálogo para interfaces
humano-computador:
1. Adaptação à tarefa.
2. Autodescrição (feedback).
3. Conformidade às expectativas do usuário.
4. Controle ao usuário.
5. Facilidade de aprendizagem.
6. Facilidade de individualização.
7. Tolerância aos erros.

Ao unir esses quatro conjuntos de critérios é possível integrá-los em uma lista única que pode servir como
referência global para o desenho das interfaces.

A proposta feita também por Cybis et al (2007) reuniu esses 8 critérios ergonômicos úteis detalhando em cada um
deles alguns elementos para garantir sua execução:
------------------------------------------------------------
1-----------------------------------------------------------------------

Avaliação de Usabilidade
Usabilidade é um indicador de qualidade que mede o quão fácil de usar uma coisa é. Temos a definição da ISO
9241-11 (de 1998) que define usabilidade como “o quanto um produto pode ser usado, por um determinado
usuário, para atingir um determinado objetivo com eficiência, eficácia e satisfação, em determinado contexto de
uso.”

Eficiência, Eficácia e Satisfação são os eixos de avaliação de usabilidade de acordo com a ISO 9241. Todas estas
dimensões de avaliação são relacionadas ao sucesso na avaliação de uma tarefa. Esta definição de usabilidade
implica em:

 definir um usuário;
 definir um contexto de uso;
 definir uma tarefa.

Ainda de acordo com a ISO 924:

Eficiência é a realização da tarefa sem erros.

Eficácia é a realização da tarefa com otimização dos recursos disponíveis.
Satisfação é o quanto as expectativas são alcançadas.
Destes 3 eixos da avaliação de usabilidade, eficiência e eficácia são objetivamente mensuráveis. Porém, como
vamos medir a satisfação?

Como satisfação é uma variável com muitos componentes, vamos classificá-la como um aspecto da experiência do
usuário (UX).

Erro de Projeto e Erro Humano: Erro de projeto são refletidos em características dos produtos que usamos e que
identificamos como problemáticos. Existem vários casos de produtos que não funcionam como você espera.
Por que isso acontece? Por que será que os designers não conseguem projetar algo à prova de falhas?
Problemas relacionadas à compreensão dos objetivos de projeto são muito comuns.

Henry Petroski, por exemplo, é radical a ponto de afirmar que é impossível projetar algo perfeito. Ele acredita que
o erro é o motor da inovação, e que todos os projetos podem ser melhorados – e que o sujeito desta melhoria é o
designer, seja ele um arquiteto, um engenheiro, ou mesmo um médico.

Para tentar entender como estes erros são gerados, podemos tentar usar uma analogia com modelos mentais: os
erros seriam o resultado de uma diferença entre o modelo de sistema do designer e do usuário. Mas como se trata
de uma analogia, o poder de explicação é bastante limitado. Obviamente não temos acesso ao modelo de sistema
que o usuário possui. E pensando bem, não temos acesso sequer ao modelo de sistema que nós mesmo
possuímos. Além disso, é ingênuo pensar que não há uma adaptação do usuário ao produto.

A “interface transparente” que proporciona uma interação fluída a despeito de qualquer circustância é uma
impossibilidade.
Um texto interessante sobre isso é o artigo “Human-centered design considered harmful”, de Donald Norman. Este
artigo é esclarecedor porque a ideia de que as necessidades do usuário devem estar no centro do projeto é muito,
mas muito presente no Design. E o texto de Norman questiona isso, posicionando as necessidades da tarefa no
centro do projeto. Um bom exemplo são os relógios: A leitura das horas é mais fácil no relógio digital. Em um
relógio de ponteiros, a leitura é mais difícil porque temos que fazer ou uma multiplicação ou uma transformação
da posição dos ponteiros para a escala. Por outro lado, o relógio de ponteiro representa melhor a quantidade de
tempo que passou. O motivo é que a associação entre quantidade e área é mais direta do que a associação entre
quantidade e valor numérico.
Além dos problemas relacionados à compreensão de tarefa, há os problemas relacionados às restrições de
recursos. Dificilmente um projeto não terá algum tipo de restrição – seja de orçamento, prazo, equipe ou
condições e materiais. É preciso encontrar um ponto de equilíbrio entre a economia de recursos e a qualidade do
projeto – o que é muito mais fácil dizer do que fazer...
O nosso objetivo, enquanto designers, é tentar eliminar os erros de projeto. É como se pudéssemos criar um
produto que passaria em qualquer inspeção de usabilidade.

Então, será que a relação entre erros de projetos, incompreensão da tarefa e escassez de recurso pode ser
contornada? Será que podemos eliminar estas duas variáveis?
Em relação aos custos, a resposta é sim, podemos eliminar todas as restrições relacionadas a custos. (apesar de ser
bastante improvável). Porém, em relação à incompreensão da tarefa que dever ser apoiada pelo produto que está
sendo projetado, a resposta é mais complicada... alguns chamam este tipo de problema de “mal definido” e “mal
estruturado” ou mesmo “perverso” (por causa do famoso artigo de Rittel e Webber).
Simon, por outro lado, argumentou que “não existe uma categoria de problemas mal estruturados porque ela só
existe em oposição à outra”.

Os objetivos de usabilidade de Prece, Rogers e Sharp

A imagem acima está no livro de Prece, Rogers e Sharp. Nela podemos ver que o círculo interno contém variáveis
relacionadas à qualidade da execução da tarefa, enquanto o círculo externo faz referência a aspectos afetivos.
Esses objetivos de usabilidade, tanto do círculo interno como do externo, não são uma lista fechada. Não
representam uma norma certificadora. Eles representam a visão dos autores sobre o problema. Mas eles podem
nos ajudar a começar a pensar sobre avaliação.

De que forma podemos avaliar a usabilidade?

A lista de objetivos de usabilidade de Sharp é exclusiva (um problema só pode ser classificado em uma das
categorias), mas ela não é exaustiva: podem existir problemas que não estão classificados em nenhuma daquelas
categorias.

Já os objetivos da ISO são exaustivos e exclusivos, ou seja, além de eles representarem qualquer problema de
usabilidade, um problema não pode ser classificado em duas categorias ao mesmo tempo.
Hornback catologou diferentes formas de avaliar usabilidade, em função da Efetividade e da Eficiência.
Segundo ela, avaliações de usabilidade relacionadas à Efetividade poderiam ser da seguinte forma:

 Realização da tarefa com ou sem sucesso

 Medidas diversas de acurácia: taxa de erro, precisão
 Memorização
 Qualidade do resultado
 Avaliações de especialistas

Avaliações relacionadas à Eficiência poderiam ser executadas da seguinte forma:

 Medição de tempo (tempo de realização da tarefa, tempo até o erro).

 Taxa de entrada de dados
 Quantidade de informações acessadas
 Frequência de uso
 Desvios da solução ótima

Há muitas formas de fazer a avaliação, dentro de cada objetivo: tanto qualitativas como quantitativas

Sempre que coletamos um dado, seja através de um método quantitativo ou qualitativo, é preciso que se possa
confiar nesse dado, como se a gente precisasse assinar embaixo. Se não confiamos no dado, como poderemos tirar
alguma conclusão baseada nele?
A resposta honesta é que você não pode concluir sobre seus dados se não tiver absoluta certeza que eles
representam o que você queira medir. “Se você não confia nos seus dados, jogue-os fora.”

Mas será que precisamos ter este rigor científico ao fazer a avaliação de usabilidade em qualquer contexto? Temos
um gradiente de necessidade para os testes: Que vão dos mais simples (que podem ser executados através de uma
inspeção sem roteiro) até os mais complexos (que necessitam do rigor acadêmico de um experimento).

Cada um dos métodos a seguir deve ser questionado em relação aos seguintes fatores:

 Dificuldade de coletar os dados

 Dificuldade de manejar os instrumentos de coleta
 Confiabilidade dos dados.
 Amplitude da conclusão

1) Checklists e Questionários
Um dos instrumentos de avaliação de usabilidade mais conhecidos e utilizados são os Checklist e Questionários:
são listas de verificação, que vão te dizer se seu produto atende ou não a determinado requisito. Pode-se dizer que
a diferença entre eles é o tipo de escala:

 Checklists têm sempre uma escala binária – Lista de verificação

(por exemplo “atende” / “não atende” ou “sim”/”não”)
 Questionários têm escalas mais detalhadas Ordinal ou escalar – Mede aspectos subjetivos

Ambos costumam ter um resultado numérico, sendo por isso considerados instrumentos para pesquisas
quantitativas.

Exemplos de checklists (usability checklist):

O ErgoList, produzido pela LabiUtil da Universidade Federal de SC, foi um marco no estudo da interação Homem
Computador no Brasil, hoje já é considerado antigo (a última modificação ocorreu em 2011). Ele tem mais de 100
perguntas, divididas em 18 categorias, ao final ele gera um laudo ergonômico.
O questionário costuma a ter uma escala mais detalhada, chamado System Usability Scale, ou como é mais
conhecido: SUS. O SUS tem 10 perguntas e usa uma escala de 1 a 5, com perguntas invertidas (que são âncoras
positivas e negativas alternadas), que gera um score que vai de 0 a 100. Ele foi elaborado por John Brooke e
disponibilizado em 1986. Provavelmente é o questionário de avaliação de usabilidade mais conhecido. As
perguntas que compõem o SUS são:

Eu acho que gostaria de usar esse sistema com frequência.

Eu acho o sistema desnecessariamente complexo

Eu achei o sistema fácil de usar

Eu acho que precisaria de ajuda de uma pessoa com conhecimentos técnicos para usar o sistema

Eu acho que as várias funções do sistema estão muito bem integradas

Eu acho que o sistema apresenta muita inconsistência

Eu imagino que as pessoas aprenderão como usar esse sistema rapidamente

Eu achei o sistema atrapalhado de usar

Eu me senti confiante ao usar o sistema

Eu precisei aprender várias coisas novas antes de conseguir usar o sistema

Kraig Finstad achou que o SUS era muito comprido e decidiu criar um questionário menor com 3 perguntas
chamado de UMUX – Usability Metric for User Experience). Esse questionário obtém resultados semelhantes
ao SUS. Isso é um excelente resultado!

Exemplos de Questionário (usability questionnaire):

UMUX vs. UMUX-Lite

O UMUX é um questionário simples de quatro itens que lista duas afirmações positivas e duas negativas com as
quais os entrevistados avaliam a concordância em uma escala Likert de cinco ou sete pontos. UMUX-Lite é a
versão mais curta que contém apenas as declarações positivas.

Embora o comprimento seja uma diferença óbvia entre os dois, o tom é talvez a diferença mais importante
entre eles. Depois de conduzir uma pesquisa de acompanhamento sobre UMUX, Jim Lewis e outros da
measurementU desenvolveram o UMUX-Lite em 2013. Seu argumento era que o tom alternado do UMUX
criava uma estrutura artificial de dois fatores, embora destinasse apenas a medir um fator, a usabilidade . É por
isso que o UMUX-Lite contém apenas os itens positivos.

Ambas as avaliações podem ser colocadas em uma escala Likert de 5 ou 7 pontos. A recomendação geral,
porém, é que, se você estiver executando este questionário pela primeira vez, é melhor usar uma escala de 7
pontos para obter dados mais granulares.

escala Likert
2) Recursos Cognitivos
Cognitive Walkthrough é um tipo de teste de usabilidade que dá uma espécie de “roteiro” para o avaliador.
É um teste que pode ser realizado pelo especialista em usabilidade, mas que também pode ter a
participação dos usuários. É importante que todos os participantes conheçam bem o sistema que vai ser
avaliado. Menos o Designer (não é bom que ele avalie seu próprio projeto).
Não é um teste difícil de realizar, mas pode ser um pouco demorado e gerar relatórios longos.
Uma característica interessante deste método é que ele parte do princípio que o usuário aprende a usar o
sistema através da exploração, e não lendo manuais.
Este tipo de avaliação é interessante em casos em que se deseja descobrir se uma interface é fácil de
aprender – Casos de primeiro uso, por exemplo. Talvez se encontre a expressão “walk-up-and-use” para
definir este tipo de produto.

3) Avaliação com Heurísticas

Heurística: segundo o dicionário é:
1- Ciência ou arte que leva à invenção e descoberta de fatos.
2- Métodos de ensino que consistem em que o educando chegue à verdade pelos próprios meios.
3- Ramo da ciência histórica que consiste na pesquisa de documentos e fontes do passado.
4- Procedimentos e normas usados em pesquisa feita por meio de quantificação de proximidade a um
determinado objetivo.

Podemos pensar em Heurísticas como estratégias ou planos para atingir um objetivo. Sendo assim, uma
avaliação usando heurísticas, nada mais é do que ter algum tipo de plano antes de começar a avaliação.
Este plano normalmente tem a forma de uma lista, que deve ser aplicada às inspeções de um objeto bem
definido. O exemplo mais conhecido são as 10 heurísticas de Molich e Nielsen, que servem para avaliar a
usabilidade de interfaces homem-computador. Esta lista foi elaborada a partir da experiência dos autores.
...10 heurísticas...
Para fazer a avaliação, siga os seguintes passos:
 Se familiarize com a lista de heurísticas >
  Se familiarize com a interface que vai ser avaliada >
 Crie uma lista de tarefas (pense nas coisas mais importantes que o usuário precisa fazer >
 Execute cada uma das tarefas >
 Avalie a interface de acordo com a lista de heurísticas (para cada passo da tarefa, você precisa se
perguntar se a ação que você, no caso, o avaliador, está executando pode representar um
problema descrito por um dos itens da lista. Pode ser que um problema seja classificado em mais
de um item. >
 Classifique o problema de acordo com a severidade (pode-se usar uma escala de 1 a 5, por
exemplo, onde 1 significa “não é grave” e 5 significa que é “muito grave”) >
 Faça um relatório tentando ser objetivo e sucinto

Segundo Stanton e Young, as avaliações com uso de heurísticas são eficientes e rápidas, porém dependem
muito da experiência do avaliador, tanto com a interface como com as heurísticas. Além disso, eles
alertaram também para o fato que um avaliador trabalhando sozinho não encontra uma quantidade
importante de problemas – ou seja, precisamos mais de um avaliador experiente.

Molich e Nielsen já haviam falado sobre isso em um artigo de 1990, no qual eles avaliaram o quão difícil
era encontra os problemas de usabilidade. Eles fizeram experimentos com 4 sistemas, e observaram a
quantidade de erros que cada avaliador encontrava e a gravidade de cada erro. O artigo que produziram
ficou famoso porque nele foi feita a primeira referência à ideia de que um avaliador é pouco e de que 3 a
cinco são suficientes. (e foi aí que começou a história de ter “5 avaliadores”).
A ideia é que a quantidade de erros encontrada pelos avaliadores segue a Distribuição de Poisson. Na
imagem abaixo e que foi retirada do mesmo artigo vemos que a quantidade de problemas encontrada fica
estável quando se faz avaliação com 5 avaliadores.

4) Avaliação de Aspectos Subjetivos

Não basta ser funcional, fácil de usar, fácil de aprender. Tem que ter alguma coisa a mais. Tem que ser
agradável, tem que ser prazeroso, tem que ser bonito.
Para que possamos avaliar se o método que escolhemos para realizar a medição está adequado é
fundamental que a gente saiba definir, com a maior precisão possível, o que estamos querendo avaliar.
Por exemplo: se acreditamos que emoções podem ser identificadas e quantificadas, nosso método de
observação e nossos instrumentos de medida devem refletir estas concepções teóricas.
 Mas satisfação é uma emoção ou uma expressão de afeto?
Estas duas palavras – Emoção e Afeto – têm causado grande confusão na literatura científica, porque elas
são usadas por alguns autores para denotar duas classes diferentes de fenômenos, enquanto outros usam
essas palavras como sinônimos.
A gente encontra na literatura, uma distinção entre estas palavras:
Afeto é uma referência a sentimentos difusos, meio como se a gente não conseguisse explicar muito bem o
que está sentindo. Também se vê “afeto” sendo usado como um termo geral para qualquer coisa que
tenha a ver com sentimentos – um vocábulo neutro.
Emoção refere-se a sentimentos que são uma resposta a um evento específico. São estados discretos e
fáceis de identificar, como raiva, medo, tristeza, desgosto e felicidade. Às vezes, os autores descrevem a
emoção como pacotes coordenados de experiências, de mudanças fisiológicas e de comportamento

------------------------------------------------------------
2-----------------------------------------------------------------------

Métodos para avaliação de Usabilidade

Para analisar a usabilidade de uma interface é necessário utilizar métodos de avaliação que consideram os
conceitos de IHC (interação Humano-computador), e em muitos casos, de engenharia de software.

Nielsen (1994) dividiu os métodos em 3 categorias:

5) Métodos analíticos ou de inspeção

6) Métodos empíricos ou teste com usuários
7) Outras formas
1) Métodos analíticos ou de inspeção – Avaliação Heurística
É um método que tem o objetivo de examinar uma interface e julgar de acordo com os conceitos de IHC,
baseados nos princípios de usabilidade. Este método foi proposto por Jacob Nielsen e Rolf Molich em
1990.
É necessário um pequeno grupo de avaliadores, e pode ser aplicado no início do desenvolvimento do
projeto. Qualquer pessoa pode realizar o teste. É considerado um método rápido e barato.
Com base nos resultados da avaliação, melhorias podem ser propostas mesmo no início do
desenvolvimento do projeto de interface.

1° Fase - Sessão de pré-avaliação

Nesta fase, os profissionais/avaliadores devem reunir-se para conhecer o cenário, o protótipo ou a
aplicação. Serão discutidas as características, necessidades, etc. Também devem ser discutidas cada uma
das 10 heurísticas, que serão utilizadas para avaliar a interface. Esta etapa é importante, para que todos os
profissionais envolvidos no projeto cheguem a um consenso.
2° Fase – Avaliação
A avaliação deve ser feita individualmente. É necessário definir as tarefas que devem ser realizadas pelos
avaliadores, que devem ser, pelo menos 2 navegações no sistema:
1) Navegação para conhecer o sistema;
2) Uma tarefa para verificar se alguma das 10 heurísticas está sendo violada.

O especialista deve definir a severidade para cada heurística, bem como a forma de aplica-la. Finalizada a
avaliação, cada especialista terá uma tabela com as heurísticas violadas e suas respectivas severidades.

3° Fase – Discussão dos avaliadores

Nesta fase cada avaliador apresenta os resultados da sua avaliação. Então os avaliadores discutem as
principais características da interface, as heurísticas violadas e as suas severidades para chegar a um
consenso.

4° Fase – Melhorias

Com base nas discussões da fase 3, os avaliadores propõem soluções para os problemas apresentados na
avaliação heurística, cujo objetivo é melhorar a usabilidade da interface. Em um consenso, decidem qual é
a melhor pode/deve ser aplicada.

Grau de severidade:
 Grau 1: Cosmético

Problema cosmético/superficial, que só precisa ser

corrigido quando houver tempo e dinheiro.
 Grau 2: Leve

Problema de usabilidade pequeno, e possui baixa

prioridade para ser solucionado.
 Grau 3: Sério

Problema de usabilidade grande, que possui prioridade e

deve ser corrigido assim que possível.
  Grau 4: Crítico
Possui prioridade máxima e precisa de intervenção
imediata por impedir que os usuários utilizem
apropriadamente a interface.

1) Métodos analíticos ou de inspeção – Percurso Cognitivo

Percurso cognitivo é um método que simula passo a passo o comportamento dos tipos de usuários em
cada tarefa/função de uma interface.
O objetivo principal é inspecionar um sistema/programa/site pela facilidade de aprendizagem,
particularmente por exploração. Ou seja, a interface naturalmente tem de permitir ao usuário saber
reconhecer e realizar as tarefas propostas por meio de suas funcionalidades.
Este método pode ser aplicado no início do desenvolvimento do projeto de uma interface, e o resultado
desta avaliação permite identificar problemas e possíveis soluções.
Wharton (et al., 1992) relata que esse método investiga especialmente:
 A correspondência entre o conceito de uma tarefa por parte dos usuários e dos designers;
 A escolha adequada ou inadequada de termos, como, por exemplo, se o vocabulário está
adequado ao público-alvo.
 O feedback adequado ou inadequado como consequência de uma ação.

1) Métodos analíticos ou de inspeção – Checklist

O checklist é uma lista de itens baseados nos princípios de IHC e usabilidade que devem ser considerados,
permitindo que os profissionais envolvidos no projeto de um sistema/software/site verifiquem se as
funcionalidades e conteúdos estão visíveis e acessíveis facilmente aos usuários
Labiutil.inf.ufsc.br/ergolist
2) Métodos empíricos ou teste com usuários – Teste de Usabilidade
O método empírico consiste em observar e monitorar. E é realizado através de tentativas e erros.
É um método que gera aprendizado, pois aprendemos através de experiências vividas e observadas.
Através do teste de usabilidade é possível observar se o usuário está acessando e executando facilmente
as tarefas em uma interface.
É necessário definir objetivos para os usuários. Ou seja, definir o que será observado.
Este teste pode ser realizado a partir de um protótipo, ou quando o sistema/site estiver pronto e
implementado.
Importante: Durante o teste de usabilidade o avaliador deve evitar conversar com o usuário para evitar
interferir na ação deste diante da interface.
Afinal, é um teste Empírico! Ou seja, o avaliador apenas observa a experiência do usuário interagindo com
o sistema através da interface.
Portanto, o avaliador precisa estar atento ao comportamento do usuário, e observar como este executa as
tarefas e em quanto tempo.
Identifica erros e inconsistências críticos, que podem comprometer a interação homem computador.
Permite também uma comparação do que foi planejado com a experiência real de uso.
Teste de alta qualidade/definição:
Os testes podem ser realizados desde o início do projeto, com protótipos de baixa qualidade/fidelidade.
Podem ser utilizados protótipos em papel, porém sempre em escala real. Nesta fase a avaliação é bem
limitada, e serve para prever a experiência dos tipos de usuários.
Os testes em alta qualidade/definição contemplam o fluxo e execução de tarefas a serem realizadas pelos
usuários, bem como se as “metáforas visuais” estão claras para os mesmos. Além disso, avalia o
desempenho e acessibilidade.
O teste de usabilidade permite:
- Verificar se as tarefas foram compreendidas pelos usuários;
- Verificar quais tarefas foram possíveis ou não de concluir;
- Analisar se a interface precisa de ajustes/correções.
2) Métodos empíricos ou teste com usuários – Percurso Pluralístico
O percurso pluralístico permite avaliar uma sequência de telas observando o percurso de interação dos
usuários. O termo “pluralístico” é utilizado porque envolve várias pessoas, incluindo a equipe de
profissionais envolvidas no projeto.
Neste método os usuários descrevem como executariam uma determinada tarefa proposta pela equipe
responsável pelo projeto. Então acontece uma troca de informações entre a equipe e os usuários. A equipe
compara o que foi planejado pelos profissionais envolvidos, e o que foi descrito pelos usuários, permitindo
entender a visão e experiência destes e definir a melhor solução para determinada tarefa.

3) Outras formas – Modelo GOMS

Goals, Operators, Methods, and Selection Rules (Objetivos, Operadores, Métodos e Regras de Seleção)
O método GOMS não é o mais preciso para avaliação de interfaces, mas certamente tem suas vantagens.
Esta técnica baseia-se no modelo de processo cognitivo humano e avalia de forma estimativa se uma
interação específica pode ser executada com pouco esforço, baixo custo, e num curto espaço de tempo,
definindo processos e medições.
É necessária uma cuidadosa investigação em todas as etapas de interação de um usuário com uma
interface, e definir um tempo para cada uma.
A soma dos tempos necessários para completar as etapas detalhadas fornece uma estimativa de quanto
tempo um usuário, provavelmente precisará para completar com sucesso a tarefa desejada.

3) Outras formas – Questionários

Este método reúne várias questões que são apresentadas aos usuários. Através dos questionários é
possível identificar facilmente os perfis dos usuários, tais como: preferências, satisfações, ansiedades,
 expectativas, etc. Existem várias maneiras de aplicar os questionários, que podem ser com questões de
múltipla escolha.

------------------------------------------------------------
3-----------------------------------------------------------------------

Métodos para a avaliação da usabilidade em interfaces

gráficas digitais
Segundo JORDAN (1998), cada método para a avaliação de interfaces gráficas digitais possui uma série de
propriedades que fornecem certas vantagens ou desvantagens. Isto inclui, por exemplo, o tempo, o esforço e o
nível de habilidade e conhecimento para a utilização do método, facilidades e equipamentos necessários para a
condução eficaz do método, além do número mínimo de participantes para reunir informações úteis.

1) Métodos Empíricos
Para JORDAN (1998), a maioria dos métodos para a avaliação de interfaces envolve a utilização de participantes.
Tais métodos são conhecidos como empíricos. Apesar dos princípios ergonômicos aplicados a projetos serem
responsáveis por trazer grandes benefícios para os usuários, em alguns casos estes usuários irão deparar-se com
esforços não previstos. Neste momento, os métodos que envolvem participantes terão um valor adicional,
promovendo a descoberta de problemas de usabilidade até então desconhecidos.

1. Arranjo de cartões (card sorting) 8.1.1.1.

De acordo com FRISONI e STEIL (2005), o método de arranjo de cartões é utilizado para descobrir o modelo
mental que os participantes têm de determinado espaço de informação, gerando, desta forma, a arquitetura
da informação de uma interface.

Tal método é utilizado para entender como os participantes agrupam

as informações de acordo com suas relações de característica e
significância, ou seja, como os indivíduos categorizam o conteúdo de
uma interface gráfica digital. O arranjo de cartões também é capaz de
gerar sugestões de nomenclatura, visto que as pessoas rotulam grupos
de cartões através de títulos que consideram eficazes.

Para aplicar o método de card sorting, basta utilizar um conjunto de

fichas ou um conjunto de post-its e escrever, separadamente em cada um, um item de conteúdo primário ou
secundário. Depois, basta pedir que os participantes agrupem as informações de uma maneira que
considerem relevante.

Tipos de card Sorting existentes

Existem três formas diferentes de se aplicar o Card Sorting.

1. Card Sorting Aberto: Essa técnica é mais apropriada quando se deseja descobrir como as pessoas
agrupam o conteúdo quais rótulos que atribuem a cada categoria que faça sentido para seu modelo mental.
Para aplicar esse método basta solicitar aos participantes que organizem os cartões com os itens de conteúdo
do site ou funcionalidade, em grupos que mais façam sentido para eles. Logo depois é pedido que deem
nomes para esses grupos que eles criaram de forma que consigam descrever com mais clareza o conteúdo de
cada grupo;
 2. Card Sorting Fechado: A aplicação dessa técnica é mais indicada quando já se tem um conjunto de
grupos ou categorias já estabelecidas e você deseja entender como os usuários agrupam os itens de cada
conteúdo de acordo com essas categorias já existentes. Em termos práticos, a execução dessa técnica é feita
da seguinte maneira: os usuários são solicitados a colocar esses cartões em grupos primários já definidos. São
fornecidos post-its com o nome da cada grupo e outros post-its com o nome de cada conteúdo/
funcionalidade para que sejam agrupados de forma coerente;

3. Card Sorting Híbrido: Essa forma de aplicação permite que a gente veja se as categorias que foram
propostas estão fazendo totalmente sentido para os usuários. Se não, eles têm a possibilidade de criar nomes
de novos grupos e agrupar o contéudo de forma que achar mais coerente.

2. Avaliação cooperativa (cooperative evaluation) 8.1.1.2.

De acordo com MIRANDA e MORAES (2003), a avaliação cooperativa éa
cooperação que ocorre na medida que os participantes e o pesquisador
avaliam, juntos, uma determinada interface. Os participantes são
encorajados a perguntar sobre o processo de interagir com esta
interface e o pesquisador faz perguntas sobre o entendimento do
participante em relação à mesma. Isso faz com que o procedimento pareça
bastante natural para o participante e exija menos recursos que outros
métodos de teste mais formais.

Recomenda- se a avaliação cooperativa para produtos que necessitam de

aprimoramento técnico, para protótipos em um estágio intermediário ou para protótipos funcionando em sua
plenitude. Por utilizar certas tarefas previamente formuladas, este método não é indicado para os casos onde
a interface se encontra em sua fase embrionária.

3. Co-descoberta (co-discovery) 8.1.1.3.

Segundo JORDAN (1998), este método envolve 2 participantes que trabalham juntos para explorar uma
interface e descobrir como determinadas tarefas são
realizadas. Através da análise das verbalizações dos
participantes, o pesquisador pode obter um melhor
entendimento das questões de usabilidade associadas
com a interface. Geralmente, os participantes são
amigos ou, no mínimo, conhecidos. Isto é benéfico,
pois ao conhecerem um ao outro, tais indivíduos
estão menos vulneráveis a sentirem-se inibidos no
momento de falar sobre o que estão fazendo e sobre
as suas opiniões em relação à interface.

O investigador pode permanecer junto aos

participantes, quando os mesmos estão utilizando
a interface. Deste modo pode-se fornecer instruções ou ajudar os indivíduos enquanto a interface é utilizada,
ou então levantar questões sobre o que os participantes estão fazendo e pensando.

4. Diários de incidentes (incident diaries) 8.1.1.4.

De acordo com JORDAN (1998), diários de incidentes são mini- questionários emitidos para os
participantes, para que os indivíduos tomem notas de qualquer problema encontrado durante a utilização de
uma interface. Tipicamente, solicita-se que estes participantes forneçam uma descrição por escrito do
problema que eles encontraram. Então, pergunta-se como resolveriam tal problema e como o mesmo era
incômodo. O último assunto (incômodo) pode ser dirigido quantitativamente, ou seja, os participantes podem
marcar alternativas em uma escala Likert, uma escala numerada com âncoras verbais em cada extremo.

JORDAN (1998) explica que este método pode ser utilizado juntamente com outras formas de avaliação,
através de 2 abordagens. Na primeira, o pesquisador permanece presente o tempo todo, com o objetivo de
ganhar 2 perspectivas diferentes sobre o problema, ou seja, a perspectiva do investigador e a perspectiva do
participante (o pesquisador toma nota do
problema e também solicita que o participante
tome nota no seu diário de incidentes,
fazendo com que este indivíduo descreva, com
suas próprias palavras, o significado do
problema). Freqüentemente, a percepção do
problema e o seu grau de severidade,
observado pelo participante, difere da opinião
do investigador. Utilizar o diário de incidentes
neste contexto, promove introspecções
relacionadas aos interesses das pessoas que não
poderiam ter sido obtidas unicamente a
partir das observações do pesquisador. Na
segunda abordagem, os diários são emitidos para os participantes preencherem longe da presença do
investigador. Por causa disso, é importante assegurar que cada mini-questionário não seja muito longo para
completar. Quando um participante está enfrentando problemas relacionados a um produto, é improvável
que seja entusiástico sobre o fato de ter que gastar uma quantidade de tempo significativa para registrar o
ocorrido.

Este método é, geralmente, mais apropriado para a utilização com interfaces finalizadas, que já estão em
uso, onde os diários são usados para o registro de problemas que ocorrem durante o “ciclo de vida” da
interface. A informação reunida pode ser aplicada na tomada de decisões sobre novos projetos ou
simplesmente para a avaliação de usabilidade da interface atual.

5. Entrevistas (interviews) 8.1.1.5

Segundo JORDAN (1998), neste método o
pesquisador compila uma série de questões propostas
diretamente aos participantes. É importante ressaltar
que há 3 categorias de entrevistas: sem-estrutura,
semi-estruturadas e estruturadas.

Em uma entrevista sem-estrutura, pergunta-se para

o respondente uma série de questões abertas, dando a
oportunidade para o participante dirigir a discussão
para os assuntos que ele considera importantes, ao
invés de manter-se preso rigidamente a um roteiro
desenvolvido pelo pesquisador. Este tipo de entrevista é mais apropriado nas situações onde o pesquisador
não possui idéia dos problemas relacionados ao interesse do participante.

Com uma entrevista semi-estruturada, o pesquisador, normalmente, possui uma idéia clara sobre o que
considera ser relevante em uma avaliação, assim como os assuntos que espera que os respondentes
abordem. Estes respondentes não têm tanta liberdade como no caso das entrevistas sem-estrutura, pois o
investigador, durante todo o tempo, tenta assegurar que certos pontos serão discutidos nas respostas. Isto,
geralmente, é feito através de novas perguntas ao final de cada resposta. Pelo fato de utilizar perguntas, a
técnica de entrevista semi- estruturada pode assegurar que um arranjo central de assuntos será abordado por
cada respondente, permitindo uma análise sistemática maior do que em uma entrevista sem-estrutura. Ao
mesmo tempo, os participantes também podem levantar questões que são de importância particular para
eles.

Nas entrevistas estruturadas os respondentes devem escolher uma resposta em uma escala pré-ajustada.
Isto significa, por exemplo, pedir que os participantes marquem uma característica particular em uma escala
Likert, ou que escolham uma alternativa em categorias de respostas.

De acordo com GIL apud SANTOS (2004), a entrevista se define como um método de avaliação em que o
pesquisador se coloca na frente do entrevistado e formula perguntas para obter dados de interesse
particular. Entre as categorias de entrevista, MOTTA apud SANTOS (2004) destaca a entrevista informal, que
se desenvolve de maneira não estruturada e diferencia-se da conversação simples pelo fato de haver um
objetivo para coleta de dados. É uma conversa complementada, ou não, por observações de comportamento,
a partir de um guia ou de uma lista de assuntos a serem investigados.

6. Grupo de foco (focus group) 8.1.1.6.

Segundo JORDAN (1998), o grupo de foco é um grupo de pessoas reunidas para discutir um assunto
particular. Esta discussão pode abranger, por exemplo, as experiências dos usuários em relação à utilização de
uma interface em particular, os requerimentos para uma nova interface, informações sobre o contexto onde
realiza-se tarefas específicas, ou
problemas de usabilidade que são
associados com a utilização de uma
interface. O grupo de foco consiste de
um líder, que conduz toda a discussão, e
um certo número de participantes. Este
líder segue um roteiro de assuntos que
poderão conduzir o procedimento de
discussão. Este roteiro não é estruturado
de forma rígida, pois seu objetivo é
permitir que os participantes prossigam
em determinadas direções conforme o
desejo do grupo. Isto pode assegurar que os pontos levantados serão aqueles que mais preocupam tais
indivíduos. Para facilitar o grupo de foco, o trabalho do líder é assegurar que todos os participantes tenham a
mesma chance de expor suas opiniões.

JORDAN (1998) ressalta que quanto mais pessoas participarem do grupo, maiores serão as chances de
interação entre as pessoas. Certamente, uma das grandes vantagens do grupo de foco é o fato do comentário
de uma pessoa poder gerar uma contribuição útil de outro indivíduo.

Segundo EDMUNDS apud TEIXEIRA e MORAES (2004b), o método de focus group pode ser compreendido
como uma pesquisa qualitativa, significando que seus resultados não são obtidos em porcentagem, em testes
estatísticos ou em tabelas. O grupo de foco tende a ser mais exploratório e menos estruturado do que outros
métodos de avaliação de interfaces, permitindo que os pesquisadores capturem comentários subjetivos dos
participantes, avaliando suas considerações, assim como suas percepções, sentimentos, atitudes e
motivações. Ao invés de prover respostas quantitativas para uma pergunta específica a uma amostra grande
de um dado universo, os participantes de um grupo de foco (focus group) possibilitam um fluxo entre a
interação e a participação, com relação a um conjunto de tópicos que serão o cerne da discussão do grupo
em questão.

7. Experimentos controlados (controlled experiments) 8.1.1.7.

 Para CHAPANIS (1962), é muito difícil encontrar
2 pesquisadores que irão concordar em como
definir este método. No entanto, é possível afirmar
que um experimento controlado pode ser descrito,
resumidamente, como um processo dividido em 4
etapas:

Uma série de observações controladas: ao

desenvolver um experimento controlado, deve-se
planejar, controlar e descrever todas as
circunstâncias que envolvem os testes. Isto fornece
um maior controle durante o curso dos eventos,
além de permitir condições onde será possível
repetir o experimento outras vezes.

Realizadas em uma situação artificial:

experimentos controlados são situações artificiais, planejadas deliberadamente por um pesquisador. Vale
ressaltar que os participantes não costumam se comportar de maneira natural em um experimento
controlado, pois os indivíduos envolvidos em testes dificilmente conseguem desempenhar tarefas da mesma
forma que em situações reais.

Através da manipulação deliberada de algumas variáveis: o pesquisador pode variar sistematicamente

algumas condições para verificar que tipo de resultados ele irá obter. Isto significa que este pesquisador é
capaz de testar combinações que não ocorreriam, ou ainda não ocorreram, na vida real. Esta manipulação
deliberada das variáveis também permite identificar as causas de um problema com um grau de precisão
maior do que através de meras observações. Vale ressaltar que ao se trazer uma situação do mundo real para
o laboratório, nem sempre as variáveis envolvidas podem ser as mesmas em ambas as situações. Não é
possível controlar todas as variáveis envolvidas em um estudo, pois é imenso o trabalho para controlar
fatores como temperatura, umidade, hora do dia, dia do ano, experiências passadas dos sujeitos envolvidos,
etc. Se o pesquisador tentar se concentrar em cada um destes detalhes, nunca conseguirá iniciar o seu
experimento.

Com o objetivo de testar uma ou mais hipóteses específicas: o foco da investigação está voltado para
algumas questões específicas ou hipóteses. Possuir este ponto focal significa que o pesquisador pode aguçar
todo o seu procedimento experimental, desenvolvendo um plano para descobrir as respostas para as suas
questões.

JORDAN (1998) classifica um experimento controlado como uma avaliação formalmente projetada através
de controles e balanços muito bem ajustados. O objetivo é remover o máximo de ruídos (distrações) nos
dados finais, isolando os efeitos para a execução da tarefa ser a mais clara possível.

Para eliminar todos os tipos de distrações, os experimentos geralmente são conduzidos em um ambiente
laboratorial estéril, de acordo com protocolos extremamente rígidos.

8. Listas de verificação de
características (feature checklists)
8.1.1.8.

Para JORDAN (1998), uma lista de verificação de

características nada mais é do que uma lista de
funcionalidades de uma interface, ou seja, solicita-se
que os participantes marquem as características
utilizadas nesta interface. Saber quais as características são usadas e quais não são utilizadas faz com que a
lista seja uma forma útil de capturar os requisitos de um produto. Uma lista de características também pode
investigar informações adicionais, como, por exemplo, a regularidade com que uma característica particular é
utilizada, se os participantes percebem a existência de uma característica, ou se os mesmos seriam capazes de
utilizar uma característica particular caso necessitem.

JORDAN (1998) ressalta que as listas de verificação de características, primeiramente, fornecem

informações sobre a maneira como uma interface é utilizada, ao invés da maneira como é fácil utilizá-la.
Entretanto, a lista de verificação pode ser estendida para fornecer uma idéia sobre a usabilidade das várias
características da interface. Além de perguntar para os participantes sobre a utilização de uma determinada
característica, por exemplo, pode-se indagar se eles realmente saberiam utilizar a mesma. Talvez, a falta de
utilização desta característica (embora o participante saiba para que serve) mostre que ela não é útil para o
indivíduo. Mas se a pessoa indicar que não sabe utilizar tal característica, então pode existir um problema de
usabilidade associado com a característica em questão.

JORDAN (1998) também afirma que as listas de verificação de características são mais eficazes no contexto
de interfaces finalizadas, que estão sendo utilizadas há algum tempo. A informação obtida com estas listas
pode alimentar a fase de requisitos durante o projeto de uma nova interface.

9. Método de avaliação (valuation method) 8.1.1.9.

De acordo com JORDAN (1998), este método foi projetado para avaliar a importância que os participantes
atribuem à determinadas características de uma interface. Geralmente, pergunta-se às pessoas o quanto elas
pagariam a mais por uma interface que
contenha determinadas características.
Considera-se que a quantidade de
indivíduos que pagaria por estas
determinadas características seja um
indicativo da importância da resolução de
problemas de usabilidade em interfaces.
Para JORDAN (1998), os potenciais
usuários preocupam-se muito mais com
os aspectos e funcionalidades do projeto
da interface que são capazes de
demonstrar um nível de desempenho
acima da média. Por isso, este método pode ser particularmente útil, durante a fase de captura de requisitos,
como uma forma de demonstrar os potenciais benefícios adquiridos através da utilização de determinadas
características em interfaces.

10. Observações de campo (field observations) 8.1.1.10.

Segundo JORDAN (1998), as observações de campo envolvem a observação dos participantes no ambiente
real onde uma interface é utilizada. Isto promove um grau de validade ambiental que pode ser perdida em
avaliações conduzidas em um local um
tanto quanto estéril, como um laboratório
de usabilidade, por exemplo. Em alguns
casos, o pesquisador não irá determinar
qualquer tipo de tarefa, simplesmente
deixando os indivíduos realizarem ações
que normalmente fazem ao utilizar uma
interface específica. Mas também é
possível determinar tarefas de natureza
geral para estes participantes, como demonstrar que tipo de atitude iriam assumir, caso uma situação
particular acontecesse naquele momento.

A idéia principal é ganhar uma compreensão de como a interface é utilizada sob condições naturais, sem a
imposição de constrangimentos limitados que iriam surgir em um protocolo de avaliação ajustado, como num
experimento controlado, por exemplo. É importante, ao conduzir uma observação de campo, que o
pesquisador tente assegurar que o efeito da sua presença sobre o participante seja mínimo. Caso os
indivíduos testados percebam que estão sendo observados, eles podem, conscientemente ou
inconscientemente, alterar sua abordagem natural em relação à interface utilizada, comprometendo o nível
de validade ambiental da observação. Talvez a maneira mais eficaz de minimizar a presença do investigador
seja, simplesmente, não permitir que o participante saiba que está sendo observado. Isto pode ser feito, por
exemplo, através de observação à distância, ou através de filmagem com uma câmera escondida.

Entretanto, utilizar tal abordagem levanta questões éticas, pois sob os padrões comumente aceitos por
aqueles que conduzem avaliações de usabilidade, o direito dos participantes de serem informados sobre o
que está acontecendo é considerado um ponto central. Qualquer tipo de avaliação, não pode ser realizada
sem a permissão do participante. Uma solução para este fato, que pode ser aceitável em algumas
circunstâncias, seria informar as pessoas após a realização das observações, avisando-as que registros em
vídeo foram coletados e solicitando sua aprovação para a utilização de tais dados com propósitos de análise.

11. “Oficina” de usuários (user workshops) 8.1.1.11.

Para JORDAN (1998), uma “oficina” de usuários é caracterizada por um grupo de participantes reunidos
para discutir assuntos relacionados
com o projeto e a utilização da
interface. Geralmente, estes
participantes são envolvidos
na fase de projetação de uma nova
interface. Isto significa,
simplesmente, listar seus requisitos
em termos de usabilidade e
funcionalidade. Entretanto, também há a possibilidade
do envolvimento de pesquisadores, que irão esboçar
algumas idéias para possíveis soluções de projeto. A “oficina”
de usuários difere do grupo de foco, principalmente, pelo
fato de envolver participantes em um processo mais ativo de avaliação da usabilidade em interfaces, ao invés
de pedir que os indivíduos apenas discutam problemas.

12. Protocolos “pensar alto” (think aloud protocols) 8.1.1.12.

De acordo com JORDAN (1998), este método envolve um participante que fala sobre o que ele está
fazendo e pensando ao utilizar uma determinada interface. Pode-se solicitar que este indivíduo realize uma
tarefa específica na interface, ou, simplesmente, lhe seja dada
a oportunidade de uma livre exploração da mesma. Quando
as tarefas são ajustadas, a sessão de “pensar alto” irá
espelhar um experimento controlado, onde o pesquisador
organiza as tarefas em uma ordem predeterminada.
Inversamente, a exploração livre envolve a apresentação de
uma interface para o participante, onde solicita-se que esta
pessoa tente fazer algo de acordo com a sua própria vontade.
Organizar as tarefas dos participantes ajuda no sentido da
descoberta de falhas de usabilidade específicas em um
projeto, enquanto os protocolos “pensar alto” utilizados na exploração livre podem providenciar informações
úteis, como o motivo de algumas pessoas utilizarem partes de uma interface, ignorando outras
particularidades da mesma.

JORDAN (1998) afirma que durante a sessão “pensar alto”, o investigador, geralmente, irá fazer perguntas
para o participante, encorajando o mesmo a verbalizar informações relevantes. Estas perguntas podem ser
categorizadas como gerais (“o que você está pensando agora?”, por exemplo) ou como específicas, relatando
um erro particular que tenha sido cometido (“por quê você apertou esse botão?”, por exemplo). Talvez, as
verbalizações dos participantes sejam capazes de fornecer informações sobre o componente de satisfação da
usabilidade. Isto pode ser encorajado por perguntas do tipo “como você está se sentindo agora?”, por
exemplo.

Segundo JORDAN (1998), para um protocolo “pensar alto” funcionar, deve existir algo com que os
participantes possam interagir. É improvável que este método seja eficaz nos estágios iniciais de um processo
de projetação. Logo, para obter benefícios através da utilização do protocolo “pensar alto”, será necessário
ter, pelo menos, um modelo interativo (protótipo) da interface.

13. Questionários (questionnaires) 8.1.1.13.

Para OPPENHEIM (1992), o termo “questionário” é utilizado de diferentes maneiras. Alguns o reservam
exclusivamente para questionários auto- administrados ou enviados pelo correio (questionários-postais),
enquanto outros incluem este termo na categoria das entrevistas programadas (administradas face- a-face ou
através do telefone). Independente desta distinção, geralmente, a palavra “questionário” é utilizada para
distinguir um arranjo de questões, incluindo algumas perguntas, listas de checagem, técnicas projetivas,
escalas de avaliação e uma variedade de outros métodos. A função deste arranjo de questões é estabelecer
(obter gradualmente) uma comunicação particular. Espera-se que o respondente possua certas informações,
idéias ou atitudes sobre o assunto do inquérito e precisa-se obter tais dados com o mínimo de distorção
possível. A maioria dos questionários é classificada como “questionário fechado” ou “questionário aberto”.

OPPENHEIM (1992) afirma que um questionário fechado é aquele onde se oferece para o respondente
uma opção entre várias alternativas de resposta. Em questionários impressos, pede-se que a resposta
escolhida seja indicada através de um “x”, de um círculo, de um sublinhado, ou então as alternativas podem
ser lidas em voz alta pelo entrevistador,
mostradas em um cartão ou slide. As perguntas
fechadas são mais fáceis e mais rápidas de
responder. Não necessitam de escrita e mais
questões podem ser perguntadas dentro de um
intervalo de tempo. As desvantagens das
perguntas fechadas são a perda da espontaneidade e da
expressividade, pois não é possível saber o que os
respondentes disseram ou pensaram através de
suas próprias palavras. Além disso, as perguntas
fechadas forçam os respondentes a escolherem uma
entre algumas opções de alternativas, fazendo
com que focalizem em respostas que, talvez, ainda
não tenham acontecido com eles.

Segundo OPPENHEIM (1992), um questionário aberto não é seguido por qualquer tipo de escolha e a
resposta tem que ser gravada na íntegra. No caso de questionários escritos, a quantidade de espaço ou o
número de linhas destinadas para a resposta irão determinar, em parte, o comprimento das respostas
obtidas. Os questionários abertos são muito úteis para reportar algumas questões na íntegra, fornecendo um
pouco do “sabor” destas respostas. A maior vantagem dos questionários abertos é a liberdade que os
mesmos fornecem para os seus respondentes. É possível obter ideias das pessoas através da sua própria
linguagem, que é expressa de forma espontânea. Esta espontaneidade, geralmente, é de extremo valor como
base para novas hipóteses.

JORDAN (1998) afirma que questionários abertos são particularmente úteis em situações onde o
pesquisador não sabe quais os assuntos são mais importantes para serem tratados. Com questionários
fechados, as perguntas têm que ser suficientemente bem elaboradas (facilmente entendidas pelos
respondentes) para fazer com que as categorias de respostas sejam significativas (as alternativas oferecidas
devem cobrir toda a gama de possíveis respostas). Já no caso dos questionários abertos, as perguntas podem
ser elaboradas de maneira mais ampla, permitindo que os respondentes destaquem os assuntos que
consideram mais relevantes. Geralmente, questionários abertos são mais apropriados para os estágios iniciais
de uma interface, antes que elementos importantes sobre a usabilidade sejam claramente definidos. De fato,
os dados qualitativos que são obtidos com este tipo de recurso podem desempenhar um importante papel na
hora de definir os requisitos da interface. Em contraste com as informações quantitativas obtidas através de
questionários fechados, através dos questionários abertos é possível providenciar uma métrica para o
julgamento de usabilidade. Questionários fechados são mais utilizados logo após a interação dos usuários
com uma nova interface, ou pelo menos um protótipo interativo desta interface.

14. Registro de conversações (private camera conversations) 8.1.1.14

Consiste basicamente no fato do indivíduo entrar em uma cabine privada e falar, para uma câmera de
vídeo, sobre um tópico pré-determinado pelo investigador. Pode-se solicitar que o participante fale da
maneira como utiliza uma determinada
interface, por exemplo, o quanto a
utilização de uma interface é algo
considerado fácil ou difícil, ou como a
interface se encaixa na sua maneira de
viver. Geralmente, as instruções dadas
para cada pessoa são de natureza
geral, como uma abordagem do tipo:
“fale sobre o contexto que você utiliza
o programa Adobe Photoshop”, por
exemplo. Este questionamento geral
fornece ao participante a oportunidade
de levantar problemas que ele considera significativos, ao invés de responder uma série de questões
específicas, cobrindo assuntos que apenas o pesquisador considera importante.

15. Registro de uso (logging use) 8.1.1.15.

Segundo JORDAN (1998), nas interfaces gráficas digitais, é possível instalar dispositivos de registro
automático que captam as interações dos participantes com a interface. Todas as teclas digitadas pelas
pessoas podem ser registradas, por exemplo, ou então todos os comandos selecionados a partir de menus. A
utilização de um método deste tipo resulta na informação sobre a extensão da interação de um participante
com um aspecto da interface, ou o
número de vezes que um comando
particular foi utilizado. No entanto, esta
informação necessita de interpretação.
Caso algumas partes da interface não
sejam utilizadas, ou sejam utilizadas
poucas vezes, existem 3 possíveis
explicações para isto. Primeiro, pode ser
que este aspecto da interface não seja
útil e por isso os participantes não
 recorreram ao mesmo. A segunda explicação apresenta-se de forma oposta à anterior, quando o aspecto da
interface é útil, mas é evitado por causa da dificuldade na sua utilização. A terceira explicação é o fato dos
participantes não saberem que tal funcionalidade existe.

2) Os métodos não-empíricos
De acordo com JORDAN (1998), alguns métodos para a avaliação de interfaces gráficas digitais não utilizam
participantes. Nestes casos, o pesquisador fornece apenas uma opinião (como perito) sobre a interface, ou
realiza algumas checagens estruturadas na mesma. Também existem as circunstâncias onde não há a
possibilidade de envolvimento dos participantes. Isto acontece quando um caráter confidencial apresenta-se
como algo relevante para a avaliação da interface, por exemplo, ou quando há dificuldade de encontrar
usuários com características apropriadas (usuários em potencial de determinado produto). Tais métodos são
conhecidos como não-empíricos.

1. Análise da tarefa (task analyses) 8.1.2.1.

Segundo JORDAN (1998), a medição da complexidade de uma tarefa é feita através do número de passos
necessários para completar a mesma. Logo, quanto menos passos, mais simples é a tarefa. O método de
análise da tarefa pode ser utilizado para o desenvolvimento de predições sobre o quanto é fácil ou difícil
desempenhar uma determinada tarefa, ou quanto esforço é necessário para chegar ao final da mesma.

Isto é possível porque, através deste método, a tarefa é

analisada como em uma série de passos separados. Vale
ressaltar que o resultado do tipo de análise da tarefa mais
simples fornece os passos físicos (apertar botões ou acionar
menus, por exemplo) que o usuário tem que desempenhar
até o final da tarefa. Entretanto, o tipo de análise da tarefa
mais complexa também demonstra os passos cognitivos
(decidir que tipos de botão devem ser apertados ou que tipos
de menus devem ser acionados, por exemplo) envolvidos ao
longo de toda a tarefa.

De acordo com SANTOS (2000), a análise da tarefa fornece

descrições detalhadas sobre como as tarefas realmente são
executadas, podendo ser usada para avaliar simulações e
protótipos durante todo o projeto da interface, assim como para avaliar interfaces que ainda estão
incompletas. Antes da análise, a tarefa é previamente definida e dividida em sub-níveis, mas a decisão mais
importante refere-se à identificação do que será observado. Vale ressaltar que os recursos mais utilizados
para a análise da tarefa são os registros com papel e caneta, o registro em áudio, o registro em vídeo e o
registro de uso (captura por computador). Geralmente, estes
recursos são utilizados em conjunto, fornecendo uma maior
fidelidade para a coleta de dados.

2. Avaliação heurística (heuristic evaluation)

8.1.2.2.
Segundo SANTOS apud MORAES, MELO e GOMMA (2005), a
expressão “heurística” foi utilizada por Jakob NIELSEN e Rolf
MOLICH no início da década de 1990, quando propuseram um
método através do qual um pequeno grupo de peritos em design
de telas (no mínimo 3 e no máximo 5) examina uma determinada
interface e procura por problemas que violem alguns princípios gerais de projeto. Pede-se que estes peritos
avaliem a interface isoladamente, evitando que os achados de um sejam influenciados pelos de outro
indivíduo. Posteriormente, comparam-se os resultados. Vale ressaltar que este método pode ser aplicado em
qualquer estágio do desenvolvimento da interface, desde a prototipagem até mesmo após a implementação.
A avaliação heurística também estabelece o nível de gravidade dos problemas encontrados, fator importante
para que, após a avaliação, se possa saber que atitude tomar:

 Nível de gravidade 0:
não é encarado necessariamente como um problema de usabilidade;
 Nível de gravidade 1:
problema estético. Não necessita ser corrigido, a menos que haja tempo disponível;
 Nível de gravidade 2:
problema menor de usabilidade. Baixa prioridade para sua correção;
 Nível de gravidade 3:
problema maior de usabilidade. Alta prioridade para a sua correção;
 Nível de gravidade 4:
catástrofe de usabilidade, imperativo corrigi-lo o mais rápido possível.

Em uma avaliação heurística, os participantes devem percorrer a interface mais de uma vez à procura de
problemas, tendo como referência a lista dos 10 princípios heurísticos:

 1) visibilidade do status do sistema;

 2) equivalência entre o sistema e o mundo real;
 3) controle do usuário e liberdade;
 4) consistência e padrões;
 5) prevenção de erro;
 6) reconhecer ao invés de relembrar;
 7) flexibilidade e eficiência de uso;
 8) estética e design minimalista;
 9) auxílio ao usuário para reconhecer, diagnosticar e recuperar-se de erros;
 10) ajuda e documentação.

3. Avaliação de peritos (expert appraisals) 8.1.2.3.

JORDAN (1998) afirma que neste
método, a interface é avaliada através da
opinião de um perito, ou de mais de um
perito. Através da avaliação de peritos, a
gama de problemas é mais segmentada,
onde o investigador utiliza uma análise mais
aprofundada das questões de usabilidade.

A avaliação heurística também utiliza

peritos para estudar os aspectos da
usabilidade em uma interface gráfica digital.
Mas a avaliação de peritos não é semelhante
à avaliação heurística por uma série de motivos.

 Primeiro, na avaliação heurística o pesquisador reúne um grupo de 3 à 5 peritos para analisarem a

interface, enquanto na avaliação de peritos, não há um número restrito de peritos
 Segundo, na avaliação heurística os avaliadores da interface permanecem sozinhos, para a opinião
de uma pessoa não influenciar a dos demais participantes. Na avaliação de peritos, os indivíduos
podem trabalhar em conjunto.
  Uma terceira e última diferença refere-se ao fato da avaliação de peritos não apontar problemas
através de uma pontuação que segue níveis de gravidade (de 0 até 4), além de não utilizar uma
lista de princípios (princípios heurísticos) a serem confrontados com os aspectos da interface.

4. Listas de verificação de propriedades (property checklists) 8.1.2.4.

Para JORDAN (1998), as listas de verificação apresentam uma série de propriedades de projeto que, de
acordo com as teorias do design, da ergonomia e do ergodesign, asseguram que uma interface é fácil de usar.
Geralmente, as listas indicam as propriedades de
nível elevado para a usabilidade da interface, como
consistência, compatibilidade, padrões, bom retorno para
os usuários (feedback), etc. Além disso, as listas também
apresentam questões de nível menos elevado, como o
tamanho dos caracteres na tela do computador,
nomenclatura dos botões, posição de displays e
controles, entre outras propriedades. A idéia é fazer com
que o pesquisador verifique a interface avaliada e
descubra se o projeto da mesma está de acordo com as
propriedades apresentadas na lista. Caso contrário, alguns
problemas de usabilidade podem acontecer
durante a interação dos usuários com a interface.

5. Percurso cognitivo (cognitive walkthroughs) 8.1.2.5.

JORDAN (1998) afirma que o percurso cognitivo é um método de avaliação da usabilidade realizado por
peritos. Entretanto, existe uma diferença entre a avaliação de peritos, apresentada anteriormente, e o
percurso cognitivo. No primeiro método (avaliação de peritos), procura-se observar o projeto da interface e
predizer problemas de acordo com a falta de princípios de usabilidade aplicados nesta interface. Entretanto,
no segundo método (percurso cognitivo) o pesquisador tenta realizar a sua avaliação de acordo com o ponto
de vista de um usuário típico da interface. Desta forma, o investigador tenta desempenhar uma tarefa como
se fosse o próprio usuário, buscando predizer se este usuário pode enfrentar algum tipo de dificuldade
durante os vários estágios, ou passos, necessários para completar a tarefa. O julgamento do pesquisador
baseia-se totalmente nas suas suposições sobre os tipos de efeitos que a interface pode causar sobre os seus
respectivos usuários. Vale ressaltar que para este método de avaliação funcionar de maneira eficaz, deve-se
ter uma compreensão exata das características dos usuários (suas habilidades cognitivas e suas expectativas)
para quem a interface foi projetada.

De acordo com JORDAN (1998), o percurso cognitivo assemelha-se ao método de análise da tarefa (a
tarefa é analisada como em uma série de passos separados). Entretanto, no método de análise da tarefa, o
número de passos é utilizado como uma métrica para determinar a complexidade da tarefa, enquanto o
percurso cognitivo também considera a dificuldade associada em cada passo.

Para SANTOS (2000), durante o percurso cognitivo, o pesquisador trabalha em uma série de tarefas, em
busca de fontes de dificuldades. Este método consiste, basicamente, no fato do investigador “caminhar”,
passo a passo, pelas especificações do projeto da interface, procurando por erros ou inconsistências.

------------------------------------------------------------
Acessibilidade
A acessibilidade é condição fundamental para reduzir ou
solucionar dificuldades encontradas pelos indivíduos que os
impedem de usufruir um serviço ou participar de um processo.

A acessibilidade virtual é apenas uma das diversas formas de

acessibilidade e sua implementação, muitas vezes, limita-se à
programação dentro da própria mídia digital. Leitores de tela,
legendas, textos alternativos para imagens e websites
navegáveis pelo teclado são alguns exemplos da implementação
da acessibilidade em ambientes virtuais.

O acesso à informação e às tecnologias da comunicação,

incluindo a Web, foi definido como direito humano na Convenção das Nações Unidas sobre os Direitos das
Pessoas com Deficiência, bem como na Lei Brasileira de Inclusão da Pessoa com Deficiência – Lei n.º
13.146/2015.  O artigo 63 dessa Lei dispõe sobre a obrigatoriedade da acessibilidade em ambientes virtuais:

“É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial
no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações
disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente. (BRASIL,
2015)”

Segundo a W3C (World Wide Web Consortium), principal consórcio internacional desenvolvedor de padrões
para Web, quatro princípios devem ser considerados para que um conteúdo virtual seja acessível:

Perceptível: O conteúdo deve ser perceptível, ou seja, deve estar disponível em mais de

um sentido (visão, audição e/ou tato). Por exemplo, leitores de tela devem ler
corretamente o conteúdo para pessoas com baixa visão ou cegueira, e legendas e
transcrições de vídeos devem estar disponíveis para pessoas com deficiência auditiva ou
surda. (information and UI components must be perceivable - as informações e os
componentes da interface do usuário devem ser perceptíveis)

Operável: O conteúdo deve ser operável em qualquer dispositivo, de modo que todos

consigam ter acesso e interagir com o conteúdo. Por exemplo, nem todas as pessoas
utilizam o mouse para interagir com conteúdos virtuais. Pessoas com mobilidade
reduzida utilizam o teclado ou programas de reconhecimento de fala para realizar
essas ações. (UI components and navigation must be operable - Os componentes da
interface do usuário e a navegação devem ser operáveis )

Compreensível: Além de o conteúdo poder ser acessados por todos, é necessário que ele também
seja compreensível  para todos. Por exemplo, o uso de uma escrita clara e simples e de interfaces consistentes e
previsíveis é importante para garantir que todos consigam compreender o conteúdo ou utilizar um serviço.
(Information and the operation of UI must be understandable - As informações e a operação da interface do
usuário devem ser compreensíveis)

Robusto: É necessário que o conteúdo virtual seja construído de forma compatível com os dispositivos. Por
exemplo, se uma pessoa utiliza um leitor de tela, o conteúdo deve ser compatível com aquele leitor. (content can
be interpreted by a wide variety of user agents and assistive technology - o conteúdo pode ser interpretado por
uma ampla variedade de agentes de usuário e tecnologia assistiva )

Princípios do design inclusivo

Os Princípios do design inclusivo tratam basicamente de colocar as pessoas em primeiro lugar. É sobre projetar
produtos pensando em necessidades específicas de pessoas com deficiências permanentes, temporárias,
situacionais ou mutáveis de acordo com suas respectivas situações, ou seja, na verdade é projetar pensando em
todos nós.

1. Proporcionar uma experiência equivalente

Garantir que a sua interface ofereça uma experiência equivalente para todos, fazendo com que as tarefas
sejam realizadas de maneira que atendam a todas as necessidades sem prejudicar o entendimento do
conteúdo.
As pessoas sempre serão diferentes, seja pela circunstância, escolha ou contexto. Como as pessoas
utilizam diferentes abordagens e ferramentas para ler e usar interfaces, o que ela tem a oferecer para
cada usuário deve ser equiparada em valor, qualidade e eficiência.

2. Considerar a situação
As pessoas usam sua interface em diferentes situações. Certifique-se de que você está oferecendo uma
experiência equivalente para as pessoas, independentemente das circunstâncias de uso.
Imagine que seus usuários podem ser avançados, iniciantes, jovens, idosos, crianças, pessoas no trabalho
e com pouco tempo para interagir, pessoas em casa, pessoas andando na rua ou mesmo pessoas sob
algum tipo de pressão. Todas essas situações podem ter algum impacto no uso. Para usuários que
possuem algum tipo de necessidade específica, o impacto de uso pode ser ainda maior.

3. Ser consistente
Usar convenções familiares e aplicá-las de forma consistente.
Interfaces que são familiares costumam aplicar padrões bem estabelecidos. Esses padrões deve ser
utilizados consistentemente dentro da interface para reforçar seu significado e propósito. Isso deve ser
aplicado as funcionalidades, comportamentos, editoriais e apresentações. Você deve informar as mesmas
coisas da mesma maneira e as pessoas devem poder fazer as mesmas coisas da mesma maneira.

4. Dar o controle
Possibilitar que as pessoas possam interagir com o conteúdo da forma que preferirem.
Não remova ou desative a possibilidade do usuário alterar e ajustar as configurações padronizadas do
navegador ou da plataforma que usa, como orientação de tela, tamanho da fonte, zoom ou contraste.
Evite também alterações no conteúdo de forma automática, que não tenha sido provocada por uma ação
do próprio usuário, a menos que haja uma maneira de deixar o usuário no controle.

5. Oferecer escolha
As pessoas devem ter diferentes maneiras de concluírem determinadas tarefas, especialmente aquelas
que são complexas ou não são padronizadas.
Muitas vezes, há mais de uma maneira de concluir uma tarefa. Você não pode presumir qual seria o
caminho preferido de alguém. Ao fornecer alternativas para o layout e a conclusão da tarefa, você
oferece às pessoas opções adequadas às suas circunstâncias no momento.

6. Priorizar o conteúdo
Ajude as pessoas a se concentrarem nas principais tarefas, funções, recursos e informações, priorizando-
as no conteúdo e layout.
 Interfaces podem ser difíceis de se compreender quando os principais recursos não são claramente
expostos e priorizados. Um site ou aplicativo pode fornecer muitas informações e funcionalidades, mas as
pessoas devem poder se concentrar em uma coisa por vez. Identifique o propósito central da interface e
em seguida, destaque o conteúdo e as funções necessárias para se cumprir esse propósito.

7. Adicionar valor
Considere a importância dos recursos e entregas e como eles melhoram a experiência para diferentes
usuários.
Os recursos devem agregar valor à experiência do usuário, oferecendo maneiras eficientes e
diversificadas de localizar e interagir com o conteúdo. Considere os recursos do dispositivo, como API's de
voz, geolocalização, câmera e vibração, e como a integração com dispositivos conectados ou com uma
segunda tela pode fornecer opções.

Introdução à ARIA para acessibilidade na Web

Acessibilidade Web é um tópico que, apesar de muitíssimo importante, apresenta uma imensa carência de
aplicação prática.

WAI-ARIA (Accessible Rich Internet Applications ou ARIA) é uma especificação do W3C para aprimorar

a acessibilidade (a11y) de maneiras que a HTML puro não consegue.

Quando usado corretamente, ARIA pode:

 Melhorar a acessibilidade de controles interativos, como menus,

sliders, pop-ups etc.;
 Definir pontos de referência úteis (landmarks) para a estrutura da
página;
 Definir “regiões ativas” (live regions) atualizadas dinamicamente;
 Melhorar a acessibilidade e interatividade do teclado;
 E muito mais.

A HTML possui um “vocabulário” (conjunto de tags e atributos) definido, e

que evolui com o tempo. ARIA fornece novos atributos e valores de código que expandem o vocabulário e a
semântica da HTML para facilitar e aprimorar a acessibilidade na Web.

A sigla ARIA significa "Accessibility for Rich Internet Applications" e é uma especificação da Web

Accessibility Iniciative publicada pela W3C. Tal como o nome indica, é um conjunto de
especificações para tornar mais acessíveis os websites e web-apps com interações mais
avançadas, como por exemplo o uso de AJAX e janelas modais.

Num website normal em que o conteúdo é estático, o acesso à informação é feito normalmente
começando a leitura no topo da página e percorrendo toda a informação até ao final da página.

Num website mais avançado ou numa web-app, por vezes são usadas tecnologias que fazem com
que apareça informação na página sem que a mesma seja carregada. Em termos de acessibilidade,
por exemplo para uma pessoa invisual, torna-se complicado perceber que abriu uma janela modal
ou que apareceu uma mensagem de sucesso ou de erro inline no meio da página.
Para tal, foram definidas as especificações ARIA, de modo a adicionar algum significado semântico
a estes elementos, bem como a dar-lhes foco no interface quando eles aparecem na página. Por
exemplo, um utilizador que esteja a navegar com um screen-reader pode receber avisos do
aparecimento de janelas modais ou de mensagens importantes na página, podendo assim executar
ações sobre elas.

Componentes ARIA

Os 3 principais Componentes ARIA são 

1) roles (funções/papéis), 
2) properties (propriedades) e 
3) states (estados).

Roles, States e Properties ARIA podem ser definidas na marcação, diretamente, ou podem ser dinamicamente
definidas e/ou alteradas usando scripts.

Os Estados e Atributos ARIA sempre começam com “aria-“, por exemplo,  aria-required="true".

1) roles (funções/papéis)
As especificações ARIA introduziram o atributo role que permite definir o papel que alguns elementos
desempenham na página. Por exemplo, permite definir o que faz um determinado widget (ex: um slider),
ou definir a estrutura de um elemento numa página (ex: a zona da navegação principal ou a pesquisa).
O problema é que no HTML, cada elemento já tem um papel pré-definido, e apesar de haver elementos
cuja semântica é acessível à partida (ex: um cabeçalho é o título de um conteúdo) há outros elementos
cujo papel na página não corresponde àquilo que se pode fazer com eles usando JavaScript, como por
exemplo usar uma imagem como controlo de um slider. Neste caso, o papel da imagem
(elemento <img>) terá de deixarde ser simplesmente uma imagem e passar a comportar-se como o
controlador de um slider.
É aqui que entra o atributo role que permite dar um outro significado aos elementos HTML em que é
aplicado.

1) Papéis de Marcação (Landmark roles)

O atributo role pode ser usado em qualquer elemento de HTML. Pode também ser usado para
definir a estrutura do elemento na página, ou para definir um funcionamento.
A forma mais simples de usar o role é definindo áreas no site que identifiquem determinado tipo de
secções. São os chamados "landmark roles" e servem para, por exemplo, identificar as zonas da
navegação, da pesquisa ou do conteúdo principal, entre outras.

<div id="header" role="banner">...

<div id="menu" role="navigation">...
<form id="pesquisa" role="search">...
<div id="conteudos" role="main">...
Em HTML5, alguns elementos não precisam que lhes seja definido um  role específico, pois a própria
tag já tem essa informação. No entanto, não há problema nenhum em adicionar o atributo criando
redundância:

<!-- Algumas tags de HTML5 já incluem a informação semântica do "role" -->

<header> = <header role="banner">...
<nav> = <nav role="navigation">...
2) Estrutura de document (document structure)

Muito parecidos com os "landmark roles" existem ainda os "roles" de  estrutura do documento.
Estes descrevem a estrutura de organização da informação na página, como por exemplo os artigos,
listagens, imagens, etc. A maior parte das tags de HTML5 já incluem esta informação, mas podem ser
úteis em determinadas situações.

<div id="artigo" role="article"> = <article>...

<ul role="list"> = <ul>...

3) Papéis de Widget (widget roles)

Finalmente, existem os widget roles, que dão significado a ações que podem ser executadas pelos
elementos de HTML aos quais são atribuídos esses "roles". Por exemplo, permite identificar
mensagens de alerta, janelas modais, barras de progresso, etc...

Alguns exemplos:

<!-- Mensagem de erro/aviso/sucesso -->

<div class="erro" role="alert">Conteúdo da mensagem</div>
<!-- Janela modal -->
<div class="modal" role="dialog"> ... </div>
<!-- Janela modal com mensagem de aviso/erro -->
<div class="modal" role="alertdialog"> ... </div>
<!-- Tooltip -->
<div class="tooltip" role="tooltip"> ... </div>

Os papéis da aplicação são separados da seguinte forma:

4) Papéis abstratos (Abstract role)
5) Papéis de Widget (widget roles)
6) Estrutura de document (document structure)
7) Papéis de Marcação (Landmark roles)
8) Papéis de regiões ativas (Live region roles)
9) Papéis de Janela (Window roles)

2) properties (propriedades) e 
3) states (estados).

ARIA States & Properties

Alguns "roles" necessitam de informação adicional para se comportarem corretamente conforme o papel que
lhes damos.

Por exemplo, no caso de uma imagem ser usada como controlo de um slider, podemos adicionar o
atributo role="slider" para indicar que o comportamento deste elemento passa a ser um slider. Mas para
que a imagem se possa comportar verdadeiramente como um slider, temos de adicionar algumas propriedades
adicionais como o valor mínimo, valor máximo, e o valor e nome que estão selecionados por omissão:
!-- Usar uma imagem como um slider para escolher um dia da semana -->
<img src="..."
role="slider"
aria-valuemin="1"
aria-valuemax="7"
aria-valuenow="1"
aria-valuetext="segunda-feira"
/>
Outro exemplo será o de uma barra de progresso, em que além de indicarmos que um determinado elemento se
deve comportar como uma barra de progresso, temos também de lhe adicionar as propriedades que permitem
que esse elemento se possa comportar como o pretendido:

<!-- Barra de progresso a 50% -->

<div class="progressbar"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100%"
aria-valuenow="50%"
/>
Cada "role" pode ter várias propriedades diferentes. Recomendamos a consulta detalhada de cada um para
perceber quais as propriedades obrigatórias e as opcionais que se podem usar.

Atributos aria-*

A inclusão de propriedades nos elementos de HTML é sempre feita através de atributos  aria-. Isto permite
adicionar contexto e semântica a todos os elementos de HTML, mesmo sem lhes definir um "role". Por exemplo,
podemos usar estes atributos para definir os campos de preenchimento obrigatório de um formulário; as zonas
que permitem fazer "drag&drop"; ou se estamos a ver uma lista com itens expandidos ou colapsados; entre
outros.

Alguns exemplos de aplicação:

<!-- Campo de preenchimento obrigatório -->

<form>
<label for="email">Endereço de E-Mail</label>
<input id="email" type="email" aria-required="true" required />
</form>
<!-- Tabs em que cada link no topo abre uma tab de conteúdos em baixo -->
<ul class=”tablist” role=”tablist”>
<li id=”tab1″ class=”tab” aria-controls=”panel1″ role=”tab”>Frutas</li>
<li id=”tab2″ class=”tab” aria-controls=”panel2″ role=”tab”>Vegetais</li>
</ul>
------------------------------------------------------------

Design Sprint
O nome "Design Sprint" combina duas palavras em inglês que
dizem bastante sobre como o método funciona: design
(relacionada à projeto, construção, desenho) e sprint
(relacionada à velocidade). 

O Sprint foi concebido e é usado no google para testar e aplicar

novas ideias em apenas cinco dias.

O método foi desenvolvido pelo designer Jake Knapp durante sua

carreira no Google.

Atualmente diversas startups e empresas no mundo todo vem utilizando o sprint para aperfeiçoar seus produtos
e serviços de forma incrivelmente rápida e contínua.

O design sprint é útil para equipe de todos os tamanhos, de pequenas a grandes empresas, podendo ser aplicado
para qualquer pessoa que tenha uma ideia, problema ou oportunidade para trabalhar.

Em suma, ele é baseado em 4 leis:

 Não precisamos desenvolver para aprender com o usuário.

 É possível ter um menor custo e tempo de desenvolvimento.
 Precisa ser focado no usuário.
 Construção colaborativa de uma solução.

As 5 Fases Do Design Sprint

A metodologia foi desenvolvida para testar e aplicar novas ideias em apenas cinco dias, então, não por
coincidência as 5 fases devem ser realizadas cada uma em um dia da semana.
 o 1ª Fase: Mapear

Faça uma imersão do seu público-alvo, requisitos técnicos, análise de mercado, jornada de consumo dos
usuários e mapeie tudo.

O foco aqui é entender seus usuários e sua experiência por completo.

Segunda-feira: entendimento e definição

O dia 1 da metodologia começa com a equipe envolvida no projeto fazendo uma imersão. Aqui, todos entram
em contato com o projeto, entendem as definições e objetivos e externam o que sabem e pensam sobre o objeto
pretendido (discutir como será o produto final).

Essa etapa é caracterizada por muita troca, principalmente entre perfis diferentes de profissionais envolvidos,
já que o conhecimento e ponto de vista de um designer provavelmente vai ser diferente do gerente de produto,
que por sua vez também terá análises e insights diferentes de um desenvolvedor de software, por exemplo.

o 2ª Fase: Faça esboços

Uma vez que tiver toda a experiência mapeada pelo passo anterior é hora de analisar.

Entenda os pontos focais de atuação e explore o quanto for possível de oportunidades de melhoria. E faça seus
esboços – eles precisam ser auto-explicativos.

Quanto mais ideias tiver nessa fase, melhor!

Não se esqueça de focar sempre no usuário, o sprint é para ele e não para você.

Terça-feira: divergência

Explorar as ideias: é para isso que o tempo do dia 2 da metodologia se dedica. 

Como parte da proposta da metodologia de Design Sprint, que acredita que as melhores ideias e soluções
aparecem individualmente, cada membro da equipe vai focar no tipo de trabalho que sabe desenvolver melhor
de acordo com as suas experiências e expertises, atuando dentro da parte que lhe compete.

Depois, as ideias são apresentadas e discutidas com todo o grupo. Aquelas que melhor se encaixarem na
proposta do produto são discutidas e alinhadas. 

o 3ª Fase: Decida

Reúna todas as ideias num quadro e faça uma votação com o seu time.

Cada pessoa do time terá direito a dois votos – se empatar, o decisor do sprint desempata.

Escolha a ideia vencedora e parta para a próxima fase.

Quarta-feira: decisões

Selecionam-se as ideias e projeções do projeto em será investido tempo a partir de agora.

Na fase três, as escolhas são feitas, e detalhes como os storyboards e mapas de jornada do usuário são
desenhados. É hora de tomar todas as decisões para que seja possível transformar as ideias em um projeto
protótipo que possa ser testado

o 4ª Fase: Protótipo
Bora dar vida a possível solução?

Agora é hora de fazer um protótipo rápido da ideia escolhida.

Pense como exemplo que a ideia escolhida foi desenvolver um aplicativo ou website: você não precisa programar
um app de fato para validar se vai funcionar, você só precisa de um protótipo.

Significa que uma versão visual próxima do resultado final será o suficiente para prosseguirmos para a próxima
fase.

Quinta-feira: prototipagem

A penúltima etapa é a etapa da mão na massa. No início do dia devem ser definidas as atribuições,
responsabilidades e prazos. Aqui, a produtividade dos profissionais envolvidos na equipe é exigida no seu nível
máximo para que as soluções sejam de fato criadas. 

Uma parte da equipe fica responsável pelo desenvolvimento do protótipo e outra parte fica responsável por criar
os roteiros e testes que serão realizados na última fase. É preciso contar com profissionais para todos os
componentes do projeto em questão, com pelo menos uma pessoa em cada função: designer, writer, asset
collector (quem garante que tudo o que está sendo produzido está disponível para o próximo passo), stitcher
(responsável por unir todas as peças do quebra-cabeças) e interviewer (quem prepara os testes, entrevistas e
demonstrações do produto).

No começo do dia, cada profissional deve trabalhar individualmente, altamente focado na sua responsabilidade e,
depois, de acordo com as características de cada projeto e equipe, as partes vão se somando para criar a versão
completa. Até o fim do dia de trabalho o protótipo básico testável e de alta fidelidade do produto precisa estar
pronto e para ser testado.

o 5ª Fase: Teste e Aprenda

A hora da verdade.

Nesta etapa nos vamos validar o protótipo por meio de testes com os usuários ou potenciais usuários e
compreender a aderência da solução encontrada.

A dica aqui é validar com usuários reais, ou pessoas com o perfil ideal para o seu produto.

Preste muita atenção na validação para aprender com os erros e ter novos insights de melhorias.

Sexta-feira: validações

A última etapa do processo de Design Sprint é a fase de testes para validação do que foi desenvolvido durante
toda a semana. Aqui também deve ser realizada o registro das conclusões do processo e dos testes.

A equipe responsável pelo desenvolvimento do protótipo faz a apresentação do produto e a equipe que tinha
ficado responsável pelo desenvolvimento dos testes começa a aplicá-los com usuários potenciais.

Ao final dos cinco dias de trabalho é possível contar com uma versão protótipo do produto, já testado por
usuários e que dará todos os direcionais necessários para a continuidade do projeto. Essa etapa garante que a
solução seja colocada em prática, possibilita a interação do usuário com o produto, além da geração de dúvidas,
feedbacks e possibilidade de enxergar pontos de melhoria. 

É claro que o trabalho não acaba por aí! A primeira semana é só o começo da criação de um novo projeto. A
virada de chave também é muito importante. Se nos dias de Design Sprint a equipe trabalha em velocidade
máxima, no desenvolvimento posterior com base em tudo que foi levantado até aqui, o ritmo deve diminuir. São
fases diferentes e que exigem mentalidades diferentes também.
Observação:

Vale lembrar que a metodologia não é orientada para o brainstorm. Então, se essa é uma prática comum para a
sua equipe, ela pode ter uma resistência ou dificuldade com o novo modelo. Converse com a equipe sobre esse
tipo de mudança

Quais as vantagens em utilizar essa metodologia?

o Ganho de tempo
Com a metodologia ágil proposta para o desenvolvimento de software e a divisão das etapas em dia da
semana, cria-se um senso de urgência e o desenvolvimento rápido do protótipo tem prazo para acontecer. 
o Baixa complexidade
Apesar de ser uma técnica com regras, etapas e prazos bem definidos, o Design Sprint é uma metodologia
simples e que pode ser realizada por qualquer time, para diferentes tipos de projetos.
o Prevenção de falhas
Com a prototipagem do projeto e testes realizados ainda nessa primeira fase, as chances de erro no
posterior desenvolvimento são diminuídas.
o Antecipação de melhorias
Um ponto que auxilia na antecipação é a testagem do protótipo já por usuários em potencial, o que traz
muitas respostas para o time responsável por dar sequência ao projeto até a entrega do mesmo.

------------------------------------------------------------
Design Thinking

É uma abordagem, um pensamento do Design

centrada no ser humano (usuário). Não é uma
metodologia com passo-a-passo a ser seguido. Essa
abordagem leva em conta questões do usuário
(desejabilidade), questões de negócio - da empresa,
do produto – (Viabilidade) e questões tecnológicas
(tecnicamente possível dentro do projeto). No meio
destas 3 coisas é que o Design Thinking irá trabalhar.

O design Thinking é baseado em 3 pilares

fundamentais:

Empatia, Colaboração e Experimentação.

A empatia é procurar entender o problema do outro sem pré-julgamento, se livrando de preconceitos, emergindo

Colaboração um mesmo fato pode ter interpretações e visões, aspectos, óticas diferentes de diferentes pessoas.
Instiga que profissionais de diferentes áreas colaborem com seus pontos de vista.

Experimentação “nada sobrevive ao campo de batalha”. Não tem como saber se um projeto vai dar certo sem
testes.

5 etapas fundamentais do Design Thinking:

Entendimento/Observação > Definição > Ideação > prototipação > teste
(lembrando que não é um passo a passo, não é taxativo, pois o design thinking é aberto, podem exitir mais etapas
ou menos dependendo do projeto).

1) Entendimento/Observação >
Aqui entra a questão da empatia, da imersão do problema, procurando entender todos os aspectos que
envolvem o problema. Pode-se utilizar ferramentas como pesquisas de campo, conversação, pequenos
testes, mapa de empatia...
2) Definição >
Todas as informações colhidas na etapa anterior te ajudarão a definir o problema. Criar um Norte de
direcionamento para resolver o problema.
3) Ideação >
Definir soluções para resolver o problema, existem várias ferramentas de auxílio nesta parte, por exemplo
o brainstorm, mas a idéia aqui é trazer o máximo de idéias para juntar e definira a melhor proposta de
solução
4) prototipação >
A fase de colocar a mão na massa. Criar algo para que possa ser testado posteriormente. Existem várias
ferramentas para esta etapa, uma das mais recomendadas é o MDP
5) testes
Teste em campo, com alguém que realmente irá usar o produto (desgin não vale pois já cria vícios e
mesmo que vá usar o produto, não é valido para teste). Uma questão importante nesta etapa é o Feedback
dos usuários, pois a intenção é melhorar o produto.
Em algumas outras menções pode haver um 6 passo que é a iteração (que é exatamente a fase de colher
feedbacks e melhorar o produto)

--------------------------------------------------------------------------------------------------------------------------------

Outras menções:

O Design Thinking pode ser usado para outras áreas além do design, sempre onde há necessidade de se encontrar
e solucionar um problema para seus usuários.

O processo de aplicação do Design Thinking possui

uma estrutura representada em um fluxo geral que
consiste em:

1. Compreender;
2. Explorar;
3. Materializar.

Ao detalhar esse fluxo, temos as 6 fases do Design

Thinking que são:

 Empatizar;
 Definir;
 Idealizar;
 Prototipar;
 Testar;
 Implementar.

 Empatizar
Empatia pode ser entendida como a capacidade de se colocar no lugar de outra pessoa. Pensando nisso,
nessa etapa do fluxo, a equipe deve promover pesquisas que visam conhecer melhor os usuários, levando
em consideração o que eles:
o pensam;
o fazem;
o sentem;
o esperam do seu produto e quais os problemas que desejam resolver.
Como exemplo, pense numa situação em que o objetivo é melhorar uma experiência de integração para
novos usuários. Nessa fase, é interessante conversar com diversos usuários reais e observar diretamente o
que eles fazem, como pensam e o que querem.
Preocupe se em responder perguntas como:
o qual a motivação ou aflição dos usuários?
o qual o momento em que o usuário se sente frustrado?
Nessa etapa, o objetivo é reunir informações suficientes para que você possa realmente empatizar-se com
seus usuários e suas perspectivas. E a melhor forma de fazer isso é colocar-se no lugar deles.
Uma das metodologias usada em UX Design para conhecer os usuários de um produto e suas necessidades
é o desenho das personas.

 Definir
Essa etapa é necessária para identificar quais são os reais problemas dos usuários. Na fase de definição,
utilize os dados reunidos na fase de empatia para obter informações e traçar pontos em comum da user
experience.
o Há algum ponto de dor comum entre muitos usuários diferentes?
A partir desse questionamento é possível identificar as necessidades dos usuários não atendidas. Com isso,
comece a buscar possibilidades de otimização e inovação.

 Idealizar
Nessa fase, é muito importante realizar uma integração geral dos times dentro da empresa.
Portanto, junte o máximo de pessoas possível e pensem em ideias e soluções diferentes para resolver o
problema identificado.
O ideal é convocar pessoas de diferentes áreas e perfis para diversificar as ideias.
Faça um brainstorming de ideias criativas que abordam as necessidades não atendidas dos usuários
identificadas na fase de definição. Por isso, é importante que os integrantes se sintam com liberdade para
expressar e dar opiniões. Qualquer ideia pode ser muito valiosa nesse momento.

 Prototipar
Após reunir diversas ideias, chegou a hora de averiguar a aplicação delas.
Nesse sentido, crie representações reais para um subconjunto de ideias, ou seja, um protótipo. O objetivo
dessa fase é entender quais componentes das ideias funcionam e quais não funcionam.
Nessa fase, deve-se analisar o impacto versus a viabilidade das soluções apresentadas em forma de
feedback sobre seus protótipos.
Como aplicar isso? Se for uma nova landing page, desenhe um wireframe e peça um feedback da sua
equipe. Realize as alterações cabíveis e peça a opinião para outro grupo de pessoas.

 Testar
Após todas essas etapas, mudanças e insights, refaça o teste de usabilidade no seus usuários para obter
feedbacks.
Na hora de observar é necessário analisar se a solução:
o atendeu as reais necessidades dos usuários?
o o modo como eles se sentem, pensam e realizam suas tarefas melhorou?
 Leve em consideração questões além da resolução do problema em si, como o tempo de interação, a
facilidade de navegação do usuário e a acessibilidade.
Nessa fase, seu protótipo já estará pronto para exibir ao cliente final, mas durante o desenvolvimento do
projeto, continue realizando teste para sempre aprimorar o produto.

 Implementar
A parte de implementação é para materializar todo trabalho de criação que a equipe teve até agora.
A inovação só vem se a visão for executada.
Implementar é crucial. É importante também notar que o Design Thinking não exclui o trabalho prático do
Design. Como disse Milton Glaser:
“Não há algo como um tipo criativo. Como se criatividade fosse um verbo, um verbo que consome muito
tempo. É sobre pegar uma ideia que está na sua cabeça e transformá-la em algo real. E isso sempre será
um processo longo e difícil. Se você estiver fazendo certo, vai parecer um trabalho.” — Milton Glaser

O sucesso do Design Thinking reside na sua capacidade de transformar um aspecto da vida do usuário final.

A base do Design Thinking é sobre realizar ações e fazer as perguntas certas; é sobre mudanças simples de

mentalidade ou formas de realizar perguntas de maneira diferente — uma nova maneira de olhar para os
problemas.

--------------------------------------------------------------------------------------------------------------------------------

Outras menções:

O Design Thinking é um processo de design iterativo utilizando pela maioria das grandes empresas, no qual
procuramos entender o usuário, desafiar suposições e redefinir problemas na tentativa de identificar estratégias e
soluções alternativas.

É uma maneira de pensar e trabalhar, bem como uma coleção de métodos práticos, divididos em 5 etapas:
Empatizar, Definir, Idealizar, Prototipar e Testar. Essas etapas podem ser alternados, conduzidos simultaneamente
e repetidos várias vezes para chegar nas melhores soluções.

O Design Thinking é frequentemente referido como “fora da caixa”, pois os designers estão tentando desenvolver
novas formas de pensar que não respeitam os métodos dominantes ou mais comuns de solução de problemas.

Um elemento do pensamento fora da caixa é questionar suposições anteriores – isto é, tornar possível provar se
são válidas ou não. Depois de questionarmos e investigarmos as condições de um problema, o processo de geração
de soluções nos ajudará a produzir ideias que refletem as restrições e facetas genuínas desse problema específico.

Ao contrário de uma abordagem exclusivamente científica, na qual a maioria das qualidades, características, etc.
conhecidas do problema são testadas para chegar a uma solução do problema, as investigações do Design Thinking
incluem elementos ambíguos do problema para revelar parâmetros previamente desconhecidos e descobrir
estratégias alternativas.

Depois de chegar a uma série de possíveis soluções de problemas, o processo de seleção é sustentado pela
racionalidade: os designers são incentivados a analisar e falsificar essas soluções de problemas, para que possam
chegar à melhor opção disponível para cada problema ou obstáculo identificado durante cada fase do processo de
design.

As 5 etapas do Design Thinking:

 Etapa 1: Empatizar
 O primeiro estágio do processo de Design Thinking envolve o desenvolvimento de um senso de empatia
com as pessoas para as quais você está projetando.
Devemos tentar nos imaginar no ambiente desses usuários, ou “nos colocar no lugar deles”, a fim de
obter uma compreensão mais profunda de suas situações.
A empatia com os usuários é um componente essencial do processo; ignorar os benefícios de aprender
com os outros é esquecer o que realmente é o Design Thinking.
Existem várias metodos à nossa disposição para nos permitir criar empatia com nossos usuários.
 Assumindo a Mentalidade de um Iniciante: como designers, devemos sempre fazer o possível
para deixar nossas próprias suposições e experiências para trás ao fazer observações.
Nossas experiências de vida criam suposições dentro de nós, que usamos para explicar e
entender o mundo ao nosso redor. No entanto, esse mesmo processo afeta nossa capacidade
de simpatizar de maneira real com as pessoas que observamos.
Como deixar completamente de lado nossas suposições é impossível, por isso devemos
constantemente e conscientemente nos lembrar de assumir a mentalidade de um iniciante. É
útil que você sempre se lembre de nunca julgar o que observa, mas de questionar tudo –
mesmo que você pense que sabe a resposta – e realmente ouvir o que os outros estão dizendo.

 Perguntar “O quê? Quão? Por quê?”: Ao fazer as três perguntas – O quê? Quão? Por quê? –
podemos passar de observações concretas, livres de premissas, para motivações mais
abstratas, direcionando as ações que observamos. Por exemplo: Durante nossas observações,
podemos encontrar separadamente o registro de “O que”, “Como” e “Por que” da observação
única de uma pessoa.
 “O que”: registramos os detalhes (não suposições) do que aconteceu.
 “Como”: analisamos como a pessoa está fazendo o que está fazendo (está fazendo
muito esforço? Essa pessoa está sorrindo ou franzindo a testa?).
 “Por que”: fazemos suposições educadas sobre as motivações e emoções da pessoa.
Essas motivações, podemos testar com os usuários.

 Estudos Baseados em Fotos e Vídeos dos Usuários

Fotografar ou gravar usuários-alvo, pode ajudá-lo a descobrir as necessidades que as pessoas
têm das quais podem ou não estar cientes. Ele pode ajudar a orientar seus esforços de
inovação, identificar os usuários finais certos para os quais projetar e descobrir emoções que
orientam os comportamentos.
Nos estudos com câmeras, os usuários são fotografados ou filmados:
 em um ambiente natural;
 durante as sessões com a equipe de design ou consultores que você contratou
para coletar informações.
Como fazer:
1. Identifique um grupo de pessoas que possuem certas características que são
representativas do seu público-alvo.
2. Você os grava enquanto eles estão enfrentando o problema que pretende solucionar.
3. Posteriormente, adicione as coisas que as pessoas disseram, sentimentos que foram
evocados e comportamentos que você identificou.
4. Compartilhe o resultado com o resto da sua equipe.

 Anotações Pessoais dos Usuários

Nesse método, você entrega a câmera aos usuários e fornece instruções, nomeadamente para
tirar fotos ou gravar em vídeo suas atividades durante um período especificado. A vantagem é
que você não interfere ou perturba os usuários com sua presença pessoal, mesmo que eles se
adaptem e alterem um pouco o comportamento normal, pois sabem que você assistirá ao
vídeo ou verá o diário fotográfico mais tarde.
 De maneira semelhante ao uso de personas, ao envolver pessoas reais, obtemos inestimáveis
experiências e histórias pessoais que mantêm em mente o aspecto humano do design durante
todo o processo.
Como fazer:
1. Identifique um grupo de pessoas que possuem certas características que são
representativas do seu público-alvo.
2. Entregue cameras ou cadernetas para que eles gravem seu dia a dia utilizandoo serviço.
3. Reuna as gravacões e compartilhe com sua equipe.

 Entrevistas com Usuários

As entrevistas individuais podem ser uma maneira produtiva de se conectar com pessoas reais
e obter insights. Conversar diretamente com as pessoas para quem você está projetando pode
ser a melhor maneira de entender necessidades, esperanças, desejos e metas.
Os benefícios são semelhantes aos estudos baseados em vídeo e câmera, mas as entrevistas
geralmente são estruturadas, e os entrevistadores geralmente têm um conjunto de perguntas
que desejam fazer aos entrevistados.
Por isso, as entrevistas oferecem a intimidade pessoal e a franqueza de outros métodos de
observação, enquanto permitem à equipe de design direcionar áreas específicas de informação
para direcionar o processo.
Como fazer:
1. Reuna membros da equipe para fazer um brainstorm e gerar perguntas que serão
perguntadas aos usuários
2. Crie temas ou tópicos em torno das perguntas da entrevista, para que possam fluir sem
problemas de um para outro.
3. Identifique um grupo de pessoas que possuem certas características que são
representativas do seu público-alvo.
4. Você pode fazer as perguntas com mais de um individuo ou um por vez (eu recomendo
um por vez).
5. Grave e anote as entrevistas para compartilhar com sua equipe.

 Analise os “Usuários Extremos”

O perfil extremo foca mais em comportamento e menos em poder aquisitivo, portanto, um
exemplo de perfil extremo seria um apaixonado por cinema, que até vai fantasiado com seu
personagem favorito no dia da
estreia, e uma pessoa que não gosta de
cinema de forma alguma. O perfil extremo é
útil para sabermos os limites do nosso
público, e eles são normalmente os
primeiros a serem convidados para
Entrevistas de Profundidade.
Se você conseguir agradar um usuário extremo, certamente vai manter o usuário básico feliz.
Por outro lado, é importante observar que o objetivo de se envolver com usuários extremos
não é desenvolver soluções para esses usuários, mas peneirar problemas que os usuários
comuns podem ter problemas para expressar.

A média não atende ninguém: foque nos extremos!

Existe um caso que ocorreu na aeronáutica dos EUA, narrado por Martin Lindstrom, em seu livro Small Data:

Os pilotos estavam reclamando sobre dor nas costas. E isso precisava de uma solução. Para tal, a aeronáutica
mediu 20 mil pessoas e chegou a uma média. E então, para fazer esse cockpit, definir a altura, largura, distância,
etc, foi utilizada a média das medidas dessas 20 mil pessoas.
Resultado: NENHUMA das 20 mil pessoas gostou. 

Isso acontece pois a média não atende ninguém. E esse é um dos princípios do Design Thinking: foque sempre
nos extremos para entender o público, os desejos, problemas e soluções.

Por exemplo: se eu sou proprietário de uma academia e quero fazer com que mais pessoas a frequentem, eu
preciso analisar somente quem VAI SEMPRE na academia ou que NÃO VAI DE JEITO ALGUM na academia. 

Assim consigo ter observações comportamentais, objeções, práticas e desejos mais assertivos para que eu possa
pensar em soluções.

 Empatia Análoga
O uso de analogias pode ajudar a equipe de design a desenvolver novos insights. Ao comparar
um domínio com outro, é possivel conjurar soluções diferentes que não necessariamente
viriam à mente ao trabalhar dentro das restrições de uma disciplina.
Exemplo: o procedimento altamente estressante e sensível ao tempo de operar um paciente
em uma sala de emergência de um hospital pode ser análogo ao processo de reabastecimento
e substituição dos pneus de um carro de corrida em um pit stop.
Como fazer:
1. Selecione várias soluções de outros dominios. Exemplo: se seu problema é um trabalho
de equipe, selecionar dominios onde o trabalho de equipe também seja importante.
2. Comparar seu problema e outro em um campo diferente;
3. Crie um ‘painel de inspiração’ com anotações e imagens e foque em aspectos
semelhantes entre várias áreas.

 Compartilhar Histórias
Cada pessoa em uma equipe de design coletará informações diferentes, terá pensamentos
diferentes e apresentará soluções diferentes. Por esse motivo, você deve compartilhar as
melhores historias que encontrou para coletar todas as pesquisas dos membros da equipe, de
estudos de campo, entrevistas etc.
Ao compartilhar as histórias que cada membro observou, a equipe pode acelerar o progresso,
desenhar significado das histórias e capturar detalhes interessantes do exercicio de observação.
“As pessoas pensam que as histórias são moldadas por pessoas. Na verdade, os produtos são
moldados pelas histórias que as pessoas contam sobre eles.” (Terry Pratchett)

 Bodystorm
Definição: Bodystorming é o ato de experimentar fisicamente uma situação, a fim de mergulhar
completamente no ambiente dos usuários. Isso requer uma quantidade considerável de
planejamento e esforço, pois o ambiente deve ser preenchido com os artefatos presentes no
ambiente do mundo real e a atmosfera / sensação geral deve representar com precisão as
configurações dos usuários.
O bodystorming coloca a equipe no lugar dos usuários, aumentando assim os sentimentos de
empatia, a fim de encontrar as soluções mais adequadas. Ter essa experiência da ‘vida real’
servirá como ponto de referência para mais adiante no processo, permitindo que paremos e
nos perguntemos: “Lembra quando tentamos ser o usuário? Como essa coisa nova se
encaixaria nisso?

 Etapa 2: Definir
Uma parte integrante do processo de Design Thinking é a definição de uma declaração de problema
significativa e acionável, na qual o designer concentrará na solução. Essa talvez seja a parte mais
desafiadora do processo de Design Thinking, pois a definição de um problema exigirá que você sintetize
suas observações sobre seus usuários desde o primeiro estágio do processo.
Uma ótima declaração de problema orientará o trabalho de você e de sua equipe e iniciará o fase
“Idealizar” na direção certa – trazendo clareza e foco ao processo de design.
Mas antes de abordarmos o que faz um grande problema, é útil primeiro entender a relação entre
análise e síntese pela qual muitos pensadores de design passarão em seus projetos.
A análise consiste em dividir conceitos e problemas complexos em componentes menores e mais fáceis
de entender. Fazemos isso, por exemplo, durante a primeira etapa do processo de Design Thinking, a
etapa “Empatizar”, quando observamos e documentamos detalhes relacionados aos nossos usuários.
A síntese, por outro lado, envolve reunir de forma criativa o quebra-cabeça para formar idéias inteiras.
Isso acontece durante o estágio “Definir”, quando organizamos, interpretamos e entendemos os dados
que reunimos para criar uma declaração de problema.
Embora a análise ocorra durante o estágio “Empatizar” e a síntese ocorra durante o estágio “Definir”,
elas não acontecem apenas nesses estágios – a análise e a síntese geralmente acontecem
consecutivamente em todas as etapas do processo.
Os designers geralmente analisam uma situação antes de sintetizar novos insights e depois analisam
suas descobertas sintetizadas mais uma vez para criar sínteses mais detalhadas.
Uma boa declaração do problema deve ter as seguintes características:
 Centrado no ser humano. Isso requer que você enquadre sua declaração de problema de
acordo com usuários específicos, suas necessidades e os conhecimentos adquiridos por sua
equipe na fase “Empatizar”. A declaração do problema deve ser sobre as pessoas que a equipe
está tentando ajudar, em vez de focar na tecnologia, retornos monetários ou especificações do
produto.
 Amplo o suficiente para liberdade criativa. Isso significa que a declaração do problema não
deve se concentrar (muito) em um método específico referente à implementação da solução. A
declaração do problema também não deve listar os requisitos técnicos, pois isso restringiria
desnecessariamente a equipe e os impediria de explorar áreas que poderiam trazer valor e
percepção inesperados ao projeto.
 Estreito o suficiente para torná-lo administrável. Por outro lado, uma declaração de problema
como “Melhore a condição humana” é muito ampla e provavelmente fará com que os
membros da equipe se sintam facilmente assustados. As declarações de problemas devem ter
restrições suficientes para tornar o projeto gerenciável.
Métodos mais conhecidos para você fazer uma declaração de problema:
 Agrupamento por Afinidade
No Agrupamento por Afinidade os designers agrupam suas observações e descobertas em um
único local, para criar uma colagem de experiências, pensamentos, insights e histórias. Dessa
forma é possível estabelecer conexões entre esses elementos individuais, para conectar os
pontos e desenvolver insights novos e mais profundos, que ajudam a definir o (s) problema (s) e
desenvolver soluções em potencial. Em outras palavras: passa da análise para a síntese.

 Mapeamento de Empatia
Um Mapa de Empatia consiste em quatro
quadrantes dispostos em um quadro, papel
ou mesa, que refletem as quatro
características principais que os usuários
demonstraram / possuíam durante a fase de
observação.
Os quatro quadrantes se referem ao que os
usuários Dizem, Fazem, Pensam e Sentem.
Determinar o que os usuários disseram e
 fizeram é relativamente fácil; no entanto, determinar o que eles pensavam e sentiam é
baseado na observação cuidadosa de como eles se comportaram e responderam a certas
atividades, sugestões, conversas etc.

 Ponto de Vista – Declaração do Problema

Um ponto de vista (POV) é uma declaração de problema significativa e acionável, que permitirá
que você idealize de maneira orientada a objetivos. Seu POV captura sua visão de design,
definindo o desafio
CERTO a ser abordado
nas sessões de ideação,
que orientará o restante
do seu trabalho de
design.
Você articula um ponto de vista combinando esses 3 elementos:
 Usuário: seu conhecimento sobre o usuário para o qual está projetando;
 Necessidade: as necessidades dele;
 Insight: os conhecimentos que você descobriu em sua pesquisa ou na etapa
“Empatizar”

O que significa Insight

Insight ou insights é um substantivo com origem no idioma inglês e que significa compreensão

súbita de alguma coisa ou determinada situação.

O insight também está relacionado com a capacidade de discernimento, pode ser descrito como uma
espécie de epifania. Nos desenhos, o insight é representado com o desenho de uma lâmpada acesa em cima
da cabeça do personagem, indicando um momento único de esclarecimento em que se fez luz.

Um insight é um acontecimento cognitivo que pode ser associado a vários fenômenos, podendo ser sinônimo
de compreensão, conhecimento, intuição. Algumas pessoas afirmam um insight é a perspicácia ou a
capacidade de apreender alguma coisa e acontece quando uma solução surge de forma repentina.

Esta palavra, que surgiu no inglês arcaico, é formada pelo prefixo in, que significa "em" ou "dentro" e a
palavra sight que significa "vista". Assim, insight pode significar "vista de dentro" ou ver com os olhos da
alma ou da mente.

Insight na Psicologia
Insight é um conceito muito relevante na Psicologia da Gestalt. Indica a apreensão da verdadeira natureza de
uma coisa, através de uma compreensão intuitiva.

Também remete para uma visão mental ou discernimento que capacita ver situações ou verdades que estão escondidas. Muitas vezes é
essencial para resolver problemas de relacionamentos, sendo que na psicoterapia um insight permite reconhecer as causas de dificuldades
emocionais.

O insight também entra no campo da introspecção e autoconhecimento, pressupondo um conhecimento daquilo que motiva o
comportamento, pensamento ou ação do indivíduo.

 Perguntas “How Might We” (Como Nós Podemos)

Quando você define seu desafio de design em um POV, pode começar a gerar idéias para
solucionar seu desafio. Você pode começar a usar o seu POV fazendo uma pergunta específica,
começando com: “Como nós podemos” ou “De que maneira podemos”.
Perguntas sobre “como podemos” (HMW) são perguntas que têm o potencial de desencadear
sessões de ideação. Eles devem ser amplos o suficiente para uma ampla variedade de soluções,
mas estreitos o suficiente para que soluções específicas possam ser criadas para eles. As
perguntas “Como nós podemos” devem se basear nas observações que você coletou na etapa
“Empatizar” do processo.
Por exemplo, você observou que os jovens tendem a não assistir programas de TV em casa,
algumas perguntas que podem orientar e estimular sua sessão de idéias podem ser:
  Como podemos tornar a TV mais social, para que os jovens se sintam mais envolvidos?
 Como podemos permitir que programas de TV sejam assistidos em qualquer lugar, a
qualquer hora?
 Como podemos tornar a TV em casa mais emocionante?
As perguntas do HMW abrem para sessões de Ideação, nas quais você explora idéias, o que
pode ajudá-lo a resolver seu desafio de design de maneira inovadora.

 Escada “Porque-Como”
Durante o estágio “Definir”, os designers procuram definir o problema e geralmente perguntam
o “porquê” para avançar para o topo da chamada “Porque-Como escada” (Why-How Ladder),
onde o objetivo final é descobrir “como” você pode resolver um ou mais problemas.
As perguntas do tipo “Como” podem nós ajudar a passar do estágio “Definir” para o próximo
estágio (Idealizar) no processo, onde você começa a procurar soluções inovadoras específicas.
“Perguntar ‘por que’ produz declarações mais abstratas e perguntar ‘como’ gera declarações
específicas. Muitas vezes, as declarações abstratas são mais significativas, mas não tão
diretamente acionáveis, e o oposto é verdadeiro para declarações mais específicas”. d.school

 Etapa 3: Idealizar
Na etapa “Idealizar”, os designers desencadeiam idéias – na forma de perguntas e soluções – por meio
de atividades, como Brainstorms e Worst Possible Idea. “Idealizar” é geralmente a fase mais
empolgante de um projeto porque o pensamento livre (quase irrestrito) pode ocorrer.

O principal objetivo da etapa “Idealizar” é usar a criatividade e a inovação para gerar um grande
número de ideias a fim de encontrar soluções melhores, mais elegantes e satisfatórias para os
problemas que afetam a experiência do usuário com o produto.
As sessões da etapa “Idealizar” podem ser divertidas e empolgantes, mas exigem muita preparação e
concentração dos membros da equipe para serem proveitosas. Sentar a equipe com um pedaço de
papel em branco e pedir que eles apresentem idéias provavelmente resultará em fracasso. Da mesma
forma, fazer com que todos gritem suas próprias idéias provavelmente resultará em fracasso.
As pessoas precisam de orientação, inspiração e atividades, de maneira física e cognitiva, para iniciar o
processo. Ideação é um processo criativo e concentrado, por isso os envolvidos devem receber um
ambiente que facilite o compartilhamento de idéias livre, aberto e sem julgamento.
 Métodos de Ideação para gerar Ideias Inovadoras
Existem centenas de métodos de Ideação. Alguns métodos são meramente renomeados ou
versões ligeiramente adaptadas de técnicas mais fundamentais. Aqui você terá uma breve visão
geral de alguns dos melhores métodos:
 Brainstorm (HOT)
 Braindump
 Brainwrite
 Brainwalk
 Suposições do Desafio (HOT)
 SCAMPER
 Mapa mental (HOT)
 Esboço ou tempestade de esboço
 Storyboard (HOT)
 Analogies
 Provocação
 Movimento
 Bodystorm (HOT)
 Gamestorming
 Cheatstorm
  Crowdstorm
 Oficinas de co-criação
 Protótipo (HOT)
O brainstorm
O brainstorming é um dos principais métodos empregados durante a etapam “Idealizar” de um
processo típico do Design Thinking. O brainstorming é uma ótima maneira de gerar muitas
ideias, aproveitando o pensamento coletivo do grupo, interagindo, ouvindo e desenvolvendo
outras ideias.
Esse método envolve focar em um problema ou desafio de cada vez, enquanto os membros da
equipe desenvolvem as respostas e ideias uns dos outros com o objetivo de gerar o maior
número possível de soluções possíveis. Estes podem ser refinados e reduzidos à melhor (s)
solução (s). Os participantes devem selecionar as melhores, mais práticas ou mais inovadoras
ideias dentre as opções apresentadas.
Como fazer:
1. Defina um limite de tempo, na minha experincia 1 hora é o suficiente.
2. Comece com uma declaração do problema, ponto de vista, possíveis perguntas, um
plano ou uma meta – Identifique o assunto / objetivo principal. (e mantenha o foco. É
fácil desviar durante uma seção de brainstorm).
3. Não julgue ou critique. O ambiente de debate de ideias não é o momento de discutir ou
questionar as idéias de outros membros. Em vez de bloquear uma idéia, apresente suas
próprias idéias que surgem daquelas fornecidas pelos outros membros de sua equipe.
4. Incentive idéias estranhas, malucas e loucas. O pensamento livre pode produzir
algumas idéias que estão muito longe da realidade, mas o objetivo é elaborar o maior
número possível de idéias, que são reduzidas até que a melhor opção possível
permaneça.
5. Objetivo é quantidade: o brainstorming é um exercício criativo para incentivar idéias,
por isso a ênfase está na quantidade, e não na qualidade.
6. Desenvolver as idéias uns dos outros – uma idéia normalmente parte de outra;
7. Você pode fazer uso de desenhos (use um quadro branco) para representar suas idéias.
É mais provavel que a sessão de brainstorm evolua se os membros da equipe
visualizarem e darem vida a idéias
8. Os participantes devem se concentrar em um ponto ou conversa de cada vez, para não
confundir seus pensamentos e perder de vista a linha ou o objetivo atual.
9. Se o processo começar a desacelerar você pode impor restrições, como: “e se não
houvesse barra de navegação de nível superior?” ou “Como podemos executar a tarefa
se tivéssemos 8 anos de idade?”

 Métodos de ideação para Selecionar Idéias

Após a conclusão da sessão de Ideação, as idéias devem ser coletadas, categorizadas, refinadas
e reduzidas, para que a equipe possa selecionar as melhores soluções, idéias e estratégias em
uma lista restrita. Esses métodos podem ajudá-lo a selecionar a melhor ideia no final de uma
sessão de Ideação:
 Votação Post-it ou Votação por Pontos. (HOT)
 Método de quatro categorias (Four Categories Method) (HOT)
 Seleção de Bingo (HOT)
 Mapas de afinidade de ideias (HOT)
 Now Wow How Matrix
 Six Thinking Hats
 Lean Startup Machine Idea Validation Board
Dot Voting (Votação Post-it)
 Na Dot Vote todos os membros recebem um número de votos (três a quatro são
suficientes) para escolher suas ideias favoritas. As ideias geradas nas sessões de
Ideação são escritas em post-its individuais, e os membros podem votar usando
adesivos ou um marcador para fazer um ponto na nota de post-it correspondente às
idéias que eles gostam. Esse processo permite que todos os membros tenham a mesma
opinião na escolha das idéias pré-selecionadas.
Como fazer:
1. Pendure os esboços de todos na parede da mesma forma que a arte é
apresentada em uma galeria ou museu
2. Cada pessoa tem três minutos para apresentar sua solução;
3. A equipe pode fazer perguntas ou discutir detalhes no esboço;
4. Revise o problema comercial, as metas e as métricas de sucesso para que todos
saibam quais são os critérios de votação e lembre à equipe que este é um voto
decisivo;
5. Dê a cada membro da equipe três votos.
Método das “4 categorias”
O método das quatro categorias envolve a divisão de idéias de acordo com sua relativa
abstração, variando da escolha mais racional à escolha do “longo prazo”. As quatro
categorias são: a escolha racional, a que mais encanta, a querida e a long shot
(podendo traduzir para arriscada / improvável). Os membros decidem então uma ou
duas idéias para cada uma dessas categorias. Esse método garante que a equipe cubra
todos os motivos, desde o mais prático até as ideias com maior potencial para fornecer
soluções inovadoras.
Como fazer:
1. Reuna todos os participantes e idéias anotadas em post-its.
2. Crie um quadro com as 4 colunas: a escolha racional, a que mais encanta, a
querida e a long shot.
3. O lider do projeto deve falar cada uma das idéias enquanto a equipe vota e
argumenta em qual categoria a idéia deve ficar.

 Etapa 4: Prototipar
Esse método envolve a produção de uma versão inicial, barata e reduzida do produto, a fim de revelar
quaisquer problemas com o design atual.
A criação de protótipos oferece aos designers a oportunidade de dar vida a suas idéias, testar a
praticabilidade do design atual e investigar potencialmente como uma amostra de usuários pensa e se
sente sobre um produto, revelar novas soluções para problemas ou descobrir se as soluções
implementadas foram ou não bem-sucedidas.
Seria imprudente e inútil produzir um produto acabado para os usuários testarem.
Os métodos de prototipagem são geralmente divididos em duas categorias separadas: prototipagem de
baixa e alta fidelidade.
 Prototipagem de baixa fidelidade
A prototipagem de baixa fidelidade envolve o uso de modelos básicos. Por exemplo, o modelo
pode estar incompleto e utilizar apenas alguns das features que estarão disponíveis no design
final ou pode ser construído usando materiais não destinados ao produto acabado, como
 madeira, papel ou metal para um produto fisico, ou wireframes para um produto digital.

Vantagens do prototipo de baixa fidelidade:

 Rápido e barato.
 É possível fazer alterações instantâneas e testar novas iterações.
 Descartável.
 Permite que o designer obtenha uma visão geral do produto usando tempo e esforço
mínimos, em vez de focar nos detalhes mais refinados ao longo de mudanças lentas e
incrementais.
 Disponível para todos; independentemente da capacidade e experiência, somos
capazes de produzir versões rudimentares de produtos para testar usuários ou exibir as
opiniões das partes interessadas.
Desvantagens da prototipagem de baixa fidelidade:
 Uma falta (inerente) de realismo. Devido à natureza básica e às vezes superficial dos
protótipos de baixa fidelidade, a aplicabilidade dos resultados gerados por testes
envolvendo versões iniciais pode não ter validade.
 Dependendo do produto, a produção de protótipos de baixa fidelidade pode não ser
apropriada para os usuários pretendidos. Por exemplo, se você estiver desenvolvendo
um produto vinculado a várias restrições contextuais, então versões básicas que não
refletem a natureza, aparência ou sensação de o produto acabado revelando muito
pouco da eventual experiência do usuário.
 Esses protótipos geralmente removem o controle do usuário, pois geralmente precisam
interagir de maneiras básicas ou simplesmente informar um avaliador ou escrever uma
descrição de como eles usariam o produto acabado.

 Prototipagem de alta fidelidade

Protótipos de alta fidelidade são protótipos que parecem e operam mais perto do produto
acabado. Por exemplo, um modelo de plástico 3D com peças móveis (permitindo que os
usuários manipulem e interajam com um dispositivo da mesma maneira que o design final) é de
alta fidelidade em comparação com, por exemplo, um bloco de madeira.
 Da mesma forma, uma versão anterior de um sistema de software desenvolvido usando um
programa de design como o Sketch ou o Adobe XD é de alta-fidelidade em comparação com um

protótipo de papel.
Vantagens do protótipo de alta fidelidade:
 Envolvente: os stakeholders podem ver instantaneamente sua visão para o produto e
serão capazes de julgar o quão bem ela atende às suas expectativas, desejos e
necessidades.
 O teste do usuário envolvendo protótipos de alta fidelidade permitirá aos avaliadores
coletar informações com um alto nível de validade e aplicabilidade. Quanto mais
próximo o protótipo estiver do produto acabado, mais confiança a equipe de design
terá em como as pessoas responderão, interagirão e perceberão o design.
Desvantagens do prototipo de alta fidelidade
 Eles geralmente levam muito mais tempo para produzir do que protótipos de baixa
fidelidade.
 Depois de dedicar horas e horas produzindo um modelo preciso de como um produto
aparecerá e se comportará, os designers geralmente odeiam fazer alterações.
 Os protótipos de software podem fornecer aos usuários de teste uma falsa impressão
de quão bom o produto final pode ser.
 Fazer alterações nos protótipos pode levar muito tempo, atrasando todo o projeto no
processo. No entanto, os protótipos de baixa fidelidade geralmente podem ser
alterados dentro de horas, se não minutos, quando métodos de desenho ou
prototipagem de papel são utilizados.

Devido aos prós e contras de cada tipo, a prototipagem de baixa fidelidade é a opção usual durante os
estágios iniciais de um projeto de Design Thinking, enquanto a prototipagem de alta fidelidade é usada
durante as etapas finais.

 Etapa 5: Testar
Há uma ampla variedade de métodos de teste disponíveis para designers durante um projeto de Design
Thinking; muitos dos quais se originam das metodologias normalmente usadas durante os testes de
interação homem-computador (HCI) e design centrado no usuário (UCD).
O feedback do usuário não tem preço; sem entender o que os usuários precisam para realizar
atividades e tarefas específicas, o processo iterativo falhará.
Sempre busque feedbacks para determinar o que esta certo e o que esta errado com o produto.
Os testes podem ser realizados durante o andamento de um projeto de Design Thinking, embora seja
mais comumente realizado simultaneamente com o estágio de Prototipagem. O teste, no Design
Thinking, envolve gerar feedback do usuário relacionado aos protótipos que você desenvolveu, além de
obter uma compreensão mais profunda dos usuários.
 Quando realizado corretamente, o estágio Teste do projeto geralmente pode alimentar a maioria dos
estágios do processo do Design Thinking:
 permite simpatizar e obter uma melhor compreensão de seus usuários;
 isso pode levar a insights que mudam a maneira como você define sua declaração de problema;
 pode gerar novas idéias no estágio Ideação;
 pode levar a uma iteração do seu protótipo.
Ao realizar um teste do usuário em seu protótipo, é ideal realiza-lo no ambiente normal em que seus
usuários usariam o protótipo. Se o teste em um ambiente natural for difícil, tente convencer os usuários
a executar uma tarefa ou desempenhar um papel ao testar o protótipo. A chave é fazer com que os
usuários usem o protótipo como usariam na vida real, o máximo possível.
Se os usuários tiverem dificuldades, a equipe de design deve revisar sua lista de possíveis soluções e
estratégias para estabelecer novas maneiras de resolver os mesmos problemas. Os testes também
podem ajudar a identificar problemas não considerados anteriormente. As sessões de teste são mais
proveitosas quando são cuidadosamente planejadas e organizadas.
“Se você não esta preparado para estar errado, você nunca vai fazer nada original”
(Sir Ken Robinson)

A natureza não linear do Design Thinking

Conforme apresentado até agora o processo do Design Thinking aparenta ser direto e linear no qual uma etapa
leva a próximo, com uma conclusão lógica no teste do usuário. No entanto, na prática, o processo é realizado de
maneira mais flexível e não linear.

É importante observar que os cinco estágios não precisam seguir nenhuma ordem específica e por isso, as etapas
devem ser entendidas como modos diferentes que contribuem para um projeto, em vez de etapas seqüenciais.

Exemplos:

 A etapa ‘Prototipar”‘ pode ser realizada no início do projeto – antes da etapa de “Idealizar” – para
descobrir mais sobre os usuários. Protótipos simples podem ser desenvolvidos, não apenas para testar
idéias, mas para entender mais sobre como os usuários operam diariamente, ou seja, estágio de
prototipagem pode alimentar o estágio de empatia.
 A etapa “Teste” pode alimentar a etapa “Definir”. Por exemplo, suas observações de usuários em testes
podem revelar informações cruciais que podem mudar a maneira como você define a declaração do
problema. O que, por sua vez, pode levar a outra sessão de brainstorming (Idealizar) ou ao
desenvolvimento de novos protótipos (Prototipar).
Objetivo: soluções que geram Valor, Viáveis Técnica e Comercialmente
O Design Thinking é um processo de design centrado no ser humano que
apesar de não ter uma sequência fixa de etapas, certamente terá um ponto
final ideal. O objetivo final de todo projeto de Design Thinking é projetar uma
solução que satisfaça: Valor, Viabilidade Técnica e Viabilidade Comercial.

 Valor para o Usuário: Basicamente é o valor que o usuário vai ver na

solução. Para que uma solução gere valor ao usuário, ela deve apelar
às necessidades, emoções e comportamentos das pessoas para as quais estamos projetando.
 Viabilidade Técnica: Sua solução é tecnicamente possível ou depende de uma tecnologia que ainda não foi
inventada (ou boa o suficiente para uso regular)? Embora nunca devamos basear projetos em
especificações técnicas, nossas soluções de projeto precisam ser práticas e implementáveis sem demandar
em custos enormes.
 Viabilidade Comercial: sua solução de design funcionará como um negócio? Existe um modelo de negócios
apropriado por trás da sua solução ou entraria em colapso após alguns anos sem contribuições de
investidores ou doadores? O Design Thinking não é sobre obter lucro, mas boas soluções de design devem
sempre ser autossustentáveis.

O Design Thinking não é o único processo de design existente. Atualmente, existem 3 grandes processos utilizados
pelas principais equipes de design, são esses: Double Diamond, Design Thinking e Design Sprint. Mas lembre-se:
não existe o “melhor processo”, mas sim aquele framework que vai atender você, sua equipe, o desafio que esta
enfrentando.

-------------------------------------------------------------------------------------------------------------------

Diferença entre Interação e Iteração

Iteração é a capacidade de fazer e refazer buscando sempre
melhorar, é um ciclo de repetição e acúmulo de experiências.
Interação são os fenômenos de troca e relacionamento entre
as partes (sejam pessoas com pessoas, pessoas com
máquinas, máquinas com máquinas). 
Por meio da interação é que ocorre o processo de iteração.

-------------------------------------------------------------------------------------------------------------------

Double Diamond
“Todo designer tem uma abordagem e maneiras de trabalhar diferentes, mas existem alguns pontos em comum no
processo criativo” (Design Council)
Metodologia criada pelo Design Council  que reuniu e codificou diversos processos e métodos do Design, e ao
perceber semelhanças e padrões, mapeou um processo de design comum: o Double Diamond Design.

A metodologia de Design Double

Diamond (ou DD, para os íntimos) é
composto por 4 fases principais:

1. Descobrir;
2. Definir;
3. Desenvolver;
4. Entregar.

O Double Diamond não é uma fórmula

mágica, nem uma receita de bolo
e as ferramentas não são uma bala de prata que vai resolver todos os seus problemas. Ele é uma metodologia de
Design que ajuda a guiar o processo de desenvolvimento de soluções combinando dois tipos de pensamento,
divergente e convergente, ou seja, em cada diamante iniciamos com um pensamento divergente, gerando muitas
ideias e possibilidades, para depois aplicarmos o pensamento convergente, reduzindo a quantidade de ideias na
mesa e refinando as remanescentes.

Assim como o Design Thinking ele também não é um processo linear. Pode ser que quando você chegue no
segundo diamante e descubra furos no conhecimento e entenda que precisa aprofundar mais sua pesquisa,
voltando para o primeiro diamante.

Ferramentas para usar em cada etapa do Double Diamond

1. Descobrir
Tem o objetivo de ajudar a entender e
não apenas assumir o problema
que estamos enfrentando. Envolve
conhecer o usuário, sua dor, o contexto
de uso e as condições atuais das
possibilidades que resolvem (ou tentam
resolver) esse problema.
Essa etapa é baseada
em observação e pesquisa, muita
pesquisa! 
Esse diamante é de
pensamento divergente, ou seja, o foco
é gerar ideias, obter informações e não definir nada!
Para essa etapa você pode usar:
 Brainstorming
A dinâmica consiste em uma reunião na qual os participantes fazem sugestões apontam
possibilidades, exercitando a criatividade.
Essa chuva de ideias pode proporcionar insights riquíssimos, já que pessoas diferentes vão estar
contribuindo com suas próprias perspectivas sobre um mesmo problema. Não importa se essas
perspectivas vão convergir ou divergir, o essencial é que elas sejam compartilhadas.
 Matriz CSD
A Matriz CSD é uma ótima opção para garantir alinhamento da equipe, reúna todos os envolvidos,
distribua post-its (ou faça remotamente usando o Miro) e cronometre 5 minutos. Nesse tempo,
todos devem escrever individualmente todas suas certezas (conhecido como: afirmações que
 temos dados suficientes para validar) sobre o desafio, todas as suposições e todas as dúvidas. Ao
final, passe por cada post-it e quando possível, sane as dúvidas e já deixe no radar as suposições,
elas precisarão ser validadas!
 Desk Research
Aqui, o foco é coletar mais informações sobre o desafio levantado. Ótimas fontes de informação
são sites de avaliação como Reclame Aqui, fóruns de perguntas, app store (quando é o caso),
reclamações de empresas que resolvem o mesmo problema (mesmo que não integralmente) e por
aí vai.
 Persona
A persona é uma ferramenta já muito conhecida por designers, é um perfil semi-fictício criado para
representar os diferentes tipos de usuário a partir dos seus comportamentos, objetivos e dores. É
muito eficiente para despertar empatia na equipe e para ajudar a voltar ao foco no usuário quando
estivermos no segundo diamante pensando na solução, então o ideal é que você tenha personas
prontas já nessa etapa.
 Mapa de empatia
Assim como a persona, o mapa de empatia ajuda a despertar empatia sobre o contexto do usuário
quando enfrenta esse problema, também funciona para mapear alguns comportamentos,
objetivos e até para descobrir outras dores que podem estar relacionadas ao seu desafio.
 Entrevistas de profundidade
Quando você já tem usuários é super importante conversar com essas pessoas e entender, da
perspectiva delas, o problema. Qual o impacto de resolver o problema para elas? É uma dor
latente ou apenas uma oportunidade? Essa pode ser uma chance incrível de explorar o desafio
para o usuário e conseguir insights para a solução.
 Um dia na vida
O famoso “pega e faz”, o seu desafio é melhorar um processo específico ou uma experiência?
Teste-a, passe pelo mesmo processo que o seu usuário passaria, tente reproduzir as dificuldades
levantadas, se coloque no lugar dele.

2. Definir
Vamos olhar para todas as descobertas da fase anterior e definir o nosso problema, nosso desafio
principal. Vamos pegar todas as dores e descobertas mapeadas, priorizá-las, entender seu impacto na
jornada e então convergir para
definir o nosso foco!
O resultado dessa fase é um briefing
que deixa claro qual o nosso desafio,
nosso usuário, quais dores
buscamos resolver e nossa proposta
de valor. Aqui temos o divisor de
águas, essas informações
vão guiar a próxima fase desse
processo, que consiste na ideação de
soluções.
Para essa etapa você pode usar:

 Jornada do usuário
A jornada do usuário é uma ótima ferramenta para entender como o usuário usa seu produto.
Aqui conseguimos mapear o passo a passo de como ele usa (ou usará) e identificar pontos de
atenção, inconsistência na jornada, onde ele percebe a proposta de valor e até aprofundar para
como a empresa conseguirá colocar esse produto para funcionar.
 Diagrama de afinidade
 Nada mais do que reunir ideias de um mesmo tipo para facilitar na visualização dos resultados.
Pegue todos os post-its (mesmo que virtuais) gerados pela equipe e separe por semelhança. Tem
algum que apareceu muito mais que outros?
 Jobs to be done (JTDB)
Jobs to be done é uma ótima forma de analisar o contexto e o por quê os consumidores compram
algum produto ou tem determinado comportamento. Parte do princípio de que não adianta
perguntar às pessoas o que elas querem, já que elas responderão de acordo com o que o mercado
já oferece!
 Opportunity Gaps
Método usado normalmente junto aos Jobs to be done, aqui queremos entender quais são as
maiores oportunidades de negócio a partir dos JTBD mapeados.

3. Desenvolver
Sua primeira fase nos incentiva a buscar
possibilidades e respostas para o desafio
definido na última etapa, é importante
buscar inspiração em outras soluções e
mercados e não se ater a limites e
julgamentos. Aqui é imprescindível que
haja troca de conhecimento entre as
pessoas da equipe, afinal, duas (ou mais
cabeças) pensam melhor do que uma.
Para essa etapa você pode usar:
 How might we
É uma ótima dinâmica de Design
Thinking para fazer com a equipe. Reúna todos, deixe disponível todos os dados reunidos no
último diamante e encarem o problema de forma diferente, em vez de já pular para solução
pensem sempre “Como podemos” [melhorar a experiência de pagamento, por exemplo], esse
exercício de escrita dos pontos específicos que precisamos resolver ajuda demais a clarear as
ideias e priorizar.
 Opportunity Solution Tree (Árvore de oportunidades)
O framework de Opportunity Solution Tree ajuda os times a lembrarem de onde precisam chegar.
Ela ajuda a alinhar a equipe como um todo sobre o objetivo e o que pode ser feito para chegarmos
ao resultado esperado! Nela temos de forma visual e clara o resultado que queremos atingir, as
oportunidades mapeadas, as possíveis soluções e como testaremos cada uma delas!
 Benchmark
Se você como consumidor compara produtos e empresas na hora de fazer uma compra, por que
não faria isso na hora de desenvolver um também? Busque referências nacionais, gringas e de
mercados adjacentes ao seu, explore como seus concorrentes resolvem a dor e fique atento às
tendências e movimentações do mercado.
 Buy a feature
Um framework de priorização para quando você tem uma longa “lista de desejos” e não tem
tempo ou recursos suficientes. Aqui, a ideia é fazer uma lista com as features e atribuir um preço
fictício a cada uma delas, depois, reúna sua equipe e dê a cada um deles um orçamento de quanto
eles podem gastar e mande-os às compras. Eles podem colocar todo seu orçamento em uma única
feature ou distribuir em várias, a intenção aqui é que a equipe discuta e negocie a partir da visão
da empresa e necessidades do produto.
 Product Tree
 Uma ferramenta que torna a gestão de produto visual, ajuda a organizar, priorizar e alinhar a
equipe e stakeholders sobre o objetivo e próximos passos do produto.

4. Entregar
Na última fase vamos nos concentrar em testar
e validar. Vamos pegar os grupos de ideias que
separamos na última etapa e fazer uma triagem,
entender o que está em linha com a visão do
negócio e seguir para testes e validações. Se
mesmo após uma triagem e conversa com a
equipe você ainda tiver muitas soluções para
serem testadas, priorize, entenda qual é a
complexidade delas, o impacto, se resolvem o
desafio por completo, ou se deixam gaps. Aqui
recomendo a metodologia
RICE (reach, impact, certain, effort) para priorizar as soluções a serem testadas e validadas.

Logo no início desse processo avaliaremos a viabilidade das ideias, o que de fato conseguimos fazer com os
recursos que a empresa dispõe? Serão necessários mais recursos? A empresa tem algum tipo de
orçamento já alocado para o desenvolvimento dessa solução? Quais os riscos das possibilidades
levantadas? A solução precisa ser refinada e aprofundada antes de ser testada?
Ao começar os testes algumas soluções serão descartadas e algumas precisarão de iterações, tome
cuidado para não insistir demais em uma ideia que não tem futuro e para não descartar cedo demais
uma ideia só porque não deu certo no primeiro teste!
Ao final dessa etapa você e sua equipe terão protótipos ou pilotos validados das soluções.
Para essa etapa você pode usar:
 MVP
Aqui temos várias possibilidades! Você pode fazer um MVP Mágico de Oz (em que fazemos
manualmente no backstage  o que o cliente acredita ser automatizado, para entender a linha de
raciocínio do usuário, obter insights  e iterar rapidamente), cortina de fumaça (testar interesse dos
consumidores por um produto ou feature) e concierge (atender as necessidades do seu usuário de
forma próxima e personalizada), o melhor MVP vai depender do que sua equipe quer validar para
seguir para a próxima etapa.
 Protótipo em baixa/alta fidelidade
Para testar você não precisa ter o produto 100% pronto, explore começar com wireframes
desenhados em papel, valide o que conseguir, itere e vá aumentando o grau de complexidade e
fidelidade do seu protótipo a medidas que os pontos são validados.
 Vídeo
Você também pode recorrer ao vídeo para mostrar e testar o interesse do usuário. Pode ser uma
animação demonstrativa do funcionamento da solução ou encenações que demonstrem como
usar o produto, por exemplo.
 Protótipo de serviço
Demonstramos as principais interações ao longo do ciclo do serviço pela jornada do usuário,
podemos usar tanto a ferramenta de Jornada que mapeia também as emoções do usuário por
etapa, como o Blueprint Map, que mapeia as ações de suporte e backstage do serviço e não foca
apenas em como a pessoa interage com o serviço, mas também em como a empresa
operacionaliza.
------------------------------------------------------------
Prototipação em baixa, alta fidelidade e interativa

O que é prototipação?

Um protótipo é usado para validar uma ideia. Dentre suas maiores vantagens, estão:

 o fato de que ele é barato;

 a possibilidade de coletar feedbacks;
 a oportunidade de aprimorar o conceito antes que seja entregue ao desenvolvimento.

Podemos classificar um protótipo posicionando uma régua de baixa a alta fidelidade. Quanto mais baixa, mais fácil
e rápida deve ser a construção daquele protótipo.

Protótipos em baixa fidelidade

Desenhos feitos à mão (Sketches) são a forma mais

rápida e barata de tangibilizar as ideias. Esse tipo de
prototipação pode ser utilizado em diversos
momentos e contextos, principalmente se o
produto ainda não existe, não há toolkit  ou
componentes digitais que possam ser aproveitados
para testar a ideia.

Se o objetivo é validar a experiência sobre o

produto, o protótipo em baixa não é o mais
indicado, uma vez que ele ainda é pouco fiel à solução
final.

O protótipo em baixa é uma boa opção de aplicação

quando tem o objetivo de:

 testar fluxos simples;

 coletar feedbacks rápido;
 validar texto (teste A/B);
Teste A/B é uma das formas mais conhecidas e eficientes de se descobrir se algo no seu site funciona ou se pode ser melhorado. É um modo
de testar, através de comparação, alguma coisa no seu site, anúncio ou em uma landing page que pode ser melhorada. Exemplo: suponha que
você tenha uma landing page para divulgar um webinar, mas acha que a sua taxa de
conversão pode ser mais alta e que o problema pode ser a cor do seu botão. Sabe como
resolver isso com o teste A/B? Você “duplica” a sua página, sendo uma delas a primeira
versão, e a outra com a alteração que você quer fazer. Depois disso é só dividir o tráfego de
forma igual, esperar um pouco e analisar onde teve a melhor conversão naquele botão. O
teste A/B é muito utilizado não só nos meios digitais com suas métricas, mas também em
outras áreas. Sabia que remédios e vacinas são testados assim? Uma parte dos pacientes
recebe uma dose do remédio e a outra uma quantidade diferente. Assim, eles podem
determinar quais remédios funcionam melhor e em qual quantidade.

Ele não é uma boa opção para:

 validar a experiência final;

 avaliar a usabilidade;
 validar tarefas complexas.
Protótipos em média fidelidade

Ela resulta em protótipos um pouco mais trabalhosos e

que se aproximam melhor da interface final. Para ser
construído começam a depender de ferramentas  de
prototipação mais complexas, como Figma, Sketch e
InVision.

Wireframes, apesar de estarem caindo em desuso no

cenário de desenvolvimento ágil de produto, entram
nessa categoria.

Já foram importantes — principalmente para a

arquitetura da informação — quando sites começaram
a se popularizar e o uso de interfaces digitais ainda não
fazia parte do modelo mental das pessoas.

Ainda são muito comuns no desenvolvimento de sites como uma etapa de validação do cliente.

Os protótipos em média fidelidade são boas opções para:

 organizar as ideias;
 testar fluxos e tarefas;
 coletar feedbacks em tempo moderado;
 validar textos (teste A/B) e estrutura da interface.

Entretanto, não são indicados para:

 validar a experiência;
 Usabilidade final.

Observação: os protótipos de média fidelidade se aproximam mais aos de baixa por isso em algumas menções
podem ser classificados como tal.

Protótipos em alta fidelidade

Protótipos em alta fidelidade buscam representar ao máximo a experiência final com a interface.

Necessitam de mais tempo para serem produzidos, e é comum a utilização de mais de uma ferramenta de
prototipação para sua concepção:

 Desenho: Sketch, Figma, Adobe XD

 Animação: Principle, Adobe XD, Quant-ux, Atomic.io
 Fluxos: InVision, Figma, Quant-ux

Prototipação em alta fidelidade é uma boa opção para projetos que tenha como objetivo:

 testar fluxos/tarefas simples e complexas;

 coletar feedbacks;
 validar copy;
 testar experiência e usabilidade;
 realizar hand-off para desenvolvimento.
Ao contrário, não é uma boa escolha em cenários que necessitam de validação rápida de ideias em fase
incipiente, e nos quais o guia de estilo e componentes do produto ainda não existem.

--------------------------------------------------------------------------------------------------------------------------

Outras menções:

Protótipos de baixa fidelidade

Imagine o seguinte: você tem uma ideia de um

novo produto digital, e a você parece que ele
poderia resolver o problema de muitas pessoas.
Pode ser um novo aplicativo ou até mesmo um
novo sistema que irá facilitar o trabalho de
empresas de um determinado ramo. Mas, para ter
certeza antes de fazer um alto investimento, é
preciso planejar, testar e avaliar essa ideia.

Nesse caso, um protótipo de baixa fidelidade pode

ser uma das formas de começar a validar e amadurecer a ideia. São características dele:

 Validar premissas básicas e iniciais do produto;

 Apresentar amplamente a ideia;
 Conter as principais funcionalidades e fluxos de uso;
 Possuir baixo grau de detalhamento estético;
 Não possuir recursos de interação – normalmente não é navegável.

Ele é voltado muito mais às funcionalidades do produto digital – ou seja, o problema que ele resolve – do que à
estética.

Protótipos de alta fidelidade

Agora imagine o seguinte: você

já discutiu bastante a sua ideia, já
teve mais de um ciclo de
evolução dela com base em dados
qualitativos e
em benchmarking, e agora quer
partir para testes com usuários.
Chegou a hora de criar um
protótipo de alta fidelidade.

Protótipos de alta fidelidade têm

como características:

 Representar  fielmente o
novo produto digital, tanto em relação às funcionalidades quanto à estética e comportamento;
 Apresentar detalhes das operações e suas extensões, como funcionalidades de botões e possíveis retornos
de erros;
 Conter as possíveis e diferentes etapas percorridas pelos usuários;
 Normalmente é interativo e navegável.
É importante observar que o protótipo de alta fidelidade ainda não é o produto. Por exemplo, se seu produto é um
aplicativo, o seu protótipo de alta ainda não tem código escrito, nem o mesmo funciona de fato. Ele é apenas uma
forma de simular o funcionamento para testar alguns aspectos específicos da solução.

Protótipos de alta fidelidade podem ser usados para:

 Definir a versão final do design UI que deve ser aplicado no produto;

 Testar com usuários reais o entendimento da proposta de valor do produto, ou o entendimento da
terminologia adotada (UX Writing);
 Se forem interativos, testar com usuários reais o entendimento do fluxo e a interação entre o usuário e o
produto.

O protótipo de alta já é mais completo e envolve a visualização detalhada de cada etapa percorrida pelo usuário.

O protótipo de alta fidelidade começa com uma pesquisa gráfica que resultará em um style guide, isto é, quais
cores, formas, fontes e estilos serão utilizados na aplicação final.

As telas feitas anteriormente são “refinadas” de acordo com os estilos definidos no style guide. Também é durante
essa prototipagem que são elaborados os textos de cada parte da aplicação, em um processo chamado de UX
Writing.

A partir de um protótipo de alta definição é possível começar desenvolver a aplicação funcional, testar a ideia
com usuários de forma mais interativa, e até mesmo usar a prototipagem como pitch  para ir em busca de
investidores.

------------------------------------------------------------
UX Writing
UX Writing é a prática de desenvolver textos dentro do design e
da interface para guiar, ensinar e melhorar a experiência do
usuário.

O principal objetivo do UX Writing é estabelecer uma comunicação

eficiente entre a interface e as pessoas que interagem com ela.

Nesse sentido, escrever para a experiência do usuário contempla

não somente os textos

descritivos e tutoriais, mas também os botões, menus e mensagens

de erro, por exemplo.

UX Writing ou Copywriting?

O UX Writing comporta os textos que vão aprimorar a experiência do usuário dentro de uma determinada

interface ou produto digital. A intenção é comunicar para melhorar a interação.
Por outro lado, o Copywriting está relacionado à redação publicitária. Ou seja, o seu objetivo é criar textos
para persuadir e vender algo para alguém.

Outros termos bastante comuns de encontrar são “copy”e “microcopy”. De maneira geral, esses dois termos se
referem a textos, sejam eles publicitários ou de experiência.

Particularmente o termo “microcopy” tem uso mais comum em UX Design, por referir a textos em menus, botões e
em outros elementos menores. Mas você pode encontrar qualquer um dos dois termos — copy ou microcopy —
para se referir a UX Writing.

UX Writing para informação e para interação

Existem dois tipos de texto em UX Writing, um para informar e outro para interagir.

Os textos para informação são compostos por:

 Títulos;
 Subtítulos;
 Corpo do texto.

Esses componentes fazem parte da Hierarquia Visual e são importantes para deixar o texto escaneável para o
usuário.

Os títulos e subtítulos também precisam ser objetivos e concisos. O usuário deve saber rapidamente sobre o que
trata aquele tópico.

Já os textos para interação estão presentes em:

 Legendas de imagens;
 CTAs (Call To Actions)
 Notificações;
 Mensagens de Erro;
 Menus, botões e outros elementos de UI.

Os textos para interação tem a função de chamar a atenção do usuário, guiar e incentivá-lo a interagir com os
elementos.

Portanto, esse tipo de copy precisa ser bem assertiva, concisa e com as palavras certas para impactar quem lê.

As responsabilidades do UX Writer

A pessoa responsável por desenvolver o UX Writing de uma interface é denominada UX Writer.

Tendo em vista que o UX Writing é uma área que compõe a estratégia de conteúdo de uma marca — produto, ou
empresa —, as responsabilidades do UX Writer não se limitam apenas à escrita.

É importante entender qual é a persona, qual o tom, estilo, termos e voz que devem ser aplicados nos textos das
diversas interfaces.

É comum que o UX Writer trabalhe bem próximo da gerência de produto e do marketing como um todo. Nesse
sentido, quem atua como UX Writer possui algumas tarefas como:

 Trabalhar junto com os demais times para desenvolver soluções em texto para as necessidades dos
usuários;
 Evangelizar sobre o impacto das copys nas interfaces e incentivar a escrita como elemento de design;
 Colaborar com UX Designers e desenvolvedores para criar boas experiências para o usuário;
 Ajudar nos processos de pesquisa;
 Criar textos — claro, mas é sempre bom ressaltar.
ChatBots: os chatbots estão se tornando cada vez mais populares, e eles são uma ótima maneira de oferecer
serviço ou suporte ao cliente. E é aí que entram os UX Writers. O trabalho de um escritor UX é escrever o diálogo
para os chatbots, e garantir que ele seja claro, útil e humano.

Por que o conteúdo textual é importante?

O UX Writing impacta diretamente a experiência na interface, não só por instruir as pessoas, mas também
na arquitetura da informação e na jornada do usuário.

Portanto, o texto em UX Writing é parte fundamental do design, e não deve ser visto como algo secundário.

Mas e os ícones?

Os textos não são os únicos meios de estabelecer uma comunicação com o usuário, dentro de uma interface.

Os ícones também têm esse papel e, quando bem utilizados, o fazem muito bem!

A questão é que nem toda a comunicação consegue ser feita por meio de ícones. Claro que existem ícones
praticamente universais, mas nem sempre eles são reconhecíveis por todos.

Portanto, a utilização do UX Writing é um importante complemento ao design de ícones, estabelecendo uma

conexão rápida e eficiente com os usuários.

UX Writing também é Design

UX Writing faz parte do design e tem um papel fundamental na construção da experiência do usuário.

Pense em um produto digital, um aplicativo por exemplo, que ao abrir não possui texto algum. Estranho, não?

Sem a parte textual, a navegação e a jornada do usuário vão ficar muito mais difíceis.

Além disso, escrever uma copy não é a mesma coisa que escrever um artigo completo. A comunicação construída
pela copy deve ser concisa, clara e bem estruturada, com a escolha certa de palavras.

Nesse sentido, uma simples frase em um botão pode demorar mais tempo para ser criada porque o esforço para
deixá-la eficiente é muito grande.

Se o UX Writing faz parte do design, a forma como ele é colocado na interface também importa. A apresentação
visual, a hierarquia, quais palavras serão ressaltadas, tudo isso impacta a leitura, a compreensão e a experiência do
usuário.

As diferenças entre a escrita offline e online

As estratégias da escrita dependem do ambiente e do produto no qual ela está sendo usada.

Não é novidade que o offline e o online são dois mundos bastante distintos. Por conta disso, a escrita também
possui suas diferenças quando utilizada em cada uma dessas realidades.

Quando falamos sobre escrita offline, temos por exemplo os jornais e revistas especializadas. A narrativa
empregada nesse tipo de produto é bem diferente da utilizada em sites ou em aplicativos.

No offline é comum utilizar uma estratégia voltada para relatos do próprio autor, utilizando um storytelling mais
complexo e que não necessariamente vai solucionar um problema específico de quem lê.

Por outro lado, o online precisa dessa carga de solução de problemas. Nesse sentido, a estratégia é mais voltada
para o usuário e feita de forma mais direta e clara.

Jakob Nielsen explica essas diferenças com um exemplo simples: viagem de avião para pessoas altas.
Em uma revista, um artigo sobre o assunto trará de forma anedótica a experiência do autor com o seu problema de
altura e as poltronas pequenas das companhias áreas. Nesse sentido, o leitor tem um papel passivo com a matéria.

No online, o usuário tem mais ação e liberdade para procurar soluções para os seus problemas. Dessa forma, os
textos trarão:

Dicas de companhias aéreas com melhores poltronas;

Como conseguir melhores lugares nos aviões;

Qual o melhor avião para uma viagem confortável.

Consegue perceber a diferença?

Readability e Legibility

Por definição, Readability é a preocupação em como o texto está estruturado e construído, para que o usuário
tenha melhor compreensão do seu conteúdo.

Legibility, por sua vez, está mais relacionado com as formas, cores e o aspecto visual do texto, fazendo com que o
usuário saiba distinguir um elemento do outro.

No entanto, é bastante comum os designers usarem Readability como conceito que abrange o aspecto de

conteúdo e o estético.

O que influencia a Readability e a Legibility?

Os principais fatores que influenciam a Readability e a Legibility de um texto online são:

 Cores;
 Tipografia;
 Hierarquia Visual.

Cores: É importante ter cuidado na escolha das cores do texto e do seu background. Um fundo claro com letras
claras torna o texto praticamente ilegível.

Tipografia: A tipografia trabalha com as cores, tamanhos, fontes e espaçamentos das letras de um texto.

Hierarquia Visual: Trata da ordem e priorização dos textos que serão visualizados pelo usuário. É fundamental para
mostrar e destacar o que se considera mais importante para o usuário em determinado momento.

Passo a passo para aplicar o UX Writing

Existem alguns passos fundamentais para considerar quando aplicar o UX Writing:

 Pesquisar e entender o contexto;

 Escrever de maneira sucinta;
 Construir conteúdo escaneável;
 Definir cores e tipografia;
 Utilizar links para outras páginas;
 Revisar;
 Testar.
1) Pesquisar e entender o contexto

Antes de desenvolver qualquer texto, é importante entender quem é o seu usuário, qual as necessidades, como
ele se comporta e como o produto pode resolver seus problemas.

Pesquisar esses fatores e estabelecer uma persona é fundamental para ajustar o tom e a voz dos seus textos. Aqui,
é importante envolver também a área de marketing para definir esses elementos.

Entenda como o próprio usuário se comunica e pesquise palavras e expressões familiares para estabelecer uma
conversa mais eficiente e próxima.

2) Escrever de maneira sucinta

Em UX Writing muitas vezes não há a necessidade, e nem o espaço, para escrever textos e frases muito longas.

Nesse sentido, escreva de forma sucinta e expresse em poucas palavras aquilo o que é importante para o usuário,
de forma clara e impactante.

Esse trabalho é bastante complicado porque é difícil reduzir o número de palavras de um texto, mantendo sua
clareza e objetividade. É natural querer escrever mais do que o necessário.

3) Construir conteúdo escaneável

Esse passo está diretamente relacionado com a Hierarquia Visual.

Ler textos online, em um aplicativo ou qualquer outra interface, é diferente

de ler um livro.

A tendência é que as pessoas leiam o conteúdo no Padrão F. Ou seja,

escaneiam o texto na vertical e quando se interessam por algo, leem por
completo, na horizontal.

Por conta disso, é importante dividir o conteúdo em blocos de textos para

facilitar a escaneabilidade pelo usuário. Para isso, utilize subtítulos objetivos
e claros. Dessa forma, o usuário entende rapidamente sobre o que será
tratado naquele bloco.

4) Definir cores e tipografia

Alinhado com a Hierarquia Visual, é importante definir outros componentes

de design que vão ajudar na leitura e melhorar a experiência do usuário.

Já mencionamos a importância das cores e da tipografia, portanto, não se esqueça de definir esses elementos
antes de finalizar seu processo de UX Writing.
5) Utilizar links para outras páginas

Utilizar links significa adicionar camadas de conteúdo no seu texto.

Um assunto pode conter tópicos ou ganchos para outros temas. Ao invés de explicar tudo em uma página, a
estratégia é adicionar links que levam o usuário a outros conteúdos relacionados.

Perceba que a utilização dos links não significa quebrar um assunto no meio ou, então, adicionar um botão de
“continue para a página 2”. Mas é uma abordagem para deixar o texto conciso e, ainda assim, guiar o usuário para
outras páginas da sua interface.

6) Revisar

Um passo simples, mas muito importante e muitas vezes esquecido.

Ao finalizar uma copy, revise. Se possível, faça mais de uma revisão.

Quando se escreve muito, é normal que aconteçam pequenos erros, mas isso não significa que a pessoa não saiba
escrever.

Os erros podem ser de digitação ou até mesmo de uma palavra que não faça tanto sentido para aquele contexto
ou persona.

Portanto, revisar é um passo importante no processo de UX Writing para garantir que a experiência do usuário não
seja impactada por pequenos erros.

7) Testar

Como todo processo em UX Design, é importante também testar as copys que foram desenvolvidas.

É bastante comum utilizar testes A/B para entender quais textos foram mais eficientes do que outros e, caso seja
necessário, efetuar os ajustes pertinentes.

Outras dicas e boas práticas em UX Writing

Existem outras dicas e boas práticas que vão te ajudar a criar copys melhores:

 Evite duplo negativos

Duplos negativos confundem o usuário e aumentam a sua carga cognitiva.
Exemplo: Eu não quero cancelar essa ação
 Comece com o objetivo da ação
Comece sempre com o objetivo e o resultado da interação.
Bom: Para acessar sua conta, clique aqui.
Ruim: Clique aqui para acessar a sua conta.
 Seja consistente
O UX Writing faz parte do design. Por isso, é fundamental que haja consistência entre as palavras.
Se, em um site de turismo, foi utilizada a palavra Agendar na página principal, não há motivo para escrever
Programar em outras páginas.
 Evite jargões
A não ser que os usuários estejam acostumados com os termos, não utilize vocabulário técnico e de difícil
compreensão.
Os jargões podem prejudicar a comunicação e a experiência na interface, justamente por deixar as pessoas
confusas sobre seus significados.
 Use números
Ao invés de palavras.
Bom: Você tem 4 novas mensagens;
Ruim: Você tem quatro novas mensagens.
  Escreva as interações com clareza
As copys de botões, menus e outros elementos interativos devem ser objetivas para não surpreender o
usuário. Evite palavras e expressões muito abertas.
Bom: Conectar
Ruim: Ok
 Utilize listas e bullet points
Esses recursos ajudam na Legibility e tornam os textos mais escaneáveis e agradáveis de ler.
 Escreva para criar diálogos naturais
A proposta do UX Writing é comunicar para melhorar a experiência do usuário. Portanto, entenda qual a
melhor forma de estabelecer diálogos naturais com eles.
Pesquise expressões e formas de linguagem que façam parte do contexto dos usuários. Quanto mais natural
for o diálogo, melhor será a experiência na interação.

A comunicação e a experiência do usuário não são feitas apenas com imagens. Os textos são essenciais para tornar
a jornada do usuário mais fluida e com menos atrito.

--------------------------------------------------------------------------------------------------------------------------------

Outras menções:

A essência do UX Writing

O caminho textual dentro da interface precisa ser:

Claro, conciso e útil

As informações presentes na interface devem transmitir clareza e objetividade.

Sem gerar qualquer tipo de dúvida ao usuário.

O conteúdo textual precisa ser sucinto. Isso não significa que o texto precisa ser
curto, mas é fundamental que seja eficiente, apresentando ao usuário o que é
necessário, sem enrolações.

O texto deve constar informações relevantes que auxiliem o usuário em sua

busca dentro da interface, seja para apresentar um contexto, solucionar algum
problema, responder dúvidas ou prever próximos passos.

Certifique-se em seguir essas recomendações:

 Números - use valores numéricos

 Use ontem, hoje ou amanhã

  Botões que indiquem uma ação – o texto dentro dos botões devem indicar a ação que ele representa

 Call to action – indicar claramente a ação que irá acontecer caso o usuário clique

 Mensagens de Erro - precisam ser amigáveis

-------------------------------------------------------------------------------------------------------------------------------

Outras menções:

Quais as características do UX writing?

A prática do UX writing reúne quatro características básicas que devem abranger todo o processo de escrita:
 clareza: o primeiro princípio do UX writing se refere à plena compreensão da mensagem. Por esse motivo, as
informações devem ser bem organizadas e o discurso inteligível;
 concisão: a mensagem também deve ser centrada no objetivo. Por esse motivo, evite frases vagas e
informações descontextualizadas;
 aplicabilidade: de que adianta transmitir uma informação clara e concisa se ela não agregar valor à vivência
do leitor? Por isso, o conteúdo também deve ajudar os usuários em suas interações e experiências.
 consistência: o conteúdo precisa manter consistência quanto ao estilo, tom de voz e terminologias. Para isso
é importante ter e usar um guia de estilo e um workflow que oriente todo o processo.

Outra modalidade de escrita é o copywriting, que às vezes é erroneamente entendido como sinônimo de UX
writing. A diferença é sutil, mas perceptível: enquanto o copywriting foca chamar atenção das pessoas e
atrair leads* para o negócio, o UX writing, mesmo que indiretamente facilite a conversão de leads, foca a
experiência do leitor. Isso resulta no uso de termos mais simples, em um texto mais objetivo e em um
desenvolvimento orientado pelo produto, não pelas vendas.

* Leads são potenciais clientes da sua empresa. São pessoas que demonstraram interesse em adquirir o
produto ou serviço da sua empresa: um usuário que baixou um material no seu site, pediu um orçamento ou
experimentou o produto, por exemplo. Em troca, deixou o seu contato com a empresa. Um lead é um usuário
que está ao alcance da empresa.

Entenda a jornada do cliente

Acompanhar o comportamento do cliente durante sua jornada é outra prática essencial para um UX writer.
Esse monitoramento gera insights valiosos para o desenvolvimento da estratégia e identifica gargalos que
precisam ser revertidos. Assim, é importante contar com o acesso a dados que indiquem detalhes da jornada.

Ao analisá-los, você pode, por exemplo, descobrir que muitos usuários param a navegação em determinada
página. A partir daí, é só descobrir o motivo e trabalhar para solucioná-lo. A razão pode ser relacionada a
muitos fatores, como um design desarrumado ou um texto confuso.

Resumo das melhores práticas de UX writer:

 comece com as informações mais importantes;

 evite longos blocos de texto;
 use verbos no tempo presente;
 jamais use gírias ou jargões;
 use um tom de voz ativo;
 destaque números e elementos importantes no conteúdo;
 use listas numeradas e bullet points;
 identifique os elementos interativos da página (como botões de CTA) apropriadamente e de forma clara;
 utilize uma linguagem condizente com a plataforma de marca;
 mantenha a consistência dos elementos visuais;
 evite o uso de datas;
 use elementos gráficos para comunicar dados;
 integre boas práticas de IU ao conteúdo;
 use uma hierarquia padrão nos intertítulos;
 preze pela correção gramatical;
 mantenha o texto amigável;
 explique termos técnicos;
 evite palavras e frases confusas;
 faça o teste A/B para conteúdos com elementos interativos.
------------------------------------------------------------
User Mapping Journey

O Mapa da Jornada do Usuário (também chamado de Mapa da Jornada do Cliente) é um diagrama que ilustra
visualmente o fluxo de interações de uma pessoa ao acessar
a interface, seja de um site ou aplicativo. 

Trata-se de um mecanismo muito utilizado por UX

Designers, permitindo mapear desde pensamentos e emoções do
usuário até possíveis problemas de usabilidade que estejam
comprometendo a sua experiência. 

Em sua forma mais básica, esse mapeamento compila uma série de

ações do usuário em uma linha do tempo. A partir disso, identifica as
principais interações e pontos de contato, descrevendo em detalhes os
objetivos, motivações e sentimentos do cliente em cada etapa.

O que é a Jornada do usuário

A User Journey (ou Jornada do Usuário,

em Português) é o percurso feito por um
usuário para alcançar algum objetivo
(realizar uma compra, assinar um serviço
etc.) dentro de um site ou aplicativo
móvel. 

Ela inclui desde o contato inicial ou

descoberta, passando pela interação e
engajamento, até a etapa de conversão. 

É por meio do mapeamento dessas

Jornadas que designers buscam
identificar maneiras de permitir que o
usuário atinja seu objetivo da maneira
mais rápida e fácil possível.

Para que ela serve

Um usuário tende a passar por diferentes fases de experiência à medida que descobre, considera e se envolve com
um produto. Nesse sentido, a Jornada do Usuário funciona como uma tentativa de capturar cada desvio, parada e
ponto de contato ao longo desse processo. 

Já a criação de um Mapa da Jornada do Usuário serve, acima de tudo, para identificar possíveis pontos de atrito e
oportunidades de melhorias de UX. Tudo isso a partir do ponto de vista do próprio cliente.

Ferramentas de mapeamento 
São diversas as ferramentas usadas no mapeamento da Jornada do Usuário. Enquanto algumas servem para
coletar e apresentar dados quantitativos e qualitativos, outras informam de onde esses visitantes vieram, como se
comportam, além de coletar feedback diretamente deles.

Vale lembrar que, quanto mais complexa for a jornada do cliente, mais dados serão necessários para mapeá-la.

A seguir, listamos algumas categorias e exemplos de ferramentas que serão úteis neste trabalho. Confira:

Google Analytics

Ferramentas de análise como o Google Analytics fornecem informações sobre quem são seus clientes e como eles
se comportam em seu site. 

Elas podem apresentar desde dados quantitativos sobre tráfego e métricas demográficas (taxa de rejeição e
conversão, média de novos usuários etc.), assim como dados qualitativos sobre como os usuários experimentam
seu site ou aplicativo. 

Ferramentas de Visualização

A Jornada do Usuário consiste em visão holística da experiência do cliente, revelando momentos de frustração e
prazer ao longo de uma série de interações. Foto: smaply.com

No quesito visualização, plataformas como o Gliffy, Smaply e Miro estão entre as ferramentas usadas por

designers UX, especialmente para criar fluxogramas, wireframes e Mapas de Jornada do Usuário. 

Soluções como essas costumam ser úteis para construir mapas e visualizar a experiência do usuário de maneira
intuitiva e simples

Clarabridge

Ferramentas de gestão de experiência como a Clarabridge permitem entender e melhorar a Jornada do Usuário. 

Por meio de Inteligência Artificial (AI), ela coleta e transforma todas as formas de feedback do cliente em dados
acionáveis, que podem ser visualizados por meio de dashboards e relatórios.

Passo a passo: como criar um Mapa da Jornada do Usuário 

Os mapas de jornada geralmente são criados a partir de pesquisas e de entrevistas com usuários, devendo exibir
os resultados desses levantamentos por meio de narrativa e visualização. 

Aqui estão os principais passos para construí-lo:

 Passo 1: Defina o escopo do seu Mapa

 Antes de começar a desenhar um Mapa da Jornada do Usuário, é importante se fazer às seguintes
perguntas:
 Qual o principal objetivo da criação desse Mapa? Identificar frustrações, desvendar
problemas ou inovar? 
 Quais informações devem ser consideradas? (frequência de compra, dados demográficos,
status profissional, etc.); 
 Como planejar e implementar possíveis mudanças? Sem um plano de ação sólido, o
mapeamento da jornada do usuário será inútil.
Depois de definidas as metas e objetivos do seu mapa, é hora de colocar a mão na massa.

 Passo 2: Escolha suas Personas

As Personas são representações do seu cliente-alvo e podem incluir informações como idade, ocupação e
localização. 
Somente depois de selecionar suas personas primárias, você poderá tomar decisões de design, além de
avaliar pontos de empatia. Esses personagens fictícios também poderão servir como base para testes de
usuário que possam ser realizados para validar o site.

 Passo 3: Compilando dados 

Escolhida a persona que será o ponto central do seu mapa, é hora de compilar dados e feedback. 
Para isso, você deve identificar primeiro as diferentes rotas que os clientes percorrem dentro do seu site
ou aplicativo, e as pistas sobre como se sentem ao usá-los. Aqui estão algumas fontes comuns de
informação: 
 Pesquisas: as pesquisas de usuário ajudam a revelar por que certos clientes podem ficar
frustrados com seu produto.
 Mídias Sociais: a maneira como os clientes interagem com uma marca nas redes sociais
revela muito sobre a qualidade da experiência do usuário. As reclamações feitas por esses
canais, por exemplo, podem revelar insatisfações e problemas a serem resolvidos. 
 Solicitações de Atendimento ao Cliente: a última peça do quebra-cabeça são os dados de
suporte ao cliente. Se olhar de perto, você irá encontrar um baú de solicitações de
recursos, reclamações e dificuldades do cliente.

 Passo 4: Listando Pontos de Contato 

Alguns usuários podem acessar um site a partir de algum post em rede social, navegar
despretensiosamente por um catálogo de produtos e se inscrever em um newsletter.

Cada um desses estágios – da mídia social ao catálogo, e da inscrição na newsletter adiante – é um ponto
de contato na Jornada do Usuário. 

Seu objetivo aqui é visualizar o maior número possível de caminhos que uma determinada persona pode
seguir e anotar todos os pontos de contato ao longo do caminho. 

Para facilitar, você pode dividir essa jornada em três fases:

 Antes da compra: mídias sociais, sites de resenhas, blog posts, newsletters, vídeos e
depoimentos;
 No momento da compra: páginas do site, catálogo de produtos, gateway de pagamento,
chat ao vivo;
 Após a compra: e-mails de transações, suporte ao cliente, páginas de agradecimento.
 Passo 5: Ligue os pontos

Com todos os dados e uma lista de pontos de contato na mão, agora é hora de juntá-los. Para cada ponto
de contato, veja se você tem dados de clientes e feedback qualitativo para analisar.  
 Começando pelas redes sociais, os clientes estão cientes da sua presença? Quanto tráfego esses canais
direcionam para o seu site? O objetivo central aqui é traçar maneiras de aperfeiçoar esse ponto de
contato e com isso agregar mais valor. 

No caso do seu site ou aplicativo, como os usuários chegam até ele? Em quais páginas eles clicam mais?
Quais páginas eles ignoram? 

Outra pergunta importante a se fazer é se os clientes enfrentam muitos  obstáculos para conseguir

chegar aonde querem. Os pontos de contato são geralmente onde os clientes desistem, por isso são
também um bom lugar para investigar isso. 
No fim, você vai perceber que um padrão de emoções do cliente tende a surgir para cada ponto de
contato na jornada. Em algumas áreas, você também poderá ver insights sobre por que os clientes se
sentem de determinada maneira e como melhorar sua experiência.

 Passo 6. Torne seu Mapa visual

Há uma razão pela qual os recursos visuais ocupam uma função fundamental em UX: eles são
processados mais rapidamente, são facilmente compreensíveis e reforçam lembranças. 

Sendo assim, a melhor maneira de tornar o Mapa da Jornada do Usuário facilmente acessível a todas as
equipes é compilar todas as suas descobertas e inferências em um mapa prático e visual. 

Isso pode ser feito tanto com a ajuda de post-its quanto usando ferramentas online de mapeamento. 

 Passo 7: Deixe que todos da equipe participem

O mapeamento da jornada do cliente ficará incompleto sem a perspectiva de toda a equipe. Cada time
tem seu próprio conjunto de pontos de dados e experiências para adicionar mais nuances às suas
descobertas. 

A equipe de produto, por exemplo, pode apontar recursos que os clientes precisam, enquanto o time de
Marketing saberá definir mais precisamente o número ideal de pontos de contato. 

Já a equipe de suporte pode adicionar mais cor ao feedback do cliente, explicando a história por trás de
cada solicitação. 

 Passo 8: Compartilhe resultados e próximos passos

Depois de criar uma imagem completa da jornada do usuário, é o momento de identificar obstáculos e
encontrar soluções adequadas.

Em algumas áreas, a correção pode ser fácil: aumentar a velocidade do site, corrigir bugs, melhorar os
processos de checkout, etc. 

Outros problemas, no entanto, podem precisar de mais reflexão: lançar um novo aplicativo, melhorar os
tempos de resolução do suporte, tornar o design memorável. 

Nesse sentido, é crucial compartilhar todos os insights e possíveis soluções para garantir a efetividade do
seu mapa. Por fim, certifique-se de revisá-lo periodicamente, sempre buscando tornar a jornada mais
fluida e prazerosa possível para os usuários.

-----------------------------------------------------------------------------------------------------------------------------
Outras Menções:

Mapa da Jornada do Cliente

Um Mapa da Jornada do Cliente é uma visualização do processo pelo qual uma pessoa passa para atingir uma
meta. Na sua forma mais básica, o mapeamento da jornada começa compilando uma série de ações do usuário
em uma linha do tempo. Em seguida, a linha do tempo é enriquecida com pensamentos e emoções do usuário, a
fim de criar uma narrativa. Essa narrativa é condensada e polida, levando a uma visualização.

A maioria dos Mapas da Jornada do Cliente segue um formato semelhante: no topo, um usuário específico, um
cenário específico e as expectativas ou objetivos correspondentes nas fases intermediárias e de alto nível,
compostas por ações, pensamentos e emoções do
usuário; na parte inferior, os tópicos: oportunidades,
insights e propriedade interna.

Regiões do Mapa da Jornada do Cliente

Zona A, a lente: Fornece restrições para o mapa, atribuindo (1) uma persona (“quem”) e (2) o cenário a ser
examinado (“o quê”).

Zona B, a experiência: O coração do mapa é a

“experiência do usuário visualizada”, geralmente
alinhada em (3) fases fragmentáveis da jornada. As (4)
ações, (5) pensamentos e (6) a experiência emocional
do usuário ao longo da jornada podem ser
complementadas com citações ou vídeos da pesquisa.

Zona C, os insights: A saída deve variar de acordo com a

meta de negócios que o mapa suporta, mas pode
descrever os insights e pontos problemáticos
descobertos, e as (7) oportunidades para se concentrar
no futuro, bem como (8) na propriedade interna.

Componentes do Mapa da Jornada do

Cliente
Os mapas de viagem são de todas as formas e tamanhos. Independentemente da aparência, os mapas de jornada
têm os seguintes 5 elementos-chave em comum:

1. Ator / Ponto de Vista

O ator é a persona ou usuário que experimenta a jornada. O ator é sobre “de quem” é o Mapa da Jornada – um
ponto de vista. Os atores geralmente se alinham com as personas e suas ações no mapa estão enraizadas nos
dados.

Forneça um ponto de vista por mapa para criar uma narrativa forte e clara. Por exemplo, uma universidade pode
escolher um estudante ou um membro do corpo docente como ator – cada um resultaria em jornadas diferentes.
(Para capturar os dois pontos de vista, a universidade precisará criar dois mapas separados, um para cada um dos
dois tipos de usuários.)

2. Cenário + Expectativas
O cenário descreve a situação que o Mapa de Jornada aborda e está associado ao objetivo ou necessidade de um
ator e expectativas específicas. Por exemplo, um cenário pode ser “mudar o plano de telefonia para economizar
dinheiro”, e as expectativas incluem “encontrar facilmente todas as informações necessárias para tomar uma
decisão”.

Os cenários podem ser reais (para produtos e serviços existentes) ou antecipados – para produtos que ainda
estão no estágio de design.

Os Mapas de Jornada são melhores para cenários que envolvem uma sequência de eventos (como fazer compras
ou fazer uma viagem), descrevem um processo (portanto, envolvem um conjunto de transições ao longo do
tempo) ou podem envolver vários canais.

3. Fases da Jornada

As fases da jornada são os diferentes estágios de alto nível da jornada. Eles fornecem organização para o restante
das informações no Mapa da Jornada (ações, pensamentos e emoções). Os estágios variam de cenário para
cenário; cada organização geralmente possui dados para ajudá-lo a determinar quais são essas fases para um
determinado cenário. aqui estão alguns exemplos:

Para um cenário de comércio eletrônico (como comprar alto-falantes Bluetooth), os estágios podem ser:
descoberta, experimentar, comprar, usar, procurar suporte.

Para compras grandes (ou de luxo) (como dirigir um carro e comprar um carro), os estágios podem ser:
engajamento, educação, pesquisa, avaliação, justificativa.

Para um cenário business-to-business (como a implantação de uma ferramenta interna), os estágios podem ser:
compra, adoção, retenção, expansão, advocacia.

4. Ações, mentalidades e emoções

Esses são comportamentos, pensamentos e sentimentos que o ator tem ao longo da jornada e são mapeados em
cada uma das fases da jornada.

Ações são os comportamentos reais e as etapas executadas pelos usuários. Este componente NÃO pretende ser
um log passo a passo de cada interação. Pelo contrário, é uma narrativa dos passos que o ator dá durante essa
fase.

As mentalidades correspondem aos pensamentos, perguntas, motivações e necessidades de informações dos

usuários em diferentes estágios da jornada. Idealmente, esses são verbos de clientes da pesquisa.

As emoções são traçadas como uma única linha ao longo das fases da jornada, literalmente sinalizando os “altos e
baixos” emocionais da experiência. Pense nessa linha como uma camada contextual de emoção que nos diz onde
o usuário está satisfeito ou frustrado.

5. Oportunidades

Oportunidades (junto com contexto adicional, como propriedade e métricas) são informações obtidas com o
mapeamento; eles falam sobre como a experiência do usuário pode ser otimizada. Insights e oportunidades
ajudam a equipe a extrair conhecimento do mapa:

“O que precisa ser feito com esse conhecimento?”

“Quem é o dono de que mudança?” (time de marketing, CS, etc)

“Onde estão as maiores oportunidades?”

“Como vamos medir as melhorias que implementamos?”

Exemplo: Trocar de Plano Celular

Um exemplo de um mapa simplista e de alto nível da Jornada do Cliente que descreve como a pessoa “João”
muda seu plano de telefonia. Embora todos os Mapas de Jornada abrangentes devam incluir componentes-chave,
o que o mapa escolhe para priorizar pode (e deve) depender do objetivo da iniciativa de mapeamento de jornada.

Variações no Mapa da Jornada do Cliente

Existem vários conceitos intimamente relacionados e, portanto,
facilmente confundidos com os Mapas de Jornada

• Mapa da Jornada do Cliente vs. Mapa de Experiência

Pense em um Mapa de Experiência como o pai de um Mapa da Jornada do Cliente. Um Mapa da Jornada possui
um ator específico (um cliente ou usuário singular de um produto) e um cenário específico (de um produto ou
serviço), enquanto um mapa de experiência é mais amplo em ambas as coisas – uma pessoas genérico passando
por uma experiência geral.

O Mapa da Experiência é independente de um negócio ou produto específico. É usado para entender um

comportamento humano geral; por outro lado, um Mapa de Jornada do Cliente é específico e focado em um
negócio ou produto específico.

Exemplo – Mercado de compartilhamento de viagem

Imagine o mundo antes da existência do segmento de compartilhamento de viagens (Uber, Lyft, Bird, para citar
alguns). Se criarmos um Mapa da Experiência de como uma pessoa se desloca de um lugar para outro, o mapa
provavelmente incluirá caminhadas, ciclismo, direção, passeio com um amigo, transporte público ou táxi.

Usando esse Mapa de Experiência, pudemos isolar os pontos problemáticos: tarifas desconhecidas, mau tempo,
tempo imprevisível, pagamento em dinheiro e assim por diante. Usando esses pontos problemáticos, criaríamos
um futuro Mapa da Jornada para um produto específico: “como um determinado tipo de usuário chama um carro
usando o aplicativo Lyft?”

• Mapa da Jornada do Cliente vs Blueprint de Serviço

Se os Mapas de Jornada são os filhos dos Mapas de Experiência, as Blueprints de Serviço são os netos. Eles
visualizam os relacionamentos entre diferentes componentes de serviço (como pessoas ou processos) em vários
pontos de contato em uma jornada específica do cliente.

Pense nas Blueprints de Serviço como a parte dois dos Mapas de Jornada do Cliente. São extensões de Mapas de
Jornada, mas, em vez de se concentrarem no usuário (e assumirem o ponto de vista do usuário), estão focados
nos negócios (e adotam sua perspectiva).

Exemplo

Para o cenário da Lyft / Uber (acima), pegaríamos o Mapa da Jornada e o expandiríamos com o que a Lyft faz
internamente para dar suporte à jornada do cliente. O projeto pode incluir a correspondência do usuário com um
motorista, entrar em contato com o motorista, calcular tarifas e assim por diante.

• Mapa da Jornada do Cliente vs Mapa de História do Usuário

Os Mapas de Histórias de Usuário são usadas no Agile para planejar features ou funcionalidades. Cada recurso é
resumido em uma descrição deliberadamente breve do ponto de vista do usuário; a descrição se concentra no
que o usuário deseja fazer e em como esse recurso ajudará.

O formato típico de uma história de usuário é uma frase única: “Como [tipo de usuário], quero [meta], para que
[benefício].” Por exemplo, “Como titular de conta corrente, quero depositar cheques com o meu dispositivo
móvel, para que eu não precise ir ao banco. “

Dica de leitura: conheça os frameworks para priorizar features.

Um Mapa da História do Usuário é uma versão visual de uma história do usuário. Por exemplo, considere a
história do usuário acima (“Como titular de uma conta corrente, desejo depositar cheques no meu dispositivo
móvel, para não precisar ir ao banco”.) E imagine escrever as diferentes etapas que o A equipe planeja que o
usuário tome ao usar essa funcionalidade.

Essas etapas podem ser: efetuar login, iniciar o depósito, tirar uma foto do cheque e inserir os detalhes da
transação. Para cada etapa, podemos documentar os features necessários: permitir acesso à câmera, verificar
números de verificação e preenchimento automático e autorizar assinatura. Em um mapa da história do usuário,
essas features são escritos em post-it e organizados com base no release do produto ao qual cada funcionalidade
será adicionada. (Você também pode usar serviços como o Mural.io para fazer o mapeamento digitalmente)

Embora, à primeira vista, um Mapa de História do Usuário possa parecer um Mapa de Jornada, os mapas de
jornada são destinados à descoberta e compreensão, enquanto os mapas de história do usuário são para
planejamento e implementação. Eles podem conter algumas das mesmas peças, eles são usados em diferentes
pontos do processo. Exemplo:

Imagine que nosso Mapa de Jornada para Lyft/Uber indicou que um ponto problemático para o usuario aparece
quando ele esta em um grande grupo. Para resolvê-lo, a equipe pode introduzir uma opção de chamar vários
carros. Poderíamos criar um Mapa da História do Usuário para dividir essa feature (chamada multicar) em
pedaços menores, para que uma equipe de desenvolvimento de produtos pudesse planejar ciclos de lançamento
e tarefas correspondentes.

Porque você precisa do Mapa da Jornada do Cliente (e quando faze-lo)

Os Mapas da Jornada do Cliente sempre devem ser criados para suportar uma estrategia e meta de negócios
conhecida. Os mapas que não se alinham a uma meta de negócios não resultam em insights aplicáveis. O objetivo
pode ser um problema externo, como aprender sobre os comportamentos de compra de uma pessoa específica
ou um problema interno, como abordar a falta de propriedade sobre determinadas partes da experiência do
cliente.

Algumas metas comerciais em potencial às quais o mapeamento da jornada do cliente pode ser aplicado são:

 Muda a perspectiva de uma empresa de “de dentro para fora” para “de fora para dentro”. Se uma
empresa permitir que processos e sistemas internos conduzam decisões que afetam a experiência do
cliente, um Mapa da Jornada pode ajudar a transformar a cultura dessa organização, concentrando-se
novamente nos pensamentos, ações e emoções dos clientes. O mapeamento de jornada lança luz sobre
experiências humanas reais sobre as quais as empresas geralmente sabem muito pouco.
 Divida os silos para criar uma visão compartilhada em toda a organização . Como os mapas de jornada
criam uma visão de TODA a jornada do cliente, eles se tornam uma ferramenta para criar conversação e
colaboração entre departamentos. O mapeamento de jornada pode ser o primeiro passo na construção
de um plano de ação para toda a empresa para investir na experiência do cliente, pois ajuda a responder
à pergunta “Por onde começamos?”, destacando as áreas de atrito.
 Atribua responsaveis dos departamentos internos aos principais pontos encontrados Freqüentemente,
existem áreas de inconsistências e falhas nas jornadas dos clientes simplesmente porque nenhuma
equipe interna foi encarregada a esses pontos. Os Mapas de Jornada podem criar clareza quanto ao
alinhamento de departamentos, grupos com diferentes estágios ou pontos de contato importantes na
jornada que precisam ser abordados.
 Segmente clientes específicos. Os Mapas da Jornada podem ajudar as equipes a se concentrarem em
personas ou clientes específicos, isso significa entender diferenças ou semelhanças nas jornadas de várias
personas, priorizar uma persona de alto valor ou explorar maneiras de atingir um novo tipo de cliente.
 Entenda os dados quantitativos. Se você estiver ciente, por meio da análise ou de outros dados
quantitativos, de que algo específico está acontecendo – talvez as vendas online estejam no platô ou uma
ferramenta online esteja sendo subutilizada – o mapeamento de jornada pode ajudá-lo a descobrir o
porquê.

Regras para criar um Mapa da Jornada do Cliente

O mapeamento da Jornada é um processo colaborativo, informado por objetivos bem definidos e construído a
partir de pesquisas.

Os mapas de jornada bem-sucedidos exigem mais do que apenas a inclusão dos elementos “certos”. O
mapeamento da jornada deve ser um processo colaborativo, informado por objetivos bem definidos e construído
a partir de pesquisas. Requer um trabalho árduo para manter o processo no caminho certo e criar o apoio
necessário para evangelizar as idéias que ele fornece. Abaixo estão algumas dicas para garantir que o processo
comece e permaneça na direção certa:

 Estabeleça o “porquê e o” o que “.

Primeiro, identifique a meta de negócios que o mapa de jornada suportará. Verifique se há respostas
claras para essas perguntas-chave básicas antes de iniciar o processo:
o Qual objetivo de negócios este mapa de jornada suporta?
o Quem o usará?
o Sobre quem é e qual a experiência que ele aborda?
o Como será compartilhado?
 Baseie-o na verdade.
Os Mapas da Jornada devem resultar em narrativas verdadeiras, não em “contos de fadas”. Comece com
a coleta de qualquer pesquisa existente, mas também são necessárias pesquisas adicionais para
 preencher as lacunas que a pesquisa existente não cobrirá. Este é um processo de pesquisa qualitativa.
Embora os dados quantitativos possam ajudar a apoiar ou validar (ou ajudar a convencer as Stakeholders
que podem ver os dados qualitativos como “imprecisos”), apenas os dados quantitativos não
representam a historia completa.
 Colabore com outras pessoas.
A atividade de mapeamento de jornada (não o resultado propriamente dita) é frequentemente a parte
mais valiosa do processo, portanto envolve outras pessoas, por isso convide os stakeholders de vários
grupos (e outros participantes) para fazer parte da compilação dos dados e da construção do mapa.
 Não pule para a visualização.
A tentação de criar um gráfico estético ou pular para o design pode levar a Mapas da Jornada bonitos,
porém falhos. Certifique-se de que a síntese dos seus dados esteja completa e bem compreendida antes
de começar a criar o visual.
 Envolva outras pessoas com o produto final.
Não espere receber o comprometimento e fomentar o interesse no seu Mapa de Jornada enviando um
simples gráfico como anexo de email. Torne um documento vivo e interativo do qual as pessoas possam
fazer parte. Leve o mapa em reuniões e conversas para promover uma narrativa em que outras pessoas
acreditem e comecem a fazer referência. Dica: crie um showroom dos mapeamento de jornada, para que
qualquer pessoa que não faça parte da equipe direta possa acompanhar o processo e os artefatos
resultantes.

4 etapas para mapear a jornada do cliente

Uma frustração comum sobre o processo de mapeamento da jornada do cliente é a falta de padronização em
toda empresa ou mesmo em todo o setor. Quais são as principais etapas do mapeamento de jornada e em que
ordem elas devem ser concluídas?

O mapeamento eficaz da jornada do cliente segue cinco etapas principais de alto nível:

1. Alinhamento do Time: Construindo uma equipe multidisciplinar básica e definindo o escopo da iniciativa
de mapeamento.
2. Investigação interna: Reunindo dados de clientes existentes e pesquisas existentes em toda a empresa.
3. Formulação de Insights: Formular uma hipótese do estado atual da jornada e planejar pesquisas
adicionais de clientes
4. Pesquisa externa: coletar novos dados do usuário para validar (ou invalidar) o mapa de jornada da
hipótese
5. Visualização da Narrativa: Combinando idéias existentes e novas pesquisas para criar uma narrativa
visual que retrate a jornada do cliente de maneira sólida

Etapa 1: Alinhamento do Time

A primeira fase do processo de mapeamento da jornada do cliente começa bem antes de qualquer pesquisa ou
visualização. Essa etapa é facilmente a mais crítica, porque, não importa quantas informações um mapa revele,
um mapeamento de jornada sem foco ou comprometimento não será eficaz para otimizar a experiência.
 A. Determinar o escopo e objetivos

Um escopo ou ponto de vista para o mapa deve ser estabelecido antes do início das atividades de
mapeamento. Para criar foco e clareza para o mapa, certifique-se de responder a estas perguntas: “De quem
experiência vou mapear? Que experiência ou jornada vou descrever? ”.

Além disso, certifique-se de que você e sua equipe principal (seus aliados) compartilhem um entendimento
mútuo sobre as respostas a essas perguntas. Normalmente, o “quem” é uma persona crítica ou segmento de
público, e o “o quê” é uma jornada ou cenário priorizado que tem impacto no ROI ou na retenção e
relacionamentos de longo prazo do cliente.

B. Estabelecer uma equipe interdisciplinar e engajar os stakeholders

Durante um esforço de mapeamento de jornada, você deve trazer os stakeholders. Sem dúvida, o
mapeamento de jornada revelará lacunas e oportunidades na experiência do usuário que, organizacionalmente,
estão além da autoridade do profissional de UX que conduz o projeto de mapeamento.

Você deve ter a adesão e o envolvimento de uma equipe multidisciplinar, para que, quando essas questões e
oportunidades surgirem, os stakeholders com autoridade para tomar decisões já estejam convencidas da solidez
do seu método e aptas a entender a importância de resolver os problemas que ele apresenta. encontrado.

Criar uma equipe de aliados é mais fácil do que você imagina. Antes de começar o mapeamento, identifique os
stakeholders de vários departamentos cujo conhecimento será útil ao longo do caminho e cuja ajuda você poderá
precisar quando as oportunidades começarem a surgir. Você precisará explicar o valor do mapeamento de
jornada e o que espera realizar e solicitar que essas partes interessadas sejam patrocinadoras do projeto em seus
respectivos departamentos (por exemplo, marketing, P&D, análise de negócios ou outras áreas relevantes).

A aquisição de aliados pode ser um processo rápido ou demorado, dependendo da sua situação: se você
estiver trabalhando em um projeto pequeno, pode ser simplesmente uma conversa de 30 minutos com sua
equipe; por outro lado, pode ser um processo longo se você trabalhar com um cliente B2B ou se envolver em uma
iniciativa de mapeamento de jornada em toda a empresa.

Etapa 2: Investigação Interna

Depois que sua equipe principal for estabelecida e seu escopo determinado, comece a pesquisar em sua própria
empresa. O que sua empresa já sabe sobre o cliente ou usuário? A maioria das empresas possui dados espalhados
por equipes; esses dados podem ser úteis quando reunidos para criar uma compreensão holística do estado atual
da jornada.

A. Envie uma equipe de pesquisa

Você não precisa realizar toda essa pesquisa por conta própria. Coloque sua equipe principal para trabalhar.
Juntos, gere uma lista de perguntas que você gostaria de responder e envie seus aliados de volta às respectivas
equipes ou departamentos para procurar qualquer documentação ou dados disponíveis que possam ajudar a
começar a responder a essas perguntas. Bons lugares para começar incluem:

o Pesquisas de mercado;
o Auditorias de marca;
o Registros de call center ou de suporte ao cliente;
o Pesquisas no site ou feedback de VOC (voz do cliente);
o Resultados das reuniões do conselho consultivo do cliente (CAB)

B. Realize entrevistas com os stakeholders

Com essas primeiras pistas em mãos, entreviste seus stakeholders para obter informações adicionais. Use os
dados internos que você encontrou para moldar as entrevistas. Por exemplo: a pesquisa de mercado revelou que
há falta de confiança? Talvez a equipe de vendas tenha informações sobre o porquê. Crie guias de entrevista
específicos para cada função que possam trazer clareza às suas descobertas. Uma lista típica de funções a serem
entrevistadas pode ser:

o Membros da equipe de vendas;

o Membros da equipe de marketing;
o Gestão;
o Membros da equipe de suporte (por exemplo, representantes de suporte técnico)
o Membros da equipe de P&D ou POs

Espalhe sua pesquisa pelas areas típicas da organização, como produtos, canais. Se você tiver pouco tempo,
conduza grupos focais compostos por 3 a 4 funcionários internos em posições semelhantes.

Etapa 3: Formulação de Insights

Quando você terminar a fase 2, provavelmente terá coletado informações suficientes para formular uma hipótese
experimental sobre como são determinadas partes da jornada do cliente e quais são os pontos problemáticos.
Comece definindo essa hipótese em uma estrutura de rascunho, chamada mapa de suposição ou mapa de
hipótese.

A. Sintetize a pesquisa interna

Primeiro, junte a pesquisa interna a uma história coerente. Compartilhe insights sintetizados com sua equipe
principal e com qualquer outro stakeholder que precise estar envolvida. Realize pequenos compartilhamentos de
pesquisa ou sessões informais.

B. Crie um rascunho do Mapa de Hipóteses

Quando sua equipe tiver um entendimento compartilhado dos insights reunidos até agora, reúna-os para uma
atividade de mapeamento coletivo. É útil realizar uma breve sessão do workshop para mapear a estrutura
preliminar (ou mapa de hipóteses). Você pode até convidar clientes para esta reunião, para que suas
contribuições moldem o rascunho inicial. Lembre-se: este é um rascunho e precisa ser validado com relação a
pesquisas externas.

Etapa 4: Pesquisa Externa

Quando o rascunho do mapa estiver completo, usando dados e informações de sua investigação interna, a
próxima etapa é validá-lo com a pesquisa do cliente para preencher lacunas.

A. Use o Mapa de Hipóteses para moldar sua pesquisa de usuário

O mapa de hipóteses provavelmente revelará grandes lacunas na jornada do cliente que você não consegue
visualizar porque não existem dados. Essas áreas são críticas a serem exploradas na pesquisa com clientes, para
que, no final do processo, não haja buracos no entendimento. Além disso, você precisará validar (ou invalidar) o
mapa de hipóteses.

B. Use métodos qualitativos de pesquisa para validar e preencher lacunas

Escolha métodos de pesquisa que colocam você em linha direta de observação com seus clientes ou usuários.
Use uma abordagem multifacetada – selecione e combine vários métodos para revelar insights de diferentes
ângulos. Dependendo do contexto do seu projeto, alguns métodos relevantes para a pesquisa de mapeamento de
jornada incluem:

o Entrevistas com clientes;

o Observação direta;
 o Inquérito contextual;
o Estudos diários;

Se o seu orçamento ou cronograma for limitado, basta um pequeno tamanho de amostra (6 a 8 participantes
da pesquisa) para começar. Lembre-se de continuar a envolver sua equipe principal de stakeholders ao longo do
caminho, compartilhando as descobertas da pesquisa, para que não fiquem chocadas se algo mudar dentro do
rascunho do mapa da jornada que eles ajudaram a construir.

Etapa 5: Visualização da Narrativa

O mapa em si é simplesmente uma ferramenta que o ajudará a compartilhar suas descobertas de pesquisa de
maneira envolvente com outras pessoas. Nesse ponto, você precisa criar uma narrativa visual que comunique a
jornada e todos os momentos críticos, pontos problemáticos e pontos altos dela. Um bom método é ter outro
workshop com sua equipe principal. Tendo construído o contexto e o terreno comum em todo o processo de
pesquisa, reúna-os e elabore o mapa de hipóteses com base nos resultados de sua pesquisa primária.

A partir daqui, você pode determinar o que fazer a seguir. Se você tiver uma equipe pequena e engajada, essa
versão produzida coletivamente (provavelmente não polida, com post-its ou quadro virtual) pode ser suficiente
para avançar. Se você estiver trabalhando com um cliente ou precisar compartilhar suas idéias de maneira formal,
pode ser necessário criar um visual sofisticado.

------------------------------------------------------------
User Research
O design da experiência do usuário (UX) é o processo de projetar produtos úteis, fáceis de usar e prazerosos de se
envolver. Trata-se de aprimorar toda a experiência que as pessoas têm ao interagir com um produto e garantir
que encontrem valor, satisfação e prazer. Se um pico de montanha representa esse objetivo, empregar vários
métodos de pesquisa de UX é o caminho que os designers de UX usam para chegar ao topo da montanha.

Há uma lista longa e abrangente de métodos de pesquisa de UX empregados por pesquisadores de usuários , mas
no centro está o usuário e como ele pensa e se comporta – suas necessidades e motivações. Normalmente, a
pesquisa de UX faz isso por meio de técnicas de observação, análise de tarefas e outras metodologias de
feedback.

Existem dois tipos principais de pesquisa de usuários: 

quantitativa (estatística: pode ser calculada e computada; concentra-se em números e cálculos matemáticos)

e qualitativa (insights: preocupada com descrições, que podem ser observadas, mas não computadas).

Quantitativa
A pesquisa quantitativa é principalmente pesquisa exploratória e é usada para quantificar o problema por meio
da geração de dados numéricos ou dados que podem ser transformados em estatísticas utilizáveis. Alguns
métodos comuns de coleta de dados incluem várias formas de pesquisas – pesquisas online, pesquisas em papel,
pesquisas móveis e pesquisas em quiosques, estudos longitudinais, interceptadores de sites, pesquisas online e
observações sistemáticas.

Essa forma de pesquisa do usuário também pode incluir análises, como o Google Analytics.
O Google Analytics faz parte de um conjunto de ferramentas interconectadas que ajudam a interpretar os dados
dos visitantes do seu site, incluindo o Data Studi , uma poderosa ferramenta de visualização de dados, e o Google
Optimize, para executar e analisar testes A/B dinâmicos.

Os dados quantitativos das plataformas de análise devem, idealmente, ser equilibrados com insights qualitativos
coletados de outros métodos de teste de experiência do usuário, como grupos focais ou testes de usabilidade. Os
dados analíticos mostrarão padrões que podem ser úteis para decidir quais suposições devem ser testadas
posteriormente.

Qualitativa
A pesquisa qualitativa do usuário é uma avaliação direta do comportamento com base na observação. Trata-se de
entender as crenças e práticas das pessoas em seus termos. Pode envolver vários métodos diferentes, incluindo
observação contextual, estudos etnográficos, entrevistas, estudos de campo e testes moderados de usabilidade.

Jakob Nielsen, do Nielsen Norman Group , acredita que, no caso da pesquisa de UX, é melhor enfatizar os insights
(pesquisa qualitativa) e que, embora a quantidade tenha algumas vantagens, a pesquisa qualitativa decompõe
informações complicadas, tornando-as fáceis de entender e, em geral, oferece melhor resultados mais
econômicos - em outras palavras, é muito mais barato encontrar e corrigir problemas durante a fase de projeto
antes de começar a construir. Muitas vezes, a informação mais importante não é quantificável, e ele continua
sugerindo que “estudos quantitativos são muitas vezes muito limitados para serem úteis e, às vezes, são
diretamente enganosos”.

Se você pode fazer apenas uma atividade e visa melhorar um sistema existente, faça testes de usabilidade
qualitativos (pensar em voz alta), que é o método mais eficaz para melhorar a usabilidade. Se você não conseguir
testar com os usuários, analise o máximo possível de dados do usuário. Os dados (obtidos, por exemplo, de
registros de chamadas, pesquisas ou análises) não são um bom substituto para as pessoas, porque os dados
geralmente informam o quê, mas muitas vezes você precisa saber o porquê . Portanto, use as perguntas que seus
dados trazem para continuar a impulsionar os testes de usabilidade.

Principais métodos de pesquisa de UX e quando usá-los

 Card Sorting (classificação de cartões):
Permite que os usuários agrupem e classifiquem as informações de um site em uma estrutura lógica que
normalmente conduzirá a navegação e a arquitetura de informações do site. Isso ajuda a garantir que a
estrutura do site corresponda à maneira como os usuários pensam.

 Contextual Interviews (Entrevistas contextuais):

Permite a observação de usuários em seu ambiente natural, dando-lhe uma melhor compreensão da
forma como os usuários trabalham.

 First Click Testing (Teste de Primeiro Clique):

Um método de teste focado na navegação, que pode ser executado em um site em funcionamento, um
protótipo ou um wireframe.

 Focus Groups (Grupos Focais):

Discussão moderada com um grupo de usuários, permitindo insights sobre as atitudes, ideias e desejos do
usuário.
 Heuristic Evaluation/Expert Review (Avaliação Heuristica/Revisão de Especialistas):
Um grupo de especialistas em usabilidade avaliando um site em relação a uma lista de diretrizes
estabelecidas.

 Interviews (Entrevistas):
Discussões individuais com usuários mostram como um determinado usuário funciona. Eles permitem
que você obtenha informações detalhadas sobre as atitudes, desejos e experiências de um usuário.

 Parallel Design (Design Paralelo):

Uma metodologia de design que envolve vários designers que buscam o mesmo esforço

simultaneamente, mas de forma independente, com a intenção de combinar os melhores aspectos de
cada um para a solução final.

 Personas (personas):
A criação de um usuário representativo com base em dados disponíveis e entrevistas com
usuários. Embora os detalhes pessoais da persona possam ser fictícios, as informações usadas para criar o
tipo de usuário não são.

 Prototyping (Prototipagem):
Permite que a equipe de design explore ideias antes de implementá-las, criando uma maquete do
site. Um protótipo pode variar de uma maquete em papel a páginas HTML interativas.

 Surveys (Pesquisas):  
Uma série de perguntas feitas a vários usuários do seu site que ajudam você a saber mais sobre as
pessoas que visitam seu site.

 System Usability Scale (SUS) (Escala de Usabilidade do Sistema - SUS):

O SUS é uma escala de dez itens independente de tecnologia para avaliação subjetiva da usabilidade.

 Task Analysis (Análise de Tarefas):

Envolve aprender sobre os objetivos do usuário, incluindo o que os usuários desejam fazer em seu site, e
ajuda você a entender as tarefas que os usuários realizarão em seu site.

 Usability Testing (Teste de Usabilidade):

Identifica frustrações e problemas do usuário com um site por meio de sessões individuais em que um
usuário “real” executa tarefas no site que está sendo estudado.

 Use Cases (Casos de Uso):

Fornece uma descrição de como os usuários usam um recurso específico do seu site. Eles fornecem uma
visão detalhada de como os usuários interagem com o site, incluindo as etapas que os usuários seguem
para realizar cada tarefa.
Você pode fazer pesquisas de usuário em todos os estágios ou em qualquer estágio em que esteja atualmente. No
entanto, o Nielsen Norman Group aconselha que a maior parte seja feita durante as fases iniciais, quando terá o
maior impacto. 

Aqui está um diagrama listando as opções recomendadas que podem ser feitas à medida que um projeto passa
pelos estágios de design. O processo varia e pode incluir apenas algumas coisas na lista durante cada fase. Os
métodos mais usados são mostrados em negrito.
Cada projeto é diferente, portanto, as etapas nem sempre são compartimentadas de maneira organizada. O fim
de um ciclo é o início do próximo.

O importante não é executar uma lista gigante de atividades em uma ordem rígida, mas começar de algum lugar e
aprender mais e mais à medida que avança.
 Principais métodos de pesquisa de UX
• Estudo de campo
• Estudo diário
Descobrir
• Entrevista com o usuário
(Discover)
• Entrevista com as partes interessadas
• Levantamento de requisitos e restrições
• Análise competitiva
• Revisão de design
• Construção de persona
Explorar • Análise de tarefas
(Explore) • Mapeamento de jornada
• Feedback e teste de protótipo (protótipos clicáveis ou em papel)
• Escrever histórias de usuários
• Classificação de cartões
• Teste qualitativo de usabilidade (presencial ou remoto)
Teste
• Teste de benchmark
(Test)
• Avaliação de acessibilidade
• Pesquisa
• Revisão analítica
Ouvir
• Análise de log de pesquisa
(Listen)
• Revisão de bugs de usabilidade
• Revisão de perguntas frequentes (FAQ)

Descobrir
A fase de descoberta é quando você tenta iluminar o que não sabe e entender melhor o que as pessoas precisam.
É especialmente importante fazer atividades de descoberta antes de fazer um novo produto ou recurso, para que
você possa descobrir se faz sentido fazer o projeto .

Boas coisas para fazer durante a descoberta:

 Realize estudos de campo e entreviste os usuários: vá aonde os usuários estão, observe, pergunte e ouça.
Observe as pessoas no contexto interagindo com o sistema ou resolvendo os problemas para os quais
você está tentando fornecer soluções.
 Execute estudos diários para entender as necessidades de informação e os comportamentos de seus
usuários.
 Entreviste as partes interessadas para reunir e entender os requisitos e restrições de negócios.
 Entrevistar equipe de vendas, suporte e treinamento. Quais são os problemas e dúvidas mais frequentes
que eles ouvem dos usuários? Quais são os piores problemas que as pessoas têm? O que deixa as pessoas
com raiva?
 Ouça as chamadas de vendas e suporte. O que as pessoas perguntam? O que eles têm problemas para
entender? Como a equipe de vendas e suporte explica e ajuda? Qual é a incompatibilidade de vocabulário
entre usuários e funcionários?
 Faça testes competitivos. Encontre os pontos fortes e fracos nos produtos de seus concorrentes.
Descubra o que os usuários mais gostam.

Explorar
Os métodos de exploração são para entender o espaço do problema e o escopo do projeto e atender às
necessidades do usuário de forma adequada.

 Compare os recursos com os concorrentes.

 Faça revisões de design.
 Use a pesquisa para criar personas de usuários e escrever histórias de usuários.
 Analise as tarefas do usuário para encontrar maneiras de economizar tempo e esforço das pessoas.
  Mostre às partes interessadas a jornada do usuário e onde estão as áreas de risco para a perda de
clientes ao longo do caminho. Decidam juntos como seria uma jornada de usuário ideal.
 Explore as possibilidades de design imaginando muitas abordagens diferentes, fazendo brainstorming e
testando as melhores ideias para identificar os melhores componentes de design a serem retidos.
 Obtenha feedback sobre os fluxos de tarefas em estágio inicial percorrendo os designs com as partes
interessadas e especialistas no assunto. Peça reações e perguntas por escrito (tempestade de ideias
silenciosa), para evitar o pensamento de grupo e permitir que as pessoas que podem não falar em um
grupo digam o que as preocupa.
 Iterar projetos testando protótipos de papel com usuários-alvo e, em seguida, testar protótipos
interativos observando as pessoas usá-los. Não colete opiniões. Em vez disso, observe como os designs
funcionam bem para ajudar as pessoas a concluir tarefas e evitar erros. Deixe que as pessoas lhe mostrem
onde estão as áreas problemáticas, depois redesenhe e teste novamente.
 Use a classificação de cartões para descobrir como as pessoas agrupam suas informações, para ajudar a
informar seu esquema de organização de informações e navegação.

Teste
Métodos de teste e validação são para verificar projetos durante o desenvolvimento e além, para garantir que os
sistemas funcionem bem para as pessoas que os utilizam.

 Faça testes qualitativos de usabilidade. Teste cedo e frequentemente com uma gama diversificada de
pessoas, sozinhas e em grupos. Realizar uma avaliação de acessibilidade para garantir o acesso universal.
 Peça às pessoas que relatem suas interações e quaisquer incidentes interessantes ao usar o sistema ao
longo do tempo, por exemplo, com estudos diários.
 Audite as aulas de treinamento e observe os tópicos, as perguntas que as pessoas fazem e as respostas
dadas. Instruções de teste e sistemas de ajuda.
 Converse com grupos de usuários.
 Equipe contas de mídia social e converse com usuários online. Monitore as mídias sociais em busca de
elogios e reclamações.
 Analise as postagens do fórum do usuário. Fóruns de usuários são fontes de perguntas importantes a
serem abordadas e respostas que resolvem problemas. Traga esse aprendizado de volta para a equipe de
design e desenvolvimento.
 Faça testes de benchmark: se você estiver planejando uma grande reformulação ou melhoria de medição,
teste para determinar o tempo na tarefa, a conclusão da tarefa e as taxas de erro do seu sistema atual,
para que você possa avaliar o progresso ao longo do tempo.

Ouvir
Ouça durante todo o ciclo de pesquisa e design para ajudar a entender os problemas existentes e procurar novos
problemas. Analise os dados coletados e monitore as informações recebidas em busca de padrões e tendências.

 Pesquise clientes e usuários em potencial.

 Monitore análises e métricas para descobrir tendências e anomalias e avaliar seu progresso.
 Analise as consultas de pesquisa: o que as pessoas procuram e como chamam? Os logs de pesquisa
geralmente são ignorados, mas contêm informações importantes.
 Facilite o envio de comentários, relatórios de bugs e perguntas. Analise os canais de feedback recebidos
periodicamente para os principais problemas de usabilidade e áreas problemáticas. Procure pistas sobre o
que as pessoas não conseguem encontrar, seus mal-entendidos e quaisquer efeitos não intencionais.
 Recolha as perguntas mais frequentes e tente resolver os problemas que representam.
 Administre estandes em conferências das quais seus clientes e usuários participam para que eles possam
oferecer informações e falar diretamente com você.
 Faça palestras e demonstrações: capture perguntas e preocupações.
------------------------------------------------------------------------------------------------------------------------------

Outras Menções:

Métodos e estruturas de pesquisa de UX

 Personas e mapas de empatia

Personas e mapas de empatia servem como guias para entender melhor quem são os principais usuários
e o que se passa em suas mentes.
Aplicando Personas e Mapas de Empatia:
Personas e mapas de empatia são um poderoso conjunto de ferramentas que os pesquisadores de
UX podem usar para cenários de uso, personagens para mapas de experiência e storyboards e como um
ponto focal para ideação.
Por exemplo, se tivermos um atributo de persona que sinaliza “impaciente/ocupado/sempre com
pressa”, podemos tomar certas decisões de design que permitem a esse usuário tomar atalhos dentro do
produto e, assim, economizar tempo.
Outro uso de personas é colocar todos (produto, engenharia, marketing, vendas e atendimento ao
cliente) na mesma página sobre quem são os usuários, facilitando assim uma experiência de usuário mais
unificada.

 Entrevistas de usuários
As entrevistas com usuários são sessões individuais que podem ser realizadas de várias maneiras
(pessoalmente, grupos focais, etc.), embora cada vez mais sejam realizadas remotamente usando
aplicativos de vídeo como Skype ou Zoom. Outro método popular é o estilo de entrevista de guerrilha, em
que um pesquisador de usuários realiza entrevistas no estilo “drop-in” em uma seleção aleatória de
usuários (como em uma cafeteria).
Entrevistas com usuários exigem muita habilidade para obter informações valiosas. O pesquisador UX
está tentando aprender como um usuário se sente sobre um tópico específico, produto, serviço, etc., e é
importante que eles escutem mais do que falem, registrem feedback qualitativo, observem e evitem
perguntas sugestivas.
As entrevistas devem ser realizadas com usuários que se encaixem nas personas do usuário.
Implementando dados de entrevista do usuário:
Entrevistas com usuários resultam em dados qualitativos. Com esses dados, podemos usar estruturas
como análise temática, que é o processo de identificação de padrões e temas usando dados qualitativos.
Um exemplo é uma entrevista com o usuário com o objetivo de obter feedback para um conjunto de
relatórios produzidos por um aplicativo.
As entrevistas com o usuário são concluídas e os dados são analisados por meio de análise temática que
mostra um tema de customização. Podemos supor que nossos usuários desejam personalizar seus
relatórios e ter mais controle sobre eles. Essa suposição pode então ser testada com mais pesquisas de
UX.
Outro uso prático das entrevistas com usuários é a oportunidade de ouvir e observar. Os usuários tendem
a dar muitas pistas durante uma entrevista, como fazer comentários verbais ou gestos não verbais. Essas
observações podem fornecer informações sobre como os usuários estão realmente se sentindo e
pensando.
 pesquisas
As pesquisas são escaláveis, baratas e uma maneira rápida de coletar informações específicas de usuários
que se encaixam nas personas que definimos no início do processo de pesquisa.
Embora as pesquisas sejam certamente uma ótima ferramenta, elas não devem ser usadas
exclusivamente. As pesquisas devem ser realizadas com usuários que se encaixem nas personas do
usuário.
Empregando os resultados da pesquisa:
As pesquisas fornecem um conjunto flexível de dados para trabalhar. Por exemplo, poderíamos ter a ideia
de criar um aplicativo de compra de carros que calculasse automaticamente a taxa de seguro de carro
para cada listagem.
Antes de gastar tempo e dinheiro para desenvolver o aplicativo, pesquisas podem ser usadas para coletar
rapidamente informações de um grande número de usuários para ver se é algo que as pessoas realmente
precisam.
Se as pesquisas forem combinadas com testes de usabilidade, elas podem ajudar a encontrar as respostas
para perguntas que métodos analíticos puros de pesquisa de UX não podem nos dizer. Por exemplo,
mapas de calor (uma forma de teste de usabilidade) podem nos dizer onde os usuários estão interagindo
mais (e menos) com um aplicativo ou site, mas não nos dizem por quê.
Use pesquisas para perguntar por que o usuário realiza as ações que realiza e, em seguida, use essas
informações para melhorar o produto.

 Classificação de cartas
As classificações de cartão são outro método popular de pesquisa de UX e são úteis para determinar a
arquitetura de informações de sites e aplicativos. Eles podem ser abertos, fechados ou híbridos. Um
usuário é apresentado a um conjunto de ideias/tópicos que ele organiza em categorias, seja de sua
própria escolha (classificação de cartão aberto) ou pré-fabricado (classificação de cartão fechado) pelo
pesquisador. Assim como nas pesquisas e entrevistas, as classificações de cartão devem ser realizadas
com usuários que se encaixem nas personas do usuário.
Usando Dados de Classificação de Cartões
Um uso prático da classificação de cartões é ajudar a determinar como os usuários classificariam e
organizariam os tópicos de um site ou aplicativo. Os resultados do card sort podem então ser usados para
construir uma arquitetura de informação que atenda às suas necessidades e objetivos.
Um exemplo é um site de floricultura. Podemos ter uma ideia de como os usuários desejam navegar no
site; no entanto, quando fazemos uma classificação de cartão e pedimos aos usuários que forneçam
categorias, descobrimos que eles procuram flores com base principalmente na cor, não na sazonalidade
ou ocasião especial.

 Teste A/B
Quando há necessidade de testar variações de designs para encontrar o mais eficaz, o teste A/B, usado
principalmente para otimização de conversão, também pode ser usado como um método quantitativo de
pesquisa de UX.
Os usuários são apresentados a duas versões diferentes de um design e escolhem qual preferem; isso
também funciona para determinar quais recursos um usuário considera mais úteis, como um botão em
vez de um link.
Uso prático de dados de teste A/B
Os dados de um teste A/B são principalmente quantitativos e binários; o usuário gosta de uma versão de
algo ou de outra versão.
Uma aplicação prática que recebeu muita cobertura foi o Spotify testando seu “menu de hambúrguer”. O
Spotify usou o ícone de menu padrão de três linhas em seu aplicativo móvel por um longo tempo, mas
 decidiu fazer um teste A/B. Para sua surpresa, este design popular não foi um vencedor com seu
público. Em vez disso, os usuários preferiram uma barra de guias.
Isso teve um grande impacto, pois existem milhões de usuários que usam o aplicativo diariamente. Mudar
para a nova barra de guias resultou em uma melhor experiência do usuário e na redução da rotatividade
de assinaturas.

 Testando usabilidade
O teste de usabilidade é realizado quando os designers desejam observar como os produtos são usados
por um grupo representativo de usuários.
Durante um teste de usabilidade, os usuários concluem tarefas enquanto o pesquisador de UX observa e
faz anotações. O pesquisador reúne dados qualitativos e quantitativos para encontrar problemas de
usabilidade.
Aplicando testes de usabilidade
O teste de usabilidade produz dados qualitativos e quantitativos. Existem várias vantagens que podem ser
obtidas com esses dados, dependendo do tipo de teste realizado e dos resultados presumidos.
Um exemplo é um teste de usabilidade moderado no qual observamos um usuário durante o processo de
checkout de um novo aplicativo de compras. O que vemos é o usuário tentando adicionar um produto ao
carrinho várias vezes, mas não consegue, acabando por abandonar o processo por completo. Com esse
feedback, voltaríamos à prancheta para revisar o fluxo de checkout.
Uma segunda forma de aplicar testes de usabilidade é a validação de um protótipo ou MVP. Por exemplo,
podemos estar redesenhando um aplicativo de cupom móvel e perceber que não há como um usuário
realizar uma pesquisa de negócios porque fica preso na categoria que escolheu inicialmente. Essa
percepção leva a equipe de design a se concentrar no fluxo do usuário dentro do aplicativo e melhorar a
experiência do usuário.

------------------------------------------------------------------------------------------------------------------------------

Outras Menções:

Existem muitos métodos para realizar pesquisas de experiência do usuário; no entanto, muitos desses métodos
consomem muitos recursos e podem ser lentos. Em outras palavras, eles tendem a ser caros e demorados para
serem implementados. 

Para empresas que operam com um orçamento limitado, lançar um produto funcional pode ser mais importante
do que a pesquisa de UX. No entanto, isso pode ser um erro fatal. Não reservar um tempo para fazer pelo menos
alguma pesquisa de usuário que informe o design do produto pode ter um efeito prejudicial e incapacitante no
sucesso desse produto.
er

 Desk Research (pesquisa documental)

Antigamente, para realizar uma pesquisa de usuários adequada, as empresas tinham que ir a campo com
equipes de trabalhadores para coletar dados. Hoje em dia, há um mundo inteiro de informações de
pesquisa ao nosso alcance via web. 
A psicologia das interações do usuário com computadores e conteúdo digital é um campo de estudo
crescente. Com um pouco de criatividade, é possível encontrar boas informações sobre o comportamento
do usuário e a tomada de decisão em vários setores.
Os dados de navegação coletados por outros setores podem responder a algumas das perguntas que você
tem sobre seu público e ajudar a criar as personas de seu produto.

 Usability Testing (testando usabilidade)

A pesquisa qualitativa de UX envolve testes de usabilidade, convidando os usuários a testar seus
protótipos de produto. Este é um dos testes mais comuns executados por empresas que
fornecem serviços de pesquisa UX .
Envolve observar os usuários navegando em seus aplicativos e registrar suas reações e declarações como
dados brutos para a equipe de design analisar. 

 A/B Testing Prototypes (Protótipos de teste A/B)

O teste A/B envolve mostrar aos usuários dois protótipos ligeiramente diferentes e pedir feedback. Peça
aos usuários uma lista de prós e contras para ambos os protótipos e avalie a experiência geral. Depois que
eles selecionarem um protótipo como preferência, pergunte a eles sobre aspectos adicionais do seu
produto que você acha que poderiam se beneficiar de uma pesquisa adicional do usuário.
Os designers de UX pegarão esses dados e refinarão os protótipos para eliminar falhas de design ou usar
esses prós e contras para criar um novo protótipo híbrido para outra rodada de testes do usuário. O
Manual de Teste de Usabilidade faz um ótimo trabalho ao discutir testes de usabilidade e testes A/B .

 Pesquisas e questionários on-line

Outro método barato de pesquisa de UX, comumente usado por grandes e pequenas empresas , envolve
questionários online. É bastante simples distribuir questionários para centenas ou mesmo milhares de
participantes com apenas um clique de um botão. No entanto, uma quantidade significativa de tempo
deve ser dedicada à preparação de pesquisas, publicação e, finalmente, análise dos resultados.
Há uma variedade de ferramentas incríveis de pesquisa e questionário online
disponíveis. Wufoo , Typeform e Google Forms são ferramentas eficazes para quem está apenas
começando. 
 Use mídias sociais, plataformas de rede online e listas de e-mail para recrutar respondentes para seus
questionários; para eliminar participantes inadequados, certifique-se de escrever boas perguntas de
triagem. 
As perguntas certas revelarão as necessidades, desejos e pontos problemáticos de seu cliente. 

 Guerrilla Research (Pesquisa de Guerrilha)

Embora as pesquisas sejam úteis, a maneira mais rápida de obter informações específicas é enviar suas
perguntas diretamente às pessoas com maior probabilidade de usar seu produto. Para encontrar os
melhores dados para seus esforços de pesquisa de UX, direcione as áreas onde seu público específico
gosta de se reunir. Vá a lugares onde seu público terá tempo para ajudá-lo, como em um café, parque ou
local de esportes.
Muitas vezes, ir até as pessoas e pedir seu tempo e opinião sobre um protótipo de produto em troca de
um café e um lanche funciona muito bem. No trabalho, você pode pedir a “pessoas comuns” que podem
representar a base de usuários do produto, como não designers, pessoas que não são do produto e não
engenheiros, para fornecer feedback sobre um design.
Você ficará surpreso com os problemas de usabilidade apontados por estranhos. Também é importante
observar que é provável que você obtenha dados de pessoas que, de outra forma, não estariam
interessadas em seu produto. Isso não é uma coisa ruim. Pelo contrário, expandir seu público-alvo e obter
comentários de usuários casuais pode ser bastante útil. .

 Focus Groups (grupos de focos)

Os grupos de foco são uma discussão moderada de pesquisa de experiência do usuário com um grupo de
futuros usuários representativos, permitindo que você aprenda sobre as atitudes, ideias e desejos do
usuário. Novamente, não precisa custar muito. Reúna os usuários em um ambiente informal para discutir
seus produtos e serviços. Pesquisadores de usuários vêm usando esse método há eras, mas foram
criticados pela propensão dos grupos focais de encorajar o “pensamento de grupo” e ignorar
necessidades não atendidas.

 Remote Interviews (entrevistas remotas de usuários)

As entrevistas com usuários podem ser difíceis de agendar, e muitos pesquisadores de UX perdem
participantes devido a conflitos de agendamento.
Felizmente, hoje em dia podemos usar ferramentas online como Doodle para sincronizar agendas e
Zoom, Google Hangouts ou Skype para realizar entrevistas remotas. Isso reduz drasticamente o tempo
necessário para organizar várias entrevistas pessoais.
As entrevistas remotas não fornecerão o volume de dados que outros tipos de métodos de pesquisa de
usuários fornecerão, mas podem ser úteis em termos de descobrir os principais problemas de usabilidade
e analisar várias reações a eles.
A vantagem óbvia das entrevistas individuais é que você pode se concentrar em certas questões e obter
informações detalhadas e feedback direcionado. Isso pode ser problemático ao lidar com grupos de
pessoas em grupos focais.

 Analytics (análise)
Muitos métodos de pesquisa quantitativa podem se enquadrar nessa categoria. Se você estiver
trabalhando com um orçamento apertado, use ferramentas gratuitas como o Google Analytics como
ponto de partida para a coleta de dados quantitativos.
Como alternativa, ferramentas simples, gratuitas ou de baixo custo, como o Hotjar, estão disponíveis para
coletar percepções específicas de produtos dos usuários. O Hotjar Basic gratuito possui mapas de calor -
representando visualmente os cliques, toques e comportamento de rolagem do usuário; gravações—
observe visitantes reais em seu site conforme eles clicam, tocam, movem o cursor e navegam pelas
 páginas; e funis de conversão — identifique em qual página e em qual etapa a maioria dos visitantes está
deixando seu site.
Depois de obter os dados brutos, certifique-se de combiná-los com uma pesquisa qualitativa real do
usuário para obter informações.

------------------------------------------------------------
Lean Design

O que é Lean UX?

Lean UX é um conceito em Design que propõe uma nova maneira de trabalho, com o intuito de tornar os
processos mais eficientes e ágeis.

A sua visão é diferenciada porque não observa o desenvolvimento de produtos como um processo de
entregáveis. Mas como um processo de validação de hipóteses focado na experiência do usuário.

Nesse sentido, o objetivo do Lean UX é obter feedbacks dos usuários o mais rápido possível. Assim, pode-se
tomar decisões e melhorar o produto com mais agilidade e precisão.

Esse conceito surgiu a partir dos ensinamentos de outros dois conceitos — Lean Startup e Filosofia Agile — e foi
descrito por Jeff Gothelf em seu livro: Lean UX.

Lean Startup
O Lean Startup é um conceito criado por Eric Ries para melhorar
a maneira como as Startups fazem negócio.

Nesse sentido, o Lean Startup introduziu uma forma diferente

de pensar, baseado na eliminação de desperdícios — Lean
Manufacturing — para que o produto da Startup pudesse
agregar o máximo de valor para os consumidores.

Além disso, Ries propõe uma abordagem bastante prática para o

desenvolvimento de produtos. Ao invés do empreendedor montar um Business Plan  com diversas previsões e
números, o Lean Startup propõe um canvas chamado Business Model.

Na prática, o Lean Startup promove o rápido aprendizado baseado nas respostas e feedbacks dos clientes e
usuários.

Por ser um processo de aprendizado constante e rápido no desenvolvimento de produtos, o Lean Startup
influenciou claramente e diretamente a atuação do UX Design no fluxo.

Filosofia Agile
A Filosofia Agile surgiu, em um primeiro momento, para melhorar o desenvolvimento de softwares. Mas,
atualmente, é uma filosofia amplamente adaptada para os diversos tipos de mercado.

Basicamente, a Filosofia Agile é um tipo de pensamento que prioriza a rapidez e promove menos processos
burocráticos. Dessa forma, diversos métodos são baseados nessa filosofia, inclusive o Lean UX.

Nesse sentido, os benefícios de uma Filosofia Agile podem ser resumidos em:

 Melhor transparência no desenvolvimento de produtos;

 Menos desperdício de tempo;
 Mais assertividade na comunicação.

Assim, basicamente foram essas diferentes linhas de pensamento, somado ao novo modelo de negócios de
Startups, o que deu origem ao conceito de Lean UX, descrito por Gothelf.

Quais os fundamentos do Lean UX?

Lean UX, então, visa reduzir o desperdício e criar mais valor agregado ao produto para os usuários.

Além disso, o foco em iteratividade e melhoria contínua através de feedbacks dos usuários é bastante presente
no conceito de Lean UX.

Dessa forma, para sustentar essas ideias, temos alguns fundamentos de base do Lean UX para que se consiga
extrair o máximo de eficiência desse conceito.

Esses princípios estão divididos em:

 Organização de Equipe/time;
 Cultura;
 Processos.

Princípios para organização de time em Lean UX

1. Times Multifuncionais: é importante a criação de um
time com profissionais de diversas expertises — UX,
Negócio, Marketing, Desenvolvedores, etc — e que eles
tenham alto grau de colaboração;
2. Pequeno, Dedicado e Posicionado: além de
multifuncionais, os times devem ser pequenos — de no
 máximo 10 pessoas —, dedicados somente a um projeto por vez e alocados na mesma sala ou lugar para
facilitar a comunicação;
3. Auto suficiente e empoderado: o time deve ser autônomo o suficiente para conseguir tomar as decisões
pertinentes ao projeto;
4. Foco em resolução de problemas: a equipe deve trabalhar em busca da resolução de um
problema enunciado, ao invés de implementar novas soluções.

Princípios para a cultura

1. Da dúvida para a Certeza: em Lean UX não devemos ser
movidos por achismos ou gostos pessoais. Devemos entender
que cada premissa e hipótese devem ser testadas antes de se
tornarem verdade;
2. Progresso é Resultado e não Entregas: o progresso deve ser
medido em resultados mensuráveis, como aumento da
satisfação do usuário. Progresso não é desenvolver mais
atributos para um produto que não funciona;
3. Conhecimento Compartilhado: é importante que todos da equipe estejam com o mesmo
entendimento do produto, do usuário e de qualquer outro elemento crucial para o projeto;
4. Anti-padrão: Sem Rockstars, Gurus ou Ninjas: muito parecido com o princípio anterior. Um time de Lean
UX não deve colocar a responsabilidade de conhecimentos exclusivos para algumas pessoas do time. O
conhecimento deve ser compartilhado sempre;
5. Permissão para falhar: a mentalidade da equipe tem que ter foco na experimentação e validação. Dessa
forma, o foco não é o acerto, mas o aprendizado.

Princípios para processos

1. Pequenas Quantidades: criar e desenvolver apenas o
necessário para o produto evoluir e criar valor (MVP). O
foco é o aprendizado e a redução de riscos;
2. Descoberta Contínua: em Lean UX é importante o
feedback dos clientes e usuários. Por isso é essencial ter
a mentalidade de descoberta e sempre conversar com os
consumidores para descobrir o que eles fazem e porque
fazem;
3. Getting Out Of The Building: saia do escritório! Vá para rua testar as ideias e aprender com elas ao invés
de ficar sentado na cadeira;
4. Exteriorize o trabalho: tire as ideias da cabeça e mostre para o público;
5. Desenvolver a analisar: desenvolver uma primeira versão da ideia é melhor do que ficar discutindo se ela
vai dar certo ou não;
6. Não pense em entregáveis: tenha foco na criação e na validação das hipóteses. Não pense em criar
apenas entregáveis que não agregam valor ao usuário.

O processo do Lean UX
O processo do Lean UX é conduzido com base em 3 grandes ideias:
Pensar, Fazer e Checar.

Pensar: está relacionado com a criação de premissas para um certo

problema e para o seu contexto. A partir dessas premissas é possível criar
hipóteses que serão testadas;
Fazer: está relacionado com o desenvolvimento do produto que atenda as necessidades do usuário. É bastante
importante entender o conceito de MVP — o qual abordaremos mais adiante;

Checar: está relacionado com o teste do produto e com a validação — ou não — das hipóteses criadas sobre ele.
Apesar de ser o último item dessa lista, ele é o gancho para a iteratividade. Essas 3 ideias se tornam um loop, no
qual após checar e receber o feedback do usuário, voltamos para o começo que é Pensar.

Perceba como essas ideias são bastante similares com as que encontramos em outros conceitos como Lean
Startup, Filosofia Agile e Design Thinking. Assim, todas acabam se relacionando e se complementando.

Os elementos do processo de Lean UX

Ao entrarmos mais a fundo no processo de Lean UX, podemos ficar com algumas dúvidas básicas como, por
exemplo, o que é uma premissa ou como crio uma hipótese.

Nesse sentido, vamos explicar rapidamente cada um desses elementos para que você entenda como aplicar e
criar cada um deles.

 Premissas

As premissas são elementos que precisam ser criados em conjunto com o time inteiro. Dessa forma, é possível
captar percepções diversas e todo mundo fica alinhado com o que será definido.

Para definir as premissas, você pode começar com perguntas simples como:

 Quem são os usuários?

 Para qual objetivo o produto é utilizado?
 Quando ele é utilizado pelo usuário?
 Qual é a melhor funcionalidade dele?
 Quais os riscos que ele impõe?
 Qual o problema que deve ser resolvido?

Contudo, as perguntas podem variar de acordo com seus objetivos e durante o projeto também. As premissas
não são cravadas na pedra e conforme o projeto for oferecendo aprendizados, as premissas podem
acabar mudando também.

Além disso, as respostas para as perguntas podem acabar gerando diversas premissas. Portanto, se este for o
caso, priorize as principais premissas. Caso contrário você não conseguirá trabalhar com todas elas.

 Hipóteses

Após definir as principais premissas é hora de criar as hipóteses que serão testadas no final do ciclo.

A criação das hipóteses deve refletir alguma crença que exista e que possa melhorar ou solucionar o problema
proposto pelo projeto.

Por exemplo: se simplificarmos a tela de cadastro, talvez o número de usuários cadastrados aumente.

Essa pode ser uma hipótese baseada em uma premissa que diz que o usuário não possui muito tempo ou
paciência para preencher telas de cadastro muito extensas.

O importante da criação da hipótese é entender o que se espera atingir com essa ideia e como podemos
mensurá-la para avaliar se ela se provou verdade ou não.

No caso do exemplo acima, uma evidência da validação da hipótese seria o aumento de número de cadastros
feitos após a simplificação da interface.

Portanto, uma hipótese não é apenas uma suposição jogada aos ventos. Ela precisa ser capaz de ser evidenciada e
validada. É ciência e não misticismo.
Minimum Viable Product – MVP
Outro elemento essencial no processo de Lean UX é o
famoso MVP: Produto Mínimo Viável.

O MVP é a construção mais básica de um produto que

consiga testar as hipóteses que foram criadas no
processo.

Por isso, o MVP não é um produto completo com

diversos features.

Caso funcione e seja validado, o MVP pode ir evoluindo a cada ciclo e a cada teste de hipótese. Ou, então, pode
ser descartado caso não haja validação de que as hipóteses foram efetivas.

Teste e validação

O teste é essencial no processo de Lean UX. É através dele que você obtém respostas para a sua hipóteses e que
levarão a sua validação ou não.

É importante lembrar que o processo de Lean UX é um processo rápido, com tempo bastante curto. Portanto, a
fase de teste deve ser feita com agilidade e precisão, para que os resultados obtidos tragam os aprendizados
necessários.

Essa fase de teste e validação é bastante complicada, porque em projetos maiores de UX Design a fase de teste
tende a ser mais elaborada e a consumir mais tempo.

Por que usar o Lean UX?

Lean UX é um conceito que surgiu com o intuito de agilizar o desenvolvimento de produtos e reduzir desperdícios
durante toda essa cadeia.

Apesar de colocar mais velocidade nos processos, o Lean UX não deixa de lado o compromisso com a entrega de
resultados. Nesse sentido, o Lean UX traz alguns benefícios como:

 Eficiência e redução de custos

Com a redução do tempo e com mais velocidade no processo de desenvolvimento de soluções, a
sua empresa economiza um tempo valioso de projeto.
Nesse sentido, ao invés de passar 3 meses no desenvolvimento de um produto que não vai agradar ao
usuário, teste a sua hipótese e veja se a proposta do produto faz sentido.
É melhor validar as hipóteses e tomar as decisões rápidas, do que investir muito tempo e dinheiro em
uma solução que não trará resultados para a organização.
 Reduz o tempo
Relacionado ao benefício anterior, podemos claramente pontuar que o Lean UX economiza o tempo da
sua empresa.
 Além disso, a proposta de teste e iteratividade constantes permitem corrigir as rotas do projeto, fazendo
com que o produto ou solução sempre agreguem valor ao usuário.
 Design Centrado no Usuário
Não é preciso nem comentar que o Lean UX utiliza os conceitos de Design Centrado no Usuário em seus
processos.
Fica mais evidente no processo de desenvolvimento de um MVP baseado nos feedbacks dos clientes e
usuários.
Dessa forma, o Lean UX é uma nova forma de trabalho do UX Design, mas que não se afasta dos conceitos
principais da profissão.
 É data-driven
Ser data-driven significa ser orientado para dados. Ou seja, tudo o que envolve o Lean UX é baseado em
evidências e dados retirados das pesquisas e feedbacks com os usuários.
Nesse sentido, há diminuição de risco no desenvolvimento e na implementação pelas decisões não serem
baseadas em achismos ou gostos pessoais.
Além disso, usar os dados podem ajudar a encontrar falhas e inconsistências quando algo der errado no
meio do caminho.

------------------------------------------------------------------------------------------------------------------------------

Outras menções:

A tal Lean UX, ou “UX magra” (se traduzido ao pé da letra), é uma forma um

pouco diferente de trabalhar os documentos da área de UX de forma que o dia-
a-dia do profissional fique mais livre do excesso de entregáveis.

Tradicionalmente, o User Experience Design (e suas variáveis Design de

Interação, User Interface Design, Arquitetura de Informação etc.) é uma
disciplina baseada em entregáveis. Wireframes, sitemaps, fluxos, taxonomia
e mais uma lista enorme de entregáveis.

O problema é que, algumas vezes, o profissional de UX fica preso demais a

esses entregáveis, e o esforço de mantê-los atualizados e consistentes acaba tomando um tempo precioso do seu
dia. Um tempo que poderia ser usado para fazer o que o profissional de UX faz melhor: pensar no projeto e em
todas as suas variáveis.

------------------------------------------------------------
Definição de interface, (UI Design)

O que é uma interface de usuário?

A interface do usuário – user interface (UI) – é o espaço onde os usuários interagem com um site, programa,
aplicativo, etc. Isso pode incluir telas de exibição, um mouse, teclados e a aparência de uma área de trabalho.

O design da interface do usuário deve ser o mais amigável possível para pessoas com deficiência. O objetivo é
criar uma interface suave, intuitiva e visualmente agradável. As pessoas podem nem mesmo perceber ativamente
como uma boa UI é fácil de usar, mas sentirão isso, o que as fará voltar.
Quais são os elementos da interface do usuário?
Os elementos da IU ajudam as pessoas a navegar. Eles geralmente se enquadram em uma das quatro categorias:

 Controles de entrada. Esses elementos de UI interativos permitem que os usuários insiram os dados no
sistema. Você pode usar uma ampla variedade de controles de entrada, como botões, campos de texto,
alternadores, caixas de seleção e muito mais. 
 Componentes de navegação. Elementos como controle deslizante, breadcrumbs, campo de pesquisa,
paginação, tags e ícones ajudam as pessoas a navegar por um site ou produto. 
 Componentes informativos. Os elementos da UI que ajudam a compartilhar informações com os usuários
incluem, mas não se limitam a: notificações, barras de progresso, dicas de ferramentas, caixas de
mensagens e janelas pop-up.
 Containers. Eles mantêm os elementos da página juntos.

Quais são os princípios de um bom UI Design?

A UI Design é uma parte da experiência do usuário (UX), que também deve ser bem pensada e bem projetada,
caso contrário, nenhum esforço para uma interface do usuário excelente irá consertá-la e vice-versa. Aqui estão
algumas diretrizes para UI design:

 Conheça seus usuários

Tudo se origina de conhecer seus dados demográficos, dores do cliente, o que eles querem e o que os
impede de atingir seus objetivos. Com essas informações em mãos, você pode encontrar uma solução
que atenda às necessidades dos seus usuários.
 Mantenha as interfaces simples e organizadas
Rotule todos os ícones e explique como o usuário pode interagir com cada um dos objetos. Por exemplo,
um pequeno ícone de lupa com o rótulo “passe o mouse para ampliar” levará o usuário a saber como
visualizar o produto em um tamanho maior.
A Amazon é um bom exemplo de um design de interface do usuário eficaz, especialmente considerando
que há muito para mostrar em cada página. A página inicial está bem identificada, as páginas de pesquisa
têm todas as informações pertinentes sob a imagem do produto e as páginas do produto são visualmente
organizadas para que seus olhos sejam direcionados naturalmente para o que você deseja ver. A Amazon
poderia facilmente ser uma bagunça, mas um bom design de interface do usuário não permite.

 Mantenha cada ação consistente

Se a imagem de um produto é ampliada ao passar o mouse sobre ele em uma página, faça com que isso
ocorra em todas as páginas do produto. Isso elimina todo o trabalho de adivinhação dos usuários. Você
quer que eles deslizem pelo seu site ou programa, sem se confundirem com um design inconsistente.
 Seja proposital no layout da página
Estruture seu site ou programa com base na importância. Considere as relações espaciais entre os itens
na página e chame a atenção para as informações mais importantes.
  Garanta a legibilidade
Concentre-se no texto e no design de cores, ou seu site ou programa pode se tornar uma bagunça
confusa. A escolha da fonte, a espessura da fonte, as cores, o alinhamento, a hierarquia e muitos outros
aspectos do design do texto podem enviar uma mensagem forte com apenas algumas palavras, se usadas
corretamente. Ter um designer gráfico para este aspecto da UI é uma boa ideia.
 Tenha uma função principal por página
Uma página pode se tornar muito confusa se houver muitas tarefas em execução. Escolha uma tarefa por
página para focar e guiar os usuários, mostrando-lhes as ações preferidas.
 Foco na consistência da marca
Sua marca tem cores associadas a ela? A Starbucks tem, a Target tem e a Snov.io também! Use essas
cores de forma consistente em seu site, aplicativo ou programa. Use seu logotipo de forma consistente
também.

Deficiências e interface do usuário 

Pessoas com deficiência visual, física, cognitiva e auditiva podem estar usando seu site ou programa. É por isso
que acomodá-los é importante na experiência do usuário, e seu UI design deve facilitar o uso para eles. Uma
interface inacessível é uma maneira segura de perder clientes com deficiência.

 Deficiência visual
Daltonismo, cegueira legal, miopia, catarata – a lista é interminável para deficiências visuais. No final das
contas, duas coisas podem fazer uma grande diferença: Aumentar o tamanho e usar alto contraste.
 Deficiência física
Parkinson, esclerose múltipla e deficiência motora relacionada à idade são apenas algumas das
deficiências físicas que podem dificultar o uso de um desktop, tablet e smartphone. Maneiras de ajudar
esses usuários incluem criar botões grandes e fáceis de clicar, implementar uma opção de controle de
teclado para aqueles que não podem usar um mouse ou trackpad e permitir a voz e outras formas de
tecnologia de controle.
 Comprometimento cognitivo 
A dislexia é um comprometimento cognitivo comum, mas infelizmente não é muito atendido. Existem
fontes compatíveis com a dislexia que você pode usar em seu site. Por exemplo, fontes populares como
Arial, Century Gothic, Comic Sans, Verdana, Tahoma e Trebuchet são todas comumente aceitas como
amigáveis à dislexia.
 Deficiência auditiva 
Existem muitos motivos pelos quais uma pessoa pode ser surda, bem como vários níveis de surdez, mas
tudo se resume a uma coisa – se você tiver vídeos em seu site, precisará usar legendas.

------------------------------------------------------------------------------------------------------------------------------

Outras menções:
Definindo UI Design

UI Design ou User Interface Design (Design de Interface do Usuário) é a área que estuda o meio pelo qual uma
pessoa interage ou controla um dispositivo, software ou aplicativo.

O que é Interface?
Interface é um meio de comunicação entre dois sistemas ou grupos (não necessariamente comunicação entre
pessoas). A interface, por exemplo, é o meio pelo qual o usuário interage ou se comunica com um sistema para
realizar tarefas.

GUI – Graphical User Interface

GUI é basicamente a interface gráfica de um sistema que normalmente contém botões, caixas de texto, imagens,
etc.

A interação pode ser feita através de elementos que forneçam ações entre o dispositivo e o usuário, como por
exemplo, botões, links, menus e qualquer outro elemento que permita uma interação entre o dispositivo e o
usuário.

Importante salientar que User Interface não se limita somente a parte visual do projeto. UI Design é sobretudo
como será realizada interação entre o usuário e o meio (que no nosso caso é a interface gráfica), indo muito além
da estética/aparência do projeto.

Design UI ≠ Design UX
 Design UI = Design de Identidade e Interação

Principais estilos de UI Design

 Skeumorfismo
Trata-se de um estilo que faz referência aos objetos reais no meio digital/gráfico. Utiliza-se muito de
artifícios como texturas, sombras,
gradientes, proporções, entre outros;
para simular os objetos do nosso cotidiano.

 Flat Design
Significa “Design Plano”. Trata-se de um
estilo minimalista que utiliza cores e
formas chapadas, com poucos (ou
quase sem) efeitos de volume,
sombras, texturas e etc.

Guia de Estilo

Guia de estilo é semelhante a um manual de marca, mas voltado para interfaces. Trata-se de arquivos (ou
conjunto de arquivos) que contém toda a informação visual do projeto como paleta de cores, tipografia, forma,
exemplos de usos, etc.

O guia de estilo é o que garante a identidade visual do projeto, definindo as diretrizes do projeto para que ele
tenha uma consistência e uniformidade visual.
Principais ferramentas de UI Design:

 Sketch App
 Adobe XD
 InVision
 InVision Studio
 Figma
 Photoshop

Dicas de Boas Práticas e UI/UX Design

 Utilize padrões familiares de UI

Quando você utiliza padrões familiares de UI você faz que os usuários se
sintam em casa.
 O ícone hambúrguer é um padrão que vem sendo bastante disseminado quando pensamos em mobile. É
o ícone para um botão “Menu”.

 Mantenha a clareza
Diferencie o que é clicável do que não é.  Evite projetar elementos
que não deixam claro sua função. (como no caso desta imagem ao
lado: não se sabe o que vai acontecer se clicar no botão) Elementos
necessários são sucintos e fazem sentido. Pergunte-se sempre se
tal elemento é necessário, se o usuário precisa mesmo disso.
Também verifique se ele é simples para o entendimento. Não
adicione nada na interface porque apenas você achou legal.

 Guie o usuário
Não espere que o
usuário descubra por si só o que fazer na interface. Você terá
mais efetividade solicitando a ele o que executar e também
continuar guiando-o nos passos seguintes. (exemplo:
Breadcrumbs).

 Retorne com feedbacks

Fornecer feedbacks constantes e de
forma clara deixa seus usuários mais
confiantes sobre o que estão fazendo
e em qual etapa se encontram. O
sistema deve informar em real-time o
que está acontecendo. Procure criar
uma “conversa” entre os usuários e o
sistema com notificações a cada ação
que ele executar. Transmita a
sensação que ele está no controle.

 Permita-se tolerar erros de usuários

Erros podem acontecer: o usuário pode executar uma ação de forma inadequada. O design deve ampará-
lo tornando seus erros toleráveis e fazendo disto uma oportunidade de crescimento ao mostra-lhe o
caminho da correta execução.
o Desenvolva maneiras de o usuário desfazer ações;
o Não puna o usuário fazendo com que ele
recomece do zero depois de executar muitas
etapas só porque ele preencheu um campo
de formulário de forma errada;
o Assegure o aprendizado mostrando as ações
erradas e garantindo que ele possa saber
como evitar que o erro ocorra novamente.


Fale a língua do usuário

Garanta que o usuário se identifique com
a mensagem transmitida facilitando o
entendimento das “conversas” com a
 interface. Pesquise bastante sobre o público-alvo para estabelecer a maneira mais apropriada de orientar
as ações.
Você pode conversar com o usuário de forma visual, com elementos como ícones, imagens e vídeos.

 Mantenha a consistência
Garantir a consistência repetindo
elementos e comportamentos da
interface. Com isso os usuários
reduzem a necessidade de repensar
o passa a passo para as ações e tem
maior consciência de como as coisas
funcionam.

 Ofereça flexibilização das tarefas

Faça com que as tarefas a serem
executadas pelos usuários não sejam
penosas. Facilite o manuseio. Quando, por
exemplo, temos que preencher um
formulário de cadastro a tarefa se torna
mais árdua quando ele é extenso.
Entenda que as pessoas preferem cumprir
várias etapas menores do que uma
enorme. Ao projetar um formulário que
possa ser preenchido em etapas menores
você diminui a sensação de algo rígido e
complexo de ser executado e flexibiliza a tarefa.

 Use a hierarquia visual

Você pode estabelecer um caminho claro para as ações determinando através de formas, cores, tipos,
contraste entre elementos, entre outras aplicações
de Design que mostrem o que é prioritário na
interface. O posicionamento de elementos de forma
apropriada garantirá que o usuário perceba a
informações mais importantes e indicará as possíveis
decisões que o usuário deve escolher.
 Estude sobre o usuário
Você pode ficar tentado a olhar para concorrência para imitar estilos e recursos modernos que ainda não
são garantias de boas práticas. Então nessa hora atente-se primeiro as necessidades dos seus usuários
para identificar os reais objetivos do projeto. Acredito que este é o princípio primordial entre os 10
apresentados.
Faça uma imersão no mundo do usuário para descobrir suas habilidades, experiências e anseios. Pesquise
sobre as interfaces que eles se sentem a vontade, descubra como eles as usam, como se comportam
diante delas.

 Otimize o seu conteúdo

As pessoas hoje em dia não lêem tudo, elas “passam os olhos
por cima”.
o Seja claro, simples, direto
o Seja sucinto
o Não seja repetitivo
o Coloque somente o que é realmente necessário
 o Evite exceções, os famosos “encher linguiça”
o Use “textão” somente se o site for para isso (blog, portais de notícias)

 Cuide da performance do seu site ou app

A velocidade interfere no SEO e na experiência de navegação do usuário.
o Reduza o peso das imagens (utilize ferramentas como tinypng e compress jpeg para diminuir o
peso das imagens)
o Considere diminuir as requisições. Você pode comprimir arquivos CSS, JS e HTML com plug-ins e
habilitação de GPIZ e também utiliza serviçoes e plug-ins de cache
o Otimize o seu código
o Elimine o excesso de conteúdo e recursos
o Tenha um bom serviço de hospedagem
o Monitore o seu site através de serviços como o pageSpeed Insights, GT Metrics

------------------------------------------------------------
Personas
Persona é a representação ideal do seu cliente ou usuário. É a exemplificação da pessoa que utiliza o seu produto
ou serviço. Ela é criada através dos dados qualitativos e quantitativos que você colhe em pesquisas (de mercado,
de benchmarking, com clientes, etc), relatos e depoimentos.

Pesquisa Benchmarking

Também nomeada Análise de Competidores, o Benchmarking é um tipo de pesquisa feita no início do projeto. Ela serve
para entender como o mercado atua no seu ramo. Com essa pesquisa, podemos compreender o que os usuários esperam do
produto que você está desenvolvendo, quais os diferenciais e pontos fracos dos concorrentes, como eles divulgam seus
próprios serviços e também o posicionamento deles diante do público.

Para desenvolver um bom produto é preciso entender a fundo o mercado em que ele estará inserido. Descobrir como seus
concorrentes agem e quais são seus diferenciais é um grande passo na formulação do projeto. Se não fizermos essa pesquisa,
podemos lançar algo que o mercado não precisa, ou até mesmo um item que o mercado já tem.

A persona reúne padrões de comportamento, objetivos, motivações, preferências, necessidades, problemas e

frustrações do usuário.
Portanto a persona serve para se entenda:

o Quem é o usuário?
o Quais são os objetivos?
o Quais são as suas dores?
o Quais são as prioridades?

Proto Persona

Proto Persona é o esboço da persona.

Seria uma persona mais simples criada
com menos dados e com objetivo de
representar o usuário de forma mais
simples nos momentos iniciais do
projeto. Também conhecido como
avatar. Ex.:

Diferença entre público-alvo, persona

e avatar

Público-alvo: é mais genérico, mais

abrangente. O público-alvo do porche são pessoas da classe

A ou B, homens, empresários...

Avatar (ou proto persona): é mais específico que o público-

alvo, baseado em hipóteses e pesquisas mais rasas. A pessoa
que compra o porche, mora em tal lugar, frequenta
restaurantes, tem esses costumes.
Persona: é mais específico que o avatar. É baseado em dados detalhados de pesquisas. Por exemplo os dados da
concessionária que vendeu o carro: as pessoas que compraram um porche tinham renda entre X e X, são em
grande maioria homem de 30 a 40 anos.

------------------------------------------------------------------------------------------------------------------------------

Outras Menções

Algumas das informações comumente adicionadas ao personagem são:

o Nome, idade, sexo e foto, a última principalmente em portfólios;

o Descrição do que ele faz na vida real – aqui, a equipe de criação deve manter um tom profissional;
o Nível de conhecimento do produto ou serviço;
o Contexto de interação com o produto ou serviço;
o Soft skills utilizadas em tarefas ou desafios relevantes.

Uma dica é evitar adicionar detalhes irrelevantes à persona criada. Eles podem acabar ofuscando os essenciais –
todas as informações adicionadas devem ter um objetivo. Além disso, dar um nome e foto ao personagem
também é interessante, pois ajuda a humanizar o processo e lembrar a equipe de que estamos trabalhando para
seres humanos, com necessidades reais, que precisam de soluções simples e objetivas.

Revisando a persona

À medida que novos produtos, tecnologias e tendências surgem, os usuários acabam sendo influenciados e
alterando alguns gostos pessoais.

A persona deve ser revista de tempos em tempos por meio de pesquisas com usuários. Já que é baseada no ser
humano que está em constante mudança e evolução para que não fique desatualizada e se torne ineficaz para o
desenvolvimento do projeto.

------------------------------------------------------------
Arquitetura da Informação - Briefing
O briefing, basicamente, serve para orientar os trabalhos que serão feitos para sua empresa.

Por exemplo, nos seguintes serviços:

o Um plano de marketing;
o Um branding (identidade visual) ou apenas logotipo;
o Uma campanha de publicidade;
o Um website;
o Ou qualquer outro tipo de projeto.

Isso é muito importante, pois, se você não disser o que você precisa e o que espera de um projeto, qual vai ser a
possibilidade de atingir o seu objetivo? Provavelmente bem pequena.

Cada empresa tem o seu modelo de briefing ideal, que é cuidadosamente montado para cada necessidade
específica. Mas, em geral, você vai sempre responder perguntas sobre:
 o Quem é a empresa
o Quais os seus produtos ou serviços
o Qual o perfil dos seus clientes
o Quem são seus concorrentes
o Que tipo de trabalhos semelhantes você já fez
o Quais são as regras que precisam ser seguidas
o O que você espera desse trabalho
o Quais as suas preferências

briefing é um termo em inglês que significa resumo

------------------------------------------------------------
Arquitetura da Informação – Escopo de Projeto
Escopo de Projeto é todo o trabalho necessário para entregar um produto, serviço ou resultado. Ele contém
informações essenciais sobre o projeto, como descrição, limites, objetivos, entregas, responsáveis, custos, prazos,
atividades, restrições, premissas etc. Sua principal finalidade é dar foco na condução do projeto, facilitando o
gerenciamento.

Diferença entre Escopo de Projeto e Escopo do Produto

O escopo de Produto contém as características e funções que descrevem um produto, serviço ou

resultado. Essas características e funções nada mais são do que os requisitos que atendem às necessidades das
partes interessadas (stakeholders do projeto).

De forma simplificada, podemos dizer que o escopo do projeto traduz COMO o trabalho deve ser feito e o escopo
do produto traduz O QUE deve ser feito.

O Termo de Abertura do Projeto normalmente contém:

 Justificativa do Projeto: conjunto de argumentos que comprovam a necessidade do projeto.

 Finalidade do Projeto: propósito(s) que se espera que o projeto atinja.
 Objetivo(s) do Projeto: metas claras e mensuráveis e critérios de sucesso relacionados ao projeto.
 Descrição do Produto: elaboração progressiva das características do produto, serviço ou resultado.
 Stakeholders do Projeto: lista das partes interessadas no projeto.
 Entregas do Projeto: conjunto dos produtos, capacidades e/ou resultados necessários para realizar um
serviço único e verificável e, assim, concluir um processo, uma fase ou um projeto.
 Estimativas de Tempo e Custo: indicação dos custos esperados com o projeto e o prazo estimado para
conclusão.
 Exclusões do Projeto: declaração explícita de tudo o que está fora do escopo do projeto.
 Critérios de Aceitação: conjunto de condições às quais as entregas do projeto precisam ser submetidas
para serem aceitas.
 Premissas: pressupostos a respeito do projeto. As estimativas do projeto só são válidas enquanto as
premissas se confirmarem verdadeiras.
 Restrições: fatores que limitam a execução do projeto como, por exemplo, limitações de prazo e custo.
 Riscos: mapeamento de possíveis problemas que podem ser encontrados ao longo do andamento do
projeto.

Já a Especificação/Declaração do Escopo do Projeto geralmente contém:

  Descrição do Escopo do Projeto: detalhamento mais aprofundado do trabalho do projeto.
 Entregas do Projeto: descrição minuciosa dos produtos, capacidades e/ou resultados para realizar um
serviço único e verificável e, assim, concluir um processo, uma fase ou um projeto.
 Critérios de Aceitação: maior especificação dos parâmetros que serão levados em consideração na hora
de aceitar cada entrega.
 Exclusões do Projeto: revisão dos limites do projeto.

------------------------------------------------------------
Arquitetura da Informação – Wireframe
Wireframe é um esboço: uma simulação de como a interface deverá funcionar.

Basicamente é unir todas as informações que colhemos no briefing para o papel,  de um modo estruturado
prevendo como será  a construção.

Logo, ele retrata o layout, de forma simples, da página organizando o conteúdo e os elementos da interface no
espaço que pretendemos usar.  Além de fornecer toda a estrutura para o designer elaborar o layout, ele fornece
os elementos funcionais (como a navegação, por exemplo) que serão usados por um desenvolvedor.

O wireframe geralmente não tem estilo tipográfico, cor, ou gráficos, já que o foco principal está na
funcionalidade, comportamento e no conteúdo.

E também ele precisa ser flexível a alterações rápidas, permitindo assim que se façam testes dos vários pontos do
projeto (usabilidade, navegação, interação, leiturabilidade, por exemplo)

Tipos de Wireframes

Basicamente existem dois tipos de wireframes:  de baixa fidelidade  e de alta fidelidade.

 Wireframes de baixa fidelidade são

basicamente compostos somente por
quadrados, linhas, círculos, triângulos sobre um
fundo simples (normalmente em branco) e com
alguns rótulos.
Este tipo de wireframe pode ser desenhado a
mão ou em algum
software gráfico.

 Wireframes de alta fidelidade são mais incrementados. 

Esse estilo usualmente se aproveita de elementos
do design do projeto como, por exemplo, cores,
imagens , ícones, o logo do cliente, etc.
 O objetivo desse estilo de wireframe é se aproximar mais do layout do projeto transmitindo uma melhor
ideia de como ficará o site .

O nível de detalhamento do wireframe depende do projeto, da finalidade e da preferência de quem está

projetando.

Dentro AI (Arquitetura da Informação), ainda podemos encontrar 3 tipos diferentes de modelos: Wireframe,
Mockup e Protótipo.

Wireframe: como já vimos, é um esboço simples da interface. Organiza o conteúdo e os elementos da interface

no espaço que pretendemos usar. Pode ser feito a mão ou em algum software gráfico.

Mockup: é uma prévia fiel do design do projeto. Nele se incluí normalmente o design final e todos os elementos
que irão compor a página, porém, normalmente,  são estáticos.

Protótipo:  é uma prévia funcional do resultado final. Normalmente não contém todas as funcionalidades que
existirão no projeto, mas proporciona aos clientes a capacidade de interagir com a interface e simular o resultado
final. Um protótipo pode ou não ter elementos do projeto de design.

------------------------------------------------------------
Arquitetura da informação – design
Podemos definir Arquitetura da Informação como um sistema que
estrutura a forma como as informações devem ser acessadas,
apresentadas e interligadas. E esta estruturação tem como objetivo
facilitar o acesso do usuário ao conteúdo em um contexto de uso.

Círculos conceituais
A Arquitetura da Informação consiste em encontrar o equilíbrio entre 3 dimensões: usuário, conteúdo e contexto.
Os autores Rosenfeld e Morville definem esse equilíbrio em 3 círculos conceituais ao que pode ser visualizado
como um Diagrama de Venn.

Usuário: Necessidades, hábitos, comportamentos de busca de

informações, expectativas, experiência;

Conteúdo: Objetivos de conteúdo, tipos de documentos e dados,

volume, estrutura existente;

Contexto: Objetivos, cultura, tecnologia, política, restrições, etc.

Estes conceitos de AI conjugam para que um grupo específico de

usuários busquem por um determinado conteúdo dentro de um
contexto de uso.

A arquitetura da Informação define estratégias de navegação e busca da informação, os componentes que

permitirão isso, é a interface (a ponta do Iceberg).

Componentes:
De acordo ainda com Rosenfeld e Morville existem 4 componentes principais dentro de um sistema de
Arquitetura de informação. São eles:

1.Sistemas de Organização
É a organização e categorização do conteúdo. É dividido entre Estruturas e Esquemas.

Estruturas: são o tipo de relação entre itens e grupos: podem ser taxonomias, bancos de dados ou redes.

A organização da informação possui esquemas e modelos que podem ser ordenados alfabeticamente,

cronologicamente, geograficamente, seqüencialmente, por assunto, por tarefa, por público-alvo, por metáfora
e de forma híbrida. Esses esquemas fornecem ao usuário respostas certas às suas questões, além de permitir
uma visão geral do conteúdo e da organização da informação, permitindo a
previsibilidade da interações. É mais fácil encontrar uma palavra num
sistema organizado (dicionário) do que em um caça-palavras.

Taxonomia: termo originalmente usado na biologia para descrever e

classificar seres vivos conforme diferentes categorias. Na AI também é necessário estruturar e
hierarquizar informações e conteúdos para facilitar a navegação do site. Para isso, geralmente são
utilizados organogramas com mapas do site ou fluxo de uso, por exemplo.
A organização da informação deverá ser desenvolvida tendo por base a utilização de um esquema específico.
Conheça os dois esquemas:

EXATO: Categorias bem definidas com regras claras para a inclusão de novos elementos. Utilizado quando o
usuário sabe exatamente o que está procurando. Suas formas de classificação são:
 Alfabeto: ajuda a classificar grandes conjuntos de informação para um público diversificado (dicionários e

listas telefônicas)
 Tempo/cronológico: ajuda a identificar ordem cronológica de eventos (históricos, linha do tempo,

programações)
  Localização/geográfico: ajuda na comparação de dados diversos que possa ser representado por uma
fonte ilustrada (mapa da educação, atlas)

 Seqüência: ajuda na organização de elementos que possam ser agrupados por ordem de grandeza (listas

produtos, listas de preço)

AMBÍGUO: a categorização da informação é subjetiva e não possui regras claras para a inclusão de novos itens.
Indicado quando o usuário não sabe exatamente o que está procurando.
 Assunto/temas: como nas páginas amarelas, permite a divisão da informação por tipo, modelo, definição

 Tarefa: organiza conjunto de ações como em software (menus)

  Público alvo: organização por perfil ou público alvo, como acontece em lojas de departamento ou sites

que permitem customização

 Metáforas: utiliza modelos mentais conhecidos do usuário para ajudá-lo na utilização ou navegação

 Hibrido: composto por 2 ou mais esquemas, mas costuma causar confusão ao usuário.

Existe ainda dois modelos de organização: de cima para baixo (Top-Down) e de baixo para cima (Bottom-Up) .

 ORGANIZAÇÃO DE CIMA PARA BAIXO (Top-Down)

É quando o desenvolvimento da organização de informação

possui foco no conteúdo básico que o usuário buscará, ou seja,
todo conteúdo base que a instituição precisa disponibilizar. A
ideia é de uma classificação hierárquica e para organização da
informação de forma que possa ser facilmente recuperada. Esta organização permite entender o escopo da
empresa sem se aprofundar nos conteúdos.

O modelo de classificação de pesquisa de cima para baixo proporciona uma estrutura de alto nível para
navegação. O objetivo é quebrar a pesquisa em categorias que fazem sentido para o usuário, dividir a informação
em uma estrutura hierárquica de forma que o usuário possa encontrar um modelo específico de pesquisa de seu
interesse.

 ORGANIZAÇÃO DE BAIXO PARA CIMA (Bottom-Up)

Esta estratégia reflete uma visão do sistema de dentro para

fora, o que implica no conhecimento das soluções de
metadados, algoritmos de busca e banco de dados. Esta
organização está muito relacionado ao uso de metadados, e seu
modelo de organização utiliza conceitos e valores específicos
para campos associados aos documentos. Esta classificação fica
aparente durante a navegação ou na utilização de processos de
busca por meio áreas de pesquisa, limites e opções de
classificação. São poucos os sites que utilizam metadados para
auxiliar o processo de pesquisa. Este tipo de classificação leva
em conta soluções que integram objetos de baixo nível com
conceitos de alto nível a respeito do site.

2.Sistemas de Rotulação
Rótulos são nomenclaturas dadas aos itens de menus, botões e textos de instrução que precisam ser
clicados. Podem ser encontrados em dois formatos:

Textual: composto por uma ou mais palavras; e

Por exemplo, página “About me” de determinado site pode se chamar “Institucional”, enquanto a de outra
empresa “Sobre nós” ou “Quem somos”.

Não-textual: reconhecidos por ícones

A representação através de ícones ajuda na compreensão de terminologias, mais complexas.

O objetivo de um rótulo é comunicar o conceito eficientemente, ou seja, comunicar o significado sem ocupar
muito espaço na página e sem demandar muito esforço cognitivo do usuário para compreendê-lo.

Uma forma de minimizar a confusão na leitura de imagens ou ícones é oferecer dicas textuais associadas. Por
exemplo: texto ativo ao passar o mouse sobre a imagem.

Tipos de Rótulos
A rotulação é importante em qualquer nível (alto nível ou baixo nível) da estrutura hierárquica de informação ou
navegação:

 Em alto nível os rótulos determinarão elementos utilizados na navegação global, nas categorias de
produtos ou outros assuntos e características de um site.
 Em baixo nível os rótulos são utilizados de forma individual para produtos, títulos de colunas, navegação
contextual e local.

Rótulos devem ser INFORMATIVOS e CONCISOS ao mesmo tempo que são CLAROS e DESCRITIVOS a respeito do
conteúdo por trás deles.

O desafio na rotulação é manter uma consistência perfeita de definições ou nomenclaturas em todos os níveis de
informação e navegação de um sistema. Quando isso é alcançado em projeto os rótulos são denominados rótulos
apropriados. Quando isso não é alcançado os rótulos se dividem em rótulos enganosos, imprecisos,
inconsistentes ou impróprios.

 RÓTULOS APROPRIADOS: São aqueles ditos compreensíveis para o usuário.

 RÓTULOS ENGANOSOS: são rótulos que causam confusão, mas parecem ter um significado claro. Quando
acessados aparecem como algo inesperado e surpreendem o usuário com algo que não lhe interessa. É
diferente do rótulo impreciso.
 RÓTULO IMPRECISO: Este tipo de rótulo não passa ao usuário nenhuma idéia do que significa ou para
onde o levarão. É diferente do rótulo enganoso que dá ao usuário uma idéia clara de que o usuário seria
levado ao lugar certo, mas não o faz.
  RÓTULOS INCONSISTENTES: Ocorrem quando a mesma página é referenciada de forma diferente.
Sempre utilizar rótulos iguais para funções iguais. Se o usuário se depara com diferentes denominações
em diferentes páginas durante sua navegação ele pensará que estão sendo oferecidas novas informações.
Quando se deparar com informação já conhecida ficará confuso a respeito de como foi pensada a
estruturação do conteúdo.
 RÓTULOS IMPRÓPRIOS: Uso de jargão, linguagem técnica e não familiar ao usuário. A banalização da
criação de novas palavras ou termos para novos conceitos deve ser ponderada e cuidadosamente
estudada para verificar se o usuário seria capaz de entender o novo termo.

 Uma atividade que auxilia a escolha correta do termo do rótulo é card sorting. O protótipo de papel também
ajuda a identificar problemas nas listas e processos de navegação definidos em projeto.

3.Sistemas de Navegação
Orientam os usuários sobre como se movimentar pelas informações. Esses sistemas indicam a localização do
usuário e o caminho correto a seguir para se chegar a um destino.

O sistema de navegação se apresenta duas funções básicas para o usuário (Reis, 2007; Nielsen, 2000):

1) indicar sua localização: mostra a posição do usuário em relação ao website como um todo e identifica em

que website o usuário está; e

2) mostrar o caminho correto para seguir e chegar ao seu destino: posiciona o usuário em relação à estrutura
interna do website.

Nielsen sugere que esses dois níveis de localização sejam apresentados em todas as páginas, otimizando o uso
do website, independentemente de ser a página inicial ou interna.

Lei de Fitts
Um pesquisador chamado Paul Fitts fez uma descoberta óbvia nos anos 50: "A dificuldade para atingir um alvo é
uma função da distância do alvo e de seu tamanho". Por isso, quanto maior o alvo e mais perto da origem do
movimento, mais fácil é de acertar.

Ou seja, o tempo para acessar o alvo depende:

 Do tamanho do alvo
 Da distância até o alvo

Botões grandes são mais fáceis de acertar, mas são difíceis de encaixar nos layouts porque
dificultam a hierarquia visual.

Melhor do que botão grande, só posicionando o botão no canto da tela. Para um destro, o
canto inferior direito é o mais rápido de acessar, seguidos do canto superior esquerdo,
superior direito e inferior esquerdo.

A lei de Fitts pode ser usada como um auxílio para tomar decisões sobre o tamanho e o
posicionamento dos elementos da interface do usuário.
Os mapas de calor auxiliam nós designers a melhor
alocar objetos em nossas interfaces. A imagem mostra
o ponto de partida mais comum do dedo, ou mouse,
de um usuário. O ideal é que seus objetos de ação
(botões, links etc) fiquem mais próximos destas áreas.
De maneira direta, a área verde é mais fácil de ser
alcançada do que a laranja e, a mais difícil, vermelha.

Ao desenvolver um aplicativo
para celular, o ideal é que os
itens de ação fiquem mais próximos da área verde, se possível.

No caso de sites, o exemplo de mapa de calor é este da figura ao lado.

Novamente, o posicionamento ideal para botões importantes e “calls to action” deve ser
mais próximo ao topo da página.

Outras Leis para Melhorar a Usabilidade:

Lei de Hick:

A lei de Hick tem sido aplicada dentro da área de IHC (Interação Humano-Computador) com a simples ideia de
que quanto mais opções de escolha forem apresentadas aos seus usuários, mais tempo levarão para chegarem a
uma decisão. Imagine um menu de navegação que oferecesse acesso direto para cada página em seu site, os
usuários levariam um bom tempo até encontrarem a opção desejada. Agrupando as escolhas em categorias, você
pode ocultar as escolhas e exibi-las apenas quando houver uma interação do usuário. Um elemento de interface
bem conhecido que utilizamos para este fim é o Dropdown.

A lei de Hick Para aplicações com fluxo de navegação complexo, existe uma técnica chamada Card sorting que
pode ser útil para definir melhor a taxonomia (rotulação) das categorias e como elas podem ser agrupadas de
acordo com seus usuários.

Lei de Miller:

Os estudos de George Miller apontam que a maioria das pessoas armazenam 7 (+-2) itens de informação na
memória de curto prazo. Ou seja, a nossa memória de curto prazo comporta entre 5 a 9 itens.

Se uma tarefa tiver uma sequência definida de passos, você deve guiar o usuário utilizando um passo a passo ou
algo semelhante. Não force o usuário a memorizar uma série de comandos ou como navegar várias telas para
concluir a tarefa.

Tipos de Navegação
Existem 3 tipos principais de navegação: Global, Local e Contextual
Global Navigation: Where am i? (onde estou?) / Local Navigation: What´s nearby? (o que há por perto?) / Contextual
Navigation: What´s related to what´s here? (o que está relacionado a que esfera?)

1. Navegação Global
Este é o modelo de navegação que oferece a visão macro de um website e que apresenta a instituição
representada. É formado por um conjunto de links que aparecem em todas as páginas e que acessam
informações de primeiro nível. Geralmente este modelo pode se tratar de um menu localizado no topo,
ou como uma barra na lateral esquerda ou direita.

2. Navegação Local
A navegação local complementa a global e é destinada a orientar o usuário para se movimentar em uma
seção específica do site. É uma navegação que destina o usuário para informações secundárias, mas
importantes no contexto, cujos itens de navegação não caberia na navegação global por se tratar de um
conteúdo volumoso e específico.
Também são conhecidas como subáreas ou submenus, são as categorias de segundo nível de um site.

3. Navegação Contextual
Este modelo de navegação oferece aos usuários acesso a conteúdos similares publicados no website. O
intuito é dispor estrategicamente esta navegação para que o usuário perceba informações adicionais e
similares ao que ele tinha buscado sem que ele tenha pensado em procurar sobre.
São os famosos “veja também” ou “produtos relacionados”.
Navegação Suplementar
Outro tipo de Navegação que também vale destacar é a Navegação Suplementar.

A navegação suplementar disponibiliza caminhos alternativos de acesso a conteúdos fora da hierarquia

estabelecida. Este modelo de navegação possibilita ao usuário ver a estrutura do site e conteúdo do site ou parte
dele.

Entre as forma mais usadas se destacam:

 Mapa do site: Serve para apresentar

as urls das páginas que constituem
um site.

 Índices: É uma relação de temas

apresentados de forma ordenada e
que permitem acesso ao documento
HTML de cada tema.

 Breadcrumbs: pode ser traduzido

por trilha de migalhas de pão, em
alusão à história de João e Maria,
servem para exibir o caminho
percorrido pelo usuário até uma
página de destino. Ajuda o usuário na sua localização.

 Nuvem de tag: Também conhecido como

nuvem de palavras ou nuvem de
etiquetas serve para apresentar termos
mais acessados ou procurados através de
uma estrutura visual que destaca em
escala maior os termos mais importantes
do site.
Pra quê serve o menu de navegação?

A função dos menus vai além da simples navegação, pois a partir deles é possível identificar a estrutura de um site
ou o resumo de seus conteúdos.

Estilos de Menus

Alguns estilos de menus não perderam o uso, como barra de navegação que é definida por uma área visual
distinta da página contendo uma lista de links orientada vertical ou horizontalmente, 

abas de navegação definidas pelas conhecidas abas de fichário que aparecem individualizadas e que
normalmente destacam a aba que está sendo utilizada,

os pull down (menus abertos que só são apresentado se o usuário clicar em cima de um controle para
apresentação de uma lista de links)

e os pop up (menu voadores ou dinâmicos que aparecem automaticamente quando o usuário passa o cursor do
mouse por cima do item de menu).

Menus com botões de navegação vêm perdendo o uso.

A preocupação na escolha do estilo de menu é maior para a navegação Global, que oferece ao usuário a visão
macro do site.

TESAURO, VOCABULÁRIO CONTROLADO E METADADOS

É outra forma de navegação suplementar, mas pouco utilizada. A idéia é oferecer acesso às informações que
podem ter relações umas com as outras ou dependências. Esta condição funciona a partir do fornecimento de
metadados aos conteúdos publicados ou por definição de sinonímias. O resultado é fornecer a qualquer pessoa o
acesso garantido a determinada informação mesmo que sejam utilizados diferentes termos de busca. Por
exemplo, em uma loja de departamento o cliente em busca de um jogo de lençol pode utilizar os seguintes
termos para chegar no seu objetivo: cama, quarto, lençóis, lençol, jogo de lençol, travesseiro, colchão. É o
chamado anel de sinônimos, que não significam verdadeiramente sinônimos, mas equivalências relacionadas ao
termo base.

Termos aceitáveis Termos variantes

Email Email eletrônicoE-mail

Fax Facsimile

Fotocopiadora CopiadoraXerox
Quadro 3 – Exemplo de vocabulário
controlado

O vocabulário controlado é, de
forma simples e básica, uma lista de
termos equivalentes que funcionam
como sinônimos ou listas de termos
preferidos listados e documentados
(Quadro 3). forma de linguagem
natural.  O tesauro é um dicionário
que funciona como uma rede de conceitos semânticos que oferece sinônimos, homônimos, antônimos, termos
similares e relacionados. Sua aplicação prática é oferecer condições aperfeiçoadas de encontrar informações por
meio do gerenciamento do dicionário.

Tesauro e suas relações semânticas (Rosenfeld e Morville)

Tesauro, vocabulário controlado e Metadados ajudaram na navegação suplementar oferecendo recursos que
permitem fazer cruzamento entre conteúdos por relações diretas ou dependência.

Rótulos, organização e navegação traduzem, de forma simplificada, a dimensão das tarefas no projeto de
arquitetura de informação, mas quando isso não é suficiente um serviço de busca é requerido, o que, em
determinadas situações, pode revelar a baixa qualidade da organização dos elementos que permitem a
navegação. Vocabulários controlados, tesauros e metadados, mesmo sendo pouco utilizados, oferecem a
oportunidade de relacionar conteúdos e oferecer uma forma suplementar de navegação.

4.Sistemas de Busca (ou de pesquisa)

É um sistema com a função de ajudar o usuário a pesquisar uma informação no website ou aplicativo. É indicado
quando existe muito conteúdo facilitando assim o acesso a rápido a informação.

O responsável por projetar o sistema de pesquisa deve pensar no mecanismo de pesquisa, filtro e demais
ferramentas que facilitem a encontrar o conteúdo, na forma como os resultados da pesquisa serão apresentados
e também como esses dados poderão ser utilizados após pesquisa.
Na imagem acima, um sistema de pesquisa baseado em formulário que sugere antecipadamente termos
relacionados com os primeiros caracteres digitados pelo usuário. Isso além de facilitar na busca possibilita maior
rapidez na ação.

Outra forma de sistema que facilita pesquisa é aquele baseado em filtros e que oferece um resultado mais
refinado.

Lista básica de entregáveis de Arquitetura da Informações

Dependendo da complexidade de um projeto haverá a necessidade de pesquisa e análise mais profunda o que
poderá resultar na entrega de uma quantidade considerável de documentos com objetivos específicos.
Segue uma lista de “entregáveis” de uso mais frequente.

 Mapa do site
O mapa do site é um organograma que
apresenta todas as páginas que o projeto terá e
relação hierárquica entre elas.

 Fluxograma
O fluxograma organiza o fluxo das
informações. Com ele é possível
compreender os melhores caminhos para seções
do site.

 Wireframe
É um esboço que simula como a interface deverá
funcionar. Ele possibilita mostrar a hierarquia das
informações e o fluxo de navegação.

 Protótipo
interativo
É um wireframe
com links que possibilita
navegar entre as telas de forma
que se avalie o funcionamento
do sistema e analisar
questões de usabilidade.

 Persona
 Persona é um formato para compreender o usuário de um público-alvo. Deve-se descrever características
para a persona se aproximar de uma pessoa real.
Ao elaborar uma persona é interessante levar em conta características comportamentais do público-alvo,
antever cenários de interação com o website ou aplicativo e levantar razões da importância do projeto
para o usuário.

------------------------------------------------------------------------------------------------------------------------------

Outras menções:

Os 11 componentes da AI:

1) Biblioteconomia:

 Método utilizado em bibliotecas tradicionais, museus e até hospitais.

No contexto da AI, organiza e cataloga informações.

2) Psicologia Cognitiva:

Funcionamento da mente humana e seus comportamentos.

A AI vai usar essa metodologia para entender os nossos processos mentais e influenciar a forma como
estruturamos a informação.

3) Arquitetura:

A ideia, aqui, é pensar na AI como pensamos na arquitetura tradicional.

Logo, a informação deve ser estruturada tal qual um edifício.

4) Sistemas de organização

É a forma de categorizar e organizar a informação.

Por exemplo: um menu pode ser apresentado em ordem alfabética, cronológica, por assunto, e por aí vai.

5) Sistemas de rotulagem

Definir as melhores terminologias para representar as diversas informações contidas na página.

É o ato nomear os itens de acordo com o que for mais adequado para a empresa.

Por exemplo, a página “About me” de determinado site pode se chamar “Institucional”, enquanto a de outra
empresa “Sobre nós” ou “Quem somos”.

6) Sistemas de navegação

Orientam a interação do usuário com a informação, com objetivo de situá-lo dentro da estrutura e mostrar o
caminho certo para que ele consiga alcançar seu objetivo.

7) Navegação global

Conjunto de ícones reunidos que vão representar todas as categorias de primeiro nível do site.

São aqueles links que aparecem em todas as páginas, geralmente localizados nos cantos ou nas extremidades dos
sites.

8) Navegação local
Complementa a navegação global, podendo ser alterada de acordo com a seção.

Também conhecidas como subáreas ou submenus, são as categorias de segundo nível de um site.

9) Navegação contextual

Oferece acesso a conteúdos similares àqueles que o usuário acabou de acessar.

Essa navegação pode ser embutida no site com links, por exemplo, e torna a experiência do usuário mais fluida e
independente de um sistema fixo de menus.

São os famosos “Veja também” ou “Produtos relacionados”.

10) Navegação suplementar

Oferece uma visão geral do site ou do programa, situando melhor o usuário dentro da página.

Com opções como mapa do site ou índices, por exemplo, ele consegue ver rapidamente toda a estrutura do site
ou parte considerável dele.

11) Sistemas de pesquisa

Indispensáveis em qualquer site, blog ou aplicativo que ofereça uma grande volume de conteúdo, os sistemas de
pesquisa ajudam o usuário a encontrar rapidamente o que ele deseja.

Basta que ele digite na barra de pesquisa uma palavra ou frase para que sejam apresentados todos os conteúdos
relevantes relacionados à busca.

Atualmente, os formulários de pesquisa também podem antecipar os termos assim que começam a ser digitados,
de modo a facilitar ainda mais a procura.

As 4 metodologias usadas na arquitetura da informação

I - Estrutura hierárquica
Esta etapa vai garantir que os usuários naveguem entre páginas e conteúdos, acessando todos os menus e
submenus sem maiores problemas.

A estrutura hierárquica é que vai definir o arranjo de como essas vão interagir e se comunicar.

II - Wireframes
Semelhantes aos projetos da arquitetura tradicional, wireframes são os rascunhos, esqueletos do projeto, que
descrevem o conteúdo e as informações que serão incluídas na página.

Eles servirão de base para que todos os profissionais envolvidos possam trabalhar a estrutura do layout final.

III - Taxonomia
Este é um termo originalmente usado pela biologia para descrever e classificar seres vivos conforme diferentes
categorias.

No contexto da AI, também é necessário estruturar e hierarquizar informações e conteúdos para facilitar a
navegação no site.

Para isso, geralmente, são utilizados organogramas com mapas do site ou fluxos de uso, por exemplo.
 IV - Inventário de conteúdo
É bem como o nome sugere.

Neste caso, o inventário funciona como um levantamento de dados disponíveis para melhor compreensão do
projeto.

Esse documento busca reunir de forma detalhada todas as informações que serão disponibilizadas no site.

------------------------------------------------------------------------------------------------------------------------------

Affordance (“o óbvio do óbvio”)

 Affordance é a capacidade que um objeto ( ou parte de uma interface ) ser reconhecido e utilizado exatamente
da maneira que foi projetado, mas sem a necessidade de uma explicação prévia. Um dos exemplos mais clássicos
é o da maçaneta de uma porta, pois não precisamos de uma explicação para saber que ao girá-la podemos abrir a
porta.

Um affordance também pode se baseado em experiências anteriores, como é o caso do ícone de disquete para
salvar documentos, ou o texto azul e sublinhado indicando um link.

Tipos de Affordance:

 Affordance Explicito

Esse é um dos mais fáceis de reconhecer, pois ele geralmente é

acompanhado de um texto indicando exatamente o que o usuário deve
fazer. Alguns exemplos seriam um botão de “Comprar com 1 clique” ou
“Scroll down”.
Botão de comprar com 1 clique da Amazon.

O “Scrool down” também é um affordance explícito.

 Affordance Convencional/Padrão

Esse é um affordance comum, ele é baseado em experiências anteriores dos usuários. Como é o caso desse link,
que reconhecemos pelo sublinhado.

 Affordance Oculto

Esse é um affordance que pode ser muito perigoso de se

usar, pois o mesmo só aparece por completo quando existe
algum evento que o ative, como a interação do usuário.
Geralmente ele é utilizado para diminuir a complexidade
de uma interface, porém pode tornar a interface difícil de usar se o público não está acostumado com aquele
affordance. Um exemplo é o menu dropdown, que só mostra seu conteúdo quando passamos o mouse por cima
de um itens do menu. As notificações do facebook ou youtube, que só são reveladas quando clicamos no ícone
referente às notificações, também são exemplos de affordance oculto.

 Affordance Metafórico

Usa de objetos do mundo real como metafóras para

auxiliar no entendimento da interface. A muito tempo
atrás o design skeumófico usava muito desse artifício.
Hoje em dia esse tipo de design não é tão usual,
porém o uso da affordance com metáforas continua a
todo vapor.
Icones do IOS com affordance metafóricas.

----------------------------------------------------------------------------------------------------------------------------------------------

Arquitetura da Informação – Sistemas de Navegação

Segundo Nielsen, um sistema de navegação deve, a todo momento, responder 3 perguntas básicas:

A estrutura de navegação de mídias digitais é organizada para que cada visitante ou usuário possa compreendê-la
com rapidez e se desloque facilmente entre telas e seções.

A arquitetura de um site pode seguir modelos como:

 Linear ou sequencial (flat model) – define o deslocamento entre etapas ou processos com botões tipo
“Próxima página” e “Página anterior”. A compra online de uma mercadoria, por exemplo, segue uma
ordem que vai desde a identificação do usuário e dos produtos que procura até o momento da entrega
do produto e pós-compra. O início e o final são previsíveis dentro do objetivo que os encadeia.
 No exemplo, pode-se navegar linearmente pela
apresentação dos autores do site.

A estrutura linear pode ser também classificada como “cronológica” em sites que contam histórias
sequenciais em várias telas.

 Hierárquico ou arborescente – para sites com grande quantidade de conteúdo, liga tópicos de interesse
genérico a tópicos mais específicos, com base na construção de uma taxonomia. As informações se
estruturam de alto a baixo, como os ramos de uma árvore, ou de baixo para cima, segundo a estrutura
de um banco de dados hospedado em um servidor que atende às solicitações dos usuários.

Estrutura hierárquica – numa loja de decoração, a

categoria genérica “Casa”, se subdivide, por exemplo
em “Sala de estar”, que se subdivide em categorias
como “Mesas auxiliares”, que se dividem em novas
categorias como “Mesas de centro”, seguindo uma
ordem decrescente de abrangência.

O modelo de árvore hierárquica geralmente se manifesta em uma

barra de navegação horizontal, geralmente com um menu
suspenso de um ou vários níveis.
  Boneca aninhada (nested doll) – pequenos agrupamentos seguem interesses localizados, facilitando o
deslocamento: listas aninhadas de sublinks vão conduzindo lateralmente ao conteúdo procurado – o
usuário toca numa seta, abre nova lista de links, que se desdobra em nova lista, e assim por diante. É
uma opção para mídias com longas estruturas hierárquicas, pois a menor quantidade de links na
mesma camada facilita a navegação, especialmente em dispositivos móveis. 

O item “Brasil” da tela de cima se desdobra nos três itens da tela de baixo. No mesmo site podemos ver subitens muito mais extensos, que
não configuram propriamente bonecas aninhadas.

Com a navegação de boneca aninhada, os usuários tocam ou

deslizam gradualmente para revelar opções de menu adicionais à
medida que percorrem o mapa do site.

 Centro radial (hub and spoke) – as conexões são dispostas como uma roda de bicicleta – em que um
conjunto de arames convergem para um centro.
O tráfego vai de uma tela central com os principais
links para as ramificações e vice-versa. Como os
aplicativos na tela inicial de um smartphone, cada
seção tem autonomia, não é necessário ter
navegação global em todas as páginas/telas. Para ir
para uma seção diferente da que se encontra, o
usuário precisa voltar à tela central, ou hub.
Como economiza bastante o espaço das telas, é
muito usada em dispositivos móveis e aplicativos
para a realização de tarefas, como os de redes
sociais.

O hub and spoke utiliza uma tela central que atua como plataforma de
lançamento para exploração.
 Matricial ou em grade – neste caso, a estrutura não é hierarquizada e segue um modelo horizontal, e o
deslocamento entre páginas não é linear.

Estrutura matricial ou em grade

– pode-se navegar,
horizontalmente pelas imagens
de cada seção, que, em si
constituem a narrativa principal
de cada tela.

Os “Links relacionados” (ou “Veja também”) que unem diversas páginas de um mesmo site segundo
algumas afinidades temáticas entre informações podem estabelecer uma estrutura matricial.
A estrutura horizontal é comum também em sites de notícias, em que parte do conteúdo é organizado
em torno de tags, que variam de acordo com o conteúdo em destaque num determinado dia ou época.

“Crise de refugiados” é uma tag temporária,

que gera subitens como “Entenda a crise”,
“Quem são os refugiados”, etc. Neste caso, há
a verticalização de um nível na navegação por
tags.

  Híbrido – tópicos genéricos se ligam a tópicos mais específicos, ou vice-versa, de acordo com conteúdo
gerado dinamicamente pelo usuário.
 Estrutura híbrida, categorias mais gerais,
como Movies (Filmes), se subdividem, por
exemplo em Movies in Theaters (Em
exibição) o que configura uma organização
vertical. Já o conteúdo da página apresenta
comentários dos espectadores de filmes
organizáveis tanto pela cotação quanto pela
data da publicação, dois critérios com o
mesmo grau de importância e que
configuram uma organização horizontal. Já
os produtos oferecidos mais embaixo, com
links para outros sites, configuram uma
experiência cross-channel.

Diversos critérios de organização, entre horizontais e verticais, se combinam para criar uma experiência de uso
integrada. Sites de mídias agrupam assuntos por categorias como “Economia”, “Esportes”, “Lazer”, e dentro
destas categorias, os textos são mais ou menos destacados de acordo com o grau de interesse que podem
despertar nos leitores. De modo geral há também navegação horizontal entre os itens “Mais visitados”, “Mais
recentes” (ou “Últimas notícias”), “Mais comentadas”, bem como navegação por tags.
 No exemplo, o texto pertence a uma subcategoria
“Economia brasileira”, situada na categoria
“Economia”. Vemos no alto da página que há uma
estrutura ampla do jornal baseada em localização
geográfica (“Espanha”, “América”, “Brasil”,
“Catalunha”).

Sites em que usuários logados

fazem ações muito diferentes dos
usuários não logados, como os de
cursos online, por exemplo, podem
ter estruturas para hierarquizadas
para os não logados em
prospecção, e estruturas lineares,
para os usuários logados em
treinamento, por exemplo.

 Personalizado – o usuário define as informações que quer receber ou as ferramentas do próprio site
rastreiam o percurso que o usuário percorreu durante uma visita e selecionam o conteúdo de sua
preferência (normalmente o mais acessado).

Estrutura personalizada, em uma simples

página de resultado de busca, vemos uma
estrutura vertical composta pelos links do web
site e também uma navegação criada a partir
dos termos da busca. A automação está sujeita
a algoritmos criados pelos buscadores, não
pelos usuários.

 Participativo– estruturada em torno das ações dos usuários e dos objetos sociais criados ou modificados
durante estas ações.

  Cross-media (mídias cruzadas) – segue os encadeamentos de um ambiente amplo de informações,

composto por um conjunto de ambientes mais restritos, mídias e canais interligados, que se
complementam e dependem um do outro para compor a experiência de uso ou completar uma ideia ou
 tarefa. Considera a experiência de acesso e uso fragmentada ou parcial em cada um, sendo que nenhum
produto em si provê a experiência completa.
O cadastro de um e-mail para receber uma mala direta é uma experiência cross-mídia quando há o envio
de mensagem para a caixa postal do assinante e este precisa clicar em um link para confirmar o cadastro.
O cadastro não é finalizado caso não haja confirmação.
Em canais de mídias ou canais cruzados, a manutenção de pistas visuais semelhantes em todos eles
facilita o encadeamento das ações. O uso consistente de cores, fontes, posicionamentos,
proporções, diferenciação de tipos links, permite que os usuários se familiarizem facilmente com um
ambiente em qualquer dispositivo ou circunstância de acesso.

 Cross-channel (ou transchannel, canais cruzados) – considera uma estrutura de informações composta
por elementos dispersos de maneira estruturada (criação, publicação, ação, relacionamento, recriação).
O conjunto de elementos individuais, cada um contribuindo à sua maneira, compõe uma experiência
integrada, entre canais.
Um único canal pode ou não prover uma porta de entrada ao ambiente, e a maioria dos usuários não
percorre todos os seus pontos de contato do início ao fim. Alguns canais permitem que os usuários
completem sua experiência sem precisar de outros.
A HarperCollins publicou o livro Dark Eden junto com app do game, baixado do website, onde se
encontram também imagens, vídeos, making of do game. A estrutura do site dá suporte ao app – que
também pode ser jogado via web –, à história, e vende o livro. O conjunto integrado de
livro+website+app+vídeo compõe uma experiência cross-channel.

Estrutura cross-channel,
em que o site está
diretamente relacionado
ao game em app móvel e
ao livro impresso.

O filme  Angry
Birds foi lançado em
2014, mas o game
era bem sucedido há
anos. A Rovio,
empresa criadora,
oferece também
séries de vídeos
através dos apps
móveis do jogo. A criação dos subprodutos da marca é influenciada pela experiência de uso do jogo, bem
como pelo conhecimento do público (global, de diversas idades) e suas demandas. Embora relacionados,
jogos, séries e filme compõem experiências independentes entre si.

  Multi-channel (multi-canais) – Oferta de serviços ou experiências da mesma natureza que podem ser
acessados ou usados a partir de inúmeros canais. Os usuários acessam um ou outro e podem realizar a
mesma tarefa ou acessar a mesma informação completa.
Ou seja, um correntista de um banco acessa sua conta através do website, obtém seu extrato, mas pode
fazê-lo também em um caixa eletrônico, pelo celular, ou pelo caixa presencial do banco. A realização
completa destas tarefas independe do acesso a outros canais complementares, como o recebimento de
mala direta ou o recebimento de mensagens telefônicas.
 Alfabético – Muito simplificado, acompanha índices como glossários ou listas de nomes de pessoas, ou
definições de palavras, ou de produtos dentro de uma categoria.

Estas estruturas
normalmente estão
presentes em partes
dos canais, não são
orientadoras da
navegação completa
pelo canal.

 Ad hoc, “caótico” ou em teia – não apresenta uma ordem aparente, os relacionamentos entre itens são
mais editoriais que estruturais.

Estrutura
caótica, não há
uma ordem
aparente, os
caminhos são
determinados
pelos usuários,
como no caso
deste site,
composto por
uma coleção
de eventos,
ideias, notas,
algum humor,
todos
publicados
pelos leitores.

Os
percursos
são definidos pelos usuários que se deslocam de acordo com os seus interesses, seguindo hiperlinks que
encontram nas páginas, ou ordenações baseadas nas características das próprias informações. Ou então
por um editor, ou especialista em conteúdo, que determina os relacionamentos entre links.
 É a forma de estrutura que oferece mais risco de desorientação que as outras, no entanto permite o
cruzamento total e irrestrito de informações, pois não está condicionada a nenhum modelo pré-definido.
Testes de usabilidade mostram que há uma relação negativa entre os links inseridos dentro de textos e
os agrupados em barras de navegação. Neste caso, muitos usuários passam por links durante a leitura
sem mesmo notá-los. O uso de modelos híbridos neste caso é mais efetivo.

 BENTO BOX: O modelo bento box é um aplicativo estilo painel que extrai informações e componentes
dinâmicos. A maioria das interações ocorre no contexto de uma única tela multiuso que se desdobra
para revelar camadas de informações adicionais. Essa é uma escolha popular para sites nos quais os
usuários interagem com dados agregados de várias fontes.

 O modelo bento box extrai componentes dinâmicos e informações. 

 VISUALIZAÇÃO FILTRADA: Ao contrário dos painéis, que fornecem um centro de controle para interagir
com uma variedade de dados, os sistemas de visualização filtrada lidam com um único conjunto de
dados. As informações podem ser exploradas de várias perspectivas, com uma variedade de visualizações
e opções de classificação controladas pelo usuário.

Visualizações filtradas são vistas em aplicativos de música, diretórios e outras

interfaces nas quais as pessoas navegam em grandes volumes de dados. ( Ver versão
grande )

Mídias digitais normalmente combinam vários modelos de estruturas, de acordo com as características do

conteúdo que publicam, com os seus objetivos (conceituais, comerciais) e com os modos como se relacionam
com o público.
Dicas Espaciais 
Se os sistemas de circulação representam os caminhos que permitem que as pessoas cheguem aonde desejam ir,
as pistas espaciais são as qualidades reconhecíveis do espaço que as ajudam a se orientar e iluminam os caminhos
disponíveis. Os designers contam com algumas dicas espaciais poderosas para ajudar os usuários a encontrar o
caminho.

 LANDMARKS (marcos)

Um marco é qualquer objeto notável, único ou memorável que você observa ao seu redor. 

No design da interface do usuário, um ponto de referência é qualquer elemento notável ou posicionado de forma
consistente que ajuda os visitantes a se orientarem. Alguns exemplos de elementos globais (ou seja, visíveis em
todo um site) são:

 Logo: Para retornar à tela inicial facilmente

 Navegação primária: Acesso rápido às páginas de destino principais, permitindo que os usuários
dinamizem e explorem outras seções.
 Breadcrumbs: reforça a localização atual dentro do sistema e atua como uma escada para percorrer o
mapa do site
 Pesquisa: Fornece segurança e uma maneira alternativa de buscar informações quando os usuários não
desejam voltar atrás ou continuar navegando

Outros pontos de referência podem aparecer apenas em determinados locais, ajudando os visitantes a distinguir
onde estão em uma determinada seção do site:

 Bandeiras de seção: Reforça em qual seção o usuário está

 Navegação de seção: Acesso a conteúdo categorizado de forma semelhante
 Modelos ou componentes exclusivos (apresentações de slides, galerias ou calendários de
eventos): Pontos visualmente identificáveis que os usuários podem se lembrar de passar e tentar retornar

Isso por si só é bastante simples. Fica interessante quando você leva em consideração o comportamento multitela
e o design adaptável. Você vê, enquanto os visitantes do site examinam seu site, eles estão construindo um mapa
mental de todos os pontos de referência identificáveis que encontram. Os dados mostram que muitas interações
ocorrem ao longo do tempo e entre dispositivos. Se os pontos de referência em sua interface parecerem
drasticamente diferentes de um ponto de interrupção ou dispositivo para outro, você corre o risco de desorientar
os usuários. Por outro lado, se você intencionalmente criar continuidade na interface do usuário, mantendo as
qualidades reconhecíveis desses pontos de referência em todos os tamanhos de tela, promoverá uma experiência
mais familiar e intuitiva para os visitantes recorrentes. Você pode aumentar a continuidade dos pontos de
referência em seu design examinando como os elementos da interface do usuário se adaptam aos pontos de
interrupção:

 Posição: Eles mantêm sua posição relativa na página ou saltam?

 Formulário: Os itens mantêm sua forma ou se transformam em algo totalmente diferente?
 Cor:  As cores do primeiro plano e do plano de fundo permanecem as mesmas ou mudam?
 Prioridade: Os componentes de página mais
proeminentes mantêm seu peso visual proporcional
nos tamanhos de tela ou a hierarquia muda?
 Visibilidade:  As coisas visíveis ainda são reveladas e
os objetos ocultos ainda estão ocultos?

O site da United Pixelworkers tem continuidade entre marcos em pontos

de interrupção. O logotipo é vermelho no canto superior esquerdo, a
navegação está em uma barra preta na parte superior e você sempre
pode acessar o carrinho a partir do botão azul brilhante no canto superior direito - independentemente do tamanho da tela que você
visita! 

 EDGES (bordas)

As bordas demarcam o final de um objeto ou seção e o início de outro.  No design da interface do usuário, os
limites ajudam a demarcar as coisas em um site, como o cromo do conteúdo, a navegação principal da navegação
secundária e as ferramentas globais das funções específicas da página. Em um nível micro, as bordas ajudam a
definir os limites dos alvos de toque e a separar blocos individuais de conteúdo.

O aplicativo do Foursquare (à esquerda) reúne muitos itens tocáveis

em um espaço pequeno; limites de botões claramente definidos

melhoram a capacidade de digitalização e minimizam toques
errados. 

O aplicativo da Yummly (à direita) usa bordas de interface distintas

para definir alvos de toque de botão e para separar visualmente a
região do masthead da área de conteúdo e distinguir entre receitas
individuais. 

Ao projetar para telas amplas, podemos contar com espaços em branco e colunas para delinear os limites do
conteúdo. Ao lidar com viewports estreitos, temos menos espaço para compor colunas e utilizar o espaço em
branco para diferenciar efetivamente as seções de uma página. Podemos recuperar os benefícios utilizáveis das
bordas em cenários de tela pequena ao:

 fornecer dicas visuais óbvias para sugerir a área de destino de toque ativa de links e botões,
 usando mudanças na cor de fundo ou bordas fortes para distinguir as regiões do modelo.

Definir bordas usando divisores horizontais ou mudanças na cor de

fundo pode fornecer dicas visuais importantes para distinguir uma
região de conteúdo da próxima (por exemplo, separar o conteúdo
principal de links relacionados).  
  USING ICONS (Usando ícones) 

Os ícones podem ser uma maneira eficaz de comunicar informações e destacar as opções de navegação enquanto
economiza espaço dentro dos limites apertados de uma tela pequena. Símbolos universalmente reconhecíveis
também podem superar as barreiras linguísticas, tornando uma interface mais acessível globalmente.

Embora os ícones possam apelar para sensibilidades estéticas e fornecer uma ótima solução para organizar
visualmente sua interface, eles também têm o potencial de introduzir impedimentos à usabilidade.

Os ícones funcionam muito bem quando são familiares e óbvios, não deixando espaço para interpretações
errôneas. Mas mesmo muitos dos ícones mais usados têm múltiplos significados.

Como geralmente têm vários significados, até ícones

simples podem ser ambíguos. 

 Lápis: Escrever ou editar?
 Mais: Adicionar item ou expandir?
 Menos: Remover item ou recolher?
 X: Fechar ou excluir?
 Lupa: Zoom ou busca?
 Caret: Jogar, ir ou deslizar certo?

Como vemos, mesmo em cenários simples, os ícones podem ser ambíguos. Enquanto isso, o fascínio de uma
interface do usuário mínima tenta muitos designers a usar ícones para representar conceitos muito mais
complexos. Isso novamente nos desafia a pesar o valor de economizar espaço contra a importância da
compreensão da interface. Mesmo que os ícones sejam finalmente decifráveis, o ato de interpretá-los aumenta a
carga cognitiva do usuário. Isso introduz atrito no processo de tomada de decisão e pode impedir a navegação.

 TEXT LABELS (etiquetas de Texto)

Ao contrário dos ícones, rótulos de texto bem escritos podem deixar menos espaço para interpretações errôneas,
resultando em menos carga cognitiva para o usuário.

Compare as duas capturas de tela a seguir, ambas emparelhando ícones com texto. O primeiro exemplo se
concentra principalmente nos ícones, enquanto o segundo enfatiza os rótulos de texto.

A Universidade de Delaware usa principalmente ícones (à esquerda). 

Ênfase do Walmart em rótulos de texto. 

A natureza abstrata dos gráficos exige bastante

interpretação, e o texto que os acompanha é mais difícil
de escanear, em parte por causa do arranjo da grade e
em parte por causa do tamanho do tipo. Lembre-se de
que, com dispositivos móveis, é provável que o texto
seja visualizado à distância e com a pessoa e o
dispositivo possivelmente em movimento. No segundo exemplo, os rótulos assumem o foco. O alinhamento à
esquerda do texto fornece uma linha de leitura reta para baixo, facilitando a digitalização e a comparação das
opções de navegação. Aqui, os ícones são usados para complementar o texto. Como processamos imagens
rapidamente, uma vez que o usuário tenha aprendido o significado de um símbolo, suas interações futuras serão
aceleradas por meio do reconhecimento (ou seja, associando a imagem ao link que ela representa).

O exemplo anterior também assume duas coisas. A primeira é que os rótulos de texto são realmente bem
escritos. O texto pouco claro pode ser tão prejudicial à navegação quanto a iconografia ambígua. A segunda
suposição é que o visitante é um usuário iniciante. Uma vez que uma pessoa tenha aprendido as posições e
significados dos ícones na primeira captura de tela, a carga cognitiva diminuirá e a interface se tornará familiar e,
portanto, mais fácil de usar.

Isso está de acordo com a pesquisa conduzida pela User Interface Engineering , que descobriu que:

 texto e imagens funcionam melhor do que apenas texto;

 o texto sozinho funciona melhor do que as imagens sozinhas;
 os ícones são aprendidos, mas as posições dos ícones são aprendidas mais rapidamente (portanto, se seu
aplicativo favorito receber um novo ícone, você não ficará confuso; mas se alguém confundir as posições
dos aplicativos na tela inicial do seu telefone, você ficará louco) .

 VISIBILITY AND DECISION-MAKING (Visibilidade e tomada de decisão)

Outro conflito entre gráficos e texto surge quando você está determinando como apresentar uma lista de
produtos. Uma vantagem de exibir imagens é que elas ajudam o usuário a diferenciar visualmente as
opções. Como as imagens do produto ocupam mais espaço do que suas contrapartes de texto, o número de itens
visíveis na janela de visualização será reduzido. Então, o que é mais importante, mostrar mais detalhes para cada
opção ou mostrar mais opções em uma única visualização?

Quando as distinções de categoria são óbvias, a adição de dicas visuais (como imagens de produtos) beneficia
minimamente a usabilidade. O principal objetivo é mostrar opções e facilitar ao usuário a digitalização e
comparação dessas opções. Nesses cenários, os títulos sozinhos podem ser a melhor escolha porque comparar
itens é mais fácil de fazer quando você pode ver todas (ou a maioria) de suas opções de uma só vez. Se os
visitantes precisarem rolar ou deslizar para ver suas opções, eles serão forçados a confiar na memória,
comparando o que está em exibição no momento com o que estava em exibição anteriormente.

Por outro lado, para produtos semelhantes entre si, as imagens ajudariam os usuários a diferenciá-los
melhor. Nesse caso, a diferenciação entre itens pode ser mais importante do que comparar itens em uma única
visualização.

O uso de imagens para exibir informações de categoria

ocupa mais espaço, resultando em menos categorias
cabendo na janela de visualização. 

Embora menos atraente visualmente, uma lista de

categorias de texto simples é mais fácil de digitalizar e
selecionar. 

Ao navegar por produtos individuais, no entanto, as

imagens do produto e os detalhes visuais desempenham
um papel importante para ajudar os usuários a distinguir os
itens. 

 ROUTE VISIBILITY AND HIDDEN MENUS (Visibilidade da rota e Menus Ocultos)

Muitas convenções populares de navegação móvel envolvem ocultar e exibir menus. Essa técnica depende de um
botão de menu (geralmente o infame ícone de hambúrguer) que aciona a aparência de um menu, alternando a
abertura de um painel ou pressionando a navegação fora da tela. O debate persiste sobre se o ícone do
hambúrguer é universalmente reconhecido como um símbolo para representar um menu. Deixando de lado sua
potencial ambiguidade, o debate ignora uma preocupação maior: mesmo que as pessoas reconheçam isso como
uma sugestão para chamar um menu, as opções do menu são inicialmente ocultas e, portanto, essas rotas são
obscurecidas.

Os usuários que seguem o rastro da informação vasculham a tela em busca de palavras-chave: texto que mapeia
para as palavras ou frases em sua mente que descrevem o que estão procurando. Em telas largas, quando a
navegação é exposta, essas palavras-chave ficam visíveis e aumentam a probabilidade de os usuários as
localizarem e clicarem. Supondo que seu menu de navegação principal tenha rótulos concisos, mutuamente
exclusivos e familiares, ao armazená-los fora de vista, você está ocultando essas poderosas palavras-chave e, na
verdade, obscurecendo as principais rotas de navegação.

Padrões de navegação responsivos e móveis que ocultam e revelam itens

de menu mantêm o conteúdo como o foco da interface do usuário. Esteja
ciente de quais palavras-gatilho você também está escondendo. 

------------------------------------------------------------------------------------------------------------------------------

Facetas da UX
Peter Morville criou um diagrama para ilustrar as facetas da experiência do usuário, que é especialmente útil para
ajudar clientes (e alguns profissionais) a entender por que eles precisam pensar além da usabilidade. Ele
desenvolveu o que conhecemos como The User Experience Honeycomb (algo como “Colmeia da Experiência do
Usuário”)

O diagrama da colmeia é útil por uma série de razões. Uma delas é porque ajuda a levar a conversa além da
usabilidade e também a entender a necessidade de definir prioridades. O que é mais importante para o seu
projeto, ser acessível ou desejável? Usabilidade ou credibilidade? Não há um passo-a-passo universal, tudo
depende das características de cada projeto, do contexto, dos usuários e do conteúdo.

Outra utilidade da colmeia é que ao invés de achar que todos os problemas de um site podem ser resolvidos
apenas pela troca de layout, é importante avaliar as metas a partir das facetas da experiência de usuário, que
oferecem uma abordagem mais estratégica e objetiva do problema.

Abaixo, temos uma explicação sobre cada um dos favos da colmeia.

 Useful (Utilidade). Não devemos nos contentar em colorir o desenho proposto pelo cliente. Como
profissionais, precisamos ter coragem e criatividade para questionar a utilidade dos produtos que
projetamos, e aplicar nosso conhecimento para definir soluções inovadoras;
Se um produto não é útil para ninguém, qual o motivo de ele existir? Um propósito e uma utilidade é
crucial em qualquer produto em comparação ao seu concorrente. O produto deve despertar o interesse
em realizar alguma tarefa específica e não somente em apelo estético ou apenas funcional. A utilidade de
um produto varia de acordo com a percepção de quem utiliza. Por isso é importante saber para quem
você está construindo e se realmente aquele público acredita que seu produto é útil para eles.

 Usable (Usabilidade). A facilidade de uso não deixa de ser essencial, porém uma interface focada
simplesmente em uma boa interação humano-computador não contempla todas as necessidades dos
usuários. Em suma, a usabilidade é necessária, mas não
suficiente;
Podemos relacionar utilizável com a usabilidade.
Produtos com pouca usabilidade ainda funcionam, mas
dificilmente fará que os usuários os utilizem. Um bom
exemplo é o iPod que fez que uma geração de MP3
players ficassem para trás. Apesar de não ter sido o
primeiro MP3 player a ser criado, o iPod foi o primeiro
que realmente era utilizável e assim trazia prazer para
seus usuários.

 Desirable (Desejo). Nossa busca pela eficiência deve ser

equilibrada pela apreciação do poder e valor de uma
imagem, identidade, marca e outros elementos
do design emocional;
Skoda e Porsche são ambos montadoras de carros. Eles são, em certa medida úteis, utilizáveis,
encontráveis, credíveis, acessíveis e valiosos, mas Porsche é muito mais desejável do que a Skoda. Isso não
quer dizer que Skoda é indesejável. Se ambos estiverem de graça, as pessoas ainda sim irão optar pelo
Porsche. Mas porque?
O convencimento e desejo é transmitido através do design, do branding, da imagem, da identidade, da
estética e da concepção emocional. Também, o quanto os usuários convencem outros usuários o quanto é
bom e útil aquele produto para que ele se torne desejável.

 Findable (Encontrabilidade). Devemos nos esforçar para criar uma boa navegação, aonde os conteúdos
são facilmente localizáveis, para que sempre os usuários possam encontrar o que precisam;
Quando falamos em encontrável ou  findability  nos referimos a produtos digitais e de informação.
Imagina ler um jornal que não está categorizado por esportes, notícias, negócios, etc? Ninguém compra
um produto que não consegue encontrar em uma loja, por exemplo.
A hierarquia e arquitetura de informação em produtos digitais é extremamente importante para que o
usuário não se frustre quando estiver procurando alguma informação específica ou alguma seção e isso
ajudará a definir uma boa ou uma má experiência de uso do produto.

 Accessible (Acessibilidade). Assim como existem prédios com elevadores e rampas, nossos sites devem
ser acessíveis a pessoas com deficiência, ou com algum tipo de necessidade especial (mais de 10% da
população);
Quando falamos em acessibilidade estamos falando sobre o fornecimento de uma experiência que
funcione independente da capacidade cognitiva de quem está utilizando o produto ou serviço. Seja visual,
auditiva, motora ou que tenha o aprendizado prejudicado.
Infelizmente o design para acessibilidade é visto por muitas empresas como perda de dinheiro. Isso
acontece pois a percepção de usuários com redução cognitiva é a minoria na população. Nos Estados
Unidos, pelo menos 19% das pessoas têm algum tipo de deficiência de acordo com os dados do censo e é
 provável que este número seja maior em países menos desenvolvidos. Neste cenário dos EUA, isso
representa 1 em cada 5 usuários que poderá usar o produto no mercado.
É válido lembrar que quando projetamos para acessibilidade não neglicenciamos a experiência do
usuário, visto que criar produtos acessíveis pode ser utilizado por todos e não apenas aqueles com
deficiência. Em muitos países inclusive os da Europa é obrigatório projetar para acessibilidade. Não
projetar pode resultar em multas, mesmo ainda muitas empresas não seguindo a regra.

 Credible (Credibilidade/confiável). Graças ao Web Credibility Project, podemos entender melhor quais
elementos do design influenciam a credibilidade do nosso projeto aos olhos do usuário;
"Engane-me uma vez e eu terei vergonha de você. Engane-me duas vezes e eu terei vergonha de
mim".  Com a crescente dos produtos digitais, os usuários não estão dispostos a serem enganados. A
medida que os produtos se tornam críveis, a proporção de usuários aumentam. Então não engane seu
usuário.
Quando falamos de credibilidade em produtos ou serviços, estamos falando que o usuário confia que ele
conseguirá realizar a tarefa ou objetivo no seu produto. Não somente isso, mas também isso o fará ficar
mais tempo utilizando seu produto. É quase impossível entregar uma experiência se o produto é uma
mentira e os usuários perceberão isso mais cedo ou mais tarde.

 Valuable (Valioso). Nossos sites devem acrescentar valor para os stakeholders. Para organizações sem
fins lucrativos, a experiência do usuário deve avançar a missão. Para organizações que visam o lucro, deve
contribuir para satisfazer as necessidades e otimizar a satisfação do consumidor.
Vamos falar de valor, mas não apenas $$$$. Valor está em fazer que o usuário veja que aquilo é bom e
útil para sua vida. Se o produto não entrega valor dificilmente ele sobrevive. Se o usuário investe R$ 100
no seu produto e ele obtém R$ 10.000 em lucro ou em redução de gasto é muito mais efetivo e propício ao
sucesso do que um produto que ele investe R$ 10.000 e ele tem de retorno R$ 100.
Valor está em resolver problemas e tem apelo emocional para o usuário. O Uber por exemplo entrega
valor a partir do momento que ele oferece um serviço mais humano e de forma mais barata com relação
aos taxis tadicionais ou o cartão do Nubank que usa a linguaguem do usuário para criar um vínculo de
aproximação.

------------------------------------------------------------
Design Gráfico – O que é Gestalt
Gestalt é uma palavra de origem alemã que pode ser traduzida aproximadamente como Forma Total ou Forma
Global. Segundo essa teoria que também é conhecida como a psicologia da forma: o que acontece em nosso
cérebro é diferente do que é captado pelos nossos olhos, ou seja, o que se entende é diferente do que se vê, pois
o ser humano não percebe as partes isoladamente, mas o todo formado pelas partes.

A Gestalt é uma doutrina que defende que para se compreender as partes, precisa antes compreender o todo!

A psicologia da forma trabalha com 2 conceitos:

 Conceito da Transponibilidade
Transponibilidade vem de transpor, ir além. Segundo o critério da transponibilidade, independente dos
elementos que compõem determinado objeto, a forma é o que se sobressai em nossa mente. Por
exemplo as letras: S – O – L não constituem apenas uma palavra em nossa mente, elas evocam a imagem
do sol: sua cor, sua forma, seu calor e o seu simbolismo...
 Conceito da Super-Soma
O conceito de Super-Soma refere-se a ideia de que não se pode ter conhecimento de um todo por meio
de suas partes, pois o todo é mais do que a soma de suas partes. Por exemplo: se pegarmos 4 triângulos e
os juntarmos, eles não serão mais 4 triangulos A B C D, mas sim uma super-soma resultando em um
quadrado E com características próprias.

O que é FORMA?
É a configuração física, característica dos seres e das coisas, como decorrência da estruturação de suas
partes. A forma tem 4 configurações básicas:

 Ponto: O ponto não tem dimensões, ele é um indicativo de

posição.

 Reta: Já 2 pontos delimitam uma reta, que

por sua vez não tem largura, mas tem
comprimento e indicam uma trajetória.

 Plano: Quando acontece o

deslocamento de uma reta, nós temos a
formação de planos

 Volume: Quando os planos se

movimentam para cima ou para baixo
eles formam volumes

Triângulos, quadrados e círculos são as formas geométricas mais conhecidas e cada uma delas nos passam
sensações diferentes: por exemplo, formas quadradas são estáveis e seguras pois elas tradicionalmente são
usadas para enquadrar, reservar, proteger. Já as formas triangulares são mais dinâmicas e ousadas, mas também
podem ser associadas a algo mais intimidador, por formar pontas e nos remetem instintivamente as ameaças
naturais. As formas circulares, as formas mais arredondadas são interpretadas como mais amigáveis pela nossa
mente.
Segundo Gestalt nós percebemos as formas segundo 4 princípios:

1) Tendência à estruturação: é a tendência que temos de agrupar elementos que se encontram próximos.
2) Segregação ou figura-fundo: não podemos ver objetos sem separá-los do seu fundo.
3) Pregnância ou boa forma: determina a facilidade com que percebemos as formas em uma composição
4) Constância Perceptiva: é a percepção de que os objetos permanecem os mesmos, apesar de parecerem
mudar com a luz e a distância, por exemplo.

Esses 4 princípios são a base para os 7 fundamentos da Gestalt:

1. SEGREGAÇÃO
Capacidade perceptiva de separar os elementos visuais presentes em uma imagem, gerando hierarquia
visual, ou seja, importância e ordem de leitura
2. SEMELHANÇA
Elementos visualmente semelhantes tendem a ser agrupados e a constituir unidades. Cores e formas, por
exemplo, contribuem para a construção de uma unidade visual
3. PROXIMIDADE
Elementos próximos tendem a ser agrupados visualmente formando uma unidade
4. UNIFICAÇÃO (unidade)
Usa o fundamento da semelhança e o fundamento da proximidade para criar unidade. Vários elementos
podem ser percebidos como um todo: os elementos tem tanta harmonia visual que eles se
complementam em criam uma nova forma
5. PREGNÂNCIA
Também conhecido como fundamento da boa forma. Afirma que as formas são percebidas mais
rapidamente se forem mais simples. Imagens com alta pregnância tem um alto entendimento pelo
público por serem visualmente mais simples. Já as imagens com baixa pregnância tem uma menor
capacidade de entendimento pois não são composições simples (elas tem muitas cores, formas e
texturas). Claro que não é um erro, apenas uma escolha consciente para expressar maior riqueza de
informações quando necessário.
6. CONTINUIDADE
Diz respeito à maneira como percebemos fluxo dos elementos, dando a impressão que eles estão
seguindo uma determinada direção, fazendo o olhar ser guiado na direção proposta pela imagem.
7. FECHAMENTO
A mente do observador se encarrega de completar as partes faltantes de uma composição ou de criar o
efeito reversível na relação figura-fundo. O fechamento pode ser usado para expor uma única ideia ou
explorar a ambiguidade de um tema

-----------------------------------------------------------------------------------------------------------------------------------------------------

Outras menções:

Princípio básico da Gestalt: O todo é maior do que a soma das partes.

“A + B” não é simplesmente “AB”, mas sim um terceiro elemento “C”, que possui características próprias.

8 leis da Gestalt:

1. Semelhança
Objetos similares se agruparão entre si.
 Lei da semelhança pode ser agrupada por forma, cor ou tamanho...

A lei da semelhança também pode causar o efeito da

anomalia (uma característica diferente que chama a
atenção).

Nesta capa do disco dos Beatles, foi usada a anomalia para dar
destaque a um elemento.

2. Proximidade
Elementos próximos costumam se agrupar,
formando uma unidade apenas.

As bolinhas de forma aleatórias, causam um caos no

cérebro, pois procuramos encontrar um padrão.

Desta forma é possível distinguir grupos bem

definidos, e o cérebro consegue ler a imagem com
maior facilidade.

Nós enxergamos grupos com elementos próximos. É um recurso

muito usado para sites e diagramações

No logotipo da Unilever há vários elementos individuais que estão dispostos de uma forma a
se enxergar a letra U. Primeiro se enxerga a letra U, depois é possível enxergar esses
elementos individuais.

3. Continuidade
Tendência a seguir uma direção ocasionado por elementos próximos.

Há um monte de bolinhas na primeira

imagem, mas nosso cérebro tente a
criar linhas contínuas.
 Mesmo que o “V” foi duplicado na segunda imagem, nosso cérebro vai enxergar o “X” e não 2 “V” porque ele
prefere criar 2 linhas retas, ao invés de 2 linhas quebradas.

Logotipos como adidas, coca-cola e nike também usam o recurso da continuidade, movimento...
4. Pregnância
Nosso cérebro vai simplificar qualquer objeto visto.

Na primeira imagem de cara vemos 3 quadrados, na segunda imagem

vemos 2 triângulos, nosso cérebro é preguiçoso e irá primeiramente
enxergar a forma mais fácil, para depois (quem sabe) enxergar 1 quadrado e
2 “L” ou então 2 tringulos grandes e 1 pequeno no meio...

Navalha de Occam: é uma

teoria científica formulada pelo
filósofo inglês William de
Occam lá pelos anos de 1300.
(esse pensamento já era
pregado por Aristóteles no
século 4 A.C. ).
Entre hipóteses formuladas
sobre as mesmas evidências, é
mais racional acreditar na mais
simples.

Convertendo isso para o campo do Design: havendo opção entre design funcionalmente equivalente, o
design mais simples deve ser selecionado. A simplicidade não está relacionado apenas ao design, mas há
um universo como um todo.

5. Fechamento e Unificação

Tendência de completar elementos que faltam em uma

imagem para garantir sua compreensão.

Nosso cérebro preenche as lacunas da imagem de forma

eficiente. Mesmo faltando partes, conseguimos
compreender. Claro que quanto mais comum e conhecidas
são as formas, mais rápido nosso cérebro consegue
preencher.
 Mas nestes logotipos também
conseguimos enxergar a imagem,
mesmo faltando parte dela.

6. Figura / Fundo

Tendência que nosso cérebro tem em separar as imagens em figura e fundo.

Usa o espaço negativo para criar

duas ou mais interpretações.

Espaço negativo usado em um anuncio da coca-cola e logotipos

 7. Região Comum
Tendência em agrupar elementos que compartilham o mesmo fundo ou que sejam semelhantes em
tamanho e cor.

Site da apple
Music que
agrupa as
informações
através das
cores de fundo.
Resultando em
um site limpo,
simples e
organizado.

8. Simetria

A composição não deve fornecer uma sensação de desordem ou

desequilíbrio.

É a harmonia por meio da reflexão do elemento.

A simetria é o aspecto mais básico e duradouro da beleza.
Pode-se utilizar para criar equilíbrio, harmonia e estabilidade.

Logotipos como da Motorola, Mercedes-Bens, McDonalds e Toyota utilizam simetria.

-----------------------------------------------------------------------------------------------------------------------------------------------------

Outras menções:

Gestalt: Não vemos partes isoladas, mas relações. Isto é, uma parte na dependência de outra parte. Para a
nossa percepção, que resultado de uma sensação global.

O que é Gesltat?
Estuda como o nosso cérebro percebe as formas. É a “psicologia das formas”. Ela entende que a nossa percepção
das coisas se dá como um todo, de uma forma unificada, e não em pontos isolados.

O processo de interpretação de uma forma está relacionada com forças externas e internas. Forças externas são
provenientes da luz do objeto que refletem na nossa retina, e as formas internas estão relacionadas ao processo
fisiológico do nosso cérebro (estimulação que o nosso sistema nervoso tem ao ver tal forma e estabelecer algum
significado).

Para que serve a Gestalt?

Gestalt nos ajuda a entender como a informação será passada através das formas que criamos.

Ela auxilia as pessoas a entenderem e assimilarem as informações que nós passamos pelas imagens.

Estudando Gestalt podemos perceber o porquê algumas formas agradam mais que outras, o porquê enxergamos
um objeto de tal maneira, etc.

Principais leis da Gestalt:

1) Unidade
Uma unidade é um único elemento que se encerra em si mesmo ou
também um conjunto de elementos percebidos que constituem “um
todo”.

2) Segregação
Diz respeito a nossa capacidade perceptiva de evidenciar, destacar,
separar uma ou mais unidades na composição inteira ou em partes
dela. Essa segregação pode ser feita por diversos elementos visuais:
cores, sombras, texturas, pontos, linhas, etc.

3) Unificação
A unificação acontece quando existem elementos iguais ou semelhantes
distribuídos de forma coerente e harmônica.
Os princípios básicos da unificação são as leis da proximidade e de semelhança.

4) Proximidade
 Elementos próximos uns dos outros tendem a se agruparem e são percebidos como um todo ou unidades
dentro de um todo.

5) Semelhança
Elementos semelhantes tendem a se agruparem se tornando “um”,
como um todo, ou unidades dentro de um todo. Essa semelhança
pode ser cor, forma, tamanho, textura, etc.

6) Fechamento
O fechamento se estabelece para a formação de unidades através
da nossa percepção. Nosso cérebro interpreta uma forma
completa se os elementos estão estruturados de uma forma
definida.

7) Continuidade
A continuidade acontece quando elementos estão próximos e
dão a impressão de seguir determinada direção. Quando existe
uma repetição ordenada dos elementos.

8) Pregnância da forma
Quanto mais evidente for a forma do objeto, quanto mais
intuitivo e de fácil compreensão é a leitura, maior é o grau de
pregnância do objeto.

------------------------------------------------------------
XX
Qual formato de imagem utilizar na Web?
Qualidade da imagem:

Lossless (sem perdas)

Lossy (com perdas)
Profundidade de cores

Color Index (cores limitadas até 256)

Direct Colors (Milhares de cores)

BMP (Bitmap)
Compressão Lossless e Directs Colors

 Formato mais simples de imagem

 Não perde qualidade a cada salvamento
 Arquivos bem pesados
 Não suporta transparência
 Suporta de 1 até 24 bits de cores

GIF (Graphics Interchange Format)

Compressão Lossless e Index Colors

 Suporta transparência até 8 bits, ou seja, 256 cores

 Suporta animações
 Peso reduzido de arquivos
 Compressão Lossless. Não perde qualidade em cada salvamento
 Suporta apenas cores indexadas.

JPEG (join Pictures Expert Group)

Compressão Lossy e Direct Colors

 Formato Universal para Web

 Suporta 24 bits, ou seja, até 16 milhões de cores.
 Não suporta transparência
 Perda de qualidade em cada salvamento
 Jpeg200 é uma variação do JPG que permite salvar sem perdas de qualidade.

PNG (Portable Network Graphics)

Compressão Lossless e Index e Direct Colors

 Suporta transparência
 Suporta 24 bits, ou seja, até 16 milhões de cores
 Melhor definição
 Não perde qualidade em cada salvamento
 Arquivos mais pesados
 Suporte à animação com o tipo APNG (Animate Portable Network Graphics)
TIFF (Tagged Image File Format)
Compressão Lossless e Index e Direct Colors

 Suporta de 8 até 48 bits de cores

 Compressão em perda de qualidade
 Apenas arquivos originais TIFF (não é possível converter)
 Suporta transparência
 Arquivos pesados
 Considerado por muitos como o melhor formato de imagem para se trabalhar.

WebP (Formato de imagem desenvolvido pelo google)

Compressão Lossless e Index e Direct Colors

 Suporta transparência
 Suporta 24 bits, ou seja, até 16 milhões de cores
 Melhor definição
 Não perde qualidade em cada salvamento
 Suporta animações
 Arquivos mais leves que o PNG


SVG (Scalable Vector Graphics)

O único que não é bitmap, os outros todos são.

 É o padrão de imagem vetorial da web

 É responsivo
 Animações em alta qualidade
 Estilizável e interativo via CSS
 Rico em detalhes. Alta resolução
 Foi criado pelo W3C, ou seja, é tudo código
 Arquivos muito leves

------------------------------------------------------------
SEMIÓTICA
É a ciência dos signos e de seus processos significativos

Linguagem verbal e não verbal. Pode se referir a outros tipos de linguagens como gestos, sons, cheiro...

Signo é uma coisa que representa um objeto

 Signo é um meio de campo entre “o que ele representa” e “a mensagem
que é interpretada”

No processo da semiose temos três (03) formas em que um signo

conceitua algo: ÍCONE, SÍMBOLOS E ÍNDICE.

Ícones

São a representação literal da forma do objeto ou item o qual estão representando. 

Índice

O índice requer um conhecimento prévio do que é representado, algum tipo e nível de experiência ou
fato ocorrido.

Símbolos

Os símbolos são signos adotados para representar algo, mas que não necessariamente possuem
sentido ou leitura literal com aquilo que o signo quer conceituar.

Aqui a assimilação acontece em razão a convenções, hábitos e a um processo de relembrança (ou

precisa de uma explicação prévia).

------------------------------------------------------------
XX
------------------------------------------------------------
XX

------------------------------------------------------------
XX
------------------------------------------------------------
XX