Revista Latina de Comunicación Social 29 – mayo de 2000

Edita: LAboratorio de Tecnologías de la Información y Nuevos Análisis de Comunicación Social
Depósito Legal: TF-135-98 / ISSN: 1138-5820
Año 3º – Director: Dr. José Manuel de Pablos Coello, catedrático de Periodismo
Facultad de Ciencias de la Información: Pirámide del Campus de Guajara - Universidad de La Laguna 38200 La Laguna (Tenerife, Canarias; España)
Teléfonos: (34) 922 31 72 31 / 41 - Fax: (34) 922 31 72 54

 

Principios de diseño para la WWW

(5.502 palabras – 12 páginas)

Dr. Raymond Colle ©

Facultad de Comunicaciones

Pontificia Universidad Católica

Santiago de Chile

rcolle@puc.cl

El sistema de la WWW implica que parte de la interfaz está prediseñada, formando parte de la aplicación que requiere el cliente para acceder a los contenidos (el "visualizador" o "browser"). Pero, a diferencia de otras aplicaciones, otra parte de la interfaz forma parte integrante del contexto y del contenido específico de los mismos documentos, es decir que depende de cada proyecto en particular y, por lo tanto, del dominio que tiene el autor de los recursos que están a su disposición. Esto es algo muy novedoso en el mundo de la información por medios computacionales.

"La flexibilidad de una interfaz emergente programada dinámicamente puede constituir en sí misma un nuevo paradigma de la interacción hombre-ordenador en los noventa." (Gaines & Shaw, p. 729)

Para realizar un adecuado diseño de software informativo o formativo operable de este modo (aunque pueda ser limitado a una Intranet, es decir una red cuyo acceso es restringido a un grupo de usuarios pertenecientes a una institución determinada) es necesario tener en cuenta algunos principios que expondremos ahora y que son el fruto de investigaciones y de la experiencia de creadores y administradores de sitios web.

A pesar de la reciente profusión de libros relativos al diseño de documentos para la WWW, los investigadores recalcan la ausencia de una verdadera teoría e incluso de una pragmática claramente definida. Gran parte de estos libros son el producto de la -muy incipiente- experiencia de diseñadores gráficos que consideran haber tenido éxito con los sitios que han diseñado (véase por ejemplo el título "Creating killer web sites" -"Crear sitios web que matan" - de D. Siegel). Sin embargo, conviene recordar que el propio diseño gráfico, en sí mismo, no descansa aún en ningún soporte teórico consolidado, como lo recuerdan Arfuch, Chaves y Ledesma:

"La denuncia del escaso desarrollo teórico y metodológico del diseño gráfico constituye un lugar común en el discurso acerca de la disciplina." (Arfuch, Chaves y Ledesma, p. 123)

"El diseño constituye una práctica heterogénea, una profesión plural en la que concurren variantes técnicas, metodológicas, culturales y estilísticas." (ibidem, p. 83)

No es, por lo tanto, en la bibliografía sobre diseño gráfico ni en las publicaciones de diseñadores acerca de sitios Web donde se deben buscar principios orientadores. Tales libros podrán ser útiles, esencialmente, para recopilar experiencias e hipótesis y -sobre todo quizás- para tener una clara visión de lo que no debe hacerse. Pero no creemos que se ha de llegar al extremo de resumir todo, como lo plantea Lynch -a juicio de Shneiderman, uno de los mejores guías existentes para el diseño de webs-, en la sola máxima de

"equilibrar el poder de los vínculos hipermediales con la capacidad de insertar gráficos y medios móviles (motion media)" (Shneiderman, p. 6).

Sin embargo, existen otras bases para orientar a los creadores de sitios y productores de documentos de Web: el conocimiento acerca del diseño de interfaces basado en el usuario, del cual se pueden deducir múltiples criterios a partir de los básicos que son: atractivo visual, comprensibilidad, utilidad, eficacia y "navegabilidad" (Shneiderman, pp. 5-7). Pero también, como lo señala este autor, las teorías cognitivas son una base sólida para este propósito:

"En situaciones nuevas, las teorías cognitivas y sobre la percepción deben estructurar la discusión y guiar a los diseñadores." (Shneiderman, p. 5) .

1. Principios generales para un sitio web

Uno de los problemas más radicales de la creación de un sitio web es la diversidad de los clientes que se le conectarán.

