Aula 07 Design de IHC v2

Prévia do material em texto

Interação Humano-Computador 
 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 1 / 40 
 
Prof. Dr. Rodrigo Duarte Seabra 
 
 
 
Universidade Federal de Itajubá 
Bacharelado em Ciência da Computação 
 
 
Design de IHC 
Aula 07 
 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 2 / 40 
 
Prof. Dr. Rodrigo Duarte Seabra 
 
 
 
Universidade Federal de Itajubá 
Bacharelado em Ciência da Computação 
 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 3/ 40 
Design de IHC 
 Objetivos da aula: 
 
 Apresentar representações e modelos utilizados no design da interação e da 
interface com usuário 
 
 Discutir como as representações utilizadas favorecem certos tipos de 
reflexão sobre o design de IHC 
 
 Apresentar diferentes estilos de interação que podem ser adotados no 
design de IHC 
 
 Descrever representações da interface com usuário em diferentes níveis de 
abstração e enfocando diversos aspectos da solução 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 4/ 40 
Design de IHC 
 Os modelos e as representações utilizados na aula anterior permitem descrever: 
 quem usa ou utilizará o sistema (através de perfis de usuário e personas) 
 quais são seus objetivos, motivações e em que contexto ele será utilizado (cenários 
de problema) 
 como os usuários alcançam esses objetivos atualmente (cenários e modelos de 
tarefa) 
 
 Foco era... análise da situação atual 
 
 Agora... foco no projeto da intervenção! 
 
 ... que será feita através do design do sistema computacional interativo visando 
 apoiar melhor os usuários no alcance dos seus objetivos. 
 
 Design de IHC 
 elaborar um modelo conceitual de entidades e atributos do domínio do sistema 
 estruturar as tarefas e projetar a interação e a interface de um sistema interativo 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 5/ 40 
Cenários de Interação 
 Cenários são narrativas sobre pessoas realizando uma atividade para alcançar 
um ou mais objetivos; 
 
 Um cenário de interação especifica em mais detalhes as ações do usuário e as 
respectivas respostas (feedback) do sistema necessárias para alcançar os objetivos 
apoiados pelo sistema; 
 
 Apesar de ricos em detalhes e contextualizados, os cenários de interação 
elaborados em fases iniciais de design não devem conter detalhes da interface 
propriamente dita, como textos e rótulos, tipos de elementos de interface 
(widgets) utilizados etc.; 
 
 Exemplo: Não devemos dizer que “Joana seleciona relatório técnico da lista 
expansível (dropdown list) denominada Formato de entrega”; 
 
 As decisões sobre a escolha dos elementos de interface devem ser postergadas 
para o momento adequado no processo de design. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 6/ 40 
Cenários de Interação 
 Exemplo: Cenários de interação 
 
Cenário de interação: Cadastro de projetos finais pelos professores 
 
Atores: Joana (secretária), Fernando Couto (aluno), Marcos Correa (professor, orientador principal do 
projeto final), Pedro Melo (coorientador externo) 
 
Na primeira semana de aula [2], Joana, secretária do curso de Engenharia Ambiental, precisa se 
certificar de que os projetos finais dos alunos iniciados no período atual estão cadastrados. Como 
costumam ser entre 20 e 30 projetos [5], e seu cadastramento deve ser efetuado numa época em que 
o pessoal da secretaria está sobrecarregado de trabalho, cada professor deve cadastrar os projetos 
dos seus alunos [1]. Para isso, Joana envia uma mensagem a todos os professores solicitando que 
cadastrem os projetos sob sua orientação e informando que eles têm apenas uma semana para fazê-
lo, sob risco de os alunos terem suas matrículas em Projeto Final 1 canceladas. 
 
Ao receber a mensagem de Joana, Marcos Correa entra no sistema para cadastrar o projeto final do 
seu aluno Fernando Couto [1,3]. Ele informa o nome e a matrícula do aluno, além do título e do 
formato de entrega do seu trabalho (relatório ou software) [4]. Ao informar os dados do coorientador 
externo (nome completo, e-mail e CPF) [7], percebe que não possui o CPF do seu colega, Pedro Melo. 
Marcos então pede que o próprio sistema envie uma mensagem a Pedro solicitando essa informação 
[8] e confirma o cadastramento [9]. Ao concluir o cadastramento, Marcos é informado de que o 
sistema enviará uma mensagem de solicitação de informações adicionais para seu colega Pedro e uma 
mensagem de feedback para o aluno Fernando Couto. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 7/ 40 
Design Centrado na Comunicação 
 Na engenharia semiótica, o objetivo do design da interação é completar a segunda parte 
da metamensagem do designer para o usuário: 
 
“Este é o meu entendimento, como designer, de quem você, usuário, é, do que aprendi que você 
quer ou precisa fazer, de que maneiras prefere fazer, e por quê. Este, portanto, é o sistema 
que projetei para você, e esta é a forma como você pode ou deve utilizá-lo para 
alcançar uma gama de objetivos que se encaixam nesta visão.” 
 
 É responsabilidade do designer comunicar aos usuários sua visão de design e dar-lhes 
melhores condições de entender e aprender sobre o sistema projetado e como podem 
utilizá-lo 
 
 Design centrado na comunicação: elaborar essa metacomunicação de modo a evitar 
rupturas comunicativas durante a interação do usuário com o preposto do designer 
 
 O design da interação pode então ser considerado como a especificação de todas as 
conversas que os usuários poderão travar com o preposto do designer, incluindo conversas 
alternativas representando diferentes estratégias para alcançar um objetivo e conversas 
para a recuperação de rupturas comunicativas. 
 
 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 8/ 40 
Esquema Conceitual de Signos: Conteúdo (Parte I) 
 Define e organiza os conceitos envolvidos no sistema, em particular aqueles que 
emergem na interface de usuário 
 
 Inclui informações envolvidas em cada fala (ação) do usuário, sistema ou interlocutor 
externo que afete a interação usuário-sistema 
 
 Inicialmente, definimos o conteúdo dos signos, especificando restrições sobre valores 
associados ao signo, seus valores default, e os mecanismos de prevenção e tratamento de 
rupturas associadas aos signos 
Enunciado de trabalho (E) – enunciado de trabalho de disciplina de graduação 
signo origem observações 
+ título domínio 
descrição domínio 
data de entrega domínio 
formato de entrega domínio (relatório, protótipo) 
número máximo de alunos domínio indica se o trabalho deve ser realizado individualmente 
ou em grupo 
peso domínio peso do trabalho na pontuação (porcentagem) 
Definição parcial dos signos-entidade do sistema de apoio acadêmico do exemplo 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 9/ 40 
Esquema Conceitual de Signos: Conteúdo (Parte I) 
Enunciado de trabalho (E) – enunciado de trabalho de disciplina de graduação 
signo origem observações 
lembrete do prazo de entrega aplicação indica se o sistema deve ou não enviar aos alunos um 
lembrete alguns dias (prazo para lembrete) antes da data 
final para entrega do trabalho 
prazo para lembrete aplicação para cada turma, o professor define a data de lembrete 
pelo número de dias antes da data de entrega 
Trabalho entregue (T) – trabalho realizado por um ou mais alunos 
+ Enunciado (E) domínio T é definido por E 
+ Alunos (A) 
A.[matrícula, nome] 
domínio A realiza T; cardinalidade depende de E.número máximo 
de alunos 
relatório domínio 
data de entrega domínio 
nota domínio 
Aluno (A) – aluno de graduação 
+ matrícula domínio 
nome domínio 
período domínio calculado a partir da data de ingresso do aluno 
Definição parcial dos signos-entidade do sistema de apoio acadêmico do exemplo 
Prof. Dr. RodrigoDuarte Seabra Design de IHC 10/ 40 
Origem de um Signo 
 Podem ser classificados em: 
 Signos de domínio: encontrados no mundo do usuário, independentemente do 
sistema (ex: nome e endereço de pessoa) 
 Signos transformados: originados no domínio, mas que sofrem alguma 
transformação ao serem incorporados ao sistema, como uma transformação 
resultante de analogias ou metáforas (ex: login para identidade e senha para 
assinatura) 
 Signos da aplicação: só fazem sentido dentro do sistema, e que não têm significado 
prévio para os usuários (ex: porcentagem de download de um arquivo) 
 Signos convencionais: signos transformados ou de aplicação que já tenham sido 
estabelecidos como convenções na cultura dos usuários (ex: zoom em editores gráficos 
ou interfaces baseadas em mapas) 
 
 A classificação auxilia o designer a refletir sobre a explicação a ser associada a 
cada signo 
 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 11/ 40 
Restrições sobre a Manipulação e o Conteúdo do Signo 
 À medida que o design avança, é possível definir mais informações acerca dos 
signos 
Enunciado de trabalho (E) – enunciado de trabalho de disciplina de graduação 
signo tipo de conteúdo restrição sobre o conteúdo valor default 
+ título texto não pode ser nulo ___ 
descrição texto ___ 
data de entrega data data futura ___ 
formato de entrega seleção simples conjunto flexível: inicialmente = 
{relatório, protótipo} 
relatório 
número máximo de alunos seleção simples [1,6] 1 (individual) 
peso número real [0,1] 1 (100%) 
lembrete do prazo de 
entrega 
seleção simples sim/não sim 
prazo para lembrete número [1,7] 3 
Definição do conteúdo dos signos que compõem o signo enunciado de trabalho 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 12/ 40 
Prevenção e Recuperação de Rupturas Comunicativas 
 A engenharia semiótica ressalta a importância de tentarmos prever, durante o 
design de uma solução de IHC, rupturas na comunicação entre o preposto do 
designer e o usuário que podem ocorrer durante a interação 
 
 Para cada ruptura identificada, o designer deve representar os tipos de apoio à 
prevenção e à recuperação da ruptura que pretende oferecer aos usuários: 
 prevenção passiva (PP): o preposto do designer tenta evitar que haja uma ruptura, 
fornecendo explicações sobre a linguagem de interface. Ex: apresenta uma dica de 
formato como “(dd/mm/aaaa)” ao lado de um campo de data; ou uma instrução 
explícita como “asterisco (*) indica campo obrigatório” 
 prevenção ativa (PA): o preposto do designer impede que o usuário emita falas 
inválidas que causem uma ruptura. Ex: habilita ou desabilita um botão de acordo com 
o estado atual do sistema; impede que o usuário digite letras ou símbolos em campos 
numéricos etc. 
 prevenção apoiada (ou alerta, AL): o preposto do designer, ao identificar uma 
situação como causa potencial de uma ruptura, descreve a situação e solicita que o 
usuário tome uma decisão informada sobre os rumos da interação. Ex: intenção de 
gravar um arquivo com um nome diferente, mas informa o nome de um arquivo 
existente. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 13/ 40 
Prevenção e Recuperação de Rupturas Comunicativas 
 
 recuperação apoiada (RA): após uma ruptura ter ocorrido, o preposto do designer 
auxilia o usuário a se recuperar da ruptura, e descrevendo-a e oferecendo ao usuário a 
oportunidade de retomar a conversa de forma produtiva. Ex: usuário preenche um 
campo incorretamente, o preposto apresenta uma mensagem descrevendo o erro no 
preenchimento e destaca o campo a ser corrigido, esperando que o usuário assim o 
faça 
 
 captura de erro (CE): após uma ruptura ter ocorrido, o preposto de designer identifica 
que não será possível ao usuário se recuperar dela através da linguagem de interface 
do próprio sistema. Nesse caso, o preposto descreve a ruptura e, se possível, indica ao 
usuário algo que ele possa fazer fora do sistema para retornar uma conversa produtiva 
com o sistema no futuro. Ex: mensagem de arquivo corrompido. 
 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 14/ 40 
