Ilovepdf Merged

IHC Interação Humano Computador
Conceitos e definições
Definição de IHC
Acrônimos: IHC, HCI, CHI – do inglês “Human-Computer Interaction”.
A Interação Humano-Computador (IHC) é uma disciplina que diz

respeito ao design, avaliação e implementação de sistemas de
computação interativos para uso humano em um contexto social e com
os estudos dos principais fenômenos que os cercam (HEWETT et al,
1992).
ET de tênis
Por que estudar IHC?
●
Visão de sistema:
– Pessoas são complexas.
– Computadores são complexos.
– Pelo menos a interface entre os dois deve ser simples.
●
Visão do usuário:
– Pessoas têm limitações
– Erros são caros em termos de:
●
Perda de tempo;
●
Perda de dinheiro;
●
Perda de vidas em sistemas críticos.
Por que estudar IHC?
●
Visão de negócios:
– Maior produtividade e efetividade;
– Hoje os custos humanos são maiores que os de hardware e software.
●
Visão de Mercado:
– Todos os dias as pessoas usam computadores;
– Elas esperam um sistema fácil de usar;
– Não toleram sistemas mal projetados;
– Os usuários são heterogêneos.
Plataforma Lattes
Cadastro Banco de Talentos do Governo Federal
Walmart
Excluindo conta no Facebook
A Rede
Instalação do Windows 10
Conceitos Básicos - Interação Humano-
Computador - IHC
●
Campo de estudos multidisciplinar abrangendo
aplicações na indústria e no comércio;
●
Envolve a ciência da computação, a psicologia, a
ergonomia entre outras disciplinas;
●
Objetiva desenvolvimento e a avaliação de sistemas
computacionais interativos que satisfaçam as
necessidades dos seus usuários.
Conceitos básicos – disciplinas envolvidas
13
Psicologia
Psicologia Social e
Cognitiva Organizacional
Ergonomia e
Ciência da Fatores
computação Humanos
Conhecimento e
Inteligência Habilidades dos Engenharia Teorias,
Especialistas em IHC
Artificial Métodos,
Design Técnicas e
Lingüística
Ferramentas
Antropologia
de
Filosofia Sociologia Design de IHC
Autor: Prof. Geraldo Ranthum

Conceitos básicos – disciplinas envolvidas
Computação ubíqua
Fonte: Rogers et al. (2011) - alteração

Conceitos básicos
●
Nas últimas décadas, tem sido dada cada vez maior
importância à interface de aplicações computacionais.
●
A interface de uma aplicação computacional envolve
todos os aspectos de um sistema com o qual
mantemos contato [Moran, 1981].
●
É através da interface que os usuários têm acesso às
funções da aplicação.
Conceitos básicos
●
Fatores como: satisfação subjetiva, eficiência, segurança,
custo de treinamento e retorno de investimento,
dependem de um bom design da interface.
●
No contexto de IHC devemos considerar 4 elementos
básicos: o sistema, os usuários, os desenvolvedores e
o ambiente de uso (domínio de aplicação) [Dix et al.,
1993].
Conceitos básicos - Desafios IHC/IHM
●
Como dar conta da rápida evolução tecnológica?
●
Como garantir que os designers ofereçam uma “boa IHC/IHM”
ao mesmo tempo que exploram o potencial e a funcionalidade
da nova tecnologia?
●
É possível projetar boas interfaces cujos controles tenham
operações e efeitos relativamente óbvios e que forneçam um
feedback imediato e útil?
Conceitos básicos - Objetivos IHC
●
Produzir sistemas usáveis, seguros e funcionais.
●
Desenvolver ou melhorar a segurança, utilidade,
efetividade e USABILIDADE de sistemas
computacionais.
Conceitos básicos
●
"Usabilidade, um direito". (IHC 2002).
●
Na era da informação, pessoas são obrigadas a realizar
grande parte de suas atividades através de computadores:
votar, pagar contas, pagar impostos, etc.
●
Muitos não conseguem atingir seus objetivos devido a
problemas de usabilidade nos sistemas.
Referências
●
Design de interação: além da interação humano-computador. Yvonne Roggers, Helen
Sharp e Jenny Preece. 3ª ed. Porto Alegre: Bookman, 2013.
●
Design e Avaliação de Interfaces Humano-Computador. Heloísa Vieira da Rocha e
Maria Cecília Calani Baranauskas, Instituto de Computação Universidade Estadual de
Campinas, 2003. E-book. Disponível em: <https://www.nied.unicamp.br/biblioteca/design-
e-avaliacao-de-interfaces-humano-computador/>. Acesso em: 01/07/2019.
●
Interação Humano Computador e o Desenvolvimento de Interações Alternativas.
Daniela G. Trevisan - Instituto de Computação Universidade Federal Fluminense.
●
Interação humano-computador. Simone Diniz Junqueira Barbosa e Bruno Santana da
Silva. Rio de Janeiro: Elsevier, 2010.
●
Professor Geraldo Ranthum. UTFPR, 2017.
IHC - histórico e evolução
Os primórdios do IHC
Esse campo de estudo originou-se entre 1970 e

1980, com a junção das disciplinas de Ciência da
Computação, Psicologia e Ergonomia no intuito
de compreender como o uso dos computadores
poderia melhorar a vida dos usuários (Moraes &
Rosa, 2008; Amaral & Nascimento, 2010;
Baranauskas & Rocha, 2003).
Interface
●
Termo criado por volta de 1880 – com pouca repercussão
até 1960 quando começou a ser utilizada pela indústria
computacional.
●
A partir de então começa a ter um emprego mais amplo
significando, inclusive, interações entre departamentos e
organizações ou campos de estudo.
Definição de Interface
Segundo o Dicionário Brasileiro

de Língua Portuguesa
Michaelis, disponível em:
https://michaelis.uol.com.br/mo
derno-portugues/busca/portugu
es-brasileiro/interface/ interface
significa:
Vídeo
A day made of glass - Corning®
Um dia feito de vidro – Corning®
O vídeo “A Day Made of Glass” foi publicado no

início de 2011 e demonstra a visão da empresa
das potencialidades do vidro como material de
alta tecnologia aplicado na interação com
qualquer superfície.
A day made of glass – Corning®
“Por mais de 160 anos, a Corning tem

A Corning é um dos líderes mundiais
utilizado sua experiência inigualável
de inovação em ciência dos materiais.
em vidros especiais, cerâmicas e
Site da empresa: física óptica para desenvolver
https://www.corning.com/cala/pt.html produtos que criam novas indústrias e

transformam as vidas das pessoas.”
Fonte: site oficial da empresa

Vídeo
A day made of glass 2

by Corning®
Interface
o que é isto?
Evolução do IHC
●
A base para o surgimento da IHC teve
início durante a Segunda Guerra Mundial
●
Cientistas da Força Aérea Inglesa
descobriram que algumas falhas
ocorridas durante o uso de sofisticadas
aeronaves, mesmo por pilotos
experientes, eram causadas pela não
adequação às necessidades e
características dos usuários, e que essas
falhas e erros poderiam ser reduzidos
com controles mais intuitivos e lógicos.
Painel de controle de um Boeing 747-8
Simuladores
●
Free Flight Sim
●
Flight Simulator
●
Microsoft Flight
●
https://www.techtudo.com.br/listas/
noticia/2015/02/veja-lista-com-os-
melhores-simuladores-de-aviao-para-
pc-e-smart.html
Evolução do IHC
●
No intuito de estudar a problemática
da adequação dos equipamentos,
máquinas e produtos para a
necessidade dos usuários surgiu a
disciplina de ergonomia (Amaral &
Nascimento, 2010).
●
“A ergonomia evoluiu no decorrer de
1950 e 1960, após o fim da guerra
principalmente com suas pesquisas
concentradas no desenvolvimento de
eletrodomésticos e automóveis mais
fáceis de serem utilizados”.
Evolução do IHC
●
1970 e 1980 - os pesquisadores ergonômicos começaram a ter
interesse pela psicologia cognitiva, buscando adaptá-la para projetos
de interface com o usuário (Moraes & Rosa, 2008).
●
Pesquisadores começaram a criar novas metodologias, métodos e
técnicas para identificar problemas relacionados à utilização de
sistemas (Amaral & Nascimento, 2010).
●
Nesse período, com o surgimento de monitores, computadores
pessoais e uma onda de tecnologias da computação interativas,
surgiram novos desafios e paradigmas específicos para interfaces
interativas (Preece et alii, 2005).
Evolução do IHC
Com a evolução tecnológica e diante da necessidade

de foco nos estudos das novas tecnologias interativas
e desafios, é adotado o termo IHC, tendo um enfoque
mais amplo que a ergonomia e abordando as
comunicações ou interações entre usuários e
computadores (Rebelo, 2009; Baranauskas & Rocha,
2003).
Evolução do IHC
●
Metade da década de 1980 e no decorrer da década de
1990, métodos e técnicas de usabilidade começaram a
ser utilizados para testar e projetar interfaces de
sistemas interativos fáceis de serem usadas, garantindo
uma experiência de qualidade no uso desses sistemas
(Moraes & Rosa, 2008).
●
Mais recentemente, pesquisas sobre semiótica foram
utilizadas na área de IHC (Silva & Barbosa, 2010).
Evolução do IHC no Brasil
●
Brasil - década de 90 - começaram a surgir os primeiros estudos
de IHC realizados por pesquisadores das áreas de Inteligência
Artificial e Engenharia de Software
●
No decorrer dos anos, pesquisadores das áreas de Ciência de
Informação e Antropologia começaram a contribuir para o
desenvolvimento e o estabelecimento da IHC no país.
Em um curto período de
tempo, a IHC no Brasil se
consolidou e criou uma grande
comunidade ativa que
organiza eventos de escala
continental, dando visibilidade
as pesquisas brasileiras sobre
IHC.
A pesquisa em IHC no Brasil tende a focar cada vez mais na

abordagem de projeto centrado no usuário, considerando a
Usabilidade e a Engenharia Semiótica como fatores fundamentais
para o desenvolvimento de sistemas e interfaces. Isto implica
conhecer não somente a tecnologia, mas, fundamentalmente, o
uso contextualizado que o ser humano faz da tecnologia (Souza,
2004 apud Amaral & Nascimento, 2010, p.24).
●
Preece (1994 apud Rebel, 2011) atenta para um fato importante ocorrido na evolução da IHC:
– Atualmente, IHC é a abreviação para Interação Humano-Computador, porém, devido ao
histórico e à má interpretação dos termos interface e interação, IHC, por alguns atores, é
equivocadamente interpretado como interface Humano-Computador. Baranauskas & Rocha
(2003) adverte que interface é um termo pouco amplo e que não considera fatores
humanos, portanto, interação é o termo mais adequado para a área de IHC, embora
interface e interação estejam interligadas e não possam ser estudados separadamente.
Histórico da área e definições
IHC significa Interação Homem-Computador –

