You are on page 1of 63

Design de IHC

Design de IHC
22/01/14 22/01/14 2 2
Perfil de Usurio
Perfil de Usurio
Descrio detalhada das caractersticas dos usurios, sua relao
com tecnologia, seu conhecimento sobre domnio e tarefas.
Podemos agrupar usurios que possuem caractersticas seme-
lhantes, por exemplo:
dade !criana, "o#em, adulto, terceira idade etc.$%
&xperi'ncia !leigo(no#ato, especialista$%
)titudes !gosta de tecnologia !tecn*filos$, no gosta de tecnolo-
gia!tecn*fobos$$%
+arefas principais !compra, #enda$%
) categori,ao de usurios em determinados perfis destaca
algumas caractersticas e abstrai outras.
22/01/14 22/01/14 3 3
Exemplo de Perfis de Usurios
Exemplo de Perfis de Usurios
Perfil (papel) coordenador A coordenador B
percentual de professores no per-l ./0 .10
n2mero de professores no per-l / 3
faixa etria 415,.5$ 4.5,65$
quanto tempo como professor !anos$ 46,75$ 475,76$
frequ'ncia de uso de tecnologia #rias #e,es ao dia #rias #e,es ao dia
experi'ncia com tecnologia
alta: 6 - fa, tudo sem a"uda
baixa: 7 - precisa de muita a"uda
6 .
atitude perante tecnologia
adora: 6
odeia: 7 !s* usa porque 8 obrigado$
6 .
estilo de aprendi,ado
aprende fa,endo% busca
na 9eb
l' manual%
pergunta ao colega
aplica:es mais utili,adas
7. e-mail, ;. leitor <==, 1.
ed. texto, .. ed. slides, 6.
ferramenta de busca
7. e-mail, ;. ed. texto. 1.
ed. slides, .. ferramenta
de busca
22/01/14 22/01/14 4 4
Personas
Personas
>ma persona 8 um personagem -ctcio, modelo hipot8tico de um
grupo de usurios reais, criado para descre#er um usurio tpico.
Marta Batista, professora cada turma uma turma!
?arta @atista 8 professora da uni#ersidade )prenda ?ais
h dois anos. &mbora lecione apenas duas disciplinas dife-
rentes, ela gosta de configurar o sistema de apoio As aulas
sob medida para cada turma, pois sente que isso contribui
para a qualidade do curso.
22/01/14 22/01/14 5 5
"aracter#sticas das Personas
"aracter#sticas das Personas
$dentidade: nome, sobrenome, idade, foto, etc%
Status: primria, secundria, outro stakeholder;
%b&eti'os: Buais so os ob"eti#os desta personaC
(abilidades: Bual 8 a especialidade da personaC sso inclui
educao, treinamento e compet'ncias espec-cas%
)arefas: &m linhas gerais, quais as tarefas bsicas ou crticas que a
persona reali,aC Bual 8 a frequ'ncia, importDncia e durao dessas
tarefasC
*elacionamentos: Eom quem a persona se relacionaC
*e+uisitos: De que a persona precisaC
Expectati'as: Eomo a persona acredita que o produto funcionaC
Eomo ela organi,a as informa:es no seu domnio ou trabalhoC
22/01/14 22/01/14 6 6
Anlise de )arefas
Anlise de )arefas
F utili,ada para se ter um entendimento sobre qual 8 o trabalho dos
usurios, como eles o reali,am e por qu'%
G trabalho 8 definido em termos dos ob"eti#os que os usurios
querem ou precisam atingir%
<epresenta todos os m8todos de coletar, classificar e interpretar
dados sobre o desempenho de um sistema que possua ao menos
uma pessoa como componente%
Podem ser utili,adas nas tr's ati#idades habituais:
Para anlise da situao habitual%
Para o !re$design de um sistema computacional%
Para a a#aliao do resultado de uma inter#eno que inclua a
introduo de um !no#o$ sistema computacional.
22/01/14 22/01/14 7 7
,esi-n de $("
,esi-n de $("
Hisa elaborar um modelo conceitual de entidades e atributos do do-
mnio e do sistema, estruturar as tarefas e pro"etar a interao e a in-
terface de um sistema interati#o que apoie os ob"eti#os do usurio%
Pode-se ser utili,ado di#ersas representa:es, cada qual endere-
ando uma ou mais quest:es de IE:
<epresenta:es e )spectos de IE <epresenta:es e )spectos de IE
22/01/14 22/01/14 8 8
"enrios de $ntera./o
"enrios de $ntera./o
No devem conter detalhes da interface propriamente dita, como
textos, rtulos e tipos de elementos de interface (widgets)
utilizados.
Jornecem mais detalhes sobre as a:es do usurio e as respecti-
#as respostas (feedback) do sistema necessrias para o usurio
alcanar seus ob"eti#os
22/01/14 22/01/14 9 9
Exemplo de "enrio de $ntera./o
Exemplo de "enrio de $ntera./o
Cadastro de projetos finais pelos professores:
Atores: Joana (secretria), ernando !outo (aluno), "arcos !orr#a (professor,
orientador principal do pro$eto final), %edro "elo (coorientador externo):
KLa primeira semana de aula, Moana, secretria do curso de &ngenharia )mbiental,
precisa se certificar de que os pro"etos finais dos alunos iniciados no perodo atual esto
cadastrados. Eomo costumam ser entre ;5 e 15 pro"etos, e seu cadastramento de#e ser
efetuado numa 8poca em que o pessoal da secretaria est sobrecarregado de trabalho,
cada professor de#e cadastrar os pro"etos dos seus alunos. Para isso, Moana en#ia uma
mensagem a todos os professores solicitando que cadastrem os pro"etos sob sua
orientao e informando que eles t'm apenas uma semana para fa,'-lo, sob risco de os
alunos terem suas matrculas em Pro"eto Jinal canceladas. )o receber a mensagem
de Moana, ?arcos Eorr'a entra no sistema para cadastrar o pro"eto final do seu aluno
Jernando Eouto. &le informa o nome e a matrcula do aluno, al8m do ttulo e do formato
de entrega do seu trabalho !e.g., relat*rio ou softNare$. )o informar os dados do
coorientador externo !nome completo, e-mail e EPJ$, percebe que no possui o EPJ do
seu colega, Pedro ?elo.O
22/01/14 22/01/14 10 10
,esi-n "entrado na "omunica./o
,esi-n "entrado na "omunica./o
%b&eti'o!
La engenharia semi*tica, o ob"eti#o do design da interao 8
completar a segunda parte da metamensagem do designer para
o usurio:
&ste ' o meu entendimento, como desi(ner, de )uem voc#,
usurio, ', do )ue aprendi )ue voc# )uer ou precisa fazer, de
)ue maneiras prefere fazer, e por )u#. Este, portanto, o
sistema que projetei para voc, e esta a forma como
voc pode ou deve utiliz-lo para alcanar uma gama
de objetivos que se encaiam nesta vis!o.
G designer de#e comunicar aos usurios sua 'is/o de desi-n
para dar-lhes melhores condi:es de entender e aprender sobre o
sistema pro"etado e como podem utili,-lo.
22/01/14 22/01/14 11 11
,esi-n "entrado na "omunica./o
,esi-n "entrado na "omunica./o
% +ue si-nifica intera./o e o pro&eto de intera./o0
) intera./o 8 #ista como uma con#ersa entre designer e usurio
atra#8s da interface, durante a con#ersa usurio-sistema:

