PAAI/DI - 01 - Apresentação do curso, aquecimento e situamento teórico

Análise e Design de Interação / Marcello Cardoso

aula 01/08
Apresentação do curso, aquecimento
e situamento teórico

Projeto e Arquitetura de Aplicações Internet

Análise e Design de Interação
Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com

Friday, August 26, 2011


Professor
Marcello de Campos Cardoso
‣ 6 anos como gerente de produtos na Studio Sol
‣ Especialista em Design de Interação pela PUC MG
‣ Professor na PUC e UNA e Faculdade Cotemig
‣ Sócio/consultor na Latitude14
‣ Mentor de Usabilidade na Aceleradora
‣ 10 anos de mercado web (2001 - atual)
‣ Coordenador regional da Interaction Design Association (IxDA)
‣ Organizador do Interaction South America 2011 (ISA’11)



Ementa
Deﬁnições e aplicação de Usabilidade, Design Centrado no Usuário e Design de Interação.
Metodologia de design baseado no ciclo de vida do produto, com técnicas para o
desenvolvimento de produtos digitais interativos tais como: deﬁnição de personas,
aplicação de questionários e entrevistas, Análise Heurística, User Story Mapping,
Prototipação e Testes de Usabilidade.

Objetivos
Introduzir conceitos e processos essenciais para integração de equipes de criação e
desenvolvimento na elaboração de produtos interativos complexos, através da abordagem
do Design Centrado no Usuário (DCU).

Carga horária: 30h/a (8 encontros)



Plano de curso
1ª Introdução a Usabilidade: conceitos, origem (DCU, IHC), aplicação (IxD),
tipos de design, metas de usabilidade, princípios de design.

2ª Conversando com usuários: Questionários e entrevistas 15pts

3ª Técnica de Modelagem: Personas ágeis (workshop) 10pts

4ª Separando releases: User Story Mapping 15pts

5ª Projetando a interface: Task Flow + Prototipação rápida (workshop) 10pts

6ª Perguntando a especialistas: Análise Heurística, As 10 heurísticas de 20pts
Nielsen (workshop)

7ª Testes de usabilidade (workshop - roteiro) 15pts

8ª Testes de usabilidade (workshop - aplicação) 15pts



Bibliografia

SAFFER, Dan; Designing for interaction. Berkeley, New Riders, 2010.

PREECE, Jennifer; ROGERS, Yvone; SHARP, Helen. Design de interação: além da
interação homem-computador. Porto Alegre: Bookman, 2005.

Kuniavsky, Mike. Observing the User Experience. San Francisco, MKP, 2003.

COOPER, Alan. About face 3.0 - the essentials of Interaction Design. Indianapolis: Wiley
Publishing, 2009

MEMÓRIA, Felipe. Design para Internet – projetando a experiência perfeita, Rio de
Janeiro: Campus/Elsevier, 2005.

NORMAN, Donald. The design of everyday things, New York: Basic Books, 1988.



Referências online
www.useit.com

www.acm.org

www.interactions.acm.org

www.upassoc.org

www.cooper.com

www.slideshare.net/dansaffer

www.slideshare.net/LaneHalley



A vida é permeada de
problemas e desafios.



Seu Nicolau tem 76 anos, mas é muito ativo. Gosta de fazer suas coisas
sozinho, retirar a pensão no banco, visitar vizinhos... Mas nem sempre dá
satisfação pra família, e não gosta de usar celular, pois acha “Muito difícil”.

A família se preocupa, pois o velhinho tem pressão
alta, e gostaria que o Seu Nicolau usasse um celular.

Como este celular poderia ser?



Que tal um iPhone pro Nicolau?



melhor ≠ mais sofisticado
solução simples = solução elegante



FOCO na demanda REAL.



Dona Lucinha adora um cházinho com bolo de fubá, quando recebe as amigas
em casa pra falar de novela. Mas a senhorinha tem artrite e ultimamente
reclama muito de usar a chaleira.

“É pesada meu filho, e machuca minha mão. Quase
não consigo virá-la na xícara, fico com medo de me
queimar.”

