LA PRESENTACIÓ DEL CONEIXEMENT A INTERNET,
2001
| articulo
Introducció al disseny interactiu d'elements dinàmicsLa qualitat d'un lloc web depèn en gran part
de l'aplicació de coneixements clàssics de disseny i il·lustració. Aquest tipus
de regles ja han estat tractades en obres anteriors, per la qual cosa l'autor
pot consultar Fernandez-Coca (1998), Bou (1997), Matas (1997) o Ribas (1997). En aquest article incidiré en
algunes regles de disseny interactui per a aquelles persones que ja tenen una
bona base gràfica (composició d'elements, simetria, distribució de formes,
etc), però desconeixen els aspectes relatius a la part viva (mòbil, animada) de
les pàgines web. Farem algunes pinzellades conceptuals i aplicatives en els
temes següents: zones sensibles, economia i redundància, ergonomia, conjunció
de text i d'imatge, hipereext i animació limitada. No entraré en d'altres
aspectes de guió t disseny relatius a la gestió de l'argument i la navegació,
l'ambientació d'aplicacions, els criteris de producció i el control de qualitat
de les aplicacions multimèdia.
Zones sensibles
La unitat bàsica de treball en multimèdia és l'escena
interactiva, pantalla interactiva o pàgina interactiva (la terminologia varia
en funció de l'autor). Això vol dir una pantalla a la vista de l'usuari, que
consta dels elements que es plasmen en la figura següent:
 Totes aquelles accions de l'ordinador que es produeixen abans que l'usuari interactiu corresponen al lot de tasques d'entrada. Els exemples són molt diversos segons les aplicacions; vegem-ne alguns: 1. En una pantalla, es col·loca la il·lustració de tons. 2. En una pàgina web, s'activa una música inicial que s'interromp
quan l'usuari fa clic per primera vegada.
3. En un joc s'extrau una pregunta a l'atzar d'un banc de
preguntes.
4. En una aplicació d'investigació psicològica,
l'ordinador pren nota del temps inicial per saber quant temps trigarà l'usuari
a sortir d'aquella pantalla.
5. En una escena, un text que diu «benvinguts» es
desplaça de dreta a esquerra per la pantalla abans que aparegui el decorat.
Totes aquestes accions, per tant, es produeixen abans que l'usuari faci cap acció i poden ser més o menys prolongades. El temps que triga l'ordinador de l'exemple quart es d'uns mil·lisegons; en canvi ens podem imaginar una aplicació educativa en la qual abans que l'usuari respongui les preguntes, aparegui un vídeo de mig minut a la part superior dreta de la pantalla, o pensem en jocs d'ordinador en què, en entrar en una habitació, s'encén un llum, se senten sons d'objectes que es mouen, etc. Pel que fa al lot de tasques de sortida, el lector pot
intuir que es tracta de la mateixa cosa, però amb la diferència que les accions
es faran en abandonar l'escena.
El lot de tasques de fons es mereix una menció especial.
Es tracta de totes aquelles accions que s'executen en la màquina mentre
l'usuari no fa res. Sempre explico que és important que les pantalles d'una aplicació
multimèdia o d'un lloc web es conceben com a elements vius, és a dir, sempre ha
de succeir-hi alguna cosa (algun moviment) encara que l'usuari no hi estigui
interactuant. Aquesta és una de les diferències entre el cinema i el
multimèdia: al cine, el fons té vida per si mateix (les fulles de les plantes
del bosc es mouen amb el vent); en multimèdia és el dissenyador qui estableix
si alguna cosa es mourà o no.
I, finalment, la part d'especificacions interactives
d'una escena es pot pensar sempre com la col·locació d'unes zones sensibles a la interacció (normalment al
clic del ratolí o al pas del cursor) sobre un fons.
La utilitat d'aquest esquema rau en el fet que és molt
útil tant per a la concepció (guió) dels audiovisuals com
per a la producció. És a
dir, la utilització d'aquest esquema ajuda a assentar les bases per a un
llenguatge comú i analític a l'hora de muntar una aplicació entre diverses
persones.
De les regles generals per al disseny de zones sensibles,
ressaltem les més comunes de tipus ergonòmic:
- Normalment no cal que es malgastin esforços de producció fent que les zones sensibles s'adaptin exactament a les figures de fons. Per exemple, si en un lloc de la pantalla hi ha dibuixada la figura d'un cotxe, tranquil·lament es pot definir una zona quadrada que englobi una part o la totalitat del vehicle, i que, en passar sobre aquesta, aparegui el text «cotxe». És en la ment de l'usuari que es forma l'associació etiqueta-imatge i aquesta associació es produeix fàcilment, només pel fet que la imatge és relativament pròxima a l'etiqueta. - En general, les zones sensibles es dissenyen en sentit
vertical, ja que l'usuari sol «escombrar» la pantalla horitzontalment.
D'aquesta manera ens assegurem que s'entrebancarà amb la zona sensible (vegeu
figura 2) en moure el ratolí per la pantalla. En definitiva, el que fa una zona
detectable depèn normalment més de la seva altura que de la seva amplada.
- Les zones sensibles de comportament regular
contribueixen a la uniformitat de l'aplicació i al fet que l'usuari s'hi
familiaritzi. Es reserven preferentment per a aplicacions destinades a usuaris
novells.
- Les zones sensibles de comportament condicionat o de
resposta i desconnexió augmenten la interactivitat de l'aplicació, la sorpresa
i la frescor del discurs narratiu. Es reserven, això no obstant, per a usuaris
acostumats a utilitzar les aplicacions multimèdia.
 Els llenguatges d'autor o de disseny de pàgines web permeten que els elements estàndards també siguin sensibles (botons, icones, icones animades, etc.). A l'efecte del guió ens acostumem a referir a aquests com zones sensibles sense distinció; en la fase de disseny gràfic, però, el dissenyador entra en detall sobre la composició de la pàgina i sobre cada tipus d'element. Economia i redundància El principi d'economia es basa en la convicció que el cervell humà és un ens actiu, receptiu, àgil i extremadament ràpid en el procés de la informació. Per això es parteix de la base que qualsevol aplicació multimèdia (en suport CD o a la xarxa) ha de subministrar només la informació precisa perquè s'activi tot un mecanisme de reconstrucció i interpretació. Una altra forma d'aplicar el principi és subministrar molta informació però a un ritme accelerat, de manera que la densitat sigui alta. Ambdues variants comparteixen una conclusió comuna: si el cervell del receptor està ocupat, aquest es diverteix; en el cas contrari, s'avorreix i abandona l'aplicació. En obres anteriors ja he explicat els tipus d'economia,
bàsicament cinc: de temps, d'espai, conceptual, de llenguatge i d'espera. D'aquests
tipus, el darrer és el que fa referència de forma més directa al ritme d'una
aplicació. Ens diu que en una aplicació multimèdia no s'ha d'entrar en una
dinàmica d'elements que s'esperen els uns als altres, sinó que cal superposar-los.
La tècnica s'agafa prestada de la narració cinematogràfica: veiem una escena i
sentim un so que pertany a la següent, és a dir, la banda sonora de la segona
escena no ha esperat que es desallotgés la imatge de la primera.
Aquest efecte, lluny de produir desconcert, es converteix
en una forma àgil d'enllaçar i ajuda a la percepció de continuïtat del producte
audiovisual. En teoria, per tant, cal esperar que sigui possible en una
aplicació multimèdia o en una pàgina web activar diferents elements asincrònicament
i despreocupar-se'n: l'usuari ja els donarà el sentit correcte.
D'altra banda, a aquesta concepció innovadora i de
predomini del dinàmic, que és sempre molt útil quan es fan aplicacions els
destinataris de les quals estan familiaritzats amb el multimèdia, s'oposa als
principis ergonòmics bàsics de redundància. Això és, per a aplicacions
destinades a usuaris amb un desenvolupament menor
dels hàbits
audiovisuals (o aplicacions en què predomini el valor de la informació i s'imposi un ritme lent i
segur), s'aconsella aprofitar uns recursos redundants perquè guiïn l'usuari i evitin
confusions o pèrdues
de l'aplicació.
Els recursos més típics són els relatius a la redundància de reforç. Per exemple, Microsoft ha
apostat per aquest estil en les icones de menú de les seves aplicacions d'Office (97 i 2000); si situem el cursor
damunt una icona i no el movem, apareix al cap d'una estona una etiqueta
explicativa. Un altre exemple és el de les pàgines web amb enllaços etiquetats, és a dir, aquells que
contenen una explicació
prou clara però
que, quan es passa pel seu damunt, hi apareix a més un petit text.
En el disseny d'aplicacions
i
llocs web es discuteix fins a quin punt s'optarà per un estil redundant o no, L'exemple de
Microsoft és
clar a causa del fet que els seus productes es conceben per a un ús universal (i, per tant,
una gran part dels usuaris finals necessitaran aquest ajut suplementari per
utilitzar-los amb desimboltura). La decisió doncs, es fonamenta en el tipus d'usuari
final. Ara bé, hi
ha tres idees que s'han de considerar a l'hora d'optar pels dissenys
redundants:
- És obligatori seguir les modes. És a dir, si la majoria de pàgines web i els productes ofimàtics utilitzen tons groc i text negre, afegeixi's a la tendència general. La raó és òbvia: vostè vol crear una ajuda per a l'usuari; doncs bé, tingui present que si la seva aplicació és «com totes» aquesta semblança ja és un punt. Eviti, per tant, una excessiva excentricitat gràfica en aquests àmbits. - Adopti pautes de
regularitat. Per exemple, si cada cop que es prem sobre un enllaç apareix una icona
explicativa o se sent un so de reforç abans de bifurcar, asseguri's que això passa sempre. En el cas
contrari, això
despistarà
l'usuari i l'absència
puntual de l'element de reforç li crearà inseguretat.
- Hi ha un consens creixent
en la necessitat d'elements redundants de tipus general en els llocs web: els
mapes del lloc, els buscadors interns, les ajudes i altres recursos similars.
En aquests casos la redundància
no s'encamina a l'usuari novell, sinó al que té pressa, és a dir, al que cerca l'eficiència del lloc com a punt
d'informació.
Sobre això, és útil consultar la discussió sobre el lloc web i la
seva concepció
(com a pàgines
de navegació o
com a base de dades) que es troba en Ribas (2000).
Conjunció de textos i imatge Hi ha principis bàsics en aquest camp que es coneixen però que no s'apliquen encara a Ies pàgines web (i no es pot dir que sigui per limitacions tècniques). En comentarem dos: l'ancoratge del text respecte de la imatge i la dramatització de la imatge respecte del text. El primer neix de la idea
que la imatge és,
per natura, polisèmica.
Una fotografia aïllada,
per exemple, situada tal qual en una pàgina web pot significar moltes coses
diferents. El text que l'acompanya promourà que adoptem un significat concret dins dels
possibles significats, per ells es diu que ancorarà la imatge. La publicitat
juga molt bé amb
aquest mecanisme, ja que en els anuncis de revista (de pàgina sencera) ens fixem en
una imatge que ens crida l'atenció, que pot significar moltes coses i que pot
ser lleugerament provocativa (transgressora); aleshores llegim el text i
entenem el significat de l'anunci, ens arriba el missatge del publicista via un
procés
d'ancoratge de l'estímul
visual inicial que ens ha captivat.
El segon es troba àmpliament desenvolupat en
la composició
periodística
i consisteix en el rol dramatitzador (humanitzant i exemplaritzant) que tenen les
fotografies que acompanyen les notícies. Si el titular parla de distanciament
entre dos polítics,
per exemple, la fotografia els mostra asseguts a la mateixa taula però en llocs diferents. La
imatge, per tant, té un
paper d'un flaix momentani que il·lustra la notícia (a més la reforça i li dóna credibilitat).
El quid de la qüestió rau en el fet que aquests
dos recursos tan genuïnament
audiovisuals no són
encara d'ús
comú a
les nostres pàgines.
La imatge té
encara aquest paper de fons agradable i contextualitzador, es presenta sovint
difuminada (o amb brillantor apagada) i es limita a fer de suport del text que
es desplega al damunt.
Una aposta més radical, amb el suport de
recursos tècnics,
augmentaria sens dubte l'impacte comunicatiu d'una pàgina web. Faci un
experiment: agafi una mostra d'unes deu pàgines que segueixen l'estructura conservadora
exposada en el paràgraf
anterior, pensi després en
com podrien presentar-se atenent un dels recursos exposats, és a dir, pensi si es podria enfocar com
un anunci publicitari (ancoratge) o com una notícia periodística (dramatització); aleshores veurà que amb alguna d'aquestes és possible i, a més, veurà com el resultat millora
notablement.
Hipertext El tema de com unes pàgines s'obren en un ordre no predeterminat davant l'usuari i aquest construeix un cos d'informació és tan polèmic i hipotètic que jo no gosaria modestament de qualificar-lo en l'actualitat d'esotèric. Certament la psicologia cognitiva ha avançat molt en els models d'aprenentatge construcrivista i molts autors hi recorren per fonamentar llocs web de caràcter obert, lliure i fortament hipertextualitzat. Potser l'experiència, rigorosament avaluada, mostrarà algun dia que els usuaris es perden sovint, abandonen el llocs o triguen massa a trobar el que busquen. Com a regla a seguir, per tant, hom ha de posar-se en el
lloc de l'usuari final i preguntar-se no només el que busca sinó com ho vol.
Per exemple, té sentit un document hipertextual de dret informàtic? Fins a cert
punt sí, i fins a cert punt no. A un estudiós li pot ser molt útil disposar
d'unes pàgines sobre lleis de referència; d'altres sobre jurisprudència i
d'altres sobre consells generals d'actuació. Ara bé, potser li vingui de gust
poder imprimir de cop cada una d'aquestes famílies de pàgines, per estudiar-les
amb cura assegut còmodament a la seva taula de treball. Què passa aleshores si
hem dissenyat cada un d'aquests textos amb un fort nivell d'hipertextualització,
amb enllaços explicatius, amb finestres que apareixen i desapareixen? Doncs que
l'usuari s'ho veurà negre per obtenir el que vol, ja que iniciarà una àrdua
tasca d'impressió a terminis en la qual es perdrà ràpidament (no sabrà què ha
imprès i què li falta imprimir, i a més, segur que es deixarà al final pàgines
sense llegir).
Per tant, sense deixar d'investigar i llegir els
temptadors resultats recolzats en el constructivisme, la meva proposta
consisteix a recolzar-se una mica més en l'ús a l'hora d'atacar problemes
d'hipertextualització. Per part meva, vaig avisar de certs problemes típics
dins Bou (1997) però ara es disposa, a més, d'unes reflexions inreressants dins
Ribas (2000).
Animació limitada L'equip d'animació de Tex Avery (Bugs Bunny i cia.) aprofitava en temps de crisi les transparències d'animació: eren esborrades i reutilitzades. Les sèries produïdes per Hanna-Barbera (Flinstones, Yogui Bear, etc.) optimitzaven la producció amb l'ús de matrius d'estil d'animació limitada (aconseguir l'efecte de moviment amb un nombre de fotogrames reduït al màxim i estandarditzat). Amb tot vull que el lector s'adoni que sempre hi ha hagut un interès per obtenir un alt rendiment (de forma molt diferent) de la producció d'animació, és a dir, sempre s'hi ha volgut comptar malgrat el seu cost elevat. Si els Simpson van suposar un experiment d'èxit i
innovador en desenvolupar tota la sèrie per mitjà de dibuixos amb traços
regulars i simplificats (ulls, mentons, mans, figures humanes...) i en basar la
força expressiva en el guió, es pot dir que ara South Park ha collat una mica
més el vis. És gairebé increïble notar la naturalitat final del producte
resultant quan els dibuixos de base es limiten pràcticament a formes
geomètriques elementals (ulls de cercle rodó, mans quadrades, un rectangle per
tors, etc).
Tots aquests exemples han de servir perquè els dissenyadors
de pàgines web s'adonin que l'animació és un camp agraït en la recerca i que
les idees agosarades solen donar bons resultats. Si hom s'entreté a mirar amb
detall les col·leccions de petits gif animats
que omplen la xarxa percebrà la tremenda simplificació gràfica (dibuix de base)
i dinàmica (nombre de fotogrames) a què ha estat sotmès el conjunt abans de ser
posat a la pàgina. I malgrat tot funciona! És a dir, captiva l'usuari, dóna
vida a la pàgina i resol molts problemes d'espais incòmodes, excés de rigidesa,
etc.
Per això, el consell que dono sobre això és que una part
de la producció s'inverteixi en animació limitada. Ja s'ha vist que tant la
reducció de fotogrames com la simplificació del dibuix base pot donar bons
resultats. Sembla que bàsicament és qüestió de jugar amb la mida petita i de
trobar un estil adequat. Tan sols fa falta, doncs, intentar-ho. Les pàgines
produïdes guanyaran en impacte comunicatiu.
|
Sobre l'autor
GUILLEM BOU
Llicenciat en Matem à tiques i en Inform à tica. Doctor en Ci è ncies de l'Educaci ó per la Universitat Aut ò noma de Barcelona.
Relacionat 18 LA PRESENTACIÓ DEL CONEIXEMENT A INTERNET, 2001 | articulo Elisava TdD Llibres 18 LA PRESENTACIÓ DEL CONEIXEMENT A INTERNET, 2001 | articulo EDUARDO HERRERA FERNÁNDEZ La pantalla com a nou suport de la imatge de la paraula La paraula i, a través de l'escriptura, la comunicació verbal en la seva totalitat, són part integrant de la comunicació visual, que avui dia no està determinada únicament pels suports impresos, sinó també pels mitjans i suports digitals d'aparició recent. La pantalla de l'ordinador ha irromput com a nou suport gràfic i intel·lectual que aspira a l'hegemonia cognitiva. Que la pantalla hagi substituït els suports tradicionals indueix a reflexionar i a reconsiderar els fonaments que han determinat l'evolució dels sistemes escrits de comunicació en els darrers cinc-cents anys. Aquest canvi no sols afecta qüestions de configuració formal, sinó que també incideix en aspectes ergonòmics en funció de la llegibilitat, en els hàbits de lectura, en l'accessibilitat a la informació, en l'estructuració dels continguts i en la particular atenció a la potencialitat expressiva de la paraula, entesa en la seva faceta visual. S'ha plantejat un nou mecanisme cultural que està col·locant els fonaments d'una tecnocultura que condiciona actualment la dimensió humana. [...] |