Design de Interface e

Usabilidade
UI e UX Design
 O Designer

O Design tem inúmeras especializações, aplicações e responsabilidades que abrangem uma

diversa gama de habilidades. O papel mais conhecido é o de designer gráfico, aquele
profissional criativo que aplica seu conhecimento em desenvolver peças de comunicação
bonitas e efetivas.
Porém, a mágica acontece quando entendemos a
real função do design em diferentes contextos.
Ele é uma maneira de aprimorar o valor entregue
para o usuário através de um produto e ir além
de suas características funcionais, criando uma
boa experiência de uso.

encurtador.com.br/klyMU
 Design Gráfico

Forma de comunicação expressada com elementos visuais (imagens, textos e gráficos),

envolve o conhecimento e entendimentos dos principais fundamentos do design:
 Habilidades e Responsabilidades

Dominar (saber usar desses fundamentos) é essencial para desenvolver projetos que
Identidade Visual (logos)
tenham resultado de sucesso e tenham um diferencial no mercado, impactando pessoas e
empresas. MasPromocional
Material algumas habilidades
(banners)são requeridas, como:

Embalagem

Material Editorial (revistas, catálogos e livros)

Ilustração

Tratamentos Fotográficos
 Programas e Ferramentas

Adobe Photoshop
Adobe Ilustrator
Adobe Indesign
Corel Draw
 UX Design x UI Design

Além da confusão sobre o estudo de design, a

diferença de maturidade de empresas em relação
à nova economia e as transformações em
negócios que ocorrem a partir dela, acarretam em
confusão a etimologia dos termos UX (user
experience) e UI (user interface).

Estes papéis se colocam como o futuro do design

e muitas vezes são colocados como termos
intercambiáveis. Apesar de ambos serem
trabalhos complementares, são usados para
diferentes objetivos durante o desenvolvimento
de produto, com processos distintos.
 UX Design

Se trata de entender e resolver problemas focados no usuário. UX envolve usabilidade,

acessibilidade e o quanto agradável é a relação entre o usuário e seu produto.
Em outras palavras é tornar a vida do usuário mais fácil e mais intuitiva possível ao
utilizar um serviço ou um produto.

Livros Recomendados

Não importa quão

bom seja um
produto se, no
final, ninguém o
usar.
Donald A. Norman
 UX Design - Habilidades e Responsabilidades
Pesquisa de descobertas Wireframes
Neste momento o UX Designer vai entender o problema a ser Aqui, o UX Designer vai criar esquetes para
resolvido e também os requerimentos do projeto, os objetivos, validar toda a pesquisa já feita sem se prender
timeline, qualquer tipo de restrição ou mesmo materiais já
muito aos detalhes visuais
existentes.

Pesquisa sobre o usuário Testes de Usabilidade

Neste ponto será investigado o perfil do usuário, seu objetivo, Importante para testar seu designer com
suas necessidades, medos, dificuldades e o que mais precisar usuários reais e ver como seu produto
para que o usuário tenha uma ótima experiência. realmente funciona, muitas vezes feito com
o apoio do UI Designer.
User Journey e Personas
User Journey é o passo a passo percorrido pela interação do
usuário com o produto. Personas é a criação de um ou mais
personagens fictícios que representam seu público alvo.
Exemplo de Wireframe
 Programas Aplicativos Usados

Google Analytics

Hotjar

CrazyEgg

Mural

Mural Mindmup
 O UX Designer

Atualmente, no mercado de trabalho, vemos diferentes atuações de profissionais de UX:

● UX Research (pesquisa)
● UX Writing (os conteúdos textuais)
● UX Metrics (o que vamos medir)
● UX Strategy (a estratégia de UX como um todo).
 O UX Designer

O UX Designer não faz muitas ações relativas à criação visual, é sobre ser curioso,
motivado a aprender, entender como as pessoas pensam e principalmente ter empatia.