Vamos pensar uma chaleira pra ela?



OXO - Good Grips



de ser melhor para TODOS
maior acessibilidade po



Mariana tem 5 anos, e queria aprender a cozinhar com a mãe. Sua mãe
gostaria que a filha comesse mais legumes, mas não quer ver a filha usando
facas. Quase tudo na cozinha é perigoso!

“Eu queria que a menina cortasse os rabanetes,
batatas, cenouras, mas é perigoso”

Vamos pensar um cortador de
legumes seguro e interessante?



Mushroom Chopper

boa solução resolve mais de um problema.


pode ser melhor para TODOS
maior acessibilidade



Mário tem 32 anos, trabalha em Betim,
mas mora em Belo Horizonte. Todos os
dias pega o transporte da empresa às 7 da
manhã na Praça da Liberdade e escuta
músicas no trajeto. Às vezes divide o fone
com sua paquera, Ana Luiza.

“Os fios do fone embolam porque são muito separados. Mas se
fossem menos separados, também não ia dar pra dividir com a
Aninha.”

Vamos ajudar o Mário.


YI | Sound Invention

A solução pode existir em
outro lugar!



Existem várias soluções
para um problema.



Evolution Pillow

Algumas são “robustas”.



Music Branch Headphone Splitter

Algumas são mais simples.



Luíz mudou há pouco para Belo Horizonte,
e achou os preços de imóveis muito caros.
Veio com mulher e dois filhos, e teve
condições de financiar um pequeno imóvel
de 2 quartos com 80 m2.

“Precisava, na verdade, de um quarto e um escritório,
pois trabalho em casa. E meus filhos também
precisam de um lugar pra estudar.”

Como resolver o problema do Luíz?



Resource Furniture
(ver vídeo)



A solução para espaço pequeno não precisa ser mais espaço.
Temos de identificar o problema
e usar os recursos que temos.



Uma solução inserida no projeto é uma
Solução de design



mesmo o que funciona
pode melhorar.



Para resolver bem,
precisamos entender o problema...

“Se eu perguntasse para as pessoas o que queriam,
me diriam cavalos mais rápidos.” -Henry Ford


Para resolver bem,
precisamos entender o problema...

...pensar simples...
... e pen
sar sem
limites.
“Se eu perguntasse para as pessoas o que queriam,
me diriam cavalos mais rápidos.” -Henry Ford


mples a princípio
Pensar si

regra de Paretto, MVP



aior valor de USO
entrar onde há m
conc

começar pela espinha e IT
ERAR



r em tecnologia...
não foca
...mas em comportamento



têm em comum?
O que eles



ign!
des


todo mundo é designer!



Design = Projeto



negócio

pessoas tecnologia



Qual é o melhor
ara criar
caminho p
soluções?


sorte...



...ou tática/metodologia



sorte
0,00001% ... 50%

metodologia
...15%, 25%, 40%, 70%...



METODOLOGIA DE DESIGN

ão

ão
a

aç
uis

aç
tip
sq

lid
oto
pe

va
pr



O que é usabilidade mesmo?

Segundo Jeffrey Rubin (Handbook of Usability Testing):

Um conjunto de quatro fatores reunidos em um dispositivo:

1.Capacidade de ser usado com sucesso (utilidade, eﬁcácia);
2.Facilidade de ser usado (objetividade, eﬁciência);
3.Capacidade de o usuário aprender a usar o dispositivo de
forma simples e rápida (fácil compreensão e aprendizado);
4.Provocar satisfação visual ao usuário (experiência);



Segundo Jakob Nielsen (Usability Engineering):

Um conjunto de proporiedades de uma interface que reúne os
seguintes componentes:

1.Fácil aprendizado;
2.Eﬁciência;
3.Capacidade de memorização;
4.Baixo índice de erros;
5.Satisfação e prazer ao uso.




“Facilidade de uso e facilidade de aprendizado” -Albert Badre
(Shaping Web Usability)

“Capacidade, em termos funcionais humanos, de um sistema ser
usado com facilidade e de forma eﬁciente” -Brian Shackel
(Usability)

