Introdução a IHC

UNIVERSIDADE FEDERAL RURAL DE
PERNAMBUCO
CENTRO DE EDUCAÇÃO A DISTÂNCIA
LICENCIATURA EM COMPUTAÇÃO

INTERFACE HOMEM-MAQUINA
PRIMEIRO ENCONTRO PRESENCIAL

Tutor: Rodrigo Lins Rodrigues
rodrigomuribec@hotmail.com
2011.2

Interface Homem-Máquina
48/2

Visão geral sobre a disciplina…

EAD/UFRPE - LC - Encontro Presencial - 12.11.11 2011.2

Agenda
3

Objetivos da disciplina
 Conteúdo

 Metodologia

 Avaliações

 Datas importantes

 Outras informações pertinentes


Quais os objetivos?
48/4

 A objetivo principal da disciplina de Interface
Homem-Máquina é apresentar uma visão
geral das bases teóricas, modelos e métodos
para o projeto e a avaliação de interfaces
homem-máquina.

 (Interface Homem-Máquina) = (Interação
Humano-Computador) = (Design da
Interação);


Quais os objetivos específicos?
48/5

 Possibilitar o desenvolvimento de protótipos
de interfaces para aplicações computacionais;
 Discutir metas e métodos para a avaliação de
interfaces homem-máquina;
 Discutir aspectos relativos ao projeto e
avaliação da documentação de produtos;
 Apresentar paradigmas de interação homem-
máquina emergentes


Qual o conteúdo programático
planejado?
48/6

 Parte I – Fundamentos e conceitos sobre IHC
 Interfaces
 Cognição visual e níveis cognitivos
 Ergonomia e usabilidade
 Parte II – Design e linguagem visual
 Princípios gerais de design de interface
 Ícones e textos
 Estrutura de interface e layout
 Imagens e função de comunicação
 Parte III – Design e metodologia
 Discussão sobre o projeto de interface


Quais os tipos de atividades de
avaliação?
48/7

 Será constituído de dois tipos:
 Atividades virtuais
 Participaçãonos fóruns e chats
 Realização das atividades virtuais

 Atividades presenciais
 Apresentação de seminários (1AVA)
 Realização e apresentação de projetos (2AVA)

 Avaliação tradicional (3AVA)


Como será a avaliação?
48/8

 Adotaremos o procedimento padrão de
avaliação da Instituição, isto é….
a nota de avaliação corresponde a média dada
pelas notas obtidas com as atividades virtuais e a
nota da avaliação presencial
 A média das atividades virtuais corresponderá a
30% da nota final e a média das avaliações
presenciais corresponderá a 70% .


Como serão as avaliações?
48/9

 Primeira avaliação (1AVA): corresponderá
 apresentação de um seminário em equipe
considerando algum dos temas proposto para a
disciplina.

 Segunda avaliação (2AVA): corresponderá
a
 apresentação e entrega de um projeto de
interface de software.


Seminário da Disciplina
48/10

 A 1AVA consistirá da elaboração e
apresentação de um seminário com tema
relacionado ao conteúdo da disciplina e
previamente estabelecido;

 O seminário será realizado em EQUIPE;

 Não poderá haver duas equipes com um
mesmo tema;
EAD/UFRPE - LC - PLANO DE ENSINO 2011.2

Temas sugeridos para o Seminário
48/11

 Pode ser um dos seguintes:
 Ergonomia do software *
 Engenharia Cognitiva
 Engenharia Semiótica
 Estilos ou modelos de interação homem-
computador
 Princípios de design para o software educacional
*
 Processo de design de interface *
 Design de interface para a web *
 Design de interface para software multi-usuário *
 Acessibilidade *

Entregas referente ao Seminário
48/12

 Deverão ser entregues para avaliação (postado no
ambiente):
 1) Apresentação do seminário (slides)
 2) Resumo do conteúdo apresentado no seminário

 Não esqueçam de nomear o arquivo segundo o padrão:
 Nome do Pólo-Tema do Seminário.zip, exemplo CAUCAIA-
Modelos de Interação.zip Apresentação

É de extrema importância a postagem desses
documentos, pois eles representam a evidência de que
vocês realizaram a 1AVA.

Sobre o Resumo
48/13

 O resumo a ser elaborado deve:
 Ter no máximo 2 laudas;
 Deve incluir os aspectos mais importantes do
tema
 E duas perguntas relevantes sobre o tema
apresentado a serem respondidas pelos colegas
(incluir no final do resumo) Esse resumo
deve ser
distribuído na
turma.


O Projeto
Considerações Gerais
48/14

 A segunda avaliação (2AVA) corresponderá
a realização de um projeto.

 O projeto será realizado em equipe;

 O tamanho da equipe será de 3 participantes;


O Projeto
48/15

 A EQUIPE poderá selecionar uma das
