User Experience Boot Camp

Frederick van Amstel, MsC

Instituto Faber-Ludens de Design de Interação

O que é

User Experience?

User Experience

não é

diagrama.

User Experience (UX) são aqueles momentos na vida em que tudo está perfeito ao seu redor.

O objetivo do Design é integrar a User Experience através de múltiplos ambientes.

Arquitetura da Informação

Design de Interação

Design de Serviços

Experiência do Usuário

Usabilidade

Encontrabilidade

Socialidade

Continuidade

User Experience Honeycomb

Peter Morville

• Parte I - Design Thinking

• Parte II - Planejamento da Experiência do Usuário

• Parte III - Usabilidade

• Parte IV - Encontrabilidade

• Parte V - Arquitetura da Informação

Conteúdos do UX Boot Camp

Parte I - Design Thinking

o que o marketing sugeriu

o que a administração aprovou

o que foi projetado pela

engenharia

o que foi produzido

como foi montado o que o consumidor queria...

Design Centrado no Valor,Jess McMullin

Objetivos de Negócio

Objetivos do Usuário

Objetivos de Negócio

Objetivos do Usuário

ValorVácuoDesign

Acaso

Processo de desenvolvimento comum

Engenharia

MarketingMarketing

Vantagens/Desvantagens

• Economiza planejamento

• Tentativa e erro

• Design não é importante

• O produto é um frankestein de funcionalidades

Office XP

Design como embelezamento

Engenharia

Marketing

Marketing

Design

Vantagens/Desvantanges

• Beleza vende

• Que inovação é possível a essa altura do campeonato?

Windows Vista

Design como inovação

Engenharia

Marketing

Design

Marketing

Vantagens/Desvantagens

• Melhora a qualidade

• Economiza retrabalho

• Diminui a velocidade

• Risco de não obter retorno

Office 2007

Design como estratégia

Engenharia

Marketing

Design

Marketing

Vantagens/Desvantagens

• Integra Pesquisa & Desenvolvimento

• Aumenta o ritmo de inovação

• Fortalece a marca

• Custo elevado

• Depende da cultura organizacionalLoja Apple em Nova Iorque

Discurso da Microsoft

novo mercado

inovação qualitativa

mercado saturado

competição pela qualidade

inovação quantitativa

início da competição

competição pela quantidade

sem competição

Exercício

• Discussão geral

• Como o Design está ou não integrado aos processos de sua empresa?

• Como deveria estar?

• 20 minutos

“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

Modelos imaginados pela Motorola nos anos 70 e o que foi comercializado

De ferramenta de trabalho a comunicador pessoal

Razr Dolce&Gabbana: celular como acessório fashion

O diferencial do iPhone é a interface

Bebê ensina a usar o iPhone

Limites: iPhone não permite muita customização

iPod: cada um na sua, mas com algo em comum

Sony Walkman: tem um que é no seu estilo

Computador Apple: melhor que PC, mas não combina com qualquer coisa

Apple Inspired Moodboard

Exercício

• Como é a experiência de uma marca que você gosta?

• Como seria uma decoração de interiores que expresse a experiência?

• Monte uma colagem usando a ferramenta http://mydeco.com/rooms/moodboard/

• Tente demonstrar o feeling

Características do Design

“Design é a alma das criações humanas”Steve Jobs

Modelo Triádico

Pessoas

Artefatos

Atividades

Multilingüe

Gestual

Visual Sonora

Tátil

Olfativa

Futurologia aplicada

• A diferença entre a abelha e o arquiteto é que este último imagina o todo antes de construir

• Visão holística

• Observar tendências é a melhor forma de prever o futuro

Articulação de interesses

• Design é deliberação, mesmo que implícita

• Desejos e necessidades são culturais

• Cada um tem uma história distinta

Idealista

Positivista

Lógico

Individualista

Materialista

Crítico

Dialético

Coletivo

Processo de Design

“Design é o design de um design para um design.”John Heskett

Modelo Linear

Modelo Errático

Modelo convergente

criação

criação

criação

criação

criação

criação

análise

análise

análise

análise

análiseanálise

análise

análise

criação

criação

