ENGENHARIA DE USABILIDADE E INTERFACES. Luiz Leão

Luiz Leão –

luizleao@gmail.com

http://www.luizleao.com

Conteúdo Programático

• Identificar os paradigmas de IHC;

• Conhecer o conceito de usabilidade;

• Reconhecer um problema de usabilidade;

• Examinar diferentes tipos de interfaces.

Introdução

• Diversos paradigmas de interação estão

disponíveis no mercado.

• As necessidades devem ser analisadas, para que

a escolha seja feita de maneira adequada.

Paradigma 1: LINHAS DE COMANDO

• O usuário digita um comando por vez seguindo

uma sintaxe específica.

• O sistema executa o comando e exibe o resultado

do processamento, quando houver.

• O antigo sistema operacional MS-DOS utilizava

este estilo de interação.

MySQL CLI (Command Line Interface)

Paradigma 2: PERGUNTAS E RESPOSTAS

• O sistema faz perguntas ao usuário que, por sua vez,

responde fornecendo os dados solicitados.

• Quando o sistema dispuser de todos os dados dos

quais precisa, realiza o processamento dos mesmos e

exibe os resultados.

Wizard de Instalação

Paradigma 3: MENUS

• As possíveis ações a serem executadas pelo usuário

estão listadas na tela, ou organizadas em menus

hierárquicos, e é possível selecionar uma delas.

• A maioria das aplicações Windows organiza suas opções

em menus hierárquicos.

Windows Explorer do MS Windows

Navegador Firefox

Paradigma 4: PREENCHIMENTO DE FORMULÁRIOS

• O usuário digita os dados em campos específicos,

como se estivesse preenchendo um formulário

impresso em papel.

• Muitas aplicações de escritório e de bancos de dados

utilizam esse estilo de interação.

Site Submarino, Declaração de IR,

Orkut

Paradigma 5: TECLAS DE FUNÇÃO

• A interação se dá através de um conjunto de teclas

especiais ou de combinação de teclas para diferentes

operações.

• As teclas de atalho, que dão acesso mais rápido às

opções de menus, são um exemplo desse estilo de

interação.

Navegador Firefox

Paradigma 6: MANIPULAÇÃO DIRETA

• Os objetos utilizados na criação da interface são

graficamente representados na tela e o usuário pode

manipulá-los diretamente quando aponta, clica,

arrasta, digita etc.

• Grande parte das interfaces gráficas baseia-se neste

estilo de interação.

Paradigma 6: MANIPULAÇÃO DIRETA

Fonte da imagem: http://btechzone.com/wp-content/uploads/2010/10/ frustrated.jpg

Independente do paradigma

de interação adotado,

EVITE PROBLEMAS DE

INTERAÇÃO!

“Um problema de usabilidade é observado em determinadas

circunstâncias quando uma característica do sistema interativo

ocasiona perda de tempo, compromete a qualidade da tarefa ou

mesmo inviabiliza sua realização. Como consequência, ele

estará aborrecendo, constrangendo ou até traumatizando a

pessoa que utiliza o sistema interativo.”

(CYBIS et. al. Ergonomia e usabilidade: conhecimentos,

métodos e aplicações. Novatec Editora, 2010)

Ergonomia e Usabilidade:

conhecimentos, métodos e aplicações.

Autores: Walter Cybis, Adriana Holtz

Betiol e Richard Faust

Novatec Editora, 2010

• É um dos aspectos a ser observado durante a avaliação

da usabilidade das interfaces.

• Dentro desse aspecto, é importante preocupar-se com a

quantidade de erros cometida pelos usuários durante o

uso da interface, a gravidade desses erros e sua

recuperabilidade.

• Por que é tão importante estar atento a essas

características durante o projeto de interfaces e ao

longo da implementação da aplicação?

• Walker (1990) redefine a geração dos computadores sob o

ponto de vista de como os usuários interagem com ele

(afirmando ser este ponto de vista muito mais importante do

que o de como eles foram construídos), em 5 gerações:

Evolução das Interfaces Homem-Computador

• Surgiu em 1945, com a criação do ENIAC

• Composta pelos sistemas de tabulação e pelo ENIAC,

desenvolvidos para resolver problemas específicos, por

especialistas com conhecimento preciso e detalhado da operação

do hardware.

• O usuário tinha uma relação um a um com o computador, na sala

do computador, operando-o através de chaves e botões.

Primeira Geração

• Painéis com plugues, botões, mostradores e

• Pelo fato do usuário ser o operador da máquina e controlá-la com

pouca ou nenhuma abstração, não havia qualquer mediação entre

o computador e seu usuário especialista.

• Nos anos 50, o modelo do usuário de um computador era o de um

usuário individual, com o tempo totalmente dedicado para a

máquina.

Primeira Geração

• Painéis com plugues, botões, mostradores e

Primeira Geração

• Painéis com plugues, botões, mostradores e

• Década de 50

• A segunda geração introduziu muitos níveis importantes de mediação e

abstrações entre o usuário e o hardware do computador.

