TIC Fin 2sem Design Interfaces Completa

UNIVERSIDADE FEDERAL DE SANTA MARIA CENTRO DE ARTES E LETRAS CURSO DE PS-GRADUAO ESPECIALIZAO A DISTNCIA EM TECNOLOGIAS DA INFORMAO E COMUNICAO APLICADAS EDUCAO

2 semestre

TICs Aplicadas Educao

DESIGN DE INTERFACEPresidente da Repblica Federativa do BrasilLuiz Incio Lula da Silva

Ministrio da EducaoFernando Haddad Ministro do Estado da Educao Ronaldo Mota Secretrio de Educao Superior Carlos Eduardo Bielschowsky Secretrio da Educao a Distncia

Universidade Federal de Santa MariaClvis Silva Lima Reitor Felipe Martins Muller Vice-Reitor Joo Manoel Espina Rosss Chefe de Gabinete do Reitor Andr Luis Kieling Ries Pr-Reitor de Administrao Jos Francisco Silva Dias Pr-Reitor de Assuntos Estudantis Joo Rodolfo Amaral Flores Pr-Reitor de Extenso Jorge Luiz da Cunha Pr-Reitor de Graduao Charles Jacques Prade Pr-Reitor de Planejamento Helio Lees Hey Pr-Reitor de Ps-Graduao e Pesquisa Joo Pillar Pacheco de Campos Pr-Reitor de Recursos Humanos Fernando Bordin da Rocha Diretor do CPD

Coordenao de Educao a DistnciaCleuza Maria Maximino Carvalho Alonso Coordenadora de EaD Roseclea Duarte Medina Vice-Coordenadora de EaD Roberto Cassol Coordenador de Plos Jos Orion Martins Ribeiro Gesto Financeira

Centro de Artes e LetrasEdemur Casanova Diretor do Centro Artes e Letras Carlos Gustavo Matins Hoelzel Coordenador do Curso de Ps-Graduao Especializao a Distncia em Tecnologias da Informao e da Comunicao Aplicadas Educao

Elaborao do ContedoCarlos Gustavo Matins Hoelzel Professor pesquisador/conteudista

2


DESIGN DE INTERFACEEquipe Multidisciplinar de Pesquisa e Desenvolvimento em Tecnologias da Informao e Comunicao Aplicadas Educao - ETICCarlos Gustavo Matins Hoelzel Coordenador da Equipe Multidisciplinar Cleuza Maria Maximino Carvalho Alonso Rosiclei Aparecida Cavichioli Laudermann Silvia Helena Lovato do Nascimento Ceres Helena Ziegler Bevilaqua Andr Krusser Dalmazzo Edgardo Gustavo Fernndez Marcos Vincius Bittencourt de Souza Desenvolvimento da Plataforma Ligia Motta Reis Gesto Administrativa Flvia Cirolini Weber Gesto do Design Evandro Bertol Designer

Bolsistas e ColaboradoresCssio Forgiarini Evandro Bertol Flvia Cirolini Weber Jssica Bertol Leandro Oliveira Vilmar Rossi Jnior

3


DESIGN DE INTERFACESUMRIO

Etapa 1 - Fundamentos Aula 1 - Interfaces ...................................................................................................................... 5 Aula 2 - Design e Ergonomia ................................................................................................. 7 Aula 3 - Cognio Visual ....................................................................................................... 12 Aula 4 - Cognio Visual e Nveis Cognitivos .................................................................. 14 Aula 5 - Ergonomia e Usabilidade ..................................................................................... 19

Etapa 2 - Design e Linguagem Visual Aula 6 - Princpios Gerais de Design de Interface ......................................................... 25 Aula 7 - cones e textos ......................................................................................................... 29 Aula 8 - Estrutura de Interface ............................................................................................ 33 Aula 9 - Imagens e funo de comunicao .................................................................. 35 Aula 10 - Layout ....................................................................................................................... 38

Etapa 3 - Design e Metodologia Aula 11 - O projeto da interface ......................................................................................... 41 Aula 12 - Solucionando a interface ................................................................................... 44 Aula 13 - Anlise e Solues para a Interface ................................................................ 48 Aula 14 - Modelagem conceitual e visual ........................................................................ 50 Aula 15 - Instalao e verificao final ............................................................................. 52

4


DESIGN DE INTERFACE

Etapa 1 Fundamentos

AULA 01

INTERFACES

Voc j se imaginou usando o computador sem teclado? Realmente, seria muito difcil escrever e usar os softwares. Para permitir nossa comunicao com os equipamentos informatizados, ou uso destes equipamentos para nos comunicarmos com outras pessoas, os designers desenvolveram 'interfaces', como o teclado, o mouse, o vdeo, que so nossos 'mediadores'. Da mesma forma, numa televiso ou outros aparelhos eletrnicos, as interfaces permitem ligar e desligar, regular intensidades, como de volume, luz, contraste, entre outros. Notem que at agora falamos de interfaces tteis, como botes que apertamos com os dedos; isso bem simples, mas muito importante para definir esse tipo de interface. Por outro lado, temos interfaces como a sonora e a visual. O som que o computador faz quando ligado ou desligado uma interface sonora; tudo o que voc v na tela enquanto est navegando na internet, por exemplo, interface grfica. Se o computador emitisse cheiro, ento teramos uma interface olfativa e assim por diante. Ento, quando estamos falando de design de interface, consideramos todas estas formas de mediadores num contexto que chamamos Interface Humano-Computador ou IHC. No contexto da educao, estas interfaces so mediadores que devem facilitar a comunicao entre educador - ou sua proposta - e a tarefa do aprendiz. Para tanto, o projeto de uma pgina para internet, um jogo ou uma animao explicativa de um processo devem ser projetados de acordo com alguns requisitos bsicos e outros especficos. O mais importante, inicialmente, conhecer quem vai usar a interface, tentar saber como este usurio pensa, quais so as outras interfaces com as quais ele est habituado, enfim, entender o usurio para falar a 'lngua' dele. Desta forma, teremos uma comunicao mais eficiente, aumentando a interao e proximidade com quem est do outro lado da tela.

A comunicao interativa entre o computador e o usurioQuando estamos interagindo com a interface do nosso computador, quase sempre estamos fazendo uma atividade para ter um resultado previamente estabelecido. Este resultado pode ser a soluo de uma equao, a resposta de uma escolha em um jogo ou simplesmente a redao de um texto. Nestas atividades, existe interatividade entre o computador e o usurio, envolvendo alguns processos especficos. Observe a figura:

5


DESIGN DE INTERFACETendo-se idia da forma de interatividade entre o computador e o usurio, j possvel imaginar as indagaes que viro ao pensamento do aluno ou outro usurio que ir interagir com uma interface. Estas indagaes indicaro os caminhos que orientam o designer durante o projeto.ao emisso significao codificao decodificao processamento recepo ativao

interao do SISTEMA HUMANO-COMPUTADOR

humano

computador

Figura 1: Interao do Sistema Humano-Computador

No computador podemos ver a ativao como sendo a recepo do clique de um mouse; o processamento, como o que o programa faz a partir do clique; a codificao, como organizao da informao que ser emitida no vdeo, na forma da mudana de uma janela ou na caixa de som, emitindo msica, por exemplo. J para o usurio, estaremos nos envolvendo com os sistemas perceptivos humanos. Quando recebemos uma informao visual pela tela do computador, a recepo feita pelo aparelho visual; a decodificao um processo mental relacionado ao reconhecimento da imagem; a significao o que permite a compreenso; a ao fruto da deciso tomada para continuar a interatividade. Estes processos podem ser mais aprofundados atravs do estudo da cognio e percepo, mas aqui o importante atingir uma compreenso geral til a um projeto.No quadro abaixo veremos quais so as......perguntas do usurio... ...perguntas do prof. pesquisador... ...e o motivo das questes.

O que eu posso fazer?

Quais as aes que o usurio vai fazer ao interagir com a interface? Quais os conhecimentos que os usurios j tm sobre uso de computador e outras interfaces? Qual a ordem e com que botes o usurio geralmente faria a tarefa suportada pela interface? Como ele pode localizar-se? O que deve ser informado ao usurio antes dele apertar o boto? Quais as qualidades que o usurio quer para manter-se utilizando a interface?

Atender s expectativas do usurio j no incio da interao; permitir que a primeira tarefa realizada seja bemsucedida, mantendo-o na interao. Usar da experincia do usurio para que se sinta em casa ao interagir, percebendo a interface como fcil de ser aprendida e usada. O usurio precisa saber onde est e para onde vai. Tambm permitir definir os botes mais importantes e o local em que eles devem estar.

Como posso usar esta interface?

Quais so e onde esto os botes para o que eu quero?

Qual o resultado que terei? Quais as vantagens que terei ao usar esta interface?

Deixar o usurio esclarecido sobre as conseqncias das suas aes.A interface deve reduzir os custos humanos, incrementando qualidade, eficincia e conforto ao cumprir o objetivo ao qual se prope.

Para resolver todas estas questes, necessrio dominar os fundamentos da ergonomia, a fim de poder, futuramente, utilizar as capacidades e os limites dos usurios de forma a permitir o mximo aproveitamento da interao com o produto projetado.

6


DESIGN DE INTERFACE

AULA 2

DESIGN E ERGONOMIA

De modo geral, podemos dizer que design todo o processo de projeto de um produto. Tudo que fazemos para preparar uma aula um design da aula, isto , um projeto que resulta num produto. Uma apostila, cartazes, sites, apresentaes diversas, ilustraes, interfaces, um plano de aula, so produtos de um design pedaggico. Ento, por definio, podemos dizer que design todo o processo lgico e criativo desenvolvido para elaborao, execuo e instalao de um produto. O design sempre lida com trs tipos de conhecimentos bsicos: sobre o usurio (ser humano), sobre os meios utilizados para a realizao de uma tarefa (tecnologias, mquinas e mtodos) e sobre o contexto scio-cultural do meio no qual o usurio v realizar a tarefa. Assim, existem algumas questes importantes a serem levantadas:Assim, existem algumas questes importantes a serem levantadas:

Quem usar o produto?

Que tipo de tecnologia vai ser adequada?

Em que contexto o usurio far uso das interfaces (produtos)?

Para entender como devemos nos preparar para responder estas questes, vamos estudar alguns fundamentos de uma disciplina da rea de design, chamada...

Ergonomia o estudo da adaptao do trabalho aos limites e capacidades do ser humano.

APRENDENDO

O aprendizado no contexto ergonmico considerado um trabalho.

Figura 3: questes importantes e definio de ergonomia.

7


DESIGN DE INTERFACEEnto, quando estamos projetando a interface para um objeto de aprendizado, estamos projetando o trabalho - e claro que queremos que este trabalho seja confortvel, fcil de realizar e que atinja seus objetivos.