"Hay que acomodar una situación en que los usuarios usan diferentes navegadores -con mayor o menor capacidad-, diferentes velocidades de transmisión, diferentes tamaños de pantalla. Y la presión por producir páginas más vistosas y con más recursos (como los applets) desborda a veces el criterio lógico que señala la conveniencia de orientarse al común denominador que es habitualmente más bajo. Puede ser altamente conveniente disponer de versiones de texto con pocas o pequeñas ilustraciones, para una fácil transmisión por un menor ancho de banda, especialmente si se destinan a países en desarrollo" (Shneiderman, p. 6).

También habría que tener en cuenta las limitaciones del acceso telefónico y de la recepción en aparatos portátiles, así como los nuevos sistemas de recepción que podrían difundirse en el futuro (PCS, pantallas de pulsera, etc.).

De los expertos en diseño de interfaces -como Weinschenk, Jamar y Yeo (pp. 238-248)- recogemos las siguientes recomendaciones para el diseño de un sitio web:

* Proveer contenidos sustantivos y actualizados (lo que la audiencia quiere recibir, no lo que el emisor quiere decir), lo cual requiere conocer bien los intereses de la audiencia.

* Motivar bien en la primera página, para que el visitante marque el sitio como interesante.

* Dar prioridad a la facilidad de uso.

* Crear un diseño gráfico unificado (viñetas y colores coherentes).

* Una organización jerárquica de las páginas facilita la comprensión y la navegación, pero hay que asegurar al lector que al tercer 'clic' encontrará lo que busca (Más niveles sólo deben contener detalles; más 'clics' deberían corresponder a navegación transversal).

* La página inicial ("home page") debe dar acceso a los diversos contenidos pero también convencer del interés del sitio: se debe informar y motivar a través de la imagen y el menú.

* Si se usa una imagen-mapa sensible, colocar texto equivalente (para usuarios que no bajen la imagen y para los "spiders", programas que abastecen los "motores de búsqueda" de la World Wide Web).

* Usar submenus si el sitio es muy grande.

* Tener en cuenta el ancho de banda (si el acceso será por módem, no puede haber ilustraciones pesadas ni multimedia).

* Asegurar puntos de referencia permanentes, para que el visitante no se pierda (barra de iconos o frame con menú). Puede ser conveniente incluir un mapa gráfico del sitio y es siempre aconsejable incluir una tabla de contenido con todos los enlaces pertinentes.

* Identificar el módulo o sitio en todas sus páginas y facilitar en todas un ancla que remita a la portada -y eventualmente hacia las divisiones mayores-, ya que un motor de búsqueda puede hacer llegar el lector a cualquier página.

* Antes de incluir marcos (frames) y rutinas en Java, hay que estar seguro de que los destinatarios disponen de un navegador con la capacidad requerida. Siempre hay que programar para un mínimo y no un máximo.

* Evitar poner información solamente en forma gráfica (el lector puede deshabilitar la recepción de imágenes para ir más rápido). Incluir siempre, por lo tanto, menús verbales.

* Evitar las anclas dentro de un texto (si no es un menú): interrumpen la lectura. Es mejor ponerlas al final de un párrafo. Deben sugerir con claridad lo que se obtendría al activarlas (y el tamaño del documento por recibir, si es muy superior al promedio habitual).

* Tener mucho cuidado con enlaces secuenciales (página previa y página siguiente) ya que no estará claro si se refieren a la secuencia física (prevista por el emisor) o a la que está siguiendo el lector (que puede haber venido "saltando" desde otra "rama" u otro sitio). Además, la inclusión de secuencias es compleja para la sustitución de páginas ya que afecta la programación de cada una.

* Mantener en lo posible los colores estándar para los enlaces (visitados y no visitados), para evitar confusiones.

2. Estructuración de contenidos en el servidor

Un proyecto de web se presenta generalmente como un conjunto de páginas de hipertexto (HTML) que conforman lo que podemos llamar "Módulo Institucional" cuando está destinado a presentar una empresa o una organización. Se tiende frecuentemente a llamarlo "Home Page" pero, en sentido estricto, la "Home Page" es sólo la primera página o portada, con la identificación del organismo y el menú de los contenidos informativos o servicios ofrecidos; o

"Módulo Informativo" (o Educativo) cuando está destinado a dar a conocer acontecimientos (como en la "Prensa en línea") o conocimientos de diversos tipos (producción académica, narrativa, etc.).