originada do inglês HCI – Human-Computer
Interface.
“IHC também é encontrada com a definição:
Interface Homem-Computador devido ao equívoco
histórico de comparação dos termos interface e
interação”.
A evolução da área de IHC segundo Amyris (2007)
●
Anos 1950: Interface de hardware “para
engenheiros” com diversos botões de interação
●
Anos 1960-1970: Interface de programação
(COBOL, FORTRAN)
●
Anos 1970-1990: Interface de terminais
(linguagens de comando)
●
Anos 1980: Interface de interação para diálogo
(GUIs, multimídia)
●
Anos 1990: Interface para realizar trabalho
(redes e grupos)
●
A partir de 2000: Interface torna-se onipresente
(Aparelhos celulares, bluetooth, dispositivos
móveis, eletrônicos, por toda a parte, telas
interativas e muita tecnologia embarcada). Computação Ubíqua
Melhorias para Interfaces Gráficas com o Usuário
●
Os esforços em estabelecer procedimentos de interação nos sistemas
computacionais semelhantes àqueles utilizados em situações reais
resultam em várias propostas de melhoria para Interfaces Gráficas com
o Usuário (GUI, do inglês Graphical User Interface).
●
Estas pesquisas de melhorias das Interfaces Gráficas concentram-se
em estudos de Interação entre Homem e Computador (IHC).
●
Os benefícios destas pesquisas e práticas da IHC vão além da melhoria
das condições de uso dos sistemas, adentra questões comerciais que
definem a aceitabilidade e permanência dos produtos no mercado.
A importância de um projeto de interação
O projeto de interação determina o sucesso ou fracasso

do produto ou da companhia.
A importância de um projeto de interação
●
O sucesso de produtos interativos
chamou a atenção de
departamentos de marketing que
compreenderam que a usabilidade
afeta fatores como marca, número
de acessos aos sites, índice de
retorno nos sites e a satisfação do
usuário e potencial cliente.
●
“A interação com a interface afeta a
percepção de marca” (Fernandez,
2005). Clique num tablet para
ler uma análise
A expansão do mercado
●
O número de profissionais e especialistas na área de projeto de interação
cresce na medida em que a demanda por produtos mais usáveis é
solicitada por usuários.
●
Com a abertura deste mercado multidisciplinar vários profissionais como
sociólogos, antropólogos, dramaturgos combinam habilidades para
encontrar as melhores soluções de interação.
●
Isso gera custos, causa confusão, desentendimento e até mesmo falhas
de comunicação. Mas o resultado tem sido satisfatório uma vez que os
projetos começam a pensar mais no usuário.
●
O DESIGN DE INTERAÇÃO JÁ É UM GRANDE NEGÓCIO.
Design de Interação
●
https://www.vagas.com.br/vagas-d
e-designer-de-interfaces
●
https://programathor.com.br/
Referências
●
Design e Avaliação de Interfaces Humano-Computador. Heloísa Vieira da
Rocha e Maria Cecília Calani Baranauskas, Instituto de Computação
Universidade Estadual de Campinas, 2003. E-book. Disponível em:
<https://www.nied.unicamp.br/biblioteca/design-e-avaliacao-de-interfaces-
humano-computador/>. Acesso em: 01/07/2019.
●
RANTHUM, Geraldo. UTFPR, 2017.
●
User Experience and HCI Expert. Irla Rebelo - Blog disponível em
<http://irlabr.wordpress.com/apostila-de-ihc/parte-1-ihc-na-pratica/introducao-a-
interacao-entre-homem-e-computador-ihc/> acesso em 01/07/2019.
●
IHC: histórico da área. Blog de Marcelo Ramos disponível em:
<http://www.marceloramos.com.br/publicacao/45/ihc-historico-da-area>
IHC – Exercício sobre disciplinas envolvidas
Exercício
A composição de uma equipe de design depende do tipo de produto
interativo que será desenvolvido.
●
Responda às questões abaixo:
– Quem você acha que deveria estar envolvido no desenvolvimento de:
●
Um balcão de informações sobre as exposições disponíveis em um museu de
ciências ou
●
Uma página de Internet interativa educacional que acompanha uma série de TV ou
●
Um quiosque automatizado para vendas de ingressos de shows.
– Qual será o custo aproximado desse projeto?
– Quanto tempo será necessário para desenvolvê-lo?
Interface e Estilos de Interação

Interface
●
Aquilo que interliga dois sistemas.
●
A Interface homem-máquina é a parte de um artefato
que permite a um usuário controlar e avaliar o
funcionamento deste artefato.
●
No processo de interação usuário-sistema a interface
é a combinação entre o software e hardware
necessária para viabilizar e facilitar os processos de
comunicação entre o usuário e a aplicação.
Interface
“A interface é a parte de um sistema computacional
com a qual uma pessoa (usuário) entra em contato
física, perceptiva e conceitualmente” (Moran, 1981).
Interfaces e Tecnologia
“O sistema ideal deve esconder a tecnologia de

maneira tal que o usuário não note sua presença.”
“O objetivo é deixar as pessoas realizarem suas

atividades, com a tecnologia aumentando sua
produtividade, seu poder, sua eficiência…
“As pessoas deveriam aprender a tarefa, não a
tecnologia.”
Interfaces e Tecnologia
“Deve-se poder empregar a ferramenta na tarefa, e

não ter que adequar a tarefa à ferramenta.”
“E essas ferramentas deveriam seguir os três

axiomas1 do design: simplicidade, versatilidade e
satisfatoriedade. “
____________________________________
1 – premissa considerada necessariamente evidente e verdadeira.
Interação
Processo que engloba as ações do usuário sobre a
interface de um sistema, e suas interpretações
sobre as respostas reveladas por esta interface.
É o conjunto de comandos de controle do usuário +

respostas do computador, constituídos por sinais
(gráficos, acústicos e tácteis)
Estilos de Interação
●
Estilo de interação é um termo
genérico que inclui todas as formas
como os usuários se comunicam ou
interagem com sistemas
computacionais (Preece et al., 1994;
Shneiderman, 1998).
●
Coleção de objetos da interface e
técnicas de interação associadas
(look and feel) que podem ser
escolhidas pelo projetista quando está
desenvolvendo o componente de
interação da interface. How to Set the Look and Feel – Java Tutorials
Estilos de Interação
●
Linguagem de Comandos;
●
Menus;
●
Teclas de Atalho (combinação de teclas)
●
Preenchimento de Formulários;
●
Linguagem Natural;
●
Manipulação direta
●
WIMP (Windows, Icons, Menus and Pointers)
●
Realidade virtual
●
Hipertexto
Linguagem de Comandos
●
Primeiro estilo de interação usado
amplamente na computação.
●
Permitem que o usuário envie
instruções diretamente ao sistema
através de comandos específicos.
●
Vocabulário limitado, sintaxe
formalmente definida.
●
Ex: Ms DOS, Shell do Linux,
Telnet, emuladores de terminal.
Linguagem de Comandos
Vantagens:
●
Acesso direto as funcionalidades do
Desvantagens:
sistema;
●
Maior dificuldade dos iniciantes
●
Requer maior iniciativa do usuário;
em aprenderem a utilizar o
●
Usuários mais experientes
(especializados) conseguem maior sistema;
controle e produtividade do sistema
através de interfaces baseadas em ●
Comandos e sintaxes precisam
comando.
●
Organização: ser relembrados;
– comandos simples
– comandos + parâmetros ●
Altas taxas de erros de digitação.
– comandos + opções + parâmetros
Menus
●
O usuário seleciona as
funções oferecidas pela
aplicação na tela.
●
Relativamente fácil para
usuários pouco treinados -
facilita treinamento.
●
As interfaces orientadas por
menus podem ser textuais ou
gráficas
Menus aspectos de design
Organização:
– Grupos de itens logicamente
semelhantes
– Grupos cobrem todas as
possibilidades
– Sobreposições inexistentes
– Itens ordenados.
Estrutura
– Linear
– Árvore
Menus - técnicas para se agrupar e apresentar opções
●
Menu pull-down (drop-down, menu
suspenso): o menu surge ao se clicar
em seu título, e desaparece assim
que se seleciona uma das opções.
●
Menu pop-up (menu de contexto,
menu local): é exibido ao se clicar
com o botão direito, ou em um
determinada área da tela ou elemento
de interface, e pode permanecer
visível até que o usuário selecione um
de seus itens ou decida fechá-lo.
Teclas de Atalho (combinação de teclas)
●
Agilizam a realização de
funções comumente usadas.
●
Devem ser apresentadas para
o usuário de modo que ele
possa conhecê-las e utilizá-
las.
●
Exemplos:
– F1 – Ajuda, CTRL + C, CTRL +
V, ALT + A, CTRL + A, CTRL + Z.
Teclas de atalho
É importante manter a consistência interna e externa entre as teclas de atalho.
Exemplo positivo: CTRL+V
Exemplo negativo: CTRL+T

Preenchimento de formulários
●
Utilizados principalmente para entrada de dados em Sistemas de
Informação.
●
Este tipo de interface exibe uma tela com campos rotulados simulando
um formulário em papel para solicitar informações específicas no
domínio da aplicação.
●
Os objetivos dessas interfaces são:
– Facilitar a correção de erros de digitação;
– Destacar quais campos são obrigatórios.
– Verificação dos dados digitados (validação, prevenção e tratamento de erros).
Preenchimento de formulários
Linguagem Natural
●
Interfaces onde o usuário pode
interagir com o sistema na sua própria
linguagem – texto ou voz.
●
Neste tipo de interface o maior esforço
(trabalho) é realizado pelo
“computador” que deve interpretar e
gerar sentenças na linguagem natural
do usuário.
– Aspectos de design:
●
qual é o vocabulário permitido?
●
quais são as sentenças permitidas?
(gramática).
Linguagem Natural
Objetivo: permitir que o usuário utilize um
vocabulário e uma gramática conhecidos
para interagir com o sistema.
– Usuário: Como eu faço para imprimir
um documento?
– Sistema: Selecione o menu Arquivo,
item Imprimir.
●
Entrada: expressões escritas ou
faladas.
●
Saída: respostas escritas ou
sintetizadas.
Problemas: ambiguidades, complexidade, ...
da língua limitações (parte de uma gramática
e de um vocabulário).
Manipulação direta
●
Usuário manipula diretamente representações visíveis de objetos. O estado do sistema é
continuamente exibido.
●
Os comandos são ações que o usuário realiza diretamente sobre o objeto simulando uma
analogia entre o cursor e a mão.
●
Mapeamento de operações e conceitos (concretos ou abstratos) do mundo real para
elementos gráficos concretos através de movimentos e operações do mouse.
●
Acrônimo em inglês para Janelas, Ícones, Menus e Apontadores, permite a
interação através de componentes de interação virtuais denominados de
Widgets.
●
Widgets (botões, cx. de seleção, ícones, radio buttons, check box, etc...) também
conhecidos como objetos de interação.
●
O WIMP é a junção de tecnologias de
hardware e software, associado aos
conceitos de janelas e de Widgets que
permite a implementação de vários estilos.
●
Em interfaces WIMP é possível encontrar
os estilos de menus, manipulação direta,
preenchimento de formulário e linguagem
de comandos.
●
WIMP pode ser considerado um estilo ou
um framework de interface apoiado pela
tecnologia de interfaces gráficas (GUI –
Graphical User Interfaces)
Realidade Virtual
●
Estilo de interação
caracterizado por oferecer ao
usuário a sensação de estar
presente num ambiente que
simule certas condições de
trabalho de um domínio com o
uso de tecnologias avançadas.
●
Pode ser imersiva ou não-
imersiva.
Realidade virtual imersiva
●
Aquela na qual o usuário utiliza
dispositivos que lhe dá a
sensação de estar presente no
ambiente virtual.
– Óculos (com visores especiais
para que sua visão esteja
concentrada apenas no mundo
virtual),
– Luvas (que lhe permitam interagir
com os elementos do mundo
virtual).
Realidade virtual não-imersiva
●
É aquela na qual o
usuário utiliza um
“computador” visualizando
imagens tridimensionais e
interage com o ambiente
virtual através de
dispositivos como: mouse,
teclado, joystick.
Hipertexto (Web)
●
Modelo de estruturação que
permite ao usuário fazer
referências cruzadas entre
diferentes partes através de
links (ligações).
●
Este estilo ficou conhecido
também como browsing
(folheamento).
Estilos de Interação – Yvonne Rogers et al
11) Toque.
1) Baseada em comando.
2) WIMP e GUI. 12) Gestos.
3) Multimídia. 13) Háptica.
4) Realidade Virtual. 14) Multimodal.

