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
 ográficas
Informações dem
to
e comportamen
a no ba ir ro de Santa Mônica em
• M or a;
), em casa própri
Florianópolis (ilha
m
a 1 2 an os , e sua mulher també
• É casado s filhos (com 10 e 0
8
ha . P os su i d oi
trabal
). P os su i em pr egada em casa;
anos
a rotina
ab al ha vi st or ia ndo obras. Tem um
• Tr exível,
possui horário fl
bem corrida, mas ve os filhos na
rm ite q ue e le le
o que pe
plo;
escola, por exem
a,
ida ping com a famíli
Roberto de Alme tu m a ir ao sh op
• Cos
ce be r vi si ta s, e visitar amigos e
re ite com
38 anos familiares. Eventu
almente sai a no
ta ur an tes, deixando os
res
Engenheiro Cívil
a mulhe r pa ra
ra;
filhos com a sog
Florianópolis/SC

n alidades
Possíveis funcio
e N ec e ssidades
Pontos de C o n fl it o e soluções de
pela no site a qualidade
pr as de supermercado • Desta ca r m elho r
de
• Fa z co m
iz ar o tempo, e por te
r
ui r um a gr an de e variada adega
pa ra ot im poss pela
intern et
ercados. os , co m de st aq ue e fácil acesso
aversão a superm vinh
de supermercado
com página inicial;
pr as ;
• R ea liza co m
ad e de sa lv ar listas de compras
nal; • Possibilid
frequência quinze a
et pelo ad e, filtros e relevânci
R ea liz a as co mpras pela intern s • Melho ra r a fa cilid
•
ok , de on de es tiver. Muitas veze do mecanismo de
busca;
notebo a em
ia a c om pr a no trabalho e finaliz n/ ca dastro utilizando
redes
inic • P erm iti r lo gi
sa; cebook;
casa, ou vice-ver sociais como o Fa
eq uê nc ia qu in ze nal das compras de dicada a nutrição
• Fora da fr a um a se ss ão
, ev en tu al m en te realiza a compr • Possuir
ca s de nutricionistas e
de casa he co m di
to s qu e os fi lhos levam de lanc infant il,
s.
de pro du outras informaçõe
na escola;
,e
um gr an de ap re ciador de vinhos
• É
sc a na in te rn et algum vinho de
sempre bu as e
ra do , de di fe re ntes paises, safr
seu ag
produtores.
 Informações dem
ográficas
e comportamen
to
• Mora no bair
ro de Cacupé em
(ilha), em casa pr Florianópolis
ópria;
• É divorciada
a 05 anos, possu
(com 13, 10 e 08 i três filhos
anos) e recebe pe
Possui empregad nsão.
a e babá em casa
;
• É dona de um
a clínica de estétic
onde trabalha co a,
mo Cirurgiã Plast
Fernanda Gerhk administradora; ica e
e • Frequenta ac
41 anos vezes por seman
ademia ao menos
03
a, e é adepta de
Cirurgiã Plástica alimentação saud
ável;
uma

Florianópolis/SC • Gosta de sa
ir a noite para fe
stas e
restaurantes;
• Possui um ca
chorrinha de dois
raça Yorkshire Te anos da
rrier;

Pontos de Confl
ito e Necessidad
• Gosta de prod es Possíveis funcio
utos diferenciado
se
nalidades
refinados (gourm
et), além de prod e soluções
Health; utos
• Possuir uma
• Realiza com sessão para prod
pras de supermer e Bem-Estar, com utos Health
frequência quinze cado com dicas de nutricio
nal; outras informaçõe nistas e
s;
• Realiza as co • Possuir uma
mpras pela intern sessão para prod
evitar filas nas lo et, para com dicas de ad utos PET,
jas físicas, poder estradores e vete
em horários que comprar e outras informaç rinários,
não são comerci ões;
e para encontrar ais,
mais facilmente • Possibilidad
produtos; os e de salvar listas
de compras;
• Paga todas • Destacar mel
as suas compras hor no site a qual
com cartão possuir uma gran idade de
de crédito; de variedade de
diferenciados e re produtos
• Além das co finados, podendo
mpras de casa co inclusive criar um
frequência quinze m a sessão específi
nal, compra esses produtos no ca para
aleatóriamente pr site;
odutos PET. • Destacar mel
hor no site as va
se fazer parte do ntagens de
Clube de Fidelidad
e.
Os elementos da

experiência do usuário
Os Elementos da Experiência do Usuário Jesse James Garrett
jjg@jjg.net
Uma duplicidade básica: A Web foi originalmente concebida como um espaço de troca de informações hipertextuais, porém, o
30 de março de 2000
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
Tradução para o
que estão além do escopo da aplicação original. O objetivo deste documento é definir alguns destes termos dentro de seus
Português por
contextos apropriados e de esclarecer as relações subjacentes entre estes vários elementos.
Livia Labate

a Web como interface de software Concreto Maturidade a Web como sistema de hipertexto

Design Visual
Design Visual: tratamento visual do texto,
Design Visual: tratamento gráfico dos
elementos gráficos da página e componentes
elementos da interface (a “cara” do site)
de navegação

Design da Interface: como na IHC tradicional: Design da Navegação: design dos elementos
design dos elementos da interface para facilitar Design da Design da da interface para facilitar a movimentação
a interação do usuário com as funcionalidades Interface Navegaçã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
Design da Informação Design da Informação: No sentido Tufteano:
design da apresentação da informação para
facilitar a compreensão facilitar a compreensão

Design de Interação: desenvolvimento de Design de Arquitetura

fluxos de aplicação para facilitar as tarefas da
Interação Informação
Arquitetura da Informação: Design estrutural

tempo
do espaço da informação para facilitar o
do usuário, definindo como o este interage
acesso intuitivo ao conteúdo
com as funcionalidades do site

Especificações Funcionais: ‘conjunto de Requisitos de Conteúdo: Definição dos

funcionalidades’: descrições detalhadas de Especificações Requisitos elementos do conteúdo necessários ao site
funcionalidades que o site deve incluir para Funcionais de Conteúdo para ir ao encontro das necessidades do
ir ao encontro das necessidades do usuário usuário
Necessidades do usuário: Objetivos do site de 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
Necessidades do usuário
origem externa, identificados por meio de
pesquisa com o usuário, pesquisas
etno/tecno/psicográficas, etc.
Objetivos do site Objetivos do site: Metas de negócio, criativas ou
outras metas de origem interna para o site
Abstrato Concepção orientado à informação

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.
© 2000-03 Jesse James Garrett http://www.jjg.net/ia/
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.jpg
Exemplos de Grids
Exemplos de Style Tyles
Exemplos de Layouts
Exemplo de roteiro para a
aplicação de testes de usabilidade
Roteiro para teste de Usabilidade
(Por Frederick van Amstel)
[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 ]
Exemplo de Termo de
consentimento para a aplicação
de testes de usabilidade
Formulário de consentimento para gravação
Do livro “Simplificando coisas que parecem complicadas” de Steve Krug

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:
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
Questionário de Satisfação

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: