o design de ihc
TRANSCRIPT
EPOCA 2009 Jair C LeiteERBASE 2010ERBASE 2010
O design de IHC
Jair C Leite
EPOCA 2009 Jair C LeiteERBASE 2010
Arquitetura e Engenharia Civil
Idealiza,Concebe,Desenha
Idealiza,Concebe,Desenha
Planeja e executa o projeto; realiza cálculos; gerencia recursos, custos e prazos.
Planeja e executa o projeto; realiza cálculos; gerencia recursos, custos e prazos.
EPOCA 2009 Jair C LeiteERBASE 2010
Design Industrial – exemplos
EPOCA 2009 Jair C LeiteERBASE 2010
Características da atividade de design
• Habilidades e competências
– Conhecer a utilidade e funcionalidade do objeto
– Criatividade e experiência.
– Saber expressar e comunicar idéias
– Utilizar ferramentas apropriadas
– Ter conhecimento histórico do objeto
• Processo cíclico:– Análise
• Entendimento das necessidades
– Síntese• Criação da solução
– Avaliação• Validação da solução com os interessados
EPOCA 2009 Jair C LeiteERBASE 2010
Aplicações no design de IHC
• Separação da criação e concepção da
construção
• Técnicas de brainstorm podem ser aplicadas
• Elaboração de modelos e protótipos
– Um modelo ou protótipo expressa as idéias
• Processo cíclico (iterativo) de design-
avaliação
– Experimentação
– Os modelos e protótipos devem ser avaliados e
indicar alterações
EPOCA 2009 Jair C LeiteERBASE 2010
Design de IHC
Contexto social e organizacional
IHC
Design
Teorias de IHC: Engenharia Semiótica
Teorias de IHC: Engenharia Semiótica
Práticas de designPráticas de design
EPOCA 2009 Jair C LeiteERBASE 2010
Design de IHC
Design: diferentes
soluções possíveis
Design: diferentes
soluções possíveis
Contexto social e organizacional
IHC
Modelos e protótipos
Análise do
problema e design
de soluções
EPOCA 2009 Jair C LeiteERBASE 2010
Processo cíclico de design e avaliação
Design: diferentes
soluções possíveis
Design: diferentes
soluções possíveis
Análise do
problema e design
de soluções
IHC
Métodos e técnicas de
avaliação
-Coleta de dados
-Análise de problemas
- Soluções e re-design
Métodos e técnicas de
avaliação
-Coleta de dados
-Análise de problemas
- Soluções e re-designAvaliador
Designer
EPOCA 2009 Jair C LeiteERBASE 2010
Atividade do design de IHC
Contexto social e organizacional
Análise do
contexto social e
organizacional
Conhecimento
dos usuários e de
suas necessidade
Elaboração de
modelos e protótipos
Elaboração da
comunicação
designer-usuário
EPOCA 2009 Jair C LeiteERBASE 2010ERBASE 2010
Modelagem em IHC
Modelos e protótipos utilizados no
processo de design e avaliação de IHC
EPOCA 2009 Jair C LeiteERBASE 2010
Modelagem em IHC
• O design requer uma forma de expressão
• Modelos e protótipos são o artefato produzido e entregues aos engenheiros de software
Idéias Esquemas,
storyboards,
diagramas, ...
Protótipos
EPOCA 2009 Jair C LeiteERBASE 2010
Rascunhos (sketches) de tela
• Desenho simplificado da aparência do sistema
• Evita detalhes visuais desnecessários
Fica difícil visualizar aspectos dinâmicos da interação
Fica difícil visualizar aspectos dinâmicos da interação
Fonte da figura: http://www.agilemodeling.com/artifacts/uiPrototype.htm
EPOCA 2009 Jair C LeiteERBASE 2010
“Maquetes” de tela
• Interfaces feitas de papelão
buttons menualert box
combo box
tabs
entries
list box
EPOCA 2009 Jair C LeiteERBASE 2010
Exemplo de modelagem com maquetes
• O designer monta a interface usando os elementos
em papelão.
• O comportamento pode ser simulado
• Os usuários podem fazer uma avaliação inicial.
buttons menu
combo box
entries
list box
EPOCA 2009 Jair C LeiteERBASE 2010
Storyboarding
Computer Telephone
Last Name:First Name:Phone:
Place Call Help
Help->
Computer Telephone
Last Name: GreenbergFirst Name:Phone:
Place Call Help
Dialling....
Cancel
Callconnected...
Computer Telephone
Last Name: GreenbergFirst Name:Phone:
Place Call Help
Connected
Hang up
Callcompleted...
Return
Help ScreenYou can enter either theperson's name or theirnumber. Then hit theplace button to call them
Call byname->
Computer Telephone
Last Name: GreenbergFirst Name:Phone:
Place Call Help
Establishingconnection->
1 2 3
4 5
Fontes da figura: Saul Greenberg
EPOCA 2009 Jair C LeiteERBASE 2010
Protótipo falso
• Pode ser um rascunho, uma maquete ou slides em powerpoint, telas em HTML, etc.
• Não permite visualizar o comportamento.
EPOCA 2009 Jair C LeiteERBASE 2010
Protótipo autêntico
• Utiliza-se uma ferramenta de desenvolvimento rápido, como Visual Basic (VB), HTML, etc.
• A funcionalidade não precisa estar completamente implementada, mas deve ser possível interagir – clicar em botões ou em menus, ver caixas de diálogo
EPOCA 2009 Jair C LeiteERBASE 2010ERBASE 2010
Técnicas para análise dos usuários e
contexto social e organizacional
EPOCA 2009 Jair C LeiteERBASE 2010
Análise de usuários
• Identificação dos papeis de usuários– Conhecer as diferentes funções que cada usuário
deverá ter no sistema
– Cada papel possui um conjunto de tarefas
• Definir os perfis dos usuários– Conhecer as capacidades e limitações dos
usuário• Físicas
• Cognitivas
– Conhecimento do domínio (negócio)
– Conhecimento de sistemas computacionais
– Contexto social e cultural• Linguagem, hábitos, preferências, motivações, etc.
EPOCA 2009 Jair C LeiteERBASE 2010
Fatores de Análise de Usuários
• Papel do usuário
– a função exercida no domínio determina as tarefas com o sistema
• Nível de exper com computadores:
– Iniciante
– Intermediário
– Experiente
• Nível de conhecimento no domínio da aplicação:
– Novato
– Intermediário
– Especialista
• Padrão de Uso
– Usuário Ocasional
– Usuário Freqüente
• Diferenças Socio-culturais
– Língua
– Convenções culturais
• Limitações físicas
– auditivas
– visuais
– motoras
EPOCA 2009 Jair C LeiteERBASE 2010
Exercício
• Considere que você vai desenvolver a
interface de usuário de um sistema
• O sistema será coorporativo, mas não pode
ser personalizado para cada o usuário
• Você precisa definir o perfil predominante de
usuários.
EPOCA 2009 Jair C LeiteERBASE 2010
Exercício – passo 1
• Você escolheu como fatores críticos
– Nível de habilidade com computadores
– Nível de habilidade no domínio da aplicação
– Padrão de uso
– Ambiente gráfico preferido
• Com base em uma pesquisa a partir de
questionários, você obteve os seguintes
resultados (ver a seguir)
EPOCA 2009 Jair C LeiteERBASE 2010
Exercício – passo 2
• Nível de habilidade com computadores –conhecimento sobre uso de computadores– Iniciante: 55%
– Intermediário: 30%
– Experiente: 15%
• Nível de experiência no domínio da aplicação –experiência em realizar as funções previstas no sistema– Novato: 5%
– Intermediário: 15%
– Especialista: 80%
EPOCA 2009 Jair C LeiteERBASE 2010
Exercício – passo 3
• Padrão de uso – com que freqüência os usuários vão utilizar o sistema – Ocasional: 20%
– Freqüente: 80%
• Ambiente gráfico preferido– Windows XP: 70%
– Windows Vista: 15%
– Linux/Gnome: 10%
– Mac OS X: 5%
EPOCA 2009 Jair C LeiteERBASE 2010
Exercício – conclusão
• Grupo majoritário: – Iniciante em computação,
– Especialista no domínio,
– Freqüente,
– Windows XP
• Estratégia de design– Oferecer telas que estimulem o aprendizado de recursos
computacionais
– Oferecer recursos que torne a produtividade do usuário maior
– Flexibilizar a interface de forma considerando que o usuário vai aprender - desabilitar os recursos de ajuda
– Utilizar vocabulário típico do domínio de aplicação
– Desenvolver para Windows
EPOCA 2009 Jair C LeiteERBASE 2010ERBASE 2010
Cenários
EPOCA 2009 Jair C LeiteERBASE 2010
Cenários
• Descrição narrativa de situações de uso num domínio de aplicação.
• Podem descrever a situação atual (com ou sem sistema) ou uma situação futura (antevisão do sistema).
• Permitem a identificação de papéis de usuário (atores), atividades e objetos.
• Podem ser associados a outras técnicas modelos de tarefas ou casos de uso.
The defining property of a scenario is that it projects a concrete narrative description of activity that the user engages in when performing a specific task, a description sufficiently detailed so that design implications can be inferred and reasoned about
(Carroll, 1997, p. 385).
EPOCA 2009 Jair C LeiteERBASE 2010
Exemplo: Comprar um bilhete aéreo
• João quer voar para Rio de Janeiro na
próxima quinta, retornando no último vôo da
sexta. Existem 2 aeroportos no Rio e ele não
sabe qual o nome do aeroporto mais próximo
ao centro. Ele também quer saber se existe
vaga, quanto custa e se existe uma
alternativa mais barata se ele pegar um outro
vôo de volta. Quando os vôos forem
confirmados, ele quer confirmar o pagamento
com cartão de crédito.
EPOCA 2009 Jair C LeiteERBASE 2010
Questionamento sistemático
• Técnica baseada na psicolingüística que
analisa as descrições do cenário
• Considera que o questionamento permite
esclarecer os detalhes do domínio de
aplicação
• O cenário é visto como um ponto de partida
para um modelo conceitual da aplicação
(modelo de domínio)
• Tipos de questionamentos (5W & 1H):
– O que, quem, quando, onde, por que e como
EPOCA 2009 Jair C LeiteERBASE 2010
Questionamento
• O que?
– Permite entender detalhes de informações ou objetos do domínio
• Quem?
– Permite identificar os agentes (usuários ou sistema) responsáveis pelas ações ou tarefas
• Como?
– Permite entender os detalhes sobre a realização de taredas ou ações.
• Quando?
– Permite identificar a ordem das ações, ou seja os procedimentos de interação ou processos do negócio
• Onde?
– Permite identificar o local onde as tarefas são realizadas ou onde as informações podem ser encontradas
• Por que?
– Permite obter justificativas e razões sobre agentes, ações e objetos
EPOCA 2009 Jair C LeiteERBASE 2010
Cenário para reservar um quarto de
hotel• Maria está indo a um casamento em João
Pessoa e precisa reservar um quarto de hotel. Ela acessa o sistema de reservas e escolhe o tipo de quarto. Em seguida, sistema apresenta as opções de quarto disponíveis para o tipo escolhido. Maria escolhe um quarto e o sistema solicita os dados. Após os dados fornecidos, o sistema apresenta a confirmação final.
EPOCA 2009 Jair C LeiteERBASE 2010
Exemplo
• Para o cenário de reservar um quarto de
hotel, as seguintes questões são
necessárias:
– O que são tipos de quarto? Quais são eles?
• Quarto de solteiro e casal
– Como ele deve fornecer esta informação?
• Selecionando num “radio button”
– Quais os dados o usuário deve fornecer?
• Nome, endereco, email, cartão de crédito
– Como ele deve fornecer os dados?
• Preenchendo um formulário seguro