Prevenção e Recuperação de Rupturas Comunicativas 
Enunciado de trabalho (E) – enunciado de trabalho de disciplina de graduação 
signo prevenção recuperação 
+ título PP: campo obrigatório RA 
descrição ___ ___ 
data de entrega PP+PA: apenas datas futuras podem ser informadas ___ 
formato de entrega PA: ao menos uma opção está sempre selecionada ___ 
número máximo de alunos PA: ao menos uma opção está sempre selecionada ___ 
peso PP: campo numérico entre 0 e 1 RA 
lembrete do prazo de entrega PA: ao menos uma opção está sempre selecionada ___ 
Mecanismos de prevenção e recuperação dos signos-atributo do signo-entidade Enunciado de trabalho 
 
 
 Como não há garantias de que o usuário entenderá ou respeitará as instruções, 
sempre que um signo estiver associado a uma forma de prevenção passiva, 
também deve estar associado a alguma forma de recuperação apoiada (RA) 
equivalente. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 15/ 40 
Modelagem de Tarefas 
 A representação de tarefas utilizada na engenharia semiótica segue uma 
decomposição hierárquica: 
 o objetivo de mais alto nível é representado por um retângulo com bordas 
arredondadas 
 a decomposição prossegue até chegarmos a operadores, que representam ações 
atômicas, ou seja, que podem ser mapeadas diretamente em ações sobre um elemento 
de interação na interface (widget). São representados com um retângulo sobre uma 
linha 
 
 A decomposição do objetivo ou de uma tarefa em tarefas menores e operadores 
deve parar antes que o modelo inclua detalhes de interface, tais como Digitar X, 
Pressionar botão Y etc. 
 
 Para distinguir uma tarefa de um operador, pode-se tentar formular a atividade 
do usuário da seguinte maneira: “Para realizar/atingir A, é preciso fazer X, Y e Z” 
 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 16/ 40 
Modelagem de Tarefas 
 
 
 
 
 
 
 
 
 
 
 
 
 As tarefas e os operadores podem ser organizados nos seguintes tipos de 
estruturas: sequenciais, independentes de ordem, alternativas, iterativas, 
ubíquas e opcionais. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 17/ 40 
Modelagem de Tarefas 
 
 
 
 
 
 
 
 
 
 
 
 
 
Representação de estrutura de tarefa (a) sequencial, (b) independente de ordem, (c) alternativa, (d) 
iterativa, (e) ubíqua e (f) opcional 
(a) (b) (c) 
(d) (e) (f) 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 18/ 40 
Modelagem de Tarefas 
 Tipos de estruturas: 
 Sequenciais: existe uma ordem em que as tarefas devem necessariamente ser 
efetuadas pelo usuário 
 Independente de ordem: representa um conjunto (e não uma sequência) de tarefas a 
serem efetuadas pelo usuário. O projetista sugere uma ordem de execução, mas é o 
usuário quem determina, de fato, em que ordem as tarefas serão efetuadas 
 Alternativa: diversos cursos de ação são possíveis, e o usuário deverá selecionar qual 
das tarefas da estrutura será efetuada, conforme a estratégia que queira adotar 
 Iterativa: quando uma tarefa pode ser realizada uma ou mais vezes 
 Ubíqua: quando o usuário pode realizar uma tarefa a partir de qualquer momento 
da interação para atingir o objetivo desejado 
 Opcional: quando o usuário pode optar por realizar ou não uma tarefa 
 
 Em geral, não modelamos as tarefas relacionadas a todos os objetivos do 
sistema. A modelagem de tarefas se destina principalmente a explorar tarefas com 
estruturas mais complexas do que a do exemplo apresentado. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 19/ 40 
Modelagem da Interação 
 Paula, Silva e Barbosa propuseram, no âmbitoda engenharia semiótica, uma linguagem 
para a modelagem da interação humano-computador como uma conversa, denominada 
MoLIC (Modeling Language for Interaction as Conversation) 
 
 A MoLIC permite representar a interação humano-computador como o conjunto de 
conversas que os usuários podem (ou devem) travar com o preposto do designer para 
atingir seus objetivos 
 
 O diagrama de interação MoLIC representa como os objetivos poderão ser atingidos 
