Multimídia e Interface Usuário - Máquinapaludo/material/IHM/Material para Aula/2011... · Slides baseados no livro: Design e Avaliação de Interfaces Humano ... Portas (puxar,

1

Ciência da Computação/ Sistemas de Informação

Multimídia e Interface

Usuário - Máquina

Profa. Cristina Paludo Santos

Slides baseados no livro: Design e Avaliação de Interfaces Humano –Computador

(Heloísa Vieira da Rocha/M.Cecília C. Baranauskas).

Material adaptado.

Sumário

Introdução

Objetivos

Princípios básicos de um bom design

Slogans de Usabilidade

Avaliação de interfaces

2

IHC

Introdução Objetivos Princípios de um Bom

Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros

- Sistemas Funcionais

Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática

Custo Utilidade Compatibilidade Confiabilidade

Funcionalidade Usabilidade

Eficiência Facilidade de

relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

- Observação

- Verbalização

- Heurísticas

- Contextualização

- Importância

-Conceitos

-Exemplos

Visibilidade

Affordance

Bom modelo conceitual

- Restrições físicas

- Restrições lógicas

- Restrições culturais

Bons mapeamentos

- Relações entre controle e seus

movimentos e o resultado no

mundo

Feedback

INTERATIVIDADE

Quais são os produtos interativos que

você utiliza em um dia normal?

PENSE UM MINUTO!

3

O sistema

é

a Interface

usuárioFuncionalidades

Interface

O PAPEL DA INTERFACE

Prover a interação entre

pessoas e sistemas

INTERFACES AMIGÁVEIS?

4

INTERFACES AMIGÁVEIS?

ACESSIBILIDADE (Declaração dos Direitos Humanos)

5

Exemplos de interfaces

mal projetadas(problemáticas)

EXEMPLOS DE INTERFACES

PROBLEMÁTICAS

6


PROBLEMÁTICAS

Como ajustar o relógio?


PROBLEMÁTICAS

Como “ajustar” cadeiras?1 - Situação : Ajustar a altura da cadeira

O usuário tenta abaixar ou

levantar a cadeira enquanto

está sentado, mexendo na

alavanca.

Problema: o usuário puxa e

empurra a alavanca porém a

cadeira não se move.

7


PROBLEMÁTICAS

Para se abaixar a cadeira, deve-se

levantar a alavanca e a cadeira ao

mesmo tempo e depois empurrá-la.

Para levantar a cadeira, deve-se puxar

com força o assento, segurando com

o pé as rodas da cadeira.


PROBLEMÁTICAS

8


PROBLEMÁTICAS

Máquina de café expresso

sem instruções de uso em

restaurante universitário

Má disposição dos menus

Falta de indicação da saída

do café


PROBLEMÁTICAS

Quando devo colocar as moedas?

Como funcionam os menus?

De que torneira sairá o café?

Devo observar outra pessoa fazendo antes?

9


PROBLEMÁTICAS

A Máquina da Tess

O CRIME

Esta máquina aparentemente inofensiva

possui o péssimo hábito de “assaltar”

as pessoas que nela colocam seu

dinheiro pensando que, em troca,

receberão um cartão com crédito para

seu celular.

Isso acontece toda vez que alguém

coloca nela o seu dinheiro e não

existem mais cartões disponíveis na

máquina. Só depois ela avisa que não

existem mais cartões com o número de

unidades que você deseja. Não existem

quaisquer instruções de como

recuperar o dinheiro.


PROBLEMÁTICAS

?$ @#!Devolver Dinheiro

Primeiro escolher opção...

...depois colocar dinheiro.

OU

O Problema A Solução

10


PROBLEMÁTICAS

ANTES DEPOIS


PROBLEMÁTICAS

Remoção da tampa

Fatores

Tampa extremamente rígida e de difícil remoção;

Nenhuma estrutura auxiliar para ajudar a remoção datampa.

“Erros” esperados

A pessoa precisará, obrigatoriamente utilizar de uminstrumento cortante, como uma faca - que não foidesenhada especificamente para este tipo de uso,podendo ocasionar acidentes;

Dependendo do instrumento utilizado, pode-secontaminar a água

11


PROBLEMÁTICAS

Colocação do galão

no bebedouro

Fatores

Peso elevado do galão;

Tampa necessariamente aberta antes da

colocação.

“Erros” esperados É praticamente impossível virar o galão

com sua tampa aberta e seu peso sem

deixar a água cair;

Não é raro a pessoa deixar o galão cair

neste momento, fazendo aquela

aguaceira quando o galão “explode” no

chão.


PROBLEMÁTICAS

12

Uma interface ruim é ineficiente e confusa


PROBLEMÁTICAS

Uma interface ruim não é confiável

Ou tudo mal?

Tudo bem?


PROBLEMÁTICAS

13

Uma interface ruim tira o controle do usuário


PROBLEMÁTICAS


PROBLEMÁTICAS

Tarefa: Encontrar um liquidificador

14

O ADVENTO DE UMA

NOVA COMPUTAÇÃO

15

Louvre (França)

16

REALIDADE AUMENTADA

17

HOLOGRAFIA

Como dar conta da rápida evolução tecnológica?

Como garantir que os design ofereçam uma “boaIHM/IHC” ao mesmo tempo que exploram opotencial e funcionalidade da nova tecnologia?

DESAFIOS DE IHM/IHC

18

DESAFIOS DE IHM/IHC

O que se quer?

INTERFACE

“Não se pode pensar em interfaces sem considerar o ser

humano que vai usá-la, e portanto interface e interação são

conceitos que não podem ser estabelecidos ou analisados

independentemente.

ROCHA e BARANAUSKAS, 2003

A primeira preocupação dos designers de

interface deve ser a de melhorar o modo

como as pessoas podem usar o

computador para pensar e comunicar,

observar e decidir, calcular e simular,

discutir e projetar.

19

IHC - Conceito

“IHC é a disciplina preocupada com o design, avaliação e

implementação de sistemas computacionais interativos

para uso humano e com o estudo dos principais fenômenos

ao redor deles.”

ROCHA e BARANAUSKAS, 2003

PROFISSIONAIS QUE CONTRIBUEM

PARA O ADVENTO DE NOVAS TECNOLOGIAS

Designers de Software – explorando as melhores maneiras de se organizar

as informações. Desenvolvendo linguagens de consulta e facilidades visuais

para a entrada, busca e saída de informações. Utilizando, sons,

representações tridimensionais, animação e vídeo para melhorar o conteúdo e

a expressão das interfaces. Técnicas como a manipulação direta, telepresença,

realidade virtual mudam a maneira de interagir e de prensar sobre

computadores.

Desenvolvedores de Hardware – criação de novos designs de teclados,

dispositivos de apontamento, displays de alta resolução. Projetando sistemas

com resposta rápida para complexas manipulações tridimensionais.

Tecnologias que permitem entrada e saída por voz, entrada por gestos, telas de

toque, as quais tem aumentado muito a facilidade e o uso de computadores.

Desenvolvedores na área de tecnologia educacional – criando tutoriais

online e materiais de treinamento e explorando novas abordagens de

discussões em grupo, ensino a distancia, apresentações em vídeo etc...

20

IHC


Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros


Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática

Custo Utilidade compatibilidade Confiabilidade



relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

- Observação

- Verbalização

- Heurísticas


- Importância

-Conceitos

-Exemplos

Visibilidade

Affordance





Bons mapeamentos



mundo

Feedback

ACEITABILIDADE DE SISTEMAS

Combinação de

SISTEMAS ATUAIS DE CONTROLE DE

PORTAS DE ENTRADA DE BANCOS –Apesar de serem benéficos socialmente

(impedem situações de assalto), não são aceitos

socialmente pois levam a que qualquer pessoa

que queira entrar no banco tenham que

esbarrar na porta trancada por inúmeras vezes

até se desfazer de todo e qualquer objeto

suspeito (pois não se sabe quais os objetos que

impedem a entrada).

PARÂMETROS TRADICIONAIS:

Custo

Utilidade

Usabilidade (facilidade de uso e aprendizado)

Compatibilidade

Confiabilidade, etc...

21

IHC


Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros


Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática




relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

- Observação

- Verbalização

- Heurísticas


- Importância

-Conceitos

-Exemplos

Visibilidade

Affordance





Bons mapeamentos



mundo

Feedback

PRINCÍPIOS DE UM BOM DESIGN

1.Visibilidade

Determina que apenas as coisas necessárias devem estar visíveis.

Indica o mapeamento entre ações pretendidas e as ações reais.

Indica também distinções importantes.

Visibilidade do efeito das operações

A falta de visibilidade é que torna muitos dispositivos controlados por

computadores tão difíceis de serem operados.

EXEMPLOS:

Diferenciar a vasilha do sal da do açúcar.

Portas (puxar, empurrar ou deslizar)

22

IHC


Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros


Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática




relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

- Observação

- Verbalização

- Heurísticas


- Importância

-Conceitos

-Exemplos

Visibilidade

Affordance





Bons mapeamentos



mundo

Feedback

2. Affordance

Refere-se as propriedades percebidas e propriedades reais dos objetos

da interface. Determinam como um objeto funciona.

Quando se tem a predominância da affordance o usuário sabe o que

fazer somente olhando, não sendo preciso figuras, rótulos ou

instruções.

EXEMPLOS:


23

IHC


Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros


Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática




relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

- Observação

- Verbalização

- Heurísticas


- Importância

-Conceitos

-Exemplos

Visibilidade

Affordance





Bons mapeamentos



mundo

Feedback

3. Bom Modelo Conceitual

Permite prever o efeito de ações. Sem um bom modelo conceitual,efetuam-se as operações sem saber que efeitos esperar ou o que fazer sealgo der errado.

Inserir Restrições: Determinação das formas de delimitar o tipo deinteração que pode ocorrer em um determinado momento.

Exemplo: Desativar certas opções do menu sombreando-as,restringindo as ações do usuário somente às permitidas naquele estágio daatividade.


24

Modelo Conceitual – Restrições podem ser:


Modo como os objetos físicos restringem o movimentodas coisas.

Exemplos:

• Um único modo de inserir a chave em uma fechadura.

• De quantas formas você pode inserir um CD ou um DVDno computador?

• Quais as restrições físicas nesta ação? Como isto difereda inserção de um disquete?



Explorar o senso comum das pessoas sobre como ascoisas funcionam.

Exemplo:

• Relação entre o layout físico de um dispositivo e o modocomo ele funciona

25



No uso de checkbox, em alguns países o marcador X

deve ser substituído por V (sinal de visto) pois no Japão o

X significa exclusão.

Objetos brancos no Japão = morte

Vermelho = bruxaria em muitos países africanos

IHC


Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros


Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática




relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

Visibilidade

Affordance





Bons mapeamentos



mundo

Feedback

- Observação

- Verbalização

- Heurísticas


- Importância

-Conceitos

-Exemplos

26

4. Bom Mapeamento

Relação entre controles e seus movimentos e o resultado no mundo

EXEMPLOS:


IHC


Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros


Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática




relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

Visibilidade

Affordance





Bons mapeamentos



mundo

Feedback

- Observação

- Verbalização

- Heurísticas


- Importância

-Conceitos

-Exemplos

27

4. Feedback

Feedback - Retornar ao usuário informação sobre as ações que foramfeitas, quais os resultados obtidos.

- ? Falar com uma pessoa sem ouvir sua voz!!


IHC


Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros


Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática




relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

Visibilidade

Affordance





Bons mapeamentos

- Feedback



mundo

- Observação

- Verbalização

- Heurísticas


- Importância

-Conceitos

-Exemplos

28

IHC


Design

Avaliações de

interfaces

- Sistemas Úteis

- Sistemas Seguros


Aceitabilidade

de Sistemas

Aceitabilidade

Social

Aceitabilidade

Prática




relembrar

Erros Facilidade de

aprendizagem

Satisfação

subjetiva

Visibilidade

Affordance





Bons mapeamentos

- Feedback



mundo

- Observação

- Verbalização

- Heurísticas


- Importância

-Conceitos

-Exemplos

Bibliografia

Heloísa Vieira da Rocha; Maria Cecília Calani

Baranauskas. Design e Avaliação de Interfaces

humano-computador. Instituto de Computação.

Universidade Estadual de Campinas, 2003.

Jakob Nielsen, Usabilty Engineering, Morgan

Kaufmann, Inc. San Francisco, 1993

Documents

Multimídia e Interface Usuário - Máquinapaludo/material/IHM/Material para Aula/2011... · Slides baseados no livro: Design e Avaliação de Interfaces Humano ... Portas (puxar,