IHC 02 Introducao

(1)

Universidade Federal de Alagoas (UFAL)

Campus Arapiraca

Interface Homem Computador (IHC)

Intera¸

c˜

ao Humano Computador

02 - Introdu¸

c˜

ao

Alexandre de Andrade Barbosa

(2)

Intera¸c˜ao Humano Computador (IHC) Projeto de Interface Exerc´ıcios, Resumo e Referˆencias

Objetivos

Apresentar uma vis˜

ao abrangente da ´

area

Identificar e descrever brevemente os conceitos que ser˜

ao trabalhados nas aulas

posteriores

(3)

Intera¸c˜ao Humano Computador (IHC)

Projeto de Interface Exerc´ıcios, Resumo e Referˆencias

Defini¸c˜ao Motiva¸c˜ao

Evolu¸c˜ao das interfaces Objetivos

Defini¸c˜

ao

Intera¸c˜

ao

A comunica¸c˜

ao entre o usu´

ario e o sistema/m´

aquina

Intera¸c˜

ao =/= Itera¸c˜

ao

Intera¸c˜

ao vs. interface

Humano

As pessoas que ir˜

ao utilizar o computador/a m´

aquina

Computador

O sistema/m´

aquina que ser´

a utilizada para desempenhar

alguma tarefa

(4)

Defini¸c˜

ao

IHC ou IHM

Intera¸c˜

ao Humano Computador

Intera¸c˜

ao Homem Computador

Interface Homem Computador

Intera¸c˜

ao Homem M´

aquina

Intera¸c˜

ao Humano M´

aquina

Interface Homem M´

aquina

...

(5)

Defini¸c˜

ao

Interface

“uma interface ´

e uma superf´ıcie de contato que reflete as propriedades

f´ısicas das partes que interagem, as fun¸

c˜

oes a serem executadas e o balan¸

co

entre poder e controle”

(6)

Defini¸c˜

ao

Intera¸

c˜

ao Humano Computador (IHC)

“IHC ´

e a disciplina preocupada com o design, avalia¸

c˜

ao e implementa¸

c˜

ao

de sistemas computacionais interativos para uso humano e com o estudo dos

principais fenˆ

omenos ao redor deles”

(7)

Defini¸c˜

ao

(8)

Motiva¸c˜

ao

Designer de interface vs. Engenheiro de Software

Quando um Engenheiro de Software ´

e respons´

avel pelo

desenvolvimento da interface com o usu´

ario (UI), alguns

problemas podem surgir:

Interfaces inapropriadas para os usu´

arios... apropriadas para o

programador

Muitas funcionalidades implementadas... poucas funcionalidades

utilizadas

Mensagens de erro orientadas ao sistema... e n˜

ao ao usu´

ario

...

Na realidade de muitas institui¸

c˜

oes um profissional ´

e: Engenheiro

de software, DBA, Designer, ... ao mesmo tempo

(9)

Motiva¸c˜

ao

Designer de interface vs. Engenheiro de Software

Quando um Engenheiro de Software ´

e respons´

avel pelo

desenvolvimento da interface com o usu´

ario (UI), alguns

problemas podem surgir:

Interfaces inapropriadas para os usu´

arios... apropriadas para o

programador

Muitas funcionalidades implementadas... poucas funcionalidades

utilizadas

Mensagens de erro orientadas ao sistema... e n˜

ao ao usu´

ario

...

Na realidade de muitas institui¸

c˜

oes um profissional ´

e: Engenheiro

de software, DBA, Designer, ... ao mesmo tempo

(10)

Motiva¸c˜

ao

Quais conceitos j´

a ouviu falar?

Unified

Modeling

Language

(UML)

Modelagem da tarefa

Padr˜

oes de Projeto

Usabilidade

Frameworks

Ergonomia

Teste

Engenharia cognitiva

(11)

Motiva¸c˜

ao

Temos uma maior preocupa¸

c˜

ao...

qualidade interna do c´

odigo vs. intera¸

c˜

ao do usu´