durante a interação, servindo como ponte entre a definição dos objetivos dos usuários e o 
projeto da interface propriamente dita 
 
 Deve haver um diagrama MoLIC para cada papel de usuário. Cada diagrama representa a 
visão completa que um usuário poderá ter do sistema. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 20/ 40 
Modelagem da Interação 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Diagramas (cenas) parciais de interação do professor e do aluno, cujos tópicos foram extraídos do mapa 
de objetivos 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 21/ 40 
Modelagem da Interação 
 As cenas representam conversas sobre determinado tópico, culminando na vez de o 
usuário dizer algo para concluir a conversa, suspendê-la, desviar do tópico ou mesmo 
abandoná-la 
 
 O tópico de uma cena pode ser lido, do ponto de vista do preposto, como: “Neste 
momento, você (usuário) pode (ou deve) <tópico>” 
 
 Na MoLIC, as mudanças de tópico são representadas por falas de transição, sejam do 
usuário ou do preposto 
 
 Uma fala de transição é representada por uma linha direcionada, indicando pelo menos o 
enunciador da fala (“u:” para usuário e “d:” para o preposto do designer) e o seu conteúdo 
 
 A palavra-chave precond define uma precondição para que o usuário possa emitir a fala 
correspondente 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 22/ 40 
Modelagem da Interação 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Diagrama (parcial) de interação do aluno com falas de transição de usuário 
Diagrama (parcial) de interação do aluno, incluindo os acessos ubíquos 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 23/ 40 
Design da Interface – Estilos de Interação 
 À medida que o design de interação avança, o designer passa a definir a interface 
propriamente dita, a parte física do sistema com a qual o usuário entrará em contato 
 
 A definição da interface inicia com a escolha dos estilos de interação do sistema, para 
então passar para a representação da interface, em diferentes níveis de abstração 
 
 Dentre os estilos de interação mais comumente utilizados, encontramos as linguagens de 
comando, a linguagem natural, a interação por menus, por formulários, por manipulação 
direta e WIMP (Windows, Icons, Menus and Pointers) 
 
 Linguagem de comando: o usuário deve digitar os comandos que realizam as ações na 
aplicação 
 organizada como um conjunto de comandos simples (ex: DIR), comandos mais 
parâmetros (ex: COPY origem destino) ou comandos seguidos de opções e argumentos 
(ex: COPY /v origem destino). 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 24/ 40 
Design da Interface – Estilos de Interação 
Exemplo de interação através de linguagem de comando 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 25/ 40 
Design da Interface – Estilos de Interação 
 Linguagem natural: visa permitir que o usuário se expresse como em uma conversa com 
uma outra pessoa, utilizando seu próprio idioma. O objetivo principal é facilitar o uso de um 
sistema por usuários novatos 
 em geral, os usuários têm dificuldade para entenderem os limites do sistema, ou seja, 
qual é o subconjunto da linguagem natural que o sistema consegue interpretar 
 se torna ineficiente para usuários experientes, quando comparada com a interação 
por linguagem de comando 
 
 Menus: o sistema oferece um conjunto de opções dentre as quais o usuário deve 
selecionar a que lhe interessa 
 o design por menus visa criar uma organização razoável, inteligível, memorável e 
conveniente para as tarefas dos usuários 
 optar por menus largos e rasos, em vez de estreitos e profundos 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 26/ 40 
Design da Interface – Estilos de Interação 
Exemplos de diferentes formas de menu 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 27/ 40 
Design da Interface – Estilos de Interação 
 Formulário: o sistema solicita dados do usuário através de campos que precisam ser 
preenchidos 
 criar grupos de itens relacionados e ordená-los de forma lógica 
 utilizar terminologia familiar aos usuários e consistente 
 fornecer atalhos para localizar e selecionar um item e apresentar instruções inteligíveis 
 fornecer um movimento de cursor conveniente para navegação entre os campos do formulário, 
que corresponda à direção natural de leitura dos usuários 
Exemplo de interação através de formulário 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 28/ 40 
Design da Interface – Estilos de Interação 
 Manipulação Direta: objetivo de aproximar a interação da manipulação dos objetos no 
