O documento discute experiência do usuário (UX) e ferramentas para planejamento de UX, como mood boards, mind maps e diagramas de afinidades para definir caminhos de projeto. Também discute personas e árvores de tarefas para entender usuários e fluxos de interação.

1. EURIPEDES MAGALHÃES - @EURIPEDESM
User Experience

2. DO QUE SE TRATA?
Se trata de gerar “o momento em que tudo está
perfeito” se trata de fazer com que tudo o que o
usuário use seja mais fácil e melhor, se trata fazer com
que o uso daquele sistema, ferramenta ou serviço seja
o melhor possível, que gere aprendizado, afetividade
e lembrança.

3. USER EXPERIENCE
“Algumas pessoas dizem que design é solução de
problemas. É óbvio que designers resolvem
alguns problemas, mas isso os dentistas também
fazem. Design é uma forma de invenção cultural.”
Jack Schulze

6. FERRAMENTA DE TRABALHO,
ACESSÓRIO? COMUNICADOR?

7. “Design is not just what
it looks like and feels like.
Design is how it works.”
Steve Jobs

9. USER EXPERIENCE
O iPhone ganhou espaço pela sua curva de
aprendizado pequena e pela integração que ele
permite com outros dispositivos da Apple.
A interface é um ponto importante neste ponto. Isso
nos leva a pensar nas características do design, que
são cada dia mais abrangentes.
O design agora é um espaço de multilinguagem, e
muitos recursos podem ser utilizados.

10. Visual Sonoro Olfativo
?
Gestual Tátil E o que mais?

11. USER EXPERIENCE
Em quase tudo que usamos há design, de revistas à
embalagens, de cadeiras a mouses de computadores,
de maçanetas de porta à assentos de carros, tudo
de alguma forma foi pensado para atender uma
necessidade.
Essa necessidade deve ser levada em consideração, e
além dela, o USUÁRIO também, o “rei” do designer.

13. http://nymag.com/nymetro/health/features/11700/

14. 1. Fácil identificação
O nome do medicamento é impresso
no topo da embalagem.
2. Cor vermelha
A cor vermelha é o símbolo universal
para alerta.
3. Hierarquia de informação
Nome do medicamento, posologia,
data de validade organizadas de
acordo com sua importância e uso
4. Economia de papel
A forma e posição do papel gera um
melhor aproveitamento por folha e
facilita a visualização
http://nymag.com/nymetro/health/features/11700/

15. 5. Identificação por cor
Por cores customizadas é possível
identificar e separar medicamentos
quando usados por mais de uma
pessoa em casa.
6. Card com informações extras
Mais difícil de perder, o cartão fica
atrás da embalagem e explica com
detalhes as informações sobre o
medicamento
7. Posologia
Identificação da posologia, quantos
dias dura o tratamento e quantas
vezes por dia se utiliza.
http://nymag.com/nymetro/health/features/11700/

16. Packaged APIs
Design
Deliverables
Interaction
Solutions
Architecting the
Usability Design
Technology
Prototyping
Back-End
Creative Design Information
inking (Visual & UI) Architecture
Flash
Progra mming
AJAX
(JavaScript)
Designing the
Experience
Content User
Research DOM
Front-End Scripting
User Experience Development
CSS Delivering the
Problem
Accessibility Experience
Framing Business
Intelligence
User
Markup
Defi ning the Agents
Problem Requirements Account
Gathering / Project Mgmt.
Research
Mgmt.
Managing the
Project
http://garrettdimon.com/pages/improving_interface_design

17. Experiência do Usuário
Encontrabilidade Continuidade
Arquitetura da Informação Design de Serviços
Usabilidade Socialidade
Design de Interação
Faber Ludens

18. USER EXPERIENCE HONEYCOMB
Peter Morville

19. EMOCIONAL...
David Armano

20. CRIATIVIDADE “EM T”

21. A MENTE EM FORMA DE T
David Armano

22. ILUVUXDESIGN PART I
http://vimeo.com/19131028

23. ILUVUXDESIGN PART II
http://vimeo.com/21691333

24. PLANEJANDO UX
Basicamente nada é criado sem uma base sólida de
pesquisa, imersão e entendimento do público e do
uso do que será criado.
Por isso pode-se e deve-se fazer levantamentos sócio-
demográficos, ver estatísticas de navegação, gerar
testes de usabilidade, testes A/B, o que for possível.

25. Estudo da Nokia sobre tv móvel

26. FERRAMENTAS
Existem muitas ferramentas para pesquisa e definição
de caminhos, um processo de design thinking mais
complexo pode ser formatado, mas também itens
pulverizados podem ajudar.
Mood Boards, Mind Maps e diagramas podem ser
bons caminhos.

27. MOOD BOARD
Ferramenta muito utilizada no processo de design
estratégico, é um “facilitador de pensamento”, por
conter informações .
As imagens contidas nele auxiliam o processo de
definição dos caminhos a serem trabalhados.
A idéia é criar esse processo de imersão, de
atmosfera, humor. Imagens, tecidos, texturas, tudo
pode ser inserido nele.
http://www.scrapblog.com

30. MIND MAP
Dentre muitas funções do Mind Map, uma delas é
definir os caminhos de um projeto, ação, comunicação
ou até mesmo funcionamentos de um sistema.
Ajuda a planejar as etapas e identificar os caminhos
de uma forma visual e intuitiva.
http://www.mindmeister.com

31. Mind Map

32. DIAGRAMA DE AFINIDADES
Método para ordenar idéias, informações ou ações, a
partir de uma classificação por grupos, as informações
podem ser agrupadas e classificadas.
Facilita o arranjo das informações porque é intuitivo,
rápido e ajuda na discussão dos resultados.
http://nform.com/tradingcards/affinity-diagram

34. PERSONAS
A definição de um “personagem” para pesquisa,
na técnica de personas, é traçado um perfil de um
possível usuário, suas características básicas, como ele
se relacionaria com o sistema e com o seu núcleo de
convivência, uma síntese da personalidade.
Pode ser feito como uma descrição de um dia de
atividades, somente como uma listagem ou até
mesmo criando-se um perfil “fake” em uma rede social
para testes.

35. http://wiki.openmoko.org/wiki/Main_Page

36. ÁRVORE DE TAREFAS E ETAPAS
É a listagem de todas as ações necessárias para a
interação no sistema ou site.
Pode conter os itens de curva de aprendizado, pode
conter as interações principais ou as interações entre
os usuários do sistema.
Serve como guia para programação, para
entendimento do tempo de interação e quantidade de
páginas a serem criadas.

39. ESTUDO
App para economia de combustível.
Por intermédio da colaboração entre os usuários,
o sistema apontaria os melhores locais para
abastecimento, os melhores caminhos e também o
rendimento médio do veículo.

43. ESTUDO/CASE
App para interação entre os amigos.
Com o conceito de integrar os amigos e fazer coisas
diferenciadas, o app para Facebook instigava as
pessoas a convidar os amigos para atividades no
mínimo estranhas.

47. DIAGRAMA SEQUENCIAL
Mostra as interações entre os usuários e a sequência
de tarefas para fazer determinada ação.
Ex.: compras em um B2B ou B2C ou C2C

50. @EURIPEDESM
Links úteis e bibliografia
• http://www.designthinkingforeducators.com/
• http://www.uxnet.org/
• http://mitworld.mit.edu/video/357/
• http://designthinking.ideo.com/
• http://arquiteturadeinformacao.com/
• http://www.usabilitycounts.com/
• http://www.intuitionhq.com/
• http://nform.com/tradingcards/affinity-diagram