Notas de aula da disciplina TIC do curso de Midialogia da UNICAMP.

1. Comunicação Social - Midialogia
TIC - Tecnologia da Informação e Comunicação
User eXperience
Daniel Paz de Araújo
professor@danielpaz.net

2. Introdução

3. User eXperience
● Todas as experiências são subjetivas, influenciada
por fatores humanos e fatores externos.
● Entretanto as experiências digitais são projetadas.
“A maioria das pessoas acredita que User Experience é somente
encontrar a melhor solução para os seus usuários – mas não é. UX se
trata sobre definir o problema que precisa ser resolvido (o porquê),
definir para quem esse problema precisa ser resolvido (o quem), e
definir o caminho que deve ser percorrido para resolvê-lo (o como).”
Whitney Hess

4. User eXperience
● Experiência de quem usa.
● O uso está além de interfaces computacionais, mas
em objetos e produtos do cotidiano.
● Desde que o momento em que algo é usado para
realizar uma tarefa, existe a experiência do usuário.
● A experiência é positiva quando a tarefa é realizada
sem disperdício, frustração ou problemas.
● A tarefa pode ser funcional (usar um banco) ou
emocional (usar uma rede social digital).

5. O que é User eXperience
● A criação e a sincronização dos elementos que
afetam a experiência dos usuários em uma empresa
em particular, com a intenção de influenciar suas
percepções e o seu comportamento.
● Para criar experiencias satisfatórias é preciso
entender como criar uma estrtura lógica e viável
para a experiencia, identificando os elementos
importantes para criar uma conexão emocional com
os usuários do produto.

6. O que é User eXperience
● Coisas com que o usuário possa:
○ tocar
○ ouvir
○ sentir
● Coisas com que o usuário pode interagir de formas
que vão além do físico:
○ interfaces digitais (web, apps, etc)
○ pessoas

7. User eXperience
Dan Saffer: http://www.designingforinteraction.com

8. User eXperience
Stephen Anderson: Seductive Interaction Design

9. UX designers
● Constroem produtos fáceis de usar (usabilidade),
reduzindo a fricção e permitindo que os usuários
completem a tarefa desejada em menos tempo, com
menos ruído e obstáculos.
● Apoiam-se em princípios de psicologia para motivar
o usuário e incentivá-lo a seguir adiante.
● Não define a identidade visual de um produto e sim
a maneira com que algo será utilizado para se chegar
ao objetivo.

10. UX designers
“Eu já tive um pouco de problema em entender o que um
UX designer faz de verdade, e eu continuo chegando
sempre à mesma conclusão: um user experience designer
não faz nada de especial. Ele é só um designer. Todos os
produtos têm uma experiência do usuário (UX). E essa
experiência não é explicitamente desenhada; é um
subproduto de desenhar uma interface.”
Daniel Eden
http://daneden.me

11. Papéis
● Arquiteto da Informação: responsável por criar
modelos para a estrutura da informação e utilizá-la
para projetar uma navegação amigável ao usuário e
categorizar o conteúdo.
● Designer de Interação: responsável pela definição
do comportamento de um site ou aplicação de
acordo com as ações do usuário. Inclui fluxos e
interatividade dentro de uma visualização.
● Pesquisador do Usuário: responsável por fornecer
ideias considerando as necessidades dos usuários
finais, baseadas nas informações que são geradas a
partir de pesquisas.

12. Papéis
● Estrategista de marca ou diretor
● Analista de negócio
● Estrategista de conteúdo
● Redator
● Designer visual
● Desenvolvedor de Interface

13. Arquitetura da Informação
● Raízes na Biblioteconomia: organizar e catalogar.
● Como fazer com que as informações sejam
organizadas no menu para facilitar o acesso?
● Qual o perfil de usuário que está buscando qual tipo
de informação?
● Como os ítem são ordenados, agrupados e
organizados dentro da estrutura?

14. Usabilidade
● Garantir que as interfaces sejam fáceis de usar.
● O usuário consegue realizar uma tarefa sem
transtorno?
● Quantos passos são necessários para que o objetivo
do usuário seja atingido?
● As informações são de fácil entendimento?
● Após o uso o usuário está satisfeito?

15. Design de Interação
● Entender e definir o comportamento das interfaces
ao serem interagidas.
● Como a interface responde?
● Qual a quantidade de informação que o usuário
precisa saber para realizar a tarefa naquele
momento?
● Como a interface pode ser usada para criar uma
narrativa na experiência do usuário?

16. Taxonomia
● Arranjar, organizar e rotular a informação para que
faça sentido para o usuário.
● Entender o perfil demográfico para propor a melhor
linguagem.
● Buscar a melhor classificação para aplicar nas
informações.

