UX-UI-Design-materiais-didaticos

Prévia do material em texto

UX & UI Design
Edu Agni
Edu Agni é designer especialista em User 
Experience. Trabalha há treze anos com projetos 
nas áreas de design e usabilidade.
Exemplos de Proto-Personas
Roberto de Almeid
a
38 anos
Engenheiro Cívil
Florianópolis/SC
Informações dem
ográficas 
e comportamento
•	 Mora no bairro
 de Santa Mônica e
m 
Florianópolis (ilha), 
em casa própria;
•	 É casado a 12
 anos, e sua mulhe
r também 
trabalha.	Possui	do
is	filhos	(com	10	e
	08	
anos). Possui empr
egada em casa;
•	 Trabalha vistor
iando obras. Tem u
ma rotina 
bem	corrida,	mas	
possui	horário	flex
ível,	
o	que	permite	que
	ele	leve	os	filhos	n
a	
escola,	por	exemp
lo;
•	 Costuma ir ao 
shopping com a fam
ília, 
receber visitas, e v
isitar amigos e 
familiares. Eventua
lmente sai a noite c
om 
a	mulher	para	rest
aurantes,	deixando
	os	
filhos	com	a	sogra
;
Pontos de Conflito
 e Necessidades
•	 Faz compras d
e supermercado pe
la 
internet para otimiz
ar o tempo, e por t
er 
aversão a superme
rcados.
•	 Realiza compr
as de supermercad
o com 
frequência quinzen
al;
•	 Realiza as com
pras pela internet p
elo 
notebook, de onde 
estiver. Muitas veze
s 
inicia	a	compra	no
	trabalho	e	finaliza
	em	
casa, ou vice-versa
;
•	 Fora da frequê
ncia quinzenal das 
compras 
de casa, eventualm
ente realiza a comp
ra 
de	produtos	que	o
s	filhos	levam	de	la
nche	
na escola;
•	 É um grande a
preciador de vinhos
, e 
sempre busca na in
ternet algum vinho
 de 
seu agrado, de dife
rentes paises, safra
s e 
produtores.
Possíveis funciona
lidades 
e soluções
•	 Destacar melh
or no site a qualida
de de 
possuir uma grand
e e variada adega d
e 
vinhos, com destaq
ue e fácil acesso p
ela 
página inicial;
•	 Possibilidade d
e salvar listas de co
mpras;
•	 Melhorar	a	fac
ilidade,	filtros	e	rel
evância	
do mecanismo de b
usca;
•	 Permitir login/
cadastro utilizando
 redes 
sociais como o Fac
ebook;
•	 Possuir uma s
essão dedicada a n
utrição 
infantil, com dicas 
de nutricionistas e 
outras informações
.
Fernanda Gerhke
41 anos
Cirurgiã Plástica
Florianópolis/SC
Informações demográficas e comportamento
•	 Mora no bairro de Cacupé em Florianópolis (ilha), em casa própria;
•	 É	divorciada	a	05	anos,	possui	três	filhos	(com	13,	10	e	08	anos)	e	recebe	pensão.	Possui empregada e babá em casa;
•	 É dona de uma clínica de estética, onde trabalha como Cirurgiã Plastica e administradora;
•	 Frequenta	academia	ao	menos	03	vezes por semana, e é adepta de uma alimentação saudável;
•	 Gosta de sair a noite para festas e restaurantes;
•	 Possui um cachorrinha de dois anos da raça Yorkshire Terrier;
Pontos de Conflito e Necessidades•	 Gosta de produtos diferenciados e refinados	(gourmet),	além	de	produtos	Health;
•	 Realiza compras de supermercado com frequência quinzenal;
•	 Realiza as compras pela internet, para evitar	filas	nas	lojas	físicas,	poder	comprar	em horários que não são comerciais, e para encontrar mais facilmente os produtos;
•	 Paga todas as suas compras com cartão de crédito;
•	 Além das compras de casa com frequência quinzenal, compra aleatóriamente produtos PET.
Possíveis funcionalidades e soluções
•	 Possuir uma sessão para produtos Health e Bem-Estar, com dicas de nutricionistas e outras informações;
•	 Possuir uma sessão para produtos PET, com dicas de adestradores e veterinários, e outras informações;
•	 Possibilidade de salvar listas de compras;•	 Destacar melhor no site a qualidade de possuir uma grande variedade de produtos diferenciados	e	refinados,	podendo	inclusive	criar	uma	sessão	específica	para	esses produtos no site; 
•	 Destacar melhor no site as vantagens de se fazer parte do Clube de Fidelidade.
Os elementos da

