APP DESIGN UI UX
Basics App Experience, Interface & Prototype
AULA 4
USABILIDADE
UX Design
❏ Analisamos a experiência do usuário em três níveis:
❏ Visceral: É relacionado a aparência, as nossas reações instantâneas quando
vemos ou sentimos algo.
❏ Comportamental: Está relacionado às emoções que sentimos e reações que
temos quando usamos algo.
❏ Reflexivo: Está relacionado a racionalização e intelectualização do produto e
a forma como o inserimos na nossa vida.
Usabilidade
❏ A usabilidade faz parte do nível comportamental da Experiência do Usuário,
sendo ela uma peça chave para o estudo e controle das emoções positivas e
negativas do usuário quando em contato com o produto.
❏ Foca-se em efetividade, eficiência e especialmente na satisfação.
Segundo Jakob Nielsen
Usabilidade é atributo de qualidade para avaliar a facilidade de uso de
uma interface. A palavra “usabilidade” também se refere a métodos
para melhorar a facilidade de uso durante o processo de design.
Como tornar o seu
produto simples?
Dica 1: Remova os elementos
desnecessários em sua interface
ou simplesmente priorize as
ações mais importantes.
Às vezes o usuário consegue
realizar as ações primárias com
apenas 30% dos elementos
presentes na interface.
Como tornar o seu
produto simples?
Dica 2: Organize os elementos
na tela e utilize padrões ao qual
o usuário já esteja acostumado
(tipos de menus, botões, etc...)
Como tornar o seu
produto simples?
Dica 3: Exiba poucas
informações na tela ou divida-as
em pequenas doses. Só mostre
o que o usuário realmente
precisa ver.
Como tornar o seu
produto simples?
Dica 4: Adicione os elementos
na tela à medida que o usuário
necesitar deles.
Como tornar o seu
produto simples?
Dica 5: Simplifique seus
formulários o máximo que puder
Como tornar o seu
produto simples?
Dica 6: Deixe claro ao usuário o
que ele deve fazer em seguida, e
qual o estado que ele se
encontra no momento.
Como tornar o seu
produto simples?
Dica 7: Preocupe-se com o
tempo do usuário, permita que
ele faça outras atividades
enquanto aguarda uma ação
demorada.
Faça o serviço pesado pelo
usuário! Pense nele como uma
pessoa preguiçosa.
Como tornar o seu produto simples?
Dica 8: Evite elementos em excesso na tela. Saiba moderar entre textos, imagens e espaços negativos.
Nubank, Gmail e Instagram são ótimos exemplos de apps que utilizam bem estes recursos.
Como tornar o seu
produto simples?
Dica 9: Microinterações de
usabilidade são importantes para
uma experiência positiva dentro
do app.
Como tornar o seu
produto simples?
Dica 10: Utilize microtextos
somente se necessário.
Não existe uma fórmula secreta
para criar micro textos, porém,
seja informativo em primeiro
lugar, comunique o que é mais
importante e vá direto ao ponto.
Como tornar o seu produto simples?
Dica 11: Preocupe-se com a hierarquia:
❏ Qual é a ação principal?
❏ Quais são as ações secundárias?
❏ Qual o mínimo de informação que o usuário precisa saber para realizar a tarefa?
❏ Imagens são necessárias?
❏ Qual o mínimo de elementos necessários?
❏ Qual a primeira coisa que o usuário precisa ver?
Como tornar o seu produto simples?
Dica 12: Reflita nos seguintes tópicos:
❏ Evite inconsistências visuais
❏ Use cores para diferenciar ações primárias e secundárias
❏ Categorize os itens na interface
❏ Use fontes com cores e tamanhos diferentes para criar hierarquias
❏ Mantenha o equilíbrio entre a quantidade de textos e de imagens, não exagere na
utilização de ambos.
Como tornar o seu produto simples?
Dica 13: Comunique benefícios, e não somente funcionalidade. Apresente sua
proposta de valor.
Ex.: Airbnb "Sinta-se em casa em qualquer lugar"
Dica de leitura
Microinteractions: Designing with
Details, Dan Saffer
WIREFRAMES
O que são Wireframes?
❏ O wireframe é uma representação visual de uma Interface de Usuário
❏ Funciona como um protótipo, ou seja, antes da elaboração de um layout,
criamos uma espécie de rascunho, muitas vezes feito a mão, que nos ajuda a
visualizar o produto final.
❏ Existem basicamente dois tipos de wireframes: Baixa fidelidade e Alta
fidelidade.
Wireframes
Básicos ou de
Baixa Fidelidade
Também conhecidos como
"rabiscoframes", são simples e
geralmente feitos a mão, sem
cores e sem muitos detalhes.
Wireframes
Anotados
Adicionam detalhes aos
wireframes básicos, já
organizados como anotações
breves que descrevem cada item
Wireframes de Alta
Fidelidade
Simula o funcionamento real de
uma aplicação, por meio de
animações e interações com o
usuário. É o tipo de protótipo
mais próximo a versão final.
THANK YOU!
Designed by Kaory Ogata & Raul Reis