Um amigo gentilmente me emprestou um carro. Pouco antes de eu estar a ponto de partir,

descobri um bilhetinho me esperando: “Eu deveria ter mencionado que, para poder tirar a
chave da ignição, o carro precisa estar em marcha à ré.” O carro precisa estar em marcha à
ré! Se eu não tivesse visto o bilhete, jamais poderia ter imaginado isso. Não havia qualquer
indicação física no carro: o conhecimento necessário para este macete tinha de existir na
cabeça. Se o motorista não dispõe desse conhecimento, a chave fica na ignição para sempre.

Trecho retirado do Livro: O design do dia a dia

 UI Design

É a linguagem visual de um produto. O UI Designer é responsável pela criação e

organização de todos os elementos visuais da interface. Também é, muitas vezes,
responsável pela interação que o usuário tem ao navegar pelo site ou aplicativo.

A interface pode ser nesse caso a tela de
um website ou de um aplicativo no
smartphone, mas pode ser também
interface via voz ou gestos.
O designer de interface trabalha com
desenvolvimento gráfico, guias de estilo,
prototipação, interatividade, animação e
até implementação com o desenvolvedor.
Os elementos podem ser os botões,
o menu, campos de texto.
Clicar em um botão parece simples,
mas para ser clicado é importante que
tenha a interação com o usuário,
então um bom UI Designer fará com
que essa aplicação seja o mais fácil e
sem atrito possível.
 Pontos Importantes ao Desenvolver sua Interface

● Desenvolva elementos com função previsível, procurando entender qual é o

movimento ou ação esperada pelo usuário.
● Procure expor as funcionalidades de forma que o usuário consiga descobri-las e
entendê-las da maneira mais fácil possível.
● Deixe o mais simples possível. Todo elemento deve ter um propósito.
● Sempre respeite a hierarquia de atenção do usuário.
● Chame a atenção do mais importante usando cores, brilho e contraste.
● Implemente feedback. O usuário sempre deve ter feedback de uma tarefa que está
tentando performar.
● Mantenha consistência de marca ao longo do seu produto.
 A porta de Norman
A “porta de Norman” é um exemplo de mau design descrito
por Don Norman em seu livro: O Design do dia a dia - The
Design of Everyday Things. Quando nos deparamos com
uma porta e não sabemos se devemos puxar ou empurrar para
abri-la, a culpa não é nossa, mas do design.
Essa é apenas uma situação que exemplifica como um design
ruim pode complicar as nossas vidas ao proporcionar uma
experiência ruim. E, dessa forma quando não há alguém que
se preocupe com a experiência do usuário, é comum nos
depararmos com as seguintes situações:
● dificuldade em entender como um aplicativo funciona;
● dificuldade para completar tarefas dentro da interface;
● impossibilidade de mudar configurações dentro da
interface;
 Elementos Importantes no UI Designer

Tipografia
É o estudo, criação e aplicação dos caracteres, estilos,
formatos e arranjos visuais das palavras.
Branding
Branding é o conjunto de ações alinhadas ao
posicionamento, propósito e valores da marca. O
objetivo do branding é despertar sensações e criar
conexões conscientes e inconscientes, que serão
cruciais para que o cliente escolha a sua marca no
momento de decisão de compra do produto ou
serviço.
Layout
Em design gráfico, layout gráfico ou projeto gráfico é a
disposição dos elementos visuais em uma página. Geralmente
envolve princípios organizacionais de composição para atingir
objetivos específicos de comunicação.
Teoria das Cores
O esquema de cores em UI Design trata do uso de diferentes
cores dentro de uma interface. Nesse sentido, o UX/UI design
utiliza cor para trazer emoção para o usuário, indicar as
interações que ele deve fazer e, claro, deixar a interface
esteticamente mais agradável para a navegação.

Observamos aqui, que o designer gráfico tem uma maior relação com a área de UI Design.
 Habilidades e Responsabilidades