• Provavelmente, a mudança mais importante foi a autonomia de tempo

oferecida, pelo processamento em lotes, para o usuário que, até então,

ficava o tempo todo em que durava o processamento de um programa,

dedicado a operação do computador.

Segunda Geração

• Lotes de cartões de dados perfurados e entrada de

• As linguagens de controle de serviços ("Job Control Languages - JCL"),

controlavam as atividades dos computadores sem a necessária

intervenção do usuário.

• Os lotes de cartões, as listagens de impressoras, os balcões de

atendimento e os JCL formaram o ponto central da imagem do usuário

dos sistemas de segunda geração.

Segunda Geração

• Lotes de cartões de dados perfurados e entrada de

Segunda Geração

• Lotes de cartões de dados perfurados e entrada de

•

Década de 60

•

Os sistemas operacionais passaram, a proporcionar a execução concorrente de

múltiplos serviços, originando o conceito de compartilhamento do computador com

uma grande comunidade de usuários, de maneira interativa.

•

Os conceitos de produtividade de máquina (que ocasionaram a execução

concorrente de programas), deram origem ao conceito de produtividade do usuário,

através de uma maior interação conversacional do usuário com o computador,

levando ao desenvolvimento dos sistemas de tempo compartilhado dos anos

sessenta.

•

O uso de sistemas em tempo compartilhado proporcionou, aos usuários de sistemas

em lotes, os mesmos serviços oferecidos anteriormente, porém acrescidos da

facilidade da execução dos trabalhos de modo interativo, permitindo a monitoração

de seus progressos de forma "on-line".

Terceira Geração

• O dispositivo interativo (um terminal de impressão lento ou um teletipo

com tela em ASCII), permitia o desenvolvimento de Computação

Conversacional.

• O usuário digitava uma linha de entrada para o computador, que

imediatamente a processava e respondia com outra linha.

• No modo de interação conversacional, o usuário conversava com o

computador da mesma forma que com outra pessoa, através de uma

ligação teletipo a teletipo.

Terceira Geração

Terceira Geração

• Década de 70

• O desenvolvimento de terminais alfanuméricos rápidos e

sofisticados permitiu que se pudesse apresentar, para o usuário,

uma grande quantidade de informações de maneira quase que

instantânea, possibilitando o desenvolvimento dos menus de

escolhas, pelos quais os usuários podiam selecionar o item

desejado, simplesmente pressionando uma ou duas teclas.

• Estes tipos de menus rapidamente se tornaram padrões para os

Quarta Geração

Quarta Geração

• Sistemas de Menus

Mainframe

Quarta Geração

• Surgiu no Centro de Pesquisa de Palo Alto da Xerox

• Alan Kay e outros pesquisadores do perceberam que o

desenvolvimento dos circuitos integrados monolíticos (que

diminuíram o custo da memória do computador), dos processadores

rápidos e baratos, das redes de dados e das técnicas de

programação orientadas a objetos, poderiam permitir o

desenvolvimento de uma forma, totalmente nova, de interação entre

os usuários e os computadores, através de telas com gráficos

bidimensionais, que permitiram a aplicação de muitas metáforas

que com as tecnologias anteriores podiam ser apenas vagamente

aproximadas da realidade.

Quinta Geração

• A tela do computador pode ser transformada em uma

mesa de trabalho completa, com folhas de papel que

podiam ser folheadas, contendo vários acessórios e

recursos.

• A disponibilidade de um dispositivo apontador, como o

"mouse", permitiu a seleção de objetos na tela, sem a

necessidade da digitação de nomes ou da opção através

dos menus, como nos sistemas anteriores.

Quinta Geração

Quinta Geração

Quinta Geração

• Pressman (1995) classifica a evolução das interações entre

o ser humano e o computador em apenas quatro gerações.

• O autor leva em consideração as tecnologias utilizadas para

possibilitar a interação para os usuários.

Evolução das Interfaces Homem-Computador

• A comunicação é puramente textual e é feita via comandos

e respostas às perguntas geradas pelo sistema.

Primeira Geração

Primeira Geração

• Uma lista de opções é apresentada ao usuário e a decisão

apropriada é selecionada via algum código digitado.

• Ex: Tela com o menu de funções desenhadas para

terminais de Mainframe.

Segunda Geração

Segunda Geração

• Estas interfaces são algumas vezes referenciadas como

