O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

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

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Design e Usabilidade na Web
Design e Usabilidade na Web
Carregando em…3
×

Confira estes a seguir

1 de 41 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Design de Interação, Experiência do Usuário e Usabilidade - 2010 (20)

Mais recentes (20)

Anúncio

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Á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. 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. 4. http://userexperienceproject.blogspot.com
  5. 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. 6. SUPERFÍCIE ESQUELETO ESTRUTURA ESCOPO ESTRATÉGIA www.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ÇÃ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. 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. 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. 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. 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 DESENVOLVER UM SOFTWARE DE SUCESSO
  15. 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. 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 SCRUM Sprint 0 Agile / Scrum Product Development Process The Silicon Valley Product Group (SVPG) - www.svpg.com
  18. 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. 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. 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. 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. 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. 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. 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. 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. 26. TIPOS DE PERSONAS Primárias Secundárias Suplementares Clientes Servidas Negativas
  27. 27. EXEMPLO DE PERSONA
  28. 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. 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. 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. 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. 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. 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. 34. DOS REQUISITOS AO DESIGN SKETCHES Big picture Navegação Áreas Interação
  35. 35. DOS REQUISITOS AO DESIGN WIREFRAMES Detalhamento Navegação Áreas Interação Fluxos Elementos de interface Conteúdos
  36. 36. DOS REQUISITOS AO DESIGN DESIGN VISUAL Proximidade Contraste Repetição Alinhamento Cores Tipografia
  37. 37. DOS REQUISITOS AO DESIGN PROTÓTIPOS BAIXA FIDELIDADE ALTA FIDELIDADE FUNCIONAL E NÃO FUNCIONAL
  38. 38. DOS REQUISITOS AO DESIGN IMPLEMENTAÇÃO apresentação HTML / CSS estrutura javascript comportamento
  39. 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. 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. 41. Mourylise Heymer mheymer@gmail.com www.ungarbage.com

×