“Princípios de design que, quando seguidos, dão respostas aos
usuários tornando o uso dos dispositivos mais fácil” -Don
Norman (O Design do dia-a-dia)




“Pensar em usabilidade é pensar em produtos fáceis de usar” –
Jesse James Garrett (The Elements of User Experience)

“Fator que assegura que os produtos sejam fáceis de usar,
eﬁcientes e agradáveis” - Preece, Rogers e Sharp (Design de
Interação)

“A ciência de aplicação de metodologias ao design para a criação
de dispositivos fáceis de usar, de fácil aprendizado e que sejam
úteis com o menor índice de desconforto possível” - Mark
Pearrow (Web Site Usability Handbook)




ISO 9126 - 1991
“Esforço necessário para seu uso e para o julgamento individual
de tal uso.”

ISO 9241, 11 - 1998
“Capacidade de um produto ser usado por usuários específicos
para atingir objetivos específicos com eficácia, eficiência e
satisfação em um contexto específico de uso.”




em

10 definições,
vezes aparecem as palavras “facilidade” ou “fácil”.




É o atributo que define a
facilidade de uso de algo.




Quem define o que é “fácil” de ser usado?



UM POUCO DE
HISTÓRIA


1960 - 1970 | Inspeção de software

Voltado à qualidade do código: encontrar e corrigir bugs.
Modelo wartefall: processos ao ﬁnal do trabalho realizado.
Estudos do tipo tempo/erro: caros e pouco informativos.



1980 | IHC e DCU
Gradualmente o hardware evoluiu permitindo softwares robustos e interfaces
complexas e o uso em novos nichos. Surge o computador pessoal.

Para produzir produtos com funcionalidades e interfaces adequadas, nascem
dois campos de estudo: Interface Humano-Computador e Design Centrado no
usuário.



1982 | Interface Humano-Computador (IHC)

Campo de estudos que surgiu em 1982 no congresso “Human
Factors in Computing Systems”, realizado por psicólogos
cognitivos principalmente.

Características: ciência da computação com foco nos aspectos
sociais, cognitivos e comportamentais.



1986 | Design Centrado no Usuário (DCU)

Design Centrado no Usuário (DCU) é o campo de estudo que reúne
metodologias de design nos quais o público-alvo de um produto ou
serviço inﬂuencia as diretrizes e requisitos do sistema.

Termo cunhado por Norman enquanto trabalhava como pesquisador na
Universidade California San Diego (UCSD), no artigo User-Centered
System Design: New Perspectives on Human-Computer Interaction
(Norman & Draper, 1986) e popularizado em 1988 no popular
Psychology of everyday things (mais tarde rebatizado como The
design of everyday things).



Design Centrado no Usuário (DCU)
“…é uma filosofia baseada nas necessidades e interesses do usuário, com ênfase em
fazer produtos usáveis e inteligíveis.” – Donald Norman

“A filosofia por trás do Design Centrado no Usuário é simplesmente esta: O usuário
sabe mais. Pessoas que utilizarão um produto ou serviço sabem de suas necessidades,
metas e preferências, e é papel do designer descobrir isto e projetar para eles.” – Dan
Saffer

“...é uma abordagem ao design que fundamenta o processo em informações sobre as
pessoas que usarão o produto. Processos de UCD focam em usuários através de
planejamento, design e desenvolvimento do produto.” – Usability Professionals
Association (UPA)

“...é um estabelecido processo usado pela IBM e muitas outras organizações para
prover produtos que atendam as expectativas dos usuários.” – IBM

“...é focar o design no usuário, simples assim.” – Peter J. Bogaards




USUÁRIOS
devemos perguntá-los como fazer nosso trabalho?




a princípio,
NÃO




Devemos identiﬁcar seus padrões de comportamento
e projetarmos soluções adequadas.



1988 | Engenharia de Usabilidade

O termo foi cunhado por John Bennett (IBM) e John Whiteside
(Digital Equipment Corporation) em alguns artigos em 1988. A
princípio era chamado de “Engenharia de Usabilidade”.

