Modelos Cognitivos

Interface Pessoa
Aula 2
Máquina I
Representação da informação

Pedro Silva
Pedro Silva
Psilva@est.ipcb.pt
 Representação da Informação

Sumario da aula anterior:

- Contribuição do HCI
- Analise de conceitos:
- Interface
- Contribuições HCI
- Principios teoricos fundamentais
- Usabilidade
- Interactividade
- Dominios comportamentais e estruturais
- Ergonomia
- Comunicação
 Representação da Informação
A organização da Informação

A introdução das novas tecnologias de comunicação e informação no

nosso cotidiano provocaram mudanças no comportamento e
na percepção das pessoas.

As novas tecnologias modificam a forma de comunicação entre os

seres.

Vive-se uma época caracterizada por uma crescente disseminação

da informação através das novas tecnologias da informação,
resultando numa maior circulação de informações que
necessitam de ser organizadas e estruturadas por forma a
serem compreendidas pelos utilizadores.
 Representação da Informação

A informação, para ser bem apresentada, deve possuir uma hierarquia.

Permitindo ao leitor o aprofundando no tema de acordo com a sua

necessidade e sem perder a noção de onde se encontra.

As hierarquias de informação são um dos melhores métodos para

organizar corpos complexos de informação.
Lynch e Horton (2002)

A organização da informação deve tornar claro o conteúdo para o

utilizador

“é necessária uma estrutura clara de informação”.

Martin (1992)
 Representação da Informação
Organização da informação

A O. I. deve ser organizada em forma de nós, organizados em estruturas

hierárquicas, ligados uns com os outros através de links ou ligações.

Normalmente esta organização da informação é denominada de estrutura

em árvore.

Contudo existem alguns autores que consideram como básicos, vários outros
elementos.

(...)”para além dos nós e das ligações, também a interface deve ser
considerada um elemento essencial num sistema hipertexto.”
Leggett et al. (1990)

Segundo o autor existem 4 elementos fundamentais:

- Elementos informativos (informação: texto, figuras, vídeos ou uma

combinação destes)

- Abstracções (um objecto que permite estruturar elementos informativos e

outras abstracções, agrupá-los ou relacioná-los de outro modo)

- Ancoras (indicam elementos informativos ou abstracções que podem ser a

fonte ou o destino de uma ligação)
 Representação da Informação

Nos
Os nós constituem unidades de informação, podendo ser constituídos por
blocos de
texto, figuras, sequências de vídeo, sequências de áudio ou qualquer
outro tipo de
informação.

Ligações
A interligação entre nós de informação é feita através das ligações. Elas
são responsáveis por transportar o utilizador até ao nó seleccionado,
podendo ainda fornecer dados acerca da organização da informação
 Representação da Informação
Estrutura da informação

Brockmann et al. (1989) identifica quatro estruturas com base no

poder de expressividade e nos riscos envolvidos: a sequência, a
grelha, a árvore e a rede.
 Representação da Informação
Sequência

A organização da informação é feita de forma a que se parta do geral para o

particular.

Desta estrutura surgem duas derivações: a estrutura em árvore e a estrutura

acíclica

Enquanto na primeira cada nó só tem um nó ascendente, na segunda é possível

possuir mais que um nó ascendente (excepto o nó de entrada).

Rede

A estrutura em rede é a mais complexa de todas, é ela que permite a livre

navegação.
Os utilizadores podem movimentar-se em qualquer direcção, uma vez que
qualquer nó pode estar ligado aos restantes. Quanto maior for o número de
ligações, mais flexível se torna o sistema e maior é o risco de desorientação.
 Representação da Informação

A primeira fase do desenho de um sistema deve ser a formulação de um modelo conceptual a

partir do qual é delineada a estrutura da informação. este modelo serve para definir o
conteúdo e a forma como a informação é apresentada no ecrã.

“A existência de modelos conceptuais subjacentes à arquitectura de um sistema hipermédia – e