Para isso, vamos ver como a ergonomia pode ser til a partir de suas definies e tipos:

ERGONOMIA FSICA

concernente anatomia humana, antropometria, caractersticas fisiolgicas e biomecnicas e atividade fsica.

Com a ergonomia fsica podemos observar, por exemplo, se a postura do aluno em sala de aula est adequada.

ERGONOMIA COGNITIVAA B C D

concernente aos processos mentais, tais como percepo, memria, deciso e reaes motoras, e como elas afetam as interaes entre humanos e outros elementos do sistema.

Pela ergonomia cognitiva obtemos referncias, como qual deve ser o tamanho de uma letra para o aluno ter boa leitura da interface.

ABCD

ERGONOMIA ORGANIZACIONAL

concernente otimizao de sistemas scio-tcnicos, incluindo suas estruturas organizacionais, polticas e processos.

A ergonomia organizacional, a mais moderna, trata, por exemplo, de questes como os aspectos sociais e culturais que podem influenciar no rendimento escolar de um aluno, ou na continuidade/interrupo de um curso distncia.

Fonte 4: Tipos de ergonomia (fonte: http://www.iea.cc/ergonomics).

Com a ergonomia fsica podemos observar, por exemplo, se a postura do aluno em sala de aula est adequada. Pela ergonomia cognitiva obtemos referncias, como 'qual deve ser o tamanho de uma letra para o aluno ter boa leitura da interface'. E a ergonomia organizacional, a mais moderna, trata, por exemplo, de questes como os aspectos sociais e culturais que podem influenciar no rendimento escolar de um aluno, ou na

continuidade/interrupo de um curso distncia.

Ergonomia cognitivaA ergonomia cognitiva a mais relacionada ao design de interfaces porque trata basicamente dos processos mentais. No caso de interfaces de produtos relacionados aprendizagem, h a necessidade de maior cuidado com estes aspectos, principalmente no

8


DESIGN DE INTERFACEque diz respeito carga de trabalho. Sempre considere que o usurio que est tentando aprender numa interface, tambm est tendo que aprender a usar a interface. Isso muito importante no caso de usurios novatos, isto , aqueles que usam a interface pela primeira vez. O sucesso ou insucesso da primeira interao com a interface pode determinar se o usurio vai voltar a utiliz-la. Para minimizar o esforo cognitivo e aumentar o rendimento do usurio, o objetivo principal produzir uma interface fcil de usar e aprender. Dizemos 'aprender' porque necessitamos aprender a interface. Neste processo, passamos por fases de percepo das mdias, identificao, compreenso e domnio das aes possveis. Este processo concorre com o processo de aprender um contedo de uma disciplina, por exemplo. Para resolver isso, a sada proposta pela ergonomia , antes de desenhar uma interface, fazer um estudo sobre a percepo humana, usar esquemas de mapas para projetar uma tarefa, e aplicar tcnicas para checar a eficincia dos produtos a partir de requisitos j estabelecidos. Na seqncia, vamos ver aspectos fundamentais da percepo relacionados aos seres humanos, sendo enfatizada a percepo visual, por predominar nas interfaces de computadores.

Os SentidosDe acordo com HOCHBERG (1973, p.20), h mais do que os cinco sentidos tradicionais, conforme apresentado abaixo: Sentidos de distncia: ver e ouvir Sentidos da pele: tato, calor, frio, dor e os intimamente relacionados com os sentidos do paladar e do olfato. Sentidos de profundidade: posio e movimento de msculos e articulaes (cinestsicos), os sentidos de equilbrio (vestibulares e os sentidos dos rgos internos). Para cada um destes sentidos, possumos rgos sensoriais especializados que agem a partir de estmulos ou classes de energia fsica, e cuja reao permite detectar a presena/ausncia dessa energia fsica. Isso se constitui em informao que ser mentalmente processada, parte consciente e parte inconscientemente. A parte que processada conscientemente possvel de ser percebida por meio de aes, decises, dedues, expresses, etc.Esta proporo entre entrada e sada de informao aproximadamente na seguinte razo: para cada 9 bits (unidade de informao) que entram, saem 2 bits.

109

bits

de informao

MUNDO EXTERIOR

102

bits

de informao

tratadas pelo CONSCIENTE

Figura 5: Processamento de informao vinda do mundo exterior.

9


DESIGN DE INTERFACESentido visualA estrutura do sistema sensorial da viso composta, alm do olho, pela rea de projeo visual, rea de associao visual e sistema oculomotor. O olho composto internamente pela retina, onde acontece o contato entre o mundo e o sistema nervoso, pois nela que se transforma a energia luminosa em atividade neural. Possui cerca de 130 milhes de clulas receptoras sensveis luz e formada por diversas camadas de clulas, entre elas os cones, bastonetes e clulas de ligao. Os bastonetes so sensveis luz e suas mudanas, mas no so sensveis cor. Esto distribudos mais na periferia da retina, e so responsveis unicamente pela percepo da forma e do movimento. Os cones so responsveis pela viso das cores e dos detalhes, predominantes em diversas zonas da retina central. So estimulados de maneira diferente por comprimentos de ondas variados. A rea de projeo visual, no crebro, recebe os impulsos neurais vindos da retina. No entanto, o que se projeta nesta rea no uma cpia da imagem, mas uma interpretao. Considerando o par de olhos, h dois impulsos enviados pelos nervos ticos

simultaneamente. O sistema oculomotor um conjunto de msculos que permite ao olho varrer todo o campo visual. Trs pares de msculos controlam os movimentos oculares. Os msculos retos, internos e externos movem os olhos de um lado a outro. Os msculos retos, superior e inferior, permitem a movimentao para cima e para baixo. E os msculos oblquos superior e inferior permitem o giro do globo ocular para manter o campo visual em posio adequada. O campo visual toda a parte do ambiente que pode enviar sinais para o olho quando este est imvel e a cabea, fixa. A viso ntida neste campo um pequeno cone de um grau. De acordo com GRANDJEAN (1998, p.202), este campo pode ser dividido em: - campo de viso ntida, ngulo de 1; - campo mdio, ngulo de 40; - campo perifrico, ngulo de 41 a 70. Estas angulaturas no so fixas, pois mudam de pessoa para pessoa e podem sofrer influncias externas. A acuidade visual, no campo de viso ntida, depende tambm de outros fatores, como iluminao e contraste. No campo mdio, o olhar corre rapidamente de um lado a outro e no campo perifrico os objetos so dificilmente percebidos, a no ser que se movam. A acuidade visual definida clinicamente como a razo entre a distncia na qual o detalhe pode ser discriminado e a distncia na qual um observador normal pode discrimin-lo (DAY, 1972, p.44). De acordo com HOCHBERG (1973, p.41), a acuidade a capacidade de detectar a separao entre dois pontos.

10


DESIGN DE INTERFACESentido visual e as coresUma das propriedades importantes do sistema visual a discriminao das cores. O elemento fsico percebido no ato visual um espectro de ondas que provoca uma sensao chamada "luz" e que ocasiona um fenmeno chamado cor. As cores so freqncias de radiao visvel que vo de 380 at 760 nanmetros, correspondendo ao roxo ou violeta, 380 at 450 nm; ao azul, 450 at 500 nm; ao verde, 500 at 570 nm; ao amarelo, 570 at 590 nm; ao laranja, 590 at 610 nm; ao vermelho, 610 at 760 nm. A denominao destas faixas do espectro eletromagntico visvel um evento psicolgico para simbolizar o que se enxerga. De fato, no h um vermelho universal para os seres vivos. O que existe uma relao de diferentes ondas em que "vermelho" um cdigo que se atribui a uma freqncia especfica. Logo, o total da cor, enquanto luz, o branco. A ausncia de luz gera a ausncia de cor, que o preto. J em termos grficos, trabalha-se com a cor enquanto tinta, a chamada cor-pigmento. Desta maneira, as sensaes visuais so determinadas por trs fatores elementares: a luz, os objetos e o aparelho neurofisiolgico do observador. O sistema visual humano adaptado para receber sinais de luz, cores e diferenas de superfcie (o que distingue formas e superfcies), movimentos aparentes e distncias relativas (entre objetos em 2D). Desta afirmao, compreende-se que a complexidade da percepo visual e das outras formas de percepo est em identificar o seu funcionamento junto aos processos simblicos de tratamento dos "percepts" na mente humana. Assim, possvel, em ergonomia, superar alguns limites e priorizar algumas capacidades perceptivas por estratgias e associao de recursos, como as diferenciaes por simulao de superfcies distintas nas interfaces, a fim de separar campos de informao. O uso das relaes espaciais e figurativas associado s capacidades cognitivas humanas uma forma de orientar o design ergonmico, onde apresentada uma viso da cognio visual e das leis que regem a boa diagramao, para chegar-se perspectiva de inteligncia visual, no contexto da comunicao, que seja til ao projeto de interfaces.

11


DESIGN DE INTERFACE

AULA 3

COGNIO VISUAL

Quando estudamos o "Sentido Visual", abordamos o processo perceptivo visual de um ponto de vista funcional: a percepo sensorial. Aqui se tratar dos aspectos relacionados ao que se pode chamar de "Pensamento da Imagem", isto , os fundamentos da psicologia que possibilitam sustentao para uma abordagem cognitiva da imagem. Aplicados ao projeto de interfaces, est tratando-se dos requisitos para uma percepo suficiente quanto organizao e reconhecimento dentro da experincia perceptiva.

esquematizao do PROCESSO PERCEPTIVORecepo visual Objeto real Realidade Estmulo visual Organizao e reconhecimentoExperincia perceptiva Crebro

Retina

Figura 6: Esquematizao do processo perceptivo, Fonte: Villanfae e Mnguez (2000).

Fala-se em reconhecimento, pois num estgio inicial, a percepo orienta-se por estmulos, os quais podem ser organizados de forma que a interpretao seja diferente da realidade do fato ou objeto observado. Isso acontece porque a memria utiliza-se de um vasto repertrio para reconhecimento dos sinais e, de acordo com as experincias j vividas, as interpretaes so organizadas.

GestaltOs conceitos bsicos para os mecanismos de organizao perceptiva de um objeto ou imagem, que conduzem a um reconhecimento e conceitualizao, derivam da Teoria da Gestalt. Essa teoria trata a percepo como um todo e no como um aglomerado de sensaes de pontos independentes. Surgida na dcada de 1920 (a partir de um programa de estudos liderados por Max Wertheimer, Kurt Koffka e Wolfgang Khler), Gestalt significa todo, configurao ou forma. A unidade da imagem se d por foras coesivas e foras segregadoras. Elementos tais como linhas, cores, formas, podem associar-se para criar estas foras.

12


DESIGN DE INTERFACEVerifica-se aqui a presena de um par de rostos, um de frente para o outro. Este elemento a figura. O chafariz percebido centralizado, em um segundo momento, por se tratar do fundo da imagem. A figura sempre percebida mais prxima do perceptor, enquanto o fundo 'parece' continuar por detrs dela. No sentido gestaltiano, perceber no a pura assimilao de um componente figural, mas a assimilao da figura e o contexto com seus diversos componentes rumo a uma "significao".

Figura-fundo

Figura 7: exemplos de interpretao das Leis Cognitivas.

REA

Quanto menor for uma regio fechada, tanto mais tende a ser vista como uma figura.

PROXIMIDADE

Pontos e objetos que se encontram prximos tendem a agrupar-se.

CONTIGIDADE

As reas de contornos fechados tendem mais a serem vistas como figuras do que as de contornos abertos.SIMETRIA

Quanto mais simtrica for uma regio fechada, tanto mais tende a ser vista como figura.

BOA CONTINUAO

O arranjo da figura e fundo que tende a ser visto aquele que fizer menos alteraes ou interrupes nas linhas retas ou suavemente curvas do contorno. Trata-se de uma das mais importantes leis da organizao.

Figura 8: Leis da Gestalt de Max Wertheimer.

As foras perceptivas, que permitem imediatamente ver uma figura e no outra, nas imagens anteriores, so as de segregao, as quais orientam a emergncia de uma organizao concreta dos elementos formadores da figura. Para tanto, h uma distino em que se assume uma parte da imagem como figura e negao da outra parte, que passa a ser o fundo. Essa segregao emergente, a qual se impe ao resto do que possvel e que constitui um objeto visual, possui a qualidade de pregnncia, isto , "a fora da estrutura do estmulo capaz de impor uma organizao perceptiva e de construir fenomenicamente um objeto visual" (VILLANFAE e MNGUEZ, 2000, p.94). Os princpios da Teoria da Gestalt, que tratam das foras perceptivas, so largamente usados, seja emprica ou cientificamente, no desenho de dispositivos de interao.

13


DESIGN DE INTERFACE

AULA 4

COGNIO VISUAL E NVEIS COGNITIVOS

A cognio visual est no espao que vai desde a percepo sensorial at a obteno de um significado que permita uma resposta eficiente a um estmulo visual. No que concerne aos nveis de complexidade da cognio visual, Pettersson (1989, p.90) descreve passos que ocorrem na interpretao de uma imagem em alto e baixo nvel cognitivo.

NVEIS COGNITIVOS DA INTERPRETAO DA IMAGEMalto

imagembaixo nvel cognitivo

nvel cognitivo

alto nvel cognitivo

Interpretao analtica da imagem

Interpretao imediata da imagem

baixo

Interpretao da imagem em baixo nvel cognitivo: 1- Fixao rpida do olhar; 2- Informao controlada por um todo; 3- Interpretao imediata; 4- Interpretao expressada com poucas palavras.

Interpretao da imagem em alto nvel cognitivo:1- Fixao rpida do olhar; 2- Informao controlada por um todo; 3- Interpretao inicial; 4- Certos detalhes atraem mais a fixao dos olhos; 5- Informao processada detalhadamente, em um processo demanda ateno e seqencial; 6- Memria verbal ativada e ocorrem diferentes nveis de reconhecimentos e interpretaes; 7- Interpretao do contedo expressada por um grande nmero de palavras.

Figura 9: Nveis cognitivos da interpretao da imagem. Fonte: Pettersson (1989)

O autor faz uma relao de interpretao de imagem com a capacidade de serem expressveis em palavras - ou seja, a imagem interpretada por isomorfismos com outros construtos mentais que podem ser palavras ou definies, as quais necessariamente tm uma representao expressiva associada, nem que seja a imagem mental das letras da palavra.

14


DESIGN DE INTERFACENa percepo visual enquanto processo cognitivo, a comprovao da percepo visual remete a um processo inteligente, podendo ser dividido em trs fases de acordo com as capacidades e processos envolvidos, conforme apresentado ao lado.PRIMEIRA FASE

Capacidade: Recepo da informao Processo: Sensao Visual

SEGUNDA FASE

Capacidade: Armazenamento da informao Processo: Memria Visual

TERCEIRA FASE

Capacidade: Processamento da informao Processo: Pensamento Visual

Figura 10: A percepo visual como processo cognitivo. Fonte: Villanfae e Mnguez (2000).

O sistema cognitivo humano trabalha com informaes simblicas. Isso permite afirmar que as realidades com as quais se interage so representadas de modo simblico na mente. Um grupo dessas representaes interconectadas forma os modelos mentais, os quais so partes integrantes do sistema cognitivo. Por sua vez, as representaes mentais ou representaes internas podem dar-se de duas formas:

Analgicas: que so as imagens mentais, as representaes sensoriais, entre outras, dispostas na forma de arranjos pictricos.

Proposicionais: que so entidades individuais e abstratas formuladas em linguagem prpria da mente, dispostas na forma de redes semnticas.tem uma dimenso uma interface tem um aparelho ao qual pertence

controle remototem cores tem sees tem botes

Figura 11: Representaes analgicas e semnticas. Fonte: Pinker (1999).

15


DESIGN DE INTERFACEDIFERENAS entre:Representao analgica- concentrada; - o contraste entre uma posio e um arranjo marcante;

Representao proposicional- esquemtica; - repleta de relaes qualitativas como "sobre a ";

- prendem o observador a um arranjo espacial concreto;

- as propriedades espaciais so fatoradas separadamente e relacionadas explicativamente; - a forma, o tamanho, a localizao e a orientao recebem seus prprios smbolos; - mistura informaes espaciais, como partes e suas posies, com informaes conceituais, como a "condio de casa" e a insero na classe da construo.

- logo, so de carter concreto, no possvel formar uma imagem de 'simetria' sem imaginar que uma coisa seja simtrica;

Figura 12: Diferenas entre representaes analgicas e proposicionais a partir de Pinker.

As imagens mentais so conhecimentos visuais e, como conhecimento, tm uma estrutura equivalente a uma estrutura semntica. Pode-se entender, ento, que a lembrana hierarquizada das referncias visuais de um caminho para chegar-se em casa, constituem-se numa "representao ocorrente" da memria visual, que se modifica ao utilizar-se outro caminho. O mesmo pode-se dizer da navegao numa interface grfica de um sistema informatizado.

A memria visualA memria uma forma de armazenamento de informao caracterstica dos processos de aquisio de conhecimento. Na psicologia cognitiva a classificao da memria abordada de diversas formas. A memria pode ser implcita ou explcita. explcita quando uma pessoa tem que usar de recordaes conscientes, isto , evocar ou reconhecer palavras, fatos ou figuras a partir de um prvio conjunto especificado realizao de uma tarefa. implcita quando a realizao da tarefa auxiliada por experincias anteriores que, inconscientemente e sem inteno, tenta-se rememorar.

16


DESIGN DE INTERFACE

MODELO CAPaplicao Memria declarativa Memria de produo

armazenamentoMemria de trabalho

comparao

recuperao

execuo

EVOCAOMUNDO EXTERIOR

DESEMPENHO

Figura 13: Modelo CAP de Anderson. Fonte: Sternberg (2000).

De acordo com o modelo de Anderson, as conexes podem estar ativas ou inativas. A ativao pode dar-se por um estmulo externo (como sensaes) ou interno (como recordaes ou processos de pensamentos) ou, indiretamente, pela ativao de uma ou mais conexes vizinhas. O enfraquecimento da ativao ocorre quando ela alcana maior distncia da fonte inicial, percorrendo um grande nmero de conexes numa rede. O fortalecimento de uma ligao entre as conexes pode dar-se pelo aumento da freqncia de uso desta ligao. Ainda h que se identificar o funcionamento geral da memria. Ao final dos anos 60, Richard Atkinson e Richard Shiffrin apresentaram uma metfora que conceituava a memria em termos de trs armazenamentos: i) armazenamento sensorial - guarda quantidades relativamente pequenas de informaes por perodos muito breves; ii) armazenamento de curto prazo - guarda uma quantidade tambm limitada de informaes por perodos um pouco mais longos; iii) armazenamento de longo prazo - com grande capacidade de guardar informaes por perodos muito longos, talvez indefinidamente. Atualmente, utiliza-se os termos memria sensorial, memria de curto prazo (MCP) e memria de longo prazo (MLP). O processamento da informao neste modelo apresentado na figura abaixo, observando-se que o armazenamento de sinais visuais visto como memria icnica.