5) Visualização de Informação. 15) Compartilhável.
6) Web. 16) Tangível.
7) Eletrônicos de consumo e eletrodomésticos. 17) Realidade aumentada e mista.
8) Móvel. 18) Vestível.
9) Fala.
19) Robótica.
10) Caneta.
20) Cérebro-computador.
Referências
●
* Design de interação: além da interação humano-computador. Yvonne
Roggers, Helen Sharp e Jenny Preece. 3ª ed. Porto Alegre: Bookman, 2013.
●
Interação humano-computador. Simone Diniz Junqueira Barbosa e Bruno
Santana da Silva. Rio de Janeiro: Elsevier, 2010.
●
Design e Avaliação de Interfaces Humano-Computador. Heloísa Vieira da Rocha e
Maria Cecília Calani Baranauskas, Instituto de Computação Universidade Estadual
de Campinas, 2003. E-book.
●
E–usabilidade. Simone Bacelar Leal Ferreira e Ricardo Rodrigues Nunes. São
Paulo, LTC, 2008.
●
Aulas do professor Geraldo Ranthum. UTFPR, 2017.
Dúvidas?
Contato:
celso.canteri@ifpr.edu.br

Componentes Visuais Interativos - Widgets - Características
●
Permitem ao usuário interagir com a aplicação
●
Disponíveis em bibliotecas
●
Podem ser agrupados
●
Precisam ser associados às funcionalidades e
aos objetos da aplicação
Componentes Visuais Interativos
Widgets – alguns exemplos
●
Windows (janelas).
●
Ícones.
●
Menus pull-down (suspensos), pop-up.
●
Pointers (cursores).
●
Botões.
●
Sliders (controles deslizantes).
●
Caixas de texto.
●
Quadros de: mensagens, diálogo, edição.
●
Barras de ferramentas (toolbars).
●
Paletas de cores, etc.
Janelas
Janelas primárias
– Janelas de contextualização, com
menus, barras de ferramentas e de
status.
– Nelas são representados os
objetos principais da aplicação.
– Deve-se limitar o número de
janelas simultâneas.
– Deve-se manter uma aparência
consistente entre as diversas
janelas.
Janelas
Janelas secundárias
– Exibição (output) de
mensagens (quadros
de mensagens).
– Inserção (input) de
informações adicionais
(quadros de diálogo,
formulários)
Menus
●
Menus padronizados (Arquivo,
Editar, Exibir, Inserir, Formatar,
Ferramentas, Janelas, Ajuda).
– Tipos de itens de menu:
●
Acionamento de comando.
– Comando imediato (salvar).
– Comando que precisa de mais input - salvar
como…
●
Mudança de estado.
●
Opções independentes – tais como estilos
de fonte: negrito, itálico, regular.
●
Opções interdependentes (Alinhamento:
esquerda, direita, centro, justificado.
Tipos de menus
●
Menus suspenso (pull-down) e pop-
up.
●
Seleção simples: botão de opção
(radio buttons).
●
Seleção múltipla: caixas de seleção
(checkboxes).
●
Barras de ferramentas e paletas
(palettes).
Barras de ferramentas (toolbars)
●
São utilizadas para incluir elementos de
uso frequente: deve-se evitar incluir
controles que não estão disponíveis de
outra forma.
●
Fornecer dicas de contexto (tooltips).
●
Deve-se fornecer ao usuário o controle
de visibilidade (ocultar/exibir) caso haja
múltiplas barras de ferramentas.
●
Orienta-se analisar a adequação de
representações gráficas (ícones e
botões) dos comandos disponibilizados.
Barra de status
●
Exibe mensagens diretas (constantes) sobre:
– Estado atual da aplicação;
– Item de menu selecionado;
– Estado do teclado;
– Idioma;
– Zoom, etc.
Botões de Comando
●
Utilizar de botões de comando para
disparar ações ou para indicar e
alterar estados.
●
Deve-se utilizar descrições breves,
consistentes e claramente distintas
(ex: “Fechar”, “Cancelar”, “Voltar”).
●
Orienta-se seguir as convenções
do ambiente operacional.
●
Manter tamanho e posicionamento
consistentes.
Botões de Comando
●
Acionamento imediato e contextualizado
– Em barras de ferramentas:
●
executa ação associada.
– Em janela secundária:
●
Inicia uma transação dentro da janela ou
●
aplica uma transação e fecha a janela.
Botões de Opção - diretrizes
●
Se o número de opções for muito grande, deve-
se utilizar lista ou uma tabela.
●
Se o texto de um item for grande, ele deve ser
alinhado pelo topo.
●
Deve-se disponibilizar teclas de atalho.
Botões de Opção
●
Botões de opção (radio buttons)
– Utilizado para opções relacionadas e
mutuamente exclusivas.
– Apenas uma opção pode estar
selecionada.
– Pode apresentar um valor padrão (default).
●
Botões de seleção (checkboxes)
– Opções independentes, que podem
estar ligadas ou desligadas.
– Os estados ligado/desligado devem
ser opostos.
Listas
●
São utilizadas para grande número de opções;
●
As opções devem ser ordenadas por um determinado critério;
●
Devem ser exibidas entre 3 e 7 opções;
●
Evitar barras de rolamento horizontais;
●
A lista deve possuir um rótulo (label) para identificação;
●
Teclas de atalho para acesso rápido devem ser disponibilizadas;
●
Operações de arrastar e soltar (drag-and-drop) são desejáveis.
Seleção simples: utilizar combo

box para poupar espaço pode
ser uma boa opção.
Botão de rotação, controles deslizantes e caixas de texto.
Tipos:
●
Botão de rotação (spins) utilizado para uma faixa
limitada de valores sequenciais discretos.
●
Controles deslizantes (sliders) – para valores
contínuos, como o de volume.
●
Caixas de texto (textboxes) – para campos de
texto.
Diretrizes:
– Forneça um rótulo (label) para identificar o elemento.
– Forneça teclas de atalho para acesso rápido.
– Valide a entrada de dados imediatamente, se possível.
Caixas de mensagem
Objetivo: para apresentar mensagens
explicativas, de erro, entre outras.
●
Deve-se:
– Sinalizar o tipo de mensagem: (alerta (!),
pergunta (?), erro (X).
– Utilizar vocabulário simples e claro.
– Relacionar a mensagem à tarefa do usuário.
●
Em mensagens de erro, exiba:
– descrição do erro;
– causa do erro;
– possível solução.
Quadros de Diálogo - painéis
●
Objetivo: entrada de dados
Termos utilizados
– Título significativo, estilo consistent
– Terminologia, fontes, capitalização e justificação consistentes.
●
Organização
– Sequência topo-esquerda a baixo-direita;
– Agrupamento e ênfase;
– Layouts consistentes (proporções, margens, grids, linhas, etc.)
– Indicação de itens habilitados e desabilitados;
– Valores default (padrão);
●
Botões padronizados (OK, Cancela)
●
Prevenção de erros
Quadros de Diálogo e Janelas: erros comuns
●
Desconsiderar o padrão look and feel (aparência) do ambiente de trabalho;
●
Proporções incomuns;
●
Estrutura excessiva;
●
Muitos quadros aninhados, um quadro para cada controle, muitas linhas
divisórias;
●
Pouco ou muito contraste entre áreas e elementos;
●
Densidade espacial: informação demais ou de menos;
●
Layouts arbitrários: controles de tamanhos diferentes, alinhamento e
posicionamento arbitrários, agrupamento inexistente ou inadequado.
Formulários – Orientações Gerais
●
Siga orientações gerais para quadros de
diálogo.
●
Utilize widgets adequados para o tipo de dado.
●
Forneça movimento conveniente do cursor.
●
Marque claramente os campos opcionais e
obrigatórios.
●
Sinalize o término do preenchimento (ex.:
habilitando botão de confirmação).
●
Instruções e mensagens
●
Instruções claras e breves (evite pronomes e
referências).
●
Mensagens explicativas (barra de status ou
quadros de Mensagem).
Instruções e mensagens - utilize:
1) Instruções claras e breves (evite pronomes e referências);
2) Mensagens explicativas (barra de status ou quadros de mensagem).
Tratamento de erros:
●
Faça uso de caixas de texto;
●
Correção de erros para caracteres individuais ou campos inteiros;
●
Prevenção de erros;
●
Mensagens de erro para valores inaceitáveis.
Formulários — erros Comuns
●
Uso inadequado do formato de formulário x planilha;
●
Apresentação de informações internas ao sistema e
irrelevantes para o usuário;
●
Instruções excessivas, com texto redundante;
●
Instruções para o preenchimento dos campos em locais
pouco visíveis (ex. barra de status);
●
Excesso de quadros de mensagens que interferem na
tarefa do usuário; Não indicação de campos obrigatórios.
Mensagens de erro
●
Sempre que possível, o sistema não deve permitir que ocorram erros.
●
Causas de erros:
– Falta de conhecimento.
– Noções incorretas.
– Lapsos.
Mensagens de erro – como redigir
Apresentar ao usuário: O QUE houve, POR QUE aconteceu, COMO
contornar ou resolver
– Especificidade: DADO INVÁLIDO vs. Digite um valor numérico de 1 a 10.
– Formato físico apropriado: CAIXA ALTA PARA ERROS DE POUCA
IMPORTÂNCIA.
– Mensagens eficazes: ERRO Xbc345! vs. Data inválida: o formato correto é
dd/mm/aaaa.
– Orientação construtiva (indicação de como resolver o problema): COMANDO
INVÁLIDO vs. Verifique a sintaxe do comando.
Sistemas de ajuda
Segundo a Engenharia
Semiótica
Help é uma comunicação
designer-usuário privilegiada.
Objetivo: permitir ao usuário
expressar dúvidas específicas
em um contexto de interação.
Principais problemas em Sistemas de Ajuda*
●
Não fornecem informações
específicas desejadas pelos
usuários;
●
Não estão disponíveis quando
necessário;
●
Informação não está correta
ou está Incompleta;
●
Dificuldade de alternar entre
sistema de ajuda e aplicação.
* Professora: Raquel Oliveira Prates 2006
Referências
●
●
Interação humano-computador. Simone Diniz Junqueira
Barbosa e Bruno Santana da Silva. Rio de Janeiro: Elsevier, 2010.
●
Design e Avaliação de Interfaces Humano-Computador. Heloísa
Vieira da Rocha e Maria Cecília Calani Baranauskas, Instituto de
Computação Universidade Estadual de Campinas, 2003. E-book.
●
E–usabilidade. Simone Bacelar Leal Ferreira e Ricardo Rodrigues
Nunes. São Paulo, LTC, 2008.
Dúvidas?
Contato: celso.canteri@ifpr.edu.br
Princípios e Diretrizes para o Design de IHC

