aula - interfaces e estilos de interação

Algoritmos e Programação II

Interface &

Estilos de Interação

Fábio Moura

fabio.mpereira@uesb.edu.br

2

Interface

Interface e Interação

Paradigmas da Comunicação Humano-

Computador e o Design de Interfaces

Usabilidade

Comunicabilidade

Perspectivas em IHC

3

Interface

Conceito inicial

O hardware e o software através dos quais

um humano e um computador podem se

comunicar

Conceito atual

Inclui aspectos relativos ao processamento

perceptual, motor, viso-motor e cognitivo

do usuário

4

Interface do Usuário

Tem como objetivo fornecer uma interação humano-computador o mais “amigável” possível Fácil de ser usada pelo usuário

Fornecer seqüências simples e consistentes de interação

Mostrar claramente as alternativas disponíveis a cada passo da interação

Não confundir nem deixar o usuário inseguro

Deve passar despercebida para que o usuário possa se fixar somente no problema que deseja resolver utilizando o sistema

5

Interface do Usuário

Abrange todas as partes que constituem um

sistema com o qual o usuário pode interagir

É por meio da interface que se pode ter um

efetivo uso da aplicação

Um bom projeto de interface é responsável

por fatores como a satisfação subjetiva, a

eficiência, a segurança, o custo de

treinamento e o retorno do investimento

Interface

Interface e Interação

7

Interface e Interação

Interface entre Homem e Máquina é a

parte de um dispositivo que permite ao

usuário administrar e supervisionar o

funcionamento do referido dispositivo

Utiliza para isso dispositivos que sejam

sensíveis aos seus comandos e que, ao

mesmo tempo, consigam estimular a

percepção do usuário

8

Interface e Interação

Na relação entre usuário e sistema, a

interface faz referência ao esforço

conjugado de software e hardware, que

atuam simultaneamente para possibilitar

e descomplicar a comunicação entre o

usuário e a aplicação

9

Interface e Interação

Uma vez que exige do usuário uma

maior capacidade cognitiva para a

interpretação e expressão de

informações processadas por um

sistema computacional, a interface entre

usuários e sistemas computacionais

difere muito das interfaces de máquinas

convencionais

Interface

Paradigmas da Comunicação

Humano-Computador e o

Design de Interfaces

11

Paradigmas da Comunicação Humano-

Computador e o Design de Interfaces

O processo de design em IHC

Envolve desde uma discussão crítica dos

ciclos de vida clássicos para o

desenvolvimento de software, originais da

Engenharia de Software, até modelos mais

específicos do ciclo de design

Em geral envolvem, além do desenvolvimento

do sistema propriamente dito, um contexto

mais amplo que inclui também questões de

natureza social e de organização do trabalho

12

Paradigmas da Comunicação Humano-

Computador e o Design de Interfaces

A interface de usuário deve ser entendida

como sendo a parte de um sistema

computacional com a qual uma pessoa entra

em contato físico, perceptiva e

conceitualmente

Componente físico, percebido e manipulado pelo

usuário

Componente conceitual, apenas interpretado,

processado e raciocinado pelo usuário – modelo

conceitual do usuário

13

Paradigmas da Comunicação Humano-

Computador e o Design de Interfaces

A interface é um sistema de comunicação, constituído de hardware e software

Hardware – dispositivos, que permitem ao usuário de um sistema realizar atividades motoras e perceptivas, tais como o monitor, o teclado, o mouse, etc.

Software – parte do sistema que ativa os controles de hardware por meio de sistemas computacionais

14

Paradigmas da Comunicação Humano-

Computador e o Design de Interfaces

A interface também pode ser caracterizada

pela revelação das affordances do sistema

Propriedades percebidas e reais de um dispositivo

que determinam a sua efetiva utilização

Oferecem claras indicações sobre a operação de

um dispositivo

O usuário, observando um dispositivo, sabe

exatamente o que fazer com ele

A affordance de um botão é ser pressionado, a

affordance de um interruptor é ser comutado, etc.

15

Sistema

Usuário

Processo de Interação

Humano-Computador

Interface Aplicação

Ação

Interpretação

Interface

Usabilidade

17

Usabilidade

Qualidade da relação entre sistemas computacionais e usuários