ario com a

aplica¸c˜

ao ?

(12)

Motiva¸c˜

ao

Todos os dados do usu´ario, da esposa dele, dos filhos, dos pais, do cachorro, do papagaio, ... com todos os campos obrigat´orios

(13)

Motiva¸c˜

ao

Escolha um carro emprestado...

(14)

Motiva¸c˜

ao

Escolha um carro emprestado...

(15)

Motiva¸c˜

ao

Quando temos alguma preocupa¸

c˜

ao com a intera¸

c˜

ao...

beleza vs. finalidade ?

(16)

Motiva¸c˜

ao

Comumente os desenvolvedores descrevem que a culpa ´

e do usu´

ario...

(17)

Motiva¸c˜

ao

Comumente os desenvolvedores descrevem que a culpa ´

e do usu´

ario...

(18)

Motiva¸c˜

ao

Usu´

arios utilizam o sistema atrav´

es de sua interface

Interface n˜

ao ´

e necessariamente interface gr´

afica

(19)

Evolu¸c˜

ao das interfaces

Tabela:

Gera¸

c˜

ao de computadores e de interfaces de usu´

ario (Adaptado de

Nielsen, 1993)

Gera¸

c˜

ao

Usu´

arios

Paradigma de interface

Pr´

e-hist´

orica ( - 1945)

Os inventores

Nenhum

Pioneira (1945 - 1955)

Especialistas

Programa¸

c˜

ao, Batch

e Pioneiros

Hist´

orica (1955 - 1965)

Tecnocratas e

Linguagens de comando

C. da Computa¸

c˜

ao

Tradicional (1965 - 1980)

Grupos especializados

Menus hier´

arquicos e forms

Moderna (1980 - 1995)

Profissionais diversos

WIMP

1

Futura (1995 - )

Todas as pessoas

Interfaces n˜

ao baseadas em comandos

(20)

Evolu¸c˜

ao das interfaces

(21)

Evolu¸c˜

ao das interfaces

(22)

Evolu¸c˜

ao das interfaces

(23)

Evolu¸c˜

ao das interfaces

(24)

Evolu¸c˜

ao das interfaces

(25)

IHC

Objetivo: Projetar interfaces efetivas para sistemas de software

Interfaces t˜

ao boas que se tornam invis´ıveis

“The ideal system so buries the technology that the user is not even aware

of its presence. The goal is to let people get on their activities, with the

technology enhancing their productivity, their power, and their enjoyment,

ever the more so because it is invisible, out of sight, out of mind.”

(26)

IHC

Objetivo: Projetar interfaces efetivas para sistemas de software

Interfaces t˜

ao boas que se tornam invis´ıveis

“The ideal system so buries the technology that the user is not even aware

of its presence. The goal is to let people get on their activities, with the

technology enhancing their productivity, their power, and their enjoyment,

ever the more so because it is invisible, out of sight, out of mind.”

(27)

IHC

IHC lida com sistema interativos para para utiliza¸c˜ao por humanos

(28)

IHC

IHC para Computa¸

c˜

ao:

Desenvolvimento de software - explorar maneiras para melhorar a

representa¸

c˜

ao da informa¸

c˜

ao graficamente

Desenvolvimento de hardware - buscar alternativas de dispositivos

de intera¸

c˜

ao (ex. teclados, dispositivos de apontamento, outros)

(29)

IHC

(30)

IHC

(31)

Projeto de Interface

Exerc´ıcios, Resumo e Referˆencias

Análise de usuário Prototipa¸cão de sistema Avalia¸cão de Interface

Projeto de Interface

Projeto de interface com o usu´

ario ´

e parte do projeto de software

Para o projeto de UI devem ser considerados:

Intera¸

c˜

ao do usu´

ario

Fatores humanos (Ergonomia)

O processo de projeto de interface contempla:

An´

alise do usu´

ario

Prototipa¸

c˜

ao de interface

Avalia¸

c˜

ao de interface

(32)

Projeto de Interface

Fatores humanos (Ergonomia)