Por que utilizar Princípios e Diretrizes de Design?
Porque podem auxiliar no desenvolvimento de um

projeto de IHC ao apontarem soluções para
problemas comuns na prática, antes da finalização
desse projeto.
Princípios / Diretrizes / Padrões
●
Princípios costumam representar objetivos gerais e de
alto nível;
●
Diretrizes são regras gerais comumente observadas na
prática;
●
Padrões, soluções específicas a certos contextos bem
delimitados, envolvendo certos usuários desempenhando
determinadas tarefas.
(Mayhew, 1999).
Deborah J. Mayhew
Diretrizes
●
A literatura de IHC está repleta
de conjuntos de princípios,
diretrizes (guidelines) e
heurísticas*.
* Heurística pode ser considerada um "atalho mental"

usado no pensamento humano para se chegar aos
resultados e questões mais complicadas de modo
rápido e fácil, mesmo que estes sejam incertos ou
incompletos.
Principais conjuntos de princípios e diretrizes
Segundo Barbosa e Silva (2010) “os

conjuntos mais conhecidos de princípios e
diretrizes são:
– Norman (1988);
– Tognazzini (2003);
– Nielsen (1993);
– As regras de ouro de Shneiderman
(1998)”;
– Cooper, (1999), e
– Os Padrões de Design (Tidwell, (2005).
Diretrizes
●
Pesquisadores e profissionais de IHC ressaltam que o uso
de princípios e diretrizes jamais substitui as demais
atividades de análise, design e avaliação.
●
Embora princípios e diretrizes possam ser utilizados como auxílio ao design,
elas não substituem um processo cuidadoso que inclui a busca pelo
entendimento do problema, a elaboração de soluções candidatas e a
avaliação dessas soluções alternativas.
Diretrizes
Alguns conjuntos de diretrizes são
desenvolvidos especificamente para
certos ambientes de trabalho, como
o Windows®, o MacOs® e o
Gnome®, ou para certos
dispositivos, como dispositivos
móveis e televisão digital interativa,
e certos domínios, como educação,
governo eletrônico etc.
Barbosa e Silva (2010)
Diretrizes
●
Segundo Barbosa e Silva (2010):
– “A aplicação adequada de boa parte dos princípios e
diretrizes depende, em alguma medida, do conhecimento do
designer acerca do domínio do problema, dos usuários e
das suas atividades nesse domínio.”
– “Sendo assim, cabe ao designer considerar cuidadosamente
quais diretrizes são adequadas à sua situação de design, e
como elas devem se manifestar na solução de IHC.”
Perfis de usuários
●
No projeto de uma interface
usuário é necessário levar-se
em consideração o perfil dos
seus potenciais usuários.
●
A análise deste perfil é
fundamental para que a
interface (e por consequência,
o software) seja explorada em
todo o seu potencial.
Perfis de usuários
“Todo projeto deve iniciar-se

com um entendimento do perfil Principais perfis:
dos usuários aos quais se – Usuários novatos
destina (background cultural ou – Usuários intermediários
étnico, metas, etc.)”. – Usuários experientes.
[Shneiderman 93].
Usuários novatos
●
Possuem pouco conhecimento
sintático (regras de interação)
e semântico (metas e
objetivos) da aplicação.
●
Necessitam de facilidades para
fazer bom uso da interface
como:
a) simplificação de tarefas.
b) auxílio on-line.
Usuários intermediários
●
Estes usuários possuem razoável
conhecimento semântico da
aplicação, mas relativamente
pouca lembrança de informações
sintáticas para usar a interface.
●
Necessitam que a interface
ofereça:
a) consistência.
b) mensagens informativas.
c) manuais on-line.
Usuários avançados
●
Possuem bom conhecimento
semântico e sintático, o que
costuma levar à "síndrome de
usuários com poder", ou seja,
indivíduos que procuram atalhos e
modos abreviados de interação.
●
As características seguintes tornam
o uso da interface mais produtivo:
a) atalhos.
b) eficiência de resposta.
c) enunciado de tarefas facilitado.
Diretrizes
●
O projeto de interfaces (para usuários) pode lançar mão, além
da experiência do projetista, de orientações gerais, expressa
na forma de diretrizes.
●
Diretrizes são conjuntos de regras para o design de interfaces
que permitem designers ter uma documentação para prevenir
e corrigir erros de usabilidade já conhecidos por experiências
em desenvolvimentos anteriores [Preece, 1994].
●
Não são regras rígidas e, sim, sugestões gerais.
Diretrizes - categorias
●
Shneiderman (1993) sugere três categorias de
diretrizes para serem aplicadas ao projeto de
interfaces :
– Interação Geral.
– Entradas de Dados.
– Exibição de Informações.
Diretrizes - categorias
●
O detalhamento e exemplos de cada categoria
estão nos slides: aulas 10A, 10B e 10C
Diretrizes de Interação Geral
●
Consistência.
●
Feedback significativo.
●
Verificação de qualquer ação destrutiva não-trivial.
●
Fácil reversão da maioria das ações.
●
Redução da quantidade de informações que devem ser
memorizadas.
●
Eficiência de diálogo, movimento e raciocínio.
●
Tratamento de erros.
●
Divisão das funções e organização da geografia da tela.
●
Facilidades de ajuda sensíveis ao contexto.
●
Uso de verbos de ação ou expressões verbais simples
para os comandos.
Diretrizes para Entradas de Dados
●
Minimização do número de ações de entrada exigidas do
usuário.
●
Manutenção da consistência entre: exibição das informações
e entrada de dados.
●
Adaptação da entrada ao usuário.
●
Desativação de comandos não utilizados no contexto atual.
●
Controle do fluxo interativo pelo usuário.
●
Eliminação de entradas que possam ser default.
Diretrizes para Exibição de Informações
●
Exibição de informações que sejam relevantes ao
contexto atual.
●
Diminuição da quantidade de dados.
●
Uso de rótulos (labels) consistentes, abreviações
padronizadas.
●
Manutenção do contexto visual.
●
Mensagens de erro significativas.
●
Uso de caixa alta e caixa baixa, entradas e agrupamento
de textos.
●
Usar janelas ou painéis para dividir diferentes tipos de
informação.
●
Usar displays análogos para representar informações de
modo a serem mais facilmente assimiladas.
●
Consideração da geografia disponível na tela e uso
eficiente da mesma.
Princípio KISS de Design
https://www.interaction-design.org/literature/article/kiss-keep-it-simple-stupid-a-design-principle
Interfaces simples
“A user interface is like a
joke. If you have to
explain it, it’s not that
good”. — Martin Leblanc.
“If you find an element of

your interface requires
instructions, then you need
to redesign it.” — Dan Rubin.
https://uxdesign.cc/a-user-interface-is-like-a-joke-955905e7865b
Referências
●
Interação humano-computador. Simone Diniz Junqueira Barbosa e Bruno Santana da Silva. Rio de
Janeiro: Elsevier, 2010.
●
●
E – usabilidade. Simone Bacelar Leal Ferreira e Ricardo Rodrigues Nunes. São Paulo, LTC, 2008.
●
Design e Avaliação de Interfaces Humano-Computador. Heloísa Vieira da Rocha e Maria Cecília Calani
Baranauskas, Instituto de Computação Universidade Estadual de Campinas, 2003. E-book.
●
UX Collectiv - Curated stories on user experience, usability, and product design (Histórias selecionadas
sobre a experiência do usuário, usabilidade e design de produtos) - https://uxdesign.cc
●
Artigo: “Desenvolvimento do Protótipo ” - Robson Santos - PUC Rio - disponível em:
https://www2.dbd.puc-rio.br/pergamum/tesesabertas/0313143_06_cap_10.pdf
Dúvidas?
Contato:

As diretrizes para interação geral são abrangentes e bastante

abstratas e por isso, são às vezes ignoradas no projeto.
●
Consistência.
●
Feedback significativo.
●
Verificação de qualquer ação destrutiva não-trivial.
●
●
Redução da quantidade de informações que devem ser memorizadas.
●
●
Tratamento de erros.
●
Divisão das funções e organização da geografia da tela.
●
Facilidades de ajuda sensíveis ao contexto.
●
Uso de verbos de ação ou expressões verbais simples para os comandos.
Consistência
Usar formatos consistentes nas

escolhas dos menus, entrada de
comandos, exibição de dados e
uma infinidade de outras funções
que ocorrem em uma interface.
Consistência: mesmo formato de

menus em aplicações diferentes.
Feedback significativo
Proporcionar ao usuário um
feedback visual e auditivo que
garanta o estabelecimento de
uma comunicação bidirecional
(entre o usuário e a interface).
Verificação de qualquer ação destrutiva não-trivial
Caso o usuário solicite a exclusão de

um arquivo ou tente sobrescrevê-lo, ou
ainda se comandar o encerramento de
algum programa sem salvar alterações
efetuadas, comunicá-lo indicando que
substanciais informações podem ser
perdidas. Exibir uma mensagem de
confirmação do tipo “Você tem
certeza...?” (Are you sure ...)
Funções UNDO ou REVERSE

podem evitar muitas horas de
frustração e retrabalho à grande
maioria dos usuários.
Uma possibilidade de reversão
deveria estar disponível em todas
aplicações interativas.
Redução da quantidade de informações que devem ser memorizadas.
Não se deve esperar que o

usuário se lembre de uma lista
de números ou nomes para que
possa reusá-la em uma função
subsequente.
A carga de memória necessária
deve ser minimizada.
Os toques no teclado devem ser

minimizados, a distância que o
mouse deve percorrer entre os
cliques deve ser considerada
quando se projeta o layout de uma
tela, e o usuário raramente deve
encontrar uma situação em que se
pergunte: “E agora, o que isto
significa?”
Tratamento de erros
O sistema deve se
proteger contra erros do
usuário que possam fazer
com que ocorram falhas
ou que provoquem a
interrupção do uso do
sistema.
Divisão das funções e organização da geografia da tela
Menus suspensos (pulldown) tem

a capacidade de organizar
comandos de acordo com o tipo de
ações tendo sua utilização
facilitada ao se inserir
separadores funcionais (______).
O projetista deve se esforçar para
obter uma colocação “coesa” de
comandos e ações.
Facilidades de ajuda sensíveis ao contexto
A necessidade de ajuda integrada

deve ser levada em conta ao longo
do processo de projeto e deve ser
preferencialmente sensível ao
contexto.
Obviamente, isso reduz o tempo
exigido para que o usuário
obtenha ajuda e aumenta a
facilidade de uso da interface
frequentemente chamada de
(friendliness).
Uso de verbos de ação ou expressões verbais simples para os
comandos
O uso de expressões verbais

simples ao invés de um nome de
comando extenso o torna mais
fácil de ser reconhecido e
lembrado.
Nomes longos poderiam acabar
ocupando um espaço
desnecessário em listas de menu
ou na tela.
Facilitam a comunicabilidade.
Referências
●
Aulas do professor Geraldo Ranthum. UTFPR,
2017.
●
Interação humano-computador. Simone Diniz
Junqueira Barbosa e Bruno Santana da Silva. Rio de
Janeiro: Elsevier, 2010.
Dúvidas?
Contato:
Diretrizes de Entrada de Dados