Envolve diversos aspectos

Facilidade de aprendizado do sistema Tempo e esforço necessários para que os

usuários atinjam um determinado nível de desempenho

Facilidade de uso Avalia o esforço físico e cognitivo do usuário

durante o processo de interação

Mede a velocidade de uso e o número de erros cometidos durante a execução de uma tarefa

18

Usabilidade

Satisfação do usuário Avalia se o usuário gosta e sente prazer em

trabalhar com o sistema

Flexibilidade Avalia a possibilidade de o usuário acrescentar e

modificar as funções e o ambiente iniciais do sistema

Mede também a capacidade do usuário utilizar o sistema de maneira inteligente e criativa, realizando novas tarefas não previstas pelos desenvolvedores

19

Usabilidade

Produtividade

Se o uso do sistema permite ao usuário ser mais

produtivo do que seria se não o utilizasse

É necessário que o projetista de sistemas

(designer) determine quais dos aspectos

indicados são prioritários para o sistema

É praticamente impossível cuidar de todos de

modo satisfatório

São as escolhas do designer que vão determinar

a maneira de usuários e sistemas interagirem

20

Usabilidade

Sistemas que limitam as possibilidades de ação e decisão do usuário, impedindo que erros sejam cometidos Anti-idiotas (idiot-proof)

Novas tecnologias apenas serão mais eficientes quando forem desenvolvidas para ampliar, e não para substituir, as capacidades dos usuários Desafio de usabilidade

A tecnologia deve visar sempre estimular a eficiência e a inteligência das pessoas

21

Usabilidade

Aplicabilidade

Além da usabilidade, faz-se necessário que os sistemas sejam úteis na solução de problemas distintos

Todo usuário é especializado em alguma área, e assim sendo o software deve ser útil à sua especialidade, funcionando como uma ferramenta a serviço do usuário, em vez de colocar o usuário a serviço da tecnologia

Interface

Comunicabilidade

23

Comunicabilidade

Propriedade de transmitir eficaz e eficientemente ao usuário as intenções e os princípios de interação que nortearam a criação de um sistema

Tem por objetivo tornar o usuário capaz de entender o senso lógico do projetista de sistemas durante o processo de criação, por meio da interação com a aplicação

24

Comunicabilidade

Busca tornar o software cada vez mais

aplicável

Aumenta as chances do usuário utilizar o software

de modo mais criativo, eficiente e produtivo

Exemplo de alta comunicabilidade

Interface

Perspectivas em IHC

26

Perspectivas em IHC

Transformações dos sistemas computacionais Princípio: usuário obrigado a aprender a “língua”

do computador

Com o desenvolvimento da IA: o computador passou a ser tratado praticamente como uma “pessoa”

Transformação do computador em ferramenta de trabalho: usuário começou a utilizar os recursos de informática para desenvolver produtos

Hoje: foco voltado para o usuário e sistema em segundo plano computador como mediador de comunicação interpessoal

27

Perspectivas em IHC

Usuário como máquina Computador como pessoa

Computador como mídia Computador como ferramenta

=

+ = Trabalho

ou

produto

28

Perspectivas em IHC

A perspectiva que considera o

computador como uma ferramenta está

baseada no desenvolvimento de

sistemas centrado no usuário

O desenvolvimento de software

atualmente está centrado, sobretudo, na

engenharia semiótica

Interface Homem-Máquina

Estilos de Interação

30

Estilos de Interação

Linguagem Natural

Linguagem de Comando

Menus

Preenchimento de Formulários

Manipulação Direta

WIMP (Windows, Icons, Menus and

Pointers)

31

Estilos de Interação

Formas como usuários e sistemas

computacionais se comunicam e interagem

Paradigmas de interação

Fator que também pode determinar a forma de

usuários e sistemas interagirem

Responsável por indicar a seqüência em que são

escolhidos e ativados pelo usuário os elementos

que constituem uma operação

Pode ser ordenado dos seguintes modos: ação-

objeto e objeto-ação

32

Paradigmas de Interação

Modo ação-objeto

Primeiramente o usuário escolhe a

operação a realizar, para, em seguida,

escolher o objeto que sofrerá a ação

resultante da operação

Modo objeto-ação