análise

Criando possibilidades

Recursos para criar

• Rabiscos

• Brainstorming

• Cenários hipotéticos

• Prototipação rápida

• Abdução

Processo dialético

Imagem Operante

Visão

Especificação

Visão

Img. Operante

Especificação

Tempo

Lowgren e Stolterman

Thoughtful Interaction Design, MIT Press

Modelo Espiralado

“O Design não está lá, nem cá; está no meio, ora pendendo para um lado, ora para o outro, num movimento que se assemelha à uma dança graciosa. É preciso saber o momento e o lugar certo para ser rígido ou flexível, de acordo com as intenções da performance e com a guia musical. O Design é assim: não cria, mas recombina; não define, mas propõe; não julga, mas avalia; não é arte, mas também gosta de dançar… Para entendê-lo, é preciso dar o primeiro passo!”

Instituto Faber-Ludens de Design de Interação

Parte II - Planejamento de UX

Métodos de Pesquisa

• Levantamentos sócio-demográficos

• Estatísticas de navegação

• Testes de usabilidade

• Teste A/B

• Estudo etnográfico

Estudos etnográficos realizados pela Nokia sobre uso de TV móvel

Comunicação de pesquisa

• Traduzir a vivência

• Concisão

• Filtrar o relevante

• Generalizações

• Verdades e mentiras

Fotografias

Nokia Research

Vídeo

História em quadrinhos

Nokia Research

Colagem

goHostel

Colagens online

http://www.scrapblog.com/

Diagrama de afinidades

SAP

Modelos Conceituais

Personas como síntese de pesquisa sobre públicos-alvo. Detalhe do perfil de Orkut fictício criado para a Persona.

Árvore de tarefas

Descrições

Pesquisa “O Orkut mudou a minha vida!”

Os participantes da pesquisa comentam que a curiosidade os impele a clicar na foto dos amigos para ver seu perfil. Alguns homens dizem que essa curiosidade está ligada à "boa estética" da foto, o que normalmente leva, em seguida, à uma espiada no álbum de fotos para verificar se a "boa estética" também se verifica sob outros ângulos.

Estudo de caso

Redesign do Usabilidoido versão Seurat (2005)

Versão Mondrian

Perfil Semiótico I

Perfil Semiótico II

Perfil Semiótico III

Explorando personalidade

Diagrama de afinidade

Personas

Versão Seurat

Versão Seurat ajustada

Resultados

• Aumento de 500% na rentabilidade do Adsense em 6 meses

• Pararam os comentários criticando o layout

• Índice de aprovação de 60%

• Maior flexibilidade e durabilidade

Prototipação

• Propósito (demonstrar, testar, explorar)

• Fidelidade (alta, baixa)

• Funcionalidade (funcional, semi-funcional)

• Competência técnica

Rabiscos

Jonas Lowgren

Storyboard

SAP

Narrativa em vídeo

Ciao PDA

Bastidores

Protótipo estrutural

Protótipo de alta fidelidade

Protótipo funcional

Reactables

Performance

Reactables

Documentação

• Demorado

• Polissemia

• Desatualização

• Precisão

• Referência estavel

Mapa mental

Diagrama de Etapas

Cenários

•O aluno Alessandro Bernardes casou-se cedo e decide trancar o curso para trabalhar mais. Ele recorre ao website da Universidade para saber por quanto tempo poderá trancar seu curso e, ao abrir a página, vê uma porção de links relativos aos órgãos da instituição. Como ele está um tanto alheio às funções de cada um, prefere clicar no link intitulado “Matrículas”. Na página aberta, encontra um link para maiores informações sobre trancamento de curso que o leva à página do Núcleo de Acompanhamento Acadêmico (NAA), o órgão responsável por operações dessa ordem. A página informa que é possível trancar o curso por seis meses e mais seis, caso seja aprovado o requerimento. Alessandro encontrou o que queria e, mais, aprendeu que problemas dessa ordem são resolvidos no NAA.

Diagrama Situacional

Relação entre objetos associativo

Relação entre objetos com verbos

Especificação de funcionalidades

Mural do usuário

