O design de IHC

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.


Design Industrial – exemplos


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


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


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


Design de IHC

Design: diferentes

soluções possíveis

Design: diferentes



IHC

Modelos e protótipos

Análise do

problema e design

de soluções


Processo cíclico de design e avaliação

Design: diferentes


Design: diferentes


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


Atividade do design de IHC


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


Modelagem em IHC

Modelos e protótipos utilizados no

processo de design e avaliação de IHC


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


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


“Maquetes” de tela

• Interfaces feitas de papelão

buttons menualert box

combo box

tabs

entries

list box


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


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


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


Place Call Help

Establishingconnection->

1 2 3

4 5

Fontes da figura: Saul Greenberg


Protótipo falso

• Pode ser um rascunho, uma maquete ou slides em powerpoint, telas em HTML, etc.

• Não permite visualizar o comportamento.


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


Técnicas para análise dos usuários e

contexto social e organizacional


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.


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


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.


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)



• 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%



• 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%


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


Cenários


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).


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.


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


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


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.


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

Documents

O design de IHC