Desenho da Interao

Engenharia de Usabilidade Prof.: Clarindo Isaas Pereira da Silva e Pdua

Synergia / Gestus

Desenho da Interao

Departamento de Cincia da Computao - UFMG

Clarindo Pdua
2

Desenho da interao

Desenho da interao

Referncias
l

Rosson, M. B., Carrol, J.M. Usability Engineering: Scenario Development of Human-computer Interaction. Morgan kaufmann Publishers, 2002. Hix, D .; Hartson, H. R. Developing User Interfaces: ensuring usability through product & process, John Wiley and Sons, 1993. Constantine, L.L., & Lockwood, L.A.D. Software for Use : A Practical Guide to the Models and Methods of Usage-Centered Design, Addison-Wesley, 1999. Constantine, L.L., Software for Use : A Practical Guide to the Models and Methods of Usage-Centered Design, Addison-Wesley, 1999. www.foruse.com
3

Contedo
l l l

Modelagem conceitual Modelagem de contedo e navegao Desenho detalhado

Desenho da interao

Desenho da interao > Modelagem Conceitual

Modelagem conceitual
l

Atividades
l

Desenho em alto nvel, preocupa-se com a s ntese de objetos e operaes.

l

Definio de modelos mentais

l

Modelos mentais ou metforas a serem usados na interao.

Independente de aparncia.

Definio do modelo conceitual esttico

l

l l

Envolve aspectos estticos e dinmicos da interao. Modelos mentais (ou metforas) formam um pano de
l

Define objetos que faro parte do desenho e relacionamentos entre eles.

Definio dos roteiros de desenho.

l

fundo onde se desenvolve o desenho da interface.

Define aspectos dinmicos externos da interao, isto , apresenta uma viso do usu rio.

Desenho da interao > Modelagem Conceitual > Atividades

Desenho da interao > Modelagem Conceitual > Atividades

Definio de modelos mentais

l

Busca-se definir modelos mentais associados s atividades suportadas pelo produto de software.
l

Definio do modelo conceitual est tico

Define-se objetos que atuaro na interao.
l

l l

Os modelos mentais sero utilizados pelos usu rios na interao. Como em todo trabalho de modelagem, deve haver uma an lise de
l

Os objetos incluem pessoas, equipamentos, artefatos, recursos, etc que estaro envolvidos na interao.

alternativas, pesando os prs e contras de cada uma delas.

l

importante tambm definir relacionamentos entres os objetos. Pode-se organizar os modelos em diagramas associados a tarefas ou a casos de uso.

Os modelos mentais sero passados atravs das imagens (ou outros meios) que sero colocadas na interface.
l l

Pode-se usar diagramas de classe ou de objetos da UML ou uma descrio informal.

l

Modelos mentais mais complexos podem exigir treinamento para que sejam passados aos usurios.

A deciso do que utilizar vai levar em conta a formao da equipe (conhecimento de UML) e a complexidade do modelo.

Desenho da interao > Modelagem Conceitual > Atividades

Desenho da interao > Modelagem Conceitual > Atividades > Definio dos roteiros de desenho

Definio dos roteiros de desenho

l

Define aspectos dinmicos externos da interao, isto , apresenta uma viso do usurio.

Roteiros so estrias sobre pessoas e suas atividades (Rosson & Carrol, 1990).
l

Descrevem situa es de interesse onde pessoas realizam suas atividades. Esto para a usabilidade assim como os casos de uso esto para a engenharia de software.

Roteiros podem ser utilizados para uma descrio da interao.

l

Diagramas de atividades, de estado ou de interao tambm podem ser utilizados para complementar a descrio.
9

Em geral, descrevem uma instncia da intera o.

l

Mas alternativas importantes podem tambm ser descritas.

10

Desenho da interao > Modelagem Conceitual > Atividades > Definio dos roteiros de desenho

Desenho da interao > Modelagem Conceitual > Atividades > Defini o dos roteiros de desenho

Contedo de um roteiro de desenho

l

Roteiros de dom nio de problema descrevem essas estrias no contexto de uso antes da introduo do produto em desenvolvimento.
l

Elemento
Cen rio

Definio
Detalhes da situao que motivam ou explicam os objetivos, aes, rea es dos atores. Pap is de pessoas que interagem com o ambiente do cen rio; eventualmente com suas caractersticas relevantes. Aspectos da situao que motivam as aes realizadas pelos atores.