tornados explícitos ao utilizador – facilitam neste a criação de modelos mentais que lhe
permitam um entendimento global do universo informativo em que se encontra”

Areal, ( 1996).

 Aspectos relacionados com a organização da informação

 
legibilidade
Inteligibilidade
Cor
Imagens
Animações
Vídeo
Audio
 
 Organização da Informação

A organização da informação deve ser centrada no conceito de

modularidade, segundo o qual, todo o sistema é construído através
de módulos.

Cada módulo de informação é definido pelo seu conteúdo, mas a sua

compreensão depende também das relações estabelecidas com os
outros módulos (contexto). Um módulo poderá ser um parágrafo
de texto, um conjunto de parágrafos, uma figura, uma sequência
de vídeo, uma sequência de som, ou a combinação de vários
elementos

(Fisher, 1994).

Então podemos definir os blocos de informação, os conteúdos, as

ligações e a sua organização.
 Organização da Informação

Cuidados na criação de modulos:

Temos de ter em conta que não é possível determinar o tamanho do ecrã em

que a página será visualizada, sendo aconselhável que os módulos não
possuam conteúdos demasiado extensos.

Dentro de cada módulo, a informação deve ser organizada de maneira a que

seja facilmente compreendida pelos utilizadores.

Deve-se começar pela criação de uma hierarquia visual consistente, na qual é

atribuída ênfase aos elementos mais importantes

Deve-se criar uma grelha na qual se deve identificar os blocos de informação,

determinar as dimensões, assinalar as posições, manter as separações e
escolher os contrastes.

O espaço em branco, espaço no ecrã deve ser utilizado para dar simetria e
harmonia ao ecrã, evitando layouts extremamente densos.

De uma forma idêntica à tipografia, as páginas devem procurar o equilíbrio.

Ele constitui a referência visual mais forte e firme do Homem, como base
consciente para a formulação de juízos visuais

Iremos retomar este assunto em desenho Web

 Aspectos relacionados com a organização da
Informação - legibilidade

Ao longo dos tempos foram-se desenvolvendo princípios do domínio

tipográfico,como resposta ao modo como lemos.

A dimensão, a orientação, a harmonia e a simplicidade são factores que

influenciam a legibilidade.

A letra, embora inconscientemente, é um agente persuasivo. Atrai a atenção,

define o estilo e o carácter do documento, interferindo na maneira como o leitor
interpreta as palavras. Diariamente, os olhos do leitor são invadidos por
inúmeros tipos de letra, que por vezes, sem se dar conta, passam a ser
conotados com o objecto lido. Não existem bons e maus tipos de letra, existem
tipos de letra apropriados e inapropriados .
(Will-Harris, 2000).
 Aspectos relacionados com a organização da
Informação - legibilidade
Cuidados:

A maioria dos tipos serifados, apresentam um aspecto confuso, pelo facto de

ser extremamente difícil reproduzir as serifas na baixa resolução dum ecrã de
computador, não devendo ser utilizados. (Chan,1997)

Deve ser utilizado um tipo sem serifas quando o tamanho do texto é pequeno, e
propõe o Verdana; mas em tamanhos grandes refere que se pode utilizar um
tipo serifado. (Nielsen, 2000)

Não devem ser utilizados muitos tipos de letra no mesmo sistema

Os tipos de letra devem ser vulgares. Se o computador do utilizador não possuir

o tipo de letra, não conseguirá ver correctamente os conteúdos.

O espaçamento entre letras deve ser uniforme,

O texto regular deve ter um tamanho igual ou superior a 10 pt (Nielsen, 2002) e

não
deve ser escrito utilizando apenas letras maiúsculas.

A utilização exclusiva de letras maiúsculas ocasiona blocos de texto com uma

aparência uniforme que diminuem em cerca de 10% a velocidade de leitura
(Nielsen, 2000).
 Aspectos relacionados com a organização da
Informação - legibilidade
O sublinhado não deve ser usado uma vez que é associado aos links se for
usado noutra qualquer circunstância poderá confundir os leitores.

