Design e Prototipao

Modelo do Ciclo de Vida Simples para IHC

Como o sistema pode apoi-los?

Como os usurios podem
interagir com o sistema?

Identificar
necessidades/
estabelecer
requisitos

Como deveria ser a interface

para possibilitar tal
(Re)Design
interao?
Construir
verses
interativas

Modelos de Tarefas
Cenrios
Modelo de Interao

Avaliar

Produto final

Prottipo

Prototipao

O que ?
Fazer uma maquete do produto do design.
1. Para que servem maquetes?
Para representar as caractersticas centrais do design e estimular
respostas e reaes dos usurios proposta do designer.

2. Quem deve examinar as maquetes?

Todos os interessados e afetados (stakeholders) pela tecnologia que
ela representa: usurios, clientes, etc.

3. O que fazer com uma maquete depois de ser usada?

DESCARTAR. No tentem fazer da maquete o sistema. Nunca
construam a maquete para ela ser reusada como mdulo do
sistema. Maquete maquete sistema sistema.

Prottipos de design de IHC

Exemplos de prottipos
uma srie de desenhos (serve mesmo desenhos a mo livre)
que caracterizem a interao e/ou a interface do sistema

Exemplo colhido em:

http://www.agilemodeling.com/artifacts/uiPrototype.htm

Prottipos de design de IHC

Exemplos de prottipos
uma casca externa de sistema que caracterize a interao e/ou
a interface do sistema

Exemplo colhido em:

http://www.agilemodeling.com/artifacts/uiPrototype.htm

A casca pode ser montada com

qualquer tipo de ferramenta tcnica.
Por exemplo: pode ser uma pgina
em HTML; podem ser telas construdas das com software tipo VB, Delphi
ou Java; podem ser slides em Power
Point. O importante que a casca
exiba as caractersticas crticas de
interface/interao que se quer
discutir.

Prototipando a interface e a interao

A prototipao de interfaces a que mais se v.
Normalmente representada por telas estticas,
contendo representaes mais ou menos fiis aos
elementos de input e output que o usurio poder ver e
acionar.
Porm, a prototipao de interao igualmente
importante, embora ela seja por vezes mais difcil de
representar.
Como tem uma extenso temporal, precisa de um suporte
tecnolgico em que se possa representar seqncias de aoreao.

Exemplo de prottipo de interao

Fonte:
http://guir.berkeley.edu/projects/denim/pubs/silk-vl-chi99.pdf
(James Lin, 1999)

Prottipos de Baixa Fidelidade

Rpidos, fceis e baratos
Exemplo: sketches desenhados a mo livre

So facilmente descartados (no correm o risto de virar

sistema)
So fceis de refazer durante uma reunio com os
stakeholders oferecem suporte para refletir as
mudanas possveis e desejadas.

Prottipos de Alta Fidelidade

Mais demorados, complexos e custosos
Exemplo: prottipos (semi) funcionais em VB ou Delphi, ou ainda feitos
em Photoshop

No so to facilmente descartados, porque tentam o prototipador a

desenvolver o que falta (i.e. correm o risto de virar sistema)
Podem no ser fceis de refazer durante uma reunio com os
stakeholders.
Redisposio e subtrao de elementos em tela so fceis de fazer
Acrscimo ou substituio de elementos podem ser fceis de fazer ou
no
Representao de alteraes na dinmica de telas difcil de fazer
(razo pela qual os prototipadores podem criar apego ao prottitpo
como leva tempo para fazer, mais difcil jogar fora).

Exemplo de Ferramenta de Prototipao

DENIM
http://dub.washington.edu/denim/

Ferramenta gratuita
Site oferece vrios vdeos
com exemplo de uso

Princpios e
Padres

 Princpios (genricos)

genricos, aplicveis a uma ampla gama de problemas, mas

no oferecem solues diretas
podem ser conflitantes entre si
exemplo
heursticas de Nielsen 1994 (para avaliao heurstica)

Diretrizes (especficas)
mais concretos, aplicveis a um problema especfico, mas
como saber se o meu problema se encaixa na diretriz?

SERG, 2008

Princpios (exemplo)

The principle of user profiling: Know who your user is.

The principle of metaphor: Borrow behaviors from systems familiar to your
users.
The principle of feature exposure: Let the user see clearly what functions are
available.
The principle of coherence: The behavior of the program should be internally
and externally consistent.
The principle of state visualization: Changes in behavior should be reflected
in the appearance of the program.
The principle of shortcuts: Provide both concrete and abstract ways of
getting a task done.
The principle of focus: Some aspects of the UI attract attention more than
others do.

SERG, 2008

Princpios (exemplo, cont.)

The principle of grammar: A user interface is a kind of language -- know