Abordagem qualitativa e prática de desenvolvimento de produtos,
orientada para a qualidade e focada em: deﬁnição de tarefas,
prototipação e avaliação iterativa (Whiteside, Bennett, &
Holtzblatt,1988).



1990 | Design de Interação

Bill Morgride, diretor da IDEO, sintetizou no livro Designing for
Interactions uma série de metodologias de design + comunicação
usadas e aprimoradas na empresa para a elaboração de produtos
úteis e usáveis.



Espaço do Design de Interação

Este campo multidisciplinar centraliza e
integra as diversas áreas de
conhecimento relacionadas a interação
entre artefato / usuários



Por que Design de Interação?

Projetar dispositivos e interfaces usáveis vai além de evitar erros: um projeto
bem pesquisado, planejado, desenvolvido e testado pode agregar valor ao uso,
negócio ou mesmo mudar totalmente a natureza do produto/sistema para outra
melhor e mais adequada.

“...Design de Interação não é apenas sobre corrigir problemas; diz
respeito a facilitar interações entre pessoas de uma maneira mais rica,
profunda e melhor - ou seja, encontrar novas formas de melhor
conectar as pessoas e tornar o mundo um lugar melhor.”
-Dan Saffer



Uma interface bem projetada deve ser guiada por

METAS DE USABILIDADE
+
METAS DE EXPERIÊNCIA DO USUÁRIO



Metas de Usabilidade

Servem para guiar o desenvolvimento de produtos fáceis de usar, eficientes e
agradáveis. São elas (Preece, Rogers, Sharp):

1. Utilidade
2. Eficácia
3. Eficiência
4. Segurança
5. Facilidade de aprendizado
6. Facilidade de lembrar como se usa

Eficácia: O quanto um produto é bom em se fazer o que se espera dele
Eficiência: Como um produto auxilia a execução de suas tarefas com o mínimo de recursos



Metas de Usabilidade | Utilidade

A medida que o sistema propicia a funcionalidade
adequada para o objetivo especíﬁco do usuário.




Ferramenta de nicho




Ferramenta sem foco
Pra que serve?
Elevator pitch,
Twitter pitch!



Metas de Usabilidade | Eficácia

Eﬁcácia se refere a quão bem uma ferramenta auxilia na realização
de uma atividade proposta, em um contexto de uso.

É uma característica analógica, em escala.




Qual é mais eficaz?




Depende, pra que, para quem?



Metas de Usabilidade | Eficiência

Quanto uma ferramenta auxilia na economia de recursos para a
realização de uma atividade proposta, em um contexto de uso.




Eﬁciência

=
economia de recursos




recursos podem ser medidos em tempo, cliques...
se traduzem em trabalho/custo



O dilema do AJAX.



Metas de Usabilidade | Eficácia x Eficiência

eﬁcácia - fazer melhor
eﬁciência - produtividade



Metas de Usabilidade | Segurança

Segurança se refere a prevenção e recuperação de erros.
Deve ser perceptível, transparente.




Física




Interface




Prevenção de erros




Prevenção de erros, transparente.




Segurança percebida



Metas de Usabilidade | Facilidade de aprendizado

Clareza na interface, compreensão das funcionalidades

metáforas e modelos mentais


Metas de Usabilidade | Facilidade de lembrar como se usa

Interface proﬁssional, especialista



Princípios de Design

O que são os princípios de design?

“...são derivados de uma mistura de conhecimento baseado em
teoria, experiência e senso comum [...] conjunto de items que
devem ser assegurados” (PREECE, 2005)




Quais são os princípios que norteiam o design de interação?

1. Visibilidade
2. Feedback
3. Restrições
4. Mapeamento
5. Consistência
6. Affordance