direções possiveis para o projeto:
 1) O projeto poderá corresponder uma avaliação
de um software educacional em termos de
interface
 2) O projeto poderá corresponder em uma
proposta de projeto de interface para um
software específico também proposto pela
equipe
A seguir explicaremos cada uma dessas direções….


O Projeto
Direção 1: Avaliação de um Software
48/16

 A equipe deverá selecionar um software,
preferencialmente e avaliá-lo em termos de
usabilidade e ergonomia;
 A escolha do software é livre, contudo é
necessário submetê-lo para avaliação pela equipe
de professores da disciplina;
 A avaliação da interface do software deverá
atender alguns critérios ainda a definir na
disciplina (aguarde maiores detalhes sobre esse
ponto).
 O resultado da análise deverá ser apresentado
tanto em forma de apresentação quanto em
relatório.

O Projeto
Direção 2: Desenhando uma proposta de
48/17 interface
 A equipe deverá propor o projeto (desenho) de
interface para um software proposto pela mesma;

 O software proposto pode ser reaproveitado de
alguma outra disciplina já cursada pela equipe
(exemplo: Gerência de Projetos e Jogos
Educacionais);

 Deverá ser entregue o desenho da interface em
forma de documento segundo o guia a ser
disponibilizado na disciplina.

Entregas do Projeto
48/18

 Deverão ser entregues para avaliação
(postado no ambiente):

 1) Apresentação
 2) Relatório ou desenho da interface


Algumas datas importantes….
48/19


Entendendo um pouco sobre a área de IHC

O que é IHC

 Início: Segunda Guerra, reafirma-se dec 60;

 Sinônimos: fatores humanos (UK), ergonomia (US),
Interação Homem – Máquina;

 O desempenho do usuário no contexto de qualquer
sistema: computacional, mecânico, ou manual;

 Homem + Computador + Interação ;

O que é IHC?

 Interação Humano-Computador (IHC): área de estudo que está na
interseção das ciências da computação e informação e ciências
sociais e comportamentais e envolve todos os aspectos
relacionados com a interação entre usuários e sistemas.

 A interação humano-computador estuda tanto os fatores
computacionais quanto os fatores humanos e surgiu como um
campo autônomo de estudo na interseção das áreas de:
 computação gráfica,
 sistemas operacionais,
 fatores humanos,
 ergonomia,
 engenharia industrial,
 psicologia cognitiva...

O que é IHC
48/23

Interação

Sistema Usuário


Disciplinas associadas à IHC

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
Filosofia
de
Sociologia Design de IHC

Conceitos gerais de IHC

Problemas Comuns no Desenvolvimento de
Sistemas
 foco no sistema (versus foco no usuário);
 desprezo pela interface;
 impacto da introdução de novas tecnologias
desprezado;
 base teórica dos desenvolvedores fraca ou inexistente;
 design de software desconsiderado;
 processo de desenvolvimento inadequado;
 ferramentas inadequadas;
 interação usuário-sistema não avaliada;

Profissões

 Designers de Informação
 Pessoal envolvido no desenho de todos os aspectos
interativos em um produto, não somente o design gráfico e
de interface.
 Engenheiros de Usabilidade
 Pessoal que avaliam produtos utilizando métodos e
princípios de usabilidade.
 Webdesigners
 Desenvolvem e criam o design visual de websites – os
leiautes, por exemplo.
 Arquitetos da Informação
 Têm ideias de como planejar e estruturar produtos
interativos.

Interface

 O conceito de interface é utilizado em diferentes áreas
da ciência da computação e é importante no estudo da
interação homem-máquina, no projeto de dispositivos
de hardware, na especificação de linguagens de
programação e também em projetos de
desenvolvimento de software.

 A interface existente entre um computador e um
humano é conhecida como interface do usuário.

 As interfaces utilizadas para conectar componentes de
hardware são chamadas de interfaces físicas.

xxxxxxx
48/31
 zxxxxxx


Usabilidade

 Termo usado para definir a facilidade com que as
pessoas podem empregar uma ferramenta ou objeto a
fim de realizar uma tarefa específica e importante;

 Em IHC, usabilidade normalmente se refere à
simplicidade e facilidade com que uma interface, um
programa de computador ou um website pode ser
utilizado.

 O termo também é utilizado em contexto de produtos
como aparelhos eletrônicos, em áreas da
comunicação e produtos de transferência de
conhecimento, como manuais, documentos e ajudas
online.

Questões importantes sobre navegação
e usabilidade
 Questões gerais:
 Onde estou?
 Para onde posso ir?

 Como eu cheguei aqui?

 Como posso voltar para o lugar de
onde sai?

Por que estudar IHC ?

Problema de Usabilidade

 ...qualquer coisa que interfira com a