Inicialmente o usuário escolhe o objeto e,

em seguida, indica a operação

Estilos de Interação

Linguagem Natural

34

Linguagem Natural

A sua utilização pode ser muito

interessante, sobretudo para quem tem

conhecimentos restritos de computação

Sistemas de consulta a informações

Sistemas baseados em conhecimento

Somente a linguagem natural tem a

capacidade de expressar com certa

naturalidade o raciocínio marcadamente

artificial de um software ou sistema

35

Linguagem Natural

As aplicações muitas vezes são obrigadas a

interpretar construções vagas, ambíguas, e

até incorretas do ponto de vista semântico e

gramatical

Alguns sistemas especialistas têm obtido

algum sucesso na utilização da linguagem

natural

Pré-ajustamento de frases em linguagem natural

no sistema para evitar erros de interpretação

36

Linguagem Natural

Tem como meta principal tornar a

aplicação mais próxima do usuário,

privilegiando desse modo a forma dele

se comunicar

Linguagens de comando são utilizadas

no sentido contrário – aproximar o

usuário dos sistemas de computação

Estilos de Interação

Linguagem de Comando

38

Linguagem de Comando

Tem como objetivo principal possibilitar ao

usuário o envio direto de instruções ao

sistema

Teclas de funções, um único caractere,

abreviações curtas, palavras inteiras ou uma

combinação de teclas e caracteres

Os comandos que utilizam caracteres e teclas

de funções são acionados mais facilmente,

mas são mais fáceis de esquecer

39

Linguagem de Comando

Recomenda-se, portanto, o uso de

comandos que utilizam palavras ou

abreviações, pois desde que estas

sejam bem escolhidas, dificilmente o

comando é esquecido pelo usuário

São consideradas mais eficientes do

que interfaces de outros tipos – acesso

direto ao sistema

40

Linguagem de Comando

Asseguram ao usuário maior liberdade de iniciativa e flexibilidade para criar comandos por meio da variação de parâmetros e da conjugação de palavras e sentenças

Para usuários iniciantes, tanto poder e flexibilidade implicam uma maior dificuldade de aprendizado Domínio insuficiente da sintaxe da linguagem e

dos comandos, erros de digitação, falta de padronização entre os sistemas, etc.

41

Linguagem de Comando

Usuários experientes têm um maior controle

sobre o sistema e conseguem obter um maior

rendimento dele

Menus indicativos de diversos comandos e de

como devem ser acionados pelo usuário

podem ser úteis para alguns tipos de

interfaces baseadas em comandos

Ex.: PINE, uma ferramenta de gerenciamento de

correio eletrônico

42

Interface no Estilo de

Linguagem de Comando

43

Interface Baseada em Comandos

Auxiliada por Menus

44

Vantagens

Flexível

Atrativa para usuários especialistas

Oferece suporte à criação de “scripts” e

macros definidos pelo usuário

É satisfatório para interação com

computadores em rede mesmo em

baixa velocidade

45

Desvantagens

A retenção de comandos é geralmente muito pobre

Difícil aprendizagem dos comandos

Taxas de erro muito altas

Difícil fornecer mensagens de erro e assistência Diversidade de possibilidades

Mapeamento complexo entre a tarefa e os conceitos e sintaxe da interface

Não atrativa para usuários que não são especialistas

Estilos de Interação

Menus

47

Menus

Conjunto de opções apresentadas na tela de

um sistema computacional, a partir das quais

é possível interferir no funcionamento de uma

interface

Basta ao usuário apenas reconhecer o item

que deseja

Os itens nele contidos devem ser auto-

explicativos, a fim de que seja assegurada a

eficiência de funcionamento do menu

48

Menus

Uma das desvantagens da interação do usuário com o sistema via menus é o excessivo espaço que eles ocupam na tela do computador

Há varias formas de agrupamento e apresentação de opções de menu, a mais utilizada é a categorização hierárquica de opções

Tipos de menus Pull-down

Popup

49

Menus

seleção de menu páginas web são geralmente

baseadas na seleção de menus

50

Vantagens

Ideal para usuários novatos ou intermitentes

Pode ser atrativo para usuários especialistas se os mecanismos de apresentação e seleção são rápidos e “teclas de atalho” apropriadas são implementadas