17


DESIGN DE INTERFACE

MODELO DE MEMRIA DOS TRS ARMAZENAMENTOSImput ambiental Registro sensorial Memria de curto prazo (MCP) Memria de longo prazo (MLP)

visual

memria de trabalho temporriaProcessos de controle:

armazenamento de memria permanente

auditivo ...

Repetio ... Estratgias de recuperao

Ouput da resposta

Figura 14: Modelo de Memria dos Trs Armazenamentos de Atkinson/Shiffrin. Fonte: Sternberg (2000).

De acordo com Sternberg (2000, p.209), existem fortes evidncias para aceitar a proposta de memria icnica. Afirma que "o armazenamento icnico um registro sensorial visual separado, assim chamado porque alguns acreditam que a informao armazenada em forma de cones (imagens visuais que representam alguma coisa; os cones assemelham-se ao que est sendo representado). A seguir entraremos na aplicao dos conceitos vistos at aqui por meio do estudo da usabilidade e das qualidades ergonmicas de um software.

18


DESIGN DE INTERFACE

AULA 5

ERGONOMIA E USABILIDADE

No aspecto mais tcnico, includo, na ergonomia, o conceito de usabilidade. A usabilidade uma abordagem importante na anlise ergonmica, no caso de anlise de requisitos que dizem respeito ao uso (ao do usurio) e utilidade (propriedades da ferramenta pertinentes ao trabalho). Deve ser vista como regra no contexto de um projeto caracterizado como ergonmico. Portanto, a usabilidade no deve ser confundida com a ergonomia, pois a ergonomia uma disciplina que contm ferramentas cognitivas (tcnicas analticas, projetivas e abordagens) e utiliza-se da usabilidade como conjunto de conhecimento, regras e normas para anlise e validao de requisitos relacionados ao uso de uma interface. H outros requisitos, como os estticos, por exemplo, que no so necessariamente abordados no contexto da usabilidade; costumam ter referncia pela ergonomia e principalmente pelo design grfico. Conceitualmente, a usabilidade tem sido um termo de compreenso comum e de concordncia entre designers, ergonomistas e desenvolvedores de objetos de