● Terá que pensar em todos os pixels e harmonia visual.
● Trabalhará de perto com o UX Designer, com os desenvolvedores e editores de conteúdo.
● É o designer visual da interface.
● Criará protótipos (criará o protótipo de design visual da interface do produto, o protótipo é o
layout mais próximo de como a página de um site ou tela de aplicativo será).
● Criação de Wireframes.
● Criação de Style Guide (criará um documento com os elementos do design de todos os
componentes usados no produto, como designer de cores, tipografia, menus, botões,
navegação de cliques).
● Teste de Usabilidade (ouvir os usuários e pensar em soluções que os ajudem a ter a melhor
experiência possível).
Programas e Ferramentas
O UI Designer

Um excelente UI Designer é aquele que

desenvolve uma interface intuitiva para o
usuário, o melhor design é o imperceptível.
Seu usuário é humano, e humanos cometem
erros e precisam de uma experiência
confortável com pouca carga cognitiva.
 O cliente que nunca mais volta - Sam Walton (Walmart)

Eu sou o usuário que abre a página do Eu sou o usuário que tenta,

seu site e aguarda segundos, minutos, insistentemente, ler as notificações do
horas enquanto sua página carrega. seu site no meu celular, mesmo
quando elas somem na tela.
Eu sou o usuário que tenta voltar à
página anterior, mas nunca consegue. Você pode está pensando que sou um
usuário muito calmo, paciente e empático
Eu sou o usuário que não enxerga tão com todos os problemas que seu site me
bem e, sem querer, acabo clicando em entrega de presente. Se você pensou
algum pop-up, mas nunca mais consigo assim, se enganou! Eu sou o usuário que
fechá-lo. nunca mais acessará seu site.
 A Usabilidade
● Acessar um site e ter facilidade de navegação;
● Fazer o download de um aplicativo e conseguir, sem ver instrução alguma, ou seja,
intuitivamente, completar alguma atividade;
● Usar algo que parece que foi feito sob medida para você;
● Não sentir raiva de quem desenvolveu o que você está usando.

Usabilidade é o quão fácil de usar é uma interface ou

sistema, no qual você navega, sem nenhuma insegurança e, assim,
consegue completar uma ação desejada, como por exemplo, a
compra de algum produto.

Quando falamos em “facilidade” também deve estar incluído o aspecto funcional: não
adianta a interface ser fácil de usar, mas não resolver as necessidades do usuário.
 A Usabilidade no dia a dia
Imagine a seguinte situação: Você decide comprar roupas e está apenas com seu celular.
Acaba lembrando que semana passada você fez um download de um aplicativo de um
e-commerce famoso. Aí você navega sem nenhum problema, encontra tudo o que você quer,
sente cada vez mais vontade de comprar, escolhe as peças, vê as promoções. Porém, no final,
não consegue finalizar o checkout, pois é complexo demais ou o formulário é super longo e
cansativo.
Pouco importa algo ser fácil, se não for aquilo que você
deseja ou se você não completou o seu objetivo final. Pois no
exemplo acima, você queria comprar roupas e não visitar um site.

Nesse sentido, a usabilidade se refere a facilidade do usuário

em interagir com a interface somada à funcionalidade e ao
atendimento de uma necessidade.
 Portanto, usabilidade e utilidade
são igualmente importantes e,
juntas, determinam se a interface é
eficiente.

ISO 9241
https://www.inf.ufsc.br/~edla.ramos/in
e5624/_Walter/Normas/Parte%2011/iso
9241-11F2.pdf
 A Usabilidade não é de hoje
Sabe o Steve Jobs, o Iphone, a Apple? E você sabe por que tanto se fala neles? Porque a Apple deu o
primeiro passo para que todas as outras se preocupassem com o UX Design.

A Apple sempre se propôs a criar as melhores experiências para seus usuários. Ainda em 1985,
quando os computadores eram algo bem distante da gente, eles lançaram o manual de Diretrizes para
Interfaces Humanas (Human Interface Guidelines — HIG) para o Apple II.

