O documento discute os conceitos de experiência do usuário (UX), design de interação e usabilidade. Ele explica que UX surgiu da ergonomia e incorpora aspectos da psicologia e outros campos. O termo "experiência do usuário" foi cunhado por Donald Norman em 1990. O documento também descreve modelos conceituais de UX como o de Jesse James Garrett e como o design de interação, interface e informação atuam nos diferentes níveis desses modelos.

1. DESIGN DE INTERAÇÃO,
EXPERIÊNCIA DO USUÁRIO E USABILIDADE

2. O QUE É EXPERIÊNCIA DO USUÁRIO
UX teve sua raiz na ergonomia, campo
que desde 1940 tem focado na interação
homem-máquina, atualmente bastante
relacionado aos princípios de Design
Centrado no Usuário (UCD).
Disciplina que incorpora aspectos da
psicologia, antropologia, ciência da
computação, design gráfico, industrial e
de interação.

3. O QUE É EXPERIÊNCIA DO USUÁRIO
O termo “Experiência do Usuário” foi
cunhado pela primeira vez por Donald
Norman, em meados de 1990, em The
Design of Everyday Things .
Donald Norman, é um especialista em
ciências cognitivas mundialmente
conhecido por seus estudos sobre
como o design pode facilitar a vida das
pessoas que usam qualquer artefato
que possa ser projetado.

4. http://userexperienceproject.blogspot.com

5. O QUE É EXPERIÊNCIA DO USUÁRIO
O conceito de UX em aplicações web é
ilustrado por por Jesse James Garrett
em The Elements of User Experience,
um modelo conceitual de design
centrado no usuário, diagrama
publicado em 2000.
Garrett, pesquisador, desenvolvedor e
designer de experiência do usuário, é
co-fundador da Adaptive Path e
também conhecido por ter em 2005
cunhado o termo Ajax para descrever a
tecnologia por trás de serviços
emergentes como Google Maps e
Google Suggests em artigo científico.

6. SUPERFÍCIE
ESQUELETO
ESTRUTURA
ESCOPO
ESTRATÉGIA
www.jjg.net/elements/pdf/elements.pdf

7. O QUE É DESIGN DE INTERAÇÃO
Projetar produtos interativos que
ofereçam suporte no dia a dia e no
trabalho das pessoas.
Jenny Preece, autora de Interaction
Design – Beyond Human-Computer
Interaction é pesquisadora, PhD,
professora de Sistemas de Informação
e reitora da Faculdade de Estudos de
Informação, Universidade de
Maryland.

8. O QUE É DESIGN DE INTERAÇÃO
Atua no plano de “estrutura”, com
ênfase na definição de fluxos que serão
apresentados para os usuários, para
facilitar suas tarefas, definindo como
esses interagem com as
funcionalidades do sistema.

9. O QUE É DESIGN DE NAVEGAÇÃO
Atua no plano de “estrutura e
esqueleto”, como especialização do
design de interface, responsável por
apresentar acessos a informação,
fornecendo aos usuários percursos que
o ajudem a encontrar facilmente o que
procuram.

10. O QUE É DESIGN DE INTERFACE
Atua no plano de “esqueleto e
superfície”, com ênfase na definição de
padrões e de elementos gráficos como
botões, campos, áreas, entre outras
formas de apresentação de conteúdos
na interface.

11. O QUE É DESIGN DE INFORMAÇÃO
Atua no plano de “esqueleto e
superfície”, e é responsável por
apresentar a informação para uma
comunicação efetiva, ou seja, ele
comunica idéias aos usuário
permitindo a melhor compreensão de
conteúdos.

12. ENTREGÁVEIS EM DESIGN DE INTERAÇÃO
Avaliação de usabilidade
Fluxos e mapas de navegação
Casos de uso e/ou cenários
Personas
Mapas do site e inventário de conteúdos
Wireframes
Protótipos (funcionáis e não funcionais, alta e baixa fidelidade)

13. ABORDAGENS PARA DESIGN DE INTERAÇÃO
Abordagem Descrição Usuários Designers
Traduz na solução as
Centrado no Foco nas necessidades e
Guia o design necessidades e objetivos do
Usuário objetivos do usuário
usuário
Cria as ferramentas para
Centrado em Foco nas atividades e tarefas
Realiza as atividades que os usuários realizem as
Atividades que precisam ser completadas
ações
Assegura que todas as
Foco nos componentes do Determina os objetivos do
Sistemas sistema sistema
partes do sistema estão
atendidas
Confia nas habilidades e
Gênios conhecimentos do designer para Fonte de validação Fonte de inspiração
fazer produtos

14. COMO DESENVOLVER
UM SOFTWARE DE SUCESSO

15. Keeley's
Triangle
GERENTES DESENVOLVEDORES
• Modelo do negócio • Tecnologias disponíveis
• Orçamento disponível • Tecnologias envolvidas
• Projeção de lucro • Capacidade técnica
DESIGNERS
• Motivações e atitudes
• Comportamentos
• Aptidões dos usuários

