user experience boot camp
Post on 10-May-2015
2.254 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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.
top related