O texto itálico deve ser evitado, sobretudo em tamanhos de letra pequenos,

pela difícil leitura.

A orientação do texto deve ser sempre horizontal. O texto escrito

verticalmente e, sobretudo, invertido proporciona uma difícil leitura.

O texto deve ser alinhado à esquerda, a leitura processa-se mais rapidamente

desta forma do que num texto alinhado à direita, centrado ou justificado
(Nielsen, 2000).

De forma a melhorar drasticamente a leitura do texto, as linhas devem ser

curtas, não excedendo os 50 caracteres e o espaçamento entre linhas
deve ser 1,3 vezes o tamanho do tipo de letra utilizado

Os parágrafos devem ser indicados através da introdução de um espaço

suplementar entre eles ou através de um avanço.

A cor do texto deve contrastar com o fundo, pouco contraste pode originar
uma difícil leitura.
 Aspectos relacionados com a organização da
Informação - Inteligibilidade
A linguagem deve ser acessível a todos os utilizadores.

Devem ser usadas frases curtas, para facilidade de leitura e entendimento, e deve
se tentar respeitar a norma de uma ideia por parágrafo (Nielsen, 2000).

A utilização de abreviaturas deve obedecer a regras consistentes

Os títulos devem ser expressivos, assim como devem ser evidenciadas

palavraschave no documento

Quando se recorre a menus, a ordem dos itens deve seguir uma sequência natural,
tipo ordem numérica, propriedades físicas, etc.

As mensagens de erro devem apresentar uma linguagem simples (sem códigos ou

convenções desconhecidas), ser esclarecedoras do erro e ajudar o utilizador a
resolvê-lo (Nielsen, 2001a).
 Aspectos relacionados com a organização da
Informação - Cor
A maior parte da percepção humana é feita pela visão, os dois elementos
básicos da comunicação visual são as formas e as cores.

A forma como projectamos cores e formas numa interface determina em

grande parte a experiência de uso e a captura dos utilizadores .

A cor provoca reacções físicas e psicológicas. Elas atraem, aquecem,

excitam, acalmam, e transmitem sentimentos.

Cor é informação por si só, e tem significado próprio.Para Van Gogh,

eram as cores de sua pintura, e não as formas, que as tornavam
expressivas.

Num texto com diversas palavras coloridas, quando tentamos dizer em

voz alta as cores, e não as palavras, temos algumas dificuldades. Isso
deve-se ao conflito que ocorre entre o lado direito e esquerdo do
cérebro - o lado direito tenta dizer a cor enquanto o esquerdo insiste em
ler a palavra.

Vejamos um exemplo do poder das cores.

 As coisas que o nosso
cérebro faz...e as cores!!!!

Siga com os olhos o

movimento do ponto rotativo
cor de rosa, só vê uma cor:
rosa. Olhe agora para a cruz
negra do centro, o ponto
rotativo muda para verde.

Agora, concentre-se na cruz

do centro. Depois de um
breve período de tempo,
todos os pontos cor de rosa
desaparecerão e só verá um
único ponto verde girando.

É impressionante como o
nosso cérebro trabalha. Na
realidade não há nenhum
ponto verde, e os pontos cor
de rosa não desaparecem.

Isto deveria ser prova

suficiente de que nem sempre
vemos o que acreditamos
ver...
 Aspectos relacionados com a organização da
Informação - Cor
O significados das cores variarem muito de acordo com a cultura,
contexto, idade, etc.

No mundo ocidental as cores são sentidas de modo equivalente pela

maioria das pessoas. As maiores diferenças ocorrem entre culturas
orientais e ocidentais, nesses casos, para esses diferentes públicos,
pode ser necessário um design de interface diferenciado e uma
aparência adequada a cada grupo.

Ja alguma vez pensou porque é que:

As placas de aeroporto são obrigatoriamente amarelas, ou as placas de