Exemplo
Ambiente de venda de eletrnicos em um supermercado, estado da rea de trabalho, equipamentos, etc no incio da narrativa. Vendedor utiliza o software para realizar consultas de equipamentos e suas caracater sticas. Vendedor especializado em vinhos e um cliente querendo comprar um vinho para presente.

Envolvem um contexto de uso mais amplo que o representado pelos

Atores

casos de uso de anlise da engenharia de software.

l

Roteiros de desenho da interao descrevem estrias no contexto de uso desenhado, envolvendo o sistema em desenvolvimento.
l

Objetivos da tarefa

Envolvem um contexto de uso mais amplo que o representado pelos

Planos

O objetivo da a o que se realize a venda com satisfa o do cliente. O cliente est inseguro sobre o que comprar e busca economia. O vendedor busca estimular a venda sem ser intrusivo. O vendedor oferece orienta o sobre os v rios tipos de vinho. O cliente informa a faixa de preo que tem em mente na compra.

casos de uso de desenho da engenharia de software.

Atividade mental que visa converter objetivos em comportamentos

11

12

Desenho da interao > Modelagem Conceitual > Atividades > Defini o dos roteiros de desenho

Desenho da interao > Modelagem Conceitual > Atividades > Defini o dos roteiros de desenho

Contedo de um roteiro de desenho

Elemento Definio
Avalia o Atividade mental que visa interpretar caractersticas da situa o. Comportamento observ vel das pessoas

Exemplo de roteiro
Roteiro: venda de vinho no supermercado (com apoio do produto Merci-u). James, um vendedor especializado em vinhos, utiliza o Merci -u para apoiar seu trabalho de vendas. Jos, um cliente, deseja comprar uma garrafa de vinho para presentear um amigo. Jos est indeciso sobre o que comprar, deseja otimizar a relao custobenefcio. Jos tem em mente um presente na faixa de R$ 50,00. Teria reserva em revelar este valor para o vendedor, mas se sente a vontade para inform-lo ao Merci-u (esta seria uma das primeiras informaes solicitada pelo software). O produto lista 10 sugestes de vinhos na faixa de preo pretendida por Jos.

Exemplo
O vendedor procura identificar o nvel de conhecimento ou sofistica o do cliente. O cliente avalia se seu amigo gostaria de determinado vinho. O cliente procura por determinados tipos de vinho. O cliente consulta o produto xxx a procura de informa o sobre caractersticas do vinho. O vendedor se posiciona ao lado, discretamente, intervindo para ajudar somente se necessrio.

Aes

Eventos

Ocorrncias externas ou internas que podem influenciar a atividade. Podem ser no ser percebidas pelos atores mas importante para o roteiro.

O namorado ou namorada sugere a compra de outro tipo de presente. Alguem chama o vendedor para outra tarefa.

O vendedor est posicionado discretamente, pronto para ajudar se solicitado. James sabe que, muitas vezes, o cliente se sente constrangido em transparec er que entende muito pouco (quase nada) de vinhos e que no se sente a vontade para informar a faixa de preo do presente pretendida.

13

14

Desenho da interao > Modelagem Conceitual > Atividades > Defini o dos roteiros de desenho

Desenho da interao > Modelagem Conceitual > Atividades > Defini o dos roteiros de desenho

Exemplo de roteiro
... Eventualmente, Jos pede a opinio do vendedor. James, pergunta sobre o gosto do amigo de Jos. Discretamente, consulta o Merci-u para conhecer mais detalhes do perfil de vinho desejado pelo cliente, principalmente a faixa de preos que o cliente se dispe a gastar. James comenta sobre as vrias opes de tipos de vinho, fornecidas pelo Merci-u, de acordo com o perfil desejado pelo cliente. O Merci-u utilizado para consultas e eventuais detalhamentos de alguma informao. Em particular, com auxlio do Merci-u, pesquisa e apresenta as ofertas de produtos que se encaixem no perfil de vinho desejado pelo cliente, visando oferecer um bom servio.
l
l

Anlise de argumentos
l

Roteiros de desenho tamb m devem ser complementados com uma anlise de argumentos.
l

So identificadas possveis variaes relacionadas aos roteiros identificados e analisados prs e contras. Situao: utilizao de um formato de hipertexto na interface. Prs
l

Por exemplo:
l l

Permite ao usurio consultas no nvel de detalhamento que julgar conveniente. Pode ser uma forma eficiente de organizar a informao. Usurio pode ter dificuldade com a navegao.

Contras
l

15

16

Desenho da interao > Modelagem conceitual

Desenho da interao > Modelagem conceitual

Exerccio 1: modelagem conceitual

l