experiência do usuário
Os Elementos da Experiência do Usuário Jesse James Garrettjjg@jjg.net
Arquitetura da Informação: Design estrutural
do espaço da informação para facilitar o
acesso intuitivo ao conteúdo
Design de Interação: desenvolvimento de
fluxos de aplicação para facilitar as tarefas
do usuário, definindo como o este interage
com as funcionalidades do site
Design da Navegação: design dos elementos
da interface para facilitar a movimentação
do usuário meio a arquitetura da informação
Design da Informação: No sentido Tufteano:
design da apresentação da informação para
facilitar a compreensão
Especificações Funcionais: ‘conjunto de
funcionalidades’: descrições detalhadas de
funcionalidades que o site deve incluir para
ir ao encontro das necessidades do usuário
Requisitos de Conteúdo: Definição dos
elementos do conteúdo necessários ao site
para ir ao encontro das necessidades do
usuário
Design da Interface: como na IHC tradicional:
design dos elementos da interface para facilitar
a interação do usuário com as funcionalidades
Design da Informação: No sentido Tufteano:
design da apresentação da informação para
facilitar a compreensão
a Web como interface de software a Web como sistema de hipertexto
Design Visual: tratamento gráfico dos
elementos da interface (a “cara” do site)
Design Visual: tratamento visual do texto,
elementos gráficos da página e componentes
de navegação
te
m
po
Abstrato Concepção
Concreto Maturidade
Especificações
Funcionais
Requisitos
de Conteúdo
Design de
Interação
Arquitetura
da
Informação
Design Visual
Design da Informação
Design da
Interface
Design da
Navegação
Objetivos do site
Necessidades do usuário
Necessidades do usuário: Objetivos do site de
origem externa, identificados por meio de
pesquisa com o usuário, pesquisas
etno/tecno/psicográficas, etc. 
Objetivos do site: Metas de negócio, criativas ou
outras metas de origem interna para o site
orientado à tarefa orientado à informação
30 de março de 2000
Tradução para o
Português por
Livia Labate
© 2000-03 Jesse James Garrett http://www.jjg.net/ia/
Necessidades do usuário: Objetivos do site de
origem externa, identificados por meio de
pesquisa com o usuário, pesquisas
etno/tecno/psicográficas, etc. 
Objetivos do site: Metas de negócio, criativas ou
outras metas de origem interna para o site
Uma duplicidade básica: A Web foi originalmente concebida como um espaço de troca de informações hipertextuais, porém, o 
desenvolvimento crescente de sofisticadas tecnologias encorajou seu uso como uma interface de software remoto. Esta natureza 
dúbia resulta em muita confusão conforme, profissionais da experiência do usuário tentam adaptar suas terminologias para casos 
que estão além do escopo da aplicação original. O objetivo deste documento é definir alguns destes termos dentro de seus 
contextos apropriados e de esclarecer as relações subjacentes entre estes vários elementos.
Este esquema está incompleto: O modelo aqui delineado não aborda considerações secundárias (como aquelas que surgem durante o desenvolvimento técnico e 
de conteúdo) que podem influenciar as decisões durante o desenvolvimento da experiência do usuário. Além disto, este modelo não descreve um processo de 
desenvolvimento nem define os papéis dentro de um time de projeto. O que procura definir, são as considerações-chave que fazem parte do desenvolvimento da 
experiência do usuário na Web atualmente.
Exemplos de Mapas de Navegação
Fonte: http://www.olhonocredito.com.br/images/mapa.jpg 
Fonte: http://samuraiux.com.br/blog/wp-content/uploads/2015/01/sitemap_tgk.png 
Exemplos de Wireframes
Fonte: https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/341_wf/webwise-home-wireframe.png 
Fonte: https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/341_wf/wireframe-withgreys.png 
Fonte: https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/341_wf/wireframe-cnn.jpgExemplos de Grids
Exemplos de Style Tyles
Exemplos de Layouts
Exemplo de roteiro para a 
aplicação de testes de usabilidade
[cumprimente o usuário, ofereça água, café e o banheiro]
Obrigado por participar do teste! Sou consultor de uma 
empresa que tem um site na Internet e estou tentando 
ajudar a melhorar ele.
Chamamos você porque queremos que você também nos 
ajude a encontrar em que pontos ele pode melhorar. Não 
precisa fazer nada especial, é só usar o site como se você 
estivesse em casa. Observando como você reage ao site, 
podemos saber o que está bom e o que está ruim.
Quero enfatizar que não é você quem está sendo 
testado(a), é o website. Se você sentir dificuldades em 
algum momento a culpa é dele e não sua, certo?
Eu não vou ficar nem um pouco chateado se você fizer 
críticas ao site, já que eu não participei da sua construção. 
Na verdade, nós queremos mesmo que você nos diga o 
que você gosta e o que não gosta. A sua opinião será muito 
importante para nós.
O teste vai durar em torno de 1 hora. Se você quiser parar 
em algum momento, é só dizer. Até aqui, você tem alguma 
dúvida?
Antes de começar, gostaria de saber...
[ iniciar gravação ]
[ perguntas de perfil ]
O que você está vendo?
O que você acha que pode fazer com ele?
Enquanto você estiver usando o website, por favor, procure 
falar tudo o que você pensa. Sabe aquele negócio de 
“pensar alto”? É isso que nós queremos. Por exemplo, se 
você clicar num botão e ver que não era isso que queria 
que acontecesse, diga isso. Nada que você diga vai nos 
ofender, pelo contrário, só ajudará. Se importa se eu te 
lembrar disso durante o teste? Ok.
Se você tiver alguma dúvida durante o teste pode 
perguntar, mas talvez eu não possa responder. A idéia é 
simular como você se viraria se estivesse sozinho(a). Onde 
você gostaria de entrar? Fique à vontade.
[ exploração livre ]
Ok. Agora eu tenho umas coisas que eu gostaria que você 
fizesse no site. Pode ser?
[ começar tarefas ]
Roteiro para teste de Usabilidade
(Por Frederick van Amstel)
Exemplo de Termo de 
consentimento para a aplicação 
de testes de usabilidade
Obrigado por participar de nossa pesquisa de usabilidade.
Estaremos gravando a sua sessão para permitir que os membros do equipe da [NOME DA ORGANIZAÇÃO] que não 
puderam estar aqui hoje observem a sua sessão e se beneficiem de seus comentários.
Por favor, leia a declaração abaixo e assine onde está indicado.
Entendo que minha sessão de teste de usabilidade será gravada.
Concedo a permissão para a [NOME DA ORGANIZAÇÃO] usar essa gravação com a finalidade de melhorar os projetos 
sendo testados.
Assinatura
Nome completo: CPF:
Data:
Formulário de consentimento para gravação
Do livro “Simplificando coisas que parecem complicadas” de Steve Krug
Exemplo de cenário e tarefa 
para a aplicação de testes 
de usabilidade
Cenário: você é um instrutor de treinamentos de 
design em São Paulo, e precisa viajar para Brasília 
para ministrar um workshop nos dias 16 e 17 de 
abril. 
Tarefa 01: entre no site da Avianca, e compre uma 
passagem do Aeroporto de Congonhas em São 
Paulo para o Aeroporto Juscelino Kubitschek em 
Brasília, com a ida no dia 15/05 a tarde, e volta para 
o dia 18/04 pela manhã. 
Tarefa 02: Realize o Web Checkin até obter o seu 
cartão de embarque via SMS.
Exemplo de questionário de 
satisfação para a aplicação de 
testes de usabilidade
Sobre a aparência do site
[ ] Feia [ ] Sem graça [ ] Agradável [ ] Bonita
[ ] Chata [ ] Séria [ ] Descontraída [ ] Divertida
Sobre o uso do Website
[ ] Muito devagar [ ] Devagar [ ] Rápido [ ] Muito rápido
Com que frequência você acha que acessará o site quando estiver pronto?
[ ] Nunca [ ] Raramente [ ] De vez em quando [ ] Sempre
Acha que faltou algo? Quer dar alguma sugestão? Fique a vontade:
Questionário de Satisfação