aprendizagem, quanto a ser uma meta indispensvel a um sistema interativo. vista, de modo geral, como a propriedade que os produtos tm de serem fceis de usar e aprender. Ela aplicada aos produtos, por isso uma caracterstica passvel de medida e formalizao quanto a requisitos e formas de anlise. As definies e elementos da usabilidade esclarecem para o designer os pontos-chave a serem observados. Para efeito de definio de conceitos a serem utilizados neste texto, apresentar-se-o abaixo as definies de termos a partir da NBR (9241-11:2002, p.2) de referncia:

Usabilidade: medida na qual um produto pode ser usado por usurios especficos para alcanar objetivos especficos com eficincia, eficcia e satisfao em um contexto especfico de uso. Eficcia: acurcia e completude com as quais usurios alcanam objetivos especficos. Eficincia: recursos gastos em relao acurcia e abrangncia com as quais usurios atingem objetivos. Satisfao: ausncia de desconforto e presena de atitudes positivas para com o uso de um produto.

19


DESIGN DE INTERFACE Contexto de uso: usurios, tarefas e equipamentos (hardware, software e materiais), e ambiente fsico e social no qual o produto usado. Sistema de trabalho: sistema composto de usurios, equipamentos, tarefas e o ambiente fsico e social com o propsito de alcanar objetivos especficos. Usurio: pessoa que interage com o produto. Objetivo: resultado pretendido. Tarefa: conjunto de aes necessrias para alcanar um objetivo. Produto: parte do equipamento (hardware, software e materiais) para o qual a usabilidade especificada ou avaliada. Medida: valor resultante da medio e o processo usado para obter tal valor. Estes conceitos so componentes de uma estrutura que permite medir e especificar a usabilidade a partir da identificao dos objetivos e decomposio da eficcia, eficincia e satisfao, e os componentes do contexto de uso em subcomponentes com atributos mensurveis e verificveis. A figura a seguir est representando o relacionamento entre os componentes da usabilidade:

ESTRUTURA DA USABILIDADEContexto de uso usurio

Resultado pretendido

Objetivo

tarefa

Usabilidade: medida na qual objetivos so alcanados com eficcia, eficincia e satisfao

equipamento

Medidas de usabilidade eficciaResultado de uso

ambiente

eficincia satisfao

Produto

Figura 15: Estrutura da usabilidade - Fonte: NBR 9241-11: 2002.

Observa-se que, para especificar ou medir a usabilidade, faz-se necessrio saber: quais os objetivos pretendidos com o produto? qual a descrio dos componentes do contexto de uso, com detalhes suficientes para representar os aspectos relevantes do contexto, como condies de uso de um jogo, tipo de computador utilizado, local onde o usurio utiliza a interface, condies fsicas, ambiente, iluminao , etc.?

20


DESIGN DE INTERFACE quais os valores reais ou desejados de medidas de eficcia, eficincia e satisfao no uso do produto? Esses valores podem ser objetivos ou subjetivos, de acordo com o contexto, o produto e a possibilidade de resposta do usurio em ensaio de usabilidade. Podem ser obtidos por observao do usurio enquanto utiliza o produto ou entrevista direta e observao dos resultados da ao do usurio junto interface.

Outra forma de identificar as qualidades relativas usabilidade de um produto interativo, como os utilizados na nossa rea, observar as qualidades ergonmicas propostas pelo Instituto Nacional de Pesquisa em Informtica e Automao, o INRIA (Institut National de Recherche en Informatique et en Automatique) da Frana. Veja a seguir como a observao destas qualidades pode nos ajudar, tanto no projeto de um objeto de aprendizagem, quanto na hora de decidir se o objeto que voc quer utilizar em sua aula realmente ergonmico.

Qualidades ergonmicas de uma interfaceAs qualidades ergonmicas so tanto da interface quanto do software em si. Esta definio importante porque o programa e a interface so componentes de um mesmo produto. Imagine que, para todos os comandos ou cliques que voc aciona na interface, h uma programao equivalente que permite uma resposta sua ao. Ento a pergunta : por onde comear um projeto que seja realmente ergonmico? Pela interface, pois atravs dela que um programador vai entender as suas necessidades com relao a um produto. Mais frente, veremos questes metodolgicas, mas aqui colocaremos oito critrios gerais para o sucesso de uma interface com base em estudos de Scapain e Bastien do INRIA.

A CONDUOUm software ergonmico como um tutor que ajuda o usurio na interao com o computador. Ele apresenta uma srie de mensagens teis para que o usurio sinta-se seguro em interagir. Estas mensagens aparecem em forma de alertas, rtulos, pequenos textos que ocorrem no momento e local exatos, isto , aparecem quando necessrios. Eles possibilitam que: O usurio se localize no software; isto significa que na interao com um jogo com etapas a vencer, por exemplo, a interface lhe demonstre em que etapa voc se encontra. O usurio conhea as aes e suas conseqncias. No exemplo do jogo, se a ao do usurio for de retornar para a etapa anterior, ento ele pode perder a pontuao j alcanada. Um outro bom exemplo quando voc vai salvar um

21


DESIGN DE INTERFACEarquivo no seu computador com um nome e localizao iguais a de outro arquivo j existente, e o computador lhe avisa que voc perder os dados salvos anteriormente. Quando necessrio que o usurio consiga obter informaes complementares para orientar sua interao. o caso da ajuda, que serve como um pequeno manual de como realizar as tarefas do software. muito importante para objetos de aprendizagem que servem a diferentes pblicos, pois cada um possui habilidades e tempo de experincia diferentes com

computadores. Para usurios novatos, os recursos de ajuda devem ser bem disponveis. Estes recursos devem ser extremamente simples, didticos e visuais (uma boa forma de ajuda so as animaes de como fazer), pois devem sanar dvidas e exigir baixo esforo cognitivo, j que o usurio o acessa justamente em momento de dvida e provvel impacincia.

CARGA DE TRABALHOImagine se todas as vezes que voc precisasse acessar seu e-mail, tivesse que preencher novamente seu cadastro. Seria muito desagradvel, mas com os dados armazenados no provedor, basta inserir o nome de usurio e senha. Formalmente, podemos dizer que um software ergonmico permite fcil aprendizado porque sua interface e estrutura permitem que o usurio aprenda rapidamente como utilizlo, diminuindo a quantidade de falhas na interao e sobrecarga cognitiva. Quanto maior a carga de trabalho cognitivo do usurio, maior a possibilidade de cometer erros. Neste sentido, a diviso de tarefas entre o usurio e o software de importncia fundamental. Ento, quando estiver projetando um produto, importante evitar que o usurio tenha de fazer o que o software pode fazer. Assim a carga cognitiva durante a navegao diminuda, priorizando, para o usurio, o foco nas tarefas de aprendizado do contedo. Quando entramos no critrio de carga de trabalho, passamos a definir o que um software econmico, porque conciso, apresentando apenas o essencial, diminuindo a carga informacional e a quantidade de aes para obter o resultado.

CONTROLE EXPLCITOEste critrio diz que o software deve ser obediente e que o usurio deve ter total controle sobre ele. Imagine o contrrio, um usurio tentando mudar para outra pgina na internet e a pgina em que ele se encontra no permite isso. necessrio que o usurio consiga decidir e concretizar as aes no decorrer da interao. O usurio deve sentir-se sempre no controle da interao.

22


DESIGN DE INTERFACEADAPTABILIDADEEste critrio relacionado ao fato de que podemos fazer as mesmas tarefas de diferentes formas. Pode-se, por exemplo, imprimir um arquivo teclando Ctrl+P, ou clicando no cone de impressora disponvel da interface, ou ainda, abrir um menu de opes onde existe o comando Imprimir. Quando um software permite isso, est possibilitando aos usurios de diferentes nveis de experincia a customizao ou personalizao da interface.

GESTO DE ERROSA interface deve prever alertas aos usurios, quando estes entram com dados inadequados. Por exemplo, para um campo de data de aniversrio que somente aceita nmeros e ocorre de o ms ser digitado com palavras, o software deve avisar que somente permitido caractere numrico. Este requisito mais relacionado a interaes com grande entrada de dados. No entanto, vrios editores de texto utilizam este artifcio, quando sublinham uma palavra incorreta e perguntam se voc quer corrig-la.

HOMOGENEIDADE/COERNCIAA homogeneidade uma caracterstica relacionada identidade visual, textual e de estilo de navegao, que so percebidos quando temos interfaces que apresentam determinado padro esttico. Uma maneira fcil de identificar este padro quando vamos fechar uma janela no Windows e sempre encontramos o cone com um X no canto direito superior da janela. Assim, o posicionamento dos cones, barras de ferramentas, utilizao de cores no fundo de tela e demais reas, devem obedecer a um padro mnimo para que o usurio se oriente, execute mais rpido suas aes e no tenha a impresso de que, de uma hora para outra, tudo mudou e parece que est em outro software.

SIGNIFICADO DOS CDIGOSAqui entramos numa rea importante de comunicao visual. Se voc vai fazer uma interface para quem est acostumado a pintar, ento as ilustraes de pincis, palhetas de tintas ou degrads, usadas em cones de um editor de imagem, vo ser bem significativas e representar claramente a ao a ser executada quando o cone for clicado. Quanto mais universal for o significado das figuras utilizadas para formar a interface, mais abrangente ser o pblico a ser atingido. claro que, nestes casos, temos que observar bem a especificidade dos perfis dos usurios a serem atendidos, principalmente quanto cultura e aspectos histrico-sociais que identificam seu universo de significados conhecidos.

23


DESIGN DE INTERFACECOMPATIBILIDADEQuando estamos digitando um texto e podemos visualizar como ele ficar na impresso, estamos utilizando um tipo de compatibilidade que a de formato. Significa que o que vemos na tela est compatvel ou correspondente com o que sair na impressora. Outra forma de compatibilidade importante que seja respeitada a maneira com que o usurio est acostumado a realizar uma tarefa. Significa que, se voc est acostumado a criar suas aulas com textos, imagens, colagens e esboos quando o faz sem computador, ento o seu software ideal ser aquele que permita o uso de texto e imagem simultaneamente. Logo, estamos compatibilizando a sua forma de fazer aulas no papel com a forma de faz-las no computador. A partir destes conhecimentos sobre ergonomia e usabilidade, vamos comear a ver como podemos dar soluo aos problemas de projeto. Passaremos, no prximo mdulo, a estudar como as partes que compem uma interface se organizam e quais as qualidades a serem observadas em cada uma destas partes. Enfatizaremos a Linguagem Visual, porque ela predominante na interface humano-computador. Obviamente, as outras formas de linguagem, como a verbal, so de fundamental importncia, mas j estamos mais acostumados a produz-las. No entanto, voc vai ver que possvel traar um paralelo entre as diferentes linguagens e utiliz-las de forma clara e eficiente numa interface de alta qualidade.