Diretrizes de Entrada de Dados
Grande parte do tempo do usuário na utilização de um sistema é gasta escolhendo comandos,

digitando dados e selecionando opções.
Em muitas aplicações, o teclado permanece como o meio de entrada primário, mas mouse,
digitalizadora, telas touch, sistemas de reconhecimento vocal, etc, estão se tornando
rapidamente alternativas efetivas para entrada de dados.
As principais diretrizes para a entrada de dados são:

– Minimização do número de ações de entrada exigidas do usuário.
– Manutenção da consistência entre: exibição das informações e entrada de dados.
– Adaptação da entrada ao usuário.
– Desativação de comandos não utilizados no contexto atual.
– Controle do fluxo interativo pelo usuário.
– Eliminação de entradas que possam ser padrão (default).
Minimização do número de ações de entrada exigidas do usuário.
●
Acima de tudo, é necessário
reduzir a quantidade de digitação
necessária.
●
Isso pode ser realizado com o uso
do mouse para selecionar dentre
conjuntos de entrada pré-definidos
ou ao utilizar “macros” que
possibilitem que um único toque no
teclado seja transformado em uma
coleção mais complexa de dados
Filtro aplicado ao digitar a
de entrada. letra inicial de um nome.
Manutenção da consistência entre: exibição das
informações e entrada de dados.
As características visuais da
tela (do display), tais como
tamanhos do texto, cor, arranjo,
devem ser transportadas ao
domínio de entrada.
Adaptação da entrada ao usuário
●
Permitir que o usuário crie
comandos "customizados" ou
prescinda de alguns tipos de
mensagens de aviso ou verificação
de ações.
●
A interação dever ser flexível, mas
também sintonizada com o modo
de entrada preferido do usuário.
Desativação de comandos não utilizados no contexto atual
A desativação de comandos
protege o usuário de tentar
alguma ação que possa resultar
em erro.
Controle do fluxo interativo pelo usuário
O usuário deve ser capaz de

"pular" ações desnecessárias,
mudar a ordem de ações
exigidas (quando possível no
contexto de uma aplicação) e
recuperar-se de condições de
erro sem sair do programa.
Eliminação de entradas que possam ser padrão (default)
Não exigir que o usuário digite

(.00) para valores monetários
inteiros, fornecer valores padrão
(default) sempre que possível, e
nunca exigir que o usuário tenha
de digitar informações que possam
ser geradas automaticamente
dentro do programa.
Dúvidas?
Contato:

Se as informações apresentadas pela interface forem incompletas,

ambíguas ou ininteligíveis, a aplicação deixará de satisfazer às
necessidades do usuário.
As informações são exibidas de muitas maneiras diferentes: por meio

de texto, imagens e sons; usando cor, resolução e até mesmo por
omissão.
As principais diretrizes para a exibição de informações são:
– Exibição de informações que sejam relevantes ao contexto atual.
– Diminuição da quantidade de dados.
– Uso de rótulos (labels) consistentes, abreviações padronizadas.
– Manutenção do contexto visual.
– Mensagens de erro significativas.
– Uso de caixa alta e caixa baixa, entradas e agrupamento de textos.
– Usar janelas ou painéis para dividir diferentes tipos de informação.
– Usar displays análogos para representar informações de modo a serem mais
facilmente assimiladas.
– Consideração da geografia disponível na tela e uso eficiente da mesma.
Exibição de informações que sejam relevantes ao contexto atual
●
O usuário não deve ter de
vagar por dados, menus e
gráficos estranhos para obter
informações relevantes para
uma função de sistema
específica.
Diminuição da quantidade de dados
●
Usar um formato de
apresentação que possibilite
uma rápida assimilação das
informações.
●
Gráficos ou diagramas
devem substituir tabelas
volumosas.
Uso de rótulos (labels) consistentes, abreviações padronizadas
●
O significado de um display
deve ser óbvio, sem
necessidade de referência a
alguma fonte de informações
externa.
Manutenção do contexto visual
●
Se os displays gráficos de
computador (computer graphics
displays) forem dimensionados
para cima ou para baixo, a
imagem original deve ser exibida
constantemente (de forma
reduzida no canto do monitor)
para que o usuário entenda a
localização relativa da parte da
imagem que está sendo vista
atualmente.
Mensagens de erro significativas
●
Mensagens e avisos de erro são "más
notícias" enviadas aos usuários de
sistemas interativos quando alguma
coisa sai errada.
●
Um exemplo clássico é uma
mensagem do tipo SEVERE SYSTEM
FAILURE 14A.
●
Em algum lugar, uma explicação para
o erro 14A deve existir; caso contrário
ela não deveria ser mostrada.
Uso de caixa alta e caixa baixa, entradas e agrupamento de textos
●
Grande parte das informações
comunicadas por uma interface
é textual;
●
O layout e a forma do texto
exercem um significativo
impacto sobre a facilidade com
que as informações são
assimiladas pelo usuário.
Usar janelas ou painéis para dividir diferentes tipos de informação
●
Janelas possibilitam que o usuário
“guarde” muitos tipos diferentes
de informação ao seu alcance.
●
No exemplo ao lado a janela
principal exibe o desenho, a
janela secundária o diálogo para
salvar o trabalho realizado.
Usar displays análogos para representar informações de modo a serem
mais facilmente assimiladas.
●
Por exemplo, se um display da pressão
mantido em tanques em uma refinaria
de petróleo tivesse uma representação
numérica, isso geraria pouco impacto.
●
Porém, se fosse usado um display
semelhante a um termômetro,
mudanças verticais de movimento e de
cor poderiam ser utilizadas para indicar
condições de pressão perigosas. Isso
ofereceria ao usuário tanto informações
relativas como absolutas.
Indicação de fonte, fundo e alinhamento selecionados

Consideração da geografia disponível na tela e uso eficiente da mesma
●
Quando múltiplas janelas
tiverem de ser usadas, deve
haver espaço disponível para
mostrar pelo menos uma parte
de cada uma.
●
Além disso, o tamanho da tela
(Engenharia de Sistemas) deve
ser selecionado para acomodar
o tipo de aplicação que será
implementado.
Dúvidas?
Contato:
Princípios e Diretrizes para Design de IHC
Trabalho avaliativo
Exercícios – Diretrizes para desenvolvimento de Interfaces
1) Selecionar 02 exemplos de cada categoria*

dos Princípios e Diretrizes para o Design de
IHC para qualquer aplicativo Windows,
Linux, Mac OS, Android, ou Web, através de
captura de telas (screenshots, printscreen).
2) Assinale (destaque) na figura onde a diretriz

ocorre, a qual categoria* pertence explicando
se ela atende ou não a diretriz selecionada.
3) Informe qual é o site, software ou sistema do

qual a imagem foi capturada.
Categorias*: Interação Geral, Entrada de Dados, Exibição de Informação.

Forma de entrega do trabalho
●
Crie uma apresentação que contenha:
– Um slide de título (capa da
apresentação);
– Um slide com o nome dos estudantes
que criaram a apresentação;
– Um slide para cada diretriz
selecionada.
Referências
●
●
Barbosa e Bruno Santana da Silva. Rio de Janeiro: Elsevier,
2010.
●
Oito Regras de Ouro de Shneiderman – Princípios de Design de
Interação. Blog de Rian Dutra sobre UX, UI e IxD, disponível em:
<http://designr.com.br/oito-regras-de-ouro-de-shneiderman-
principios-de-design-de-interacao/> - acesso em 21/10/2019.
●
Dúvidas?
Contato:
IHC / Engenharia de Software
Modelos de Processo de Software – IHC - Prototipação
Prof. Celso Canteri – slides base do

prof. Dr. Rafael P. Canteri
Prototipação
• Um protótipo é a versão inicial de um sistema de software.
• Utilizado para demonstrar conceitos, experimentar opções
de projeto e descobrir mais sobre o problema e suas
possíveis soluções.
• Possui desenvolvimento rápido e iterativo.
2
Prototipação
• É uma ferramenta que busca simular para o usuário o
funcionamento dos seus requisitos, antes que o produto
final esteja pronto ou em desenvolvimento.
3
Prototipação
• O desenvolvedor pode estar incerto sobre a eficiência
de um algoritmo, adaptação de um sistema operacional
ou sobre a forma da interação homem-máquina.
O protótipo se concentra em fazer

experimentos com os requisitos do usuário
que não estão bem entendidos e envolve
projeto, implementação e teste, mas não de
maneira formal ou completa.
4
Prototipação
Início
Fim
Coleta e
refinamento dos
requisitos
Engenharia Projeto
do produto rápido
Refinamento Construção
do protótipo do protótipo
Avaliação do
protótipo pelo
cliente
5
O Modelo Prototipação Rápida
• Fornece rapidamente uma versão para ser utilizada e avaliada pelo

usuário.
• Não há necessidade de se satisfazer todos os requisitos do produto final desde o
início;
• Facilita o desenvolvimento de produtos onde não se conhece

totalmente o problema.
• O usuário não consegue especificar de uma forma clara os requisitos do sistema;
• Pode ser usado quando o sistema possui muita interação com o usuário
e se deseja avaliar a interface.
6
Estratégias de Prototipação
• As estratégias de prototipação dependem do principal

objetivo em realizar a prototipação.
• Podem ser:
• Baixa Fidelidade x Alta Fidelidade;
• Prototipação Horizontal x Prototipação Vertical;
• Protótipo Descartável x Protótipo Evolutivo.
7
Protótipo de Baixa Fidelidade
• Protótipo simples que não possui muitos detalhes.

• Vantagens:
• Pouco esforço, baixo custo;
• Não é confundido com o produto final.
• Desvantagens:
• Dificuldade de abstração do protótipo
com o produto final.
8
Protótipo de Alta Fidelidade
• Possui um nível rico de detalhes e procura representar da
forma mais realista possível como ficará o produto final.
• Vantagens:
• Usuário tem uma melhor noção de como ficará o software quando
estiver pronto;
• Bem utilizado para refinar requisitos de usabilidade de design.
• Desvantagens:
• Pode levar o usuário a confundir o
protótipo com o software pronto.
9
Prototipação Horizontal
• Baseia-se em um conjunto amplo de funcionalidades,
porém não se preocupa em detalhar as características
individuais de cada uma.
• Utilizada principalmente nas etapas iniciais do projeto.
10
Prototipação Vertical
• Demonstra os requisitos mais específicos de uma ou várias
funcionalidades do sistema.
• Utilizada principalmente em etapas mais adiantadas do
desenvolvimento do sistema, pois pode ajudar mais no
refinamento dos requisitos do usuário.
11
Prototipação Descartável
• O protótipo será descartado após cumprir seu objetivo.
• O protótipo é desenvolvido com ferramentas específicas e
mais rápidas para a construção de protótipos.
12
Prototipação Evolutiva
• Protótipo sofrerá evolução até se tornar o produto final.
• O protótipo deve ser criado com a própria ferramenta de
desenvolvimento de software.
13
Prototipação Evolutiva
• Os protótipos cobrem cada vez mais requisitos, até que se