Soluo do exerccio 1
l l

Objetivo: produzir partes do desenho conceitual da interao com o usu rio para a agenda eletrnica. Tempo: 20 minutos: Atividades.
l l

Modelo mental: recipientes de tempo organizados como um calendrio. Objetos de interao

l

l l

Compromissos.
l

Propriedades: data, hor rio, descrio, participantes, lugar e durao

Defina modelos mentais que se deseja passar aos usu rios. Escreva uma lista de objetos de interao, suas propriedades e o relacionamento entre eles. Defina conceitualmente como os usu rio vero estes objetos. Determine operaes que sero realizadas envolvendo os objetos na utilizao pelos usurios. Descreva um roteiro de desenho mostrando a marcao de reunio de grupos de pessoas.
17
l l

Recipientes de tempo (ver adiante)

Objetos sero vistos como representao hier rquica do conjunto de compromissos: ano -> ms -> dia -> hora. Compromissos esto em unidades de tempo ( time slots). Mtodo de acesso: usurio navega entre ano, ms, dia e unidades de tempo.

l l

18

Desenho da interao > Desenho conceitual > Soluo do exerccio 1

Desenho da interao > Modelagem de Conte do da interface

Operaes:
l

Marcao de compromisso; Marcao de compromissos de reunio de grupos de pessoas. Modificao de compromissos .

Modelagem do contedo da interface

l l

Como o usurio executar as operaes?

l

Modelo esttico Modelo dinmico

Como so poucas, utilizaremos botes para as operaes Menus pull-down sero utilizados para controle de nvel de viso (ms, semana ou dia).

19

20

Desenho da interao > Desenho detalhado > Modelagem de Conte do da interface

Desenho da interao > Desenho detalhado > Modelagem de Conte do da interface

Visa a criao de um modelo simplificado da interface, onde se trabalha em nvel de espaos de interao.

Um espao de interao um espao de trabalho onde o usurio tem disponvel ferramentas para realizar suas atividades utilizando o software. Corresponde a um atelier ou um ambiente virtual de trabalho. No software, um espao de interao vai corresponder a agrupamento de telas (ou pginas web), telas, ou mesmo partes de telas.

A modelagem de contedo busca representar a estrutura da interface e navegao.

21

Pode-sefazer avaliaes de usabilidade com prot tipos correspondentes aos modelos.

22

Desenho da interao > Desenho detalhado > Modelagem de Conte do da interface

Desenho da interao > Desenho detalhado > Modelagem de Conte do da interface > Modelo est tico

Modelo esttico
l

Descreve a interface em termos de distribuio de contedos em espaos de interao.

O Modelo descreve um hierarquia de espaos de interao.

Pode ser criado e avaliado com a utilizao de cartes ou post-its em um quadro ou com ferramentas de software, usando diagramas UML, por exemplo.

23

24

Desenho da interao > Desenho detalhado > Modelagem de Conte do da interface > Modelo est tico

Desenho da interao > Desenho detalhado > Modelagem de Conte do da interface > Modelo est tico

Exemplo de modelo esttico

l

Documentar com:
l l

Texto explicativo e Diagramas UML mostrando a hierarquia de espa os de interao.

l

Pacotes lgicos so utilizados para representar a organizao hierrquica entre espaos de intera o. Relacionamentos de associao indicam possibilidade de navegao. Relacionamento de associa o indicam semelhana de espaos (com esteretipo <<affinity>> ) Relacionamentos de agregao ou composio podem indicar relao parte-todo entre espa os de interao, tipicamente, entre elementos de interao e suas telas (ou pginas). Relacionamento de generalizao podem representar heran a entre espaos de intera o.

l l

Ver site exemplo em: http://www.dcc.ufmg.br/~clarindo/disciplina s/eu/material/.

25

26

Desenho da interao > Desenho detalhado > Modelagem de Conte do da interface

Desenho da interao > Desenho detalhado > Modelagem de Conte do da interface

Modelo dinmico
l l

Exemplo de modelo dinmico

l

Usado para representar navegao. Documentar com:

l

Ver site exemplo em: http://www.dcc.ufmg.br/~clarindo/disciplinas/ eu/material/.

Diagramas de sequncia ou de comunicao com objetos representando telas (ou pginas Web) e mensagens indicando navegao

27

28

Desenho da intera o

Desenho da interao > Desenho detalhado

Desenho detalhado
l

H uma distino entre o desenho propriamente dito e o modo como se representa o desenho para comunicar aos outros

Desenho de telas em refinamentos sucessivos.

l

