Tópicos Especiais III

Interação Humano-Computador (IHC)

Design de Interação
Profª Leila Laís Gonçalves
llg@unesc.net

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 1
 Conteúdo – Aula 07
• Apresentação e discussão do tópico:
– 4. Projeto de Design de Interação
• Processo (centrado no usuário, engenharia de usabilidade,
design baseados em cenários)
• Elementos (usuário, tarefa, tecnologia e contexto)
• Modelos (de personas, de cenários, de tarefa, de interação)
• Estudo de caso em re-projeto de interface interativa

• Atividade Aula 07 – AVA:

– Lean UX Canvas
– UX Canvas

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 2
 Elementos da UX
Jesse James Garret

Superfície Superfície

Esqueleto Esqueleto

Estrutura Estrutura

Escopo Escopo

Estratégia Estratégia

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 3
 Elementos da UX Diagrama “É, NÃO É, FAZ,
NÃO FAZ”
Diagrama “360º View”
• Por que estamos fazendo este produto? Objetivos
• O que queremos do produto? Necessidades Mapa da empatia
Estratégia • O que os usuários querem dele?
Proto-persona
Persona
Contexto
Requisitos
• O que faremos? Cenários
Escopo funcionais Tarefas
Jornada das personas

• Como funcionalidades e dados se encaixam?

Design de Lean UX Canvas
Estrutura Interação UX Canvas

• Como apresentar os elementos da interface na tela? Design de Interface

Esqueleto

• look and feel Design visual

Superfície

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 4
 Mapeamento de Jornada

UX Canvas
https://brasil.uxdesign.cc/mapeando-a-jornada-e-a-experi%C3%AAncia-do-usu%C3%A1rio-49d2c921cbf
Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 5
 Lean UX Canvas
• Uso desse processo para ajudar as equipes a
orientarem seu trabalho a partir de um problema a ser
resolvido,
• Visão iterativa, circular e global, através de um
desenvolvimento ágil que visa corrigir erros e incorporar
melhorias progressivamente possibilitando a
compreensão do problema em suas principais
premissas.
• Tais premissas gerarão posteriormente hipóteses, para
as quais desenvolveremos modelos ou protótipos a
serem validados
• http://www.jeffgothelf.com/blog/leanuxcanvas/

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 6
 Problema
Ideias e soluções Resultados

Usuários
Qual é a coisa mais
importante que
temos que aprender
primeiro? Benefícios para os usuários

Hipóteses
MVP

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 7
 Lean UX Canvas
• Business Problem – Qual é o problema, desafio ou oportunidade?
• Business Outcome – Quais os resultados esperados desta
iniciativa;
• Users & Customers – Quais as personas, identificá-las e entendê-
las;
• User Benefits – Quais os benefícios esperados pelas personas
mapeadas;
• Solution Ideas – Quais as alternativas e possibilidades de
resolução;
• Hypotheses – Quais são o(s) plano(s) de ação, propostas de
atuação;
• What’s the most important things we need to learn? –
Primeiro(s) pontos a validar;
• What’s the least amount of work we need to do to learn the next
most important thing? – MVP – Produto mínimo viável

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 8
 Exemplo Lean UX Canvas

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 9
 UX Canvas
• UX canvas: criado por Maria Fernanda Parisi e Daniel
Ranzi Werle - projeto da pós-graduação em Design de
Interação do Instituto Faber Ludens (Curitiba).
• Inspirado no clássico Business Model Canvas.
• Serve para alinhar a compreensão dos stakeholders
acerca das necessidades do usuário e dos caminhos
que o projeto está tomando.
• Auxilia a equipe envolvida no desenvolvimento do
projeto (designers, gerentes de projetos,
desenvolvedores e etc.).

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 10
 UX Canvas

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 11
 https://medium.com/@brunokatekawa/projeto-de-aplica%C3%A7%C3%A3o-mobile-para-recarga-de-bilhete-
de-transporte-parte-1-fb1637392ae8
Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 12
 Lean UX Canvas
• Lean UX: Applying Lean Principles to
Improve User Experience. 2013-2016
• Jeff Gothelf e Josh Seiden

Ciência da Computação – Tópicos III – Multimídia e Hipermídia – Profª Leila Laís Gonçalves 13