atinja o produto desejado.
• A prototipagem evolutiva permite que os requisitos sejam
definidos progressivamente, e apresenta alta flexibilidade e
visibilidade para os clientes.
• Requer gestão sofisticada e o desenho deve ser de
excelente qualidade, para que a estrutura do produto não
se degenere ao longo dos protótipos.
14
Ferramentas de Prototipação
15
Ferramentas de Prototipação
16
Prototipação – utilizando aplicativos - tutoriais
●
Curso de Figma app Design - Como
criar um protótipo navegável
●
Tutorial Pencil Project #1 – – https://youtu.be/s9r_fLXbWn4
Introdução ao software
●
Primeiros passos no Figma - Tutorial
– https://youtu.be/49YSNSN0vzE básico para criação de conteúdo
– https://youtu.be/Y1uJT3zk7Rk
Prototipação – utilizando aplicativos - tutoriais
●
Prototipação Tutorial Justinmind
●
Introdução ao software -
– https://youtu.be/s9r_fLXbWn4
Apresentação Justinmind
●
Video – protótipos no Canva
– https://youtu.be/5f6x9SoZNQQ – https://www.youtube.com/watch?v=Bp
FFx3NvP9I
Dúvidas?
• Recapitulando...
19
Referências
Bibliografia Básica:
• PRESSMAN, Roger S. Engenharia de Software. São Paulo, Sp:
Makron Books, 1995-2011. 1056 P. Isbn 85-346-1237-9.
• PRESSMAN, Roger S. Engenharia de Software: Uma
Abordagem Profissional. 7. Ed. Porto Alegre, Rs: Amgh Ed.,
2011. 780 P. Isbn 978-85-63308-33-7.
• SOMMERVILLE, Ian. Engenharia de Software. 9. Ed. São Paulo,
Sp: Pearson, 2011. Xiii, 529 P. Isbn 9788579361081.
20
Referências
Bibliografia Complementar:
• ENGHOLM JÚNIOR, Hélio. Engenharia de Software na Prática. São Paulo,
Sp: Novatec, 2011. 439 P. Isbn 978-85-7522-217-1.
• LARMAN, Craig. Utilizando Uml e Padrões: Uma Introdução a Análise e
ao Projeto Orientados a Objetos e ao Desenvolvimento Iterativo. 3.
Ed. Porto Alegre, Rs: Bookman, 2007-2008. 695 P. Isbn 978-85-60031-52-8.
• WAZLAWICK, Raul Sidnei. Análise e Projeto de Sistemas de Informação
Orientados a Objetos. 2. Ed. Rev. e Atual. Rio de Janeiro, Rj: Elsevier, 2011.
330 P. (Série Sociedade Brasileira de Computação). Isbn 978-85-352-3916-4.
21
Engenharia Cognitiva
Teorias em IHC
●
Teorias em IHC são fundamentais para:
– Fornecer explicações para os fenômenos de interação ocorridos
entre o usuário e o sistema.
– Subsidiar resultados práticos para o design da interface de
usuário.
●
Principais Teorias em IHC:
– Engenharia Cognitiva (Norman, 1986).
– Engenharia Semiótica (de Souza, 1993).
Teorias baseadas na Ciência Cognitiva
●
Na década de 80 as fundamentações
teóricas eram baseadas principalmente na
ciência cognitiva e no objetivo de entender o
sistema humano de processamento de
informações.
●
Abordagens Cognitivas: focam na
compreensão das capacidades e limitações
da mente dos usuários.
●
Estas teorias envolvem aspectos:
– Psicológicos: usuários têm objetivos e intenções
(nível psicológico)
– Físicos: usuários devem realizá-los através da
atuação sobre controles oferecidos pela interface
(nível físico).
Engenharia Cognitiva
●
Proposta por Donald A. Norman (1986)
●
Definição: é uma ciência cognitiva, que
busca aplicar o que se sabe deste tema
no design e construção de artefatos
computacionais.
●
Objetivos:
– Entender as questões envolvidas no uso de
computadores;
– Mostrar como tomar decisões de design mais
acertadas;
– Mostrar os custos e benefícios quando se
privilegia um aspecto em detrimento a outro.
O que é Cognição?
●
É o que acontece em nossos
cérebros quando fazemos nossas
atividades diárias. Envolve:
– Atenção;
– Percepção e reconhecimento;
– Memória;
– Aprendizado;
– Leitura, fala e audição;
– Resolução de problemas,
planejamento, raciocínio, tomada
de decisão.
Fonte: Prof. Emilio Cesar Parmegiani
Meta da Engenharia Cognitiva
Desenvolver um sistema que

permita ao usuário, durante o
processo de interação, criar
um modelo mental
consistente com o modelo
projetado pelo designer
Engenharia Cognitiva - golfos
Teoria da Ação: o usuário durante a interação atravessa 2 golfos*:

– Golfo da Execução: usuário formula sua intenção – há uma diferença
entre as intenções do usuário e as ações permitidas.
●
*1º Golfo: conjunto de esforços para transformar intenções em
ações selecionáveis e executáveis.
– Golfo da Avaliação: usuário avalia os resultados - diferença entre a
representação do sistema e as expectativas do usuário.
●
*2º Golfo: conjunto de esforços existentes para interpretar os
feedbacks.
Engenharia Cognitiva – representação dos golfos
Teoria da Ação
Teoria da Ação
Psi = psicológico
Teoria da Ação
Teoria da Ação
Teoria da Ação
Teoria da Ação
Teoria da Ação
Distância e Ação
●
Segundo o modelo de IHC da Engenharia
Cognitiva, a travessia dos golfos sugere que há
2 distâncias a serem percorridas entre as
etapas mentais e físicas:
– Distância Semântica
– Distância Articulatória
Distância Semântica
●
É a distância entre o que o usuário gostaria de dizer na
linguagem de interface e o significado disponível pelos
elementos da linguagem:
– É possível dizer o que se quer dizer nesta linguagem?
– É possível dizer o que se que deseja de forma concisa?
●
A Distância Semântica avalia a separação entre as metas/tarefas do
usuário e a funcionalidade do sistema a elas associada, isto é, se existe
um comando no modelo de interação cujo significado (resultado ou
efeito) seja aquele pretendido pelo usuário.
– Distância pequena: significa que existe um comando diretamente (ou
quase que) associado à meta;
– Distância grande: indica que o usuário precisa quebrar metas em
submetas e realizar um planejamento de tarefas.
Exemplo de Distância Semântica
Travessia do Golfo de Execução:
1) Formular a intenção: quero trocar a cor do ●
Exemplo: quero trocar a cor do
título para verde.
2) Plano de ação: título deste slide no Libre Office
1) Selecionar o título;
para verde.
2) Selecionar a cor verde;
3) Confirmar;
3) Execução:
1) Selecionar com o mouse ou com o teclado o
título do slide;
2) No painel de propriedades do caractere
clicar no seletor de cor;
3) Selecionar a cor verde.
Exemplo de Distância Semântica
Travessia do Golfo de Avaliação:

1) Percepção: a cor do título mudou.
2) Interpretação:
1) O título do slide ficou com a cor verde.
3) Avaliação:
1) Consegui fazer o que eu queria.
Distância Articulatória
●
A Distância Articulatória avalia o relacionamento entre o
significado (resultado ou efeito) de um comando e a forma da
sequência de ações (o comando) tal como se disponibiliza para
o usuário.
– É a distância entre o significado e a forma dos elementos
da linguagem de interface.
– Quais os obstáculos para expressar nesta linguagem de
interface os significados daquilo que ela pode processar?
Distância Articulatória
Resumo das Distâncias
Engenharia Cognitiva - “resumo”
●
A Engenharia Cognitiva conceitua uma interface pelos seus
“dois lados”: o do sistema e o do ser humano.
●
Estágios de execução e percepção (humanos) mediam entre
representações físicas (do sistema) e psicológicas (do ser
humano).
●
Mecanismos de entrada/saída (do sistema) mediam entre
representações psicológicas e físicas.
Exemplo: Interação com um sistema de agenda → quero
agendar uma reunião na próxima segunda feira.
Exemplo: Golfo da execução → imprimir uma carta
Fonte: Prof. Emilio Cesar Parmegiani

Referências
●
●
Interação humano-computador. Simone Diniz Junqueira Barbosa e Bruno Santana da Silva. Rio
de Janeiro: Elsevier, 2010.
●
Design e Avaliação de Interfaces Humano-Computador. Heloísa Vieira da Rocha e Maria Cecília
Calani Baranauskas, Instituto de Computação Universidade Estadual de Campinas, 2003. E-book.
●
Design de interação: além da interação humano-computador. Yvonne Roggers, Helen Sharp e Jenny
Preece. 3ª ed. Porto Alegre: Bookman, 2013.
●
Slides da aula 05 - Projeto de Interface Com Usuário – prof. Emílio César Parmegiani.
●
Sobre affordances blog disponível em: https://uxdesign.blog.br/affordances-df63a212d413 acesso 23/11/2020,
Curiosidades – quem é Donald Norman? *
Donald A. Norman (25 de dezembro de 1935) é
professor emérito de ciência cognitiva na Universidade
da Califórnia em San Diego e Professor de Ciência da
Computação na Universidade Northwestern, mas seus
trabalhos de hoje são na maioria na engenharia de
usabilidade. Também leciona na Universidade de
Stanford e é um membro do corpo editorial da
Enciclopédia Britannica.
Os primeiros livros de Norman lidam na sua maioria
com usabilidade ou com psicologia cognitiva, mas
Things That Make Us Smart também faz algumas
observações de natureza crítica em relação à nossa
sociedade.
Ele ama produtos que são gostosos de usar, uma
característica que ele atribui a juntar emoção e design,
ou coração e mente. Ele explicou isto em detalhes em
seu livro Emotional Design.
* Fonte: https://pt.wikipedia.org/wiki/Donald_Norman
Quem é Donald Norman?
Design centrado no usuário

Em seu livro "The Design of Everyday Things",
originalmente chamado de "The Psychology of
Everyday Things" Donald A. Norman descreve a
psicologia atrás do que ele chama design 'bom'
e 'ruim' por meio de estudos de caso e propõe
princípios de design. Ele exalta a importância do
design em nosso dia-a-dia, e as consequências
de erros causados por um design ruim.
Em seu livro, Norman usa o termo user-
centered design para descrever o design
baseado nas necessidades do usuário,
deixando de lado o que ele julga secundário,
questões como estética.
Conceito de affordance
A definição de Affordances foi originalmente
proposta pelo psicólogo James Gibson em
1977 para denotar a qualidade de qualquer
A “affordance” pode
objeto que permite ao indivíduo identificar suas
funcionalidades através de seus atributos
mudar de pessoa
(forma, tamanho ou peso) de maneira intuitiva
e sem explicações.
para pessoa?
●
“Maçanetas são para virar. Aberturas são para inserir coisas. Bolas são para jogar
ou quicar. Quando as affordances são aproveitadas, o usuário sabe o que fazer
apenas olhando: nenhuma imagem, etiqueta ou instrução é necessária. Coisas
complexas podem exigir explicação, mas coisas simples não deveriam. Quando as
coisas simples precisam de fotos, rótulos ou instruções, o design falhou ”. Donald
A. Norman, O design do dia a dia, 1988, p. 9
Exercício: Etapas da interação usuário sistema
Golfo de Execução Golfo de Avaliação
1) Formular intenção imediata
1) Perceber estado resultante da
– [Criar uma apresentação com o
ação
personagem] … [Simular a animação]
2) Especificação sequência de ações – [Reconhecer comandos, observar
animação]
– [1. Abrir um arquivo novo, 2. Escolher o
personagem, 3. Associar efeito de 2) Interpretar resultado
animação ]
– [Reconhecer animação desejada]
3) Executar ações
– [1. Clicar no ícone novo documento., 2.
3) Avaliar/decidir se a intenção foi
Clicar no layout desejado, 3. Incluir figura realizada
do personagem, 4. Associar efeito de
movimento em determinada trajetória]
– [Reconhecer etapa cumprida].
Criar duas apresentações