17. Estratégia de design
● Entender e definir os porquês do produto.
● Para quem ele foi criado?
● Como evoluirá?
● Quais os objetivos de negócio e como podem ser
alcançados?
● Como avaliar o sucesso do produto?
● Como analisar o retorno previsto X realizado?

18. Pesquisa com usuários
● Entender o público-alvo.
● Quais as necessidades, anseios, motivaçõs e
expectativas do usuário?
● Quais as principais tarefas que serão realizadas?
● Quais as particularidades do comportamento dos
grupos de usuários que influenciam as decisões de
design?

19. Processos e
Técnicas

20. Processos e artefatos
● Busca facilitar a comunicação entre os envolvidos,
documentar decisões e colher feedback.
● Varia de acordo com cada projeto.
● São influenciados pelos processos e métodos das
áreas relacionadas.

21. Blueprint
● Ferramenta operacional que descreve a natureza e
características da interação do serviço em detalhes
suficientes para que seja feita sua verificação,
implementação e manutenção.
● Auxilia na análise do caminho dos consumidores em
vários canais.
● Apóia a identificação de oportunidades de
melhorias.

22. Blueprint

23. Mapa da Jornada do Usuário
● Descreve a jornada de um usuário representando
diferentes pontos de contato que caracterizam sua
interação com um serviço.
● Permite a definição de motivações e necessidades
do consumidor nas várias etapas da jornada,c riando
soluções de design apropriadas.

24. Mapa da Jornada do Usuário

25. Use Cases
● São tradicionalmente utilizados para descrever os
fluxos de interação.
● Descrevem ações de interação segundo uma
narrativa impessoal entre o usuário e o sistema.

26. Use Cases

27. Use Story
● Foca nos objetiso do usuário e como o sistema
alcança estes objetivos.
● Fracionam os requisitos para estimar esforço para
realizar o objetivo.
Como um …[persona] ... quero/preciso/devo/gostaria
de ...[ação]... para …[finalidade]

28. Job Story
● Organiza cada interação como um Job, focando no
início de um evento ou situação, a motivação e o
objetivo.
Quando …[persona] ... quero/preciso/devo/gostaria de
...[ação]... para que eu possa …[finalidade]

29. User Story X Job Story
● User Story: Como moderador, quero selecionar um
item para ser estimado ou re-estimado, para que a
equpe possa estimá-lo
● Job Story: Quando um ítem não tiver sido estimado
ou eu não concordar com a estimativa, quero
reiniciar o processo de estimativa e avisar a equipe,
para que possam saber que um ítem particular deve
ser estimado.

30. Personas
● São documentos que descrevem típicos usuários-alvo.
● Podem dar uma visão clara sobre quem está usando
o produto e como está sendo usado.
● As personas podem limitar a criatividade, inovação
ou o bom design.
● Por outro lado elas atendem a uma necessidade
específica que influencia o processo de criação de
forma positiva.

31. Personas
● Representação do público alvo, destacando seus
dados demográficos, comportamentos,
necessidades e motivações através da criação de um
personagem fictício baseado em dados de pesquisa.
● Personas permitem aos designers e
desenvolvedores criarem empatia com os
consumidores durante o processo de design.

32. Personas

33. Ecossistema
● Representa as propriedades digitais de uma marca,
suas conexões e função estratégica de marketing.
● Permite avaliar como aproveitar melhor as
propriedades que a marca possui para atingir os
objetivos de negócio.

34. Ecossistema
● Presença de marca: facilita o relacionamento entre
a empresa e o público geral.
● Campanha de marketing: obtém uma resposta
específica e mensurável de um público geral ou
particular por determinado período.
● Fonte de conteúdo: depósito de informações em
diferentes tipos de mídia para informar e entreter.
● Baseada em tarefas: permitir que os usuários
realizem tarefas ou fluxos de trabalho

35. Ecossistema

36. Benchmarking
Os estudos de benchmarking são conduzidos para
comparar práticas organizacionais com as melhores
práticas que existem nas empresas concorrentes, no
governo ou na indústria.
O objetivo dos estudos de benchmarking é determinar
como as companhias alcançam seus níveis superiores de
performance e usam essa informação para desenhar
projetos para melhorar as operações da empresa.

37. Benchmarking
● Identificar a área a ser estudada
● Identificar as organizações que são líderes no setor
● Conduzir uma pesquisa nas organizações
selecionadas para compreender as suas práticas
● Organizar visitas às melhores organizações
● Desenvolver uma proposta de projeto para
implementar as melhores práticas