24


DESIGN DE INTERFACE

Etapa 2 Design e Linguagem Visual

AULA 6

PRINCPIOS GERAIS DE DESIGN DE INTERFACE

Linguagem visualTente fechar os olhos, e imagine que est indo para casa. O que voc enxergou na sua memria? Provavelmente, deve ter visto as imagens mais marcantes no percurso visual que faz no trajeto at a sua casa. Isso revela que temos um conhecimento visual importante, baseado na fora das imagens. Esta fora fruto de uma construo de formas, cores, texturas ou diferentes pontos de vista que nos chamam a ateno. Se relembrarmos um pouco da Gestalt e da Cognio Visual, passaremos a perceber que as imagens que temos na nossa memria so como uma lngua de sinais visuais que esto organizados numa determinada ordem, como as imagens que nos auxiliam no trajeto at a nossa casa, e a esta ordem chamamos de sintaxe. Este conceito muito importante porque tudo o que fazemos tem uma ordem, uma seqncia com imagens relacionadas. Desta forma, temos que ter o cuidado de ordenar as imagens na interface de acordo com a ordem que seja mais natural para o usurio durante a interao. A sintaxe, neste caso, como uma forma de organizao das imagens ou do que as compe, visando dizer-nos alguma coisa. Veja quanta informao as imagens carregam. Por este motivo, elas tm uma importncia muito abrangente e comprometedora na interao com uma interface. Para dominar esta linguagem, primeiro vamos estudar as qualidades das imagens e formas estruturais que podemos aplicar numa interface. O desenho pode ser aprendido de forma semelhante ao aprendizado de outras linguagens, como a textual ou a musical. Na linguagem visual, estamos lidando com habilidades de desenho que podem, ou no, ser de domnio do projetista do objeto de aprendizagem. Se ele tem condies de analisar os componentes visuais e sugerir melhoras, ento ele est desenhando, ou seja, 'falando a lngua' dos designers grficos. Para tanto, vamos estudar os fundamentos da linguagem visual e posteriormente aplic-los s interfaces, com objetivo de saber especificar requisitos para a linguagem visual e melhor interagir com outros profissionais da rea de design de interfaces.

25


DESIGN DE INTERFACEElementos da comunicao visualBasicamente, temos como elementos fundamentais da comunicao visual o ponto, a linha, a forma e a superfcie de tudo o que vemos. simples de entender, quando fazemos trs pontos, unimos com trs linhas, obtemos uma forma (a de um tringulo) e podemos pintar o seu plano de uma cor. Fazendo um exerccio simples, podemos reconhecer estes elementos facilmente:

PONTO

LINHA

FORMA

SUPERFCIE

Figura 16: elementos que compem uma imagem.

Se abstrairmos um pouco, podemos ver as sees, que so como pequenas imagens num contexto, como pontos ou pequenas manchas grficas. A seqncia destes pontos forma linhas invisveis. Devemos usar isso a nosso favor, quer dizer, a favor da mensagem a ser transmitida, e cuidar para no confundir o usurio. Veja como isso acontece em diversos desenhos:

PRINCPIOS GERAIS DE DESIGN DE INTERFACE Linguagem VisualTente fechar os olhos, e imagine que est indo para casa. O que voc enxergou na sua memria? Voc deve ter visto as imagens mais marcantes no percurso que faz at a sua casa. Isso revela que temos um conhecimento visual importante, baseado na fora das imagens. Esta fora fruto de uma construo de formas, cores, texturas que nos chamam a ateno. Se relembrarmos um pouco da Gestalt e da Cognio Visual, perceberemos que as imagens que temos na nossa memria so como uma lngua de sinais visuais que esto organizados numa determinada ordem. A esta ordem damos o nome de sintaxe. Desta forma, temos que ter cuidado de ordenar as imagens numa interface de acordo com a ordem que seja mais natural para o usurio durante a interao. A sintaxe, neste caso, como uma forma de organizao das

imagens visando dizer-nos alguma coisa. Veja quanta informao as imagens carregam. Por este motivo, elas tm uma importncia muito abrangente na interao com uma interface. Para dominar esta linguagem, primeiro vamos estudar as qualidades das imagens, os fundamentos da linguagem visual e as formas estruturais que podemos aplicar numa interface.

Elementos da Comunicao VisualTemos como elementos fundamentais da comunicao visual o ponto, a linha, a forma e a superfcie de tudo o que vemos. Fazendo um exerccio simples, podemos reconhecer estes elementos facilmente em qualquer imagem. Se abstrairmos um pouco, podemos ver as manchas grficas que compem a imagem. Devemos usar isso a favor da mensagem a ser transmitida, cuidando para no confundir o usurio. Alm destes fatores, a linguagem visual fortemente definida pelo uso da cor em diversas aplicaes.

Figura 17: reconhecimento de manchas grficas.

Alm destes fatores, a linguagem visual fortemente definida pelo uso da cor em diversas aplicaes. A cor em si algo percebido fisicamente e culturalmente. Um dos cuidados que devemos ter com o significado cultural, que muito diverso. Para alguns pases, o branco significa luto, enquanto que, para outros, o preto. Por isso, importante pesquisar o significado da cor para o usurio, dependendo da distncia entre a cultura do projetista e a do usurio.

26


DESIGN DE INTERFACEPor outro lado, a cor um fenmeno percebido na interface com aspectos que so observados de forma geral, relacionados a fatores como idade e limitaes visuais. O uso do recurso da cor na interface como forma meramente decorativa desaconselhado. importante planejar este uso, observando principalmente se auxilia a legibilidade das informaes, quais efeitos sobre a performance cognitiva do usurio, etc. preciso tomar cuidado com os perifricos onde elas sero projetadas, uma vez que podem alterar-se em diferentes aparelhos, ou ainda sofrer efeito de luminosidade, saturao e contraste. Tambm considere que os monitores de vdeo usam um sistema de cor chamado RGB (vermelho, verde e azul como cores primrias), enquanto que perifricos como impressora utilizam sistema CMYK (ciano, magenta, amarelo e preto como cores primrias). Quanto s questes de significado da cor, existem algumas caractersticas comuns, tanto para interfaces de computador, como para outras interfaces. Podemos citar algumas como:

vermelho pode ser relacionado a situaes de perigo, alarme, ateno, alerta, calor e comandos de interrupo; amarelo serve bem para advertncias;

verde relacionado a passagem livre (sada), normalidade, vegetao e segurana; azul para frio, gua (como em cartografia), cu e calma;Figura 18: Exemplos de aplicaes cromticas.

Ainda podemos observar o uso de cor laranja para valores-limite e radiao; cinza para inatividade, neutralidade; assim como o branco, uma cor neutra que tambm significa paz. importante tambm observar a relao das cores entre si. Observe os exemplos de boa legibilidade esquerda, e de difcil legibilidade direita:

27


DESIGN DE INTERFACEpreto sobre branco branco sobre preto amarelo sobre preto branco sobre vermelho vermelho sobre branco preto sobre amarelo

verde sobre vermelho vermelho sobre verde branco sobre amarelo vermelho sobre laranja amarelo sobre branco ciano sobre cinzaFigura 20: exemplos de combinaes que dificultam a legibilidade.

Figura 19: exemplos de combinaes que proporcionam boa legibilidade.

Outro fator importante considerar as caractersticas fsicas do sistema visual do usurio. Elas podem nos indicar cuidados com fatores como daltonismo, onde a nodistino entre vermelho e verde significativa. A rea do centro do campo visual do usurio mais sensvel ao verde e ao vermelho. A rea perifrica do campo mais sensvel ao azul, preto, branco e amarelo. Se o usurio for de mais idade aconselhado o uso de cores mais saturadas (com mais pigmentao). Percebe-se que as cores tm tanta importncia quanto os demais elementos visuais da interface. Sabe-se que cor a codificao mais rapidamente percebida pelo usurio na interface, sobretudo na relao de agrupamento de elementos dispersos na tela. Por tudo isso, indispensvel definir o uso das cores como um elemento de comunicao de importncia capital para o sucesso de um projeto.

28


DESIGN DE INTERFACE

AULA 7

CONES E TEXTOS

Todos ns utilizamos cones quando interagimos com um software de interface grfica. Estas imagens, usualmente pequenas e bem organizadas, so alocadas desta forma devido a uma classificao, feita pela rea da semitica, que se dedica ao estudo dos signos. Para eles, um cone uma imagem que se assemelha ao objeto ao qual se refere. A importncia de compreender o funcionamento dos cones na interface e de como us-los num projeto se d pelo fato deles facilitarem muito as operaes, economizarem espao e apresentarem uma srie de outras vantagens j conhecidas, as quais veremos a seguir.

A utilidade do coneUma vez que o cone utiliza-se de figuras, ele mais universal e amigvel. Perceba que o mesmo cone de impressora que voc conhece utilizado em muitos pases diferentes, com diferentes lnguas. Vejamos algumas vantagens de sua utilizao: Ocupa pouco espao. Um cone bem projetado, conciso, pode ser uma imagem pequena e mesmo assim ser legvel, trazendo em si um significado que leva mais rapidamente compreenso do que um texto ou um longo ttulo; representar conceitos visuais, cones representam melhor que palavras, ex.: Ao ngulos, relaes como maior e menor, etc.; Oferece fcil aprendizado e memorizao. Como so imagens sintticas, tm baixa complexidade visual, e diminuem a carga de trabalho cognitivo para o seu reconhecimento e memorizao; Nossa capacidade para lembrar e reconhecer grficos melhor do que para lembrar apenas de palavras. O cone de reconhecimento mais rpido; cone permite que pessoas sem domnio ou domnio limitado de leitura possam O interagir com um software por meio da interface.

Pode-se usar cones em diversas situaes. recomendado principalmente para representar: Aes, como: salvar, imprimir, recortar, confirmar, cancelar...; Navegao, indicando a direo e local onde ir chegar; Operadores simples como os de vdeo;

29


DESIGN DE INTERFACE Partes do sistema, como discos, arquivos, perifricos; Tipos de usurios, como aluno, professor, administrador (e-proinfo)...; Estados, como conectado ou desconectado; Prioritariamente, quando estamos trabalhando com interfaces para objetos de aprendizagem que utilizam relaes grficas, a fim de transmitir conceitos. o caso de objetos de matemtica sobre propores ou trigonometria.

