Estilos de Interação
1
INF1403 – Introdução a IHC
Estilos de interação
• De que formas o usuário poderá interagir com a aplicação?
PREENCHIMENTO DE FORMULÁRIOS
LINGUAGEM NATURAL VIA TEXTO LINGUAGEM NATURAL VIA VOZ
LINGUAGEM DE COMANDO
MENUS
MANIPULACIÓN DIRETAPREENCHIMENTO DE FORMULÁRIOS
WIMP (Windows, Icons, Menus, Pointers )
INTERFACES 3D
Linguagem natural via texto
Estilos de interação
• É fácil de usar por pessoas inexperientes;
• Apresenta grandes desafios de implementação.
Estilos de interação
Linguagem natural via voz
Linguagem natural via texto ou voz Aspectos de design
• Qual é o vocabulário permitido? (léxico)
Estilos de interação
• Qual é o vocabulário permitido? (léxico)
• Quais são as sentenças permitidas? (gramática)
Estilos de interação
Linguagem de comando
•O usuário precisa memorizar e se lembrar dos comandos;
•A interação tende a ser rápida depois que o usuário aprende.
Linguagem de comando Aspectos de design
•Organização
Estilos de interação
•Organização
•Estrutura
•Vocabulário
Linguagem de comando Aspectos de design
•Organização
Estilos de interação
•Organização
– comandos simples
– comandos + parâmetros
– comandos + opções + parâmetros
•Estrutura
•Vocabulário
Linguagem de comando Aspectos de design
•Organização
Estilos de interação
•Organização
•Estrutura
– ordenação dos parâmetros – símbolos vs. palavras-chave – estrutura hierárquica
•Vocabulário
Linguagem de comando Aspectos de design
•Organização
Estilos de interação
•Organização
•Estrutura
•Vocabulário
– especifidade vs. generalidade
– estratégias de abreviação: truncar, eliminar vogais, primeira e última letras, primeira letra de cada palavra, abreviações padronizadas de outros contextos, fonética
Estilos de interação
Menus
• Pode ser mais fácil se lembrar das opções;
• Pode levar mais tempo para mover mãos e braços do que digitar um comando .
Menus
Aspectos de design
•Organização
Estilos de interação
•Organização
•Estrutura
•Vocabulário
Estilos de interação
Menus
Aspectos de design
•Organização
•Organização
– Grupos de itens logicamente semelhantes – Grupos cobrem todas as possibilidades – Sobreposições inexistentes
– Itens ordenados
•Estrutura
•Vocabulário
Menus
Aspectos de design
•Organização
Estilos de interação
•Organização
•Estrutura
– Linear – Árvore
•Vocabulário
estrutura linear
estrutura em árvore
Menus
Aspectos de design
•Organização
Estilos de interação
•Organização
•Estrutura
•Vocabulário
– Rótulos familiares – Opções bem distintas
Manipulação direta
Estilos de interação
•Aproxima a interação da manipulação dos objetos no mundo real;
•Estimula a exploração com o mouse: clique, duplo clique, clicar e arrastar;
•Mais difícil para usuários com limitações visuais ou motoras.
Manipulação direta Aspectos de design
•Mapeamento de conceitos (concretos ou abstratos) do mundo real para
Estilos de interação
•Mapeamento de conceitos (concretos ou abstratos) do mundo real para elementos gráficos concretos
•Mapeamento de operações do mundo real para movimentos e operações do mouse
Desktop PC – Metáfora do Desktop Real
Display do computador como representação visual de uma mesa onde documentos e pastas são organizados
•Vantagem: organização!
Preenchimento de formulários
Estilos de interação
Preenchimento de formulários Aspectos de design
•organização
Estilos de interação
•organização
– agrupamento lógico – seqüência dos campos – layout
•vocabulário
– título e rótulos – instruções
•prevenção e tratamento
de erros
WIMP (Windows, Icons, Menus, and Pointers)
Estilos de interação
• Espaço de um único display é pequeno. Se considerássemos a equivalência a um desktop físico:
• Espaço de um único display é pequeno. Se considerássemos a equivalência a um desktop físico:
3DUI - Interfaces 3D
Estilos de interação
• Soluções:
– Múltiplos monitores – 3D interfaces
• Soluções:
– Múltiplos monitores – 3D interfaces
Microsoft’’’’s Task Gallery
Windows Vista
3DUI - Interfaces 3D
Estilos de interação
3D Desktops
(Compiz-fusion)
3DUI - Interfaces 3D
Definição formal de 3DUI
…uma interface humano-computador em que a linguagem usada pelo usuário para introduzir comandos e
Estilos de interação
linguagem usada pelo usuário para introduzir comandos e informação no computador, e/ou a linguagem usada pelo computador para apresentar a informação ao usuário, são baseadas no espaço físico e suas 3 dimensões.
Cobre as várias maneiras em que 3DUI pode aparecer em diferentes tipos de aplicações.
3DUI - Interfaces 3D Exemplos
Estilos de interação
3DUI - Interfaces 3D Exemplos
Estilos de interação
3DUI - Interfaces 3D
Informação no espaço 3D
Estilos de interação
3DUI – Saída 3D
3DUI - Interfaces 3D
Demos interação no futuro
1. Nintendo Wii U Triller 1. Nintendo Wii U Triller
Estilos de interação
1. Nintendo Wii U Triller
1. A Day Made of Glass… by Corning 1. Nintendo Wii U Triller
1. A Day Made of Glass… by Corning
Ciclos de vida do projeto de interação
Ciclo de vida em cascata
Análise de Requisitos
Projeto e Especificação
Implementação
Testes
Manutenção
Ciclo de vida em espiral (Boehm, 1988)
Design Centrado no Usuário: Mudança de Paradigma
desenvolvimento centrado no
sistema
desenvolvimento centrado no
usuário
desenvolvimento situado no contexto
organizacional e social
envolvimento de usuários no processo de design considerações sobre grupos de usuários com tarefas
e papéis diferentes (ex: gerentes e técnicos) importância da qualidade de IHC
Processo de desenvolvimento em estrela (Hix & Hartson, 1993)
implementação análise de tarefas
e funcional
prototipação requisitos e
especificação
design conceitual/
representação formal do design
avaliação
Um ciclo de vida simples para projeto da interação (Preece et al., 2002)
identificação de necessidades e definição de
requisitos
(re)design
requisitos
avaliação
construção de uma
versão interativa produto
final
Ciclo de Vida de Engenharia de Usabilidade (Nielsen 1993)
1. Conhecendo o usuário 2. Análise competitiva 3. Definindo metas de
usabilidade
7. Aplicação de diretrizes e análise heurística
8. Prototipação
9. Avaliação empírica 4. Design paralelo
5. Design participativo 6. Design coordenado da
interface global
10.Design iterativo
– captura do design rationale
11.Coleta de feedback do uso
1. Conhecendo o usuário
• Estude os usuários-alvo e o uso pretendido do produto
• Visite o ambiente de trabalho do cliente
• Inclua todos os usuários
– Administradores, suporte técnico, ...
– “usuário”: todos cujo trabalho será afetado pelo produto de alguma forma, incluindo os usuários do produto final gerado pelo sistema → forma, incluindo os usuários do produto final gerado pelo sistema → stakeholders
• Dificuldades no acesso aos usuários
– Empresas de desenvolvimento
• não querem que os usuários conheçam diretamente os desenvolvedores, para não os usarem como “atendimento ao cliente”
– Representantes de vendas
• relutam em deixar que outros na empresa falem com os “seus” clientes, pois poderiam ofendê-los ou criar insatisfação com a geração atual de produtos – Usuários
• têm pouco tempo disponível ou não gostam de ser “estudados”
1.1 Características individuais
• Experiência no trabalho, nível instrucional, idade, experiência prévia com computadores
– previsão de dificuldades de aprendizado
– estabelecimento de limites para a complexidade da interface
• Habilidade lingüística e de leitura
– ex.: crianças pequenas precisam de interfaces não-textuais – ex.: crianças pequenas precisam de interfaces não-textuais
• De quanto tempo os usuários dispõem para aprender a usar o sistema ou se terão treinamento
– pouco ou nenhum treinamento requer interfaces mais simples
• Contexto social e de trabalho do usuário
– alarmes ou efeitos sonoros, “beeps”
• Como coletar informações sobre os usuários
– análise de mercado – estudos etnográficos
– questionários e entrevistas
1.2 Análise de tarefas
• Objetos de análise
– objetivos gerais dos usuários
• Por que você faz isto?
– como realizam as tarefas atualmente
• Como você faz isto? Por que não faz da maneira tal?
• Como você faz isto? Por que não faz da maneira tal?
– necessidades de informação
• De que vc precisa saber para fazer isto?
– como situações emergenciais ou excepcionais são conduzidas
• Ocorrem erros quando você faz isto? Como você descobre e corrige esses erros?
• Como os usuários entendem a tarefa
– modelo conceitual
– metáforas para a interface
1.2 Análise de tarefas (cont.)
• Entrevistas e observação
– usuários extremamente eficientes
– estratégias que contornam situações problemáticas
– exemplos concretos dos artefatos utilizados ou produzidos pelos usuários
– situações de solução de problemas reais – situações de solução de problemas reais
• Produto da análise de tarefas
– lista dos objetivos dos usuários (metas)
– informações necessárias para atingir estas metas (pré-condições) – passos a serem executados e as interdependências entre estes
passos
– resultados e relatórios que precisam ser produzidos
– critérios de avaliação da qualidade e “aceitabilidade” desses resultados
– necessidades de comunicação do usuário com outras pessoas durante a execução da tarefa
1.3 Análise funcional
• Não se trata de perpetuar formas inadequadas ou pouco eficientes de se realizar tarefas por causa de limitações de uma tecnologia antiga!
• O que realmente precisa ser feito? E por quê?
– Quais são os procedimentos que podem ser alterados?
• Análise de tarefas ↔ Análise funcional
1.4 Evolução dos usuários
• O usuário não permanece o mesmo
– na medida em que evolui, utilizará o sistema de novas formas
• Co-evolução de tarefas e artefatos
• Co-evolução de tarefas e artefatos
– ex.: uso de planilha como banco de dados
• Uso criativo é impossível de prever
– design flexível tem mais chances de apoiar novos usos:
atalhos, linguagens de extensão
2. Análise competitiva
• Avaliação de produtos de competidores
– Benefícios
• idéias sobre o que funciona e o que não funciona
– Avaliação empírica – Avaliação empírica
• pode ser mais realista do que outros tipos de protótipos
• como as técnicas de interação apóiam os tipos de tarefas requeridos para o novo produto
– Análise comparativa
• abordagens diferentes para questões de design do produto
• produtos de software ou outras mídias (p.ex.: livros, telefone, ...)
3. Definindo metas de usabilidade
• Nem todos os aspectos de usabilidade podem ter peso igual em um projeto de design
– prioridades com base na análise dos usuários e de suas tarefas
• exemplo: facilidade de aprendizado em organizações com
• exemplo: facilidade de aprendizado em organizações com alta rotatividade
– metas mensuráveis
• Análise do impacto financeiro
– estimativa do impacto na organização desenvolvedora
• magnitude do orçamento voltado para usabilidade
– estimativa do impacto nas organizações dos usuários
• priorização do foco dos recursos de usabilidade
disponíveis
4. Design paralelo
• Vários designers elaboram designs preliminares distintos
– explorar alternativas de design diferentes – designs direcionados: foco em
– designs direcionados: foco em
• diferentes classes de usuários
• metas de usabilidade distintas
• diversos estilos de interface
– ex: usuários novatos; usuários especialistas; interfaces não- verbais
• Comparação e combinação dos diferentes designs
5. Design participativo
• Envolvimento de um grupo de usuários a que se tem acesso
– apesar da análise de usuário, não se pode conhecê-lo totalmente para ter respostas a todas as perguntas que surgem durante o design
– usuários levantam questões interessantes e sobre as quais os designers não pensariam
• as tarefas reais dos usuários podem ser diferentes dos modelos conceituais que os designers têm destas tarefas
que os designers têm destas tarefas – recursos
• protótipos ou maquetes em papel para avaliar a reação dos usuários a idéias de design
• discussões guiadas
• Não se trata simplesmente de perguntar aos usuários o que eles querem
– eles não conhecem todas as possibilidades da tecnologia
– eles nem sempre sabem elaborar soluções para os seus problemas
• Deve-se evitar o envolvimento intensivo de um único usuário
– ele pode ser levado a pensar mais como os designers do que como os usuários que deveria representar
– os usuários são diferentes, e deve-se conhecer diversos pontos de vista
6. Design coordenado da interface global
• Em busca da consistência – em um único produto
– em produtos de uma mesma “família” (setor ou organização) – conformidade com padrões de interface da empresa
• Autoridade centralizada para coordenar os diversos aspectos da
• Autoridade centralizada para coordenar os diversos aspectos da interface
– possíveis conflitos com outros critérios de usabilidade – padrões de interface
– reuso de código
7. Aplicação de diretrizes
• Diretrizes (guidelines):
– princípios bem conhecidos para o design de interfaces de usuário – diferentes níveis de guidelines:
• gerais: aplicáveis a todas as interfaces
– ex.: (1) forneça feedback
• por categoria: para um tipo de sistema (ex.: sistema para o gerenciamento de arquivos baseado em janelas)
arquivos baseado em janelas)
– ex.: (1) forneça feedback →(1.1) os principais objetos de interesse devem estar visíveis na tela e seus principais atributos devem ser apresentados
• por produto individual
– ex.: (1.1) →cada arquivo e subdiretório deve ser representado por um ícone, e
diferentes ícones devem representar diferentes classes de objetos (arquivos de dados, arquivos executáveis, e subdiretórios)
• Padrões x diretrizes
– Padrão (no sentido de padronização) especifica como a interface deve aparecer para o usuário
• objetivo maior é consistência
– Diretriz aconselha sobre características de usabilidade da interface
8. Prototipação
• Elaboração rápida e de baixo custo
• Propicia melhor entendimento do design da interface, antes da construção do sistema final
• Dimensões de prototipação – vertical
• poucas features, mas com funcionalidade implementada
• testa uma parte limitada do sistema, em condições realistas
– horizontal
• camada superficial com toda a interface do usuário, mas sem a funcionalidade subjacente
• simulação da interface: interação e navegação, sem implementar funcionalidade
– cenários: simulação de algumas features
• Como reduzir o tempo de desenvolvimento de protótipos
– pouca ênfase na eficiência da implementação (exceto o tempo de interação) – código menos confiável ou de baixa qualidade
– algoritmos simplificados (que não dão conta de casos específicos) – Wizard of Oz (ser humano operando “por trás”)
– protótipos de baixa fidelidade (imagens estáticas vs. vídeo) – dados fictícios e conteúdo provisório
– maquetes em papel
8. Prototipação (cont.)
• Cenários
– São descrições de
• um usuário individual
• utilizando um conjunto específico de facilidades de um sistema
sistema
• para alcançar um certo resultado
• sob circunstâncias específicas
• em um determinado período de tempo – Uso de cenários:
• durante o design da interface para expressar e
compreender a forma como os usuários vão interagir com o sistema
• durante avaliação preliminar de um design de interface para obter feedback do usuário sem o custo de se construir um protótipo funcional
9. Avaliação empírica
• Faça! diferentes tipos de avaliação
– envolvimento de usuários reais (ou não) – interface já implementada (ou não)
• Produtos
– lista de problemas de usabilidade – lista de problemas de usabilidade
– dicas para apoiar estratégias bem-sucedidas
– prioridade para se solucionar os problemas, com base em sua gravidade (severidade):
• quantas pessoas serão afetadas pelo problema
• quanto tempo (ou outro recurso) cada uma perderá com o problema
• será um problema somente na primeira vez em que for encontrado, ou sempre?
10. Design iterativo
• São necessárias várias iterações
– alterações feitas para resolver um problema de usabilidade podem...
• não resolvê-lo
• criar novos problemas
• criar novos problemas
• criar problemas para outros usuários que não eram afetados pelo problema original
• Deve-se registrar as decisões de design
– preservar importantes princípios de usabilidade
– ajudar na elaboração de documentação e de versões em outras línguas
– manter a consistência da interface entre versões
11. Coleta de feedback de uso
• Captura de dados de usabilidade para versões futuras
– satisfação dos usuários
– impacto do sistema na qualidade e custo do trabalho dos usuários
dos usuários
– problemas enfrentados pelos usuários (atendimento aos usuários ou instrutores)
• Técnicas
– entrevistas – questionários
– observação do uso
– instrumentação do software
Para reflexão – Como fazer tudo errado (Norman, 1988)
• Torne tudo invisível. Não dê qualquer dica sobre as operações
esperadas. Não forneça feedback ou qualquer resultado visível das ações que foram tomadas. Explore a tirania da tela em branco.
• Seja arbitrário. Computadores tornam isto fácil. Use nomes de comandos e ações que não sejam óbvios. Use mapeamentos arbitrários entre a
ação pretendida e o que realmente precisa ser feito.
ação pretendida e o que realmente precisa ser feito.
• Seja inconsistente. Mude as regras. Faça com que algo deva ser feito de uma forma em um modo e de outra forma em outro modo. Isto é
especialmente eficiente se for necessário ficar trocando um modo pelo outro.
• Torne as operações ininteligíveis. Use linguagem ou abreviações idiosincráticas. Use mensagens de erro não informativas.
• Seja rude. Trate ações erradas do usuário como quebras de contrato.
Insulte. Use expressões incompreensíveis.
• Torne as operações perigosas. Permita que uma simples ação
equivocada destrua um trabalho valioso. Torne fácil que se façam coisas desastrosas. Mas coloque avisos no manual; assim, quando as pessoas reclamarem, você pode perguntar, “Mas você não leu o manual?”