habilidade do usuário em completar suas
tarefas de forma efetiva e eficiente. (Karat,
1992)

 ...
um aspecto do sistema e/ou da demanda
sobre o usuário que torna o sistema
desagradável, ineficiente, oneroso ou
impossível de permitir a realização dos
objetivos do usuário em uma situação típica
de uso. (Lavery et al, 1997)

O Processo de Engenharia de
Usabilidade

Indicações de leitura
48/37


Qualidades ergonômicas de uma
interface
 As qualidades ergonômicas são tanto da interface quanto do
software em si;

 Então a pergunta é:
por onde começar um projeto que seja realmente
ergonômico?
 Pela interface, pois é através dela que um programador vai
entender as suas necessidades com relação a um produto.
 Mais à frente, veremos questões metodológicas, mas aqui
colocaremos oito critérios
 veremos questões metodológicas, mas aqui colocaremos
oito critérios gerais para o sucesso de uma interface com
base em estudos de Scapain e Bastien do INRIA.

A CONDUÇÃO (1)
48/40

 Ele apresenta uma série de mensagens úteis
para que o usuário sinta-se seguro em
interagir;
 Estas mensagens aparecem em forma de
alertas, rótulos, pequenos textos que ocorrem
no momento e local exatos


CARGA DE TRABALHO (2)
48/41

 Um software ergonômico permite fácil
aprendizado porque sua interface e estrutura
permitem que o usuário aprenda rapidamente
como utilizá-lo, diminuindo a quantidade de
falhas na interação e sobrecarga cognitiva;
 Quanto maior a carga de trabalho cognitivo
do usuário, maior a possibilidade de
cometer erros.


CONTROLE EXPLÍCITO (3)
48/42

 Este critério diz que o software deve ser
“obediente” e que o usuário deve ter total
controle sobre ele;
 É necessário que o usuário consiga decidir e
concretizar as ações no decorrer da interação.


ADAPTABILIDADE (4)
48/43

 É a característica de
poder fazer as mesmas
tarefas de diferentes
formas;
 Quando um software
permite isso, está
possibilitando aos
usuários de diferentes
níveis de experiência a
“customização” ou
“personalização” da
interface.

GESTÃO DE ERROS (5)
48/44

 Prever alertas aos usuários, quando estes
entram com dados inadequados.

Verificação ortográfica
Digite apenas do Microsoft word
letras no login


HOMOGENEIDADE/COERÊNCIA (6)
48/45

 Interfaces devem apresentar determinado
padrão estético;
 O usuário não pode ter a impressão de que,
de uma hora para outra, tudo mudou e
“parece” que está em outro software.


SIGNIFICADO DOS CÓDIGOS (7)
48/46

 Quanto mais universal for o significado das
figuras utilizadas para formar a interface, mais
abrangente será o público a ser atingido;


COMPATIBILIDADE (8)
48/47

 Significa que o que vemos na tela está
compatível ou correspondente com o que
sairá na impressora;


Elementos da comunicação visual
48/49

 A linguagem visual é fortemente definida pelo
uso da cor em diversas aplicações;
 Um dos cuidados que devemos ter é com o
significado cultural, que é muito diverso;
 É importante pesquisar o significado da cor
para o usuário;
 O uso do recurso da cor na interface como
forma meramente decorativa é
desaconselhado.

Elementos da comunicação visual
48/50

 É importante também observar a relação das
cores entre si;


Ícones e textos
48/51

 Todos nós utilizamos ícones quando
interagimos com um software de interface
gráfica;
 A classificação é feita pela área da semiótica,
que se dedica ao estudo dos signos;


Ícones e textos
48/52

 Veja o que os ícones podem representar ,
estando ou não associados a textos:


Fontes
48/53

 Existem fontes desenhadas em estilos
diversos, mas uma característica que é
comum a um grande grupo de fontes é a
presença de serifa;
 É uma terminação saliente no desenho da
fonte, cujo uso normalmente é recomendado
para documentos impressos,


Estrutura da Interface
48/54

 O desenho de uma interface sempre está
influenciado fortemente pelo dispositivo onde
aparece;

 No caso dos monitores de computador,
sempre estamos lidando com uma estrutura
retangular;

 Em interfaces retangular olhamos de cima
para baixo e da esquerda para a direita
porque na nossa cultura é assim que lemos
os textos.

48/55

 No canto superior direito, onde a varredura
visual não se detém muito, é o local propício
para informação e janelas menos utilizadas
durante a interação, como menus de ajuda,
por exemplo.


48/56

 O lado esquerdo tem grande quantidade de
informação e se aplica para menus.


48/57

 A parte inferior direita é o campo de
fechamento visual, importante para localizar
ícones de navegação ou mensagens relativas
à passagem de uma página para outra.


Estrutura da Interface (Camadas)
48/58

 Além da organização dos