(33)

Projeto de Interface

Fatores humanos (Ergonomia)

Caracter´ısticas do homem como processador de informa¸

c˜

oes:

Mem´

oria;

Percep¸

c˜

ao;

Habilidades motoras;

Resolu¸

c˜

ao de problemas;

...

(34)

Projeto de Interface

Fatores humanos (Ergonomia)

(35)

Projeto de Interface

(36)

Projeto de Interface

Fatores humanos (Ergonomia)

(37)

Projeto de Interface

Fatores humanos (Ergonomia)

Pessoas tem mem´

oria limitada. N˜

ao podemos lembrar

instantaneamente de 7 (+ou- 2) ´ıtens de informa¸

c˜

ao

Recomenda¸c˜

ao: N˜

ao apresente aos usu´

arios grandes quantidades

de informa¸c˜

ao

(38)

Projeto de Interface

Fatores humanos (Ergonomia)

(39)

Projeto de Interface

Fatores humanos (Ergonomia)

(40)

Projeto de Interface

Fatores humanos (Ergonomia)

(41)

Projeto de Interface

Fatores humanos (Ergonomia)

Pessoas possuem variadas capacidades f´ısicas. Algumas pessoas

ouvem melhor, outras enxergam melhor, ...

Recomenda¸c˜

ao: Projete considerando a m´

edia geral dos usu´

arios,

e n˜

ao projete para vocˆ

e

(42)

Projeto de Interface

Fatores humanos (Ergonomia)

(43)

Projeto de Interface

Fatores humanos (Ergonomia)

Pessoas cometem erros. Eventualmente um usu´

ario ir´

a cometer

um erro, e esta taxa tende a aumentar sob estresse

Recomenda¸c˜

ao: Forne¸

ca mensagens de erro orientadas ao

(44)

Projeto de Interface

Intera¸

c˜

ao do usu´

ario

Duas quest˜

oes aparecem ao se projetar uma interface com o

usu´

ario:

Como as informa¸

c˜

oes podem, a partir do usu´

ario, ser fornecidas

ao sistema de computador?

Como as informa¸

c˜

oes do computador podem ser apresentadas ao

usu´

ario?

(45)

Projeto de Interface

Intera¸

c˜

ao do usu´

ario

Estilos de intera¸

c˜

ao (Shneiderman):

Manipula¸

c˜

ao direta;

Sele¸

c˜

ao de menu;

Preenchimento de formul´

arios;

Linguagens de comandos;

Linguagem natural

(46)

Projeto de Interface

Intera¸

c˜

ao do usu´

ario

Manipula¸

c˜

ao direta

Principais vantagens:

Intera¸

c˜

ao r´

apida e intuitiva;

F´

acil de aprender.

Principais desvantagens:

Pode ser dif´ıcil de implementar;

(47)

Projeto de Interface

Intera¸

c˜

ao do usu´

ario

(48)

Projeto de Interface

Intera¸

c˜

ao do usu´

ario

(49)

Projeto de Interface

Intera¸

c˜

ao do usu´

ario

Sele¸c˜

ao de menu

Principais vantagens:

Evita erros do usu´

ario

Requer pouca digita¸

c˜

ao

Principais desvantagens:

Lenta para usu´

arios experientes

(50)

Projeto de Interface

Intera¸

c˜

ao do usu´

ario

Forne¸ca um exemplo de aplica¸c˜

ao adequada ao uso de Sele¸

c˜

ao de

menu?

(51)

Projeto de Interface

Intera¸

c˜

ao do usu´

ario

Forne¸ca um exemplo de aplica¸c˜

ao adequada ao uso de Sele¸

c˜

ao de

menu?

(52)

Projeto de Interface

Processo de projeto de UI

A interface com o usu´

ario deve ser desenvolvida de maneira

iterativa e incremental

usu´

ario e desenvolvedores devem interagir

(53)

Projeto de Interface

Processo de projeto de UI

(54)

Projeto de Interface

Processo de projeto de UI

An´

