Interface humano - computador

MODELO CONCEITUAL, ESTILOS E

FORMAS DE INTERAÇÃO
Novas necessidades
• Desktop (padrão inicial: CPU, mouse, teclado e monitor)
• Sistemas mono ou multiusuário em que os dados são
armazenados localmente, de forma segura e controlada
• Há pouca interação entre usuários – apenas aquela sobre os dados
• Computação ubíqua
• Ubíquo significa aquilo que está em toda a parte ao mesmo tempo
• As informações podem ser acessadas de qualquer lugar, de
variadas formas
• Os sistemas são embutidos no ambiente, sem que os usuários os
percebam ou interajam diretamente com eles
• Exemplos
• lâmpadas que se acendem através dos sensores de presença
• Porta-retratos eletrônicos
• Sistemas de calefação inteligentes
Novas Necessidades

• Computação móvel
• Aparelhos portáteis com grande poder computacional
que permite integração de diferentes funções: agenda,
telefone, TV, walkman, calculadora, internet
• Computação Social
• Suporte a processos executados por grupos de
pessoas (Blogs, wikis, CSCW, MMOG, etc.
• Envolve as diversas questões sociais de trabalho em
grupo,
• Modelo 3C : Comunicação, Colaboração e
Coordenação
Novas Necessidades

• Computação vestível (wearable – BAN: body-area network)

• Sistemas interativos são “vestidos”, ou seja, usados no corpo ou
embutidos no vestuário
• Algumas de suas características são:
• interação continua – não há necessidade de ligar ou desligar
o dispositivo
• multitarefa – não é necessário
parar o que se está fazendo
para usar o dispositivo
• realidade aumentada – fusão
do mundo real com o mundo
virtual
Novas Necessidades

• Realidade virtual
• Ambiente simulado pelo
computador que imita o mundo real
• Geralmente o usuário é
representado por um avatar no
ambiente virtual
• Características
• Imersão (corporal): controle direto
• Interação em espaço e com objetos
tridimensionais
• Redefinição dos conceitos de
espaço e tempo
• Redefinição da natureza (leis da
física, química, etc.)
Modelos de interação

• Quadro comparativo
Novos pensamentos

• Como permitir que as pessoas acessem e interajam com a

informação no trabalho, ambiente social e da rotina do dia-
a-dia?
• Como projetar interfaces para dispositivos que estarão
embutidos no ambiente?
• Como oferecer informações contextualmente relevantes
para as pessoas, nos locais e momentos adequados?
• Como assegurar que a informação, que passa por
dispositivos e monitores interconectados, seja segura e
confiável?
Modelo de Interação de Norman

Distância entre
o que o usuário
vê e o que ele
entende de
acordo com
Saída
Saída seus objetivos

Entrada Usuário
Jogo Entrada
Distância entre
o que o usuário
deseja fazer e
como ele
articula suas
intenções
Design de Interação

• “Projetar produtos interativos que forneçam suporte às

atividades cotidianas das pessoas, seja no lar ou no
trabalho”.
• Foco no usuário: Como otimizar as interações do usuário
com o sistema, ambiente ou produto, de forma a combinar
atividades e necessidades do próprio usuário
• Quem são os usuários?
• Quais as atividades serão realizadas?
• Onde e como ocorrerá a interação?
• Quais os recursos tecnológicos estarão disponíveis?
LUCID (Logic User-Centered Interface
Design)

Desenvolver o conceito do produto

Realizar pesquisa e analise das necessidades – usando
construção de cenários, design participativo, fluxo e
sequencia de tarefas

Criar conceitos e protótipos de telas – usando guidelines,
guias de estilo e metáforas para o design

Design iterativo e refinamento – expandindo o protótipo
para sistema completo; inclui a avaliação por experts e
testes de usabilidade

Implementação do Software

Suporte.
Entender o problema a ser solucionado

1. Antes da decisão sobre o design dos aspectos físicos é

imprescindível entender o problema a ser solucionado: conceitualizar
o que se deseja criar e ter clareza sobre o porquê desta solução
2. Refletir sobre como o design poderá fornecer suporte às pessoas em
suas atividades
3. Definir as metas de usabilidade e as decorrentes da experiência do
usuário
4. Fazer suposições sobre a forma como as pessoas interagem com as
ferramentas e as necessidades não explicitadas
5. Pensar na estrutura geral a ser construída e como ela será
transmitida aos usuários
Metas
Metas da experiência do
Metas de usabilidade usuário
• Eficácia • Satisfatório
• Eficiência • Agradável
• Segurança • Divertido
• Utilidade • Interessante
• Facilidade de • Útil
aprendizado • Motivador
• Capacidade de • Esteticamente apreciável
memorização • Emocionalmente
adequado
Usabilidade

• Norma ISO 9241:

“ Usabilidade é a capacidade de um sistema interativo
oferecer aos seus usuários, em um determinado
contexto de operação, realizar tarefas de maneira
eficaz, eficiente e agradável”

• Nielsen:
“ É um atributo de qualidade relacionado à
facilidade de uso”
Princípios de usabilidade e design

• Abstrações generalizáveis destinadas a orientar os projetistas em seu

trabalho (o que os usuários devem ver e fazer ao realizarem tarefas
utilizando um sistema interativo):
• Visibilidade (quanto mais visíveis as funções, melhor os usuários
saberão como proceder)
• Feedback (retorno de informações sobre a ação que foi feita,
permitindo ao usuário continuar a tarefa)
• Restrições (delimitação do tipo de interações que podem ocorrer
em determinado momento – impede o usuário de realizar opções
incorretas ). Podem ser físicas, lógicas e culturais.
• Mapeamento (relação entre os controles e seus efeitos no mundo)
• Consistência (operações semelhantes e elementos semelhantes
para representar ações similares: facilidade de aprender e usar)
• Affordance (atributo de um objeto que permite ao usuário saber
como usá-lo)
Usabilidade na prática: HEURISTICAS

• Conjunto de regras e métodos que conduzem à

resolução de problemas
• Servem de base para análise da usabilidade de
protótipos e sistemas
Usabilidade na prática: HEURISTICAS

• Visibilidade do status do sistema (feedback)

• Compatibilidade do sistema com o mundo real
• Controle do usuário e liberdade (“saídas de emergência”)
• Consistência e padrões
• Ajuda aos usuários para reconhecer, diagnosticar e recuperar-se
de erros
• Prevenção de erros
• Reconhecimento em vez de memorização
• Flexibilidade e eficiência de uso
• Estética e design minimalista
• Ajuda e documentação
Modelo Conceitual

• É uma descrição do sistema proposto em termos um

conjunto de idéias e conceitos integrados a respeito do que
ele deve fazer, de como deve se comportar e com o que
deve se parecer, que seja compreendida pelos usuários da
maneira pretendida.
• A primeira coisa a se fazer é pensar como o produto
aparecerá para o usuário, ou seja, como atenderá suas
necessidades, como ele realizará suas tarefas, que estilo
de interação será adotado, etc. – Entender o quê (what)?
por quê (why)? e como (how)? antes de pensar no código.
• Tendência atual: expansão da individualidade e
customização das interfaces
Modelo conceitual

• O Modelo Conceitual implica em:

• Visualizar o produto proposto baseando-se nas necessidades dos
usuários e nos requisitos identificados
• Decidir inicialmente o que os usuários farão (processos) para
conseguir realizar suas tarefas
• Pensar o design em termos de soluções concretas (como a
interface irá se parecer e agir?)
• Decidir a respeito dos estilos e das formas de interação
• Processo iterativo que inclui: esboços de idéias, storyboards,
descrição de cenários, prototipação.
• Que funções o sistema executará?
• O que o produto fará e o que o usuário fará (alocação de tarefas)
Modelo Conceitual

• Que funções estão co-relacionadas?

• Sequencial ou paralela?
• Categorias?
• Que informações serão necessárias?
• Que dados o usuário precisará para realizar as tarefas?
• Como esses dados serão transformados pelo sistema?
• Que paradigma de interação usar?
• Que estilo de interação melhor suportaria as atividades
do usuário?
• Que metáforas de interface podem ajudar o usuário a
entender o produto?
Paradigma de interação

• Como será a relação entre usuário e sistema

interativo?
• Computação desktop
• Computação móvel
• Computação ubíqua
• Computação vestível
• Computação social
• Realidade virtual

• Ou uma combinação de suas características?

Estilo de interação

Um estilo de interação é um
padrão específico que determina
algumas características que o
modelo conceitual de interação de
uma interface deve ter.
Elementos dos estilos de interação

• Década de 80 • Década de 2000

• Linguagem de comando • Mobile
• Menus • Cooperação
• Formulários • Tangível
• WIMP/GUI • Realidade aumentada
• Década de 90 • Wearable
• Gráficos avançados (multimídia, • Robótica
realidade virtual, ...)
• Web
• Voz
• Sensibilidade ao toque
• Eletrônicos e eletrodomésticos
(geladeira, carro, ...)
Formas de interação

1. Baseados em atividades (não excludentes)

• Instrução
• Conversação
• Manipulação e navegação
• Exploração e pesquisa (Browsing)

2. Baseados em objetos
• Analogias com o mundo físico ( a maneira como um
objeto é utilizado em um determinado contexto. Ex:
planilha VisiCalc e livro caixa)
1. Instrução

• Usuário realiza suas tarefas instruindo o sistema sobre o

que fazer
• Linguagens de comando
• Usuário envia instruções diretamente para o computador através
de comandos específicos, desde pressionar botões até digitação
de strings de caracteres (e fica aguardando uma resposta do
sistema)
• Exemplos:
• Sistemas operacionais – DOS, UNIX, etc.
• grep -v ^$ filea > fileb (este comando copia o arquivo filea para fileb
removendo as linhas em branco)
• copy doc1.txt lpt1: (imprime o doc1.txt)
• WWW (Internet)
• http://www.lojavirtual.com.br/catalogo.asp?session=437G43P&login=fulano
&categoria=32&pag=2
1. Instrução

• SQL
• select codigo,nome,idade from clientes where idade<30 order by
nome;
• Telefones e outros sistemas controlados por voz
• ligar, desligar, <nome>, ...
• AUTOCAD
• Correio eletrônico

Principal vantagem: interação rápida e eficiente.

Adequado para ações repetitivas.
1. Instrução

• Usuário deve aguardar o resultado de uma comando antes

de enviar o próximo
• Necessidade de memorização dos comandos quase nunca
intuitivos
• Visualização limitada dos dados (alguns sistemas
permitem a visualização apenas das últimas 24 linhas)

Adequada para usuários avançados que já memorizaram

o sistema e, às vezes, se beneficiam da velocidade
Otimização da instrução

Decisões sobre:
• Forma dos comandos: usar abreviações, nomes
completos, ícones, rótulos, ...
• (Abreviações podem acelerar o processo: replace all estados with
“MG” where cidade=“Belo Horizonte”;
repl all estados with “MG” wher cidade=“Belo Horizonte”)
• Sintaxe dos comandos: a melhor combinação de diferentes
comandos
• Organização dos comandos: estruturar opções em menus
diferentes
• Aspectos cognitivos dos usuários
2. Conversação

• Baseado na idéia de um diálogo entre o usuário e o sistema –

projetado para dar respostas como em um ato de conversação – o
sistema atua como um parceiro (ex: ferramentas de ajuda e de busca)
• Interações simples e constantes
• Inter+ação: ação de um depende da ação do outro
• Comum em sistemas
baseados em menus com
reconhecimento de voz e
em muitos jogos
• Vantagem: processo familiar
(linguagem natural)
• Desvantagem: interações
de uma só via (o usuário deve se
contentar com o que é oferecido - ex:
telefonia automatizada)
2. Conversação
• Agentes animados que demonstram comportamentos
humanizados (ex: o Clippy do Windows) - transmite maior
confiança
• Menus
• Oferecem opções de ações ao usuário
• Como em um menu de restaurante: as escolhas do que comer
• Baseiam-se no reconhecimento ao invés da memorização
• quais são as opções do menu do Word?
• Utilizam terminologia familiar e organização conveniente
(agrupamentos)
• como no restaurante, menus mal elaborados dificultam a utilização
• Exemplos:
• Terminal de auto-atendimento
• Call center automatizado
2. Conversação

• Diretrizes para menus

• Utilizar termos do domínio na criação dos menus
• Preferir mais opções a maior profundidade
• Agrupar logicamente (considerar freqüência de uso)
• Criar seqüências de menus que sejam lógicas (em
menus múltiplos)
• Opções de retorno e ajuda
• Manter opções desabilitadas visíveis
2. Conversação

• Menu do iPod
2. Conversação

• Menu em cascata
2. Conversação
• Tipos de menus
• Menus binários – aceitam valores como sim/não, falso/verdadeiro,
etc.
• Menus com múltiplos itens – semelhantes aos binários, porém com
mais itens
• Menus de seleção múltipla – mais de uma opção pode ser
escolhida (ex: checkbox)
• Menus múltiplos – possuem mais de um grupo de opções (ex.:
configurações de impressão)
• Menus em cascata/hierárquicos – itens do menu são divididos em
grupos (e subgrupos) lógicos para economizar espaço na tela –
(como agrupar? Aspectos cognitivos)
• Mapas de menu – menus representados em figuras (comuns em
websites)
2. Conversação

• Formulários
• Utilizado para entrada de dados (simulam os formulários em papel)
• Exemplo: Declaração de IRPF
• Características
• Auto-instrutivos
(títulos, descrição das tarefas, terminologia adequada, familiar e
consistente, indicação de campos opcionais e valores aceitáveis,
descrição de cada campo, etc.)
• Controle de valores e erros (só aceita valores dentro das faixas
especificadas e emite mensagens de erro quando necessário)
2. Conversação

• Formulários
2. Conversação

• Outros exemplos
2. Conversação

• Outros exemplos
3. Manipulação direta

• Usuários manipulam os objetos e percebem o resultado de

suas ações imediatamente (por exemplo: carro). Navegam
no espaço virtual como fariam no mundo real: mover,
fechar, abrir, aproximar...
• Exemplos:
• desenhos, jogos, automação industrial
• Planilha e editores (vê o que foi calculado/será impresso)

• Princípio da Virtualidade – representação da realidade que

pode ser manipulada (Ted Nelson, 1980)
Vantagens da manipulação direta

As pessoas esperam que suas ações físicas tenham

resultados físicos
• Para os iniciantes: aprendizado rápido de funcionalidades
• Para os experientes: trabalhar com uma ampla variedade
de tarefas
• Para os intermitentes: lembrar as operações mesmo se
afastados algum tempo
• Visibilidade dos progressos feitos e correção de rumos, se
necessário
• Menor ansiedade
• Autoconfiança e sentimento de controle
3. Manipulação direta
• Interface WIMP (alguns autores consideram WIMP um
estilo, mas está presente na manipulação direta, nos
menus e nos formulários)
• Janelas – visões do “mundo”
• Ícones – símbolos que representam objetos
• Menus – relação de opções
• Apontadores – dispositivos de manipulação

• WYSIWYG (What You See Is What You Get)

• Problemas
• Manipulação lenta (especialmente se for remota)
• Falta de espaço
• Representação confusa
3. Manipulação direta

• Superfícies multitoque
3.1. Manipulação física (Bits tangíveis)

• Interfaces tangíveis
• Uma interface tangível é uma interface em que o usuário interage
com a informação digital através de um ambiente físico (ex:
museus interativos, jogos)
• Características
• As representações físicas
são computacionalmente
acopladas às informações
digitais
• As representações físicas
incorporam mecanismos
para controle interativo
4. Exploração e Pesquisa (Browsing)

• Possibilitar a exploração e a pesquisa de informações com

base nas experiências das pessoas em midias já
existentes (bibliotecas, livros, revistas, TV, radio...)
• Questão: Como estruturar as informações para fornecer suporte a
uma navegação efetiva, permitindo às pessoas pesquisar, buscar e
encontrar os diferentes tipos de informações a seu modo?

• Exemplos: comércio eletrônico e páginas web

Formas de interação

• Quadro comparativo
Metáforas de interface

• Modelo Conceitual desenvolvido para ser semelhante, de

alguma forma, a aspectos de uma entidade física mas que
também tem seu próprio comportamento e propriedades.
• Podem ser baseadas em:
• Atividades, ex: recortar, copiar, colar, navegar
• Objetos, ex: área de trabalho, barra de ferramentas, portal web,
xícara de café nos applets do Java, Facebook
• Ambos, ex: motor de busca, barra de rolagem
Metáforas de interface

• As metáforas de interface ajudam a combinar

conhecimento familiar com conhecimento novo, de uma
maneira que ajude o usuário a entender o sistema (Ex: os
editores de texto utilizam vários elementos operacionais e visuais das
máquinas de datilografia)
• A escolha de metáforas é feita em três passos:
• Entender o que o sistema irá realizar (funcionalidade)
• Entender quais partes do problema podem causar complicações
aos usuários
• Identificar metáforas que possam auxiliar a compreensão e
execução dessas tarefas
Uma metáfora implica somente um mapeamento parcial entre
o sistema e o objeto real em que está baseada (ex: lixeira)
Metáforas de interface

• Avaliação das metáforas

1. A metáfora proporciona uma boa estrutura?

2. Quanto da metáfora é relevante para o problema?

3. A metáfora da interface é fácil de representar?

4. O usuário entenderá a metáfora?

5. Quão extensível é a metáfora?

Modelo Conceitual

• Como será a relação entre usuário e sistema interativo?

• Computação desktop
• Computação móvel Saída
Saída

• Computação ubíqua
• Computação vestível Sistema Usuário
Entrada
Entrada
• Computação social
• Realidade virtual
• Como o usuário invocará as ações?
• Instrução?
• Conversação?
• Manipulação direta?
• Manipulação física?
• Exploração?
Modelo Conceitual

• Que forma de interface será oferecida?

• WIMP
• Menus
• Formulários
• Realidade aumentada
• Agentes animados
• Etc.

• Quais metáforas são pertinentes no domínio do usuários?

Vale a pena usá-las? Ou seja, usar metáforas ajuda o
usuário a entender o sistema?
Modelo conceitual no mundo Ideal

Mapeamento entre:
• Modelo do designer: como o projetista pensa que o
sistema deve trabalhar
• Imagem do sistema: como o sistema realmente trabalha
• Modelo do usuário: como o usuário entende a forma como
que o sistema trabalha

... “Se a imagem do sistema não torna o modelo de design

claro para os usuários, é provável que eles venham a ter
um entendimento equivocado do sistema, utilizando-o de
maneira ineficaz e cometendo erros.”
Dos modelos conceituais ao design
fisico - Resumo
• Design é um processo iterativo e interativo. Envolve varias
etapas em níveis diferentes de detalhamento:
1. Reflexão sobre o problema e as necessidades dos
usuários (identificação de requisitos)
2. Ideação dos modelos conceituais possíveis
3. Desenvolvimento do modelo com uso dos métodos
centrados nos usuários
4. Desenvolvimento e teste dos primeiros protótipos
5. Questões referentes ao design físico (apresentação da
informação, combinação de midias, ...)
“Não há maneira certa ou errada de resolver estas questões,
cada decisão deve ser avaliada em relação às outras”
Requisitos

• Um requisito consiste em uma declaração sobre um

produto pretendido que especifica o que ele deveria fazer
ou como deveria operar. A declaração deve ser o mais
específica, não ambígua e clara possível.
Ex: O produto deve emitir um alerta se uma estação de
previsão do tempo falhar em transmitir seus boletins
periódicos
Tipos de requisitos

• Funcionais: captam o que o produto deveria fazer

• De dados: captam volatilidade, tamanho/quantidade, persistência,
precisão e valor das quantidades de dados exigidos
• Ambientais (contexto de uso):
• Ambiente físico
• Ambiente social
• Ambiente organizacional
• Ambiente técnico
• De usuário: captam as características do grupo de usuários pretendido
(“perfil do usuário”)
• De usabilidade: captam as metas de usabilidade e as medidas
associadas para um produto
Exemplo: sistema para uso em restaurante
self-service de universidade
• Funcional: o sistema deve calcular o custo das compras
• Dados: o sistema deve ter acesso aos preços dos produtos
• Ambiente: provavelmente barulhento e repleto de pessoas
e os usuários estarão carregando coisas e falando com
colegas
• Usuários: idades entre 18 e 25 anos e que lida bem com
tecnologia
• Usabilidade: sistema deve ser simples, para uso por
calouros (aprender) e veteranos (lembrar) , precisa ser
eficiente (processamento rápido) e lidar facilmente com
erros dos usuários.
Coleta de dados para identificação de
requisitos
• Objetivo: reunir informações suficientes, relevantes e
apropriadas para a produção de um conjunto de requisitos
estável
• Tipos:
• Questionários
• Entrevistas
• Grupos de foco
• Workshops
• Observação
• Estudo da documentação
• Gravação de log de dados
• Combinações entre elas
Processo de projeto de interface
(SOMMERVILLE, 2004)
Referências bibliográficas

• PREECE, ROGERS & SHARP. Design de Interação:

além da interação homem-computador. Porto Alegre:
Bookman, 2005. Capítulos 2 e 6.

• SOMMERVILLE, I. Engenharia de Software. 6th. ed.

Harlow, England: Addison-Wesley, 2004.