trânsito invariavelmente verdes, ou brancas?
E porque é que o verde significa "Andar", e o vermelho,"Parar"?
Porque bebês choram mais em quartos amarelos e menos em quartos
pintados de verde?
Porque o laranja dá fome?

A cor ajuda a "usar" uma aparelho, ou a navegar num interface

 Aspectos relacionados com a organização da
Informação - Cor

Imagine que está num aeroporto no Japão à esperando do voo que sai
daqui a meia-hora e comeu um sushi que não lhe fez muito bem.

Rápido, é necessário ir á casa de banho! Mas onde fica? Não falo

japonês, onde esta a placa com o desenho WC?

Ficava muito aliviado se encontra-se rapidamente aquela placa

amarela gigante com um ícone de um bonequinho apontando para
a esquerda, com o significado "WC".
 Aspectos relacionados com a organização da
Informação - Cor
Os monitores de tubo de raios catódicos produzem a cor
usando três feixes de electrões: vermelho, verde e azul.

Se olharmos de perto para o ecrã, é fácil constatar que as

imagens são formadas por pequenos pontos de luz
denominados pixels.

Cada pixel é composto por três pequenos pontos coloridos de

fósforo: vermelho,verde e azul.

Os sistemas de cores podem ser aditivos ou subtrativos.

Nos modelos aditivos (porexemplo, RGB e XYZ), as
intensidades das cores primárias são adicionadas para
produzir outras cores.

Modelo aditivo
 Aspectos relacionados com a organização da
Informação - Cor
Pode-se pensar que o branco é a mistura das intensidades
máximas das 3 cores primárias aditivas (vermelha, verde e
azul). Os matizes intermediários (amarelo, turquesa e
magenta) são obtidos através da combinação das
intensidades máximas de 2 cores.

Nos modelos subtrativos (por exemplo, o CMY), as cores são

geradas subtraindo-se o comprimento da onda dominante
da luz branca, por isso, a cor resultante corresponde à luz
que é refletida.
Pode-se pensar que o preto é a combinação das 3
cores subtrativas (turquesa,magenta e amarela).
A quantidade de preto numa cor é indicada pela
diferença entre o branco e a intensidade máxima das
3 cores primárias aditivas. E, da mesma forma, a
quantidade de branco numa cor é indicada pela
diferença entre o preto e a intensidade
mínima das 3 cores primárias aditivas.
 Aspectos relacionados com a organização da
Informação - Cor
A aparência da cor é caracterizada pela tonalidade, pela
luminosidade e pela saturação.

A tonalidade é a característica qualitativa de uma cor. Poder-

se-á dizer que é a gradação de uma cor.

A luminosidade prende-se com a capacidade de reflexão da

luz.

A saturação é a característica quantitativa de uma cor.

Considera-se mais saturada a cor que menos branco ou
preto contiver, isto é, a mais pura.

O uso eficiente da cor requer uma coordenação cuidada das

cores e dos seus níveis de intensidade.
O uso de uma combinação errada poderá causar ilusões que
provocarão,posteriormente, cansaço de vista ao leitor.
 Aspectos relacionados com a organização da
Informação - Cor
Marques, et al. (2005) propõem as seguintes
combinações:
 Aspectos relacionados com a organização da
Informação - Cor
A cor é de tal modo importante que afecta profundamente os nossos estados
emocionais e influencia as nossas vidas, o nosso sentido de humor, a
nossa capacidade de trabalho.

O amarelo é energético, brilhante, optimista, soalheiro, activo, estimulante,

memorável, intelectual, imaginativo, idealista e cauteloso. Estimula
espiritualmente e promove a conversação.

O vermelho é inspirador, quente, apaixonado, sangrento,

revolucionário,agressivo, vigoroso, impulsivo, excitante. Está associado ao
perigo, à tensão, à excentricidade e ao poder.

O azul é excelente para trabalhar com ideias. É sereno, calmo,fresco, pacífico,

tranquilo, justo, conservador e relaxante.

