serg
17 17
… … supondo que os demais avaliadores encontraram os supondo que os demais avaliadores encontraram os
mesmos problemas, e que receberam a mesma prioridade, mesmos problemas, e que receberam a mesma prioridade, Problemas do design do website de INF1403 para o
cenário examinado (mais graves primeiro):
1.1. FLEXIBILIDADE E EFICIÊNCIA DE USOFLEXIBILIDADE E EFICIÊNCIA DE USO – ofereça
aceleradores e caminhos alternativos para uma mesma tarefa;
permita que os usuários customizem ações freqüentes
2.2. DESIGN ESTDESIGN ESTÉTICO E MINIMALISTAÉTICO E MINIMALISTA – evite porções de informações irrelevantes. Cada unidade extra de informação em um diálogo compete com as unidades de informação relevantes e reduz a sua visibilidade relativa
3.3. CONTROLE E LIBERDADE DO USUÁCONTROLE E LIBERDADE DO USUÁRIORIO – forneça
alternativas e “saídas de emergência”; possibilidades de “undo” e
“redo”
serg
Uma sugestão para acelera
Uma sugestão para acelera ç ç ão do acesso ão do acesso
serg
19 19
Sugestões adicionais para acelera
Sugestões adicionais para acelera ção de acesso ç ão de acesso
Acesso R
Acesso Ráápidopido
serg
Mais possibilidades
Mais possibilidades
serg
21 21
… … e mais e mais
Inversão na Inversão na
ordem de ordem de apresenta apresentaçção ão das informa das informaççõesões
serg
Exerc
Exerc ício para casa í cio para casa
• Com a finalidade de se familiarizarem com as
ferramentas de customização da navegação na Web (Greasemonkey, Chickenfoot, Customize Your Web ou outra de sua preferência), normalmente implementadas como extensões para o navegador Firefox, façam:
– Com base em sua avaliação heurística do PUC-Online para
alunos (ver slides da aula 10), gere versões “customizadas” que demonstrem o efeito de algumas das recomendaalgumas das recomendaççõesões feitas pelo grupo no relatório final da análise.
serg
1 11 1
INF1403
INF1403 – – Percurso Cognitivo Percurso Cognitivo (Cognitive Walkthrough)
(Cognitive Walkthrough)
Professora Clarisse Sieckenius de Souza
13/04/2011
serg
O que
O que é é o PERCURSO COGNITIVO o PERCURSO COGNITIVO
• Um método de inspeção
– Realizado por especialistas, sem a participação de usuários.
• Conhecido em inglês como Cognitive Walkthrough
– O termo walkthrough é utilizado em outros contextos na Informática. Significa ‘percorrer um caminho’, normalmente executando uma inspeção ou verificação.
• O Método de Percurso Cognitivo (mPC) foi proposto em 1994 por Wharton, Rieman, Lewis e Polson.
– É contemporâneo do método de Avaliação Heurística (mAH).
– Porém, ao contrário do mAH, o mPC é baseado conhecimento teórico.
serg
3 3
A teoria por tr
A teoria por tr á á s do mPC s do mPC
• Uma teoria do aprendizado por exploração (o modelo CE+, proposto por Polson e Lewis em 1990).
– Ao se depararem com algo novo, as pessoas naturalmente tentam entender do que se trata explorando a novidade em um contexto concreto de atividade.
• Trocando em miúdos, no contexto de IHC o que isto significa é que diante de um
sistema novo, os usuários começam a usá-lo (exploratoriamente) para aprendê-lo. Não vão ler manuais ou assistir a tutoriais primeiro.
• O objetivo dos autores do mPC é fazer um design de interação que apoie, estimule e torne produtivo este processo de exploração.
– Querem usar a teoria cognitiva para prever quanto tempo (ou esforço cognitivo) será necessário para os usuários aprenderem uma interface através de um
processo de exploração.
• Há um guia prático do método (e referências a pesquisa) em inglês no site:em inglês
– http://ics.colorado.edu/techpubs/pdf/93-07.pdf
serg
Usando uma teoria para alcan
Usando uma teoria para alcan ç ç ar resultado pr ar resultado pr á á tico tico
Ponto de partida Usuário não
sabe nada
Ponto de chegada Usuário aprendeu a usar o SISTEMA
Caminho racionalmente ideal (mais direto, mais curto, mais rápido)
Caminho possível 1 Caminho possível 2
serg
5 5
Usando uma teoria para alcan
Usando uma teoria para alcan ç ç ar resultado pr ar resultado pr á á tico tico
Ponto de partida Usuário não
sabe nada
Ponto de chegada Usuário aprendeu a usar o SISTEMA
Caminho racionalmente ideal (mais direto, mais curto, mais rápido)
Caminho possível 1 Caminho possível 2
Conhecendo as estratégias que as pessoas usam para aprender por
exploração (ensaio e erro), podemos fazer um design que MAXIMIZE os bons ensaios e
MINIMIZE os erros.
serg
Como o Percurso Cognitivo funciona na pr
Como o Percurso Cognitivo funciona na pr á á tica? (1/2) tica? (1/2)
• Dado que os avaliadores têm
– O(s) perfis completos de usuários visados e
– Uma representação completa das interações que o sistema oferece,
• Nota: esta representação não precisa ser uma IMPLEMENTAÇÃO. O mPC pode ser aplicado tanto em avaliação FORMATIVA (sistema em
construção), quanto em avaliação SOMATIVA (sistema pronto).
• Eles elaboram CENÁRIOS TÍPICOS para as tarefas que o sistema se destina a apoiar, identificando:
– Os caminhos interativos que levam à sua conclusão bem-sucedida e – O que os usuários supostamente JÁ SABEM ao se deparar com o
sistema pela primeira vez.
serg
7 7
Como o Percurso Cognitivo funciona na pr
Como o Percurso Cognitivo funciona na pr á á tica? (2/2) tica? (2/2)
• Para cada estado interativo, no percurso que vai do início ao final de cada tarefa, os
avaliadores:
– Constróem uma narrativa plausível que justifique (explique) por que o(s) próximo(s) caminho(s) produtivo(s) seria(m) a escolha preferencial do usuário.
“Os caminhos marcados pelas setas“Os caminhos marcados pelas setas verdes mais grossas serão escolhidos verdes mais grossas serão escolhidos
pelo usu
pelo usuáário que estrio que estáá aprendendoaprendendo o sistema, pois <EXPLICA
o sistema, pois <EXPLICAÇÇÃOÃO COMPAT
COMPATÍÍVEL COM O PERFILVEL COM O PERFIL DO USU
DO USUÁÁRIO E SEU CONHECIMENTORIO E SEU CONHECIMENTO INICIAL AO USAR O SISTEMA INICIAL AO USAR O SISTEMA
PELA PRIMEIRA VEZ>.
PELA PRIMEIRA VEZ>.””
intui
intui ç ç ão ão
serg
Perguntas pr
Perguntas pr á á ticas: ticas:
Slide 12 Slide 12
serg
9 9
Um exemplo pr
Um exemplo pr á á tico tico
• Software Inspecionado: o PENCIL da Evolus
– Este software está sendo sugerido como ferramenta de projeto de curso
• Perfil de Usuários: Alunos da turma 3WB de INF1403
– Listar as características de conhecimento relevantes para a inspeção do PENCIL
• Cenário de Inspeção
–– ““Sergio Sergio éé aluno de INF1403 e a sua professora passou um exercíaluno de INF1403 e a sua professora passou um exercício para casa em que ele cio para casa em que ele tem de fazer uma proposta de redesign para uma p
tem de fazer uma proposta de redesign para uma páágina na Web. Ela solicita que as gina na Web. Ela solicita que as propostas sejam apresentadas como
propostas sejam apresentadas como ““sketches sobre a psketches sobre a páágina originalgina original”” elaborados com a elaborados com a ferramenta Pencil
ferramenta Pencil©© da empresa Evolus. Sergio acaba de baixar o Pencil e apenas para da empresa Evolus. Sergio acaba de baixar o Pencil e apenas para descobrir como ele funciona pretende pegar a p
descobrir como ele funciona pretende pegar a páágina de entrada da disciplina e:gina de entrada da disciplina e:
•• Gerar um sketch com UMA ÚGerar um sketch com UMA ÚNICA modificaNICA modificaçção bem visão bem visíível de design e UMA vel de design e UMA ÚÚNICA anotaNICA anotaçção ão sobre o porquê da modifica
sobre o porquê da modificaçção proposta.ão proposta.””
serg
Uma representa
Uma representa ç ç ão do DESIGN ão do DESIGN
serg
11 11
O que Sergio gostaria de fazer
O que Sergio gostaria de fazer
serg
Hierarquia de Metas (uma de mais possibilidades) Hierarquia de Metas (uma de mais possibilidades)
Contexto corrente: Usuário com documento novo do Pencil aberto
• Meta Global: Criar um sketch de modificação sobre a página inicial da disciplina
1. Sub-Meta 1: Capturar a página da disciplina como imagem Sub-Sub-Meta 1: Carregar a página no Browser
...
Sub-Sub-Meta n: Salvar a imagem capturada
2. Sub-Meta 2: Inserir a imagem capturada no documento do PENCIL Ação 1: Abrir diretório onde está a imagem
Ação 2: Arrastar o ícone do arquivo da imagem para o Canvas do PENCIL Sub-Sub-Meta 1: Posicionar a imagem corretamente no Canvas
3. Sub-Meta 3: Esquematizar modificação para o link “>> 3WB Clarisse”, mostrando acesso a sub-menus “Aulas e Slides”, “Exercícios e Trabalhos”, “Notas” e “Demais Informações”
Sub-Sub-Meta 1: Escolher o “widget” a ser usado no sketch para substituir o link “>>3WB Clarisse”
Sub-Sub-Meta 2: Editar as propriedades do “widget” que substituirá o link “>>3WB Clarisse”
Sub-Sub-Meta 3: Escolher o “widget” a ser usado no sketch para representar os sub-menus propostos Sub-Sub-Meta 4: Editar as propriedades do “widget” que representará os sub-menus propostos
4. Sub-Meta 4: Adicionar balão com anotação explicativa com breve descrição e justificativa da alteração
,,,
Use o Pencil Use o Pencil©© para acompanhar para acompanhar
serg
1 11 1
INF1403
INF1403 – – Engenharia Semi Engenharia Semi ó ó tica tica Introdu
Introdu ç ç ão ão
Professora Clarisse Sieckenius de Souza
18/04/2011
serg
Relembrando o User Centered Design (UCD) Relembrando o User Centered Design (UCD)
• A interação humano-computador é caracterizada como uma travessia de dois golfos, que se repete até que seja atingida a meta global que o
usuário tem em mente.
– Etapas do Golfo de Execução: Intenção > Planejamento > Execução – Etapas do Golfo de Avaliação: Percepção > Interpretação > Avaliação
• A essência do UCD é que toda ação que interessa para se compreender o que é (e consequentemente para se desenhar uma interface que realize) esta interação entre usuário e sistema é exclusivamente realizada pelo usuário.
– É o usuário que tem a meta global em mente; é ele que formula intenções imediatas; é ele que faz o planejamento de ações de interface e as executa; é ele que deve perceber o estado corrente do sistema; ele que deve interpretá-lo e decidir ser sua meta já foi atingida ou não.
– O sistema não interessa, exceto pela IMAGEM que ele projeta, à qual se destina e a qual desencadeia toda a atividade mental ou física do usuário durante a travessia dos golfos.
serg
3 3
O Modelo de Design Centrado no Usu
O Modelo de Design Centrado no Usu á á rio de Norman rio de Norman
Modelo de Design
Modelo do Uso
Golfo de Avaliação
Golfo de Execução
Desejos, Necessidades, Preferências, Conhecimento, Habilidades das Pessoas
⇒ Modelo de Tarefas e Modelo de Usuário
Designer
Usuário Imagem
do Sistema
serg
Uma consequência do modelo de UCD Uma consequência do modelo de UCD
Modelo do Uso
Golfo de Avaliação
Golfo de Execução
Usuário Imagem
do Sistema
Todo o processo de DESIGN DE INTERA Todo o processo de DESIGN DE INTERAÇÇÃOÃO estestáá FORA do objeto de interesse (IHC). OFORA do objeto de interesse (IHC). O que aconteceu neste processo RESULTA na que aconteceu neste processo RESULTA na IMAGEM DE SISTEMA que CAUSA uma IMAGEM DE SISTEMA que CAUSA uma experiência melhor ou pior para o usu experiência melhor ou pior para o usuáário.rio.
Mas, o processo de design de intera
Mas, o processo de design de interaçção e ão e a voz dos designers não est
a voz dos designers não estáá em questão paraem questão para quem analisa e desenha IHC conforme os quem analisa e desenha IHC conforme os cânones de UCD. No MOMENTO DA INTERA cânones de UCD. No MOMENTO DA INTERAÇÇÃOÃO não h
não háá vestvestíígio de QUEM PRODUZIU o sistema.gio de QUEM PRODUZIU o sistema.
Mas …Mas … para que serviria este vestípara que serviria este vestígio?gio?
Que diferen
Que diferençça faria?a faria?
serg
5 5
Intelectualidade e Subjetividade no Desenvolvimento de Sistemas
Intelectualidade e Subjetividade no Desenvolvimento de Sistemas
serg
Design
Design éé um processo de escolhasum processo de escolhas
Que vocês Que vocês
acham?
acham?
Quem vai usar Quem vai usar quer não ter quer não ter de carregar de carregar
pesopeso……
É, mas o É, mas o problema problema éé que para ter que para ter
a Alt
a Altííssima ssima Fidelidade que Fidelidade que eles querem, eles querem, eu preciso de eu preciso de espaespaço paraço para
o chip.
o chip.
Deixa eu ver Deixa eu ver
qual qual éé a a perda de perda de qualidade se qualidade se
usarmos o usarmos o chip menor.
chip menor.
O produto final não
O produto final não éé “natural“natural””.. E o usu
E o usuáário não necessariamenterio não necessariamente entende e acompanha as escolhas entende e acompanha as escolhas que houve no proccesso.
que houve no proccesso.
serg
7 7
“ “ Comunicando escolhas Comunicando escolhas ” ” aos usu aos usu á á rios rios
• IHC como uma comunicação entre os produtores e consumidores, mediada pela própria tecnologia.
Oi! Eis aqui (nesta tecnologia) o que eu aprendi sobre quem você é, do que
você gosta e precisa. Pensando nisto, eu fiz este sistema, que você deve
usar assim, para tirar o melhor partido. Aproveite!
serg (c) SERG, 2011
INF1403
INF1403 – – M M é é todo de Inspe todo de Inspe ç ç ão ão Semi Semi ó ó tica: Conceitos Preliminares tica: Conceitos Preliminares
Professora: Clarisse Sieckenius de Souza Professora: Clarisse Sieckenius de Souza
20/04/2011
20/04/2011
serg
2 2
(c) SERG, 2011
Recordando a compara
Recordando a compara ç ç ão de 2 ão de 2 “ “ teorias de IHC teorias de IHC ” ”
Engenharia Cognitiva Engenharia Cognitiva
(Norman, 1986) (Norman, 1986) OBJETIVO
OBJETIVO
Gerar e organizar conhecimentos Gerar e organizar conhecimentos sósólidos para favorecer o lidos para favorecer o
desenvolvimento de bons projetos desenvolvimento de bons projetos de intera
de interação humanoção humano--computador.computador.
BASE & FOCO BASE & FOCO
Cognitiva / Aprendizado e Cognitiva / Aprendizado e Compreensão
Compreensão Quem est
Quem estáá em cena na interaem cena na interaçção?ão?
UsuUsuáário (somente).rio (somente).
Engenharia Semi
Engenharia Semióóticatica (de Souza, 2005)
(de Souza, 2005) OBJETIVO
OBJETIVO
Gerar e organizar conhecimentos Gerar e organizar conhecimentos sósólidos para favorecer o lidos para favorecer o
desenvolvimento de bons projetos desenvolvimento de bons projetos de intera
de interaçção humanoão humano--computador.computador.
BASE & FOCO BASE & FOCO
SemióSemiótica / Comunicatica / Comunicaçção e ão e Expressão
Expressão Quem est
Quem estáá em cena na interaem cena na interação?ção?
UsuUsuáário e Projetista (Designer) rio e Projetista (Designer) do sistema.
do sistema.
COMO? POR QUÊ?
COMO? POR QUÊ?
serg (c) SERG, 2011
Semi Semi ó ó tica tica
• • Semi Semi ó ó tica tica é é uma disciplina que estuda como (e por que) uma disciplina que estuda como (e por que) as pessoas atribuem significado
as pessoas atribuem significado à à s coisas, e como usam s coisas, e como usam as coisas para significar o que querem dizer.
as coisas para significar o que querem dizer.
– Tudo o que ‘tem significado’
para alguém é um SIGNO.
• Exemplos:
Palavras têm significado (‘semiótica’ significa algo).
Imagens têm significado (→) Lugares, pessoas, aromas,
sensações, lembranças...
Tudo pode ter significado Tudo pode ter significado.
Tudo pode ser um signo.
serg
4 4
(c) SERG, 2011