elementos visuais, no sentido
bidimensional, temos que
perceber a interface como
camadas de imagens;

 Temos a percepção da
sobreposição e dos elementos
que possuem maior grau de
importância, como sendo o que
está “na frente”;


Imagens e função de comunicação na
interface
48/59

 Na interface, as imagens adquirem funções
de comunicação que são úteis para
orientar o usuário;

 Existem muitas funções para as imagens,
mas podemos enumerar quatro que quase
sempre serão percebidas: Ilustrativa,
taxonômica, sinalização e operativa.


interface
48/60

Função Ilustrativa: Esta é uma das funções mais
usadas. Imagens com esta função são representações
gráficas de ferramentas, processos, funções,
esquemas ou situações que servem para chamar a
atenção ou designar algum conceito;


interface
48/61

Função taxonômica: Para definir como os
elementos de uma interface (textos, ícones, animações,
barras de menu, entre outros) são organizados;


interface
48/62

Função de sinalização: As imagens com este
atributo são extremamente importantes porque sinalizam,
isto é, orientam o usuário na tomada de decisões durante
a interação.


interface
48/63

Função operativa: Para operar qualquer aparelho,
necessitamos de “botões” que nos permitam interagir .
 Na interface, isso acontece por diversos grupos de

botões e áreas onde podemos escrever;
 Os mais comuns são os botões de caixa de

ferramentas, setas de navegação e menus com
palavras ou ícones explicativos;


Layout
48/64

 Proximidade e alinhamento
 Imagens que pertencem a um mesmo grupo
devem estar próximas;
 O alinhamento também permite estabelecer uma
hierarquia que vai orientar a ordem de leitura na
interface e, posteriormente, as ações na
interação


Layout
48/65
 Equilíbrio, proporção e simetria
 As imagens que compõem a interface devem
ter uma relação de harmonia;
 Esta relação pode se dar de forma dinâmica ou
estática: esta é quando temos pesos iguais em
dois lados ou todos os elementos centralizados.


Layout
48/66
 Cores e contrastes
 As cores e áreas claras e escuras orientam a
atenção do usuário para determinadas partes da
interface;
 sendo úteis principalmente para dar ênfase,
orientar a leitura e dar importância a um assunto


Layout
48/67
 Consistência e identidade
 Uma interface pode ser composta por diversas
partes ou páginas que devem ter consistência ou
identidade visual, a fim de permitir que as
visualizemos como sendo da mesma “família”.


Layout
48/68
 Concisão

 O design de uma interface pode estimular o uso
indiscriminado de imagens;

 Para comunicar-se bem, precisamos usar as palavras
certas no momento certo;

 Na interface também queremos nos comunicar bem,
usando as imagens mais adequadas nos lugares e
ordem certos para o melhor aprendizado.


Layout
48/69
 Visibilidade e Legibilidade

 Nem tudo que é visível é legível;

 Se você está a 5 metros de uma letra de meio
centímetro de altura, ela vai ser visível, mas
 certamente será ilegível, porque você não consegue
saber de qual letra se trata;

 Estes princípios são gerais, mas em todo projeto
devem ser observados enquanto requisitos básicos
de qualidade de design, sendo analisados nas
interfaces.


Projeto da Interface
48/71

 Ao projetar uma interface devemos entender o
perfil do usuário;
 Um perfil deve conter mais do que a idade e
sexo;
 Devemos investigar um pouco dos hábitos,
costumes, e características de grupo, para
podermos trazer para a interface as situações
que tenham um significado relevante;


Projeto da Interface
48/72

 Uma das primeiras decisões a serem tomadas
é se vamos usar uma abordagem de design
participativo ou não;
 Inclui um ou mais usuários em determinadas
fases do projeto;
 Elimina retrabalho e diminui o tempo do
projeto;
 As falhas são corrigidas durante o andamento
dos trabalhos, e não apenas no final;

Metodologia de Projeto da Interface
48/73

 Metodologia de design ergonômico de
interfaces humano-computador;


Metodologia de Projeto da Interface
48/74
 Problematização: delimitar o problema de projeto. Quanto
mais bem definido o problema, mais fácil a solução;

 Análise: Entendimento do usuário;

 Modelagem conceitual: descrever em palavras e imagens
o que queremos que apareça na interface;

 Modelagem visual: colocar tudo organizado na tela, usando
do recurso de diagramação para dar ordem, hierarquia à
informação visual;

 Instalação da GUI: o software com a interface em
funcionamento é instalado numa plataforma pré-
determinada, onde se tem a possibilidade de realizar testes
de usabilidade;

Introdução a IHC

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Introdução a IHC

Semelhante a Introdução a IHC (20)

Mais de Rodrigo Rodrigues

Mais de Rodrigo Rodrigues (20)

Introdução a IHC