interfaces "WIMP" ("windows, icons, menus, and pointing

devices").

• Trazem o conceito de mesa de trabalho ("desktop").

Terceira Geração

Terceira Geração

• Esta geração (que para ele é a corrente), soma, aos

atributos das interfaces de terceira geração, as técnicas de

hipertextos e multitarefas.

• A quarta geração das interfaces está disponível na maioria

das estações de trabalho e dos computadores pessoais

atuais.

Quarta Geração

Quarta Geração

• CUI

• GUI

• PUI

• VRUI

• Character-based User Interface

• Também conhecido como CLI (Command Line Interface)

• São as interfaces fundamentadas em textos e caracteres

alfanuméricos, fazendo uso da metáfora de uma máquina

de escrever ou de um teletipo.

• Fazem parte das primeiras gerações de interface homem

computador.

• Graphical User Interface

• São as interfaces fundamentadas em gráficos e

desenhos, fazendo uso de metáforas de mesas de

trabalho, documentos, botões, janelas, etc..

• Fazem parte da quinta geração apresentada por

Walker ou da terceira apresentada por Pressman.

• Pen-based User Interface

• São as interfaces compostas de um monitor de vídeo em

formato de uma planilha ou bloco de anotações que

recebe dados através de uma espécie de caneta

eletrônica.

• Tais interfaces fazem uso da metáfora de se escrever ou

desenhar em um papel de maneira manuscrita.

• Virtual Reality-based User Interface

• O objetivo dessa tecnologia é recriar ao máximo a sensação

de realidade para um indivíduo, levando-o a adotar essa

interação como uma de suas realidades temporais

• São as interfaces fundamentadas no paradigma da realidade

virtual e utilizadas com muito menor frequência que as

anteriores por limitação de custos e tecnologia.

• Porém, algumas opções já estão disponíveis no mercado, com

o objetivo de popularizar a tecnologia e, em seguida,

barateá-la.

• Não torne a tela muito brilhante ou escura

- Use as cores brilhantes em áreas pequenas e cores

suaves em áreas maiores

• Não aposte na boa habilidade visual de todos os usuários

- Um número muito grande de pessoas têm algum tipo de

disfunção visual;

- Isto faz com que algumas pessoas não consigam distinguir

perfeitamente algumas cores e confundir outras;

- Não só o daltonismo mas também a distorção de

algumas lentes provoca estes efeitos

• Se possível tornar as cores personalizáveis

- No HTML, podemos definir a cor de fundo e a

cor de links já visitados ao gosto do usuário.

• Não use muitas cores extravagantes

- Limite-se a 16 a 20 cores, que são as cores

básicas do ambiente Windows e que aparecem

bem em quase todos os monitores

• Simplicidade

• Use poucas cores (2 a 7); é mais fácil de dominar e mais simples de

distinguir em dispositivos de menor qualidade ou preto-e-branco

• Cores contrastantes como ferramenta de medida

• Se as cores serão usadas para indicar continuidade, como a

passagem de tempo enquanto se espera que uma tarefa termine,

então não use um espectro de cores (do

violeta

ao

vermelho

).

• Não associar muitas cores para serem lembradas

• As cores podem possuir um significado, além daqueles mais

populares (

vermelho

para Pare e

Verde

para Seguir).

• Como exemplo:

Cinza

para Home-Page,

Branco

para Texto,

Verde

para Apresentações (PowerPoint) e

Amarelo

para Planilhas

• Lembre que cores mal utilizadas é pior do que não usar cores

• Associações comuns:

•

Vermelho

: pare, perigo, fogo, quente

•

Amarelo

: cuidado, atenção, aviso

•

Verde

: siga, OK

•

Azul

: frio, água, informação

• Diferenças culturais na associação de cores

• Alguns países têm cores associadas à alguns objetos e fatos:

• No Egito o

amarelo

é a cor da alegria e prosperidade

• As caixas de correio são

vermelhas

na Inglaterra,

azuis

nos

Uso de Cores no Design de Telas - Regras para o Projeto

• Cores Opostas:

• Se

vermelho

é Pare: oposto é

verde

• Se

vermelho

é calor, quente: oposto é

azul

• Sensação das cores:

• A sensação é o efeito psico-fisiológico sentido pelo ser humano

• Cada cor tem uma sensação associada, e portanto o uso inadequado

de uma cor pode prejudicar a comunicação visual numa tela

• A sensação também pode variar em função do contraste, isto é, a cor

de um texto ou objeto pode ter sensação diferente conforme a cor do

fundo da tela.

• Cores quentes ou luminosas:

amarelo

,

laranja

,

vermelho

• Harmonia das cores:

• Harmonia das cores opostas ou de contraste: o maior contraste

se obtém justapondo cores complementares;

• Ex:Preto e Branco (Texto e fundo).

• Vermelho e azul (mapa de temperatura)

• Harmonia das cores análogas ou vizinhas: é o emprego de uma

cor e uma ou duas vizinhas;

• Ex:

laranja

,

vermelho

e

amarelo

;

• Harmonia monocromática ou de cor dominante: é o uso de uma

única cor, aplicada pura e em vários tons, claros e escuros

• Harmonia das cores:

Uso de Cores no Design de Telas - Regras para o Projeto

Mapa de Temperatura

Fonte: PNGTREE

Uso de Cores no Design de Telas - Regras para o Projeto

• Cores de primeiro e segundo plano

• Usar sempre pares complementares

• Usar cores contrastantes

Uso de Cores no Design de Telas - Regras para o Projeto

• Cores e tamanho

• Cores são difíceis de distinguir em pequenas áreas

• Cores brilhantes parecem maiores