Na página do perfil do usuário, haverá um pequeno mural para outros usuários deixarem recados como, por exemplo, convidando o usuário dono do perfil a responder uma pergunta sua. O dono do perfil poderá optar por desligar o mural.

Casos de uso

Diagrama Sequencial

Diagrama Sequencial Negativo

Molic

SERG - PucRio

Vocabulário Visual

Wireframe

Pesquisa, Protótipos e Documentação

• Propósitos diferentes

• Resultados diferentes

• Combinação

Parte III - Usabilidade

As empresas só investem em UX quando fica grave

Recall feito para resolver o problema do Fox

Experiência do Usuário não é requisito. É estratégia.

Memória Humana X Computacional

Seletiva Indiscriminada

Evolutiva Estável

Associativa Discreta

Conhecimento na cabeça: como abrir estas portas? (Norman, 2006)

Conhecimento no mundo: barras indicam onde puxar

Conhecimento no mundo: barras indicam onde puxar

Conhecimento no mundo: barras indicam onde puxar

Propiciação em interfaces gráficas (Eaton, 2002)

Descompasso (breakdown) entre expectativa e evidência

Curva de aprendizado

0

22,5

45

67,5

90

1 semana 2 semanas 3 semanas 4 semanas

Adobe PhotoshopCorel Photopaint

Análise Cognitiva

• Método de avaliação do potencial cognitivo de uma interface

• Diferenças entre: experiência, expectativa e aprendizado

Perguntas

O que o usuário precisa saber?

O que a interface explica? Propiciação

O que o usuário precisa lembrar?

O que a interface armazena? Memória

O que o usuário pode descobrir?

O que a interface propõe? Descompasso

Avaliação Heurística

• Tipo de avaliação de especialista, na qual os avaliadores baseiam-se em princípios de usabilidade próprios ou desenvolvidos por outros especialistas.

O que é uma heurística

• Regra indutiva, baseada na experiência

• Forma sintética

• Heurísticas de Nielsen (1994):

• 1) Feedback

• 2) Falar a linguagem do usuário

• 3) Saídas claramente demarcadas

• 4) Consistência

• 5) Prevenir erros

Aplicação das Heurísticas

Botão soneca destacado

Auto é pra ligar o rádio quando tocar o alarme, mas não está claro isso. (Heurística 2

- Linguagem familiar)

Etapas

1.Escolher os avaliadores

2.Definir as heurísticas

3.Executar a avaliação

4.Cada problema encontrado deve ser relacionado à uma heurística

5.Promover a discussão entre os avaliadores

6.Redigir relatório

7.Priorizar problemas encontrados

Teste de Usabilidade

• Método para detectar problemas compreender melhor a interação do usuário com um produto

• Receber feedback sobre o design

• Avaliar situação

• Comparar com a concorrência

• Convencer pessoas

Laboratório de Usabilidade

Eye-tracking

Tobii MonitorÁreas onde o usuário

fixou o olharCaminho do olhar

Gravação em vídeo - betterdesktop.org - dezenas de horas de testes de usabilidade

Morae

Métricas em testes de usabilidade

• Eficiência

• Tempo de execução da tarefa

• Taxa de erros

• Eficácia

• Taxa de conclusão da tarefa

• Satisfação

• Questionário de avaliação subjetiva

Exemplo de questionário de satisfação pós-teste

Diretrizes de Usabilidade

• Nielsen e Tahir, 2002

• 64: Usar texto com muito contraste e cores de plano de fundo, para que os caracteres fiquem o mais legíveis possível.

Recomendações de Usabilidade

Contradições

Qual é o mais legível?

Recomendações de Usabilidade

Contradições

Qual é o mais legível?

Recomendações de Usabilidade

Contradições

Qual é o mais legível?

Recomendações de Usabilidade

Contradições

Onde é mais agradável a leitura?

Parter IV - Arquitetura da Informação

Arquitetura da Informação

• Organização da estrutura de um website e seu conteúdo, rotulagem e categorização da informação e o design dos sistemas de navegação e de busca (Rosenfeld e Morville, 2001)

• Influência das áreas de Library and Information Systems (LIS), Design da Informação e Interação Humano-Computador (IHC)