Afinal, Apple não inventou os smartphones., mas transformou a experiência da telefonia móvel. Tão
pouco não inventou nenhum aparelho para escutar MP3. Porém, o design do Ipod era incrível e
impecável.
 Usabilidade é uma questão de sobrevivência
Antigamente, os produtos eram
desenvolvidos com o foco na tecnologia
e suas funcionalidades, deixando de
lado a parte mais importante do processo,
que é quem realmente vai fazer uso do
produto ou serviço, ou seja, o usuário final.
Por isso, os sistemas eram complexos demais,
o que resultava em projetos fracassados
ou desperdício de dinheiro, devido a
inúmeros re-trabalhos.
Usabilidade é uma questão de
sobrevivência: se você não consegue acessar
um site ou aplicativo, quantos minutos você fica
tentando? E quanto tempo você leva para clicar
no botão voltar, fechar a tela ou até mesmo
desinstalar um aplicativo?
Então, se você não insiste, por que outro usuário
vai insistir? Não, ele NÃO vai ficar tentando
acessar um site até criar calos nos dedos. É mais
fácil sair, não usar mais ou desinstalar o app.
Portanto, reflita sobre isso: usabilidade é
questão de sobrevivência!
 5 Componentes da Usabilidade
Aprendizagem/Clareza
O quão fácil é para os usuários realizarem alguma tarefa no
primeiro contato com o Design? Eles sentem algum tipo de Erros
dificuldade ou insegurança? Quais são as reações deles ao
Você sabe mensurar qual a gravidade dos
terem contato com a interface?
erros cometidos pelos usuários e com que
Eficiência facilidade eles se recuperam deles? Quantos
Os usuários estão realizando as tarefas no tempo estimado? E erros são cometidos?
esse tempo estimado, de fato, condiz com o tempo justo para
realização da tarefa? Satisfação
O quanto é agradável utilizar o designer
Memorabilidade
proposto?
Seus usuários passaram um longo tempo sem interagir com a
interface. Com que facilidade eles conseguem retornar às
atividades que haviam aprendido?
 Métricas - Medidas para Orientar o Projeto

A taxa de sucesso Taxa de Erros

Percentual de tarefas que os usuários conseguem Percentual de usuários que “erraram” ao realizar uma tarefa ou
concluir corretamente. fluxo.

Tempo por tarefa Satisfação Subjetiva dos Usuários

Segundo avaliação e estudo de Personas, com o Realize pesquisas com perguntas abertas e estabeleça quais
tempo que de fato os usuários concluem essa tarefa. respostas simbolizam algo positivo ou não.
Heurísticas de Nielsen
Heurísticas de Nielsen são 10 princípios de
avaliação da usabilidade de interfaces de
sites, criados pelo cientista de computação
Jakob Nielsen em 1990. Estes princípios
definem pontos importantes da composição
de interfaces e devem ser considerados no
momento da criação dos layouts.
 10 Heurísticas de Nielsen

Visibilidade do Equivalência Liberdade e

Consistência de
Estado do entre o sistema e controle do
Padrões
Sistema o mundo real usuário
1 2 3 4

Prevenção de Reconhecimento Estética e

Flexibilidade
Erros vs Memorização Minimalismo
5 6 7 8

Reconhecimento
Ajuda
de Erros
9 10