alise de usu´

ario

listar tarefas e suas intera¸

c˜

oes

compreender como usu´

arios realizam as tarefas

Prototipa¸c˜

ao de sistema

possibilitar ao usu´

ario um melhor entendimento de como ele

deseja interagir com o sistema

Avalia¸

c˜

ao de interface

identificar problemas e dificuldades de intera¸

c˜

ao

(55)

An´

alise de usu´

ario

Intera¸c˜

ao eficiente s´

o ser´

a obtida se existir compreens˜

ao do que o

usu´

ario espera do sistema

Algumas t´

ecnicas:

An´

alise da tarefa;

Estudos etnogr´

aficos;

Descri¸

c˜

ao de cen´

arios;

...

(56)

An´

alise de usu´

ario

An´

alise da tarefa

(57)

Prototipa¸c˜

ao de sistema

Objetivo: possibilitar aos usu´

arios experiˆ

encia direta com a

interface

A experiˆ

encia possibilita o julgar a usabilidade do sistema

Diferentes n´ıveis de fidelidade de prot´

otipo podem ser utilizados:

baixa-fidelidade (tradicional)

m´

edia-fidelidade (recente)

alta-fidelidade (tradicional)

(58)

Prototipa¸c˜

ao de sistema

Baixa-fidelidade

Prot´

otipos de baixa-fidelidade s˜

ao representa¸

c˜

oes simples da

interface (rascunhos)

Ferramentas:

Papel

L´

apis e borracha

Objetivo: Possibilitar uma descri¸

c˜

ao da interface em momentos

iniciais do desenvolvimento, utilizando poucos recursos

(59)

Prototipa¸c˜

ao de sistema

Baixa-fidelidade

(60)

Prototipa¸c˜

ao de sistema

Alta-fidelidade

Prot´

otipos de alta-fidelidade s˜

ao representa¸c˜

oes pr´

oximas da

interface final

Ferramentas:

Linguagem de programa¸

c˜

ao

(61)

Prototipa¸c˜

ao de sistema

Alta-fidelidade

(62)

Prototipa¸c˜

ao de sistema

M´

edia-fidelidade

Prot´

otipos de m´

edia-fidelidade agregam caracter´ısticas de

baixa-fidelidade e de alta-fidelidade

Prot´

otipos consistem em uma implementa¸c˜

ao com um conjunto

limitado de funcionalidades para um conjunto de cen´

arios

espec´ıficos

Objetivo:

Possibilitar a defini¸

c˜

ao da UI em etapas inicias

Representar a UI de forma barata e simples

(63)

Prototipa¸c˜

ao de sistema

M´

edia-fidelidade

(64)

Avalia¸c˜

ao de Interface

Pode-se dizer que a avalia¸c˜

ao possui trˆ

es objetivos:

avaliar a funcionalidade

avaliar o efeito da interface junto ao usu´

ario

identificar problemas espec´ıficos do sistema

(65)

Avalia¸c˜

ao de Interface

Existem basicamente dois grupos de m´

etodos utilizados para

avalia¸c˜

ao de interface:

inspe¸

c˜

ao de usabilidade - realizada sem envolver usu´

arios, e em

qualquer fase do desenvolvimento

teste de usabilidade - realizada com envolvimento de usu´

arios, e

que exige a existˆ

encia de uma implementa¸

c˜

