03/10/2012

Fundamentos da Interface HumanoComputador

Introduo Gustavo A. Prieto

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

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) A interface de uma aplicao computacional envolve todos os aspectos de um sistema com o qual mantemos contato (Moran, 1981).

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)

Interface

Definio

a aplicao do conhecimento para produzir interfaces amigveis. Tudo que ocorre amigveis 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

Interatividade
o processo de comunicao entre pessoas e sistemas interativos (Preece et.al., 1994)

Ao USURIO Resposta

Sistema INTERFACE APLICAO

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

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

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

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

3 Fase: (anos 80 - anos 90)

Surgimento das interfaces grficas bidimensionais WIMP GUI (Windows, Icons, Menus, Pointing device - Graphical User Interface); Monitores coloridos tornaram esse ambiente mais agradvel; Surgimento de diversas ferramentas para a construo de interfaces;

03/10/2012

Macintosh - 1984

Macintosh SE - 1987

03/10/2012

Macintosh IIsi - 1990

Macintosh LC - 1995

03/10/2012

Macintosh iMac - 1998

Windows 1 - 1985

10

03/10/2012

Windows 3.x 1990 a 1994

Windows 95 1995

11

03/10/2012

3 Fase
Vantagens
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.

Desvantagens
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 User Interfaces); 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.

12

03/10/2012

Pos-WIMP Dispositivos Mveis

Ps-WIMP PAM (Personal Area Network)

13

03/10/2012

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/visitelouvre/index.html?defaultView=rdc.s46.p01&lang=E NG

Google Art Project

http://www.googleartproject.com/?utm_source=mus eumpage&utm_medium=banner&utm_campaign=art project

Objetivos do IHC
Minimizar a mecnica de manipulao e a 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

14

03/10/2012

Usabilidade

Usabilidade - Definio
Conjunto 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.

15

03/10/2012

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

Custo

Compatibilidade

Confiabilidade

Utilidade

Usabilidade

Funcionalidade

Subjetivamente Agradvel

Fcil de Aprender

Fcil de Lembrar

Poucos Erros

Eficiente de Usar

16

03/10/2012

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.

17

03/10/2012

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

18

03/10/2012

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.

19

03/10/2012

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

20

03/10/2012

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.

21

03/10/2012

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 <center>, <basefont>, <s> e <u>; Flag 14 a 20 Nada, elas sero utilizadas para futuras expanes.

22

03/10/2012

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

23

03/10/2012

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.

24

03/10/2012

Investimento em Interfaces
O projeto de uma interface requer um investimento grande e a longo prazo, que tem como principais benefcios:
Aumentar a valorizao de um produto; Minimizar o custo do suporte ao usurio; Estabelecer lealdade dos usurios em relao marca.

Satisfazer as expectativas do usurio;

Proporcionar vantagem competitiva;

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; Adaptao ao nvel de habilidade e conhecimento do usurio sobre o sistema.

Ser intuitiva, evitar necessidade de memorizao de comandos;

25

03/10/2012

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.

26