Obviamente también existen -numerosas- producciones destinadas a la entretención y 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 servidor de WWW de una institución o estar instalado junto a otros en dicho servidor o en el de algún proveedor del servicio. Un proyecto de tecnología educativa es muy similar a un "módulo institucional" y todo lo que digamos en este capítulo es válido, en principio, para las dos categorías mencionadas.

Un módulo de web -institucional o educativo- contiene toda la información que se desea hacer circular, dividida en capítulos o "núcleos de información" (todas las entradas de primer nivel jerárquico a las cuales se llega desde la portada). Los capítulos se dividen eventualmente en sub-capítulos y finalmente en páginas, cada una de las cuales constituye un documento de texto HTML (con ilustraciones anexas). Las páginas se subdividen a su vez en segmentos, que son las distintas partes de las mismas a las cuales se puede acceder desde un menú al inicio de la misma página (Son señalados, en Html, por la etiqueta <A NAME=...>).

La estructura lógica es por lo tanto: Módulo / capítulo / (sub-capítulo) / página / segmento. Es conveniente que esta estructura quede reflejada en la agrupación de los documentos en directorios y sub-directorios en el computador. Así, habrá un directorio general que incluirá todo el material correspondiente al módulo, y dicho directorio contendrá sub-directorios con funciones comunes y sub-directorios que agruparán las páginas de un mismo capítulo o sub-capítulo.

Llamaremos "dir_1" el directorio principal (en la realidad podrá llamarse "www" o "data_docs", dependiendo del software del servidor). Deberá contener la portada (llamada "index.html", de acuerdo a las normas, según el tipo de servidor) y los subdirectorios (dir_11, dir_12, etc.). Será conveniente reservar uno de estos para archivos de uso común, como las ilustraciones -iconos, botones, viñetas, etc.- que se repetirán en múltiples páginas. Le pondremos "dir_11". (Usamos aquí números para que se capte mejor la estructura, pero puede ser más adecuado utilizar términos significativos que aluden al contenido.)

Un directorio puede contener páginas unidas en secuencia (para ser leídas una tras otra), pero también puede contener páginas o archivos independientes entre sí, como en el caso de un directorio de iconos (como nuestro ejemplo del "dir_11"), o una mezcla secuencial/paralela. Y, como en estos casos, el acceso podría ser solamente a partir de un enlace desde otra página, y no desde un menú.

En la realidad, conviene definir una estructura de acuerdo a la complejidad del proyecto, para lo cual podríamos definir tres tipos de casos:

a. Proyectos simples

En proyectos muy simples (con un número total de archivos que no sobrepase de una docena), no resulta conveniente crear subdirectorios: basta un sólo directorio. Los tipos de documentos se diferencian fácilmente por su "extensión" (".html" para los textos, ".gif" o ".jpg" para las ilustraciones, etc.)

b. Proyectos de mediana complejidad

En este caso puede ser conveniente agrupar los archivos de acuerdo a la naturaleza de los documentos: los textos juntos en un sub-directorio, las ilustraciones en otro.

Se utilizará preferentemente este tipo de estructura en módulos que pueden tener hasta dos o tres docenas de páginas de texto, por lo cual ya no es conveniente mantener todos los archivos en un solo directorio.

c. Proyecto de alta complejidad

En proyectos de alta complejidad conviene aplicar una regla general de agrupación relacionada con los contenidos (capítulos y sub-capítulos) primero y, eventualmente después, de acuerdo a la naturaleza de los documentos.

Sea, como ejemplo, un subdirectorio de nombre dir_14, que reúne varias paginas ilustradas. La forma más "desmembrada" de constituirlo -que puede ser requerida por algunas aplicaciones sofisticadas de administración de servidores- sería la siguiente:

 /dir_14/

/pagina141/

index.html
ilustr411.jpg
ilustr412.jpg
ilustr413.jpg
...TR

/pagina142/

index.html
ilustr421.jpg
ilustr422.jpg
ilustr423.jpg
...TR

. . .

. . .

           
           

En el ejemplo del "dir_14" se muestran dos páginas de texto correspondientes a un mismo capítulo temático, acompañadas cada una de varias ilustraciones. Como en cada caso hay una sola página de texto (la página "index.html", nombre que permite que sea exhibida con la mera referencia a la dirección del subdirectorio), no es necesario aumentar las subdivisiones. Se puede ver sin embargo que este sistema obliga a tratar con sumo cuidado las diversas páginas de texto, ya que todas se llaman "index.html", por lo que resulta muy fácil una instalación o actualización errónea.