Pro&etar a interao significa definir as con#ersas que o usurio poder
tra#ar com o preposto do designer para alcanar seus ob"eti#os%
22/01/14 22/01/14 12 12
,esi-n "entrado na "omunica./o
,esi-n "entrado na "omunica./o
G que 8 uma con#ersaC
+oda con'ersa tem um t1pico, que 8 o assunto geral por ela
endereado%
&ssa con#ersa pode se desdobrar em dilo-os, que endeream
subt1picos relacionados ao t*pico da con#ersa%
Gs dilogos so compostos por falas do usurio e do prepostos%
Eada fala fa, uso de si-nos.
22/01/14 22/01/14 13 13
,esi-n "entrado na "omunica./o
,esi-n "entrado na "omunica./o
t1pico 2
subt1pico (dilo-o)
falas e si-nos
cadastrar trabalho >: Preciso cadastrar um trabal3o para os meus alunos de IE.
P informar dados do trabalho D: Bual 8 o t#tulo e a descri./o do trabalhoC At +uando de#e ser entregueC
Pode ser feito em -rupoC Buantos pontos #ale o trabalhoC
P consultar datas importantes >: )ntes, quero consultar os pra4os da uni'ersidade e feriados desse semestre.
D: &i-los.
P informar dados do trabalho >: Preciso de uma semana para corrigir os trabalhos, e preciso entregar as notas at8
dia ; de "unho. &nto #ou pedir para os alunos entregarem os trabalhos at8 o dia ;Q
de maio !data de entre-a$. &les de#em receber um lembrete do pra4o de entre-a.
D: GR, o trabalho de#er ser entregue at8 o dia ;Q de maio e os alunos sero
lembrados no dia ;1 de maio !tr's dias antes$.
P informar dados do trabalho D: & qual 8 o t#tulo e a descri./o do trabalhoC Pode ser feito em -rupoC
Buantos pontos #ale o trabalhoC
>: G trabalho pode ser feito em dupla, e #ale ;50 da nota.
G ttulo 8 !...$ e a descrio 8 !...$.
D: GR, o trabal3o " foi cadastrado.
conferir cadastro do trabalho
P examinar dados do trabalho
>: Deixa eu conferir os dados do trabalho... &sto GR.
noti-car alunos >: )gora quero a#isar aos alunos de que o enunciado do trabalho " est dispon#el.
D: GR, posso en#iar a mensa-em padr/oC
P informar conte2do da mensagem >: =im.
conferir mensagem P conte2do e
destinatrios da mensagem
D! A mensa-em (555) foi en#iada para os alunos (555).
22/01/14 22/01/14 14 14
Mapa de %b&eti'os dos Usurios
Mapa de %b&eti'os dos Usurios
De#e-se organi,ar os ob"eti#os dos usurios que tenham sido
identificados na etapa de anlise%
Gs ob"eti#os podem ser classificados:
Jinais:
=o aqueles que le#am o usurio a utili,ar o sistema%
nstrumentais:
=o utili,ados como facilitadores para os ob"eti#os finais, um meio para o
fim dese"ado, e subdi#idi-se em:
Direto:
Eonsiderado como um facilitador imediato do ob"eti#o que
instrumenta, durante a interao%
ndireto:
Prepara o terreno para que o ob"eti#o por ele instrumentado se"a
atingido em algum momento futuro%
22/01/14 22/01/14 15 15
Mapa de %b&eti'os dos Usurios
Mapa de %b&eti'os dos Usurios
"ipos de objetivo:
)ipo de ob&eti'o 6ormula./o !
Jinal
Hoc' !usurio no papel SPapelP$$quer utili,ar o sistema para
Satingir ob"eti#oJinalP
nstrumental
Buer Satingir ob"eti#o instrumentalP para Satingir ob"eti#o
JinalP 4de forma mais e-ciente(fcil(flex#el...T
nstrumental direto
Buer Satingir ob"eti#o instrumentalP para Satingir ob"eti#o
JinalP 4de forma mais e-ciente(fcil(flex#el...T a-ora
nstrumental indireto
Buer Satingir ob"eti#o instrumentalP para Satingir ob"eti#o
JinalP 4de forma mais e-ciente(fcil(flex#el...T no futuro
22/01/14 22/01/14 16 16
Exemplo de Mapa de %b&eti'os dos Usurios
Exemplo de Mapa de %b&eti'os dos Usurios
22/01/14 22/01/14 17 17
%ri-em de um si-no
%ri-em de um si-no
=igno de domnio:
&ncontrados no mundo do usurio, independentemente do sistema !ex.: nome e en-
dereo de uma pessoa$%
=igno transformados:
=o originados no domnio, mas que sofrem alguma alterao ao serem incorpora-
dos ao sistema, como uma transformao resultante de analogias ou metforas !ex.:
diret*rio de arqui#os digitais para substituir pastas de arqui#os fsicas$%
=ignos de aplicao:
Bue s* fa,em sentido dentro do sistema, e que no tem significado pr8#io para os
usurios !ex.: porcentagem de doNnload de um arqui#o$%
=ignos con#encionais:
Gs signos !transformados e aplicao$ que " tenham sido estabelecidos como con-
#en:es na cultura dos usurios !ex.: interfaces baseadas em mapas$.
22/01/14 22/01/14 18 18
Es+uema "onceitual de 7i-nos! "onte8do
Es+uema "onceitual de 7i-nos! "onte8do
)lguns signos esto relacionados a conceitos ou entidades do
domnio ou do pr*prio sistema !denominados signo-entidade,
ou simplesmente entidade$%
Gutros correspondem a atributos desses signos-entidade
!signo-atributo, ou simplesmente atributo$%
Gu ainda como #alores de um signo-atributo%
22/01/14 22/01/14 19 19
Es+uema "onceitual de 7i-nos! "onte8do
Es+uema "onceitual de 7i-nos! "onte8do
Definio parcial dos signos-entidade do sistema de apoio acad'mico
22/01/14 22/01/14 20 20
Es+uema "onceitual de 7i-nos! "onte8do
Es+uema "onceitual de 7i-nos! "onte8do
U medida que o design a#ana, 8 poss#el definir mais
informa:es acerca dos signos:
Definio do conte2do dos signos que comp:em o signo enunciado de trabalho
22/01/14 22/01/14 21 21
Pre'en./o e *ecupera./o de *upturas
Pre'en./o e *ecupera./o de *upturas
"omunicati'as
"omunicati'as
Pre'en./o passi'a !PP$: o preposto do designer tenta e#itar que ha"a uma ruptura,
fornecendo explica:es sobre a linguagem de interface:
Por exemplo, apresenta uma dica de formato como K!dd(mm(aaaa$O ao lado de um
campo de data% ou uma instruo explcita como Kasterisco !V$ indica campo
obrigat*rioO%
Pre'en./o ati'a !P)$: o preposto do designer impede que o usurio emita falas
in#lidas que causem uma ruptura:
Por exemplo, habilita ou desabilita um boto de acordo com o estado atual do
sistema ou impede que o usurio digite letras ou smbolos em campos num8ricos%
Pre'en./o apoiada !ou alerta, )W$: o preposto do designer, ao identificar uma situao
como causa potencial de uma ruptura, descre#e a situao e solicita que o usurio
tome uma deciso informada sobre os rumos da interao. Xeralmente esse
mecanismo 8 concreti,ado na interface por dilogos de confirmao:
Por exemplo, K)rqui#o " existe, dese"a sobrescre#'-loCO% KJoram feitas altera:es
no trabalho. Dese"a arma,en-lasCO$%
22/01/14 22/01/14 22 22
Pre'en./o e *ecupera./o de *upturas
Pre'en./o e *ecupera./o de *upturas
"omunicati'as
"omunicati'as
*ecupera./o apoiada !<)$: ap*s uma ruptura ter ocorrido, o preposto do
designer auxilia o usurio a se recuperar da ruptura. &le descre#e a ruptura e
oferece ao usurio a oportunidade de retomar a con#ersa de forma produti#a.
Por exemplo, quando o usurio preenche um campo incorretamente, o
preposto apresenta uma mensagem descre#endo o erro no preenchimento
e destaca o campo a ser corrigido, esperando que o usurio assim o faa%
"aptura de erro !E&$: ap*s uma ruptura ter ocorrido, o preposto do designer
identifica que o usurio no pode se recuperar dela atra#8s da interface do
pr*prio sistema. Lesse caso, o preposto descre#e a ruptura e, se poss#el,
indica ao usurio algo que ele possa fa,er fora do sistema para retomar uma
con#ersa produti#a com o sistema no futuro.
Por exemplo, no caso de um arqui#o corrompido, o preposto pode
apresentar a mensagem KG arqui#o est corrompido. +ente copi-lo
no#amente da sua origemO.
22/01/14 22/01/14 23 23
Pre'en./o e *ecupera./o de *upturas
Pre'en./o e *ecupera./o de *upturas
"omunicati'as
"omunicati'as
?ecanismo de pre#eno e recuperao dos signos-atributos do signo-entidade
22/01/14 22/01/14 24 24
Modela-em de tarefas
Modela-em de tarefas
) partir das ati#idades e representa:es de anlise, podemos estru-
turar cada ob"eti#o do usurio de forma a explorar diferentes estrat8-
gias que o usurio poder seguir para alcana-lo%
) representao de tarefas utili,ada na eng. semi*tica tamb8m se-
gue uma decomposio hierrquica como segue%
%b&eti'o de mais alto n#el 8 representado por um retDngulo com
bordas arredondadas%
&le 8 composto de tarefas, representadas por retDngulos%
) decomposio prossegue at8 chegarmos aos operadores, que re-
presentam a:es atYmicas, ou se"a, podem ser mapeadas direta-
mente em a:es sobre um elemento de interao na interface%
22/01/14 22/01/14 25 25
Modela-em de tarefas
Modela-em de tarefas
&m uma estrutura se+uencial, existe uma ordem de
tarefas de#em necessariamente ser efetuadas pelo
usurio%
>ma estrutura de tarefas independente de ordem
representa um con"unto !e no uma sequ'ncia$ de
tarefas a serem efetuadas pelo usurio%
Para o alcance de um ob"eti#o, h momentos em
que di#ersos cursos de ao so poss#eis. +ais
cursos de ao so representados por uma estrutu-
ra alternati'a5
7e+uencial
$ndependente de ordem
Alternati'a
22/01/14 22/01/14 26 26
Modela-em de tarefas
Modela-em de tarefas
Buando uma tarefa pode ser reali,ada di#ersas #e-
,es, utili,amos uma estrutura iterati'a%
Buando o usurio pode reali,ar uma tarefa a partir
de qualquer momento da interao para atingir o ob-
"eti#o dese"ado, ela 8 dita ub#+ua%
Buando o usurio pode optar por reali,ar ou no
uma tarefa, ela 8 dita opcional.
#terativa
Ub#+ua
%pcional
22/01/14 22/01/14 27 27
Modelo (ierr+uico de )arefas Adaptado
Modelo (ierr+uico de )arefas Adaptado
22/01/14 22/01/14 28 28
Modela-em de $ntera./o
Modela-em de $ntera./o
) ?oWE !Modeling Language for Interaction as Conversation$ foi
pro"etada para apoiar os designers no plane"amento da interao,
moti#ando sua reflexo sobre as estrat8gias de reali,ao de
ati#idades e resoluo de problemas dos usurios que de#eriam
ser apoiadas pelo sistema interati#o.
Ku:O para usurio e Kd:O para o preposto do designer
22/01/14 22/01/14 29 29
"onstru./o dos dia-ramas Mo9$"
"onstru./o dos dia-ramas Mo9$"
) ?oWE permite representar a interao humano computador
como o con"unto de con#ersas que os usurios podem tra#ar
com o preposto do designer para atingir seus ob"eti#os%
) elaborao de um diagrama ?oWE parte geralmente de
definio dos perfis de usurios ou personas, dos ob"eti#os dos
usurios, dos cenrios de anlise e(ou interao e dos signos
mencionados no cenrios%
G diagrama de interao representa como os ob"eti#os
podero ser atingidos durante a interao%
De#e ha#er um diagrama ?oWE para cada papel do usurio,
pois h uma Kcon#ersaO com o preposto do designer o que
dese"a reali,ar%
22/01/14 22/01/14 30 30
"onstru./o dos dia-ramas Mo9$"
"onstru./o dos dia-ramas Mo9$"
La primeira etapa da construo de um diagrama ?oWE, os
designers refletem sobre as seguintes quest:es:
+*picos das con#ersas em direo a um ob"eti#o%
Eon#ersas alternati#as em direo a um mesmo ob"eti#o,
possi#elmente endereando as necessidades e prefer'ncias de
diferentes perfis de usurios%
?udanas de t*pico relati#as a ob"eti#os instrumentais diretos%
Eon#ersas para a recuperao de rupturas, i.e., mecanismos
para os usurios se recuperarem de problemas na comunicao
com o preposto do design%
) consist'ncia entre caminhos de interao semelhantes ou
anlogos.
22/01/14 22/01/14 31 31
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
partindo dos ob&eti'os do usurio
partindo dos ob&eti'os do usurio
Diagramas parciais de interao do professor e do aluno, cu"os t*picos foram extrados do
mapa de ob"eti#os.
22/01/14 22/01/14 32 32
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
falas de transi./o
falas de transi./o
?udanas de t*pico em determinados momentos da interao
!cenas$:
p
22/01/14 22/01/14 33 33
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
definindo acessos ub#+uos
definindo acessos ub#+uos
?udanas de t*pico em +ual+uer momento da interao:
22/01/14 22/01/14 34 34
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
pontos de abertura e encerramento
pontos de abertura e encerramento
Por onde comear e terminar a con#ersaC
22/01/14 22/01/14 35 35
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
processo do sistema
processo do sistema
G sistema decide o rumo da con#ersa de acordo com o que o
usurio disse:
22/01/14 22/01/14 36 36
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
cena de alerta ou captura de erro
cena de alerta ou captura de erro
G preposto comunica um alerta ou captura de erro:
Ku:ZO essa notao indica que a fala corresponde ao t*pico de
cena de destino.
22/01/14 22/01/14 37 37
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
comparando solu.:es alternati'as
comparando solu.:es alternati'as
F poss#el refletir sobre as #antagens e des#antagens de dife-
rentes solu:es de interao.
Gb"eti#os semelhantes de#eriam ter solu:es de interao se-
melhantesC
22/01/14 22/01/14 38 38
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
detal3amento da con'ersa
detal3amento da con'ersa
Easo ha"a depend'ncia entre dilogos, e eles precisem ser
tra#ados em uma determinada ordem, podemos utili,ar a
pala#ra-cha#e =&B:
=&B [
selecionar estado
selecionar cidade
\
22/01/14 22/01/14 39 39
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
detal3amento da con'ersa
detal3amento da con'ersa
&m dilogo para informar os dados de contato de um usurio
poderia ser estruturado da seguinte forma:
informar dados para contato [
d]u: forma de contato !e-mail, telefone ou correspond'ncia$
^G< [
informar e-mail !se forma de contato _ e-mail$
informa telefone !se forma de contato _ telefone$
informar endereo !se forma de contato _ endereo$
\
\
) pala#ra-cha#e pode ser ^G<, G< ou )LD
22/01/14 22/01/14 40 40
"onstruindo um dia-rama Mo9$"!
"onstruindo um dia-rama Mo9$"!
detal3amento da con'ersa
detal3amento da con'ersa
cena com dilo(os
cena com dilo(os e si(nos
22/01/14 22/01/14 41 41
,esi-n de $nterface
,esi-n de $nterface
G design de interface en#ol#e:
&scolha dos estilos de interao do sistema%
Definir como a con#ersa pro"etada ser represen-
tada na interface.
22/01/14 22/01/14 42 42
Estilos de $ntera./o
Estilos de $ntera./o
Winguagem de comando:
>surio precisa utili,ar comandos e memori,ar-los%
nterao tende a ser rpida depois que o usurio aprende.
22/01/14 22/01/14 43 43
Estilos de $ntera./o
Estilos de $ntera./o
Pode ser mais fcil se lembrar das op:es%
Pode le#ar mais tempo para mo#er mos e braos do que digitar um co-
mando.
nterao atra#8s de menus:
Hisa permitir que o usurio se expresse como em uma con#ersa com
uma outra pessoa%
G ob"eti#o principal 8 facilitar o uso de um sistema por usurios no#atos%
Al'm das *arras de menu, *ar+
ras de nave(a,o e menus con+
textuais (pop+up), -hneiderman
tam*'m considera con$untos de
*ot.es de sele,o (checkboxes)
e op,o (radio buttons) como
formas de intera,o por menu
22/01/14 22/01/14 44 44
Estilos de $ntera./o
Estilos de $ntera./o
nterao atra#8s de formulrio:
22/01/14 22/01/14 45 45
Estilos de $ntera./o
Estilos de $ntera./o
?anipulao direta:
Aproxima a intera,o da manipula,o dos o*$etos no mundo
real
&stimula a explora,o com o mouse: cli)ue, duplo cli)ue, clicar
e arrastar
"ais dif/cil para usurios com limita,.es visuais ou motoras
22/01/14 22/01/14 46 46
Estilos de $ntera./o
Estilos de $ntera./o
9?P !9indoNs, cons, ?enus, and Pointers$: adotado nos
ambientes baseados em "anelas.
22/01/14 22/01/14 47 47
*epresenta.:es da $nterface
*epresenta.:es da $nterface
com Usurio
com Usurio
&sboos, wireframes !8 um guia #isual bsico usado em design de
interface para sugerir a estrutura a ser desen#ol#ida e seus relacio-
namentos entre si$;
?odelos, como as linguagens de descrio de interfaces com usu-
rio: >?W, >si^?W !acessem http:((NNN.usixml.org($, ^)?, etc.%
Prot*tipos funcionais%
22/01/14 22/01/14 48 48
*epresenta.:es da $nterface
*epresenta.:es da $nterface
com Usurio
com Usurio

$nterface abstrata
Define agrupamentos e ca-
ractersticas dos elementos
de interface
Exemplo!
Eon"unto de itens com se-
leo simples
$nterface concreta
Define posicionamento e
elementos de interface inte-
rati#os !widgets$
Exemplo!
<epresentar a entrada de
dados como:
22/01/14 22/01/14 49 49
*epresenta.:es da $nterface
*epresenta.:es da $nterface
com Usurio
com Usurio
&sboo em baixa fidelidade !rascunho$: sem muita preocupao com
detalhes dos aspectos grficos:
22/01/14 22/01/14 50 50
*epresenta.:es da $nterface
*epresenta.:es da $nterface
com Usurio
com Usurio
&sboo em baixa fidelidade elaborado em ferramenta computacional,
como a @alsamiq ?oc`ups !acessem http:((NNN.balsamiq.com($
22/01/14 22/01/14 51 51
*epresenta.:es da $nterface
*epresenta.:es da $nterface
com Usurio
com Usurio
&sboo em alta fidelidade representa o desenho completo da interfa-
ce !editor de imagens$, " esto incorporadas as decis:es a respeito
de tamanhos, posi:es, cores, fontes e outros detalhes #isuais de
cada elemento:
22/01/14 22/01/14 52 52
,a $ntera./o para o ,esi-n de
,a $ntera./o para o ,esi-n de
$nterface
$nterface
)cessos ubquos so pontos de incio de con#ersas dirigidas por ob-
"eti#os e, em geral, de#em estar dispon#eis em qualquer momento
de interao, desde que respeitadas suas pre-condi:es%
Xeralmente so mapeados para menus e barras de na#egao:
22/01/14 22/01/14 53 53
,a $ntera./o para o ,esi-n de
,a $ntera./o para o ,esi-n de
$nterface
$nterface
F comum mapear uma cena para unidade de apresentao !tela ou
pgina Neb$:
22/01/14 22/01/14 54 54
,a $ntera./o para o ,esi-n de
,a $ntera./o para o ,esi-n de
$nterface
$nterface
>ma cena tamb8m pode ser mapeada para mais de uma unidade de
apresentao:
22/01/14 22/01/14 55 55
,a $ntera./o para o ,esi-n de
,a $ntera./o para o ,esi-n de
$nterface
$nterface
22/01/14 22/01/14 56 56
,a $ntera./o para o ,esi-n de
,a $ntera./o para o ,esi-n de
$nterface
$nterface
Eena Eonsultar material mapeada para unidade de apresentao:
?ateriais didticos !na 7$%
Dilogo #er materiais mapeado para a tabela de materiais didticos !na
;$%
Jala de usurio u: cadastrar no#o material mapeada para lin` Eadas-
trar no#o material didtico !na 1$%
Jala de usurio u: editar material ^ mapeada para os lin`s na tabela
!na .$%
Eena &ditar material mapeada para duas unidades de apresentao
semelhantes, conforme a fala de transio de usurio que le#a at8 ela:
Eadastrando no#o material didtico, destino da fala u: cadastrar no#o material di-
dtico !na 6$%
&ditando material didtico, destino da fala u: editar material ^ !na Q$.
22/01/14 22/01/14 57 57
,a $ntera./o para o ,esi-n de
,a $ntera./o para o ,esi-n de
$nterface
$nterface
Jalas do preposto geralmente so representadas como mensagens
de erro ou de status:
) fala d: material gravado foi mapeada para mensagem de status na unidade de
apresentao correspondente A cena de destino !na 7$%
) fala d: problema na gravao foi mapeada para uma unidade de apresentao
diferente !na ;$:
22/01/14 22/01/14 58 58
Es+uema "onceitual de 7i-nos!
Es+uema "onceitual de 7i-nos!
Express/o
Express/o
Eada signo pode apresentar uma expresso diferente, confor-
me o seu interlocutor e o contexto de interao em que o signo
ocorre%
Buando o interlocutor 8 o preposto do designer !emissor _ d$,
o signo 8 apresentado ao usurio atra#8s de elementos de in-
terface para sada de dados !output$%
)o passo que quando ambos, usurio e preposto, falam sobre
o signo !emissor _ d]u$, suas express:es so elementos de in-
terface para entrada de dados !input$
22/01/14 22/01/14 59 59
Es+uema "onceitual de 7i-nos!
Es+uema "onceitual de 7i-nos!
Express/o
Express/o
22/01/14 22/01/14 60 60
Pro&eto do 7istema de A&uda
Pro&eto do 7istema de A&uda
G sistema de a"uda 8 uma forma de comunicao pri#ilegiada
entre designer e usurios, uma #e, que 8 uma comunicao
direta%
G designer de#e tentar antecipar as d2#idas dos usurios para
registrar durante o design respostas adequadas%
22/01/14 22/01/14 61 61
Pro&eto do 7istema de A&uda
Pro&eto do 7istema de A&uda
&xemplos de d2#idas comuns:
22/01/14 22/01/14 62 62
Pro&eto do 7istema de A&uda
Pro&eto do 7istema de A&uda
Pergunta informativa pode ser respondidas com os ob"eti#os dos usu-
rios que foram identificados nas personas, elaborados nos cenrios e or-
gani,ados no mapa de ob"etos%
Buest:es descritivas podem ser respondidas em dois n#eis:
L#el conceitual, relacionado ao domnio, descrito no incio do processo de
desen#ol#imento%
L#el operacional, relacionado a interface, ser definido "unto com os mode-
los de interao e de interface%
Perguntas procedimentais, de escolha, sugestivas e investigativas
so #inculadas principalmente aos modelos de tarefa e de interao:
>ma resposta mais detalhada pode ser obtida nos modelos de interao e in-
terface, descre#endo os caminhos percorridos pelo usurio e elementos de
interface que de#em ser manipulados a cada instante%
22/01/14 22/01/14 63 63
Pro&eto do 7istema de A&uda
Pro&eto do 7istema de A&uda
)s perguntas interpretativas, navegacionais e histricas es-
to relacionadas principalmente ao modelo de interao:
<epresenta os caminhos que o usurio pode seguir e que indica-
:es o sistema fornece sobre em que ponto da interao ele se
encontra a cada instante%
Perguntas relacionadas a motivao no podem ser deri#adas
diretamente dos modelos:
Precisam ser explicitamente respondidas pelos pro"etistas,
tais perguntas di,em respeito ao sistema como um todo, e
no a um ob"eti#o especfico.

You might also like