O uso de cones tambm requer cuidados. Assim como para toda a interface, os cones tm princpios de design para orientar seu projeto. Como princpios gerais, temos: identidade visual entre os diversos cones da interface. Isso pode ser alcanado observando a cor e forma do fundo, da imagem e a linguagem utilizada, como o uso de cor chapada ou sombras; manter um tamanho mdio das figuras dos cones de forma harmnica entre eles; limitar o nmero de cores, diminuindo complexidade visual e respeitando o uso comum de cores, como vermelho e amarelo para situao de risco; quando os cones so animaes de um processo, cuidar para que tenham um movimento em tempo real como o do processo representado; pesquisar cones que j so comuns para o usurio, adapt-los se necessrio e aplic-los interface em funes iguais as que j eram utilizados em outros softwares. Lembre que um cone novo tambm tem que ser aprendido e, neste caso, deve acompanhar uma legenda (esta legenda pode ser permanente ou no); quando for necessrio um rtulo (texto), apresent-lo de forma legvel, com termos descritivos, especficos e familiares ao usurio; cuidar com a quantidade de cones. Alguns textos sobre ergonomia recomendam no mximo 30 cones visveis numa mesma tela de um software. Quando eles existem em grande quantidade importante ter um mecanismo que permita ao usurio deixar na tela apenas o que vai ser til para a sua tarefa. Tambm recomendado que sejam organizados por funo em grupos de 5, no mximo 7 elementos; desenho de um cone no deve permitir dupla interpretao. o

Com estas recomendaes, podemos tanto projetar, como optar por cones j existentes para nossos projetos. Assim poderemos ter maiores conforto e rendimento do trabalho do usurio, porque utilizaremos bem as possibilidades de comunicao destas

formas de imagem. Por outro lado, h momentos em que temos que usar de textos para auxiliar na interao com a interface ou apresentar um contedo. Estes textos tambm so elementos de composio dentro da linguagem visual, pois so compostos por fontes de diferentes estilos, organizados numa diagramao, visando determinada funo.

30


DESIGN DE INTERFACEOs textos tm, numa interface, algumas funes primrias, como a de dar ttulos s partes (na forma de rtulos), apresentar mensagens de orientao ao usurio, nomear itens de uma lista em um menu, etc. Veja o que os cones podem representar, estando ou no associados a textos:aes como para definir estados comosalvar imprimir

partes do sistema comodiscos

operadores simples como os de vdeo

navegao indicando direo e local onde ir chegar

tipos de usurios comoaluno professor administrador (e-proinfo)

conectado

ou recortar procurar desconectado

arquivos

perifricos

Figura 21: modos de aplicao de cones.

Para estas aplicaes, recomendado que os textos sejam em caixa baixa, apenas com a primeira letra de cada frase em caixa alta, com bom contraste. No caso de rtulos e mensagens relativas interface, devem preferencialmente estar alinhados pela esquerda, embora isso possa ser alterado, caso a interface tenha uma linguagem diferenciada, como a da histria em quadrinhos. Para textos de contedo longo ou listas, necessrio cuidado com as fontes, pois elas tambm so imagens e, quando juntas, formam blocos de diagramao - que estudaremos mais frente. Aqui, vamos ver um pouco mais das caractersticas das fontes. Existem muitas variaes de desenhos de fontes. Algumas caractersticas so mais evidentes. Primeiro, observamos que os editores de texto usualmente nos trazem as opes de estilo como Bold (negrito) e Italic (itlico). Existem fontes desenhadas em estilos diversos, mas uma caracterstica que comum a um grande grupo de fontes a presena de serifa. A serifa uma terminao saliente no desenho da fonte, cujo uso normalmente recomendado para documentos impressos, uma vez que elas no apresentam bom rendimento visual em interfaces digitais.

SerifaFigura 22: caractersticas possveis das fontes.

serifas

31


DESIGN DE INTERFACEOutra questo crucial na determinao de uso de fontes o espao entre os caracteres e entre as linhas. Numa interface digital, o afastamento entre as fontes deve ser maior que em documentos impressos, sendo maior ainda no caso de fontes bold, por estas terem a tendncia a parecerem como grudadas. Com a infinidade de desenhos de fontes disponveis, temos que ter cautela e manter uma unidade na interface por meio de estilo, tamanho e cores. Estas caractersticas podem auxiliar ou prejudicar o usurio durante a leitura. Se for possvel, o ideal usar apenas um estilo e tipo de fonte, e que seja adequada ao tema da interface. Um exemplo o uso de fontes com aparncia de antigo para um objeto de histria medieval. Outro fator importante que os textos funcionam tambm como figuras. Eles formam blocos que podem ser alinhados de diferentes formas, e dispostos junto a outras imagens na interface com o mesmo cuidado que teramos em situar uma fotografia ou ilustrao numa pgina. Ao fazermos isso, estamos diagramando.

32


DESIGN DE INTERFACE

AULA 8

ESTRUTURA DA INTERFACE

EstruturaO 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. Nesta estrutura, organizamos os elementos visuais com propsito de facilitar a leitura de acordo com a atividade a ser realizada. As reas deste retngulo so divididas de acordo com a importncia que adquirem para nossa necessidade. Esta importncia vem da varredura visual, ou seja, o 'caminho' pelo qual passamos os olhos. As reas que olhamos primeiro so as de maior importncia. Esta varredura fortemente influenciada pela leitura. Olhamos de cima para baixo e da esquerda para a direita porque na nossa cultura assim que lemos os textos - o que deve ser observado, pois, ao fazermos um objeto de aprendizagem para um no-alfabetizado, os focos de ateno visual sero outros. Para alfabetizados em lnguas ocidentais, a parte superior esquerda o campo de entrada da varredura visual. Nesta rea, devem ficar os cones, menus e informao de maior uso e importncia no incio das atividades do usurio. Em sites, uma rea tambm utilizada para apresentar indicaes da navegao do usurio; em cadastros, o canto superior esquerdo um bom local para a fotografia do usurio. Tambm uma rea valorizada para colocao de marcas e nomes de instituies no caso de sites ou objetos de ensino oficiais. No canto superior direito, onde a varredura visual no se detm muito, o local propcio para informao e janelas menos utilizadas durante a interao, como menus de ajuda, por exemplo. J o lado esquerdo tem sua importncia como rea fixa para sites onde exista, mais direita, grande quantidade de informao que necessite de barra de rolagem tambm se aplica para menus. A parte inferior direita o campo de fechamento visual, importante para localizar cones de navegao ou mensagens relativas passagem de uma pgina para outra. Toda a extenso inferior um local recomendado para dados sobre as caractersticas do que est sendo trabalhado - uma rea para barra de status. O centro deixado para apresentao das imagens daquilo que est sendo trabalhado, com um desenho, por exemplo.

33


DESIGN DE INTERFACEAlm da organizao dos elementos visuais, no sentido bidimensional, temos que perceber a interface como camadas de imagens. A interface como cartas organizadas numa ordem. Aqui estamos falando que, numa mesma tela, temos a percepo da sobreposio e dos elementos que possuem maior grau de importncia, como sendo o que est na frente. Sempre estaremos lidando com um fundo e os elementos que esto sobre ele - um erro comum quanto a isso um elemento de fundo de tela que se confunde com o texto, que deve estar em primeiro plano. Plano o nome destas camadas; logo, o que vemos primeiro o primeiro plano. E se estivermos projetando uma interface para quem ainda no se alfabetizou? Neste caso, os planos tm mais importncia que as distribuies bidimensionais, pois naturalmente o ser humano presta ateno sempre no que est mais prximo, como uma forma natural de defesa que orienta a percepo. Todos estes fatores so importantes na organizao da estrutura da interface, mas para distribuir bem os elementos importante ver a interface como uma grande colagem de imagens, textos e animaes que possuem infinitas possibilidades. Para ser bem criativo no desenvolvimento desta etapa em um projeto, o uso de lpis e papel facilita a criao de variedades de leiautes e a posterior seleo. Para facilitar o processo de deciso de onde ou como localizar os elementos de uma interface, necessrio faz-lo de forma racional. Isso possvel se conhecermos a funo do elemento. Esta funo uma funo de comunicao que facilita a deciso de local e ordem das imagens. A seguir, veremos como fcil classificar e usar esta funo.

34


DESIGN DE INTERFACE

AULA 9

IMAGENS E FUNO DE COMUNICAO

NA INTERFACEJ falamos que nos comunicamos por imagens semelhantemente a como acontece com os textos. Assim como as palavras, pontuaes e pargrafos tm funo num texto, na interface, as imagens adquirem funes de comunicao que so teis para orientar o usurio. Existem muitas funes para as imagens, mas podemos enumerar quatro que quase sempre sero percebidas:

- Funo ilustrativa: Esta uma das funes mais usadas. Imagens com esta funo so representaes grficas de ferramentas, processos, funes, esquemas ou situaes que servem para chamar a ateno ou designar algum conceito. Em objetos pedaggicos, alm das imagens com funo diretamente ligada interao com a interface, poderemos ter uma grande diversidade de imagens com funo de ilustrar contedos, enfatizar idias, ou ajudar a entender um processo como o de uma reao qumica, por exemplo. Estas ilustraes podem ou no ter interatividade. Podemos ter uma ilustrao que acompanhe um texto e represente visualmente uma idia, um conceito, sendo esttica, mas quando representa um processo importante que seja animada.

porcentagem concluida tempo estimado cancelar

ATENO: voc tem certeza que deseja continuar? cancelar OK

Figura 23: exemplo de funo ilustrativa de processo numa interface.

- Funo taxonmica: Para definir como os elementos de uma interface (textos, cones, animaes, barras de menu, entre outros) so organizados, lanamos mo do recurso de organizadores. Ao abrir uma janela em um programa,

35


DESIGN DE INTERFACEperceba que ela est dentro de uma pequena moldura em cuja parte superior h uma rea destinada ao ttulo, que neste caso chamamos de rtulo. Esta janela um organizador. Todas as linhas, barras, reas de cor que definem uma rea de trabalho so organizadores, os quais tambm seguem um padro de linguagem visual. So as caixas onde colamos as peas da nossa interface.

Figura 24: exemplo de funo taxonmica como marcadores (destacados em magenta e laranja).

- Funo de sinalizao: As imagens com este atributo so extremamente importantes porque sinalizam, isto , orientam o usurio na tomada de decises durante a interao. Quando voc est fazendo download de um arquivo da internet, aparece uma barra que vai sendo preenchida (barra de progresso) para sinalizar quanto falta para terminar o processo, permitindo tomar a deciso de continuar ou cancelar, de acordo com sua escolha.

nome: e-mail: mensagem:

nome: e-mail: mensagem: mensagem enviadacom sucesso! OK

enviar

enviar

Figura 25: exemplo de funo de sinalizao.

