03/10/2012

1

Introduo

Gustavo A. Prieto

Fundamentos da Interface Humano-Computador

Definio Interao Humano-Computador (IHC)

a disciplina preocupada com o design, avaliao e implementao de sistemas computacionais interativos para o uso humano e com o estudo dos principais fenmenos ao redor deles.

03/10/2012

2

Interface

A interface de uma aplicao computacional envolve todos os aspectos de um sistema com o qual

mantemos contato (Moran, 1981).

atravs dela que os usurios tm acesso s funes da aplicao. Do ponto de

vista do usurio, o sistema a interface(Hix e Hartson,

1993) o nome dado a toda poro de um sistema (hardware e software) com a qual um usurio

mantm contato ao utiliz-lo, tanto passiva

quanto ativamente (Barbosa, 2002)

Definio

a aplicao do conhecimento para produzir interfaces

amigveisamigveis. Tudo que ocorre entre o ser humano e um

computador utilizado para realizar suas tarefas

o componente (software) responsvel por mapear aes do usurio em solicitaes de

processamento ao sistema (aplicao), bem como

apresentar os resultados produzidos pelo sistema.

03/10/2012

3

Interatividade o processo de comunicao entre pessoas e

sistemas interativos (Preece et.al., 1994)

USURIO INTERFACE APLICAO

SistemaAo

Resposta

IHC: ponto de vista do usurio

Cognio Aquisio de

Conhecimento (Dicionrio Aurlio)

Ato ou processo de conhecer, que envolve: Percepo Memria Raciocnio Juzo Imaginao pensamento Linguagem

A palavra tem origem nos escritos de Plato e Aristteles.

03/10/2012

4

Componentes do IHC

Hardware, Sistemas Operacionais, Linguagens de Programao, Ambientes de

Desenvolvimento

Projeto Industrial, Projeto Grfico e

Design

Teoria da Comunicao,

Lingstica, Cincias Sociais, Processo

Cognitivo

Interdisciplinaridade

Cincia da Computao Psicologia

Projeto Industrial e Grfico Sociologia

03/10/2012

5

Histrico do IHC

1 Fase: (anos 50 - incio dos anos 60) Processamento em batch;

Entrada de Dados: Cartes Perfurados;

Sada de Dados: Impressoras de Linha;

Essencialmente no havia interfaces, pois no havia sistemas interativos;

03/10/2012

6

Como seria a internet nos anos 50?

2 Fase: (anos 60 - anos 80) Primeira forma de

interao entre usurio e mquina, atravs de comandos parametrizados (DOS e UNIX);

Timesharing nos mainframes;

Terminais com monitor alfanumrico monocromtico;

03/10/2012

7

3 Fase: (anos 80 - anos 90) Surgimento das

interfaces grficas bidimensionais WIMP GUI (Windows, Icons, Menus, Pointing device - Graphical UserInterface);

Monitores coloridos tornaram esse ambiente mais agradvel;

Surgimento de diversas ferramentas para a construo de interfaces;

03/10/2012

8

Macintosh - 1984

Macintosh SE - 1987

03/10/2012

9

Macintosh IIsi - 1990

Macintosh LC - 1995

03/10/2012

10

Macintosh iMac - 1998

Windows 1 - 1985

03/10/2012

11

Windows 3.x 1990 a 1994

Windows 95 1995

03/10/2012

12

3 Fase

Vantagens Desvantagens Globalizou o uso do

computador; Possibilitou a

disseminao da Internet;

Alterou o significado do uso do computador de maneira to expressiva quanto o barateamento das mquinas.

O usurio perde muito tempo manipulando a interface antes de conseguir chegar na aplicao em si;

Os recursos para interagir com o sistema so muito pobres se comparados as diferentes formas de interao possveis e condizentes com os seres humanos;

nfase do projeto GUI: facilidade de aprendizado em detrimento da produtividade;

Diferentes verses e aplicativos possuem diferentes comandos, confundindo o usurio;

Mapeamento entre tarefas 3D e controle 2D menos natural.

4 Fase Interfaces Pos-WIMP,

tambm conhecidas como PUI (Perceptual UserInterfaces); Touch Screen Smartfones Tablets

Utilizao de grficos 3D e recursos de realidade virtual (imerso, navegao e interao);

Contm pelo menos uma tcnica de interao diferentes das apresentadas pelas interfaces GUI, isto , diferente de mouse e teclado.

03/10/2012

13

Pos-WIMPDispositivos Mveis

Ps-WIMP PAM (Personal Area Network)

03/10/2012

14

Exemplos de Interfaces de Quarta Gerao A closer look at the Mona Lisa

http://musee.louvre.fr/oal/joconde/indexEN.html

Online Tours Egyptian Antiquities http://musee.louvre.fr/visite-

louvre/index.html?defaultView=rdc.s46.p01&lang=ENG

Google Art Project http://www.googleartproject.com/?utm_source=mus

eumpage&utm_medium=banner&utm_campaign=artproject

Objetivos do IHCMinimizar a mecnica de manipulao e a distncia cognitiva distncia cognitiva entre a inteno do usurio e a execuo da tarefa;

O usurio deve se concentrar na tarefa, e no na tecnologia para especificar a tarefa;

No necessrio que o usurio conheca todas as operaes do sistema para conseguir alcanar seus objetivos.

Proporcionar usabilidade

03/10/2012

15

Usabilidade

Usabilidade - DefinioConjunto de caractersticas que permitem ao usurio interagir com o computador de forma

satisfatria.

Facilidade de aprendizado;

Reteno de conhecimento;

Velocidade na execuo das

tarefas;

Preparao do sistema para