3. Ajuste de la interfaz gráfica en web

No todo lo que es posible diseñar en un determinado ordenador puede ser considerado válido para un módulo que se instale en un servidor de web. Dos factores externos, al menos, han de ser tomados en cuenta: el "ancho de banda" disponible (es decir la amplitud y velocidad del canal de transmisión) y también la "plataforma" (sistema operativo), el visualizador y la calidad del monitor (pantalla) usados por la audiencia-tipo.

En materia de visualizadores (browsers), toma un año la difusión y actualización a una nueva versión y otro año el que los clientes se acostumbren a las nuevas funciones y "extras" (plug-ins), según los cálculos de la firma Sun basados en las consultas a su servidor, los cuales pueden incluso estar sobredimensionados ya que es un sitio para expertos. Exceptuando el caso de las Intranets, donde se puede esperar que todos tengan acceso a los mismos recursos, si el diseñador no toma en cuenta este retraso de los clientes, causará problemas a muchos de ellos. Y se debe recalcar que los avances de HTML no hacen en absoluto imposible estar al día y, simultáneamente, servir aún a quienes sólo tienen un navegador de la primera generación: es posible hacer una "degradación agraciada" (facilitando la recepción para distintas versiones de navegador). Los plug-ins deben usarse con más cuidado, sólo para elementos complementarios y se debe avisar de su presencia y rol (no pueden contener información importante). (Helinski, pp. 39-42) .

En relación al ancho de banda, no es lógico insertar muchos vídeos (muy "pesados" en cuanto a su dimensión en bytes) si el canal es estrecho y próximo a la saturación. Tampoco lo es colocar ilustraciones de alta calidad ("millones de colores") si la mayoría de los usuarios sólo tiene pantalla de 256 colores. Hasta 1996 se consideraba que la norma de la industria multimedial era la gráfica de 256 colores. Posteriormente han ido creciendo paulatinamente los softwares y páginas en "miles de colores", especialmente para la difusión de contenidos informativos y científicos, donde se hacía más necesaria una calidad (casi) fotográfica.

También se debe tomar en cuenta la dimensión variable de las pantallas. Si bien ya hay muchas con 800 pixeles de ancho, hay una muy importante base instalada con sólo 640 pixeles, razón por la cual no conviene incluir ilustraciones o tablas más anchas. A pesar de que ya es muy común encontrar páginas con un diseño que fija el ancho en 800 pixeles, se debe recordar que este proceder es contrario al principio de la WWW según el cual se debe dejar al cliente la libertad de fijar la apariencia final de la página (ancho, colores, tipografía).

Sin embargo, no se debe considerar que todos los que navegan por Internet serán "clientes": siempre tendremos una población-meta preferencial (puede haber una primaria y una secundaria) que es necesario definir y caracterizar, y para la cual se ajustará el proyecto.

Recordemos también que, de acuerdo a las reglas del diseño de todo tipo de proyecto informativo o formativo, es indispensable definir bien el objetivo del mismo tanto del punto de vista del emisor como del receptor y definir cómo y cuándo se espera que lleguen a visitar el sitio web (cosa que podrá influir en su estructura y presentación).

Igual que para otras interfaces, es indispensable hacer pruebas de la misma. Debe ser fácil de usar, rápida, entretenida, útil, con información actualizada, interactiva. Defínase un estilo y elíjanse buenas metáforas y representaciones (cosa que aún falta en muchos sitios web). Los esquemas de navegación deben ser preparados cuidadosamente, haciendo ojalá un guión del comportamiento esperado de los visitantes. (cfr. Weinschenk & col., pp. 131-137)

Teniendo en cuenta las reglas cognitivas así como las reglas de la percepción, se pueden precisar aún más algunas reglas útiles para el diseño de las portadas y de las páginas en general.

3.1. Diseño general de página web

Debido a la forma en que opera la web, todo lo importante siempre debe estar en la parte superior de la página. Pero si se trata de una página con información verbal, la experiencia demuestra que el lector prefiere un recorrido visual (scrolling) largo antes que activar repetidos enlaces. Escribir bien (claro y conciso) es sin embargo fundamental. Las anclas que se inserten en el texto deben agregarse con prudencia ya que producen también palabras generalmente menos legibles. Como ya señalado, es preferible colocarlos al final de un párrafo, ya que invitan a cortar la lectura y pasar a otro lugar. Y nunca deben enviar a un texto irrelevante. (Helinski, p. 42)