Taxonomia na Biologia

• Esquema de classificação hierárquica dos seres vivos

• Os filhos tem apenas um pai

• A classificação é feita para acolher novas descobertas

Taxonomia dos seres vivos (Lineu)

Taxonomia em Arquitetura da Informação

• Esquema de classificação hierárquico para informações diversas

• Os filhos podem ter mais de um pai

• Pode ser usada em ferramentas de busca e navegação

Taxonomias para navegação (antigo Cadê?)

Taxonomia em buscas (WolframAlpha)

Taxonomia em buscas (WolframAlpha)

Elaboração de Taxonomias

1.Inventário de conteúdo

2.Avaliação da taxonomia atual (se existir)

3.Agrupamento

4.Hierarquização

5.Testes

Inventário de Conteúdo

• Clicar em todos os links dentro do site

• Anotar

• URL

• Quebrado ou não

• Título da página

• Texto do link que levou à página

Inventário de Conteúdo de um website.

Processo de Classificação

rotular

categorizar

agrupar

Rótulos

aluno

universitário

estudante

aprendiz

pupilo

estagiário acadêmico

tutelado

colega

discípulo

educando

Agrupamentos

alunouniversitário

estudante

aprendizpupilo

estagiário

acadêmico

tutelado

colega

discípulo

educando

fábulas

formal

direito

Categorias

alunouniversitário

estudante

aprendiz pupilo

estagiário

acadêmico

tutelado

colega

discípulo

educando

coloquial

trabalho

Card-sorting

• Testar ou criar classificações baseadas no modelo mental do usuário

• Aberto ou fechado

• Apresentar cartões pros usuários e pedir para que organizem

© Professor Frederick van Amstel Ergonomia e Usabilidade

Exercício de card-sorting sobre o portal UFPR.br

Presencial Online

Modelos Conceituais. Norman (2006)

Designer Usuário

Modelo de Design

Modelo do Usuário

Sistema

Imagem do Sistema

O incômodo ao ver essa imagem vem da disparidade entre modelos mentais

Modelo mental dos pedais de um carro

Dendograma dos agrupamentos mais frequentes

Teste com protótipo

• Palm Vx

• Portátil

• Arquivos HTML apenas com as opções de menu

• Tarefas de recuperação de informação

V - Encontrabilidade

Estudo de encontrabilidade no Google

Comportamentos de navegação no Google

Variações de termos para a mesma busca

Resultados diferentes do Google para a mesma intenção

Habilidades de Busca

“frase exata”- +

filetype:pdfsite:

conhecimento geral,

fatos, nomesetc...

técnicas conhecimento do domínio

dicionárioswikipedia

filtrar, ampliar, desistir

estratégia debusca

mapeamentode informação

Segundo pesquisas na Xerox PARC, as pessoas buscam informações da mesma maneira que animais. Se uma presa

parece muito difícil, a raposa nem tenta o bote.

Presa Fácil Presa Difícil

O Paradoxo da Escolha

• Mais opções não trazem mais satisfação

• São tantas opções que você fica na dúvida qual delas é a melhor

• Depois de escolher, você ainda fica na dúvida

Usuários comentavam que não conseguiam decidir qual o melhor notebook (Mídia Digital)

“Quanto mais informação você vê, menos você sente.”

Ansiedade de Informação

• Informação não é o mesmo que compreensão

• Quanto maior a densidade informacional, maior o esforço do designer e do usuário

• Porque não reduzir a densidade?

O problema é antigo (2003)

Pára-quedistas: U$ 3.600 no Adsense só para esta página

As ferramentas de busca não ajudam

6° resultado

Exemplo: Catálogo Travessa dos Editores

Drupal como Gestor de Conteúdo

Catálogo deu origem ao website

“Em breve você não precisará entrar na Internet. Você estará o

tempo todo dentro dela.”Frederick van Amstel

Internet das Coisas

Pachube, um webservices que conecta sensores e atuadores em todo o mundo.

Kit Touchatag

Diferentes formas de identificar digitalmente produtos físicos.

Buscador de objetos para cegos NFC

Identificação RFID intracorpórea.