evitar erros de usurios.

03/10/2012

16

Usabilidade - Conceitos

Todas as caractersticas que permitem ao usurio

interagir com o computador satisfatoriamente

Est relacionada eficcia, eficincia e satisfao de uso

(norma ISO)

Enquadra-se dentro do conceito de aceitabilidade do sistema pelo usurio.

O sistema deve ser bom o suficiente para satisfazer todas as necessidades e requisitos do usurio e de

outras pessoas relacionadas utilizao desse sistema.

O que necessrio para o usurio aceitar o sistema?

Aceitabilidade do Sistema

Aceitabilidade Prtica Aceitabilidade Social

UtilidadeCusto ConfiabilidadeCompatibilidade

FuncionalidadeUsabilidade

Fcil de Aprender

Fcil de Lembrar

Poucos Erros

Eficiente de Usar

Subjetivamente Agradvel

03/10/2012

17

Exemplos de Problemas de Usabilidade O sistema tem a informao ou o servio que eu

preciso ? Onde posso encontrar a informao ou servio

de que necessito ? Como posso solicitar esse servio ? Quais informaes devo fornecer ? Qual o resultado? Era o que eu queria ? Para que serve determinado elemento na tela ? Qual o significado dessa figura ? Para onde leva esse link ?

Selecionar o Controle Errado Checkbox Vs Com Os controles de uma

interface representam a forma como o usurio se comunica com a aplicao.

A qualidade desta comunicao depende de: Selecionar o controle

correto; Consistncia da regra

pelo qual o controle atua.

03/10/2012

18

Selecionar o Controle Errado Controle opcional

obrigatrio.

Barra de progresso binria

Selecionar o Controle Errado Scrool Bar utilizada

para visualizar diferentes modelos.

Uma text box utilizada para editar trs linhas de texto. Brian Hayes

Isys Information Architects Inc.

http://isys.home.ml.org

03/10/2012

19

Selecionar o Controle Errado Controle

completamente NO intuitivo.

Selecionar o Controle Errado Sequncia de

navegao entre os objetos totalmente confusa.

Falta de controles para auxiliar o usurio;

Requisito obrigatrio sendo apresentado como opcional;

Sistema no verifica se o dado fornecido pelo usurio est exato.

03/10/2012

20

Selecionar o Controle Errado List box com uma

quantidade muito pequena de linhas.

Uso Incorreto de Avisos Aviso fora de contexto.

Aviso com opo obrigatria

03/10/2012

21

Uso Incorreto de Avisos Aviso com lgica

circular

Aviso misterioso que no leva a nada.

Uso Incorreto de Avisos Aviso que encoberta o

problema e induz o usurio a uma ao (que obrigatria).

Aviso que no serve para nada.

03/10/2012

22

Terminologia Teoricamente, os programas so desenvolvidos em

torno das necessidades dos usurios. Assim, programadores e usurios de uma aplicao devem compartilhar o mesmo jargo, linguagem e conceitos.

Infelizmente a realidade est muito longe de atender esta suposio...

Terminologia

Programa: CSE HTML Validator v3.05 Objetivo: checar documentos HTML e verificar possveis

erros sintticos. Problema: O que as flags 1 a 20 fazem?

Flag 1 liga a verificao das tags do internet explorer; Flag 9 aciona avisos contra o uso das tags ,

, e ; Flag 14 a 20 Nada, elas sero utilizadas para futuras

expanes.

03/10/2012

23

Terminologia

Programa: CSE HTML Validator v4.0 Objetivo: checar documentos HTML e verificar

possveis erros sintticos. Problema: O que as flags 1 a 60 fazem?

...

Terminologia

Programa: JAWS for Windows Problemas:

Se o programa for desinstalado todos os arquivos associados ao JAWS sero apagados, se o usurio deseja mant-los ele no deve salvar um arquivo ele deve mov-los para outro diretrio.

A tela contm dois botes (OK e Cancel), porm as instrues se referem as teclas ENTER (confirma a opo selecionada) e ESCAPE (seleciona a opo NO selecionada).

03/10/2012

24

Terminologia

Programa: Instalao do Modem US Robotics.

Problema: se o programador quer dizer Sim ou No, porqu os botes no se chamam Sim ou No.

Importncia da Interface

As interfaces constituem em mdia:

48 % do cdigo do sistema;

48 % do tempo total do projeto

do sistema;

50 % do tempo de

implementao;

37 % do tempo de manuteno;

50 % do custo do projeto.

03/10/2012

25

Investimento em Interfaces

O projeto de uma interface requer um investimento grande e a longo prazo, que tem como principais benefcios:

Satisfazer as expectativas do usurio;

Aumentar a valorizao

de um produto;

Minimizar o custo do

suporte ao usurio;

Proporcionar vantagem

competitiva;

Estabelecer lealdade dos usurios em

relao marca.

Caractersticas Desejveis de Uma Interface

Dilogo consistente que permita ao usurio saber como o sistema est se comportando

internamente;

Minimizao das possibilidades de erro e, caso estes ocorram,

possibilidade de correo dos mesmos;

Ser intuitiva, evitar necessidade de

memorizao de comandos;

Adaptao ao nvel de habilidade e

conhecimento do usurio sobre o

sistema.

03/10/2012

26

Projeto de IHC

O desenvolvimento de interfaces uma tarefa multidisciplinar, que pode ser dividida em trs fases:

Desenvolvimento do componente de

interao: domnio comportamental,

abordando a forma do usurio interagir com

o sistema;

Desenvolvimento do software de interface:

fase de implementao;

Avaliao: verificar se os resultados das fases anteriores

garantem usabilidade ao sistema.