Las animaciones distraen e incluso molestan si son en ciclo permanente ("loop"). No debe ponerse más de una por página. Una imagen de fondo también es distractiva y puede dificultar la lectura (preferir tramas o fondos planos).

Se debe facilitar el reconocimiento de la ubicación (y especialmente de la salida del módulo si esto puede ocurrir), para lo cual un buen sistema puede ser un pequeño logotipo o una delgada barra de botones al encabezar cada página o en el borde izquierdo. (Helinski, p. 43)

El manejo de la diagramación de una página web es algo muy peculiar. En efecto, el diseñador NO sabe -normalmente- de antemano cuál será la dimensión de la ventana en la cual el cliente observará la página, ya que depende de éste tanto el valor por defecto como la dimensión real en un determinado momento (que siempre puede ser cambiada). Sólo se conoce con precisión el vértice superior izquierdo y se dispone de las opciones de centrar, marginar a la izquierda o a la derecha. Y, luego, de espaciar más o menos los párrafos. Si se desean columnas, se pueden usar tablas, con o sin bordes visibles. Éstas también confieren la posibilidad de definir el ancho exacto de una página y, así, de diagramar en forma más tradicional; sin olvidar, sin embargo, que el tamaño de la tipografía seguirá dependiendo del cliente, así como el ancho real de la ventana, que podrá ser mayor (creando un vacío) o menor (?cortando el texto!) que el dispuesto en la definición de la tabla. Si se prevé que el cliente imprimirá la página, hay que tener en cuenta un ancho máximo de aproximadamente 440 pixeles, el cual es adecuado para imprimir una página de tamaño convencional (21,5 cm. de ancho).

A pesar de que es posible hilar fino, precisando espacios desde un único pixel de ancho y alto y eligiendo tipografías, la "variabilidad" que forma parte de la esencia de la WWW hace que la concepción misma de una página deba ajustarse más a un concepto de "despliegue dinámico" que el de la tradicional diagramación en papel. A nuestro juicio, los intentos y consejos de los diagramadores profesionales entrenados para preparar revistas o documentos publicitarios, que buscan "proteger su obra de arte" mediante artificios que introducen invariabilidad van en contra de la esencia misma de este nuevo medio de comunicación. Ellos tienen a su disposición el formato PDF de documentos transmisibles por web, en base a una descripción de página de tipo post-script prefijada (semejante a los impresos) que permite visualizar e imprimir exactamente cómo el autor o diagramador lo desea.

Otros profesionales, al contrario, imbuidos del espíritu de la novedad, van en otra dirección y entregan consejos juiciosos, compatibles con el "espíritu de libertad". Es el caso, por ejemplo, de Weinschenk, Jamar y Yeo, que aconsejan aplicar las siguientes reglas en el diseño de las páginas:

1. Recordar que lo que se ve de partida en la pantalla es clave. Muchos visitantes no harán un recorrido visual ("scrolling") si no encuentran ahí lo que buscan.

2. Toda página debería contener los siguientes elementos:

identificación en la barra de título,

título de página,

enlaces hacia los principales tópicos del sitio [o módulo],

enlace hacia la portada, la identificación de la institución, el motor de búsqueda y el mapa del sitio,

e-mail del webmaster.

3. Concentrar toda la funcionalidad (títulos y menús) en la ventana inicial (640x480 pixels máximo). Debajo de ésta poner solamente información "no crítica" para la navegación.

4. Si hay información importante más abajo, hacer evidente la necesidad de recorrido visual (imagen o texto cortado).

5. Determinar la longitud de las páginas según la modalidad de acceso y tipo de contenido (largas -completas- para explicaciones; cortas para definiciones o informaciones puntuales, para respuestas a búsquedas o si el acceso es por módem). Evitar siempre que pase de 3 carrillas.

6. Crear un modelo básico (plantilla, "template") de página para asegurar la unidad y consistencia. Las tablas (con ancho fijo) son el mejor sistema para controlar el aspecto de las páginas. (Cuidado sin embargo con el ancho de la pantalla y los posibles efectos del cambio de tamaño de la tipografía, que el cliente elige a su gusto).

7. No ocupar con texto más del 30% del espacio (70% para espacio en blanco e ilustraciones), para asegurar una lectura agradable.