Mas ainda h uma outra categoria importante de imagens que ajudam na tomada de deciso. Imagine que voc vai exportar uma imagem - h como saber se o arquivo exportado ficar bom? Neste caso, no basta o software lhe dar dados numricos de definio da imagem. Para uma correta avaliao, ele deve fornecer uma representao visual desta definio. Se a imagem que o software lhe apresentar como possvel resultado do ato de exportar for inadequada, logicamente o usurio toma a deciso de no faz-lo agora.

36


DESIGN DE INTERFACESignifica que o software sinalizou para voc o possvel resultado, e voc deixou de perder tempo num resultado que no lhe satisfaria. Importante ressaltar que, quando existe situao de risco, como perda de arquivos, por exemplo, devemos sinalizar utilizando imagens contundentes (cores contrastantes e imagens de alerta) acompanhadas de texto explicativo, claro e objetivo sobre as possveis conseqncias das decises do usurio. - Funo operativa: Para operar qualquer aparelho, necessitamos de botes que nos permitam interagir. Na interface, isso acontece por diversos grupos de botes e reas onde podemos escrever. Os mais comuns so os botes de caixa de ferramentas, setas de navegao e menus com palavras ou cones explicativos. Isso significa que estas imagens caracterizam-se como locais de contato do usurio com o sistema e, por isso, sempre apresentam resultado. Todas estas funes so utilizadas nas interfaces de acordo com dois grandes objetivos: o de orientar o usurio na interao com o software por meio da interface e o de cumprir o objetivo para o qual ele foi projetado. Para que isso se cumpra, os elementos visuais com seus devidos significados, textos e outros sinais, como os sonoros, devem ser ordenados num leiaute coerente, legvel e compreensvel, dentro de princpios de design que assegurem a boa interatividade com o usurio.

37


DESIGN DE INTERFACE

AULA 10

LAYOUT

Agora que j dominamos os conhecimentos bsicos sobre a linguagem visual, vamos v-los aplicados ao projeto de interfaces orientado pelos princpios de design que renem o que j vimos at aqui. Alm disso, estes princpios servem para conferirmos se uma interface est realmente ergonmica.

Proximidade e alinhamento Imagens que pertencem a um mesmo grupo devem estar prximas, ter traos em comum. Estes traos so caractersticas como cor, contraste, forma, estilo de desenho, dimenso, entre outros. Isso facilita a leitura do usurio e a sua interpretao quanto ao significado da imagem. O alinhamento tambm permite estabelecer uma hierarquia que vai orientar a ordem de leitura na interface e, posteriormente, as aes na interao.

cones de controle da janela cones de ao cones de ferramentas

1 2

3

Figura 26: cones prximos e bem-alinhados facilitam a identificao dos grupos de funes.

Equilbrio, proporo e simetria As imagens que compem a interface devem ter uma relao de harmonia. Esta relao pode se dar de forma dinmica ou esttica: esta quando temos pesos iguais em dois lados ou todos os elementos centralizados. J aquela se d quando existe um ritmo ou uma insinuao de movimento, que deixa a composio agradvel.

38


DESIGN DE INTERFACEcomposio esttica composio esttica composio dinmica

Figura 27: composies simtricas (esquerda e central) e assimtrica (direita).

Cores e contrastes As cores e reas claras e escuras orientam a ateno do usurio para determinadas partes da interface. Funcionam como parte integrante das composies, sendo teis principalmente para dar nfase, orientar a leitura e dar importncia a um assunto.

Figura 28: modelo de aplicao de contraste em palavras grifadas.

Consistncia e identidade Uma interface pode ser composta por diversas partes ou pginas que devem ter consistncia ou identidade visual, a fim de permitir que as visualizemos como sendo da mesma famlia. Significa que temos de usar cores, estilos de desenhos, formas de dispor os textos, animaes como padres que do identidade a toda a interface.

Figura 29: duas diferentes edies de um mesmo software, cada qual com a sua identidade.

39


DESIGN DE INTERFACE Conciso 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 tambm queremos nos comunicar bem, usando as imagens mais adequadas nos lugares e ordem certos para o melhor aprendizado.

Visibilidade e Legibilidade Primeiro temos que distinguir dois conceitos. Nem tudo que visvel legvel. Se voc est a 5 metros de uma letra de meio centmetro de altura, ela vai ser visvel, mas certamente ser ilegvel, porque voc no consegue saber de qual letra se trata. Numa interface temos que poder ler, tanto os textos como as imagens, de forma confortvel. Neste caso, a dimenso tem importncia fundamental. Por exemplo, no caso de vdeos com transliterao de libras, se a rea do vdeo muito pequena, pode no ser possvel ler os sinais produzidos pelas mos. Estes princpios so gerais, mas em todo projeto devem ser observados enquanto requisitos bsicos de qualidade de design, sendo analisados nas interfaces.

40


DESIGN DE INTERFACE

Etapa 3 Design e Metodologia

AULA 11

O PROJETO DA INTERFACE

As etapas de um projeto de interface de objeto instrucional so muito parecidas s de preparo de uma aula presencial. Basicamente, h um conhecimento a passar, uma estratgia para facilitar o aprendizado e um planejamento dos meios para efetivar a aula. O que tentamos fazer num ambiente informatizado recriar o mximo possvel a impresso de participao em uma aula presencial. No entanto, sempre temos que ter em mente que uma mdia, seja informatizada ou no, uma apoio ao contato professor-aluno, o que no substitui a relao professor-aluno. Antes mesmo de definir o contedo do objeto instrucional, deve-se saber qual o perfil do usurio (aluno). Este perfil que vai dar pistas de como as questes relativas ao contedo dentro do objeto podero ser abordadas. Um perfil deve conter mais do que a idade e perodo em que se encontra o aluno. Devemos investigar um pouco dos hbitos, costumes e a vida fora da escola, para podermos trazer para o objeto de ensino as situaes que tenham um significado relevante para o aluno, para aumentar a familiaridade e a atratividade da interface. As informaes levantadas antes de iniciar o design servem principalmente para delinear um planejamento para todo o projeto. Esta fase de planejamento inicia-se pela constituio da equipe (preferencialmente multidisciplinar). Uma das primeiras decises a serem tomadas se vamos usar uma abordagem de design participativo ou no. O design participativo inclui um ou mais usurios em determinadas fases do projeto. Esta abordagem elimina retrabalhos e diminui o tempo do projeto, pois as falhas so corrigidas durante o andamento dos trabalhos, e no apenas no final. Dentro da equipe importante ter parceiros habilitados nas reas necessrias. Uma constituio ideal seria de conteudistas, pedagogo, designer grfico, ergonomista, profissional para orientar linguagem e estilo, e de acordo com a mdia a ser utilizada, pessoal tcnico em informtica ou outras reas necessrias. Uma boa interface produto de uma boa equipe. Constituda a equipe, o planejamento deve ser definido e registrado para que todos saibam o tempo e as seqncias das atividades a serem desenvolvidas. Veremos a seguir etapas gerais de um projeto de interfaces. Estas etapas so parte de uma metodologia de design ergonmico de interfaces humano-computador chamada Deigraf, mtodo que se apresenta na forma de ciclos, porque todo projeto que fazemos no a nica opo de

41


DESIGN DE INTERFACEsoluo, uma vez que sempre possvel modific-lo e melhor-lo em novas verses. Veja quais so as etapas e como elas vo acontecendo.

Figura 30: Ciclo do design ergonmico de GUI.

A problematizao a primeira etapa e dedica-se a delimitar o problema de projeto. Quanto mais bem definido o problema, mais fcil a soluo. Esta etapa tem por principal objetivo visualizar a informao necessria para montar o projeto de interface. Entre a problematizao e a anlise, vai haver uma decomposio (1). Significa que vamos dividir o problema em partes menores, como por exemplo, os problemas relativos ao estilo visual, os relativos apresentao de contedo, os relativos aos requisitos tcnicos e assim por diante. Basicamente, h uma organizao, inclusive para definir quem vai resolver cada um dos problemas. Uma vez resolvida esta fase, passaremos s anlises. Analisar, aqui, refletir sobre as informaes e tentar ver como o aluno v, isto , tentar colocar-se no lugar do aluno que ser o usurio principal da interface e, desta forma, entender o que ele necessita para uma boa interatividade. Isso significa compreender como e com o que o aluno se comunica no seu contexto dirio, para transportar isso, futuramente, para interface. Assim, possvel ter uma sntese (2) de como deve ser a interface. Entramos ento na fase de modelagem conceitual, onde comeamos a descrever em palavras e imagens o que queremos que aparea na interface. quando comeamos um processo mais criativo de rabiscar, discutir e propor solues gerais. Depois que a equipe chega a uma concluso sobre as linhas gerais da interface, hora de comear a codificar (3), isto , a partir das melhores idias, definirmos como ser a programao visual propriamente dita. O resultado se dar em grupos de menus definidos, forma de apresentao de textos, ilustraes, personagens, etc. Feito isto, passamos modelagem visual, que trata de colocar tudo organizado na tela, usando do recurso de diagramao para dar ordem, hierarquia informao visual, obedecendo s necessidades de comunicar o usurio, para que ele consiga realizar bem as suas tarefas. Na modelagem visual, todos os aspectos de linguagem visual j esto

42


DESIGN DE INTERFACEresolvidos: as cores, desenhos, relao de equilbrio visual, tudo acertado e definido. Isso pronto, podemos especificar a animao (4) necessria a ser implementada para a interface rodar. Nesta etapa onde se intensifica a programao do software. A seguir, a interface instalada, ou seja, o software com a interface em funcionamento instalado numa plataforma pr-determinada, onde se tem a possibilidade de realizar testes e verificaes formais de usabilidade com usurios dentro do seu contexto. Depois de validada a interface em ambiente real de uso (5) devemos acompanhar, dentro do possvel, qual ser a reao dos usurios por algum tempo, pois h certa tendncia de que a forma de o usurio utilizar a interface v se modificando. Na medida em que o usurio tornase mais experiente, ele automatiza os caminhos para chegar aos seus objetivos, e passa a ser mais exigente na eficincia da interao. Assim, se acompanharmos por algum tempo este processo, teremos subsdios para uma nova verso do produto que desenvolvemos.

43


DESIGN DE INTERFACE

AULA 12

SOLUCIONANDO A INTERFACE