https://encr.pw/ZNaS2
Visibilidade do Status do Sistema O usuário deverá ser informado do que está acontecendo em tempo real. H
e
Equivalência entre o sistema e o mundo real Use ícones relacionados ao mundo real. Exemplo: pintar > pincel. u
r
Liberdade e controle do usuário O usuário deve ter a liberdade para ignorar, avançar, voltar, etc.com exceção das í
regras que vão contra o negócio ou interferem em outra funcionalidade s
t
Consistência e Padrões Preserve os padrões já conhecidos pelo usuário, tais como os botões em X para fechar, etc. i
c
Prevenção de Erros Ações drásticas como deletar e sair devem ser confirmadas antes de serem executadas, evitando, assim, erros. a
s
Reconhecimento em vez de memorização O usuário não tem obrigação de lembrar todo o caminho que fez dentro de um site. O uso da
breadcrumb (navegação por categoria) facilita isso. d
e
Flexibilidade O usuário deve poder escolher o melhor ajuste para utilizar a interface. Um bom exemplo disto são as janelas do
Windows.
N
Estética e Minimalismo Evite colocar muitas informações juntas. Ocultar parte da informação e permitir que o usuário a visualize i
apenas quando quiser é uma alternativa.
e
l
Reconhecimento de Erros Quando algo sair errado, deixe claro para o usuário o que está acontecendo e o que ele deve fazer para resolver.
s
e
Ajuda Oriente o usuário sobre a informação necessária e sempre busque deixar isto o mais claro n
possível e da maneira mais rápida.
 8 Regras de Ouro Ben Shneiderman

● Esforce-se pela consistência;

● Atender a usabilidade universal;
● Ofereça feedback informativo;
● Projete diálogos que indiquem o fim de um ação;
● Evite erros;
● Permita a fácil reversão de ações;
● Suportar o controle do usuário;
● Reduza a carga de memória de curta duração.
 6 Princípios de Designer de Don Norman

São seis princípios de design que ajudam a entender por que alguns produtos satisfazem os
consumidores enquanto outros os deixam frustrados.
Visibilidade As funções mais visíveis são aquelas em que o usuário
provavelmente será capaz de saber o que fazer em seguida. Do
contrário, quando as funções estão fora de vista, tornam-se mais
difíceis de encontrar, e consequentemente de saber como usá-las

Feedback O Feedback é o retorno de informação que mostra o efeito de uma

ação realizada, permitindo que a pessoa continue com a tarefa.
Vários tipos de Feedback estão disponíveis no design de interação:
áudio, tátil, visual, ou a combinações destes. Sem um Feedback
sobre a ação, os usuários podem desligar equipamentos em
momentos indevidos ou repetir comandos, executando a mesma
tarefa mais de uma vez.
 6 Princípios de Designer de Don Norman

São seis princípios de design que ajudam a entender por que alguns produtos satisfazem os
consumidores enquanto outros os deixam frustrados.
Restrições A maneira mais segura de tornar alguma coisa fácil de usar, com
poucos erros, é tornar impossível de fazê-la de outro modo,
restringindo a quantidade de escolhas. Quer impedir alguém de
inserir uma pilha ou um cartão de memória em sua câmera na
posição errada, com a possibilidade de danificar o equipamento?
Projete-os de tal modo que eles só se encaixem de uma forma,
ou faça-o de um jeito que encaixe perfeitamente independente da
forma que for inserido.
 6 Princípios de Designer de Don Norman

São seis princípios de design que ajudam a entender por que alguns produtos satisfazem os
consumidores enquanto outros os deixam frustrados.
Mapeamento Mapeamento é um termo técnico que significa o relacionamento
entre duas coisas, neste caso, entre os controles e seus
movimentos, e os resultados dessa relação no mundo. Quase
todos os produtos precisam de algum tipo de mapeamento entre
os seus controles e as ações que eles executam, como por
exemplo as setas para cima e para baixo usadas para representar
o movimento ascendente e descendente do cursor,
respectivamente, em um teclado de computador. Temos outro
exemplo ao dirigir um carro, quando para virar a direita, giramos
o volante no sentido dos ponteiros do relógio, de modo que a
parte superior também se mova para a direita.
 6 Princípios de Designer de Don Norman