8. Mantener la regla de proximidad de texto e imagen (asociación semántica de lo que está cercano).

9. Agrupar los ítems (menús anidados), con no más de 7 en cada bloque.

10. No llevar nunca a usar nunca el recorrido visual (scrolling) horizontal.

11. Es poco conveniente usar marcos (frames): si se llega desde un motor de búsqueda, no se obtiene el área de referencia (que contiene generalmente el menú o los botones de desplazamiento); si se llegó desde la portada, es muy difícil marcar el acceso directo a la página (bookmark) y puede ser difícil imprimir o guardar copia de la página (Durante cierto tiempo, la protección contra copia fue una potente razón del uso de este sistema, pero hoy los visualizadores han integrado la capacidad de elegir el marco a copiar o imprimir).

12. Si se muestra rápidamente un menú en texto (mientras bajan las imágenes) se ayuda a los clientes a usar el servicio, navegando más rápido.

13. Evitar sonido de fondo repetitivo.

14. Respetar los derechos de autor (Esto incluye no citar marcas registradas sin señalarlo ni copiar logotipos sin permiso) y recordarlos a los demás indicando la reserva de derechos para las páginas propias. (Weinschenk..., pp. 248-260) .

3.2. Particularidades de la portada

En una "home page" o página de menú es conveniente que todas las opciones estén en la primera ventana visible (sin necesidad de recurrir al recorrido visual o scrolling) es decir en un marco algo inferior a 640x480 pixeles (el tamaño de pantalla que da mayor seguridad de ser visto sin corte), ya que los clientes deciden ahí su navegación y muchos no irán más allá (hacia páginas interiores). De ser necesario, incluir algunos botones como mapa sensible en esa área: a pesar de que no todos los navegadores los reconocerán, podrán ayudar a los que tengan al menos ya versiones de 2? generación.

3.3. Más sobre la gráfica

Con relación a la gráfica propiamente tal, los mismos autores sugieren:

  1. Los gráficos frenan la comunicación: incluirlos sólo si aportan realmente algo, nunca "porque hace falta una ilustración". Pero también cuidar que la imagen sea agradable. Dejar al usuario la opción de ver una imagen a gran escala y alta definición, ofreciendo sólo una versión reducida dentro del texto. Ninguna imagen debería tener más de 640x480 pixeles.

  2. Asegurar con texto la correcta interpretación de los gráficos (y de los pictogramas-botones de navegación, salvo que se haya probado intensivamente su comprensión en pruebas previas).

  3. Usar texto alternativ ("ALT") con todas las ilustraciones (para el caso de que el cliente no las pueda ver o decida no "bajarlas").

  4. Usar iconos para identificar diferentes secciones: su repetición no es más lenta (quedan en la memoria caché del computador) y ayudan a conceptualizar la organización de los contenidos (aún mejor si se usan también las listas y menús).

  5. Si se desea usar una determinada tipografía para los títulos, usarla con un programa de gráfica y guardar los títulos como imágenes (Salvo dos o tres tipografías comunes, hay muy poca seguridad de que el cliente tenga instalada la que prefiera el diseñador).

  6. Utilizar las técnicas aceleradoras de visualización de imágenes como "Interlaced GIF", Jpeg de baja resolución y especificación de tamaño en la etiqueta de imagen.

  7. Incluir las palabras importantes de una imagen de título en el texto o en una etiqueta "meta" de Html, para que los motores de búsqueda las puedan encontrar.

  8. Imágenes no fotográficas deberían hacerse con un mínimo de colores, tomados de la paleta de 216 colores (que es la realmente disponible en web para monitores de 256 colores) y todas las ilustraciones de una misma página deberían usar la misma paleta.

  9. Recordar que el color se rinde de diferente manera en las distintas plataformas (verificar el resultado en varias, en lo posible).

  10. Para animaciones, preferir el "gif animado": es el sistema más compacto y simple, pero se debe evitar un ciclo permanente ("loop" infinito).

  11. Evitar el dibujo de manos como elementos gráficos (iconos o botones): puede ser mal interpretado en ciertos ambientes culturales.

  12. Si se quiere usar una imagen de fondo ("palmeta"), hacerla del menor tamaño posible, para que se cargue con mayor rapidez. Evitar patrones analizables (marcas de agua, logotipos, fotos, etc.): interfieren con la lectura. Son preferibles las tramas aleatorias.

  13. Si se usa una imagen de fondo, definir previamente un color de fondo ("bgcolor") en la misma gama: éste se carga primero y anuncia así al usuario que la página se está cargando.

  14. Evitar colores fuertes y también un texto blanco sobre fondo negro.

  15. Tener en cuenta que el cliente puede definir su color de fondo preferido (y anular así el que se transmite): esto es importante para la definición del color del texto y de los enlaces. (Weinschenk..., pp. 260-267) .