(PREECE) Desgin de Interação Cap. 1 - pag 42 a 53
(NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 255




Visibilidade

“...O sistema deve fornecer indicações do estado do sistema,
que sejam prontamente perceptíveis e interpretáveis e
correspondam às intenções e às expectativas.” (NORMAN,
2006)





Visibilidade
Quanto mais visíveis forem as funções, mais os usuários saberão como proceder.




Visibilidade
Quanto mais visíveis forem as funções, mais os usuários saberão como
proceder.




Feedback
“O feedback se refere ao retorno de informações a respeito da
ação que foi feita e do que foi realizado, permitindo a pessoa
continuar a atividade.” (PREECE, 2005)





Feedback
Fornecer ao usuário
informações sobre a ação
realizada




Feedback pode ser
Visual
Tátil
Verbal
Auditivo
Combinado




Restrições
“... refere-se às formas de delimitar o tipo de interação que pode
ocorrer [...] para impedir o usuário de selecionar a opção
incorreta e reduzir as chances de erro...” (PREECE, 2005)




Restrições lógicas
Exploram o bom senso das pessoas a respeito de como o
mundo funciona.




Restrições físicas
Se referem à maneira como os objetos restringem
mecanicamente.



Restrições culturais
Convenções aprendidas – universais ou especíﬁcas de culturas
diferentes.




Mapeamento
“... refere-se a relação entre controles e seus efeitos no artefato”
(PREECE, 2005)




Mapeamento
“... refere-se a relação entre controles e
seus efeitos no artefato”
(PREECE, 2005)




Consistência
“Refere-se a projetar interfaces de modo que tenham operações
semelhantes e que utilizem elementos semelhantes para a
realização de tarefas similares” (PREECE, 2005)




Consistência
No mesmo dispositivo




Consistência
Entre dispositivos diferentes




Affordance
“É um atributo do objeto que permite ao usuário saber como
utilizá-lo”
(PREECE, 2005)

“É uma ‘dica’ de como devemos interagir com o objeto.”
(Karine e Leandro, 2010)




Affordance
“É um atributo do objeto que permite ao usuário saber como
utilizá-lo”
(PREECE, 2005)




Aparência



Leis do Design de Interação

Lei de Fitts
O tempo gasto para se mover de um ponto inicial para outro é proporcional ao
tamanho do alvo e sua distância.

Signiﬁca que...
Elementos de uma interface devem possuir um tamanho adequado a sua
importância.

Elementos relacionados devem se posicionar em um contexto de uso coerente.

Paul Fitts, psicólogo - 1954




Lei de Hicks
O tempo que leva para uma pessoa tomar uma decisão é proporcional ao número
das escolhas possíveis.

Signiﬁca que...
Usuários encontram a informação separando-as em blocos e eliminando a metade
a cada etapa do processo.

Desconsiderando outras decisões de design, seria mais simples encontrar um
atalho em um grupo de 10 do que em dois de 5.

Devemos ser criteriosos na categorização de conteúdos.

William Edmund Hick, psicólogo - 1983




Lei de Miller (complementar à lei de Hicks)
A memória de curta duração humana registra 7 informações em média, variando
em torno de 2 para cima ou para baixo.

Signiﬁca que...
Não é uma regra rígida, mas uma orientação. Interfaces devem ser projetadas no
intuito de minimizar a sobrecarga cognitiva.

Por exemplo, não devemos criar interações que forcem usuários a memorizar
elementos estranhos em telas diferentes.

George Miller, psicólogo - 1956




Lei de Moore
O tempo gasto por usuários para tomarem decisões é proporcional ao número de
opções.

Signiﬁca que...
Devemos nos adequar a mudança de paradigmas tecnológicos. Novos
dispositivos, novas formas de interagir, novas possibilidades!

Gordon Moore, co-fundador da Intel - 1965



igad o!
o br
Este arquivo contém a apresentação realizada por Marcello de
Campos Cardoso, em Agosto de 2011, para a disciplina Análise e
Design de Interação, ministrada no curso de especialização em
Projeto e Arquitetura de Aplicações Internet na Faculdade
COTEMIG.


PAAI/DI - 01 - Apresentação do curso, aquecimento e situamento teórico

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a PAAI/DI - 01 - Apresentação do curso, aquecimento e situamento teórico

Semelhante a PAAI/DI - 01 - Apresentação do curso, aquecimento e situamento teórico (20)

Mais de Marcello Cardoso

Mais de Marcello Cardoso (17)

PAAI/DI - 01 - Apresentação do curso, aquecimento e situamento teórico