mundo real 
 é necessário que um objeto do mundo real tenha uma representação visual na interface e que 
cada manipulação sobre um objeto possa ser mapeada nas operações do mouse, como clique, 
duplo clique e clique-e-arrasto 
 as ações devem ser rápidas, incrementais e reversíveis e os resultados devem ser imediatamente 
apresentados 
Exemplo de interação através de manipulação direta 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 29/ 40 
Design da Interface – Estilos de Interação 
 WIMP: utiliza vários estilos em diferentes partes da interface, adotado nos ambientes 
baseados em janelas 
 visa aproveitar os benefícios e contornar as limitações de cada estilo de interação 
individual. 
 
 
 
 
 
 
 
 
 
 
 
 
 Outros estilos: interação em 3D, com realidade virtual e aumentada; interação com 
caneta, toque e gestos... 
Exemplo de interação WIMP 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 30/ 40 
Representações da Interface com Usuário 
 Uma interface pode ser representada informalmente através de esboços, de forma 
estruturada através de modelos ou até mesmo através de protótipos funcionais 
 
 O design da interface pode ser realizado em diferentes níveis de abstração: da interface 
abstrata até a interface concreta 
 
 Na elaboração da interface abstrata, definimos os agrupamentos e as características dos 
elementos da interface 
 
 Na elaboração da interface concreta, definimos o posicionamento e escolhemos os 
elementos de interface interativos (widgets) 
 
 Em uma abordagem informal, o design da interface costuma ser representado em 
esboços, wireframes e protótipos, que vão sendo refinados sucessivamente ao longo do 
processo. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 31/ 40 
Representações da Interface com Usuário 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 32/ 40 
Da Interação como uma Conversa para o Design da Interface 
 Os acessos ubíquos são pontos de início de conversas dirigidas por objetivos e, em geral, 
devem estar disponíveis em qualquer momento da interação, desde que respeitadas suas 
precondições 
 
 Acessos ubíquos costumam ser mapeados na interface em barras de navegação ou itens 
de menu 
Acessos ubíquos mapeados para uma barra de navegação, considerando duas alternativas: horizontal e vertical 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 33/ 40 
Da Interação como uma Conversa para o Design da Interface 
 A interface é composta de diferentes unidades de apresentação. Em uma interface 
gráfica, uma unidade de apresentação é uma tela ou janela. Já em interfaces Web, é uma 
página. Embora não haja um mapeamentodireto entre cena e unidade de apresentação, 
essa estratégia é bastante comum. 
Mapeamento de uma cena para uma unidade de apresentação 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 34/ 40 
Da Interação como uma Conversa para o Design da Interface 
 A seguir, uma alternativa de design de interface que decompõe a mesma cena em duas 
unidades de apresentação. Esse tipo de situação acontece com frequência no caso de 
diálogos que manipulam arquivos, como localizar um arquivo para abri-lo ou localizar um 
diretório e definir um nome para salvar um arquivo. Também é comum em alguns 
dispositivos móveis com telas de tamanho reduzido. 
Mapeamento de uma cena para duas unidades de apresentação 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 35/ 40 
Da Interação como uma Conversa para o Design da Interface 
 
 Cada signo costuma ser representado como um elemento de interface (widget) 
 
 Caso haja alguma prevenção passiva prevista associada a um signo, geralmente é 
concretizada em uma instrução ou dica, textual ou pictórica, apresentada próxima ao 
elemento correspondente, como o asterisco para indicar campos obrigatórios 
 
 Falas de transição do usuário geralmente são mapeadas em um link, botão ou item de 
menu 
 
 Caso haja uma precondição associada à fala, pode haver uma mudança no estado (ativo 
ou inativo) ou na visibilidade (visível ou oculto) do elemento correspondente 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 36/ 40 
Esquema Conceitual de Signos: Expressão (Parte II) 
 Em paralelo à elaboração da interface, podemos definir as expressões de cada signo, 
concluindo assim a definição do esquema de signos 
 
 A expressão de um signo define qual elemento de interface (widget) deverá ser utilizado 