A propósito del número11, es conveniente recordar siempre el carácter global de las comunicaciones de hoy. A menos que se diseñe para una intranet -de acceso restringido- es conveniente evitar signos gráficos y términos que sólo se entienden localmente o que pueden ser malinterpretados en otras regiones. Si se desea una máxima difusión, también será necesario agregar versiones en otros idiomas (principalmente en inglés, la lengua dominante de Internet). Acerca de pautas más concretas para el diseño"global -especialmente en el área gráfica- se puede consultar la obra "Global Interface Design", de Tony Fernández.

3.4. La redacción de la página

Finalmente, con relación a la redacción del texto:

  1. Recordar ante todo que la lectura en pantalla resulta generalmente más molesta que en papel.

  2. Usar oraciones cortas y precisas y evitar redundancias.

  3. Usar lo más que se pueda esquemas y "listas no-ordenadas" (con "bullets")

  4. Colocar los textos de niveles de detalle diferentes en páginas separadas obligar a leer detalles no deseados).

  5. No subrayar nada (lo subrayado indica ancla): usar negritas, pero con mesura.

  6. Evitar el texto continuo en cursiva: es de difícil lectura.

  7. Los párrafos no deben tener más de 4 o 5 oraciones.

  8. Usar muchos subtítulos.

  9. Evitar textos que no sean afirmativos y evitar los juicios de valor y apreciaciones personales.

  10. Ser consistente en la puntuación y el uso de mayúsculas.

  11. Informar adecuadamente de los cambios (Página de "Novedades" y fechas de actualización). (Weinschenk..., pp. 271-275)

4. Creación de los documentos

Al crear los documentos, conviene asegurarse que una página no se demorará demasiado en cargarse en el computador del lector, lo cual dependerá tanto de la longitud del texto como ?sobre todo- de la cantidad de ilustraciones (visuales o auditivas) que incluya. Es cierto que la velocidad de recepción depende de la capacidad de las redes ("ancho de banda" dividido por el número de usuarios simultáneos), lo cual no puede ser controlado por el emisor-programador. Pero sí es posible aumentar -o reducir- la velocidad controlando la estructura de cada página. Si el texto es breve y las ilustraciones pocas (y pequeñas), la transmisión será mucho más rápida. Pero la comunicación en su conjunto puede tornarse ineficiente (y enojosa) si se fragmenta demasiado el contenido, obligando al lector a activar enlace tras enlace, lo cual puede tener como resultado que ocupe más tiempo esperando la llegada de la información que leyendo ésta.

Conocemos ejemplos en ambos extremos: páginas que demoran varios minutos en llegar debido a su extensión e ilustraciones, y páginas que sólo contienen un párrafo de texto y obligan a pedir otra enseguida. En este caso, sólo pueden recibir las páginas en forma rápida quienes estén conectados localmente al mismo servidor de WWW. Pero quienes estén alejados se aburrirán de las esperas.

?Cuál sería el adecuado "término medio"? Nuestra experiencia aconseja trabajar con documentos de una extensión del orden de 10 a 20Kb. Y en una página de texto de este tamaño, evitemos colocar más de tres o cuatro ilustraciones. También, si queremos agregar fotos o dibujos ilustrativos, utilicemos el sistema de "estampillas", que consiste en insertar reproducciones pequeñas (como máximo de 150 a 200 pixeles por lado) que vinculen las ilustraciones de plena página que se quieran ofrecer (que se obtendrán al hacer un 'clic' sobre la estampilla).

Aumenta la velocidad de recepción de una página el indicar en su programación el tamaño exacto de cada ilustración (<IMG WIDTH=value HEIGHT=value SRC=...>): de este modo el texto será exhibido "saltando" el espacio requerido para las imágenes, lo cual permite empezar rápidamente a leer. También ayuda a reducir la espera el uso de ilustraciones de formato "interlaced gif", ya que éstas aparecen en forma progresiva (primero borrosas y luego más y más nítidas). Pero el formato ".gif" sólo admite 256 colores, lo cual en algunos casos puede ser una calidad insuficiente. La solución consiste nuevamente en crear estampillas que remitan a imágenes mayores, en miles de colores (formato ".jpg").