16. PROCESSOS DE UX NO SCRUM
Conventional Product Development Process
The Silicon Valley Product Group (SVPG) - www.svpg.com

17. PROCESSOS DE UX NO SCRUM
Sprint 0
Agile / Scrum Product Development Process
The Silicon Valley Product Group (SVPG) - www.svpg.com

18. UX NO SCRUM - DICA
ESTRATÉGIA E ESCOPO
2 SPRINTS a frente do desenvolvimento
ESTRUTURA, ESQUELETO E SUPERFICIE
1 SPRINT a frente do desenvolvimento

19. PESQUISA EM DESIGN
ONDE BUSCAR INFORMAÇÕES
Fonte Quem O que
Visão preliminar do produto; orçamento e
Executivos da empresa, pessoas da
organograma; limitações técnicas; objetivos
Stakeholders área de negócios, de marketing,
e direcionamento do negócio; percepção
desenvolvedores
sobre o usuário.
Como melhorar o produto; informações
SME – Subject Matter Expert, técnicas e melhores práticas; questões
Especialistas especialistas no domínio específicas da área; características do
usuário; vocabulário especializado.
Objetivos de compra; frustrações com
Quem irá comprar o sistema, produto soluções atuais; processo de decisão de
Clientes ou serviço compra; regras para instalação, manutenção
e gerenciamento do produto.
Problemas e frustrações; o que precisam
Quem efetivamente usará o sistema, para realizar seu trabalho; contexto geral de
Usuários produto ou serviço suas atividades; tarefas, objetivos e
motivações.

20. MÉTODOS E PROPÓSITOS
DE PESQUISA
Propósitos Métodos Usados para
Demográfico • Questionários • Censo demográfico
Quem são os usuários? • Análise de registros • Segmentação de público
Idade, sexo, geografia • Banco de dados • Informar/validar outras pesquisas
Comportamental • Pesquisa de campo • Estratégia do produto
Como as coisas são feitas? • Entrevistas contextuais • Funcionalidades
Padrões de comportamento, modelos • Card sorting • Design de interação
conceituais • Estudo etnográfico • Arquitetura de informação
• Estratégia do produto
Motivacional • Pesquisa de campo • Estrturar a experiência
Por que eles fazem? • Entrevistas contextuais • Interpretação visual
Objetivos, emoções, preferências, • Questionários • Estratégia da marca
desejos
• Design de interação
• Teste de usabilidade
Avaliativo • Feedback do usuário
• Fluxos de interação
Por que eles fazem? • Layout de páginas
• Teste A/B
• Nomenclaturas

21. MÉTODOS DE PESQUISA
EXPLORATÓRIOS
Metodos aplicados no
Início do projeto e na fase de
concepção do produtos, para
identificar as reais necessidades
do usuário e do negócio e
projetar interfaces mais
adequadas ao seu uso.
Quantitativa ou Qualitativa
Com ou sem usuários

22. MÉTODOS DE PESQUISA
AVALIATIVOS
Usados para analisar a
qualidade da interface e
interação de um produto,
podendo ser de produtos já
existentes ou em
desenvolvimento.
Quantitativa ou Qualitativa
Com ou sem usuários

23. PERSONAS
Personas são pessoas fictícias criadas
para representar diferentes tipos de
usuários, seu comportamento,
atitudes e metas.
A aplicação de Personas em interface
de software for desenvolvida por Alan
Cooper e sua técnica foi popularizada
em 1999 com em seu livro The
Inmates are Running the Asylum.
Alan Cooper é também conhecido por
pai do Visual Basic e criador da
linguagem “Ruby”.

24. PERSONAS
Ferramenta de apoio a decisão
Quem são os usuários?
Como eles se comportam?
Como eles pensam?
O que eles desejam e por quê?
A partir dos achados de pesquisa

25. CRIAÇÃO DE PERSONAS
Passo 1: Identificar variáveis comportamentais e demográficas
Passo 2: Mapear entrevistados nas variáveis
Passo 3: Identificar principais padrões de comportamento
Passo 4: Listar características e objetivos relevantes
Passo 5: Checar todo o conjunto de personas e elminiar redundâncias
Passo 6: Desenvolver a narrativa
Passo 7: Determinar tipos de personas

26. TIPOS DE PERSONAS
Primárias Secundárias Suplementares
Clientes Servidas Negativas

27. EXEMPLO DE PERSONA