Componentes Visuais Interativos - Widgets - Características
●
Permitem ao usuário interagir com a aplicação
●
Disponíveis em bibliotecas
●
Podem ser agrupados
●
Precisam ser associados às funcionalidades e
aos objetos da aplicação
Componentes Visuais Interativos
Widgets – alguns exemplos
●
Windows (janelas).
●
Ícones.
●
Menus pull-down (suspensos), pop-up.
●
Pointers (cursores).
●
Botões.
●
Sliders (controles deslizantes).
●
Caixas de texto.
●
Quadros de: mensagens, diálogo, edição.
●
Barras de ferramentas (toolbars).
●
Paletas de cores, etc.
Janelas
Janelas primárias
– Janelas de contextualização, com
menus, barras de ferramentas e de
status.
– Nelas são representados os
objetos principais da aplicação.
– Deve-se limitar o número de
janelas simultâneas.
– Deve-se manter uma aparência
consistente entre as diversas
janelas.
Janelas
Janelas secundárias
– Exibição (output) de
mensagens (quadros
de mensagens).
– Inserção (input) de
informações adicionais
(quadros de diálogo,
formulários)
Menus
●
Menus padronizados (Arquivo,
Editar, Exibir, Inserir, Formatar,
Ferramentas, Janelas, Ajuda).
– Tipos de itens de menu:
●
Acionamento de comando.
– Comando imediato (salvar).
– Comando que precisa de mais input - salvar
como…
●
Mudança de estado.
●
Opções independentes – tais como estilos
de fonte: negrito, itálico, regular.
●
Opções interdependentes (Alinhamento:
esquerda, direita, centro, justificado.
Tipos de menus
●
Menus suspenso (pull-down) e pop-
up.
●
Seleção simples: botão de opção
(radio buttons).
●
Seleção múltipla: caixas de seleção
(checkboxes).
●
Barras de ferramentas e paletas
(palettes).
Barras de ferramentas (toolbars)
●
São utilizadas para incluir elementos de
uso frequente: deve-se evitar incluir
controles que não estão disponíveis de
outra forma.
●
Fornecer dicas de contexto (tooltips).
●
Deve-se fornecer ao usuário o controle
de visibilidade (ocultar/exibir) caso haja
múltiplas barras de ferramentas.
●
Orienta-se analisar a adequação de
representações gráficas (ícones e
botões) dos comandos disponibilizados.
Barra de status
●
Exibe mensagens diretas (constantes) sobre:
– Estado atual da aplicação;
– Item de menu selecionado;
– Estado do teclado;
– Idioma;
– Zoom, etc.
Botões de Comando
●
Utilizar de botões de comando para
disparar ações ou para indicar e
alterar estados.
●
Deve-se utilizar descrições breves,
consistentes e claramente distintas
(ex: “Fechar”, “Cancelar”, “Voltar”).
●
Orienta-se seguir as convenções
do ambiente operacional.
●
Manter tamanho e posicionamento
consistentes.
Botões de Comando
●
Acionamento imediato e contextualizado
– Em barras de ferramentas:
●
executa ação associada.
– Em janela secundária:
●
Inicia uma transação dentro da janela ou
●
aplica uma transação e fecha a janela.
Botões de Opção - diretrizes
●
Se o número de opções for muito grande, deve-
se utilizar lista ou uma tabela.
●
Se o texto de um item for grande, ele deve ser
alinhado pelo topo.
●
Deve-se disponibilizar teclas de atalho.
Botões de Opção
●
Botões de opção (radio buttons)
– Utilizado para opções relacionadas e
mutuamente exclusivas.
– Apenas uma opção pode estar
selecionada.
– Pode apresentar um valor padrão (default).
●
Botões de seleção (checkboxes)
– Opções independentes, que podem
estar ligadas ou desligadas.
– Os estados ligado/desligado devem
ser opostos.
Listas
●
São utilizadas para grande número de opções;
●
As opções devem ser ordenadas por um determinado critério;
●
Devem ser exibidas entre 3 e 7 opções;
●
Evitar barras de rolamento horizontais;
●
A lista deve possuir um rótulo (label) para identificação;
●
Teclas de atalho para acesso rápido devem ser disponibilizadas;
●
Operações de arrastar e soltar (drag-and-drop) são desejáveis.
Seleção simples: utilizar combo

box para poupar espaço pode
ser uma boa opção.
Botão de rotação, controles deslizantes e caixas de texto.
Tipos:
●
Botão de rotação (spins) utilizado para uma faixa
limitada de valores sequenciais discretos.
●
Controles deslizantes (sliders) – para valores
contínuos, como o de volume.
●
Caixas de texto (textboxes) – para campos de
texto.
Diretrizes:
– Forneça um rótulo (label) para identificar o elemento.
– Forneça teclas de atalho para acesso rápido.
– Valide a entrada de dados imediatamente, se possível.
Caixas de mensagem
Objetivo: para apresentar mensagens
explicativas, de erro, entre outras.
●
Deve-se:
– Sinalizar o tipo de mensagem: (alerta (!),
pergunta (?), erro (X).
– Utilizar vocabulário simples e claro.
– Relacionar a mensagem à tarefa do usuário.
●
Em mensagens de erro, exiba:
– descrição do erro;
– causa do erro;
– possível solução.
Quadros de Diálogo - painéis
●
Objetivo: entrada de dados
Termos utilizados
– Título significativo, estilo consistent
– Terminologia, fontes, capitalização e justificação consistentes.
●
Organização
– Sequência topo-esquerda a baixo-direita;
– Agrupamento e ênfase;
– Layouts consistentes (proporções, margens, grids, linhas, etc.)
– Indicação de itens habilitados e desabilitados;
– Valores default (padrão);
●
Botões padronizados (OK, Cancela)
●
Prevenção de erros
Quadros de Diálogo e Janelas: erros comuns
●
Desconsiderar o padrão look and feel (aparência) do ambiente de trabalho;
●
Proporções incomuns;
●
Estrutura excessiva;
●
Muitos quadros aninhados, um quadro para cada controle, muitas linhas
divisórias;
●
Pouco ou muito contraste entre áreas e elementos;
●
Densidade espacial: informação demais ou de menos;
●
Layouts arbitrários: controles de tamanhos diferentes, alinhamento e
posicionamento arbitrários, agrupamento inexistente ou inadequado.
●
Siga orientações gerais para quadros de
diálogo.
●
Utilize widgets adequados para o tipo de dado.
●
Forneça movimento conveniente do cursor.
●
Marque claramente os campos opcionais e
obrigatórios.
●
Sinalize o término do preenchimento (ex.:
habilitando botão de confirmação).
●
Instruções e mensagens
●
Instruções claras e breves (evite pronomes e
referências).
●
Mensagens explicativas (barra de status ou
quadros de Mensagem).
Instruções e mensagens - utilize:
1) Instruções claras e breves (evite pronomes e referências);
2) Mensagens explicativas (barra de status ou quadros de mensagem).
Tratamento de erros:
●
Faça uso de caixas de texto;
●
Correção de erros para caracteres individuais ou campos inteiros;
●
Prevenção de erros;
●
Mensagens de erro para valores inaceitáveis.
Formulários — erros Comuns
●
Uso inadequado do formato de formulário x planilha;
●
Apresentação de informações internas ao sistema e
irrelevantes para o usuário;
●
Instruções excessivas, com texto redundante;
●
Instruções para o preenchimento dos campos em locais
pouco visíveis (ex. barra de status);
●
Excesso de quadros de mensagens que interferem na
tarefa do usuário; Não indicação de campos obrigatórios.
Mensagens de erro
●
Sempre que possível, o sistema não deve permitir que ocorram erros.
●
Causas de erros:
– Falta de conhecimento.
– Noções incorretas.
– Lapsos.
Mensagens de erro – como redigir
Apresentar ao usuário: O QUE houve, POR QUE aconteceu, COMO
contornar ou resolver
– Especificidade: DADO INVÁLIDO vs. Digite um valor numérico de 1 a 10.
– Formato físico apropriado: CAIXA ALTA PARA ERROS DE POUCA
IMPORTÂNCIA.
– Mensagens eficazes: ERRO Xbc345! vs. Data inválida: o formato correto é
dd/mm/aaaa.
– Orientação construtiva (indicação de como resolver o problema): COMANDO
INVÁLIDO vs. Verifique a sintaxe do comando.
Sistemas de ajuda
Segundo a Engenharia
Semiótica
Help é uma comunicação
designer-usuário privilegiada.
Objetivo: permitir ao usuário
expressar dúvidas específicas
em um contexto de interação.
Principais problemas em Sistemas de Ajuda*
●
Não fornecem informações
específicas desejadas pelos
usuários;
●
Não estão disponíveis quando
necessário;
●
Informação não está correta
ou está Incompleta;
●
Dificuldade de alternar entre
sistema de ajuda e aplicação.
* Professora: Raquel Oliveira Prates 2006
Referências
●
●
Barbosa e Bruno Santana da Silva. Rio de Janeiro: Elsevier, 2010.
●
●
E–usabilidade. Simone Bacelar Leal Ferreira e Ricardo Rodrigues
Nunes. São Paulo, LTC, 2008.
Dúvidas?
Label / button
Mensagem na tela
●
File → New → Project → Application.
●
Ajustar o tamanho do formulário.
●
Inserir um Tlabel da aba Standard no formulário.
●
Inserir um Tbutton da aba Standard no formulário.
Ajustando os componentes
●
Tbutton – alterar Caption para “Mudar Nome”.
●
Tlabel – alterar Caption para TADS – IHC - IFPR.
– AutoSize = false;
– Opcionais
●
Tamanho e cor da fonte (do Tlabel).
●
Cor do Tlabel.
●
Cor do formulário.
●
Criar o código para para alterar o texto da
TLabel.
– Em Tbutton – digitar o código:
Label1.Caption := ‘Parabens seu primeiro programa
funciona!’;
Form / programa em execução
Observação importante
●
Ao salvar o seu programa nunca o nome do projeto
pode ser igual ao nome da Unit (Unidade de
programação) – mesmo sabendo que a extensão
deles será diferente.
– Você não conseguirá mais compilar o programa se
você cometer essa “particularidade”.
Referências
●
Lazarus IDE - https://www.lazarus-ide.org
●
Documentação Lazarus IDE:
https://wiki.freepascal.org/Lazarus_Documentation
●
Programação Visual para Linux - Kylix 1.0 – William
Braga, Book Express, Rio de Janeiro.
Dúvidas?
Label / button
Primeiro programa
Vamos ocultar a mensagem do primeiro

programa e fazer que ela seja exibida apenas
após clicar o botão na interface.
Incluir no TForm (procedure TForm1.formcreate…) os