ao (n˜

ao

(66)

Avalia¸c˜

ao de Interface

Inspe¸

c˜

ao de usabilidade

M´

etodos de inspe¸c˜

ao:

Avalia¸

c˜

ao heur´ıstica

Revis˜

ao de Guidelines

Percurso Cognitivo

outros

(67)

Avalia¸c˜

ao de Interface

Inspe¸

c˜

ao de usabilidade

Avalia¸c˜

ao heur´ıstica:

Um conjunto de avaliadores examina a interface e julga as

caracter´ısticas com base em um conjunto de heur´ısticas

(68)

Avalia¸c˜

ao de Interface

Inspe¸

c˜

ao de usabilidade

Algumas heur´ısticas de Nielsen (Nielsen, 1993)

1

Visibilidade do status do sistema

o sistema precisa manter o usu´

ario informado sobre o que est´

a

acontecendo

2

Compatibilidade do sistema com o mundo real

o sistema precisa se comunicar com o usu´

ario utilizando conceitos

familiares ao usu´

ario, n˜

ao devem ser usado termos orientados ao

sistema

3

Controle do usu´

ario e liberdade

usu´

ario cometem erros, eles devem ser capazes de reverter o erros

sem que seja necess´

ario um grande esfor¸

co

4

Consistˆ

encia e padr˜

oes

n˜

ao se deve utilizar diferentes palavras, situa¸

c˜

oes ou a¸

c˜

oes para

significar a mesma coisa

(69)

Avalia¸c˜

ao de Interface

Inspe¸

c˜

ao de usabilidade

(70)

Avalia¸c˜

ao de Interface

Inspe¸

c˜

ao de usabilidade

(71)

Avalia¸c˜

ao de Interface

Inspe¸

c˜

ao de usabilidade

(72)

Avalia¸c˜

ao de Interface

(73)

Intera¸c˜ao Humano Computador (IHC) Projeto de Interface

Exerc´ıcio

Forne¸

ca um exemplo de aplica¸c˜

ao que vocˆ

e considera um

exemplo de boa intera¸

c˜

ao. Justifique

Forne¸

ca um exemplo de aplica¸c˜

ao que vocˆ

e considera um

exemplo ruim de intera¸

c˜

ao. Justifique

Cite dois exemplos de aplica¸

c˜

oes j´

a utilizadas por vocˆ

e que

violam alguma heur´ıstica de Nielsen (Identifique a heur´ıstica)

(74)

Resumo

IHC ´

e a disciplina relacionada com os diversos aspectos de intera¸

c˜

ao entre pessoas e

computadores/m´

aquinas

O projeto de interface deve considerar os usu´

arios e suas caracter´ısticas (limita¸

c˜

oes)

a as alternativas de intera¸

c˜

ao

O processo de projeto de interface ocorre de forma iterativa atrav´

es das etapas de:

an´

alise de usu´

arios, prototipa¸

c˜

ao e avalia¸

c˜

ao da interface

(75)

Leituras recomendadas

Ian Sommerville.

Engenharia de Software, 8

a

_{ed., 2007.}

Cap´ıtulo 16: Projeto de interface com o usu´

ario

Helo´ısa Vieira da Rocha & Maria Cec´ılia Calani Baranauskas

Design e Avalia¸

c˜

ao de Interfaces Humano-Computador, 1

a

ed.,

Nied-UNICAMP, 2003.

(76)

Bibliografia

Ian Sommerville, Engenharia de Software

Cap´ıtulo 16: Projeto de interface com o usu´

ario

R. Pressman, Engenharia de Software

(77)

Bibliografia

H. V. Rocha & M. C. C. Baranauskas, Design e Avalia¸

c˜

ao de

Interfaces Humano-Computador

Cap´ıtulo 1: O que ´

e intera¸

c˜

ao/interface Humano Computador

Preece, Rogers e Sharp, Design de intera¸

c˜

ao

Cap´ıtulo 1: O que ´

e design de intera¸c˜

ao

Scott Klemer, Curso on-line: HCI

(78)

Bibliografia

Y. Aguiar (Disserta¸

c˜

ao de mestrado - UFCG)

SMILE Uma Ferramenta para Gera¸

c˜

ao Autom´

atica, Edi¸

c˜

ao e

Simula¸c˜

ao de Prot´

otipos de Interface do Usu´

ario.

Y. Aguiar & Bernardo Lula

SMILE.

Dispon´ıvel em: www.dsc.ufcg.edu.br/~figroup/SMILE/

F. Medeiros & Bernardo Lula

iTAOS.

(79)

Perguntas?

Alexandre de Andrade Barbosa

alexandre.barbosa@arapiraca.ufal.br