São seis princípios de design que ajudam a entender por que alguns produtos satisfazem os
consumidores enquanto outros os deixam frustrados.
Consistência Isto se refere ao design de interfaces, onde precisamos ter
operações similares com elementos similares para realizar
tarefas semelhantes. Em particular, uma interface consistente é
aquela que segue essa regra, como o uso da mesma operação
para selecionar todos os objetos em qualquer circunstância, ou o
uso de um botão sempre na mesma cor, formato e posição para
submeter um formulário, seja ele de contato, cadastro ou
pesquisa.
 6 Princípios de Designer de Don Norman

São seis princípios de design que ajudam a entender por que alguns produtos satisfazem os
consumidores enquanto outros os deixam frustrados.
Affordance Affordance é um termo que não tem uma tradução literal para o
português, mas refere-se ao atributo de um objeto que permite
que as pessoas saibam como usá-lo, por tão óbvio que é, ou pelo
seu visual sugerir que é fisicamente possível. Um exemplo disso
é o botão de um mouse, que pela forma como ele é fisicamente
restringido em seu escudo de plástico em relação a posição do
dedo do usuário, sugere e dá indícios de que ele pode
pressioná-lo. Affordance é quando um objeto é perceptivelmente
óbvio e fácil para uma pessoa saber como interagir com ele.
 Teoria das Cores
Quando o assunto é cores, podemos
pensar, em um primeiro momento, que
sua escolha e utilização são feitos a partir
de gostos pessoais ou até mesmo pelas
preferências do usuário.
No entanto, existe muito conceito por
trás do que parece ser uma simples
escolha de paleta de cores para o seu
produto. Há questões psicológicas, de
acessibilidade e, claro, de experiência
do usuário.
As cores têm um grande impacto nas interfaces e nos
projetos. É comum dizer que uma boa paleta e
esquema de cores pode transformar um design de
“bom” para “ótimo”. E, portanto, o contrário também é
verdadeiro: uma péssima escolha de cor é responsável
por tornar um design ruim. No entanto, além do fator
estético, que é o mais óbvio, existem outras questões
que tornam o uso das cores em UI tão importante:
Reflexo da personalidade da marca e do produto
Melhorar a experiência do Usuário
Impacto na decisão de compra do cliente
 Psicologia das Cores

O impacto que as cores

têm em nossas vidas acaba
passando, muitas vezes,
despercebido. Mas a
verdade é que o fato de
gostarmos ou rejeitarmos
a cor de um produto vai
além do simples gosto
pessoal.
Cada cor tem um
significado e traz uma
mensagem diferente para
o usuário.
 Briefing

É uma ferramenta indispensável para que se chegue a termos claros e que o resultado de
um projeto seja satisfatório. Esse documento é o principal registro de ideias iniciais, então
é importante que ele seja claro, detalhado e aprofundado em relação ao que se pretende.

O briefing é um documento que reúne todas as ideias que o cliente tem para a
realização de determinado projeto, seja um site, uma campanha de marketing, uma peça
publicitária, uma identidade visual, entre outros.

Seria um manual de instruções adotado pela a equipe para ser seu guia A partir do
documento é possível chegar a resultados satisfatórios, já que todas as informações sobre
a solicitação terão sido obtidas junto ao cliente.
 Briefing - Menor Tempo de Produção

O cliente espera o cumprimento do prazo, o

briefing tende a tornar a execução mais
ágil.
O menor tempo de produção traz maior
satisfação para o solicitante e ainda
contribui para a organização da agência ou
do profissional que trabalha no projeto,
então o bom briefing agiliza tudo e também
traz mais credibilidade para o trabalho.
 Briefing - Resultados Alinhados
Falta de alinhamento com o propósito e objetivo do
cliente afeta os resultados. Isso pode garantir que o
cliente não permaneça na sua carteira.
A questão é que o papel de quem desenvolve o
trabalho é saber exatamente o que o solicitante
espera.
Por isso, durante a confecção desse documento, é
importante fazer os questionamentos mais objetivos
possíveis. Deve-se absorver tudo sobre a empresa, Um resultado certeiro e alinhado é
seus valores, sua identidade visual, o que é pretendido
quando todas as ideias do cliente
para o projeto e demais detalhes. Quanto mais
melhor!!!! foram devidamente captadas.
 Briefing - Sem Retrabalhos