códigos:
TLabel1.visible = false;
Tbutton – código TLabel1.visible = true
Referências
●
●
●
Dúvidas?
Label / button
Relógio digital
●
File → New → Project → Application.
●
Ajuste o tamanho do formulário.
●
Insera um label da aba Standard no formulário.
●
Insera um timer da aba System no formulário.
●
Ajuste o nome do form: “Hora certa”.
●
Escolha a cor do form
●
Altere o Timer Interval para 1000
●
Escolha a cor do Label
●
Altere a fonte: tamanho e cor (do label)
●
Escreva o código abaixo para o timer:
– Label1.Caption := TimeToStr(time);
Form / programa em execução
Referências
●
●
●
Dúvidas?
Figura / label / radio button

Criando um semáforo
●
Selecionar: File → New →
Project → Application.
●
●
Inserir três TRadioButtons da
aba Standard.
●
Inserir três TLabels da aba
Standard.
●
Inserir três TImages da aba
Additional.
Altere as propriedades conforme a tabela abaixo:
Objeto Propriedade Valor
RadioButton1 Caption Sinal Verde
RadioButton2 Caption Sinal Amarelo
RadioButton3 Caption Sinal Vermelho
Image 1, 2 e 3 Stretch True
Label1 Caption Pode prosseguir
Label2 Caption Atenção!
Label3 Caption Parada Obrigatória
Label 1, 2 e 3 AutoSize False
Alterando propriedades
Clicar em cada Timage e

selecionar picture para
escolher a imagem
correta para cada espaço,
conforme a figura ao lado.
Criando o código para o 1º botão
Image1.Visible:=true;
Label1.Visible:=true;
Image2.Visible:=false;
Label2.Visible:=false;
Botão 02
Begin
end;
Botão 03
Begin
End;
Iniciar sem mensagem e sem imagem
Efetuar um duplo clique no
formulário e digitar o código
ao lado entre o begin e end
da procedure
“TForm1.FormCreate(Sender: Image3.Visible:=false;
TObject); ” Label3.Visible:=false;
IHC – criando um botão para encerrar o programa
●
Insira um Tbutton da
guia Standard.
●
Altere a propriedade
Caption dele para &Sair
●
Insira apenas o código:
close; na procedure
ButtonClick deste botão.
Referências
●
●
●
Dúvidas?
Figura / label / radio button / expressões

condicionais
Criando um jogo: 5 ganha
●
Inicir um projeto em: File → New →
Project → Application.
●
●
Inserir dois Buttons da aba Standard.
●
Inserir três TLabels da aba Standard.
●
Inserir uma TImage da aba Additional.
●
Inserir um Tlabel da aba Standard.
Altere as propriedades conforme a tabela abaixo:
Componente (objeto) Propriedade Valor
Button1 Caption &Jogar
Button2 Caption Sai&r
Label 1, 2 e 3 Caption Apagar (remover o conteúdo)

AutoSize False
Width 90
Height 90
Font Altere cor e tamanho
Aligment TaCenter
Label 1, 2 e 3 Color clSkyBlue
Image 1 Stretch True
Image 1 Picture Selecionar a imagem em seu computador
Image 1 Visible False
Label4 Caption Parabéns você ganhou!
Form1 Caption 5 ganha

Criando o código
●
No botão Sai&r – em seu código,
digitar o comando: Close;
●
No formulário, para inicialmente
ocultar a figura e mensagem.
Digitar os comandos:
– Image1.Visible:= false;
– Label4.visible:= false;
Código para o botão jogar
Begin
Image1.Visible:= false;
label4.visible:= false;
label1.caption := inttostr(random(10));
if ( Label1.Caption = '5') or (Label2.Caption = '5') or (Label3.Caption = '5')
then begin
Beep
End;
End;
end.
Sistema funcionando com número 5 sorteado
Referências
●
●
●
Dúvidas?
Inputbox / Variáveis / expressões condicionais

Alterando o jogo criado
●
Vamos alterar o jogo criado no
exercício anterior para que seja exibida
uma mensagem solicitando que o
utilizador escolha um número de 0 a
10.
●
Para vencer no jogo um dos três
números sorteados deve ser igual ao
informado pelo utilizador.
Alterando o código do botão jogar
procedure TForm1.Button1Click(Sender: TObject);
var
vsorteio: string; Apenas acrescentar as linhas destacadas em
begin amarelo nos locais corretos do código. Na
Image1.Visible:= false; condicional if alterar o 5 para vsorteio.
Label4.visible:= false;
vsorteio := InputBox('Escolher número para sorteio', 'Digite um número de 0 a 10',' ');
if ( Label1.Caption = vsorteio) or (Label2.Caption = vsorteio) or (Label3.Caption = vsorteio
then begin
StaticText1.Visible:=true;
beep
Sistema funcionando
Aplicando diretrizes de IHC
E se o usuário não ganhou…
Fornecer feedback consistente para o usuário: vamos lembrar o
número escolhido e exibir uma mensagem informando que ele
não acertou.
Alterar o código do botão jogar conforme as linhas destacadas
no código ao lado após o primeiro end (logo após beep):
Label4.visible:=true;
beep
end; <- tem de apagar esse um ponto e vírgula e acrescentar as linhas abaixo
else
begin
ShowMessage('Você escolheu ' + vsorteio + ' mas infelizmente você não acertou!');
end;
Referências
●
●
●
Dúvidas?
Calculadora ?
Programa de cálculo simples
●
File → New → Project →
Application.
●
Ajustar o tamanho do
formulário.
●
Inserir dois componentes
Labels da aba Standard.
●
Inserir dois componentes
Editbox da aba Standard.
Programa de cálculo simples
●
Inserir um componente
Groupbox da aba Standard.
●
Inserir quatro Radiobutton
dentro do Groupbox.
●
Fora do Groupbox crie mais
um label e dois buttons da
aba Standard.
Ajustando as propriedades dos componentes
Calculadora
Form1 Caption
básica
Primeiro
Label1 Caption
valor
Edit1 Text Vazio (apagar)
Segundo
Label2 Caption
valor
Edit2 Text Vazio (apagar)
Groupbox Caption Operador
Ajustando as propriedades dos componentes
RadioButton1 Caption Soma

RadioButton2 Caption Subtração
RadioButton3 Caption Multiplicação
RadioButton4 Caption Divisão
Label3 Caption Resultado
Label3 Autosize Falso
Button1 Caption &Calcular
Button2 Caption Sai&r
Códigos dos botões
●
Efetuar duplo click no botão Sai&r e digitar:
– Application.terminate;
●
Efetuar duplo click no botão &Calcular e digitar:
– Antes da palavra begin
●
Var
●
Vvalor1, Vvalor2: Double;
– Após begin
●
Vvalor1 := StrToFloat(Edit1.text);
●
Vvalor2 := StrToFloat(Edit2.text);
(continua na próxima página)
Códigos dos botões
– If RadioButton1.checked = true Then
●
Label3.Caption := FloatToStr(Vvalor1 + Vvalor2);
●
Label3.Caption := FloatToStr(Vvalor1 – Vvalor2);
●
Label3.Caption := FloatToStr(Vvalor1 * Vvalor2);
●
Label3.Caption := FloatToStr(Vvalor1 / Vvalor2);
Testando o programa
Referências
●
●
●
Dúvidas?
Cronômetro
Programa para criar um cronômetro
●
Feche o projeto anterior.
●
Crie um novo projeto.
●
Coloque um componente timer.
– Altere sua propriedade Intervalo
para 1.
– Altere sua propriedade enabled
para false.
– Crie uma variável global:
var
vHoraComeca: TDateTime;
Inserindo os componentes
●
Altere a propriedade Caption do form1
para Cronômetro.
●
Insira três componentes button, e altere
suas propriedades Caption como segue:
1) &Iniciar
2) &Parar
3) Sai&r
●
Coloque um componente Edit e altere
suas propriedades:
– Text – para vazio (apague).
– Font – tamanho 72.
Código para o primeiro botão - &Iniciar
Horacomeca := time;
Button2.Enabled:=true;
Button1.Enabled:=false;
Timer1.Enabled:=true;
Código para o primeiro botão - &Parar / Sai&r
Botão &Iniciar
Button1.Enabled:=true; Botão sai&r
Button2.Enabled:=false; Application.Terminate;
Timer1.Enabled:=false;
Código para o componente timer
Edit1.text:=FormatDateTime('ss:zzz',time - vHoraComeca);
Execute o seu programa
Referências
●
●
●
Programação Visual para Linux - Kylix 1.0 –
William Braga, Book Express, Rio de Janeiro.
Dúvidas?

Ilovepdf Merged

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ilovepdf Merged

Enviado por

Direitos autorais:

Formatos disponíveis

IHC Interação Humano Computador

Acrônimos: IHC, HCI, CHI – do inglês “Human-Computer Interaction”.

A Interação Humano-Computador (IHC) é uma disciplina que diz

Autor: Prof. Geraldo Ranthum

Fonte: Rogers et al. (2011) - alteração

Esse campo de estudo originou-se entre 1970 e

Segundo o Dicionário Brasileiro

O vídeo “A Day Made of Glass” foi publicado no

“Por mais de 160 anos, a Corning tem

Site da empresa: física óptica para desenvolver

https://www.corning.com/cala/pt.html produtos que criam novas indústrias e

Fonte: site oficial da empresa

A day made of glass 2

Com a evolução tecnológica e diante da necessidade

A pesquisa em IHC no Brasil tende a focar cada vez mais na

IHC significa Interação Homem-Computador –

O projeto de interação determina o sucesso ou fracasso

Interface e Estilos de Interação

“O sistema ideal deve esconder a tecnologia de

“O objetivo é deixar as pessoas realizarem suas

“Deve-se poder empregar a ferramenta na tarefa, e

“E essas ferramentas deveriam seguir os três

É o conjunto de comandos de controle do usuário +

Exemplo positivo: CTRL+V

Exemplo negativo: CTRL+T

3) Multimídia. 13) Háptica.

4) Realidade Virtual. 14) Multimodal.

Interface e Estilos de Interação

Seleção simples: utilizar combo

Princípios e Diretrizes para o Design de IHC

Porque podem auxiliar no desenvolvimento de um

* Heurística pode ser considerada um "atalho mental"

Segundo Barbosa e Silva (2010) “os

“Todo projeto deve iniciar-se

“If you find an element of

Diretrizes de Interação Geral

As diretrizes para interação geral são abrangentes e bastante

Usar formatos consistentes nas

Consistência: mesmo formato de

Caso o usuário solicite a exclusão de

Funções UNDO ou REVERSE

Não se deve esperar que o

Os toques no teclado devem ser

Menus suspensos (pulldown) tem

A necessidade de ajuda integrada

O uso de expressões verbais

Diretrizes de Entrada de Dados

Grande parte do tempo do usuário na utilização de um sistema é gasta escolhendo comandos,

As principais diretrizes para a entrada de dados são:

O usuário deve ser capaz de

Não exigir que o usuário digite

Diretrizes para Exibição de Informações

Se as informações apresentadas pela interface forem incompletas,

As informações são exibidas de muitas maneiras diferentes: por meio

Indicação de fonte, fundo e alinhamento selecionados

Princípios e Diretrizes para Design de IHC

1) Selecionar 02 exemplos de cada categoria*

2) Assinale (destaque) na figura onde a diretriz

3) Informe qual é o site, software ou sistema do

Categorias*: Interação Geral, Entrada de Dados, Exibição de Informação.

Modelos de Processo de Software – IHC - Prototipação

Prof. Celso Canteri – slides base do

O protótipo se concentra em fazer

• Fornece rapidamente uma versão para ser utilizada e avaliada pelo