• Save
Projeto da experiência do usuário em produtos digitais e a importância da avaliação de usabilidade nesse processo
Upcoming SlideShare
Loading in...5
×
 

Projeto da experiência do usuário em produtos digitais e a importância da avaliação de usabilidade nesse processo

on

  • 1,970 views

Aula inaugural da pós-graduação em ergodesign de interfaces: usabilidade e arquitetura de informação. Mais informações em ...

Aula inaugural da pós-graduação em ergodesign de interfaces: usabilidade e arquitetura de informação. Mais informações em http://www.eduardobrandao.com/apresentacoes/projeto-da-experiencia-do-usuario-em-produtos-digitais-e-a-importancia-da-avaliacao-de-usabilidade-nesse-processo/

Statistics

Views

Total Views
1,970
Views on SlideShare
1,873
Embed Views
97

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 97

http://www.eduardobrandao.com 97

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

Projeto da experiência do usuário em produtos digitais e a importância da avaliação de usabilidade nesse processo Projeto da experiência do usuário em produtos digitais e a importância da avaliação de usabilidade nesse processo Presentation Transcript

  • PUC-Rio » Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de InformaçãoProjeto da experiência do usuário em produtos digitais e a importância da avaliação de usabilidade nesse processo Eduardo Rangel Brandão, M.Sc. 14 de abril de 2012
  • Olá, muito prazer! :-)
  • Meu nome é Eduardo...
  • • Doutorando em design: ergonomia e usabilidade da interação humano-computador (desde 2011).• Mestre em design: ergonomia e usabilidade da interação humano-computador (2006).• Especialista em ergonomia e usabilidade (2004).• Bacharel em desenho industrial: comunicação visual (2003).• Bacharel em desenho industrial: projeto de produto (1997).
  • Experiência docente Professor em cursos de pós-graduação,em disciplinas correlatas a arquitetura de informação, design de interfaces, ergonomia, usabilidade e metodologia de pesquisa Desde 2005 2008 - 2011 2007 - 2008 2006 - 2009
  • Experiência profissional Desde 2008 2006 - 2008 2005 AI senior (2008 - 2010) Arquiteto de informação senior Pesquisador da FAPERJe coordenador de UX da equipe de novas mídias (desde 2011) Desde 2004 2000 - 2003 1999 - 2000 Pesquisador do Laboratório Designer de interface Designer de interface de Ergonomia e Usabilidade da PUC-Rio 1999 1999 1995 - 1997 Designer de interface Designer de interface Designer de interface
  • Principais clientes atendidos
  • Projeto da experiênciaO que é ergonomia?O que é design centrado no usuário?O que é usabilidade? do usuário emO que é interação humano-computador? produtos digitais e aO que é ergodesign?Bad human factors design importância daO que é UX? avaliação deO projeto da experiência do usuárioTécnicas de avaliação de usabilidade usabilidade nesseConclusão processo
  • Projeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo O que é ergonomia?
  • Por quê falar de ergonomia nesse curso? PUC-Rio
  • Por quê falar de ergonomia nesse curso? PUC-RioDepartamento de Artes & Design
  • Por quê falar de ergonomia nesse curso? PUC-RioDepartamento de Artes & Design LEUI Laboratório de Ergonomia e Usabilidade de Interfaces em Sistemas Humano-Tecnologia
  • O que é ergonomia?Definição de ergonomiaA origem da palavra ergonomia compreende os termos gregos:• Ergo (trabalho).• Nomos (normas, regras).É o estudo científico que objetiva adaptar o trabalho aotrabalhador e o produto ao usuário.Nos Estados Unidos e Canadá, utiliza-se a expressão “humanfactors” (fatores humanos). No resto do mundo emprega-se otermo “ergonomic”.
  • O que é ergonomia?Definição de ergonomiaProjeto ergonômico é a aplicação da informação ergonômica aodesign (projeto) de:• Ferramentas e máquinas.• Tarefas e ambientes.O objetivo é promover o uso seguro, confortável e efetivo.
  • Origem da ergonomia A ergonomia tem suas origens na II Guerra Mundial, quando se agrava o conflito entre o homem e a máquina. Engenheiros juntaram-se aos psicólogos e fisiólogospara adequar as inovações tecnológicas às características humanas. * Imagem retirada da internet (através da busca por imagens do Google)
  • “Coloque-se no lugar de um pilotoque já voou centenas de horas numB-25 e, ao aterrissar seu avião C-47,verifica a necessidade de maiorrotação nos motores. Por umaquestão de hábito, a mão dirige-se aolugar de sempre, pois centenas dehoras de experiência o ensinaram afazer isso e sempre deu certo...”* Fonte: site “LEUI - Laboratório de Ergonomia e Usabilidade de Interfaces em Sistemas Humano-Tecnologia” - <http://wwwusers.rdc.puc-rio.br/leui/Fhistorico.html>
  • “Mas, grande surpresa, o comandonão é nesse lugar!”* Fonte: site “LEUI - Laboratório de Ergonomia e Usabilidade de Interfaces em Sistemas Humano-Tecnologia” - <http://wwwusers.rdc.puc-rio.br/leui/Fhistorico.html>
  • Avião Esquerda Centro Direita B-25 Afogador Hélice Mistura C-47 Hélice Mistura Afogador C-82 Mistura Afogador Hélice* Fonte: site “LEUI - Laboratório de Ergonomia e Usabilidade de Interfaces em Sistemas Humano-Tecnologia” - <http://wwwusers.rdc.puc-rio.br/leui/Fhistorico.html>
  • #fail #porra_aviao* Imagem retirada da internet (através da busca por imagens do Google)
  • Não há padrão entre a disposição dos números do teclado de um telefone e de uma calculadora
  • Telas incoerentes do site de uma mesma instituição A falta de padrão é visualmente desagradável para os usuários, além de gerar confusão. As telas parecem um conjunto de páginas remendadas (algumas bem projetadas, outras desastrosas), como meras partes de um sistema que não funciona.* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton
  • A falta de padronização, mesmo que em pequenos detalhes, pode causar rupturas e gerar confusão * Imagem retirada da internet (através da busca por imagens do Google)
  • O que é designProjeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo centrado no usuário?
  • O que é design centrado no usuário?Definição de design centrado no usuárioSe um objeto, ou ambiente, é projetado para o uso humano, seudesign (projeto) deve se basear nas características (físicas ementais) do seu usuário.O objetivo é alcançar a melhor integração entre o produto e osseus usuários, no contexto do trabalho realizado.
  • O que é design centrado no usuário?Definição de design centrado no usuárioAs mudanças e inovações propostas surgem a partir:• Das variáveis fisiológicas.• Das variáveis psicológicas• Das variáveis cognitivas.• Dos critérios que privilegiam o homem.
  • Design centrado no usuário Requisitos ergonômicosMaximizar Minimizar OtimizarConforto Constrangimentos Desempenho da tarefaSatisfação Custos humanos RendimentoBem-estar Carga cognitiva do trabalhoSegurança Carga física Produtividade Carga psíquica * Fonte: livro “Ergonomia: conceitos e aplicações”, de Anamaria de Moraes e Cláudia Mont’Alvão
  • O que é design centrado no usuário?Design centrado no usuário• Antropometria e biomecânica: fornecem as informações sobre as dimensões e os movimentos do corpo humano.• Anatomia e fisiologia: fornecem os dados sobre a estrutura e o funcionamento do corpo humano.• Psicologia: fornece os parâmetros do comportamento humano.• Medicina do trabalho: fornece os dados de condições de trabalho que podem ser prejudiciais ao organismo humano.
  • Não por acaso, a ergonomia tem feito referência direta às “proporções do corpo humano” de Da Vinci* Fonte: palestra “Design, usabilidade e padrões de interface”, ministrada por Carlos Alberto Bahiana e Eduardo Rangel Brandão
  • Não por acaso, a ergonomia tem feito referência direta às “proporções do corpo humano” de Da VinciHomem Vitruviano: cânone das proporçõesmatemáticas do corpo humano.Idéias sobre as proporções humanas definiram asreferências estéticas de simetria e proporção nomundo todo. * Fonte: palestra “Design, usabilidade e padrões de interface”, ministrada por Carlos Alberto Bahiana e Eduardo Rangel Brandão
  • Projeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo O que é usabilidade?
  • O que é usabilidade?Definição de usabilidadeUsabilidade significa facilidade de uso, ou uso “amigável”.A usabilidade ocorre quando o objeto, produto ouequipamento, considera as características e necessidades dousuário, resultando em operações eficientes e satisfatórias.A ISO 9241-11 (International Standards Organisation ouOrganização Internacional de Padrões), define usabilidade comoa eficácia, a eficiência e a satisfação com que usuáriosconseguem alcançar objetivos específicos em ambientesparticulares.
  • O que é usabilidade?Definição de usabilidadeÉ possível encontrar uma versão da ISO 9241-11 traduzida paraa língua portuguesa através da NBR 9241 (requisitosergonômicos para trabalho de escritórios com computadores),parte 11 (orientações sobre usabilidade) da ABNT - AssociaçãoBrasileira de Normas e Técnicas.
  • NBR 9241, parte 11, da ABNT - Associação Brasileira de Normas e Técnicas * Fonte: palestra “Design, usabilidade e padrões de interface”, ministrada por Carlos Alberto Bahiana e Eduardo Rangel Brandão
  • EficáciaDistinção entre uma tarefa bem-sucedida ou não (usuário consegue completar a tarefa) e extensão com que um objetivo é alcançado (usuário consegue produzir resultados acima do objetivo esperado) * Imagens retiradas da internet (através da busca por imagens do Google)
  • Eficiência Tempo utilizado para completar a tarefa e quantidade de erros cometidos antes de completar a tarefa,ou seja, esforço necessário para alcançar um objetivo ou uma tarefa (quanto menor este esforço, maior será a eficiência) * Imagens retiradas da internet (através da busca por imagens do Google)
  • Satisfação Conforto que os usuários sentem ao utilizar um produto eo quanto este produto é aceito pelos usuários, em termos de alcance de objetivos * Imagens retiradas do site “Quem” - <http://revistaquem.globo.com/Revista/Quem/0,,GF80159-17290,00.html#fotogaleria=1>
  • O que é interaçãoProjeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo humano-computador?
  • O que é interação humano-computador?Definição de interação humano-compuatdorA ergonomia é a disciplina há mais tempo associada ao estudoda interação humano-computador: desde a década de 60.Os estudos sobre o diálogo humano-computador buscam:• Economia de tempo.• Diminuição da carga cognitiva.• Rapidez de decisões.
  • O que é interação humano-computador?Definição de interação humano-compuatdorEmbora a interação humano-computador seja umconhecimento multidisciplinar, nem todas as disciplinasparticipam igualmente da área de IHC.Pode-se verificar claramente a importância da ergonomia, queaparece em todos os momentos da pesquisa e do projeto.
  • Pesquisa sobre Pesquisa sobre Pesquisa sobre o Pesquisa ao nível Pesquisa sobre o hardware/software adequação de impacto da tarefa design interacional modelos organizacional Matemática √ Engenharia de software √ √ Inteligência artificial √ Linguística computacional √ √ Ciência cognitiva √ √ √ √ Psicologia cognitiva √ √ Psicologia organizacional √ √ Psicologia social √ √ Sociologia √ √ Ergonomia √ √ √ √ √* Fonte: artigo “Ergonomia: usabilidade de interfaces, interação humano-computador, arquitetura da informação”, de Anamaria de Moraes
  • IHC: sistema operacional* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: software
  • IHC: software
  • IHC: software
  • IHC: software* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: game* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: game* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: game* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: monitor* Foto de Eduardo Rangel Brandão
  • IHC: controle de tráfego aéreo * Foto de Eduardo Rangel Brandão
  • IHC: controle de tráfego aéreo* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: controle meteorológico* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: painel sinótico* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: cockpit* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: cockpit* Imagem retirada da internet (através da busca por imagens do Google)
  • IHC: site
  • IHC: aplicativo* Fonte: artigo “Metamirror & the future of TV” - <http://www.designbynotion.com/metamirror-next-generation-tv/>
  • E aqui, existe interação humano-computador? * Foto de Eduardo Rangel Brandão
  • E aqui, existe interação humano-computador? * Imagem retirada da internet (através da busca por imagens do Google)
  • E aqui, existe interação humano-computador?No caso de mostradores e painéis analógicos, não existe interação humano-computador * Imagem retirada da internet (através da busca por imagens do Google)
  • Projeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo O que é ergodesign?
  • O que é ergodesign?Definição de ergodesignO design deve proporcionar:• Produtos atrativos.• Produtos funcionais.• Produtos que representam uma contribuição cultural.• Produtos que refletem a sua época.
  • O que é ergodesign?Definição de ergodesignQual o resultado da junção “Ergonomia” mais “Design”?Um produto atrativo e amigável, que contribui para a qualidadede vida, aumenta o bem-estar e o desempenho.
  • Origens do design e da ergonomia: sua abrangência em relação às suas respectivas áreas específicas* Fonte: dissertação de mestrado “Publicidade on-line, ergonomia e usabilidade: o efeito de seis tipos de banner no processo humano de visualização do formato do anúncio na tela do computador e de lembrança da sua mensagem”, de Eduardo Rangel Brandão
  • Bad human factorsProjeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo design
  • “O propósito de uma interface écomunicar-se com o usuário. Noentanto, o projetista desta interface eo usuário pensam de maneirasdistintas. Por isso é tão difícil preverquais decisões de projeto terão efeitosobre o comportamento do usuário.”* Fonte: livro “Improving your human-computer interface: a pratical technique”, de Andrew Monk, Peter Wright, Jeanne Haber e Lora Davenport
  • “Nem sempre o que agrada aestética do designer é bom para ousuário real da interface.”* Fonte: livro “Improving your human-computer interface: a pratical technique”, de Andrew Monk, Peter Wright, Jeanne Haber e Lora Davenport
  • Bad human factors designBad human factors designA interação entre as máquinas e os seus usuários raramente foiuma consideração a priori.Na maioria dos casos, as máquinas excedem ou não se adaptamàs características e capacidades humanas.
  • Um computador, por exemplo, será quase inútil se o usuárionão puder interpretar as informações apresentadas na tela e decidir a tempo #fail * Imagem retirada da internet (através da busca por imagens do Google)
  • Bad human factors designBad human factors designSomam-se a este fato:• As muitas informações a selecionar.• As variáveis a interpretar.• As várias possibilidades de solução.• Tudo em pouco tempo e envolvendo decisões que são sempre urgentes.
  • Bad human factors design Homem x Máquina Problemas Custos humanos Problemas de Comprometimento da tarefa desempenho da produtividade e da qualidade• Fadiga • Acidentes• Doenças profissionais • Erros excessivos • Baixa qualidade dos• Lesões temporárias • Paradas não produtos• Lesões permanentes controladas • Desperdício de• Mutilações • Lentidão matéria-prima• Mortes • Danificação de máquinas • Má conservação de máquinas • Decrécimo na produção * Fonte: livro “Ergonomia: conceitos e aplicações”, de Anamaria de Moraes e Cláudia Mont’Alvão
  • Coisas que não funcionam da maneira que você espera... Isto é um tanque ou um mictório? * Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que não funcionam da maneira que você espera... Isto é um tanque ou um mictório? * Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que não funcionam da maneira que você espera... Isto é um tanque ou um mictório? * Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que não funcionam da maneira que você espera... A geladeira abre para qual lado? * Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que não funcionam da maneira que você espera... Como eu abro a gaveta? * Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas diferentes em embalagens tão parecidas...Qual é o shampoo e qual é a espuma de barbear? * Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas diferentes em embalagens tão parecidas... Qual dosagem eu devo tomar? * Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são difíceis de lembrar... Qual é o lado da tampa de combustível?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são difíceis de lembrar... Qual deles liga o ventilador?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que demoram... Que horas são?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que demoram... Que horas são?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são mal posicionadas... Será que eu vou me queimar?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são mal posicionadas... Como eu escuto o CD?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são mal posicionadas... Onde eu conecto o meu mouse?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são escondidas... Como eu chego no meu andar?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são conflitantes... Como eu abaixo o volume?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que pioram com o tempo...Beirada da tampa não serve para segurar...* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... Qual botão eu aperto?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... O que significam esses símbolos?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... Onde está o velocímetro e o conta-giros?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... Quanto é a gasolina?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... Qual botão eu aperto para subir?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... Para qual lado eu abro a porta?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... Leia rápido!* Fonte: palestra “Exemplos de falta de ergonomia”, de Carlos Alberto Bahiana
  • Coisas que são confusas... Leia rápido!* Fonte: palestra “Exemplos de falta de ergonomia”, de Carlos Alberto Bahiana
  • Coisas que são confusas...Me encontra naquela loja... Como se chama mesmo? * Fonte: palestra “Exemplos de falta de ergonomia”, de Carlos Alberto Bahiana
  • Coisas que são confusas...Onde fica o banheiro masculino? * Foto de Eduardo Rangel Brandão
  • Coisas que são confusas... Somente para deficientes?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... Ai, meu astigmatismo!* Fonte: palestra “Exemplos de falta de ergonomia”, de Carlos Alberto Bahiana
  • Coisas que são confusas... Qual é o meu número de identificação?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... Onde eu estacionei o meu carro?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas... “Vá pela direita” ou “Não vá pela direita”?* Imagem retirada do site “Bad Human Factors Designs” - <http://www.baddesigns.com>
  • Coisas que são confusas...“Vá pela direita” ou “Não vá pela direita”? * Imagem retirada da internet (através da busca por imagens do Google)
  • Bad human factors design Homem x Máquina Problemas Custos humanos Problemas de Comprometimento da tarefa desempenho da produtividade e da qualidade* Imagens retiradas do site “Quem” - <http://revistaquem.globo.com/Revista/Quem/0,,GF80159-17290,00.html#fotogaleria=1>
  • Bad human factors design Daí a importância da ergonomia... Homem x Máquina Problemas Custos humanos Problemas de Comprometimento da tarefa desempenho da produtividade e da qualidade* Imagens retiradas do site “Quem” - <http://revistaquem.globo.com/Revista/Quem/0,,GF80159-17290,00.html#fotogaleria=1>
  • Projeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo O que é UX?
  • “As pessoas buscam experiênciasenriquecedoras...”
  • ...mas isto é uma experiência enriquecedora? Essa novela passa em qual canal?“Assista ‘Vamp’ todos os dias antes do crepúsculo. Segunda a sexta, às 15h30” * Foto de Eduardo Rangel Brandão
  • ...mas isto é uma experiência enriquecedora? Já tem quanto tempo de jogo? * Foto de Eduardo Rangel Brandão
  • ...mas isto é uma experiência enriquecedora? Já tem quanto tempo de jogo? * Foto de Eduardo Rangel Brandão
  • Por quê as coisas não são mais simples?* Fonte: Designing interactions, de Bill Moggridge <http://www.designinginteractions.com/book>
  • Por quê as coisas não são mais simples? Um produto Apple Um produto Google O produto da sua empresa* Fonte: artigo “Simplicity”, de Eric Burke - <http://stuffthathappens.com/blog/2008/03/05/simplicity/>
  • “Projetar tendo a experiênciahumana como um resultado explícitoe o engajamento humano como umobjetivo explícito pode ser praticadoem qualquer meio e em toda amídia.”* Fonte: palestra “The future is already here - three trends in IA”, de Erin Malone <http://www.slideshare.net/emalone/the-future-is-already-here-three-trends-in-ia>
  • Isso pode ser uma experiência enriquecedora! Memorial da Guerra do Vietnã: listagem não-convencional dos nomes dos soldados* Fonte: artigo “Memorial da guerra do Vietnã, arquitetura da informação evocando emoções”, de Koji Pereira - <http://www.digfordesign.com/2009/memorial-da-guerra-do-vietna/>
  • Isso pode ser uma experiência enriquecedora! Restaurante Bubba Gump * Foto de Eduardo Rangel Brandão
  • Isso pode ser uma experiência enriquecedora! Restaurante Johnny Rockets * Foto de Eduardo Rangel Brandão
  • Isso pode ser uma experiência enriquecedora! Escultura de toalha na cabine do navio * Foto de Eduardo Rangel Brandão
  • UX =User eXperience
  • UX =User eXperience
  • O que é UX?UX (User eXperience)• Conjunto de experiências e satisfação que um usuário sente ao utilizar um produto. • Uma boa UX deixa as pessoas felizes e torna os negócios mais bem sucedidos. • Quando a UX é ignorada, os resultados podem ser catastróficos!
  • “Sabe quando você usa uma interfacee fica confuso, perdido? Meu trabalhoé fazer com que isso não aconteça!Eu decido quais telas existem e o queacontece quando você clica emalguma coisa.”* Fonte: Arquitetura de informação: onde estamos, de onde viemos e pra onde vamos?, de Carolina Leslie e Luciana Cattony <http://www.slideshare.net/lulileslie/arquitetura-de-informao-165537>
  • Diferença entre “Interface design” e “UX design”...* Fonte: Whats the difference between UI design and UX design?, Xianhang Zhang <http://www.quora.com/Product-Design/Whats-the-difference-between-UI-Design-and-UX-Design-1>
  • Diferença entre “Interface design” e “UX design”... Se um homem vê a mosca (desenhada na porcelana), ele mira nela, reduzindo em 80% o derramamento de “líquido” ;-)* Fonte: Whats the difference between UI design and UX design?, Xianhang Zhang <http://www.quora.com/Product-Design/Whats-the-difference-between-UI-Design-and-UX-Design-1>
  • O projeto da experiência doProjeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo usuário
  • Projetar a UX não é apenas uma etapa, é todo o processo de criação do produto Planejar + Criar + Executar Arquitetura de InformaçãoUX = Conteúdo + Tecnologia Design de Interfaces * Fonte: artigo “O futuro da arquitetura de informação”, de Rogério Pereira - <http://webinsider.uol.com.br/2009/07/14/o-futuro-da-arquitetura-de-informacao/>
  • O processo de criação de produtos digitais necessita de algumas etapas bem definidasMonte uma Faça muitos Pense como se Trabalhe com Desenvolva Escolha as Compartilhe equipe brainstorms fosse o usuário sketches alternativas melhores idéias com a equipe
  • A metodologia de projeto é mais ágilWaterfallWashing machine
  • A metodologia de projeto é mais ágil Waterfall Washing machine• Processo orientado à página/tela. • Processo orientado à funcionalidade.• Fases de projeto isoladas em equipes/times • O caso de uso é construído através da separados. colaboração de profissionais de diferentes áreas.• Documentação muito detalhada. • Documentação pouco detalhada.• Pouca flexibilidade. • Muita flexibilidade. • Muita comunicação/diálogo entre os membros da equipe/time.
  • Ágil: processo de desenvolvimento incremental e iterativo
  • Ágil: processo de desenvolvimento incremental e iterativo
  • O projeto é construído de forma incremental: uma parte de cada vez1 2 3 4 5
  • O projeto é construído de forma iterativa: começa com uma versão rudimentar, aprimorada aos poucos1 2 3 4 5
  • Cada membro da equipe tem perfil para trabalhar de forma híbrida + + = UX Designer Arquiteto de Designer de Programador informação interfaces
  • As equipes são menores, com profissionais mais experientes e multi-disciplinares Product owner Dupla de criação Programadores client-side e server-side
  • A dupla de criação tem papel fundamental no projeto da UX Product owner Arquiteto de informação Designer de interfaces Programadores client-side e server-side
  • A dupla de criação tem papel fundamental no projeto da UXArquiteto de informação Designer de interfaces• Define as estratégias do produto. • Definie a identidade visual do produto.• Projeta os sistemas de organização, • Define o grid da interface. navegação, rotulagem e busca. • Diagrama as telas da interface.• Define as funcionalidades da interface. • Aplica técnicas para direcionar o olhar• Define as regras de interação entre o dos usuários para os elementos mais usuário e a interface. importantes em cada tela.• Tem uma abordagem macro (visão • Tem uma abordagem focada em cada 360º do projeto). tela da interface.
  • Tradicionalmente, arquitetos e designers cuidam das fases de criação da interface * Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  • Tradicionalmente, arquitetos e designers cuidam das fases de criação da interface A execução do projeto é realizada “de dentro para fora”... * Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  • Tradicionalmente, arquitetos e designers cuidam das fases de criação da interface • Levantamento do tipo da informação que será incluída. • Levantamento das características do produto. • Detalhamento do conteúdo. * Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  • Tradicionalmente, arquitetos e designers cuidam das fases de criação da interface • Organização do conteúdo. • Organização da estrutura da interface. • Categorização do conteúdo e suas características. * Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  • Tradicionalmente, arquitetos e designers cuidam das fases de criação da interface • Definição dos elementos de auxílio para a navegação e mecanismos de busca. • Definição das nomenclaturas e rótulos. * Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  • Tradicionalmente, arquitetos e designers cuidam das fases de criação da interface • Padrões de desenho de páginas. • Resolução de monitor • Utilização de imagens • Aplicação de ícones, cores, tipografia e diagramação da tela. * Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  • Mas a interface é apenas a “ponta do iceberg” Fase do projeto Interface onde percebemos a UX Site-maps Wireframes Meta-dados Esquemas de classificação Estratégia Plano de projeto Usuários Conteúdo Contexto Necessidades Estrutura Cultura Comportamentos Significado Tecnologia UXberg Etapas do projeto da UX* Fonte: Peter Morville (IA Summit 2008) citado na palestra “Agile user experience”, de Rafael Rez de Oliveira - <http://www.slideshare.net/logicadigital/agile-user-experience-presentation>
  • Esse profissional faz a “ponte” entre produto, tecnologia e pessoasResultado Pessoas Experiência do usuárioFunção Tecnologia Design de interface Arquitetura deEstratégia Produto informacão Projeto * Fonte: artigo “The future of web design”, de Asif R Naqvi - <http://www.livingdesign.info/2010/06/29/the-future-of-web-design/>
  • Portanto, o UX designer é a interface entre as diversas áreas da empresa e o usuário Marketing TI Usuário Progra- UX Cliente mador Designer Editor Comercial Gerente
  • Como o ux designer trabalhaA melhor ferramenta para o projeto da UX * Imagem retirada da internet (através da busca por imagens do Google)
  • Como o ux designer trabalha Listas de funcionalidades * Foto de Eduardo Rangel Brandão
  • Como o ux designer trabalha Diagramas de navegação
  • Como o ux designer trabalha Sketch * Foto de Eduardo Rangel Brandão
  • Como o ux designer trabalha Sketches * Foto de Eduardo Rangel Brandão
  • Como o ux designer trabalha Descrição funcional de telas
  • Como o ux designer trabalha Exemplos de entregáveis
  • Etapas do processo de criação de produtos digitais Análise Definição Realização Reuniões Apresentação do briefing do público-alvo de benchmarks de brainstorm de conceitos Listagem e Sist. de organização, Inventário Wireframes Descrição priorização de navegação, rotulagem Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Técnicas de avaliaçãoProjeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo de usabilidade
  • “Especialistas possuem uma fortetendência para projetar para simesmos (de acordo com suascrenças), devido ao seu backgroundespecializado (diferente dos usuários)e sua visão particular. Este fato poderesultar em problemas. Por isso, é tãoimportante envolver usuários noprocesso de projeto.”* Fonte: livro “Improving your human-computer interface: a pratical technique”, de Andrew Monk, Peter Wright, Jeanne Haber e Lora Davenport
  • “Em algumas empresas, o termo‘avaliação’ significa apenascaracterizar o produto como bom ouruim. Mas, isto não basta! Paragarantir a qualidade de umainterface, é preciso utilizar um métodode avaliação capaz de fornecerfeedback dos usuários sobre como oprojeto pode ser melhorado.”* Fonte: livro “Improving your human-computer interface: a pratical technique”, de Andrew Monk, Peter Wright, Jeanne Haber e Lora Davenport
  • Técnicas de avaliação de usabilidadeTécnicas de avaliação de usabilidadeCada método para a avaliação de usabilidade possui uma sériede propriedades que fornecem certas vantagens oudesvantagens.
  • Técnicas de avaliação de usabilidadeTécnicas de avaliação de usabilidadeIsto inclui, por exemplo:• O tempo.• O esforço.• O nível de habilidade/conhecimento para a utilizar a técnica.• As facilidades e equipamentos necessários para a condução eficaz da técnica.• O número mínimo de participantes para reunir informações úteis.
  • Técnicas de avaliação de usabilidadeTécnicas empíricasA maioria das técnicas de avaliação de interfaces envolve autilização de participantes. Tais técnicas são conhecidas comoempíricas.Em algumas interfaces, os usuários irão deparar-se com esforçosnão previstos.Neste momento, as técnicas que envolvem participantes terãoum valor adicional, promovendo a descoberta de problemas deusabilidade até então desconhecidos.
  • Técnicas empíricas 5. 1. 2. 3. 4. Simulações Observação Verbalização Observação Inquirição em assistemática da tarefa sistemática laboratórioObservações não- Pelos próprios Observações Questionários e Testes sobre aspectosestruturadas das usuários estruturadas entrevistas da interfaceatividades do usuário,priorizando oentendimento datarefa, os mecanismosde seleção deinformações, deresolução deproblemas e detomadas de decisão * Fonte: livro “Ergonomia: conceitos e aplicações”, de Anamaria de Moraes e Cláudia Mont’Alvão
  • Técnicas de avaliação de usabilidadeTécnicas empíricasAs principais técnicas são:• Análise da tarefa. • Experimentos controlados.• Avaliação cooperativa. • Grupo de foco.• Card sorting. • Observações de campo.• Entrevistas e questionários.
  • Técnicas de avaliação de usabilidadeTécnicas não-empíricasAlgumas técnicas de avaliação de usabilidade não utilizamparticipantes. Tais técnicas são conhecidos como não-empíricas.O próprio especialista no projeto de interfaces fornece umaopinião (como perito) sobre as telas analisadas, através dechecagens estruturadas.Também existem as circunstâncias onde não há a possibilidadede envolvimento dos participantes. Isto ocorre nos casos decaráter confidencial da interface, ou de dificuldade paraencontrar usuários com características apropriadas (público-alvorestrito).
  • Técnicas de avaliação de usabilidadeTécnicas não-empíricasAs principais técnicas são:• Avaliação heurística.• Avaliação de perito.• Listas de verificação de propriedades.• Percurso cognitivo.
  • Etapas de pesquisas com os usuários e/ou avaliações de usabilidade Análise Definição Realização Reuniões Apresentação do briefing do público-alvo de benchmarks de brainstorm de conceitos Listagem e Sist. de organização, Inventário Wireframes Descrição priorização de navegação, rotulagem Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Etapas de pesquisas com os usuários e/ou avaliações de usabilidade Entrevista Grupo de foco Observações de campo Questionário Análise Definição Realização Reuniões Apresentação do briefing do público-alvo de benchmarks de brainstorm de conceitos Listagem e Sist. de organização, Inventário Wireframes Descrição priorização de navegação, rotulagem Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Etapas de pesquisas com os usuários e/ou avaliações de usabilidade Análise da tarefa Entrevista Grupo de foco Questionário Análise Definição Realização Reuniões Apresentação do briefing do público-alvo de benchmarks de brainstorm de conceitos Listagem e Sist. de organização, Inventário Wireframes Descrição priorização de navegação, rotulagem Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Etapas de pesquisas com os usuários e/ou avaliações de usabilidade Análise Definição Realização Reuniões Apresentação do briefing do público-alvo Card sorting de benchmarks de brainstorm de conceitos Listagem e Sist. de organização, Inventário Wireframes Descrição priorização de navegação, rotulagem Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Etapas de pesquisas com os usuários e/ou avaliações de usabilidade Avaliação de perito Análise Definição Realização Reuniões Apresentação do briefing do público-alvo de benchmarks Entrevistas de brainstorm de conceitos Grupo de foco Listagem e Sist. de organização, Inventário Wireframes Descrição priorização de navegação, rotulagem Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Etapas de pesquisas com os usuários e/ou avaliações de usabilidade Avaliação de perito Análise Definição Realização Reuniões Apresentação Entrevistas do briefing do público-alvo de benchmarks de brainstorm de conceitos Grupo de foco Listas de verificação Listagem e Sist. de organização, Inventário Wireframes Descrição priorização de navegação, rotulagem Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Etapas de pesquisas com os usuários e/ou avaliações de usabilidade Avaliação cooperativa Análise Definição Realização Reuniões Apresentação Avaliação heurística do briefing do público-alvo de benchmarks de brainstorm de conceitos Entrevistas Grupo de foco Listagem e Sist. de organização, Inventário Wireframes Descrição priorização de navegação, rotulagem Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Etapas de pesquisas com os usuários e/ou avaliações de usabilidade Análise Definição Realização Reuniões Apresentação do briefing do público-alvo de benchmarks de brainstorm de conceitos Listagem e Sist. de organização, Experimento controlado rotulagem Inventário priorização de navegação, Wireframes Descrição Layouts Implementação Validação de conteúdo e sketches funcional de telas funcionalidades e busca NovosMonitoramento releases
  • Exemplo: laboratórios de avaliação de usabilidade sala de observação sala de testes Monitorreproduzindo a tela do micro Câmera - tomada geral de testes da tela do computador e + do usuário (lado/ TV mostrando costas):o que a câmera registra, principalmente, está filmando o gestual e a interação do usuário com o micro (mouse, teclado, tela) Micro para testes Micro para Vídeo Mesa de som e gravação da controles navegação * Fonte: palestra “Teste de usabilidade: menus e navegação”, de Márcia Maia
  • Exemplo: laboratórios de avaliação de usabilidade Esquema clássico de laboratório de testes* Fonte: livro “Handbook of usability testing: how to plan, design, and conduct effective tests”, de Jeffrey Rubin e Dana Chisnell
  • Exemplo: laboratórios de avaliação de usabilidade Esquema simples de sala única* Fonte: livro “Handbook of usability testing: how to plan, design, and conduct effective tests”, de Jeffrey Rubin e Dana Chisnell
  • Exemplo: laboratórios de avaliação de usabilidade Esquema de sala única modificada* Fonte: livro “Handbook of usability testing: how to plan, design, and conduct effective tests”, de Jeffrey Rubin e Dana Chisnell
  • Exemplo: laboratórios de avaliação de usabilidade Esquema de observação eletrônica* Fonte: livro “Handbook of usability testing: how to plan, design, and conduct effective tests”, de Jeffrey Rubin e Dana Chisnell
  • Exemplo: outros ambientes de avaliação de usabilidade Quarto de casa: outros tipos de ambiente também possibilitama obtenção de boas respostas através de um custo trivial e acessível * Foto de Eduardo Rangel Brandão
  • Exemplo: outros ambientes de avaliação de usabilidade Quarto de casa: outros tipos de ambiente também possibilitama obtenção de boas respostas através de um custo trivial e acessível * Foto de Eduardo Rangel Brandão
  • Exemplo: outros ambientes de avaliação de usabilidade Quarto de casa: outros tipos de ambiente também possibilitama obtenção de boas respostas através de um custo trivial e acessível * Foto de Eduardo Rangel Brandão
  • Exemplo: experimento controladoQual banner proporciona as melhores taxas de visualização e lembrança da mensagem? * Fonte: dissertação de mestrado “Publicidade on-line, ergonomia e usabilidade: o efeito de seis tipos de banner no processo humano de visualização do formato do anúncio na tela do computador e de lembrança da sua mensagem”, de Eduardo Rangel Brandão
  • Exemplo: experimento controladoQual banner proporciona as melhores taxas de visualização e lembrança da mensagem? * Fonte: dissertação de mestrado “Publicidade on-line, ergonomia e usabilidade: o efeito de seis tipos de banner no processo humano de visualização do formato do anúncio na tela do computador e de lembrança da sua mensagem”, de Eduardo Rangel Brandão
  • Exemplo: experimento controladoQual banner proporciona as melhores taxas de visualização e lembrança da mensagem? * Fonte: dissertação de mestrado “Publicidade on-line, ergonomia e usabilidade: o efeito de seis tipos de banner no processo humano de visualização do formato do anúncio na tela do computador e de lembrança da sua mensagem”, de Eduardo Rangel Brandão
  • Exemplo: experimento controladoQual banner proporciona as melhores taxas de visualização e lembrança da mensagem? * Fonte: dissertação de mestrado “Publicidade on-line, ergonomia e usabilidade: o efeito de seis tipos de banner no processo humano de visualização do formato do anúncio na tela do computador e de lembrança da sua mensagem”, de Eduardo Rangel Brandão
  • Exemplo: experimento controladoQual banner proporciona as melhores taxas de visualização e lembrança da mensagem? * Fonte: dissertação de mestrado “Publicidade on-line, ergonomia e usabilidade: o efeito de seis tipos de banner no processo humano de visualização do formato do anúncio na tela do computador e de lembrança da sua mensagem”, de Eduardo Rangel Brandão
  • Exemplo: experimento controladoQual banner proporciona as melhores taxas de visualização e lembrança da mensagem? * Fonte: dissertação de mestrado “Publicidade on-line, ergonomia e usabilidade: o efeito de seis tipos de banner no processo humano de visualização do formato do anúncio na tela do computador e de lembrança da sua mensagem”, de Eduardo Rangel Brandão
  • Exemplo: experimento controladoQual banner proporciona as melhores taxas de visualização e lembrança da mensagem? * Fonte: dissertação de mestrado “Publicidade on-line, ergonomia e usabilidade: o efeito de seis tipos de banner no processo humano de visualização do formato do anúncio na tela do computador e de lembrança da sua mensagem”, de Eduardo Rangel Brandão
  • Exemplo: grupo de foco* Fonte: monografia “A análise da interface inserida no processo de desenvolvimento de software em uma empresa de engenharia de sistemas de grande porte: recomendações a partir de um estudo de caso”, de Christiane Melcher
  • Exemplo: grupo de foco* Fonte: monografia “A análise da interface inserida no processo de desenvolvimento de software em uma empresa de engenharia de sistemas de grande porte: recomendações a partir de um estudo de caso”, de Christiane Melcher
  • Exemplo: avaliação cooperativa Registrar as expressões dos usuários (durante os momentos de interação) é tão importante quanto registrar suas opiniões (ou comentários) sobre a interface* Fonte: monografia “Avaliação da usabilidade do canal Shoptime Interativo da SKY, segundo ótica dos usuários”, de Katja Aquino
  • Exemplo: mesa redonda após avaliação cooperativaSai do menu e entrei novamente, Não encontrei o produto. [...] Tipo, o produto que [...] Se agora isso táesperando que o TV UD entrasse Como homem não eu to vendo não existe funcionando dee ele não entrou. Então eu compraria nunca mais uma sincronização do acordo com nossasdesisti da compra do produto e naquela budega [...] produto que eu tô necessidades, praolha que sou usuário do canal vendo na hora com o mim não está, mas euShoptime. ato de comprar. Tipo, acho que é um grande ah! do caceta: Se você passo comparado com clicar AGORA! Este o que não tinha. Eu acho que o lance da televisão produto que sai por R é bacana porque você viu, você $99,00, pra você que quer. Tenho a vontade, você foi clicar agora sai por R$ lá e comprou. Apertou o botão e 85,00. Ahhhh! Clico e comprou! compro. * Fonte: monografia “Avaliação da usabilidade do canal Shoptime Interativo da SKY, segundo ótica dos usuários”, de Katja Aquino
  • Projeto da experiência do usuário em produtos digitais e aimportância da avaliação de usabilidade nesse processo Conclusão
  • ConclusãoVantagens desse processo de criação deprodutos digitais• É rápido.• É suficientemente superficial ou relativamente profundo (dependendo da necessidade do projeto).• Permite a exploração (testar facilmente diferentes idéias).• Permite a comunicação (apresenta as idéias de uma forma que podem ser facilmente entendidas).• Permite a colaboração (facilita que toda a equipe construa e avalie o produto).
  • ConclusãoLições aprendidas com esse processo decriação de produtos digitais• É preciso mudar o tempo gasto em execução para que a experiência do usuário seja projetada da melhor forma possível (menos documentação/entregáveis e mais conceituação/estratégia).• É preciso ter uma estratégia de conteúdo que seja pensada juntamente com arquitetura de informação, design de interface e programação client-side/server-side).• É preciso se “reinventar” constantemente, para evitar produtos defasados e/ou sem inovação.
  • “Nós, UX Designers, estamos nosdivertindo imensamente com os novosdesafios, mesmo quando eles noscolocam para fora da nossa zona deconforto.”* Fonte: artigo “User experience deliverables”, de Peter Morville - <http://semanticstudios.com/publications/semantics/000228.php>
  • Por hoje é só, pessoal! ;-) Eduardo Rangel Brandão, M.Sc. www.eduardobrandao.com brandaoedu@gmail.com