38. Brainstorming
O objetivo é produzir numerosas novas ideias e derivar
delas temas para análise futura.
● Quais opções estão disponíveis para atuar sobre a
questão em mãos?
● Quais fatores estão impedindo o grupo de avançar
com uma abordagem ou opção?
● O que poderia estar causando um atraso na atividade
“A”?
● O que o grupo pode fazer para resolver o problema
“B”?

39. Brainstorming - Preparação
● Desenvolver uma definição clara e concisa da área de
interesse.
● Determinar um limite de tempo para o grupo gerar
ideias; quanto maior for o grupo, mais tempo é
necessário.
● Identificar o facilitador e os participantes da sessão.
● Definir as expectativas junto aos participantes e
conseguir com que eles se envolvam com o processo.
● Estabelecer critérios para avaliação e ranqueamento
das ideias.

40. Brainstorming - Sessão
● Compartilhar novas ideias sem nenhuma discussão,
criticismo ou avaliação.
● Registrar visivelmente todas as ideias.
● Encorajar os participantes a serem criativos,
compartilhar ideias exageradas e construir sobre as
ideias dos demais.
● Não limitar o número de ideias, uma vez que o
objetivo é elicitar tantas quantas o período de tempo
permitir.

41. Brainstorming - Fechamento
● Uma vez que o limite de tempo é alcançado, usando
os critérios de avaliação pré-determinados, discutir e
avalie as ideias.
● Criar uma lista condensada de ideias, combine ideias
quando apropriado e elimine duplicatas.
● Ordenar as ideias.
● Distribuir a lista final de ideias às partes apropriadas.

42. Moodboard
● Coleção de imagens e referências que poderão se
transformar no estilo visual do projeto.
● Ajuda a apresentar para o cliente e equipe a linha
visual que está sendo criada antes de utilizar
ferramentas de produção visual.

43. Moodboard

44. Mapas do Site
● Representação visual das páginas de um site.
● Podem ser utilizados para qualquer tipo de aplicação
que utiliza de páginas identificadoras, visualizações,
estados e instâncias.
● Útil para visualizar como o conteúdo é organizado.
● Fornece um panorama de navegação, exibindo as
conexões de cada item.

45. Mapa do Site

46. Storyboard
● Série de ações que os consumidores tomarão
enquanto estão usando o produto.
● Traduzem as funcionalidades de forma tangível, em
situações reais.

47. Storyboard

48. Fluxo de Tarefa
● Identificam caminhos ou processos que os usuários
farão enquanto avançam.
● Representa detalhes das opções dos usuários e dos
caminhos que poderão seguir.

49. Vocabulário Visual
● Jesse James Garret: www.jjg.net/ia/visvocab
● Similar ao Diagrama de Atividades (UML) e BPMN.

50. Fluxo de uso
● Representação visual do fluxo do usuário para
completar suas tarefas.
● É a perspectiva do usuário sobre a organização do
produto, auxiliando a identificação de passos que
possam ser melhorados.

51. Fluxo de uso

52. Pesquisa quantitativa
● Questões que produzem um número como
resultado.
● Forma rápida e simples de medir a satisfação dos
consumidores e coletar feedback sobre o produto.
● Podem apontar a necessidade de outro tipo de
pesquisa em profundidade.

53. Teste de usabilidade
● Série de tarefas em um protótipo ou mesmo no
produto final.
● À medida que o consumidor interage com o produto,
o pesquisador faz anotações sobre seu
comportamento e suas opiniões.
● Ajuda a validar fluxos, layouts e funcionalidades.

54. Teste A/B
● Oferecer duas versões diferentes do produto para
diferentes usuários e ver qual delas tem melhores
resultados.
● Melhora a taxa de conversão de funis de compra,
landing pages ou formulários de cadastro.

55. Eye Tracking
● Analisar o movimento dos olhos do usuário à medida
que ele interage com o produto.
● Fornece informações sobre as partes da interface
que mais interessam ao usuário e também sobre
qual a ordem de leitura dos elementos da tela.

56. Eye Tracking

57. Wireframe
● Um guia visual que representa a estrutura da página,
bem como sua hierarquia e os principais elementos
que a compõem.
● Útil para discutir ideias como time e com os clientes,
e também para informar o trabalho dos diretores de
arte e desenvolvedores.

58. Wireframe
● Protótipo de baixa fidelidade de uma página Web ou
da tela da aplicação.
● O tamanho da fonte é importante, mas o tipo não.
● Usado para identificar elementos que serão
exibidos.

59. Wireframe
● O que é apresentado:
○ Hierarquia da interface
○ Disposição das informações na tela
○ Quantidade e tipo de conteúdo
○ Menus e elementos de navegação
○ Comportamento em vários tamanhos de tela
○ Requisitos de negócio e sistema
○ Variações e estados diferentes do sistema

