Principios de diseo para la WWW

(5.502 palabras 12 pginas)

Dr. Raymond Colle
Facultad de Comunicaciones
Pontificia ni!ersidad Cat"lica
#antiago de C$ile
rcolle%puc.cl
&l sistema de la ''' implica (ue parte de la interfa) est predise*ada+ formando parte de la
aplicaci"n (ue re(uiere el cliente para acceder a los contenidos (el ,!isuali)ador, o ,bro-ser,).
Pero+ a diferencia de otras aplicaciones+ otra parte de la interfa) forma parte integrante del
conte.to / del contenido espec0fico de los mismos documentos+ es decir (ue depende de cada
pro/ecto en particular /+ por lo tanto+ del dominio (ue tiene el autor de los recursos (ue estn a
su disposici"n. &sto es algo mu/ no!edoso en el mundo de la informaci"n por medios
computacionales.
,1a fle.ibilidad de una interfa) emergente programada dinmicamente puede constituir en s0
misma un nue!o paradigma de la interacci"n $ombre2ordenador en los no!enta., (3aines 4
#$a-+ p. 526)
Para reali)ar un adecuado dise*o de soft-are informati!o o formati!o operable de este modo
(aun(ue pueda ser limitado a una 7ntranet+ es decir una red cu/o acceso es restringido a un
grupo de usuarios pertenecientes a una instituci"n determinada) es necesario tener en cuenta
algunos principios (ue e.pondremos a$ora / (ue son el fruto de in!estigaciones / de la
e.periencia de creadores / administradores de sitios -eb.
8 pesar de la reciente profusi"n de libros relati!os al dise*o de documentos para la '''+ los
in!estigadores recalcan la ausencia de una !erdadera teor0a e incluso de una pragmtica
claramente definida. 3ran parte de estos libros son el producto de la 2mu/ incipiente2
e.periencia de dise*adores grficos (ue consideran $aber tenido 9.ito con los sitios (ue $an
dise*ado (!9ase por e:emplo el t0tulo ,Creating ;iller -eb sites, 2,Crear sitios -eb (ue matan, 2
de <. #iegel). #in embargo+ con!iene recordar (ue el propio dise*o grfico+ en s0 mismo+ no
descansa a=n en ning=n soporte te"rico consolidado+ como lo recuerdan 8rfuc$+ C$a!es /
1edesma>
,1a denuncia del escaso desarrollo te"rico / metodol"gico del dise*o grfico constitu/e un
lugar com=n en el discurso acerca de la disciplina., (8rfuc$+ C$a!es / 1edesma+ p. 12?)
,&l dise*o constitu/e una prctica $eterog9nea+ una profesi"n plural en la (ue concurren
!ariantes t9cnicas+ metodol"gicas+ culturales / estil0sticas., (ibidem+ p. @?)
Ao es+ por lo tanto+ en la bibliograf0a sobre dise*o grfico ni en las publicaciones de
dise*adores acerca de sitios 'eb donde se deben buscar principios orientadores. Bales libros
podrn ser =tiles+ esencialmente+ para recopilar e.periencias e $ip"tesis / 2sobre todo (ui)s2
para tener una clara !isi"n de lo (ue no debe $acerse. Pero no creemos (ue se $a de llegar al
e.tremo de resumir todo+ como lo plantea 1/nc$ 2a :uicio de #$neiderman+ uno de los me:ores
gu0as e.istentes para el dise*o de -ebs2+ en la sola m.ima de
,e(uilibrar el poder de los !0nculos $ipermediales con la capacidad de insertar grficos /
medios m"!iles (motion media), (#$neiderman+ p. C).
#in embargo+ e.isten otras bases para orientar a los creadores de sitios / productores de
documentos de 'eb> el conocimiento acerca del dise*o de interfaces basado en el usuario+ del
cual se pueden deducir m=ltiples criterios a partir de los bsicos (ue son> atracti!o !isual+
comprensibilidad+ utilidad+ eficacia / ,na!egabilidad, (#$neiderman+ pp. 525). Pero tambi9n+
como lo se*ala este autor+ las teor0as cogniti!as son una base s"lida para este prop"sito>
,&n situaciones nue!as+ las teor0as cogniti!as / sobre la percepci"n deben estructurar la
discusi"n / guiar a los dise*adores., (#$neiderman+ p. 5) .
1. Principios generales para un sitio web
no de los problemas ms radicales de la creaci"n de un sitio -eb es la di!ersidad de los
clientes (ue se le conectarn.
,Da/ (ue acomodar una situaci"n en (ue los usuarios usan diferentes na!egadores 2con ma/or
o menor capacidad2+ diferentes !elocidades de transmisi"n+ diferentes tama*os de pantalla. E
la presi"n por producir pginas ms !istosas / con ms recursos (como los applets) desborda a
!eces el criterio l"gico (ue se*ala la con!eniencia de orientarse al com=n denominador (ue es
$abitualmente ms ba:o. Puede ser altamente con!eniente disponer de !ersiones de te.to con
pocas o pe(ue*as ilustraciones+ para una fcil transmisi"n por un menor anc$o de banda+
especialmente si se destinan a pa0ses en desarrollo, (#$neiderman+ p. C).
Bambi9n $abr0a (ue tener en cuenta las limitaciones del acceso telef"nico / de la recepci"n en
aparatos porttiles+ as0 como los nue!os sistemas de recepci"n (ue podr0an difundirse en el
futuro (PC#+ pantallas de pulsera+ etc.).
<e los e.pertos en dise*o de interfaces 2como 'einsc$en;+ Famar / Eeo (pp. 2?@22G@)2
recogemos las siguientes recomendaciones para el dise*o de un sitio -eb>
H Pro!eer contenidos sustanti!os / actuali)ados (lo (ue la audiencia (uiere recibir+ no lo (ue el
emisor (uiere decir)+ lo cual re(uiere conocer bien los intereses de la audiencia.
H Ioti!ar bien en la primera pgina+ para (ue el !isitante mar(ue el sitio como interesante.
H <ar prioridad a la facilidad de uso.
H Crear un dise*o grfico unificado (!i*etas / colores co$erentes).
H na organi)aci"n :err(uica de las pginas facilita la comprensi"n / la na!egaci"n+ pero $a/
(ue asegurar al lector (ue al tercer JclicJ encontrar lo (ue busca (Is ni!eles s"lo deben
contener detallesK ms JclicsJ deber0an corresponder a na!egaci"n trans!ersal).
H 1a pgina inicial (,$ome page,) debe dar acceso a los di!ersos contenidos pero tambi9n
con!encer del inter9s del sitio> se debe informar / moti!ar a tra!9s de la imagen / el men=.
H #i se usa una imagen2mapa sensible+ colocar te.to e(ui!alente (para usuarios (ue no ba:en la
imagen / para los ,spiders,+ programas (ue abastecen los ,motores de b=s(ueda, de la 'orld
'ide 'eb).
H sar submenus si el sitio es mu/ grande.
H Bener en cuenta el anc$o de banda (si el acceso ser por m"dem+ no puede $aber
ilustraciones pesadas ni multimedia).
H 8segurar puntos de referencia permanentes+ para (ue el !isitante no se pierda (barra de
iconos o frame con men=). Puede ser con!eniente incluir un mapa grfico del sitio / es siempre
aconse:able incluir una tabla de contenido con todos los enlaces pertinentes.
H 7dentificar el m"dulo o sitio en todas sus pginas / facilitar en todas un ancla (ue remita a la
portada 2/ e!entualmente $acia las di!isiones ma/ores2+ /a (ue un motor de b=s(ueda puede
$acer llegar el lector a cual(uier pgina.
H 8ntes de incluir marcos (frames) / rutinas en Fa!a+ $a/ (ue estar seguro de (ue los
destinatarios disponen de un na!egador con la capacidad re(uerida. #iempre $a/ (ue
programar para un m0nimo / no un m.imo.
H &!itar poner informaci"n solamente en forma grfica (el lector puede des$abilitar la recepci"n
de imgenes para ir ms rpido). 7ncluir siempre+ por lo tanto+ men=s !erbales.
H &!itar las anclas dentro de un te.to (si no es un men=)> interrumpen la lectura. &s me:or
ponerlas al final de un prrafo. <eben sugerir con claridad lo (ue se obtendr0a al acti!arlas (/ el
tama*o del documento por recibir+ si es mu/ superior al promedio $abitual).
H Bener muc$o cuidado con enlaces secuenciales (pgina pre!ia / pgina siguiente) /a (ue no
estar claro si se refieren a la secuencia f0sica (pre!ista por el emisor) o a la (ue est siguiendo
el lector ((ue puede $aber !enido ,saltando, desde otra ,rama, u otro sitio). 8dems+ la
inclusi"n de secuencias es comple:a para la sustituci"n de pginas /a (ue afecta la
programaci"n de cada una.
H Iantener en lo posible los colores estndar para los enlaces (!isitados / no !isitados)+ para
e!itar confusiones.
2. Estructuracin de contenidos en el servidor
n pro/ecto de -eb se presenta generalmente como un con:unto de pginas de $iperte.to
(DBI1) (ue conforman lo (ue podemos llamar ,I"dulo 7nstitucional, cuando est destinado a
presentar una empresa o una organi)aci"n. #e tiende frecuentemente a llamarlo ,Dome Page,
pero+ en sentido estricto+ la ,Dome Page, es s"lo la primera pgina o portada+ con la
identificaci"n del organismo / el men= de los contenidos informati!os o ser!icios ofrecidosK o
,I"dulo 7nformati!o, (o &ducati!o) cuando est destinado a dar a conocer acontecimientos
(como en la ,Prensa en l0nea,) o conocimientos de di!ersos tipos (producci"n acad9mica+
narrati!a+ etc.).
Lb!iamente tambi9n e.isten 2numerosas2 producciones destinadas a la entretenci"n / al
comercio+ pero no corresponde a nuestro prop"sito abordar estos campos particulares.
Cada m"dulo de este tipo puede ser el =nico instalado en el ser!idor de ''' de una
instituci"n o estar instalado :unto a otros en dic$o ser!idor o en el de alg=n pro!eedor del
ser!icio. n pro/ecto de tecnolog0a educati!a es mu/ similar a un ,m"dulo institucional, / todo
lo (ue digamos en este cap0tulo es !lido+ en principio+ para las dos categor0as mencionadas.
n m"dulo de -eb 2institucional o educati!o2 contiene toda la informaci"n (ue se desea $acer
circular+ di!idida en cap0tulos o ,n=cleos de informaci"n, (todas las entradas de primer ni!el
:err(uico a las cuales se llega desde la portada). 1os cap0tulos se di!iden e!entualmente en
sub2cap0tulos / finalmente en pginas+ cada una de las cuales constitu/e un documento de
te.to DBI1 (con ilustraciones ane.as). 1as pginas se subdi!iden a su !e) en segmentos+ (ue
son las distintas partes de las mismas a las cuales se puede acceder desde un men= al inicio
de la misma pgina (#on se*alados+ en Dtml+ por la eti(ueta M8 A8I&N...O).
1a estructura l"gica es por lo tanto> I"dulo P cap0tulo P (sub2cap0tulo) P pgina P segmento. &s
con!eniente (ue esta estructura (uede refle:ada en la agrupaci"n de los documentos en
directorios / sub2directorios en el computador. 8s0+ $abr un directorio general (ue incluir todo
el material correspondiente al m"dulo+ / dic$o directorio contendr sub2directorios con
funciones comunes / sub2directorios (ue agruparn las pginas de un mismo cap0tulo o sub2
cap0tulo.
1lamaremos ,dirQ1, el directorio principal (en la realidad podr llamarse ,---, o ,dataQdocs,+
dependiendo del soft-are del ser!idor). <eber contener la portada (llamada ,inde..$tml,+ de
acuerdo a las normas+ seg=n el tipo de ser!idor) / los subdirectorios (dirQ11+ dirQ12+ etc.). #er
con!eniente reser!ar uno de estos para arc$i!os de uso com=n+ como las ilustraciones 2iconos+
botones+ !i*etas+ etc.2 (ue se repetirn en m=ltiples pginas. 1e pondremos ,dirQ11,. (samos
a(u0 n=meros para (ue se capte me:or la estructura+ pero puede ser ms adecuado utili)ar
t9rminos significati!os (ue aluden al contenido.)
n directorio puede contener pginas unidas en secuencia (para ser le0das una tras otra)+ pero
tambi9n puede contener pginas o arc$i!os independientes entre s0+ como en el caso de un
directorio de iconos (como nuestro e:emplo del ,dirQ11,)+ o una me)cla secuencialPparalela. E+
como en estos casos+ el acceso podr0a ser solamente a partir de un enlace desde otra pgina+
/ no desde un men=.
&n la realidad+ con!iene definir una estructura de acuerdo a la comple:idad del pro/ecto+ para lo
cual podr0amos definir tres tipos de casos>
a. Pro/ectos simples
&n pro/ectos mu/ simples (con un n=mero total de arc$i!os (ue no sobrepase de una docena)+
no resulta con!eniente crear subdirectorios> basta un s"lo directorio. 1os tipos de documentos
se diferencian fcilmente por su ,e.tensi"n, (,.$tml, para los te.tos+ ,.gif, o ,.:pg, para las
ilustraciones+ etc.)
b. Pro/ectos de mediana comple:idad
&n este caso puede ser con!eniente agrupar los arc$i!os de acuerdo a la naturale)a de los
documentos> los te.tos :untos en un sub2directorio+ las ilustraciones en otro.
#e utili)ar preferentemente este tipo de estructura en m"dulos (ue pueden tener $asta dos o
tres docenas de pginas de te.to+ por lo cual /a no es con!eniente mantener todos los arc$i!os
en un solo directorio.
c. Pro/ecto de alta comple:idad
&n pro/ectos de alta comple:idad con!iene aplicar una regla general de agrupaci"n relacionada
con los contenidos (cap0tulos / sub2cap0tulos) primero /+ e!entualmente despu9s+ de acuerdo a
la naturale)a de los documentos.
#ea+ como e:emplo+ un subdirectorio de nombre dirQ1G+ (ue re=ne !arias paginas ilustradas. 1a
forma ms ,desmembrada, de constituirlo 2(ue puede ser re(uerida por algunas aplicaciones
sofisticadas de administraci"n de ser!idores2 ser0a la siguiente>
PdirQ1GP
Ppagina1G1P
inde..$tml
ilustrG11.:pg
ilustrG12.:pg
ilustrG1?.:pg
...BR
Ppagina1G2P
inde..$tml
ilustrG21.:pg
ilustrG22.:pg
ilustrG2?.:pg
...BR
. . . . . .


&n el e:emplo del ,dirQ1G, se muestran dos pginas de te.to correspondientes a un mismo
cap0tulo temtico+ acompa*adas cada una de !arias ilustraciones. Como en cada caso $a/ una
sola pgina de te.to (la pgina ,inde..$tml,+ nombre (ue permite (ue sea e.$ibida con la mera
referencia a la direcci"n del subdirectorio)+ no es necesario aumentar las subdi!isiones. #e
puede !er sin embargo (ue este sistema obliga a tratar con sumo cuidado las di!ersas pginas
de te.to+ /a (ue todas se llaman ,inde..$tml,+ por lo (ue resulta mu/ fcil una instalaci"n o
actuali)aci"n err"nea.
. !"uste de la inter#a$ gr%#ica en web
Ao todo lo (ue es posible dise*ar en un determinado ordenador puede ser considerado !lido
para un m"dulo (ue se instale en un ser!idor de -eb. <os factores e.ternos+ al menos+ $an de
ser tomados en cuenta> el ,anc$o de banda, disponible (es decir la amplitud / !elocidad del
canal de transmisi"n) / tambi9n la ,plataforma, (sistema operati!o)+ el !isuali)ador / la calidad
del monitor (pantalla) usados por la audiencia2tipo.
&n materia de !isuali)adores (bro-sers)+ toma un a*o la difusi"n / actuali)aci"n a una nue!a
!ersi"n / otro a*o el (ue los clientes se acostumbren a las nue!as funciones / ,e.tras, (plug2
ins)+ seg=n los clculos de la firma #un basados en las consultas a su ser!idor+ los cuales
pueden incluso estar sobredimensionados /a (ue es un sitio para e.pertos. &.ceptuando el
caso de las 7ntranets+ donde se puede esperar (ue todos tengan acceso a los mismos
recursos+ si el dise*ador no toma en cuenta este retraso de los clientes+ causar problemas a
muc$os de ellos. E se debe recalcar (ue los a!ances de DBI1 no $acen en absoluto imposible
estar al d0a /+ simultneamente+ ser!ir a=n a (uienes s"lo tienen un na!egador de la primera
generaci"n> es posible $acer una ,degradaci"n agraciada, (facilitando la recepci"n para
distintas !ersiones de na!egador). 1os plug2ins deben usarse con ms cuidado+ s"lo para
elementos complementarios / se debe a!isar de su presencia / rol (no pueden contener
informaci"n importante). (Delins;i+ pp. ?62G2) .
&n relaci"n al anc$o de banda+ no es l"gico insertar muc$os !0deos (mu/ ,pesados, en cuanto
a su dimensi"n en b/tes) si el canal es estrec$o / pr".imo a la saturaci"n. Bampoco lo es
colocar ilustraciones de alta calidad (,millones de colores,) si la ma/or0a de los usuarios s"lo
tiene pantalla de 25C colores. Dasta 166C se consideraba (ue la norma de la industria
multimedial era la grfica de 25C colores. Posteriormente $an ido creciendo paulatinamente los
soft-ares / pginas en ,miles de colores,+ especialmente para la difusi"n de contenidos
informati!os / cient0ficos+ donde se $ac0a ms necesaria una calidad (casi) fotogrfica.
Bambi9n se debe tomar en cuenta la dimensi"n !ariable de las pantallas. #i bien /a $a/
muc$as con @00 pi.eles de anc$o+ $a/ una mu/ importante base instalada con s"lo CG0
pi.eles+ ra)"n por la cual no con!iene incluir ilustraciones o tablas ms anc$as. 8 pesar de (ue
/a es mu/ com=n encontrar pginas con un dise*o (ue fi:a el anc$o en @00 pi.eles+ se debe
recordar (ue este proceder es contrario al principio de la ''' seg=n el cual se debe de:ar al
cliente la libertad de fi:ar la apariencia final de la pgina (anc$o+ colores+ tipograf0a).
#in embargo+ no se debe considerar (ue todos los (ue na!egan por 7nternet sern ,clientes,>
siempre tendremos una poblaci"n2meta preferencial (puede $aber una primaria / una
secundaria) (ue es necesario definir / caracteri)ar+ / para la cual se a:ustar el pro/ecto.
Recordemos tambi9n (ue+ de acuerdo a las reglas del dise*o de todo tipo de pro/ecto
informati!o o formati!o+ es indispensable definir bien el ob:eti!o del mismo tanto del punto de
!ista del emisor como del receptor / definir c"mo / cundo se espera (ue lleguen a !isitar el
sitio -eb (cosa (ue podr influir en su estructura / presentaci"n).
7gual (ue para otras interfaces+ es indispensable $acer pruebas de la misma. <ebe ser fcil de
usar+ rpida+ entretenida+ =til+ con informaci"n actuali)ada+ interacti!a. <ef0nase un estilo /
el0:anse buenas metforas / representaciones (cosa (ue a=n falta en muc$os sitios -eb). 1os
es(uemas de na!egaci"n deben ser preparados cuidadosamente+ $aciendo o:al un gui"n del
comportamiento esperado de los !isitantes. (cfr. 'einsc$en; 4 col.+ pp. 1?121?5)
Beniendo en cuenta las reglas cogniti!as as0 como las reglas de la percepci"n+ se pueden
precisar a=n ms algunas reglas =tiles para el dise*o de las portadas / de las pginas en
general.
.1. Diseo general de p%gina web
<ebido a la forma en (ue opera la -eb+ todo lo importante siempre debe estar en la parte
superior de la pgina. Pero si se trata de una pgina con informaci"n !erbal+ la e.periencia
demuestra (ue el lector prefiere un recorrido !isual (scrolling) largo antes (ue acti!ar repetidos
enlaces. &scribir bien (claro / conciso) es sin embargo fundamental. 1as anclas (ue se inserten
en el te.to deben agregarse con prudencia /a (ue producen tambi9n palabras generalmente
menos legibles. Como /a se*alado+ es preferible colocarlos al final de un prrafo+ /a (ue in!itan
a cortar la lectura / pasar a otro lugar. E nunca deben en!iar a un te.to irrele!ante. (Delins;i+ p.
G2)
1as animaciones distraen e incluso molestan si son en ciclo permanente (,loop,). Ao debe
ponerse ms de una por pgina. na imagen de fondo tambi9n es distracti!a / puede dificultar
la lectura (preferir tramas o fondos planos).
#e debe facilitar el reconocimiento de la ubicaci"n (/ especialmente de la salida del m"dulo si
esto puede ocurrir)+ para lo cual un buen sistema puede ser un pe(ue*o logotipo o una delgada
barra de botones al encabe)ar cada pgina o en el borde i)(uierdo. (Delins;i+ p. G?)
&l mane:o de la diagramaci"n de una pgina -eb es algo mu/ peculiar. &n efecto+ el dise*ador
AL sabe 2normalmente2 de antemano cul ser la dimensi"n de la !entana en la cual el cliente
obser!ar la pgina+ /a (ue depende de 9ste tanto el !alor por defecto como la dimensi"n real
en un determinado momento ((ue siempre puede ser cambiada). #"lo se conoce con precisi"n
el !9rtice superior i)(uierdo / se dispone de las opciones de centrar+ marginar a la i)(uierda o a
la derec$a. E+ luego+ de espaciar ms o menos los prrafos. #i se desean columnas+ se pueden
usar tablas+ con o sin bordes !isibles. Sstas tambi9n confieren la posibilidad de definir el anc$o
e.acto de una pgina /+ as0+ de diagramar en forma ms tradicionalK sin ol!idar+ sin embargo+
(ue el tama*o de la tipograf0a seguir dependiendo del cliente+ as0 como el anc$o real de la
!entana+ (ue podr ser ma/or (creando un !ac0o) o menor (Tcortando el te.toU) (ue el
dispuesto en la definici"n de la tabla. #i se pre!9 (ue el cliente imprimir la pgina+ $a/ (ue
tener en cuenta un anc$o m.imo de apro.imadamente GG0 pi.eles+ el cual es adecuado para
imprimir una pgina de tama*o con!encional (21+5 cm. de anc$o).
8 pesar de (ue es posible $ilar fino+ precisando espacios desde un =nico pi.el de anc$o / alto /
eligiendo tipograf0as+ la ,!ariabilidad, (ue forma parte de la esencia de la ''' $ace (ue la
concepci"n misma de una pgina deba a:ustarse ms a un concepto de ,despliegue dinmico,
(ue el de la tradicional diagramaci"n en papel. 8 nuestro :uicio+ los intentos / conse:os de los
diagramadores profesionales entrenados para preparar re!istas o documentos publicitarios+
(ue buscan ,proteger su obra de arte, mediante artificios (ue introducen in!ariabilidad !an en
contra de la esencia misma de este nue!o medio de comunicaci"n. &llos tienen a su
disposici"n el formato P<F de documentos transmisibles por -eb+ en base a una descripci"n
de pgina de tipo post2script prefi:ada (seme:ante a los impresos) (ue permite !isuali)ar e
imprimir e.actamente c"mo el autor o diagramador lo desea.
Ltros profesionales+ al contrario+ imbuidos del esp0ritu de la no!edad+ !an en otra direcci"n /
entregan conse:os :uiciosos+ compatibles con el ,esp0ritu de libertad,. &s el caso+ por e:emplo+
de 'einsc$en;+ Famar / Eeo+ (ue aconse:an aplicar las siguientes reglas en el dise*o de las
pginas>
1. Recordar (ue lo (ue se !e de partida en la pantalla es cla!e. Iuc$os !isitantes no $arn un
recorrido !isual (,scrolling,) si no encuentran a$0 lo (ue buscan.
2. Boda pgina deber0a contener los siguientes elementos>
identificaci"n en la barra de t0tulo+
t0tulo de pgina+
enlaces $acia los principales t"picos del sitio Vo m"duloW+
enlace $acia la portada+ la identificaci"n de la instituci"n+ el motor de b=s(ueda / el mapa del
sitio+
e2mail del -ebmaster.
?. Concentrar toda la funcionalidad (t0tulos / men=s) en la !entana inicial (CG0.G@0 pi.els
m.imo). <eba:o de 9sta poner solamente informaci"n ,no cr0tica, para la na!egaci"n.
G. #i $a/ informaci"n importante ms aba:o+ $acer e!idente la necesidad de recorrido !isual
(imagen o te.to cortado).
5. <eterminar la longitud de las pginas seg=n la modalidad de acceso / tipo de contenido
(largas 2completas2 para e.plicacionesK cortas para definiciones o informaciones puntuales+
para respuestas a b=s(uedas o si el acceso es por m"dem). &!itar siempre (ue pase de ?
carrillas.
C. Crear un modelo bsico (plantilla+ ,template,) de pgina para asegurar la unidad /
consistencia. 1as tablas (con anc$o fi:o) son el me:or sistema para controlar el aspecto de las
pginas. (Cuidado sin embargo con el anc$o de la pantalla / los posibles efectos del cambio de
tama*o de la tipograf0a+ (ue el cliente elige a su gusto).
5. Ao ocupar con te.to ms del ?0X del espacio (50X para espacio en blanco e ilustraciones)+
para asegurar una lectura agradable.
@. Iantener la regla de pro.imidad de te.to e imagen (asociaci"n semntica de lo (ue est
cercano).
6. 8grupar los 0tems (men=s anidados)+ con no ms de 5 en cada blo(ue.
10. Ao lle!ar nunca a usar nunca el recorrido !isual (scrolling) $ori)ontal.
11. &s poco con!eniente usar marcos (frames)> si se llega desde un motor de b=s(ueda+ no se
obtiene el rea de referencia ((ue contiene generalmente el men= o los botones de
despla)amiento)K si se lleg" desde la portada+ es mu/ dif0cil marcar el acceso directo a la
pgina (boo;mar;) / puede ser dif0cil imprimir o guardar copia de la pgina (<urante cierto
tiempo+ la protecci"n contra copia fue una potente ra)"n del uso de este sistema+ pero $o/ los
!isuali)adores $an integrado la capacidad de elegir el marco a copiar o imprimir).
12. #i se muestra rpidamente un men= en te.to (mientras ba:an las imgenes) se a/uda a los
clientes a usar el ser!icio+ na!egando ms rpido.
1?. &!itar sonido de fondo repetiti!o.
1G. Respetar los derec$os de autor (&sto inclu/e no citar marcas registradas sin se*alarlo ni
copiar logotipos sin permiso) / recordarlos a los dems indicando la reser!a de derec$os para
las pginas propias. ('einsc$en;...+ pp. 2G@22C0) .
.2. Particularidades de la portada
&n una ,$ome page, o pgina de men= es con!eniente (ue todas las opciones est9n en la
primera !entana !isible (sin necesidad de recurrir al recorrido !isual o scrolling) es decir en un
marco algo inferior a CG0.G@0 pi.eles (el tama*o de pantalla (ue da ma/or seguridad de ser
!isto sin corte)+ /a (ue los clientes deciden a$0 su na!egaci"n / muc$os no irn ms all ($acia
pginas interiores). <e ser necesario+ incluir algunos botones como mapa sensible en esa rea>
a pesar de (ue no todos los na!egadores los reconocern+ podrn a/udar a los (ue tengan al
menos /a !ersiones de 2T generaci"n.
.. &%s sobre la gr%#ica
Con relaci"n a la grfica propiamente tal+ los mismos autores sugieren>
1. 1os grficos frenan la comunicaci"n> incluirlos s"lo si aportan realmente algo+ nunca
,por(ue $ace falta una ilustraci"n,. Pero tambi9n cuidar (ue la imagen sea agradable.
<e:ar al usuario la opci"n de !er una imagen a gran escala / alta definici"n+ ofreciendo
s"lo una !ersi"n reducida dentro del te.to. Ainguna imagen deber0a tener ms de
CG0.G@0 pi.eles.
2. 8segurar con te.to la correcta interpretaci"n de los grficos (/ de los pictogramas2
botones de na!egaci"n+ sal!o (ue se $a/a probado intensi!amente su comprensi"n en
pruebas pre!ias).
?. sar te.to alternati! (,81B,) con todas las ilustraciones (para el caso de (ue el cliente
no las pueda !er o decida no ,ba:arlas,).
G. sar iconos para identificar diferentes secciones> su repetici"n no es ms lenta
((uedan en la memoria cac$9 del computador) / a/udan a conceptuali)ar la
organi)aci"n de los contenidos (a=n me:or si se usan tambi9n las listas / men=s).
5. #i se desea usar una determinada tipograf0a para los t0tulos+ usarla con un programa
de grfica / guardar los t0tulos como imgenes (#al!o dos o tres tipograf0as comunes+
$a/ mu/ poca seguridad de (ue el cliente tenga instalada la (ue prefiera el dise*ador).
C. tili)ar las t9cnicas aceleradoras de !isuali)aci"n de imgenes como ,7nterlaced 37F,+
Fpeg de ba:a resoluci"n / especificaci"n de tama*o en la eti(ueta de imagen.
5. 7ncluir las palabras importantes de una imagen de t0tulo en el te.to o en una eti(ueta
,meta, de Dtml+ para (ue los motores de b=s(ueda las puedan encontrar.
@. 7mgenes no fotogrficas deber0an $acerse con un m0nimo de colores+ tomados de la
paleta de 21C colores ((ue es la realmente disponible en -eb para monitores de 25C
colores) / todas las ilustraciones de una misma pgina deber0an usar la misma paleta.
6. Recordar (ue el color se rinde de diferente manera en las distintas plataformas
(!erificar el resultado en !arias+ en lo posible).
10. Para animaciones+ preferir el ,gif animado,> es el sistema ms compacto / simple+ pero
se debe e!itar un ciclo permanente (,loop, infinito).
11. &!itar el dibu:o de manos como elementos grficos (iconos o botones)> puede ser mal
interpretado en ciertos ambientes culturales.
12. #i se (uiere usar una imagen de fondo (,palmeta,)+ $acerla del menor tama*o posible+
para (ue se cargue con ma/or rapide). &!itar patrones anali)ables (marcas de agua+
logotipos+ fotos+ etc.)> interfieren con la lectura. #on preferibles las tramas aleatorias.
1?. #i se usa una imagen de fondo+ definir pre!iamente un color de fondo (,bgcolor,) en la
misma gama> 9ste se carga primero / anuncia as0 al usuario (ue la pgina se est
cargando.
1G. &!itar colores fuertes / tambi9n un te.to blanco sobre fondo negro.
15. Bener en cuenta (ue el cliente puede definir su color de fondo preferido (/ anular as0 el
(ue se transmite)> esto es importante para la definici"n del color del te.to / de los
enlaces. ('einsc$en;...+ pp. 2C022C5) .
8 prop"sito del n=mero11+ es con!eniente recordar siempre el carcter global de las
comunicaciones de $o/. 8 menos (ue se dise*e para una intranet 2de acceso restringido2 es
con!eniente e!itar signos grficos / t9rminos (ue s"lo se entienden localmente o (ue pueden
ser malinterpretados en otras regiones. #i se desea una m.ima difusi"n+ tambi9n ser
necesario agregar !ersiones en otros idiomas (principalmente en ingl9s+ la lengua dominante
de 7nternet). 8cerca de pautas ms concretas para el dise*o,global 2especialmente en el rea
grfica2 se puede consultar la obra ,3lobal 7nterface <esign,+ de Bon/ Fernnde).
.'. (a redaccin de la p%gina
Finalmente+ con relaci"n a la redacci"n del te.to>
1. Recordar ante todo (ue la lectura en pantalla resulta generalmente ms molesta (ue
en papel.
2. sar oraciones cortas / precisas / e!itar redundancias.
?. sar lo ms (ue se pueda es(uemas / ,listas no2ordenadas, (con ,bullets,)
G. Colocar los te.tos de ni!eles de detalle diferentes en pginas separadas obligar a leer
detalles no deseados).
5. Ao subra/ar nada (lo subra/ado indica ancla)> usar negritas+ pero con mesura.
C. &!itar el te.to continuo en cursi!a> es de dif0cil lectura.
5. 1os prrafos no deben tener ms de G o 5 oraciones.
@. sar muc$os subt0tulos.
6. &!itar te.tos (ue no sean afirmati!os / e!itar los :uicios de !alor / apreciaciones
personales.
10. #er consistente en la puntuaci"n / el uso de ma/=sculas.
11. 7nformar adecuadamente de los cambios (Pgina de ,Ao!edades, / fec$as de
actuali)aci"n). ('einsc$en;...+ pp. 2512255)
'. Creacin de los documentos
8l crear los documentos+ con!iene asegurarse (ue una pgina no se demorar demasiado en
cargarse en el computador del lector+ lo cual depender tanto de la longitud del te.to como T
sobre todo2 de la cantidad de ilustraciones (!isuales o auditi!as) (ue inclu/a. &s cierto (ue la
!elocidad de recepci"n depende de la capacidad de las redes (,anc$o de banda, di!idido por el
n=mero de usuarios simultneos)+ lo cual no puede ser controlado por el emisor2programador.
Pero s0 es posible aumentar 2o reducir2 la !elocidad controlando la estructura de cada pgina.
#i el te.to es bre!e / las ilustraciones pocas (/ pe(ue*as)+ la transmisi"n ser muc$o ms
rpida. Pero la comunicaci"n en su con:unto puede tornarse ineficiente (/ eno:osa) si se
fragmenta demasiado el contenido+ obligando al lector a acti!ar enlace tras enlace+ lo cual
puede tener como resultado (ue ocupe ms tiempo esperando la llegada de la informaci"n (ue
le/endo 9sta.
Conocemos e:emplos en ambos e.tremos> pginas (ue demoran !arios minutos en llegar
debido a su e.tensi"n e ilustraciones+ / pginas (ue s"lo contienen un prrafo de te.to /
obligan a pedir otra enseguida. &n este caso+ s"lo pueden recibir las pginas en forma rpida
(uienes est9n conectados localmente al mismo ser!idor de '''. Pero (uienes est9n ale:ados
se aburrirn de las esperas.
TCul ser0a el adecuado ,t9rmino medio,T Auestra e.periencia aconse:a traba:ar con
documentos de una e.tensi"n del orden de 10 a 20Yb. E en una pgina de te.to de este
tama*o+ e!itemos colocar ms de tres o cuatro ilustraciones. Bambi9n+ si (ueremos agregar
fotos o dibu:os ilustrati!os+ utilicemos el sistema de ,estampillas,+ (ue consiste en insertar
reproducciones pe(ue*as (como m.imo de 150 a 200 pi.eles por lado) (ue !inculen las
ilustraciones de plena pgina (ue se (uieran ofrecer ((ue se obtendrn al $acer un JclicJ sobre
la estampilla).
8umenta la !elocidad de recepci"n de una pgina el indicar en su programaci"n el tama*o
e.acto de cada ilustraci"n (M7I3 '7<BDN!alue D&73DBN!alue #RCN...O)> de este modo el
te.to ser e.$ibido ,saltando, el espacio re(uerido para las imgenes+ lo cual permite empe)ar
rpidamente a leer. Bambi9n a/uda a reducir la espera el uso de ilustraciones de formato
,interlaced gif,+ /a (ue 9stas aparecen en forma progresi!a (primero borrosas / luego ms /
ms n0tidas). Pero el formato ,.gif, s"lo admite 25C colores+ lo cual en algunos casos puede ser
una calidad insuficiente. 1a soluci"n consiste nue!amente en crear estampillas (ue remitan a
imgenes ma/ores+ en miles de colores (formato ,.:pg,).
). Documentacin del proyecto
Como en todo pro/ecto de computaci"n+ se recomienda documentar adecuadamente los
directorios / sus contenidos. Como m0nimo+ deber0a anotarse>
2 la estructura :err(uica (directorios / nombres de los documentos contenidos en cada uno)
2 las anclas / los enlaces estructurales (puntos de origen / de destino)K con nombre DR&F /
significado+ por e:emplo+
PdirQ121P> (Computaci"n)
inde..$tml
M8 DR&F N ,ccien.$tml,O N Computaci"n cient0fica
M8 DR&F N ,sdistr.$tml,O N #istema distribuido
Pginas>
ccien.$tml N Computaci"n cient0fica #egmentos>
M8 A8I&N,ob:eti!os,O Lb:eti!os
M8 A8I&N,recursos,O Recursos Computacionales
etc.
2 para las ilustraciones> con!iene $acer una lista de los nombres de los arc$i!os :unto con la
indicaci"n de lo (ue representan (/ es con!eniente anotar el tama*o de cada una+ para facilitar
la programaci"n en Dtml)+ por e:emplo>
PfotosP
gQboard1.gif G02.2?C ,Iot$erboard,
eQmainfr.gif 200.1?C Computador mainframe
fQbabbag.gif 60.12@ Zabbage (cara)
fQc$ip.gif 120.15@ C$ip
fQmainfr.:pg G00.252 Computador mainframe (foto)
8(u0 ,gQ, indica grfico
,eQ, indica estampilla
,fQ, indica foto+
lo cual permite ordenar / reconocer con facilidad el tipo de ilustraci"n
#iendo 9sta la documentaci"n m0nima indispensable para la mantenci"n / fcil actuali)aci"n+
es necesario recalcar la con!eniencia de utili)ar una base de datos con la informaci"n de cada
pgina Dtml+ lo cual permite una manipulaci"n muc$o ms e.$austi!a / segura de todos los
componentes / una !erificaci"n de la co$erencia+ especialmente importante en m"dulos o sitios
conformados por un gran n=mero de pginas.
Conclusin
1os estudios sobre facilidad de uso en materia de $iperte.to muestran los siguientes
re(uerimientos de los usuarios>
Lbtener la informaci"n cuando es re(uerida.
&ncontrar la informaci"n (ue es buscada.
Poder identificar el significado de un !0nculo de tal modo (ue la pgina obtenida responda
efecti!amente a lo esperado.
Poder obtener una !isi"n de con:unto de la informaci"n disponible+ como asistencia para
reali)ar una tarea espec0fica o para seleccionar lo ms rele!ante.
Poder na!egar para buscar informaci"n complementaria despu9s de completar una primera
tarea. (#mit$+ Ae-man+ / Par;s+ pp. 50251 / 5?).
&s el deber del dise*ador de -eb tratar de responder lo me:or posible a estos re(uerimientos.
Demos !isto a(u0 algunas recomendaciones para sacar el m.imo pro!ec$o a la forma actual
de operar+ / algunas pro/ecciones en torno a soluciones futuras.
*ibliogra#+a
8rfuc$+ C$a!es / 1edesma> ,<ise*o / comunicaci"n,+ Zuenos 8ires+ Paid"s+ 1665.
Fernnde)+ B.> ,3lobal 7nterface <esign,+ Zoston+ 8cademic Press+ 1665.
3ndara+ I.> ,1a interfa) con el usuario> na introducci"n para educadores,+ 818 Carta+ 166?2
6G+ nT. C a 6.
3aines+ Z.R. 4 #$a-+ I.1.3.> ,Yno-ledge ac(uisition+ modelling and inference t$roug$ t$e
'orld 'ide 'eb,+ 7nternational Fournal of Duman2Computer #tudies+ 1665+ nTGC+ pp.5262556.
Delins;i+ P.> ,'eb2site usabilit/ engineering,+ 'eb Bec$ni(ues+1665+ !ol .2 nT+. G+ pp. ?62G?.
#$neiderman+ Z.> ,<esigning information2abundant -eb sites> issues and recomendations,+
7nternational Fournal of Duman2Computer #tudies+ 1665+ nTG5+ pp.5226. #iegel<.> ,Creating
;iller -eb sites,+ Da/den Zoo;s+ 1665.
#mit$+ P.8.+ Ae-man+7.8. / Par;s+ 1.I.> ,[irtual $ierarc$ies and !irtual net-or;s> some lessons
from $/permedia usabilit/ applied to t$e 'orld 'ide 'eb,+ 7nternational Fournal of Duman2
Computer #tudies+ 1665+ !. G5+ pp.C5265.
'einsc$en;+ #. 4 col.> ,37 design essentials,+ Ae- Eor;+ 'ile/ Computer Publis$ing+ 1665.

H Braba:o presentado en la 77 Zienal de la
Comunicaci"n+ celebrada en la ni!ersidad de
Cartagena (Colombia)+ en ma/o de 1666