Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

User Experience Boot Camp

on

  • 2,560 views

Slides do treinamento corporativo oferecido pelo Instituto Faber-Ludens para iniciar a área dentro de uma empresa. www.faberludens.com.br

Slides do treinamento corporativo oferecido pelo Instituto Faber-Ludens para iniciar a área dentro de uma empresa. www.faberludens.com.br

Statistics

Views

Total Views
2,560
Views on SlideShare
2,533
Embed Views
27

Actions

Likes
6
Downloads
79
Comments
0

4 Embeds 27

http://www.usabilidoido.com.br 22
http://a0.twimg.com 3
http://usabilidoido.com.br 1
http://paper.li 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    User Experience Boot Camp User Experience Boot Camp Presentation 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.
    • Experiência do Usuário Encontrabilidade Continuidade Arquitetura da Informação Design de Serviços Usabilidade Socialidade Design de Interação
    • User Experience Honeycomb Peter Morville
    • Conteúdos do UX Boot Camp • 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
    • Parte I - Design Thinking
    • o que o o que a administração o que foi marketing aprovou projetado pela sugeriu engenharia o que foi como foi montado o que o produzido consumidor queria...
    • Design Centrado no Valor, Jess McMullin Objetivos de Negócio Objetivos de Negócio Design Vácuo Valor Acaso Objetivos do Usuário Objetivos do Usuário
    • Processo de desenvolvimento comum Engenharia Marketing Marketing
    • Vantagens/Desvantagens • Economiza planejamento • Tentativa e erro • Design não é importante • O produto é um frankestein de funcionalidades Office XP
    • Design como embelezamento Marketing Engenharia Design Marketing
    • Vantagens/Desvantanges • Beleza vende • Que inovação é possível a essa altura do campeonato? Windows Vista
    • Design como inovação Design Marketing Engenharia Marketing
    • Vantagens/Desvantagens • Melhora a qualidade • Economiza retrabalho • Diminui a velocidade • Risco de não obter retorno Office 2007
    • Design como estratégia Design Engenharia Marketing Marketing
    • Vantagens/Desvantagens • Integra Pesquisa & Desenvolvimento • Aumenta o ritmo de inovação • Fortalece a marca • Custo elevado • Depende da cultura organizacional Loja Apple em Nova Iorque
    • Discurso da Microsoft
    • inovação qualitativa sem competição competição pela qualidade novo mercado mercado saturado início da competição competição pela inovação quantidade quantitativa
    • 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 Atividades Pessoas Artefatos
    • Multilingüe Visual Sonora Olfativa Gestual Tátil
    • 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 Materialista Positivista Crítico Lógico Dialético Individualista Coletivo
    • Processo de Design “Design é o design de um design para um design.” John Heskett
    • Modelo Linear
    • Modelo Errático
    • Modelo convergente criação análise criação análise análise análise criação análise criação criação análise análise criação análise análise criação criação
    • Criando possibilidades
    • Recursos para criar • Rabiscos • Brainstorming • Cenários hipotéticos • Prototipação rápida • Abdução
    • Processo dialético Lowgren e Stolterman Thoughtful Interaction Design, MIT Press Tempo Visão Visão Img. Operante Imagem Especificação Especificação Operante
    • 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.
    • Seletiva Indiscriminada Evolutiva Estável Associativa Discreta Memória Humana X Computacional
    • 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 90 Adobe Photoshop Corel Photopaint 67,5 45 22,5 0 1 semana 2 semanas 3 semanas 4 semanas
    • 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 O que a interface Propiciação precisa saber? explica? O que o usuário O que a interface Memória precisa lembrar? armazena? O que o usuário O que a interface Descompasso pode descobrir? propõe?
    • 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 Auto é pra ligar o rádio quando tocar o alarme, mas não está claro isso. (Heurística 2 - Linguagem familiar) Botão soneca destacado
    • 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 olhar Caminho 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 agrupar rotular categori zar
    • Rótulos colega aprendiz educando pupilo aluno universitário tutelado estudante estagiário acadêmico discípulo
    • Agrupamentos aluno universitário estudante acadêmico colega educando tutelado aprendiz pupilo estagiário discípulo
    • Categorias coloquial formal aluno universitário estudante acadêmico colega direito educando tutelado trabalho fábulas aprendiz pupilo estagiário discípulo
    • 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
    • Presencial Online Exercício de card-sorting sobre o portal UFPR.br © Professor Frederick van Amstel Ergonomia e Usabilidade
    • Modelos Conceituais. Norman (2006) Modelo de Modelo do Design Usuário Designer 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” conhecimento técnicas - + geral, conhecimento do filetype:pdf fatos, nomes domínio site: etc... mapeamento filtrar, estratégia de dicionários de informação ampliar, busca wikipedia desistir
    • Presa Fácil Presa Difícil 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.
    • 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
    • 6° resultado As ferramentas de busca não ajudam
    • 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.