O retrabalho é um freio no progresso de

demandas e também um impeditivo na rotina
das empresas de comunicação. Nem sempre é
possível impedir as solicitações de alteração, já
que cada cliente tem um nível de exigência e
nem sempre eles tem uma ideia 100% concreta
do que querem.
Entretanto, o briefing pode ajudar muito a O desenvolvimento de um briefing amplo
reduzir essa margem de insatisfação. É sempre e aprofundado é fundamental, para que,
importante considerar que pequenos ajustes são posteriormente, não haja a necessidade
diferentes de retrabalhos. de alterações maiores no projeto
apresentado.
 Seis Componentes Imprescindíveis para Briefing

1. Título e descrição
2. Metas e objetivos
3. Entregáveis
4. Responsáveis
5. Orçamento
6. Cronograma
7. Processo de distribuição
 Como fazer um modelo de Briefing
1. Escolha os colaboradores certos;
2. Verifique se o cliente possui um portfólio;
3. Organize os encontros com os clientes no modelo de briefing;
4. Valorize a objetividade no modelo de briefing;
5. Narre sobre o histórico da empresa;
6. Pesquise e Disserte sobre a concorrência;
7. Explique de forma clara o Público-Alvo (não é apenas a idade que influncia, hábito de
compra, também);
8. Esclareça as informações estratégicas e objetivos.
9. Indique o Budget (Orçamento) - Nem sempre o orçamento influencia no valor do
projeto;
10. Defina os prazos e cronogramas

https://rockcontent.com/br/blog/briefing/
 Quais dicas são essenciais
para um briefing de sucesso
Seja objetivo na descrição
O cliente vai acabar se estendendo na hora de descrever o que ele quer, e isso é normal. Ele
acredita que, quanto mais falar, melhor será o projeto. Isso faz sentido, mas quem está
desenvolvendo o briefing precisa transformar todo esse conteúdo em algo reduzido e
sólido.
É fundamental ser objetivo na hora de descrever as ideias que o solicitante apresenta. Essa
é a garantia de que, na hora de executar o projeto, será fácil a compreensão do que é
pedido.
 Quais dicas são essenciais
para um briefing de sucesso
Interaja e dê sugestões no processo de criação
Ser participativo é fundamental para ajudar o cliente a lapidar a ideia que ele tem. Pode ser
que, em alguns momentos, o que ele propõe seja realmente inviável. Por isso, interferir de
modo educado e persuasivo é importante.
As sugestões também são importantes para guiar o que o solicitante quer. Talvez ele tenha
algo em mente, mas simplesmente não saiba explicar, afinal, ele não tem conhecimento
técnico. Por isso, mantenha-se atento e saiba entender o que ele quer, para então sugerir.
Modelo
Modelo
 Sitemap

O sitemap te ajuda a visualizar toda a arquitetura de informação de um site (todo site ou

aplicação tem um, ou deveria ter). Ele nasce como a organização visual de todo o site ou
aplicação. O que vemos com certa frequência é o site crescer de forma frenética sem
nenhum tipo de planejamento, como consequência não tendo um Sitemap oficial, sem
nenhum tipo de atualização também.

Importante: Sitemap não indica interações entre as páginas, mas a estrutura de todo o
conteúdo, quais páginas se relacionam e seus níveis de navegação.
 Sitemap - Níveis de Navegação

Ao definir o Sitemap, estabeleça os níveis de navegação (primária, secundária…), páginas

mais importantes. Assim promovendo a hierarquia da informação (sempre com a
referência do seu Usuário x Negócio). Vai desde as principais informações até as menos
visitadas, como páginas jurídicas (informações de rodapé).
 diagrams.net