28. MODELANDO E
IDENTIFICANDO REQUISITOS
Ferramentas Descrição Síntese de requisitos
Mapas mentais Como as pessoas pensam sobre algo e suas Dados/Atributo Objetos e informações que o
usuário precisa ver
expectativas sobre como ele deve se
comportar. s
Cenários Narrativas que descrevem interações com o Funcionalidade Operações ou ações que os
usuários farão com os dados
sistema. Informa sobre objetivos,
expectativas, motivações, ações e reações s ou em resposta a eles.
do usuário.
Personas Modelos descritivos de usuários baseados
em padrões reais. Elementos de Forms, botões, campos,
tabelas, filtros, paginação,
interface menus, sub-menus, etc.
Casos de uso Explica textualmente, como o sitema
responde a cada interação de um ator, que
pode ser um usuário ou outro sistema.
Análise de tarefas Lista as tarefas que o design final deverá
suportar. Podem ser categorizadas por
importância, nível de acesso e personas.
Fluxo de tarefas Detalha como um usuário irá completar
todas as tarefas em uma aplicação, do
começo ao fim.

29. REQUISITOS - DICA
Envolver um QA ou Tester na etapa de
modelagem e identificação de
requisitos, sendo que o mesmo nesta
etapa já pode dar início a
documentação de regras e a
formatação de testes automatizados*.
* Cucumber (utilizado para a automatização de testes
de aceitação na Locaweb)

30. PADRÕES E PRINCÍPIOS
DO DESIGN DE INTERAÇÃO
Análise heurística é um método
informal de inspeção onde os
avaliadores julgam cada
elemento da interface, tendo
como referência princípios
heurísticos de usabilidade.
Jacob Nielsen é engenheiro,
PhD, autor, pesquisador e
consultor em Interface com o
usuário e usabilidade.

31. PRINCÍPIOS DE
DESIGN DE INTERAÇÃO
10 Heurísticas de Nielsen
Diálogos simples e naturais (estética e desing Saídas claramente marcadas (liberdade e
minimalista) controle do usuário)
Falar a linguagem do usuário (palavras, Atalhos (flexibilidade e eficiência de uso)
frases, conceitos)
Minimizar a sobrecarga de memória do Boas mensagens de erro (fácil
usuário (reconhecimento em vez de reconhecimento, diagnóstico e recuperação de
memorização) erros)
Consistência (padrões de interface e interação) Prevenir erros (design defensivo)
Feedback (visibilidade do status do sistema) Ajuda e documentação (acessível,
contextualizada e concisa)

32. PRINCÍPIOS DE
DESIGN DE INTERAÇÃO
Outros princípios para a criação de interfaces eficazes
Apresente as etapas do processo
Faça uma navegação clara e eficiente
Título das páginas reforça a navegação e orienta o usuário
Use botões para ações e links para navegação
Separe as tarefas primárias, secundárias e terciárias (detaque e foco visual)
Deixe sua interface rápida (carregamento, leitura e decisão)
Mantenha Proximidade entre elementos relacionados
Utilize interações comuns e já comprovadas
Mantenha a conexão entre design visual e de interação
Menos é mais
As melhores interfaces devem ser quase “invisíveis”

33. PADRÕES DE DESIGN DE INTERAÇÃO
Organização hierárquica Padrão de Interação Padrão de Interação
Postural Postural Estrutural
Postura Transitória
Estrutural Divisão de áreas (navegação,
Postura Soberana visão geral, detalhes)
Comportamental
Padrão de Interação Comportamental
Exploratório – otimização do uso exploratório de aplicações
Navegação em grandes bases de dados – soluções para grandes quantidades de informação
Busca avançada – melhores práticas para a busca e apresentação de conteúdos
Entrada e alteração de dados – elementos de facilitam e orientam o usuário ao informar dados
Informação centralizada – formatos comuns de apresentação de informações que precisam ser
compreendidas pelos usuários

34. DOS REQUISITOS AO DESIGN
SKETCHES
Big picture
Navegação
Áreas
Interação

35. DOS REQUISITOS AO DESIGN
WIREFRAMES
Detalhamento
Navegação
Áreas
Interação
Fluxos
Elementos
de interface
Conteúdos

36. DOS REQUISITOS AO DESIGN
DESIGN VISUAL
Proximidade
Contraste
Repetição
Alinhamento
Cores
Tipografia

37. DOS REQUISITOS AO DESIGN
PROTÓTIPOS
BAIXA FIDELIDADE ALTA FIDELIDADE
FUNCIONAL E NÃO FUNCIONAL

38. DOS REQUISITOS AO DESIGN
IMPLEMENTAÇÃO
apresentação
HTML / CSS
estrutura
javascript
comportamento

39. DOS REQUISITOS AO DESIGN
TESTE DE USABILIDADE
Objetivo é observar usuários reais
usando o produto para descobrir
problemas e pontos de melhoria.
Pode ser realizado com
protótipos ou aplicações, em
desenvolvimento ou já disponíveis
no mercado.
Medem desempenho, precisão,
lembrança e reposta emocional.

40. TESTE DE USABILIDADE - DICA
Envolver os designers nos testes de
forma que haja a possibilidade de
consolidação de informações obtidas
para uma identificação mais rápida de
tudo o que precisa ser revisto e
ajustado no design do produto.

41. Mourylise Heymer
mheymer@gmail.com
www.ungarbage.com