what the rules are.
The principle of help: Understand the different kinds of help a user needs.
The principle of safety: Let the user develop confidence by providing a safety
net.
The principle of context: Limit user activity to one well-defined context unless
there's a good reason not to.
The principle of aesthetics: Create a program of beauty.
The principle of user testing: Recruit help in spotting the inevitable defects in
your design.
The principle of humility: Listen to what ordinary people have to say.

SERG, 2008

Padres (design patterns)

Objetivos:
criar memria de conhecimento de design

auxiliar a captura de razes para as decises de design (design rationale)

documentar a experincia de projetos anteriores

Vantagens de um padro:
fornece um vocabulrio para argumentar por que algumas interfaces funcionam e
outras no
permite aproveitar conhecimento e experincia de outras reas (por exemplo:
aparelhos eletrnicos, design impresso, etc.)
permite identificar as qualidades que tornam bem sucedidas alguns recursos como
metforas e widgets, para ir alm deles
serve como fundamento slido para a construo de novas ferramentas ou conceitos
de interface (p.ex. interfaces 3D)
evita repetir erros de projetos anteriores
facilita a introduo de novos membros na equipe de um projeto
auxilia no treinamento de novos profissionais

SERG, 2008

Classificao de padres

nvel de abstrao
tarefa completa do usurio
estilo de alguma parte da interao
objetos de interface individuais (questes de baixo nvel de design de interface)

funo questes de:

percepo (visual, auditiva, etc.)

entrada
manipulao de algum tipo de dado da aplicao
navegao pelo sistema

dimenso fsica questes de:

layout espacial
seqncia (sries discretas de eventos ou dilogos), ou
tempo contnuo (e.g. animaes)

SERG, 2008

Estrutura de um padro

nome

grau (ranking) de validade

figura

contexto

breve descrio do problema

descrio detalhada do problema

soluo central

diagrama

referncias a padres mais especficos

para transmitir a idia do padro em poucas palavras e ser fcil de lembrar

zero, um ou dois asteriscos, que indicam o grau de confiana que os autores tm sobre o padro (2
asteriscos indicam um invariante)

exemplo de aplicao do padro

em que contexto este padro deve ser utilizado

quais padres mais amplos ou genricos este padro ajuda a implementar

sumrio da situao geral que o padro enderea

descrio utilizando conceito de foras concorrentes que o padro busca resolver ou equilibrar

instrues claras mas genricas que possam ser aplicadas numa variedade de situaes

ilustrao da soluo (esboo grfico da soluoe seus principais constituintes)

recomendaes do autor para implementar e desdobrar a soluo proposta pelo padro atual

SERG, 2008

Exemplo (http://www.mit.edu/~jtidwell/interaction_patterns.html)
Indicador de progresso
Exemplos:
Contagem regressiva em micro-ondas
Barras de progresso em GUI
Mensagem de percentagem completa durante download de
arquivo

Contexto: Um processo longo est acontecendo, e seu

andamento de interesse para o usurio.

SERG, 2008

Exemplo (cont.)
Problema:
Como o artefato mostra seu estado atual para o usurio, de
modo que ele possa melhor entender o que est ocorrendo e
possa agir tendo esse conhedimento?

Foras:
Usurio quer saber quanto tempo ele vai ter que esperar at o
processo acabar
Usurio quer saber que o processo est de fato acontecendo, e
no est parado
Usurio quer ver velocidade do processo, especialmente em
casos onde essa velocidade varivel
s vezes impossvel para o artefato prever quanto tempo o
processo vai demorar

SERG, 2008

Exemplo (cont.)
Soluo: Mostrar ao usurio um display de estado de
alguma forma, indicando o andamento do mesmo em
tempo real. Se o tempo estimado conhecido, ou se
alguma outra quantidade relevante (ex., tamanho do
arquivo sendo baixado), sempre mostre a proporo do
processo j feita at ento, de modo que o usurio possa
estimar o tempo restante. Se no h quantidades
conhecidas apenas que o processo pode demorar um
pouco mostre ento um indicador de que o processo
est em andamento.

SERG, 2008

Exemplo (cont.)
Animaes so geralmente usadas com bom efeito nesse
padro, o movimento chama a ateno do usurio e o final do
movimento indica um novo estado, mais relaxado ("the
process is done, so you can relax now"). Som tambm pode
ser usado, da mesma forma. Porm, necessrio estar ciente
da importncia deste processo em relao a outros que
tambm demandam a ateno do usurio simultaneamente.
Contexto Resultante: Usurio espera encontrar maneira de parar
o processo prximo ao indicador de progresso. Coloque algum tipo
de "stop" junto indicao de status, se possvel.

SERG, 2008

Colees de patterns
http://designinginterfaces.com/
http://www.welie.com/
http://developer.yahoo.com/ypatterns/
Outras colees e linguagens de padres:
http://www.visi.com/~snowfall/InteractionPatterns.html#PatternLa
nguages

SERG, 2008