design de ihc design da comunicação modelos de...
TRANSCRIPT
![Page 1: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/1.jpg)
Design de IHC – Design da Comunicação
Modelos de Interação
INF1403 – Introdução a IHC
Luciana Salgado
1
![Page 2: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/2.jpg)
Representações e
Aspectos de IHC
Representações e Aspectos de IHC
![Page 3: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/3.jpg)
Representações e
Aspectos de IHC
Representações e Aspectos de IHC
![Page 4: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/4.jpg)
Design de Interface
o design de interface envolve:
• escolha dos estilos de interação do sistema
• definir como a conversa projetada será representada
na interface
![Page 5: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/5.jpg)
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.
![Page 6: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/6.jpg)
Estilos de Interação
linguagem natural
- É fácil de usar por pessoas inexperientes;
- Apresenta grandes desafios de implementação.
![Page 7: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/7.jpg)
Estilos de Interação
interação através de 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 .
Além das barras de
menu, barras de
navegação e menus
contextuais (pop-up),
Shneiderman também
considera conjuntos de
botões de seleção
(checkboxes) e opção
(radio buttons) como
formas de interação por
menu
![Page 8: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/8.jpg)
Estilos de Interação
interação através de formulário
![Page 9: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/9.jpg)
Estilos de Interação
manipulação direta
- 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.
![Page 10: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/10.jpg)
Estilos de Interação
WIMP (Windows, Icons, Menus, and Pointers)
![Page 11: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/11.jpg)
• esboços, wireframes
• modelos, como as linguagens de descrição de interfaces
com usuário: UIML, UsiXML, XAM, etc.
• protótipos funcionais
Representações da Interface com Usuário
![Page 12: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/12.jpg)
interface abstrata
define agrupamentos e
características dos elementos de
interface
exemplo
conjunto de itens com seleção
simples
interface concreta
define posicionamento e
elementos de interface interativos
(widgets)
exemplo :
representar a entrada de dados
como
ou
Representações da Interface com Usuário
![Page 13: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/13.jpg)
esboço em baixa fidelidade
Representações da Interface com Usuário
![Page 14: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/14.jpg)
esboço em baixa fidelidade elaborado em ferramenta
computacional
Representações da Interface com Usuário
![Page 15: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/15.jpg)
esboço em alta fidelidade
Representações da Interface com Usuário
![Page 16: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/16.jpg)
acessos ubíquos geralmente são mapeados para menus e barras de
navegação
Da Interação para o Design de Interface
![Page 17: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/17.jpg)
é comum mapear uma cena para unidade de apresentação (tela ou página
web )
Da Interação para o Design de Interface
![Page 18: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/18.jpg)
uma cena também pode ser mapeada para mais de uma unidade de
apresentação
Da Interação para o Design de Interface
![Page 19: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/19.jpg)
• cena Consultar material mapeada para
unidade de apresentação
Materiais didáticos (nº 1)
• diálogo ver materiais mapeado para a
tabela de materiais didáticos (nº 2)
• fala de usuárioƒ u: cadastrar novo
material mapeada para link Cadastrar
novo material didático (nº 3)
• fala de usuário u: editar material X
mapeada para os links na tabela (nº 4)
• cena Editar material mapeada para
duas unidades de apresentação
semelhantes, conforme a fala de
transição de usuário que leva até ela:
– Cadastrando novo material didático,
destino da fala u: cadastrar novo material
didático (nº 5)
– Editando material didático, destino da fala
u: editar material X (nº 6)
Da Interação para o Design de Interface
![Page 20: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/20.jpg)
falas do preposto geralmente são representadas como mensagens de erro
ou de status.
• a fala d: material
gravado foi mapeada
para mensagem de
status na unidade de
apresentação
correspondente à cena
de destino (nº 1)
• a fala d: problema na
gravação foi mapeada
para uma unidade de
apresentação diferente
(nº 2)
Da Interação para o Design de Interface
![Page 21: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/21.jpg)
Esquema Conceitual de Signos: Expressão
![Page 22: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/22.jpg)
Projeto do Sistema de Ajuda
• O sistema de ajuda é uma forma de comunicação privilegiada
entre designer e usuários, uma vez que é uma comunicação
direta
• O designer deve tentar antecipar as dúvidas dos usuários para
registrar durante o design respostas adequadas
• exemplos de dúvidas comuns:
![Page 23: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/23.jpg)
Tarefa da semana passada
• O que deveria ter sido entregue no dia 24 de maio?
– Resumo da atividade da semana
– Roteiro da entrevista
– Resumo da atividade
– Perfil do Usuário
– Principais Necessidades indentificadas
– Cenário v.1 (que será usado na avaliacao)
• Qual a situação real?
– Trabalhos incompletos
– Trabalhos com problemas
– Trabalhos com conteúdos não solicitados
23
![Page 24: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/24.jpg)
Próximas Atividades
• Tarefa até 6ª feira (31 de maio) – Colocar na DropBox
– Inspeção semiótica
• Análise segmentada dos signos
• Perfil semiótico (apreciação da comunicabilidade do trecho
selecionado)
• Relatório até 3ª feira, dia 4 de junho – enviar por email
– Entrega do Relatório com os resultados da entrevista e da
Inspeção Semiótica.
• 2ª feira, dia 3 de junho – Prova de 2ª chamada
• 4ª feira, dia 5 de junho – Início da Etapa de Modelagem
de Tarefas
24
![Page 25: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/25.jpg)
Atividades da semana de 27 a 31 de maio:
• Avaliar a porção crítica do website escolhido:
– Preparação da Avaliação
– Avaliação com técnica de inspeção
• Inspeção Semiótica da Porção do Site escolhida.
• Entregar Resultados da Avaliação na 6ª feira (via
DropBox)
25
![Page 26: Design de IHC Design da Comunicação Modelos de Interaçãoinf1403/docs/luciana2013_1/3WB-Aula23.pdf · Estilos de Interação interação através de menus - Pode ser mais fácil](https://reader031.vdocuments.pub/reader031/viewer/2022021722/5c120a3209d3f2602c8ce1d2/html5/thumbnails/26.jpg)
Atividades extraclasse
• Leitura do Capítulo 7