O verde é natural, fértil, calmo, refrescante, próspero, jovem, saudável, tenso

e firme.

O castanho é pesado, sensível, confortável, estável e quente.

O preto é sério, distinto, profissional e compacto

O cinzento significa balanço, necessidade de paixão e é a fronteira entre o sim

e o não, é passivo, tem pouca vida própria.

O branco é pureza, neutralidade e leveza. Permite o mais alto grau de

desenvolvimento humano
 Aspectos relacionados com a organização da
Informação - Imagem
"Uma imagem vale por mil palavras..."

A imagem transporta numerosas informações, permite

transpor o tempo e o espaço.

A utilização de ícones é muito frequente. A linguagem do

ícone e o seu potencial comunicativo são preponderantes
na criação de uma interacção mais fácil e amigável com o
computador.
(Saraiva, 1997).
A fotografia pode tornar o texto menos abstracto para o
utilizador, facilitando a memorização dos conceitos.
Cuidado com o tamanho....

O formato GIF é o mais apropriado para imagens com

grandes áreas de cor homogénea como esquemas ou
gráficos
 Aspectos relacionados com a organização da
Informação - Animações

A animação, através de imagens ou de texto, tem um

poderoso efeito na visão periférica humana, fixando o olhar
do leitor
(Nielsen, 2000).

A sua utilização para demonstrar processos é usual, contudo, a

sua má utilização pode torná-la num elemento distrator,
provocando a desconcentração do utilizador.

Cuidado na utilização de animações continuas...

 Aspectos relacionados com a organização da
Informação - Video

O vídeo é normalmente o media mais exigente em termos de

recursos de hardware e software. Em virtude da quantidade
de dados associada a este tipo de informação, as técnicas
de compressão, nomeadamente a MPEG – Motion Picture
Experts Group, são elementos fundamentais, seja qual for o
fim planeado para utilização desta representação
(Coutinho, 1997)

Os vídeos disponíveis nos sistemas hipermédia são curtos e

geralmente servem de complemento ao texto e imagens.
 Aspectos relacionados com a organização da
Informação - Audio

A utilização constante de um elemento áudio pode ser

sinónimo de repulsão, se o leitor o considerar detestável.

É preciso ter a certeza de que todos os utilizadores possuem

os recursos necessários para o reproduzir.

Outro aspecto importante é criar um mecanismo que permita

desligar o elemento áudio sempre que o utilizador o
desejar
 Aspectos relacionados com a organização da
Informação - Navegação
A interacção entre o utilizador e os diferentes blocos de
informação que constituem um sistema hipermédia encontra-se
estreitamente associada ao conceito de navegação
Dias et al., 1998; Sousa, 1996.

A utilização de uma navegação bem estruturada ajuda a revelar a

organização da informação e torna mais fácil o acesso à
mesma.

“O problema da navegação é tanto mais importante

quanto quem está no controlo das operações nos
sistemas hipertexto é o utilizador e não o autor ou
designer do sistema. O utilizador é quem decide
qual a informação por que quer começar e é ele
também quem decide quais as ligações que quer
seguir”
Caldeira, 1998
 Aspectos relacionados com a organização da
Informação - Navegação

A navegação deve ser assegurada em todos os interfaces,

fazendo uso de ligações em barras de navegação, menus,
índices, imagens, texto, etc..

A utilização da cor nas hiperligações torna mais rápida a sua

percepção, ao mesmotempo que o utilizador é informado
se esta já foi visitada.

Nielsen (1990) refere que muitas das soluções possíveis para

os problemas de navegação podem estar ao nível dos
mecanismos de auxílio à navegação, sugerindo a
utilização de mecanismos de retorno, visitas guiadas,
marcadores, listas históricas, mapas de navegação

Para Wright e Lickorish (1990) não existe um modo de

navegação que possa ser considerado o melhor, existem
diferentes estratégias de navegação, cuja eficácia
depende do tipo de tarefas, da natureza dos media e da
arquitectura do sistema