Ferramenta para criação de diagramas de vários tipos.

Características

● Gratuita;
● Execução via navegador de Internet;
● Trabalho Colaborativo;

Acesso: diagrams.net Start Escolher onde armazenar os diagramas create new

Diagram.
Primeira Tela
Tela de Trabalho
 Esboço / Rabisco

Construir um protótipo é uma das formas mais rápidas, e com menor custo, para validar
uma ideia, um conceito ou uma funcionalidade. Assim, é possível interagir, avaliar, alterar
e aprovar as principais características de uma interface antes do desenvolvimento.

A usabilidade pode não estar tão clara para o usuário, como pode parecer…

O protótipo pode ser parcial (normalmente utilizado para vender uma ideia, ou fazer prova
de conceito), ou com um fluxo completo (utilizado para testes com usuários ou testes de
lógica), e não necessariamente precisa ter um refinamento visual. O quanto um protótipo
se parecerá com a versão final de uma aplicação é o que chamamos de “fidelidade”.
 As quatro dimensões que definem a fidelidade

1. Detalhamento: a quantidade de detalhes que o modelo suporta.

2. Grau de funcionalidade: a extensão na qual os detalhes de operação são completos.
3. Similaridade de interação: o quão similar as interações com o modelo serão com o
produto final.
4. Refinamento estético: o quão realista o modelo é.
 Protótipo de Baixa Fidelidade

Bastante utilizado em fases iniciais e exploratórias de um projeto para validar um conceito

e dedicar se uma ideia tem ou não valor funcional. Devem ser rápidos, rudimentares e
baratos.
Características de um protótipo de baixa fidelidade
● Baixo nível de detalhamento.
● Preferencialmente feito com papel e caneta.
● Representa visualmente as funcionalidades.
● Baixo Custo.
● Rapidez na prototipação.
● Descartável.
Protótipo de
Baixa Fidelidade
 Protótipo de Média Fidelidade

Um pouco mais refinado que o de baixa fidelidade, mas ainda não necessita de uma
preocupação estética. Também conhecido como wireframe, é utilizado quando o foco é
validar a arquitetura da informação e a interatividade com os elementos da interface.

Características:

● Prioriza a hierarquia das informações e o fluxo de navegação.

● Possui simulações simples de uso (interação com botões, por exemplo).
● Pode ser feito com o auxílio de um computador, utilizando ferramentas como
Balsamiq, Mockflow ou Draw.io, que já oferecem elementos prontos para a interface
(como botões, campos de formulário etc), agilizando a criação.
Protótipo de Média Fidelidade
 Protótipo de Alta Fidelidade

Um protótipo de alta fidelidade deve se aproximar ao máximo dos aspectos visuais e

funcionais do produto final, incluindo o conteúdo, fluxo de navegação e interações. São
muito utilizados para testes e validação com usuários, ou para vender uma ideia, pois ver
o produto “funcionando” costuma gerar fascinação.

Características:

● Foco em aspectos visuais e funcionais da interface.

● Permite navegação e interação similares à versão final do produto.
● São desenvolvidos com o auxílio de softwares para criação de interfaces, como o
Sketch, Figma ou Adobe XD.
Protótipo de Alta Fidelidade
 Referências
Dutra, Rodrigo. UX vs UI: entenda as diferenças. Publicado em 17 set 2019. Disponível em:
<https://www.zup.com.br/blog/ux-vs-ui-diferencas>. Acesso em: 09 fev 2023.
Editora Aela. A importância da Usabilidade em Projetos de UX Design.
Publicado em 13 fevereiro de 2020. Disponível em:
<https://aelaschool.com/experienciadousuario/a-importancia-da-usabilidade-em-projetos-de-ux-
design/>
Norma, Donald A. O design do dia a dia. Rio de Janeiro: Anfiteatro, 2006.
https://uxdesign.blog.br/don-norman-e-seus-princ%C3%ADpios-de-design-fe063669184d