Design de Interação, Experiência do Usuário e Usabilidade - 2010
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,520 views

 

Statistics

Views

Total Views
3,520
Views on SlideShare
3,518
Embed Views
2

Actions

Likes
9
Downloads
126
Comments
0

2 Embeds 2

https://www.linkedin.com 1
http://www.linkedin.com 1

Accessibility

Categories

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

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

  • 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, 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.
  • 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.
  • 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 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.
  • SUPERFÍCIE ESQUELETO ESTRUTURA ESCOPO ESTRATÉGIAwww.jjg.net/elements/pdf/elements.pdf
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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)
  • 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
  • COMO DESENVOLVERUM SOFTWARE DE SUCESSO
  • 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
  • PROCESSOS DE UX NO SCRUM Conventional Product Development Process The Silicon Valley Product Group (SVPG) - www.svpg.com
  • PROCESSOS DE UX NO SCRUMSprint 0 Agile / Scrum Product Development Process The Silicon Valley Product Group (SVPG) - www.svpg.com
  • UX NO SCRUM - DICA ESTRATÉGIA E ESCOPO2 SPRINTS a frente do desenvolvimentoESTRUTURA, ESQUELETO E SUPERFICIE1 SPRINT a frente do desenvolvimento
  • 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.
  • 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
  • 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
  • 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
  • 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”.
  • 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
  • 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
  • TIPOS DE PERSONASPrimárias Secundárias SuplementaresClientes Servidas Negativas
  • EXEMPLO DE PERSONA
  • 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.
  • 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)
  • 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.
  • 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)
  • 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”
  • 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
  • DOS REQUISITOS AO DESIGN SKETCHESBig pictureNavegação Áreas Interação
  • DOS REQUISITOS AO DESIGN WIREFRAMESDetalhamento Navegação Áreas Interação Fluxos Elementos de interface Conteúdos
  • DOS REQUISITOS AO DESIGN DESIGN VISUALProximidade Contraste RepetiçãoAlinhamento Cores Tipografia
  • DOS REQUISITOS AO DESIGN PROTÓTIPOSBAIXA FIDELIDADE ALTA FIDELIDADE FUNCIONAL E NÃO FUNCIONAL
  • 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 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.
  • 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.
  • Mourylise Heymer mheymer@gmail.com www.ungarbage.com