60. Wireframe
● O que não é apresentado:
○ Layout final
○ Identidade visual da marca
○ Texto e conteúdo final
○ Todos os casos de uso do produto

61. Anotações
● Explicações e notas sobre um elemento ou uma
interação em um wireframe.
● Contem informações tais como:
○ identificação do conteúdo ou rotulação
○ Fonte(s) de conteúdo
○ Regras de exibição
○ Regras de Interação
○ Destinos de Interação
○ Conteúdo/mensagem de erro

62. Prototipagem
● Simulação da navegação e das funcionalidades de
um site, composto normalmente por wireframes
clicáveis ou layouts.
● Forma rápida de validar e testar um produto antes
de desenvolvê-lo do começo ao fim.

63. Prototipagem
● Ato de criar e testar toda ou parte da funcionalidade
de uma aplicação ou Website com os usuários.
● Pode ser um processo interativo para identificar ou
validar questões sobre a experiência do usuário.
● Seu resultado é o retorno acionável dos conceitos
que podem ser usados para aumentar e aprimorar o
design.

64. Prototipagem
● São uma forma de alcançar vários objetivos:
○ Trabalhar através de um design
○ Criar uma plataforma de comunicação comum
○ Vender as ideias do design internamente
○ Testar a possibilidade técnica
○ Testar os conceitos de design com
usuários/consumidores finais.

65. Prototipagem em Papel
● Abordagem mais flexível pois permite revisar
rapidamente de teste para teste.
● Ao ser utilizada no início do processo, pode ajudar a
descobrir assuntos relacionados antecipadamente.
● As mudanças neste momento poderão ser mais
rápidas e eficientes.
● Embora seja de baixo custo, não pode ser distribuída
para ser reutilizada quando as partes precisam ser
atualizada.

66. Prototipagem Digital
● Permitem que sejam apresentadas as interações
entre as partes do aplicativo ou Website e o usuário.
● Podem ser feitas referências às personas ao
apresentar ou testar o protótipo, para detalhar o
acesso aos wireframes e às propriedades do design
visual.

67. Mockup
● Artefato de alta fidelidade visual em relação ao
produto final.
● É produzido para simular o produto e obter
feedback sobre a hierarquia visual, relação entre
figuras e grupos de elementos além das ações.
● Devem ser navegáveis para que possam ser
utilizados naturalmente em testes de experiência.

68. Comparativo
Técnica Fidelidade Custo Uso Características
Wireframe Baixa $
Documentação e
rápida comunicação
Rascunho, preto e
branco, representação
da interface.
Protótipo Média para alta $$$
Teste com o usuário,
avaliação de reuso da
interface
Interativa
Mockup Alta $$
Obter feedback e
conseguir
compromentimento
dos patrocinadores
Visualização estática

69. Biblioteca de padrões
● Lista prática com exemplos e código dos padrões de
interação que serão usados em todo o site.
● Ajuda a manter o design consistente em diferentes
telas
● Facilita a vida dos desenvolvedores na hora de
implementar os elementos.

70. Checklist
● É possível retirar algum elemento ou informação?
● As informações são exibidas progressivamente?
● Está sendo utilizado o mesmo estilo visual e padrões de
interação?
● As informações são apresentadas da forma mais simples
possível?
● É possível ocultar visualmente algumas ações, para que a ação
primária receba mais importância?
● Todas as informações coletadas estão sendo utilizadas?
● A usabilidade foi testada com usuários reais?
● Quais métricas estão sendo coletadas?

71. Checklist
● Está claro para o usuário a ação que deve ser tomada naquele
momento?
● O rótulo da ação explicita o que ocorrerá após ser acionada?
● Os botões e links têm a aparência apropriada de interação?
● As informações da tela são sufucientes para a continuidade do fluxo?
● É possível se localizar dentro da estrutura do site a qualquer
momento?
● As mensagens de erro apresentam a causa e ação para correção?

72. Checklist
● A ação mais comum ao usuário está destacada?
● Os erros são prevenidos antes que possam ocorrer?
● É possível desfazer as ações?
● Existe tolerância a falhas?
● As informações do usuário estão sendo utilizadas para aprimorar sua
experiência?
● É possível automatizar algum processo para minimizar o esforço do
usuário?
● Outros sentidos estão sendo utilizados para transmitir a mensagem
para o usuário?

73. Referências
GOTHELF, J. SIDEN, J. Lean UX. Applying Lean Principles to Inprove User
Experience. California: O’Reilly Media, 2013.
UNGER, R. O Guia para Projetar UX. São Paulo: Bookman, 2009.
TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa
do Código, 2014.
● http://www.wireframeshowcase.com
● http://uxpin.com/guide-to-wireframing.html