5. Documentación del proyecto

Como en todo proyecto de computación, se recomienda documentar adecuadamente los directorios y sus contenidos. Como mínimo, debería anotarse:

- la estructura jerárquica (directorios y nombres de los documentos contenidos en cada uno)

- las anclas y los enlaces estructurales (puntos de origen y de destino); con nombre HREF y significado, por ejemplo,

/dir_121/: (Computación)

index.html

<A HREF = "ccien.html"> = Computación científica

<A HREF = "sdistr.html"> = Sistema distribuido

Páginas:
ccien.html = Computación científica Segmentos:

<A NAME="objetivos"> Objetivos

<A NAME="recursos"> Recursos Computacionales

etc.

- para las ilustraciones: conviene hacer una lista de los nombres de los archivos junto con la indicación de lo que representan (y es conveniente anotar el tamaño de cada una, para facilitar la programación en Html), por ejemplo:

/fotos/
g_board1.gif 402x236 "Motherboard"

e_mainfr.gif 200x136 Computador mainframe

f_babbag.gif 90x128 Babbage (cara)

f_chip.gif 120x158 Chip

f_mainfr.jpg 400x272 Computador mainframe (foto)

Aquí "g_" indica gráfico

"e_" indica estampilla

"f_" indica foto,

lo cual permite ordenar y reconocer con facilidad el tipo de ilustración

Siendo ésta la documentación mínima indispensable para la mantención y fácil actualización, es necesario recalcar la conveniencia de utilizar una base de datos con la información de cada página Html, lo cual permite una manipulación mucho más exhaustiva y segura de todos los componentes y una verificación de la coherencia, especialmente importante en módulos o sitios conformados por un gran número de páginas.

Conclusión

Los estudios sobre facilidad de uso en materia de hipertexto muestran los siguientes requerimientos de los usuarios:

Obtener la información cuando es requerida.

Encontrar la información que es buscada.

Poder identificar el significado de un vínculo de tal modo que la página obtenida responda efectivamente a lo esperado.

Poder obtener una visión de conjunto de la información disponible, como asistencia para realizar una tarea específica o para seleccionar lo más relevante.

Poder navegar para buscar información complementaria después de completar una primera tarea. (Smith, Newman, y Parks, pp. 70-71 y 73).

Es el deber del diseñador de web tratar de responder lo mejor posible a estos requerimientos. Hemos visto aquí algunas recomendaciones para sacar el máximo provecho a la forma actual de operar, y algunas proyecciones en torno a soluciones futuras.

Bibliografía

Arfuch, Chaves y Ledesma: "Diseño y comunicación", Buenos Aires, Paidós, 1997.

Fernández, T.: "Global Interface Design", Boston, Academic Press, 1995.

Gándara, M.: "La interfaz con el usuario: Una introducción para educadores", ALA Carta, 1993-94, n?. 6 a 9.

Gaines, B.R. & Shaw, M.L.G.: "Knowledge acquisition, modelling and inference through the World Wide Web", International Journal of Human-Computer Studies, 1997, n?46, pp.729-759.

Helinski, P.: "Web-site usability engineering", Web Techniques,1997, vol .2 n?,. 4, pp. 39-43.

Shneiderman, B.: "Designing information-abundant web sites: issues and recomendations", International Journal of Human-Computer Studies, 1997, n?47, pp.5-29. SiegelD.: "Creating killer web sites", Hayden Books, 1995.

Smith, P.A., Newman,I.A. y Parks, L.M.: "Virtual hierarchies and virtual networks: some lessons from hypermedia usability applied to the World Wide Web", International Journal of Human-Computer Studies, 1997, v. 47, pp.67-95.

Weinschenk, S. & col.: "GUI design essentials", New York, Wiley Computer Publishing, 1997.

 

* Trabajo presentado en la II Bienal de la

Comunicación, celebrada en la Universidad de

Cartagena (Colombia), en mayo de 1999


FORMA DE CITAR ESTE TRABAJO EN BIBLIOGRAFÍAS:

(2000): Principios de diseño para la WWW. Revista Latina de Comunicación Social, 29. Recuperado el x de xxxx de 200x de:
http://www.ull.es/publicaciones/latina/aa2000rmy/
110colle.html