Aula 2 Modelos Cognitivos

Modelos Cognitivos Interface Pessoa Aula 2

Máquina I

Representação da informação

Pedro Silva Pedro Silva [email protected]

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. Poderse-á 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 transpor o tempo e o espaço.

informações,

permite

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