DESIGN DE INTERAÇÃO,EXPERIÊNCIA DO USUÁRIO E USABILIDADE
O QUE É EXPERIÊNCIA DO USUÁRIOUX teve sua raiz na ergonomia, campoque desde 1940 tem focado na interaçãohomem-máquina, atu...
O QUE É EXPERIÊNCIA DO USUÁRIOO termo “Experiência do Usuário” foicunhado pela primeira vez por DonaldNorman, em meados de...
http://userexperienceproject.blogspot.com
O QUE É EXPERIÊNCIA DO USUÁRIOO conceito de UX em aplicações web éilustrado por por Jesse James Garrettem The Elements of ...
SUPERFÍCIE                                        ESQUELETO                                        ESTRUTURA              ...
O QUE É DESIGN DE INTERAÇÃO                Projetar produtos interativos que                ofereçam suporte no dia a dia ...
O QUE É DESIGN DE INTERAÇÃOAtua no plano de “estrutura”, comênfase na definição de fluxos que serãoapresentados para os us...
O QUE É DESIGN DE NAVEGAÇÃOAtua no plano de “estrutura eesqueleto”, como especialização dodesign de interface, responsável...
O QUE É DESIGN DE INTERFACEAtua no plano de “esqueleto esuperfície”, com ênfase na definição depadrões e de elementos gráf...
O QUE É DESIGN DE INFORMAÇÃOAtua no plano de “esqueleto esuperfície”, e é responsável porapresentar a informação para umac...
ENTREGÁVEIS EM DESIGN DE INTERAÇÃO  Avaliação de usabilidade  Fluxos e mapas de navegação  Casos de uso e/ou cenários  Per...
ABORDAGENS PARA DESIGN DE INTERAÇÃO Abordagem     Descrição                        Usuários                    Designers  ...
COMO DESENVOLVERUM SOFTWARE DE SUCESSO
Keeleys                                  TriangleGERENTES                                           DESENVOLVEDORES• Model...
PROCESSOS DE UX NO SCRUM              Conventional Product Development Process              The Silicon Valley Product Gro...
PROCESSOS DE UX NO SCRUMSprint 0              Agile / Scrum Product Development Process              The Silicon Valley Pr...
UX NO SCRUM - DICA       ESTRATÉGIA E ESCOPO2 SPRINTS a frente do desenvolvimentoESTRUTURA, ESQUELETO E SUPERFICIE1 SPRINT...
PESQUISA EM DESIGN            ONDE BUSCAR INFORMAÇÕESFonte            Quem                                  O que         ...
MÉTODOS E PROPÓSITOS                             DE PESQUISAPropósitos                          Métodos                   ...
MÉTODOS DE PESQUISA                       EXPLORATÓRIOSMetodos aplicados noInício do projeto e na fase deconcepção do prod...
MÉTODOS DE PESQUISA                        AVALIATIVOSUsados para analisar aqualidade da interface einteração de um produt...
PERSONASPersonas são pessoas fictícias criadaspara representar diferentes tipos deusuários, seu comportamento,atitudes e m...
PERSONASFerramenta de apoio a decisãoQuem são os usuários?Como eles se comportam?Como eles pensam?O que eles desejam e por...
CRIAÇÃO DE PERSONASPasso 1: Identificar variáveis comportamentais e demográficasPasso 2: Mapear entrevistados nas variávei...
TIPOS DE PERSONASPrimárias          Secundárias   SuplementaresClientes            Servidas       Negativas
EXEMPLO DE PERSONA
MODELANDO E                     IDENTIFICANDO REQUISITOSFerramentas            Descrição                                  ...
REQUISITOS - DICAEnvolver um QA ou Tester na etapa demodelagem e identificação derequisitos, sendo que o mesmo nestaetapa ...
PADRÕES E PRINCÍPIOSDO DESIGN DE INTERAÇÃO                Análise heurística é um método                informal de inspeç...
PRINCÍPIOS DE               DESIGN DE INTERAÇÃO10 Heurísticas de NielsenDiálogos simples e naturais (estética e desing    ...
PRINCÍPIOS DE       DESIGN DE INTERAÇÃOOutros princípios para a criação de interfaces eficazesApresente as etapas do proce...
PADRÕES DE DESIGN DE INTERAÇÃOOrganização hierárquica                   Padrão de Interação                   Padrão de In...
DOS REQUISITOS AO DESIGN                     SKETCHESBig pictureNavegação     Áreas Interação
DOS REQUISITOS AO DESIGN                      WIREFRAMESDetalhamento  Navegação       Áreas    Interação      Fluxos  Elem...
DOS REQUISITOS AO DESIGN                   DESIGN VISUALProximidade  Contraste  RepetiçãoAlinhamento     Cores Tipografia
DOS REQUISITOS AO DESIGN        PROTÓTIPOSBAIXA FIDELIDADE                    ALTA FIDELIDADE            FUNCIONAL E NÃO F...
DOS REQUISITOS AO DESIGN     IMPLEMENTAÇÃO              apresentaçãoHTML / CSS  estruturajavascript         comportamento
DOS REQUISITOS AO DESIGN               TESTE DE USABILIDADEObjetivo é observar usuários reaisusando o produto para descobr...
TESTE DE USABILIDADE - DICAEnvolver os designers nos testes deforma que haja a possibilidade deconsolidação de informações...
Mourylise Heymer  mheymer@gmail.com  www.ungarbage.com
Upcoming SlideShare
Loading in...5
×

Design de Interação, Experiência do Usuário e Usabilidade - 2010

4,062

Published on

Published in: Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,062
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
167
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Design de Interação, Experiência do Usuário e Usabilidade - 2010

  1. 1. DESIGN DE INTERAÇÃO,EXPERIÊNCIA DO USUÁRIO E USABILIDADE
  2. 2. O QUE É EXPERIÊNCIA DO USUÁRIOUX teve sua raiz na ergonomia, campoque desde 1940 tem focado na interaçãohomem-máquina, atualmente bastanterelacionado aos princípios de DesignCentrado no Usuário (UCD).Disciplina que incorpora aspectos dapsicologia, antropologia, ciência dacomputação, design gráfico, industrial ede interação.
  3. 3. O QUE É EXPERIÊNCIA DO USUÁRIOO termo “Experiência do Usuário” foicunhado pela primeira vez por DonaldNorman, em meados de 1990, em TheDesign of Everyday Things .Donald Norman, é um especialista emciências cognitivas mundialmenteconhecido por seus estudos sobrecomo o design pode facilitar a vida daspessoas que usam qualquer artefatoque possa ser projetado.
  4. 4. http://userexperienceproject.blogspot.com
  5. 5. O QUE É EXPERIÊNCIA DO USUÁRIOO conceito de UX em aplicações web éilustrado por por Jesse James Garrettem The Elements of User Experience,um modelo conceitual de designcentrado no usuário, diagramapublicado em 2000.Garrett, pesquisador, desenvolvedor edesigner de experiência do usuário, éco-fundador da Adaptive Path etambém conhecido por ter em 2005cunhado o termo Ajax para descrever atecnologia por trás de serviçosemergentes como Google Maps eGoogle Suggests em artigo científico.
  6. 6. SUPERFÍCIE ESQUELETO ESTRUTURA ESCOPO ESTRATÉGIAwww.jjg.net/elements/pdf/elements.pdf
  7. 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. 8. O QUE É DESIGN DE INTERAÇÃOAtua no plano de “estrutura”, comênfase na definição de fluxos que serãoapresentados para os usuários, parafacilitar suas tarefas, definindo comoesses interagem com asfuncionalidades do sistema.
  9. 9. O QUE É DESIGN DE NAVEGAÇÃOAtua no plano de “estrutura eesqueleto”, como especialização dodesign de interface, responsável porapresentar acessos a informação,fornecendo aos usuários percursos queo ajudem a encontrar facilmente o queprocuram.
  10. 10. O QUE É DESIGN DE INTERFACEAtua no plano de “esqueleto esuperfície”, com ênfase na definição depadrões e de elementos gráficos comobotões, campos, áreas, entre outrasformas de apresentação de conteúdosna interface.
  11. 11. O QUE É DESIGN DE INFORMAÇÃOAtua no plano de “esqueleto esuperfície”, e é responsável porapresentar a informação para umacomunicação efetiva, ou seja, elecomunica idéias aos usuáriopermitindo a melhor compreensão deconteúdos.
  12. 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. 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. 14. COMO DESENVOLVERUM SOFTWARE DE SUCESSO
  15. 15. Keeleys TriangleGERENTES 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. 16. PROCESSOS DE UX NO SCRUM Conventional Product Development Process The Silicon Valley Product Group (SVPG) - www.svpg.com
  17. 17. PROCESSOS DE UX NO SCRUMSprint 0 Agile / Scrum Product Development Process The Silicon Valley Product Group (SVPG) - www.svpg.com
  18. 18. UX NO SCRUM - DICA ESTRATÉGIA E ESCOPO2 SPRINTS a frente do desenvolvimentoESTRUTURA, ESQUELETO E SUPERFICIE1 SPRINT a frente do desenvolvimento
  19. 19. PESQUISA EM DESIGN ONDE BUSCAR INFORMAÇÕESFonte Quem O que Visão preliminar do produto; orçamento e Executivos da empresa, pessoas da organograma; limitações técnicas; objetivosStakeholders á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õesEspecialistas 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 deClientes 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 deUsuários produto ou serviço suas atividades; tarefas, objetivos e motivações.
  20. 20. MÉTODOS E PROPÓSITOS DE PESQUISAPropósitos Métodos Usados paraDemográfico • Questionários • Censo demográficoQuem são os usuários? • Análise de registros • Segmentação de públicoIdade, sexo, geografia • Banco de dados • Informar/validar outras pesquisasComportamental • Pesquisa de campo • Estratégia do produtoComo as coisas são feitas? • Entrevistas contextuais • FuncionalidadesPadrões de comportamento, modelos • Card sorting • Design de interaçãoconceituais • Estudo etnográfico • Arquitetura de informação • Estratégia do produtoMotivacional • Pesquisa de campo • Estrturar a experiênciaPor que eles fazem? • Entrevistas contextuais • Interpretação visualObjetivos, emoções, preferências, • Questionários • Estratégia da marcadesejos • Design de interação • Teste de usabilidadeAvaliativo • Feedback do usuário • Fluxos de interaçãoPor que eles fazem? • Layout de páginas • Teste A/B • Nomenclaturas
  21. 21. MÉTODOS DE PESQUISA EXPLORATÓRIOSMetodos aplicados noInício do projeto e na fase deconcepção do produtos, paraidentificar as reais necessidadesdo usuário e do negócio eprojetar interfaces maisadequadas ao seu uso. Quantitativa ou Qualitativa Com ou sem usuários
  22. 22. MÉTODOS DE PESQUISA AVALIATIVOSUsados para analisar aqualidade da interface einteração de um produto,podendo ser de produtos jáexistentes ou emdesenvolvimento. Quantitativa ou Qualitativa Com ou sem usuários
  23. 23. PERSONASPersonas são pessoas fictícias criadaspara representar diferentes tipos deusuários, seu comportamento,atitudes e metas.A aplicação de Personas em interfacede software for desenvolvida por AlanCooper e sua técnica foi popularizadaem 1999 com em seu livro TheInmates are Running the Asylum.Alan Cooper é também conhecido porpai do Visual Basic e criador dalinguagem “Ruby”.
  24. 24. PERSONASFerramenta de apoio a decisãoQuem 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. 25. CRIAÇÃO DE PERSONASPasso 1: Identificar variáveis comportamentais e demográficasPasso 2: Mapear entrevistados nas variáveisPasso 3: Identificar principais padrões de comportamentoPasso 4: Listar características e objetivos relevantesPasso 5: Checar todo o conjunto de personas e elminiar redundânciasPasso 6: Desenvolver a narrativaPasso 7: Determinar tipos de personas
  26. 26. TIPOS DE PERSONASPrimárias Secundárias SuplementaresClientes Servidas Negativas
  27. 27. EXEMPLO DE PERSONA
  28. 28. MODELANDO E IDENTIFICANDO REQUISITOSFerramentas Descrição Síntese de requisitosMapas 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. sCená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. 29. REQUISITOS - DICAEnvolver um QA ou Tester na etapa demodelagem e identificação derequisitos, sendo que o mesmo nestaetapa já pode dar início adocumentação de regras e aformatação de testes automatizados*.* Cucumber (utilizado para a automatização de testesde aceitação na Locaweb)
  30. 30. PADRÕES E PRINCÍPIOSDO 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. 31. PRINCÍPIOS DE DESIGN DE INTERAÇÃO10 Heurísticas de NielsenDiálogos simples e naturais (estética e desing Saídas claramente marcadas (liberdade eminimalista) 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ácilusuário (reconhecimento em vez de reconhecimento, diagnóstico e recuperação dememorizaçã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. 32. PRINCÍPIOS DE DESIGN DE INTERAÇÃOOutros princípios para a criação de interfaces eficazesApresente as etapas do processoFaça uma navegação clara e eficienteTítulo das páginas reforça a navegação e orienta o usuárioUse botões para ações e links para navegaçãoSepare 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 relacionadosUtilize interações comuns e já comprovadasMantenha a conexão entre design visual e de interaçãoMenos é maisAs melhores interfaces devem ser quase “invisíveis”
  33. 33. PADRÕES DE DESIGN DE INTERAÇÃOOrganização hierárquica Padrão de Interação Padrão de InteraçãoPostural Postural Estrutural Postura TransitóriaEstrutural 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. 34. DOS REQUISITOS AO DESIGN SKETCHESBig pictureNavegação Áreas Interação
  35. 35. DOS REQUISITOS AO DESIGN WIREFRAMESDetalhamento Navegação Áreas Interação Fluxos Elementos de interface Conteúdos
  36. 36. DOS REQUISITOS AO DESIGN DESIGN VISUALProximidade Contraste RepetiçãoAlinhamento Cores Tipografia
  37. 37. DOS REQUISITOS AO DESIGN PROTÓTIPOSBAIXA FIDELIDADE ALTA FIDELIDADE FUNCIONAL E NÃO FUNCIONAL
  38. 38. DOS REQUISITOS AO DESIGN IMPLEMENTAÇÃO apresentaçãoHTML / CSS estruturajavascript comportamento
  39. 39. DOS REQUISITOS AO DESIGN TESTE DE USABILIDADEObjetivo é observar usuários reaisusando o produto para descobrirproblemas e pontos de melhoria.Pode ser realizado comprotótipos ou aplicações, emdesenvolvimento ou já disponíveisno mercado.Medem desempenho, precisão,lembrança e reposta emocional.
  40. 40. TESTE DE USABILIDADE - DICAEnvolver os designers nos testes deforma que haja a possibilidade deconsolidação de informações obtidaspara uma identificação mais rápida detudo o que precisa ser revisto eajustado no design do produto.
  41. 41. Mourylise Heymer mheymer@gmail.com www.ungarbage.com
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×