para apresentar ao usuário ou permitir que ele manipule o conteúdo do signo 
 
 Quando o interlocutor é o preposto do designer, o signo é apresentado ao usuário 
através de elementos de interface para saída de dados (output) 
 
 Quando ambos, usuário e preposto falam sobre o signo, suas expressões são elementos 
de interface para a entrada de dados (input) 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 37/ 40 
Esquema Conceitual de Signos: Expressão (Parte II) 
Enunciado de trabalho (E) – enunciado de trabalho de disciplina de graduação 
signo emissor tipo de expressão expressão default e em contexto 
+ título d+u texto editável simples caixa de texto 
d texto simples rótulo 
descrição d+u texto formatado editável caixa de texto com ferramentas de 
formatação 
d texto simples (aprox. 150 palavras) rótulo com múltiplas linhas 
data de entrega d+u calendário controle de calendário 
d data default: rótulo (dd/mm/aaaa); 
cena Consultar avisos: dd/mm/aaaa + 
calendário 
formato de entrega d+u lista de seleção simples default: combo 
d+u texto editável simples cena Cadastrar formato de entrega: 
caixa de texto 
d texto simples Rótulo 
número máximo de 
alunos 
d+u texto editável simples para 
números inteiros 
caixa de texto com botões de 
incremento e decremento 
d texto simples Rótulo 
peso d+u texto editável simples caixa de texto 
d texto simples rótulo 
lembrete do prazo de 
entrega 
d+u grupo de opções radio (sim, não) 
d texto simples rótulo (sim/não) 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 38/ 40 
Projeto do Sistema de Ajuda 
 Uma das formas de maximizar a comunicabilidade do discurso do preposto do 
designer é enriquecer a forma e o conteúdo do sistema de ajuda 
 
 É fundamental que façamos o projeto do sistema de ajuda para que o usuário 
possa entender melhor a solução do designer e fazer melhor uso do sistema, se 
recuperando facilmente de rupturas que porventura venham a ocorrer 
 
 Com relação ao conteúdo do sistema de ajuda, podemos nos basear em 
compilações das dúvidas frequentes dos usuários ao utilizarem sistemas 
interativos, classificadas de acordo com o tipo de dúvida. 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 39/ 40 
Projeto do Sistema de Ajuda 
tipo de dúvida exemplo de pergunta 
Informativas O que posso fazer com este programa? 
Descritivas O que é isto? O que isto faz? 
Procedimentais Como eu faço isto? 
De escolha O que posso fazer agora? 
Sugestivas O que devo fazer agora? 
Investigativas O que mais devo fazer? Esqueci algo? 
Interpretativas O que está acontecendo agora? Por que isto aconteceu? 
Navegacionais Onde estou? De onde vim? 
Históricas O que eu já fiz? 
De motivação Por que devo usar este programa? Como ele irá me 
beneficiar? 
Prof. Dr. Rodrigo Duarte Seabra Design de IHC 40/ 40 
Trabalho 7 – Entregar na próxima aula (max. 5 alunos) 
Para as atividades abaixo, considere uma agenda pessoal integrada com lista de afazeres e 
correio eletrônico, que deva ser implementada para uso em dois dispositivos: um 
computador desktop e um smartphone. Realize uma análise como indicado nas aulas 05 e 
06 para realizar os exercícios a seguir. 
 
 1. Modelagem de tarefas. Selecione alguns objetivos e faça a modelagem de tarefas 
correspondentes. Para um mesmo objetivo, elabore modelos de tarefas alternativos, 
pensando em diferentes características dos usuários e nos diferentes dispositivos 
considerados. Discuta as diferenças. 
2. Elaboração de esboços de interface a partir de um modelo de interação. Selecione uma 
das soluções modeladas e elabore esboços de interface alternativos para concretizar a 
solução de IHC. 
3. Sistema de ajuda. Escolha um dos objetivos apoiados pelos esboços elaborados na 
atividade anterior e elabore o conteúdo de ajuda correspondente. Discuta as formas de 
acesso a esse conteúdo que podem ser fornecidas a partir da interface, indicando nos 
esboços esses pontos de acesso.