suas idias.
l

Chega-se ao nvel de se preocupar com a aparncia de objetos, navegao entre telas, redao de mensagens, rtulos (labels) e opes de menus.
29

Existem tcnicas formais para a representa o de desenhos, mas inicialmente costuma-se usar os cenrios desenhados.

Prottipos so, em essncia, conjuntos executveis (ainda que manualmente) de cenrios.

30

Desenho da interao > Desenho detalhado

Desenho da interao > Desenho detalhado

Exerccio 2: desenho inicial de cenrios

l

Exerccio 2 : desenho inicial de cenrios

l l

Objetivo: desenvolver uma apresentao visual inicial para a agenda eletrnica.

Artefato: desenho de telas em papel. Ateno: no entre em muitos detalhes como cor de cones e aparncia de menus, j que o desenho ainda est muito sujeito a mudanas

l l

Tempo: 1/2 hora: Atividades: esboce o layout das telas principais, incluindo os objetos de interao, menus, botes e cones. Coloque nomes de funes e defina o comportamento dos objetos quando importante.
31 l

Se preferir, para quem estiver familiarizado, pode -se usar ferramentas de prototipa o baseada em computador.

32

Desenho da interao > Desenho detalhado

Desenho da interao > Desenho detalhado

Soluo do exerccio 2
l l

Exerccio 3: avaliao inicial de usabilidade

Objetivo: obter feedback .inicial do desenho de cenrio Tempo: 20 minutos: Atividades: mostrar o esboo de cenrios iniciais a outras pessoas e pedir uma avaliao.
l

Pe a-lhes para simular o uso do sistema, apontando os pontos considerados positivos e negativos.

O desenho reflete o modo com as pessoas trabalham com agenda ? Tente identificar sobrecarga de memria imposta ao usu rio. Por exemplo, o desenho exige empilhamento para executar alguma tarefa ou o trabalho direto com fechos apropriados.

O desenho adequado para as habilidades dos usu rios? Existe uma mapeamento cognitivo direto entre o modo como os usu rios executam suas tarefas e o modo permitido pelo desenho?

33

34

Desenho da interao > Desenho detalhado

Desenho da interao > Desenho detalhado

Soluo do exerccio 3
l

Exerccio 4: melhoria do desenho inicial

Objetivo: melhorar o desenho inicial baseado na primeira avaliao. Tempo: 20 minutos: Atividades: use papel com recortes imitando elementos de interface, Post-it , transparncias, flip-chart, quadros ou qualquer artifcio para redesenhar cen rios e desenvolver a interao.
l l

l l l

O cenrio no se parece com um calendrio. O mecanismo de controle de viso confuso. O mecanismo de entrada de compromissos no direto (melhor permitir entrada diretamente nas unidades de tempo).

l l

Trabalhe em grupo, discuta. Seja criativo, divirta-se!

Artefatos: cenrios em papel, transparncias, ou prottipo gerado em computador.

Ateno: no se prenda a detalhes, mantenha o foco das discusses.

35

36

Desenho da interao > Desenho detalhado

Desenho da interao > Desenho detalhado

Soluo do exerccio 4
l l l l

Novo leiaute deve representar calendrio real. Modelo Mental para acesso a calendrio utiliza o conceito de agenda em papel. Acesso a compromisso direto nas unidades de tempo. Mecanismo de controle de viso torna -se natural.
l

Soluo do exerccio 4: cenrio melhorado

Alas permitem acesso r pido a tempos desejados.

Foi acrescentado caracterstica (feature) de busca de seq ncias de caracteres (necessrio atualizar documentos de anlise).

Apesar das limita es de resolu o, as diversas vises devem dar sempre um idia de carga de compromissos.
l

Poderia, tambm, ser acrescentada uma viso por ano, tipo um calendrio em que os dias com compromissos so marcados em negrito.

37

38

Desenho da interao > Desenho detalhado

Desenho da interao > Desenho detalhado

Soluo do exerccio 4: funo de busca de seqncia de caracteres

Foi decidido rever tela posteriormente por no haver consenso

Soluo do exerccio 4: detalhe da viso por semana

39

40

Desenho da interao > Desenho detalhado

Desenho da interao > Desenho detalhado

Julgou-se desnecessrio mecanismo de fechamento da janela: mudan a de janela pode ser automtica, associada a seleo do usurio.

Soluo do exerccio 4: detalhe da viso de dia e unidade de tempo

Soluo do exerccio 4: Detalhe da caixa para especificao de tarefas recorrentes (Netscape).

41

42