ProblematizaoVoc j tentou dar soluo para um problema que no existe? Para solucionarmos bem os problemas de uma interface, fundamental termos conscincia clara dos problemas com os quais estamos lidando. Para tanto, as primeiras dvidas devem recair sobre o usurio, no caso o aluno, por que ele o foco principal do nosso trabalho. Como nem sempre isso possvel, pois trata-se de um processo dispendioso pesquisar um grande nmero de usurios, podemos trabalhar uma pequena amostra que represente o grupo de usurios. Por meio de entrevistas e observaes, busca-se o seguinte: identificar os principais objetos e artefatos com os quais os usurios esto habituados; coletar informaes visuais e textuais sobre os cenrios do contexto do usurio; obter uma viso de como o usurio faz atualmente aquilo que far futuramente, mediado pela interface a ser projetada; obter uma viso sobre o fluxo e organizao da tarefa que o usurio realizar na interface; aprender a linguagem do usurio (suas terminologias, jarges, expresses visuais); reunir informaes sobre as principais dificuldades do usurio ao realizar uma tarefa similar a que ser realizada na interface, identificando tempo para realizao, principais erros e incompreenses; reunir informaes sobre o ambiente de trabalho, como por exemplo, uma sala de aula, ou o local de acesso a internet.

Para chegar a estas informaes, vamos usar trs esquemas que vm a nos auxiliar. O primeiro, chamado modelo do contexto da atividade; o segundo, chamado fluxo da tarefa, e o terceiro, conhecido por levantamento de variveis.

44


DESIGN DE INTERFACEModelo do contexto da atividade um esquema originado de uma rea chamada Teoria da Atividade, e que vem sendo largamente utilizado no design de interfaces. Trata de identificar os componentes bsicos e os atores da atividade para a qual estaremos projetando a interface. Veja a seguir, como simples montar este modelo.

MODELO DE CONTEXTO GERAL DE UM PROJETOFerramentas / meiosmetodologia de projeto, softwares de edio, pesquisas...

Atoresalunos, professores, coordenadores, tutores.

Objeto

processo de transformao

Resultado interface de objeto de aprendizagem

projeto de interface

Regrasrequisitos pedaggicos, requisitos de plataforma, requisitos de linguagem, acessibilidade, cronograma de produo, limite de alunos por turma.

Tarefas / hierarquiacoordenao de equipe de produo, preparao de contedo, Comunidade: design das telas, alunos do ensino fundamental, testes de usabilidade, professores capacitado em EaD, implementao do objeto. comunidades das regies, atendidas pelo sistema.

Figura 31: Modelo de contexto geral de um projeto.

45


DESIGN DE INTERFACECom este quadro j possvel formular algumas questes importantes, que so as seguintes: usurios (atores) sabem usar as ferramentas? Os Para responder esta questo, temos que saber quem o usurio e com quais ferramentas/meios ele j trabalha. Isso possvel saber por um questionrio ou entrevista. Quais as caractersticas scio-culturais dos usurios e seu contexto?

Compreender a cultura do usurio no uma tarefa muito fcil. Necessita de tempo e imerso no contexto em que ele vive. Em vrios casos nem possvel. Em comunidades de deficientes auditivos, por exemplo, h uma linguagem prpria de difcil acesso para quem no est habituado com ela. Quando temos questes como estas, temos que pedir auxlio a um especialista e, preferencialmente, manter um usurio representante da comunidade em todas as fases do projeto. Ainda, nesta fase que fazemos um levantamento de algumas variveis sobre: - Ocupao espacial do ambiente de trabalho: se bem observada, a mesa de uma pessoa pode dizer como ela organiza o seu trabalho, que ferramentas usa (como uma calculadora, por exemplo) e em que ordem. Estes dados nos ajudaro futuramente a definir a localizao dos contedos, botes e recursos na interface. - Variveis estticas: imagens, quadros na parede, murais que existem no ambiente do usurio. Elas podem indicar uma preferncia esttica que pode ser aplicada interface. - Variveis cognitivas e organizacionais: o registro da forma como um aluno organiza sua agenda pode dar idias para organizar a interface. Esta observao importante, porque tambm pode nos mostrar hierarquia e fluxo de informao. Um cartaz que o aluno faa mostra como ele ordena e d importncia s informaes sobre um contedo. Estes referenciais nos permitem visualizar parte do mapa mental do aluno. - Qual a hierarquia das tarefas que o usurio-aluno far: quando um aluno usa uma calculadora, est dividindo a tarefa de calcular com esta ferramenta. Ento quando sabemos o que deve ser realizado dentro de uma tarefa, e em qual ordem, podemos dividi-la entre o que realizado pelo software e o que realizado pelo usurio. Primeiro preciso identificar o que a tarefa compreende, como no modelo do contexto, e depois fazer um fluxograma da tarefa. Este passo essencial para definir toda a navegao.

46


DESIGN DE INTERFACEVeja o exemplo:

FLUXO DE TAREFA 'INSCRIO EM OFICINA'incioParticipante busca informao para inscrever-se em uma oficina Preencher formulrio de inscrio na oficina selecionada e enviar Checar se existe vaga

no

sim

Apresentar grupos de oficinas disponveis

Checar se o participante est inscrito no evento

Selecionar dentro de um grupo uma oficina de interesse disponveis

Partipante noinscrito sim no evento ?

Registrar participante na oficina selecionada

Apresentar ao participante a sinopse (ttulo, ministrante, n de vagas, requisitos e proposta de trabalho) das oficinas disponveis

Informar ao participante que ele no est inscrito no evento

Fornecer ao participante confirmao da inscrio

resultadoParticipante tem uma vaga em oficina Checar ordem de chegada do formulrio para inscrio na oficina escolhida

Verificar se existem vagas e se h compatibilidade com os requisitos

no

sim

Informar que vagas esto esgotadas

Figura 32: Fluxo da tarefa 'inscrio em oficina'.

- Ao final da interao, qual o resultado desejado? importante saber exatamente o resultado desejado da interao, para poder montar os requisitos da interface. Em objetos de aprendizagem, os resultados da interao so relacionados ao aprendizado, possveis de serem verificados nas atividades que os alunos executam. Os resultados relacionados interatividade da interface so possveis de serem percebidos em observao direta do usurio interagindo ou em questionrios sobre a interface. Feito todo este levantamento, e organizadas as informaes, possvel passarmos s anlises, como veremos a seguir.

47


DESIGN DE INTERFACE

AULA 13

ANLISES E SOLUES PARA A INTERFACE

AnliseA primeira questo : qual o tipo de anlise que faremos? Para o design de interfaces, nos focamos em anlises que permitam construir uma comunicao entre o software e os usurios e, para tanto, so necessrias algumas formas de anlises, como a funcional, a simblica e a contextual. A anlise funcional mais tcnica e deve contar com o conhecimento de desenvolvedores de softwares e experts em ensino distncia. usual que, ao produzir um objeto de aprendizagem, as questes de requisitos funcionais sejam previamente estabelecidas. A soluo comea quando a equipe toma conhecimento destas informaes no incio do projeto, porque determinam diretivas que delimitam o projeto. Um exemplo saber quais as possibilidades dos equipamentos onde o objeto ser instalado, se eles contam com caixas de som, sem tm como ler CDs, qual a definio da imagem no monitor, etc. Existe um outro tipo de anlise funcional que relacionada questo pedaggica. Significa que se deve analisar quais as melhores ferramentas para o aprendizado de um determinado contedo. Por exemplo, para operaes que envolvem propores de matemtica, sabe-se que importante visualizar comparativamente as propores. Para o aprendizado de equaes qumicas importante o uso do recurso de animao para ver como acontecem as reaes. Para ter-se uma deciso sobre os recursos mais adequados para uma determinada aprendizagem necessrio consultar quem j tenha experincia na rea ou pesquisar artigos e outros produtos bem-sucedidos. A anlise simblica feita tanto intuitivamente como por um processo lgico. Enquanto fazemos o levantamento da informao na problematizao, vo surgindo vrias imagens que representam o ambiente que nos faz pensar na tarefa (a imagem de um laboratrio, por exemplo). No entanto, os usurios tm sua prpria interpretao de onde um bom lugar para estudar e isso pode influenciar na atratividade que a interface ter, dependendo da metfora da qual se utilize. possvel utilizar uma metfora de passeio, por exemplo, para ensinar mapas e coordenadas se, durante nossas pesquisas com o usurio, ele manifestar esta expectativa. Sabendo da expectativa do usurio, temos que observar os dados e imagens levantados na problematizao. Se tivermos fotos do local onde o aluno mais gosta

48


DESIGN DE INTERFACEde estar, poderemos tentar identificar o que mais importante para ele e question-lo sobre o significado dos objetos com os quais ele interage. Se um aluno tem, no seu local de estudo, papis agrupados e colados na parede, mesmo que no seja sobre um quadro, ele est fazendo um mural. Caso vejamos que os papis so de datas importantes, como avaliaes, ento, estamos vendo um mural sendo usado como agenda. Esta forma de anlise simples e muito til, e podemos faz-la sempre. Pergunte: - Qual o contedo? Datas importantes. - Qual a funo da mensagem? Agendar-se para as provas. - De que forma a mensagem est sendo transmitida? Mural improvisado na parede. Observando bem os dados e, principalmente, imagens, como fotografias ou filmagens do contexto do usurio, teremos grande parte das referncias de comunicao visual para a interface. Esta experincia de observar o usurio no seu contexto leva a um melhor entendimento do todo. Significa que nos aproximamos mais do que o usurio sente enquanto est fazendo um trabalho. No entanto, a forma com que um usurio faz o seu trabalho se modifica com o passar do tempo. Se fizermos uma rpida retrospectiva, at bem pouco tempo usvamos apenas quadro e giz, alm de algumas formas de apresentao, como cartazes e transparncias. Hoje, j temos quadros brancos no lugar dos quadros verdes, datashow, monitores de computadores e, logo, telas de celulares como ferramentas para o aprendizado. Mesmo com todas estas modificaes, ainda comum utilizar uma imagem de algum na frente de um quadro verde para representar o 'professor'. Isso acontece porque ainda temos uma forte memria visual da experincia vivida com o professor e o quadro verde. A questo histrica da cultura material, bem trabalhada, oferece um bom subsdio para a determinao da identidade visual a ser aplicada na interface. Assim, a fase de anlises oferece respostas e hipteses de como deve ser a interface. Estas diretivas vo nos dar idias para passarmos a um processo criativo j identificado no Deigraf como modelagem conceitual.

49


DESIGN DE INTERFACE

AULA 14

MODELAGEM CONCEITUAL E VISUAL

A modelagem conceitual no uma fase que tenha separao muito distinta da fase de anlise. Durante a anlise, muitas idias vo surgindo e tomando forma. comum termos vrias solues para um mesmo objeto de aprendizagem, e at, termos definidas as melhores formas para um determinado projeto. No entanto, recomendado que entre a fas

TIC Fin 2sem Design Interfaces Completa

Documents

Transcript of TIC Fin 2sem Design Interfaces Completa