Modelos e Técnicas de Modelagem em IHC
Modelos e Técnicas de Modelagem em IHC
• Modelo para processo de design de
interfaces
• Análise e Modelagem de Usuários
• Análise e Modelagem de Tarefas
• Modelagem de Comunicação
• Storyboarding
• Ferramentas de Apoio à Construção de
Interfaces
• SERG
Exercícios
Mudança de Paradigma
desenvolvimento
centrado no
sistema
desenvolvimento
centrado no
usuário
SERG
desenvolvimento
situado no contexto
organizacional
e social
 envolvimento de usuários no processo de design
 considerações sobre grupos de usuários com tarefas e
papéis diferentes (ex: gerentes e técnicos)
 importância da qualidade de IHC
tual de conceber e descrever
equisitos de seus potenciais
Modelos para processo de design de interfaces
mentas, aliadas à criatividade e
designer
abstrata, rigorosa, idealmente
duto, utilizando uma notação
(avaliação “formal”)
Software é um produto intelectual. O design de software
é portanto uma atividade que precisa de ferramentas
e métodos adequados à produção intelectual.
do que foi concebido, utilizando
dimensões reduzidas, com o
avaliação (avaliação no contexto)
de + interação
nde da espcificação dos modelos
ação
análise
om o usuário: testes
de usabilidade
avaliação
SERG
prototipação
especificação
geração
protótipos
O Ciclo Estrela
Análise de
Tarefas
Implementação
Avaliação
Análise de
Requisitos
Prototipação
SERG
Design
Conceitual
Características Cognitivas dos Usuários
•
percepção
– os sentidos
– a influência do contexto
TL O
– gestalt
– codificações
•
ação
– movimentos
– aparelho fonador
•
memória
– memória “muscular”: rotinas automatizadas
– memória de trabalho: informação de uso imediato
– memória de longo prazo
SERG
Características Cognitivas – O que fazer
• focalizar atenção
–
–
–
–
estruturar e agrupar informação
equilibrar a quantidade de informação
usar recursos visuais: dicas espaciais e temporais; cores
usar recursos sonoros: beep
• alternar entre tarefas primárias e secundárias
• considerar restrições de memória
– usar palavras e ícones familiares
– lembrança x memorização
SERG
Perfil de Usuários
• Problema
– Nenhum estilo de interface serve para todos os
tipos de usuário.
• A solução está na resposta à pergunta:
– Quem vai usar seu software?
mensagem
designer do
sistema
SERG
?
usuário
uem são os usuários e caracterizá-los
temas multi-usuários, é importante
como os diferentes papéis estão
Modelagem de Usuários – Fatores
O objetivo da análise e modelagem de usuários é:
ma cometer erros e precisa de auxílio e apoio
endizado (e.g. help on-line e tutorial)
– que
identificar
quem são
os
ação mais rápida,
ofereça shortcuts
para
– e caracterizá-los bem.
sempenho
usuários
mínio:
Deve
especificar:
hece o domínio
(dicas
e recuperação de erros)
nhece o domínio e diferentes maneiras de
efa (como estender
aplicação)
– que
atividades exercem,
ral: línguas e culturas
– quedistintas
capacidades
possuem,
– que gostos e metas têm,
– que caminhos evolutivos podem ou devem trilhar,
– e assim por diante.
SERG
uem são os usuários e caracterizá-los
temas multi-usuários, é importante
como os diferentes papéis estão
Modelagem de Usuários – Fatores
Exemplos:
•
papel ou função do usuário
•
familiaridade com computadores e evolução do usuário
•
freqüência de uso da aplicação
ma cometer erros e precisa de auxílio e apoio
– on-line
papel do
usuário na organização
endizado (e.g. help
e tutorial)
– impacto do novo sistema em suas funções
ação mais rápida, que ofereça shortcuts para
• nível de conhecimento do domínio da aplicação
sempenho
– novato
mínio:
– especialista
– inovador
hece o domínio (dicas
e recuperação de erros)
nhece o domínio e diferentes maneiras de
– aplicação)
iniciante >> em evolução
efa (como estender
– experiente >> em evolução
ral: línguas e culturas distintas
– ocasional
– freqüente
•
contexto sócio-cultural e psico-físico
– acessibilidade universalizante
SERG
Perfil de Usuários Passo-a-Passo (I)
•
determine as categorias de usuários
–
–
•
•
determine as características relevantes dos usuários
elabore um questionário preliminar
–
•
•
geralmente semelhantes às funções e cargos da organização
ex: gerentes, técnicos, secretários, recepcionistas, auxiliares
inclua uma introdução sobre o objetivo e os benefícios do
questionário
obtenha feedback sobre o questionário (da gerência) e revise-o
conduza um questionário-piloto com entrevistas e revise-o
– clareza da redação, completeza, exclusividade mútua,
adequação das questões
– utilize 2 ou 3 usuários de cada categoria
SERG
Perfil de Usuários Passo-a-Passo (II)
•
selecione uma amostra de usuários
–
•
distribua os questionários
–
•
utilize planilhas, editores de texto, etc., permitindo acomodar
comentários
digite, resuma e interprete os dados
–
•
indique prazos e facilite a devolução
projete a entrada e análise de dados
–
•
ex: 10% da população de cada categoria
resuma as características-chave e suas implicações para a
usabilidade e comunicabilidade da interface
apresente os resultados
–
–
SERG
distribua as conclusões e implicações de design, com o resumo
dos dados como apêndice, para os outros membros da equipe
prepare uma apresentação oral
Usuários na Web: Considerações
• Problema
– muitas vezes são inacessíveis ou desconhecidos
• Alternativa
– questionários para amostra significativa de
usuários-alvo
– questionários no próprio site
SERG
Exercício – Perfil de Usuários
• descrição
– Passo 1: Elaborar um questionário para os
usuários
– Passo 2: Aplicar o questionário
– Passo 3: Interpretar respostas obtidas e reavaliar
o questionário
SERG
:
e a perspectiva do usuário sobre a tarefa,
interpretação do designer desta perspectiva
s objetivos?
s tarefas necessárias para alcançar esse
zando um determinado dispositivo?
qüência de ações que o usuário precisa executar?
Análise de Tarefas
ermite que se defina o modelo computacional
eja, o modelo conceitual do designer.
jetos?
erações?
• Objetivo da análise: fornecer ao designer a
visão dos usuários das tarefas que eles
precisam realizar.
– Entrevistas, reuniões e observação direta
– Cenários
– Questionamento sistemático
SERG
Análise de Tarefas - Decomposição
SERG
Análise de Tarefas – Cenários
tos sobre as tarefas e os
ealizado quando os analistas
ões do processo de trabalho.
• narrativas textuais, pictóricas ou encenadas, de situações
ão de narrativas
de
fictícias
mas plausíveis (senão desejáveis) de uso situado
roblema que permitem
a
da aplicação
tes de design.
m então avaliar,
criticar
e fazer
• devem
ser
ricos
em contextualização e possuir um foco
claro que transmita a usuários e designers as idéias sendo
s para se formar
uma base de
testadas
aprendizado de IHC ou no reuso
• meio de representação de fácil compreensão para os
usuários envolvidos (mesmo de formação heterogênea)
• podem ser utilizados em diversos pontos do processo de
design
SERG
Cenário para um Sistema de Biblioteca
“Um aluno chega na biblioteca e procura as referências
dos livros-texto desejados.”
“Um aluno chega na biblioteca para procurar livros-texto
dos cursos que está freqüentando. Ele entra no sistema e
seleciona os cursos, e obtém uma lista de todos os livrostexto e sua localização na biblioteca. Seleciona a opção
de ‘bibliografia complementar’, e uma nova lista de livros
e artigos lhe é apresentada. Ele então manda imprimir
todas as referências encontradas.”
SERG
Análise de Tarefas – Questionamento
sistemático
• Objetivo: para se entender melhor o processo
ções do domínio através de narrativas
de compreensão
de estórias em narrativas
ada se o processo
de compreensão
e projetista for realizado de maneira
l., 1994] • Técnica (Caroll et al.’94):
stica que permite
a psicólogos
e cenário
–
geração
do
onteúdo e a estrutura de informações
– elaboração da rede de proposições
ões integrantes do contexto são
– análise
rrativa
questionamento
E PRECISAR,–BASEAR
NO CENÁRIO sistemático
IMA TRANSPARÊNCIA
• Por
SERG
quê? Como? O que é? Então “isto” é/ocorre “assim”?
Modelagem de Tarefas
• Objetivo
– formalizar as tarefas de forma a mapeá-las na
interface
• Modelos:
–
–
–
–
SERG
TAG
UAN
GOMS
Modelo Keystroke-Level
Modelos de Tarefas
• Task-Action Grammar (Payne and Green’89)
– baseada em gramática gerativa, permite tratar
diversos tipos de consistência, a nível lexical,
sintático e semântico
• Modelo UAN (Hix and Hartson’93)
– permite representar aspectos do comportamento
do sistema do ponto de vista do usuário, ou seja,
que tarefas e ações o usuário realiza na interface
(útil para interfaces de manipulação direta)
SERG
e visual
braço-mão-dedo e cabeça-olho
de decisão e acesso a memória
Modelos de Tarefas – Continuação
• Modelo
GOMS
operadores
primitivos, como
uma (Card et al.’83)
ão clicado, os atos de apontar, de
– pretende
representar o comportamento dinâmico da
spositivo, desenhar,
realizar uma
perar a resposta interação
do sistema. com o computador, com base num modelo do
de uma tarefa são
calculados sobre humano que possui três subsistemas de
comportamento
qüências de operadores.
interação: perceptual, motor e cognitivo
• Modelo Keystroke-Level (Card et al.’83)
– parte da família GOMS de modelos, mas em um nível mais
baixo, o nível de atividade motora
– objetivo: prever o tempo que o usuário leva para realizar
uma tarefa.
SERG
Modelo GOMS (Card, Moran, and Newell’83)
• Metas (Goals): Aquilo que o usuário deseja fazer
• Operadores (Operators): Ações humanas básicas que o usuário
executa (ex: olhar tela, escutar beep, pressionar tecla, decidir,
lembrar um item da memória de trabalho, etc)
• Métodos para atingir as metas (Methods): Seqüência de passos
para se atingir uma meta. Seus passos podem ser submetas,
operadores ou uma combinação de ambos
• Regras de seleção de métodos (Selection rules): Regras para
seleção do método a ser utilizado
SERG
GOMS Simplificado (Lee’93)
• Analisa apenas metas e submetas
• Pode ser expandido até se tornar um modelo GOMS
completo
• Não requer que decisões de design sejam tomadas
• Modelagem:
–
–
–
–
–
–
–
SERG
faça a análise top-down
use termos gerais para descrever metas
examine todas as metas antes de subdividi-las
considere todos os cenários de tarefas
use sentenças simples para especificar as metas
retire os passos de um método que sejam operadores
pare a decomposição no limite do design de interface
Exemplo – GOMS simplificado
Vamos modelar a tarefa *;1: consultar uma referência.
*;1. consultar uma referência
*;1.1a:
se (conhecer dados precisos sobre a referência) então (realizar busca)
{
1: iniciar busca
2: entrar dados conhecidos
3: disparar busca
4: verificar dados apresentados
5: encerrar consulta
}
*;1.1b:
se (não conhecer dados precisos sobre a referência)
então (realizar varredura)
{
1: iniciar varredura
2: comparar referência apresentada com a referência desejada
3a: se (referência apresentada não for a desejada e houver próxima referência)
então ({
3a.1: ir para a próxima referência
2: comparar referência apresentada com a referência desejada
})
3b: se (referência apresentada for a desejada ou estiver na última referência)
então (encerrar consulta)
}
SERG
Raquel O. Prates:
Exemplos de tarefas a serem definidas:
•entrar com projeto novo
•entrar com tarefa ou compromisso novo
•alterar dados de projeto existente
•alterar dados de tarefa ou compromisso existente
•consultar dados de projeto (texto + gráficos)
•consultar dados de tarefa
•emitir relatórios de projeto (impressão e web)
– modelar 2 tarefas cotidiana dos usuários
•entrar com aniversários e feriados
TaskPlus,
usando
GOMS
simplificado
•emitir relação
ou calendário
com asotarefas
de um
período
Exercício – Modelagem de Tarefas
• descrição
do
• dicas
– identifique os objetos e ações do sistema, sob o
ponto de vista do usuário
– top-down
– use termos gerais
– use sentenças simples
– para cada tipo de usuário
SERG
Modelagem de Comunicação
• Designer define o QUE vai dizer na metamensagem
– na
Conteúdo:
o QUE vai dizer
meta-mensagem
COMO vai dizê-lo • elementos do
conteúdo
domínio a serem representados
• operações sobre estes elementos
que é o que se percebe
• ações para o usuário controlar uma operação
ue é o que o signo significa
ou representa
(comandos)
• Designer define COMO vai dizê-lo
do signo deve revelar seu conteúdo, ou seja,
ormações sobre seu significado
nto.
– Expressão:
SERG
• widgets para comunicar elementos, operações e
comandos
• organização e layout dos widgets escolhidos
Exemplo de Modelagem de Comunicação
Conteúdo:
•
•
•
•
Meta-mensagem: Para o usuário achar
uma tarefa ele deve fornecer um ou mais
dados sobre a tarefa desejada, e em
seguida acionar a busca ou desisitir.
Elementos: dados da tarefa, no caso,
nome da tarefa, projeto correspondente,
ou data de início da mesma.
Operações: procurar tarefa de um
projeto, a partir de seus dados.
Ações:
– fornecer dados
– ativar a operação
– desisitir da operação
SERG
Expressão:
Raquel O. Prates:
Exemplos de tarefas a serem definidas:
•entrar com projeto novo
•entrar com tarefa ou compromisso novo
•alterar dados de projeto existente
•alterar dados de tarefa ou compromisso existente
• descrição
•consultar
dados de projeto (texto + gráficos)
•consultar dados
tarefano modelo de tarefas, definir as telas da
– comdebase
•emitir relatórios de projeto (impressão e web)
aplicação
•entrar com aniversários e feriados
•emitir relação
ou calendário
com as tarefas
de um período
– definir
os elementos
que devem
compor cada tela
Exercício – Modelagem de Comunicação
– definir a meta-mensagem que pretende passar para o
usuário através de cada tela
• dicas
– nem sempre um objetivo do modelo de tarefa será
mapeado para uma tela
• considere a quantidade de informações em cada tela
– verificar a existência de informação persistente
SERG
Modelagem da Comunicação II —
Discurso
• navegação entre telas
• diagramas de transição
“OK”
consulta a
tarefas
tarefa X
resultado
da
consulta
“Nova consulta”
SERG
tarefa
Raquel O. Prates:
Exemplos de tarefas a serem definidas:
•entrar com projeto novo
•entrar com tarefa ou compromisso novo
•alterar dados de projeto existente
•alterar dados de tarefa ou compromisso existente
•consultar
dados de projeto (texto + gráficos)
• descrição
•consultar dados de tarefa
•emitir relatórios de projeto (impressão e web)
– definir a navegação entre as telas identificadas
•entrar com aniversários e feriados
•emitir relação ou calendário com as tarefas de um período
Exercício – Modelagem de Navegação
• dicas
– defina que ação leva o usuário a passar de uma tela
para outra
– evite criar caminhos muito longos para ações muito
freqüentes
SERG
Representação por Storyboarding
tes:
o mais adequados para a análise das
anto storyboards
permitem a validação dos
• aplicações
elaboração de protótipos não operacionais
– na análise: visualização
iniciais.
de cenários das tarefas do usuário
no contexto de trabalho
– no design: visualização de cenários do uso da interface
– na avaliação: testes de usabilidade e redesign
• mídias
– material impresso ou plástico
– vídeo ou fotografia
– computadores ou equipamento multimídia, utilizando
ferramentas de alto nível
SERG
Storyboarding
SERG
Ferramentas de Apoio à Construção de Interfaces
• biblioteca de widgets
• toolkits
que a utilização
de ferramentas de apoio à
faces não é o suficiente para garantir a
• ambiente de implementação
ace resultante.
(interação
funcionalidade)
de se desenvolver
ferramentas +
com
base em
ica que dêem apoio ao desenvolvimento de
dade
• critérios de avaliação para estas
ferramentas
–
–
–
–
–
–
–
–
–
SERG
profundidade
alcance
portabilidade
facilidade de uso
eficiência para projetistas
qualidade das interfaces resultantes
desempenho das interfaces resultantes
preço
suporte