Proporciona exploração Usuários podem “olhar ao redor” dos menus para

encontrar o comando apropriado, diferentemente de ter que lembrar o nome de um comando e sua ortografia quando usando linguagem de comando

51

Vantagens

Estrutura a tomada de decisão

Permite fácil suporte à manipulação de

erros

A entrada do usuário não deve ser

analisada gramaticalmente (parsing), como

na linguagem de comando

52

Desvantagens

Muitos menus pode levar à sobrecarga

de informação ou a uma complexidade

de proporções desencorajadoras

Pode ser lenta para usuários freqüentes

Pode não ser compatível com

dispositivos gráficos pequenos

Estilos de Interação

Preenchimento de Formulários

54

Preenchimento de Formulários

Lembram formulários em papel, contendo

campos que o usuário deve preencher

Formulários são de operação e aprendizado

bastante simples

Projetado para que usuários lidem com

grande volume de informações de entrada

As interfaces que emulam formulários têm

sido cada vez mais utilizadas em páginas web

55

Preenchimento de Formulários

estilo clássico

estilo mais moderno

56

Vantagens

Simplifica a entrada de dados

Encurta o aprendizado

Campos são predefinidos e precisam

apenas ser “reconhecidos”

Guia o usuário via regras predefinidas

57

Desvantagens

Consome espaço na tela

Geralmente define o cenário para

formalização rígida de processos do

negócio

Estilos de Interação

Manipulação Direta

59

Manipulação Direta

Interfaces que, sem a utilização de

comandos de uma linguagem

específica, possibilitam ao usuário atuar

diretamente sobre os objetos de uma

aplicação, ao contrário das interfaces

por linguagens de comandos, onde o

usuário interage de forma indireta

60

Manipulação Direta

As interfaces gráficas que utilizam uma metáfora de desktop oferecem ao usuário a possibilidade de interação com o gerenciador de arquivos do sistema operacional, pela manipulação, especialmente via mouse, de ícones que representam arquivos, diretórios, discos e demais componentes do computador

61

Manipulação Direta

Windows File Explorer,

onde arquivos são

arrastados e soltos

62

Manipulação Direta

MacPaint

63

Vantagens

Apresenta visualmente o conceito de tarefa

Fácil aprendizado

Erros podem ser evitados mais facilmente

Encoraja a exploração

Satisfação subjetiva alta

Memória de reconhecimento

64

Desvantagens

Pode ser mais difícil de programar

Incompatível com dispositivos gráficos pequenos

Representação visual e espacial nem sempre é a preferível

Metáforas podem ser enganosas “A essência de uma metáfora é entender e

experimentar um tipo de coisa em temos de outra” (Lakoff e Johnson, 1983), o que, por definição, torna a metáfora diferente do que ela representa ou aponta

Notações compactas podem se enquadrar melhor a usuários especialistas

Estilos de Interação

WIMP (Windows, Icons, Menus and Pointers)

66

WIMP (Windows, Icons, Menus

and Pointers)

Implementada por meio da tecnologia desenvolvida para interfaces gráficas

É possível desenhar as janelas e controlar nelas a entrada de dados via dispositivos de hardware, como teclado e mouse

É possível construir ícones que permitem a interação por meio do mouse

Permite que estilos variados sejam utilizados, tais como menus, manipulação direta, preenchimento de formulários e linguagem de comandos

67 29/11/2014 09:36 Interação Humano-Computador – Interface & Estilos de Interação

Tela de Uma Aplicação no Estilo

WIMP

Estilos de Interação

Novos Estilos de Interação

69

Novos Estilos de Interação

WIMPs

Saída

Entrada

Figuras, gráficos,

objetos de interação

Apontador 2D

arrastar e soltar

Graphical

User Interface

WIMPs +

Interfaces

Multimídia

Mistura de mídias

dinâmicas e estáticas

Entrada:

som e imagem

Pós-WIMPs

Futuro I:

(multimodal,

multimídia, virtual)

Ambientes simulados

Realidade aumentada

RV multimídia

Comandos:

- voz

- gestos

- movimento dos olhos

- biosinais

- manipulação de

objetos

físicos

Interface / Estilos de Interação

FIM