Princípios de Design e UX

Prévia do material em texto

WBA0489_v1.0
Princípios de Design e 
Prototipação
A usabilidade nas interfaces 
web e mobile
Bloco 1
Marcelo Henrique dos Santos
Soluções criativas no meio digital
Figura 1 – A usabilidade• Usabilidade
A usabilidade não é uma 
propriedade única e 
unidimensional de uma interface 
de usuário. A usabilidade tem 
vários componentes e é, 
tradicionalmente, associada os 
seguintes atributos de 
usabilidade: capacidade de 
aprendizado, eficiência, 
memorização, erros e satisfação. 
Fonte: Herman Vasyliev/iStock.com.
Soluções criativas no meio digital
• A Experiência do Usuário (UX) cobre praticamente tudo o que o usuário experimenta em
um design ou serviço. Os membros da equipe de experiência do usuário tentam fazer as
coisas funcionarem melhor para todos.
Fonte: Wanlee Prachyapanaprai/iStock.com 
Figura 2 – Experiência do usuário 
• A experiência de um cliente é 
afetada por toda estória: marca, 
campanhas, literatura, sites, 
design de loja, design de 
embalagem, experiência fora da 
caixa, design visual de produto, 
design de interação, suporte, 
comunidade de usuários e 
descarte/substituição. 
Soluções criativas no meio digital
• As atividades e habilidades de UX podem ser aplicadas a quase qualquer área de design,
mas na prática, a tecnologia da computação, o design de produto e a melhoria de
processos são onde se encontram a maioria dos projetos que empregam a UX.
Fonte: aurielaki/iStock.com.
Figura 3 – As atividades e 
habilidades de UX
• A divisão de trabalho (quem faz 
o quê) nas equipes de UX é tão 
diversa quanto as equipes que 
fazem o trabalho. A maioria dos 
profissionais de UX têm várias 
habilidades e muitas áreas de 
conhecimento.
Soluções criativas no meio digital
• Mesmo quando você tem um conceito claro para o desenvolvimento de um projeto, 
ainda, será necessário projetá-lo de forma que seja consistente com a maneira como as 
pessoas pensam sobre suas atividades.
Fonte: DariaNK/iStock.com.
Figura 4 – A experiência 
do usuário 
• A experiência do usuário abrange todos 
os aspectos da interação do usuário final 
com a empresa, seus serviços e seus 
produtos. O primeiro requisito para uma 
experiência de usuário exemplar é 
atender as necessidades do cliente, sem 
confusão ou incômodo. Em seguida, vem 
a simplicidade e a elegância com que se 
produz os projetos (gerando sentimentos 
como a alegria de possuir ou uma alegria 
de usar o recurso proposto). 
Soluções criativas no meio digital
• A experiência do usuário vai além de dar aos clientes o que eles dizem que querem ou 
fornecer os recursos de lista de verificação. Para alcançar uma experiência de usuário de 
alta qualidade nas ofertas de uma empresa, deve haver uma fusão perfeita dos serviços 
com as múltiplas disciplinas, incluindo engenharia, marketing, design industrial, design 
de interface, entre outros.
Fonte: Anna_Kolesnikova/iStock.com.
Figura 5 – As múltiplas 
disciplinas da usabilidade
Soluções criativas no meio digital
• É importante distinguir a experiência total do usuário da interface do usuário, embora a 
IU seja obviamente uma parte extremamente importante do projeto. Por exemplo, 
considere um site com críticas de filmes. 
Mesmo se a IU para encontrar um filme é perfeita, a UX será 
ruim para um usuário que deseja informações sobre uma 
pequena versão independente, se o banco de dados subjacente 
contém apenas os filmes dos principais estúdios. 
Além disso, devemos distinguir UX e usabilidade: de acordo 
com a definição, usabilidade é um atributo de qualidade da IU, 
cobrindo se o sistema é fácil de aprender, eficiente de usar, 
agradável e assim por diante. 
Soluções criativas no meio digital
• Existem muitos princípios de UX para listar, mas aqui estão algumas diretrizes:
Fonte: aurielaki/iStock.com.
Figura 6 – Princípios de UX 
• Depende (o contexto é 
importante).
• Você não é seu 
usuário (tenha 
empatia com os 
outros. Você sabe 
demais).
• O objetivo do trabalho 
de UX é melhorar o 
sistema e a interface. 
Soluções criativas no meio digital
• Os projetos devem ser testados com pessoas que possuem as mesmas 
características dos usuários finais. 
• O uso de recursos, padrões de design e melhores práticas reduzem a quantidade de 
esforço necessário para que as pessoas compreendam como usar e manipular o 
projeto.
Fonte: ilyaliren/iStock.com.
Figura 7 – Princípios de UX 
• Seja inclusivo e prestativo, 
respeite os padrões e 
documente seu trabalho.
• Traga dados e seja 
persuasivo com eles. 
(pratique o design 
baseado em evidências).
Soluções criativas no meio digital
• Agir no melhor interesse de todos.
• Seja honesto com todos.
• Não causar danos e, se possível, fornecer benefícios.
Fonte: invincible_bulldog/iStock.com.
Figura 8 – Princípios de UX 
Soluções criativas no meio digital
• Agir com integridade.
• Evite conflitos de 
interesse.
• Respeite a privacidade, 
confidencialidade e 
anonimato.
• Forneça todos os dados 
resultantes.
Fonte: ONYXprj/iStock.com.
Figura 9 – Princípios de UX 
A usabilidade nas interfaces 
web e mobile
Bloco 2
Marcelo Henrique dos Santos
Como desenvolver um portfólio com projetos de UI
• Você não precisa ser um grande designer para trabalhar com UX. 
• Você tem que querer se livrar da construção de um design ruim, para melhorar 
um design medíocre e para ajudar as pessoas a terem um design que apresente 
uma relação produtiva e positiva com suas tecnologias e ambientes.
Fonte: Macrostore/iStock.com.
Figura 10 – UX
Como desenvolver um portfólio com projetos de UI
Você pode ser uma pessoa de UX se:
• Você deseja projetar uma solução 
melhor para os seus usuários.
• Você adora um bom design, mas se 
irrita com um design mal projetado, 
falta de instruções, menus confusos, 
sinalização e mapas quebrados e, assim, 
por diante.
• Você gosta de organizar as coisas. 
• Você descobre como tornar seu local de 
trabalho mais eficiente. Isso pode ser 
visto como um profissional 
perfeccionista, mas esse 
comportamento é fundamental no 
desenvolvimento do projeto. Fonte: Aleksandr Durnov/iStock.com. 
Figura 11 – Características do 
profissional de UX
Como desenvolver um portfólio com projetos de UI
• Você corrige todos os bugs (encontrados e relatados), a fim de tornar o sistema melhor 
para todos.
• É você quem sempre descobre o erro de digitação no cardápio do restaurante? Você 
provavelmente tem um tipo de orientação de detalhes que os gerentes de UX sonham.
Fonte: Aleksandr Durnov/iStock.com.
Figura 12 – Características do profissional de UX
Como desenvolver um portfólio com projetos de UI
Qualidades que você pode compartilhar com profissionais de UX:
• Eles sabem muitas coisas diferentes e continuam aprendendo.
• Gostam de resolver problemas e quebra-cabeças.
• Eles se preocupam com as pessoas e querem fazer a diferença no mundo.
• Gostam de simplificar as coisas.
• Gostam de mexer e inventar coisas.
• Eles acham que pensar é interessante.
• Eles adoram aprender coisas novas.
• Eles entendem as pessoas e podem observá-las de perto.
Como desenvolver um portfólio com projetos de UI
Os profissionais de UX devem ter:
• Empatia - sinta a frustração dos usuários e entenda seus pontos de vista.
• Habilidades pessoais - por exemplo, pode falar com qualquer pessoa facilmente.
• Vocabulário técnico - falar a linguagem dos engenheiros (dados e precisão).
• Compreensão de como os sistemas funcionam
(noções básicas).
• Compreensão de como as pessoas trabalham com sistemas
(específicos).
• A capacidade de convencer as pessoas a consertar as coisas.
• Tenacidade - não desista facilmente.
• Habilidades de escrita e comunicação.
A usabilidade nas interfaces 
web e mobile
Bloco 3
Marcelo Henrique dos Santos
Manipulação da ferramenta 
• O objetivo desse bloco é apresentar para os alunos a utilização de uma 
ferramenta e prototipar uma página web. 
• >>> Captura de vídeo da ferramenta.
Teoria em Prática
Bloco 4
Marcelo Henrique dos Santos
Reflita sobre a seguinte situação
Fundamentalmente,uma boa interface de usuário permite que os usuários 
concluam a tarefa para a qual vieram ao site com facilidade e sem confusão. 
Uma interface de usuário excepcional não irá apenas agradar o usuário, 
facilitando a realização sem atrito da tarefa em questão, mas também irá 
agradá-lo de forma estética. O que essa prática sugere para você? Como é
possível construir uma interação elegante e original que 
intuitivamente chame a atenção do usuário para um 
determinado elemento? Por exemplo, de que forma 
podemos propor um design organizado e limpo e o uso 
inteligente de espaços em branco que imbui o usuário 
com uma sensação de calma?
Norte para a resolução...
• Fundamentalmente, uma boa 
interface de usuário permite 
que os usuários concluam a 
tarefa para a qual vieram ao 
site com facilidade e sem 
confusão. 
• Uma interface de usuário 
excepcional não irá apenas 
agradar o usuário, facilitando a 
realização sem atrito da tarefa 
em questão, mas também irá 
agradá-lo estética e 
experiencialmente. 
Fonte: Aleksandr Durnov/iStock.com.
Figura 13 – Desenvolvimento 
da interface do usuário
Norte para a resolução...
• O que esta prática sugere 
para você? 
Fonte: Ilyabolotov/iStock.com. 
Figura 14 – Criação da interface
Norte para a resolução...
• Como é possível 
construir uma interação 
elegante e original que 
intuitivamente chame a 
atenção do usuário para 
um determinado 
elemento? 
Fonte: lankogal/iStock.com.
Figura 15 – Construindo uma interação 
Norte para a resolução...
• Por exemplo, de que forma podemos propor um design organizado e limpo e o uso 
inteligente de espaços em branco que imbui o usuário com uma sensação de calma?
Figura 16 – Organização do design
Fonte: JuliaTim/iStock.com.
Dica do Professor
Bloco 5
Marcelo Henrique dos Santos
Dica do Professor
• O Skype
Depois das atualizações que foram implementadas, o aplicativo se tornou prático e 
recheado de novas funcionalidades, dinâmica que visou o aprimoramento do chat –
tornando a aparência do app moderna.
Fonte: Tetiana Musiyaka/iStock.com
Figura 17 – Representação do 
layout do Skype
Dica do Professor
• O Spotify
O serviço de streaming de 
músicas oferece diversas 
funcionalidades para os 
usuários que aderem ao 
plano “premium”, o que 
potencializou seus lucros.
O design do aplicativo é 
muito funcional, o que 
facilita a interação dos 
usuários (criar playlists, 
editá-las, ouvir música em 
fila ou em modo aleatório 
etc.). Fonte: Tetiana Musiyaka/iStock.com.
Figura 18 – Representação do layout 
do Spotify
Referências
HELLER, E. Psicologia das cores: como as cores afetam a emoção e a razão. 
São Paulo: GG, 2012. 
KRUG, S. Não me faça pensar. Rio de Janeiro: Alta Books, 2014.
ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação: além da interação 
humano-computador. 3. ed. São Paulo: Bookman, 2013. 
Bons estudos!
	Princípios de Design e Prototipação
	A usabilidade nas interfaces web e mobile
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	Soluções criativas no meio digital
	A usabilidade nas interfaces web e mobile
	Como desenvolver um portfólio com projetos de UI
	Como desenvolver um portfólio com projetos de UI
	Como desenvolver um portfólio com projetos de UI
	Como desenvolver um portfólio com projetos de UI
	Como desenvolver um portfólio com projetos de UI
	A usabilidade nas interfaces web e mobile
	Manipulação da ferramenta 
	Teoria em Prática
	Reflita sobre a seguinte situação
	Norte para a resolução...
	Norte para a resolução...
	Norte para a resolução...
	Norte para a resolução...
	Dica do Professor
	Dica do Professor
	Dica do Professor
	Referências
	Bons estudos!