DISEÑO DE INTERFACES WEB

Por Mari-Carmen Marcos

mcmarcos@posta.unizar.es

ÍNDICE

INTRODUCCIÓN

1. ALGUNAS GENERALIDADES ACERCA DE LA WEB

? Qué es la World Wide Web

? Origen de la World Wide Web
? Hipertexto e Hipermedia
o Concepto
o Ventajas y desventajas
o Historia
o Consejos a autores de hipertextos
? HTML (HyperText Marked Language)
? Hojas de estilo (Cascading Style Sheets)

2. QUÉ HAY QUE SABER PARA DISEÑAR INTERFACES WEB

? Una nueva metáfora: el hipertexto

? El navegador visualizador web
? Quién debe realizar el diseño
? Un usuario activo
? Un diseño para cada finalidad
? Datos dinámicos en las interfaces
? Directrices para el diseño de interfaces web
o Planteamiento general del diseño
o Organización de la información en la interfaz
o Facilidad para el usuario al navegar

- iconos
- mapas sensibles

o Agilidad en las tareas del usuario

o Comodidad en la lectura
o Consistencia de la interfaz
o Accesibilidad
? Evaluación del diseño
? Tendencias

BIBLIOGRAFÍA

INTRODUCCIÓN

Si el principio del siglo XX trajo consigo el fenómeno conocido como la

explosión de la información, el final del siglo, lejos de frenar la velocidad en la
producción de documentos, se caracteriza por haber puesto una gran parte de
ellos en las redes de telecomunicaciones que se extienden por todo el planeta.
Para organizar esa masa de información que parece que nos rodea -¿nos invade?-
, se vienen desarrollando herramientas que pretenden hacer posible una
recuperación rápida, efectiva y eficiente de la información.

Los sistemas ideados para la documentación en soporte papel tuvieron que

adecuarse a las imposiciones de los soportes magnético y óptico; después, con la
aparición de Internet, esos mismos sistemas se han traspasado a las tecnologías
de la telemática y entre ellas a la que más impacto tiene en este momento:
Internet.

La Psicología y la Ingeniería tienen una rama de estudio en común, que son los
factores humanos; esta especialidad trata de averiguar cuáles son las causas que
influyen en el comportamiento humano. Una de ellas está relacionada con el
entorno del hombre y la interfaz de los objetos que maneja; esto se aprecia de
forma muy clara cuando lo que se maneja son máquinas, dentro de las cuales se
incluyen los ordenadores. Por eso es muy importante diseñar interfaces que
optimicen la relación hombre-maquina.

Los tres pilares fundamentales que se deben tener en cuenta en el diseño de

interfaces que faciliten esa comunicación son la forma -que será lo más atractiva
y cómoda de usar posible-, la adecuación al tipo de usuario que lo utilice, y la
funcionalidad, que le hará ser útil para el objetivo con el que se creó.

El resultado que se espera obtener siguiendo las recomendaciones de diseño de

interfaces son productos fáciles de usar y de aprender a manejar, que satisfagan
las necesidades de los usuarios y que reduzcan tanto el tiempo como el coste de
su desarrollo.
 ALGUNAS GENERALIDADES ACERCA DE LA WEB

INTERNET, LA RED DE REDES

Antes de entrar en el concepto de WWW conviene hacer un repaso rápido a

modo de recordatorio acerca de Internet. Internet es el nombre que recibe la red
de ordenadores más grande que existe actualmente; más que una unidad se
puede decir que es un conjunto de muchas redes menores. Gracias a unas normas
comunes de comunicación es posible que todos los ordenadores conectados a la
red puedan intercambiar información. La arquitectura en la que se basa Internet
es la denominada cliente/servidor, esto significa grosso modo que unos
ordenadores almacenan la información (los servidores) y otros acceden a ella
(los clientes).

El protocolo que ha triunfado en Internet ha sido el TCP/IP (Transfer Control

Protocol/Internet Protocol), dejando atrás el protocolo OSI (Open Systems
Interconection). En pocas palabras diremos que el funcionamiento del TCP/IP
consiste en dividir la información en paquetes de igual tamaño y enviarlos
numerados a su destino, donde se comprueba que ha llegado correctamente el
envío.

Para hacer posible la comunicación entre máquinas es necesario que cada una
posea una identificación que la haga única y que permita recibir la información
que le es enviada. Lo que se hace es dotar a cada máquina conectada a Internet
un número IP y una DNS (Domain Name Server), el primero con número y el
segundo con letras.

Para acceder a ficheros concretos dentro de un servidor es necesario conocer

dónde están ubicados y dotarlos de una dirección. Esta dirección es la URL
Universal Resource Locator) y se compone de los siguientes elementos:
protocolo seguido de el signo de dos puntos y una doble barra inclinada, nombre
de la máquina (número IP o DNS), directorio y subdirectorios, fichero. Por
ejemplo, si se trata de un fichero de texto html en la web podría ser:

http://hipatia.uc3m.es/~nogales/HTML/css2.html

Dentro de Internet tradicionalmente se habla de tres servicios básicos: el

terminal remoto, la transferencia de ficheros y el correo electrónico; cada uno
cuenta con aplicaciones clientes que hacen más fácil su uso.

Además han existido y existen numerosas herramientas que facilitan la

localización de información en Internet: Whois, X.500, Netfind, Archie, Gopher,
WAIS y WWW. En la actualidad la gran mayoría de estas herramientas han
evolucionado y se encuentran integradas dentro de la última, la web.
 QUÉ ES LA WWW

World Wide Web, 3W, WWW o web, no importa qué denominación se escoja,
pues se usan indistintamente para referirse al medio por antonomasia para
"navegar" por Internet. Unos utilizan el masculino al intentar castellanizar el
término inglés -el web-, otros prefieren usar el femenino por corresponder la
traducción a este género -la web, la telaraña-.

Sea como sea, se conoce con este nombre al sistema preparado para recorrer
diferentes páginas web dispuestas en servidores accesibles desde cualquier
ordenador conectado a la Red y enlazadas unas con otras conformando una
estructura similar a la de la tela de araña.

Resulta complicado definir la web de una forma exacta. Tramullas y García

Marco (1996) hablan de tres elementos fundamentales para referirse a ella:

o Un sistema de navegación sobre información dispersa en Internet.

o Un sistema de distribución de información en Internet.
o Un formato de presentación y transferencia de información.

A esto se podría añadir que la presentación de la información puede incluir

elementos multimedia (además de texto imagen fija, imagen en movimiento y
sonido). El vídeo y el sonido por el momento no se ejecutan en el propio cliente
visualizador web, sino que precisan el lanzamiento de programas preparados
para la lectura de los ficheros en cuestión; lo que si puede hacer el cliente es
lanzar directamente el programa que se necesita (en caso de que se encuentre en
le disco duro), dato que conoce por la extensi´n del fichero, y en caso de que no
se tenga el programa adecuado, desde la página web que contiene el fichero para
ejecutar se ofrece la posibilidad de descargarlo en el disco.

Para acceder a la WWW, el usuario o "navegante" necesitará tener a su

disposición un ordenador con conexión a Internet y un browser o visualizador,
que es el cliente web. El programa cliente es la herramienta de navegación; en él
se indica la URL del recurso al que se quiere acceder, se recorren con las teclas
de avance/retroceso las páginas ya visitadas y a las que se quiere regresar, se
almacenan las direcciones de los sitios de interés en un bookmark,guarda la
historia de los sitios visitados, permite guardar una página, un marco o una
imagen en el disco... Existe en el mercado un buen número de clientes web, pero
sin duda los más usados son Netscape Navigator e Internet Explorer de
Microsoft.

ORIGEN DE LA WORLD WIDE WEB

La cuna de la WWW está en el Centre Européen de Recherche Nucléaire

(CERN)de Ginebra. El objetivo inicial de crear un sistema así era la búsqueda de
un sistema de comunicación entre los científicos de física nuclear de todo el
mundo. En poco tiempo la WWW ha excedido su finalidad y se ha extendido
como medio de comunicación entre todas las personas.

Volviendo en le tiempo llegamos a marzo de 1989, momento en el que Tim

Berners-Lee, investigador especializado en telecomunicaciones, propone al
CERN utilizar un sistema de comunicación basado en el hipertexto para lograr
ese flujo de información entre los científicos. La propuesta siguió adelante y en
noviembre de 1990 se desarrolló un prototipo. Cuatro meses más tarde, en
marzo de 1991, ya se disponía de un programa visualizador WWW en modo
línea distribuido a una audiencia limitada a varias plataformas. Hubo que esperar
hasta el mes de mayo de ese mismo año para que se diera una difusión más
generalizada; entonces ya se puede hablar del nacimiento de la World Wide
Web.

Desde ese momento -mediados de 1991- hasta hoy no se ha cesado en el

desarrollo de novedades que completan y mejoran las capacidades que de por sí
tiene un sistema electrónico, hipertextual y en red; las conferencias que tratan
del tema, los artículos y libros que lo estudian y analizan. Un punto destacable
de esta vertiginosa vida de la web es que si en enero de 1993 había en marcha
alrededor de cincuenta servidores web y en marzo este sistema supone el 0,1%
del tráfico de Internet, en septiembre ya alcanzaba el 1% y en octubre había unos
quinientos servidores web activos.

Las negociaciones entre los países que conformaban el CERN y las instituciones
estadounidenses interesadas en el proyecto web dieron lugar a la creación del
W3 Consortium en Boston (Massachussetts) en 1994. En él participan el CERN,
el Institut National de Recherche en Informatique et en Automatique de Francia
(INRIA) y el Massachussetts Institute of Technology (MIT).

HIPERTEXTO E HIPERMEDIA
o Qué es
o Ventajas y desventajas
o Historia
o Consejos a los autores de hipertextos

Centrándonos en lo que ha venido ocurriendo en la corta vida de Internet

podemos observar cómo la estructura jerárquica de acceso a la información que
ofrecía gopher y las técnicas documentales de Wais han ido quedando atrás
cuando se impuso la World Wide Web. El éxito de este modo de presentar la
información se debe principalmente a la flexibilidad del protocolo http y a las
capacidades del lenguaje html, pero no hay que olvidar que la base de ambos -
protocolo y lenguaje- está en la estructura hipertextual de las páginas que se
crean; de ahí precisamente toman sus nombres: hypertext transfer protocol y
hypertext markup language.

En poco tiempo, casi toda la información disponible en la red se ha volcado al

web. Millones de documentos se encuentran accesibles mediante este sistema de
almacenamiento de información y entre todos se forma una gran red de
estructura hipertextual. De ahí que se dedique un apartado de este estudio al
hipertexto/hipermedia.

Qué es el hipertexto

Tradicionalmente hemos entendido la lectura y la escritura como actos

secuenciales, ya que proceden del discurso hablado que, para guardar
coherencia, deber ser necesariamente secuencial. Resulta inevitable que a lo
largo de un discurso o de la redacción de unos párrafos lleguen a la mente del
orador o del autor pensamientos de otros colegas o asuntos relacionados con la
cuestión de la que trata. En la vida cotidiana lo comprobamos cuando pensamos
y cuando charlamos con otras personas, porque ¿cuántas veces comenzamos a
hablar de un tema y terminamos con otro que nada tiene que ver con el primero,
y además entre esos dos hemos comentado asuntos ajenos totalmente a los que
originaron y finalizaron la conversación?.

Si nos centramos en una situación más científica, no tenemos más que hojear
cualquier libro de corte investigador y comprobaremos que muchas de sus
páginas están plagadas de referencias bibliográficas a fuentes que tratan del
mismo tema, que lo amplían o que dan otra visión diferente, y de citas textuales
de autores que ofrecen determinada información relevante sobre ese asunto. Esto
ocurre debido a que nuestra mente es por naturaleza hipertextual y no podemos
evitar relacionar conceptos, personas y situaciones.

El hipertexto es una manera de organizar el conocimiento y de proporcionar

acceso a la información. Con la estructura hipertextual en un documento se
pretende imitar esas interrelaciones que se dan en nuestras ideas brindando al
lector la posibilidad de moverse libremente por un documento en función de sus
intereses. Un documento hipertextual es un texto (u otro tipo de información)
desde el que se puede acceder a otros textos relacionados; ese acceso se realiza a
través de los términos que han sido elegidos para tal fin y que aparecen
resaltados de alguna forma para avisar al lector de que puede ampliar la
información sobre ese concepto.

No es necesario acudir a recursos electrónicos para encontrar la esencia del

hipertexto; pensemos simplemente en los índices de los libros y revistas: a partir
de la información que nos ofrecen podemos decidir qué capítulos nos interesan,
cuáles no y el que vamos a leer en primer lugar. El ámbito que hace posible ir de
un texto a otro no es por tanto necesariamente el de la informática, pero sí es el
ideal por la facilidad que posee para manejar gran cantidad de información y de
diferentes tipos al mismo tiempo y a gran velocidad; antes de la aparición de la
informática, plasmar la estructura hipertextual con el desarrollo con que hoy la
conocemos era imposible de aplicar por la limitación inherente al soporte papel.

El término de hipertexto fue acuñado por Ted Nelson en los años sesenta, y se
ha mantenido con éxito hasta hoy en día. Ligado a este concepto nace el de
hipermedia para denominar a los documentos de estructura hipertextual que
combinan texto, imagen y sonido, es decir, la unión del hipertexto con el
multimedia. Un ejemplo de hipermedia son las enciclopedias y los diccionarios
electrónicos.

En el hipertexto, la base de la información está constituida por una red de nodos

textuales que sirven de enlace para llegar a otra información que puede hallarse
bien en el mismo documento, bien en otro diferente. Los elementos que lo
componen son tres:

o Los documentos, entendidos como conjuntos de información

independiente que se presentan como una unidad. En un entorno
automatizado suelen coincidir con ficheros.
o Los nodos, que son las porciones de información (palabras, frases,
imágenes) que entran en relación con otros nodos a los que proporcionan
acceso. Cada nodo pertenece únicamente a un documento.
o Los enlaces, que son los vínculos que se establecen entre segmentos de
información, es decir, entre los nodos que relacionan los documentos.

Ventajas y desventajas del hipertexto

La estructura hipertextual de la información ofrece muchas ventajas y algunos

inconvenientes. Como puntos positivos hay que decir que el hipertexto permite
organizar la información de distintas formas dependiendo de las necesidades de
cada usuario, que será en definitiva quien tome la iniciativa en la elección de lo
que le interesa consultar y el orden en el que quiere hacerlo, de manera que no
invertirá su tiempo en la lectura de párrafos que no son de su interés en ese
momento. La estructura del hipertexto, por tanto, facilita la localización de
información relevante. Es más que una manera de almacenar y recuperar
información; en él, el usuario interactúa con la información y la convierte en
conocimiento. El mundo del multimedia ha entrado dentro de las estructuras
hipertextuales incluyendo en éstas imágenes y sonidos que pueden incluso
funcionar como nodos.

Es de imaginar que no todo son ventajas en el sistema hipertextual; se apuntan

fundamentalmente dos consecuencias negativas del uso de estas estructuras: la
desorientación y el desbordamiento cognoscitivo.

La desorientación se produce fácilmente, ya que no hay un único camino ni un

solo hilo conductor de la lectura; es frecuente que el lector se aparte de su
intención inicial y se disperse en otros asuntos que le llaman la atención. Cuando
se accede a más de tres documentos diferentes de forma continuada en un
entorno hipertextual, a menudo ocurre que el usuario olvida cómo llegó hasta ahí
y cuál fue el motivo que le llevó a hacerlo. Las preguntas que se suele hacer en
un punto de su recorrido son ¿qué hago yo en esta página?, ¿por qué he accedido
a esta información?, ¿qué es lo que estoy buscando?, ¿cómo vuelvo al punto de
inicio?.

Para paliar esta sensación de estar perdido se han ideado herramientas que guían
al usuario y le ayudan a encauzar su camino. Los creadores de hipertextos
pueden ofrecer una organización que facilite un cierto orden, por ejemplo
índices jerárquicos, mapas de la estructura del documento, así como opciones de
"volver a la página anterior", "volver a la página principal", marcas que indican
qué nodos se han pulsado anteriormente, mapas que indican el recorrido
realizado hasta el momento. Parece ser que es conveniente que el documento se
articule en torno a una estructura jerárquica y se complete mediante relaciones
asociativas, como ocurre en el proyecto Xanadu de Ted Nelson. Otras
herramientas que facilitan la orientación en el camino de la lectura son las que
permiten saber al usuario que recorrido ha seguido hasta llegar a un punto y las
que le dejan añadir marcas a las que pueda volver más adelante. También
conviene que los sistemas dispongan de índices alfabéticos y de búsqueda por
palabras clave para lograr recuperar aquella información concreta que se
necesite.

La otra desventaja que se apunta es el desbordamiento cognoscitivo. La gran

cantidad de información almacenada en soportes informáticos, locales como el
cd-rom o remotos si nos referimos a las redes de telecomunicaciones, puede
causar en el lector la impresión de que existe mucha más información que le
interesa de la que él puede llegar a leer, impresión –por suerte o por desgracia-
totalmente cierta. Para este problema no existe solución, pues la información
aumenta a gran velocidad, y esto ocurre desde primeros de nuestro siglo sin que
se pueda evitar; lo único que se puede hacer es organizarla de manera que se
recupere la más relevante posible a las consultas, con el menor ruido y la mayor
precisión. De esto se ocupan los sistemas de recuperación de información y sus
herramientas de trabajo: las ecuaciones lógicas, los sistemas de navegación, los
interfaces de consulta, los sistemas de indización, y en general los métodos de
organización de la información.

Historia del hipertexto

El origen de la idea del hipertexto se debe a Vannevar Bush (1890-1974). Esta

persona dirigió la Oficina de Investigación y Desarrollo Científico del gobierno
de los Estados Unidos en los años cuarenta, desde donde coordinó el esfuerzo de
más de seis mil científicos norteamericanos en el campo de la investigación
militar en la época de las guerras mundiales. Así mismo, ostentó el cargo de
consejero y asesor científico del presidente Franklin Roosevelt, presidente de los
Estados Unidos durante los años 1932 y 1944.

En el año 1945, recién acabada la Segunda Guerra Mundial, publicó un artículo

del que ya existía un borrador en 1939 y en el que proponía la creación de
relaciones dentro de y entre los documentos de modo que al hilo de la lectura se
pudiera acceder a información relacionada sin necesidad de buscarla en otros
medios. La herramienta con la que Bush implementó su sistema se llamó Memex
(Memoria Externa) y se basó en la tecnología disponible en ese momento: las
microfichas; en esas microfichas cada investigador almacenaría la información
que le interesara y podría localizar datos que se encontraran indiferentemente en
una u otra ficha, así como intercambiarlas con otros investigadores, todo gracias
a una interconexión que se establecería entre ellas. Además, también sería
posible compartir los recorridos seguidos en el sistema. El hecho de que su
soporte fuera la microficha abocó a este sistema la fracaso, ya que resulta
imposible el manejo eficaz de miles de fichas. De todos modos la idea quedó en
el aire esperando el desarrollo de computadoras con mayores capacidades y a
menor coste.

En la década de los sesenta se crearon algunos sistemas basados en la estructura

hipertextual aprovechando el desarrollo de la informática y el avance en cuanto a
la presentación de la información con interfaces gráficos más comprensibles
para el usuario final.

En el Instituto de Investigación de Standford, Douglas Engelbart dirigió una

investigación financiada por el gobierno que estaba dirigida a la ofimática y la
gestión documental. Allí se estudió acerca de herramientas gráficas que
facilitaran el manejo de los programas a los usuarios no especializados y
nacieron algunos de los conceptos de la informática interactiva como el ratón y
las ventanas. El resultado fue su sistema Human Augmentation, que cumplía con
los requisitos de ser un sistema con una interfaz gráfico intuitivo.

A mediados de esta década, el gran creador de sistemas hipertextuales Ted

Nelson propuso un nuevo sistema que no llegó a hacerse realidad; se trataba de
Xanadú. La idea era reunir toda la producción escrita existente y conectar unos
textos con otros, estando esos documentos almacenados en ordenadores
particulares pero disponibles para el resto de los usuarios por medio de una
dirección única para cada uno de ellos. Se trata sin duda de un anticipo de
Internet.

Paralelamente, Andries Van Dam desarrolló el primer libro electrónico en la

Universidad de Brown, en el que aparecían ya los gráficos dinámicos y la
animación tridimensional.

A mediados de los años ochenta ya se comercializaban sistemas que integraban

características hipertextuales. En 1987 Apple incluyó el sistema HyperCard en
sus ordenadores personales Macintosh, al que no se refirió con el término de
hipertexto, pero que es evidente que la idea está detrás. Se trata de un sistema
basado en la metáfora de las tarjetas ordenadas en montones según su naturaleza.

Otros sistemas pioneros en la implantación del hipertexto fueron NoteCards de

Xerox Parc, Kms de Knowledge Systems, Guide de Owl International y
Hyperties de la Universidad de Maryland.

Pero el lugar que dio nacimiento al sistema hipertextual por antonomasia fue el
Centro Europeo de Investigación Nuclear (CERN) de Ginebra; allí, Tim
Berners-Lee tomó la estructura del hipertexto con el fin de crear un sistema de
trabajo para los físicos del CERN. Este proyecto fue el inicio de lo que hoy
conocemos como World Wide Web.

Consejos a los autores de hipertextos

La primera pregunta que debe hacerse quien piense crear un documento

hipertextual es: ¿conviene que esta información tenga estructura hipertextual?.
No siempre resulta la manera más adecuada de presentar la información;
conviene que se den algunas condiciones iniciales:

o que haya un cuerpo amplio de información organizada en numerosos

fragmentos
o que los fragmentos estén relacionados entre sí
o y que los usuarios necesiten tan sólo una parte de algún fragmento cada
vez.

Si no es así, y siguiendo a Shneiderman cuando se refiere a sus "reglas de oro

del hipertexto", probablemente resultará más cómoda la lectura lineal en lugar
de ir de enlace en enlace buscando la información que sigue a la ya leída.

El segundo planteamiento se refiere a la estructura en sí misma, a cómo

organizar la información que se ha decidido que se presente bajo esta forma, y al
propio diseño que se va a adoptar. De momento adelantaremos algunas
consideraciones básicas que más tarde se completarán al referirse al caso
concreto de las páginas web (en el apartado acerca del diseño de hipertextos para
web) . El creador de documentos hipertextuales debe tener en cuenta que:

o un número demasiado amplio de enlaces en cada fragmento abruma al

lector,
o los fragmentos demasiado largos hacen la lectura pesada y anulan la
interactividad que se propone el hipertexto,
o la necesidad de recorrer demasiados enlaces para llegar a la información
buscada desorienta al lector,
o un índice pobre o mal construido puede dificultar al lector la elección del
camino correcto para determinar qué información contiene el documento
y para llegar a su destino.

Quien decida crear estructuras hipertextuales debe saber que existen

herramientas de edición que le pueden resultar útiles y que están preparadas para
acometer acciones como la importación de documentos o de nodos, la edición de
enlaces, la exportación de colecciones de documentos, nodos o enlaces, la
impresión de bases de datos completas... por citar las más importantes.

HTML (HYPERTEXT MARKUP LANGUAGE)

HTML es un lenguaje estructurado pensado para crear hipertextos que se leerán

en el web. Se basa en el metalenguaje SGML (Standard Generalized Markup
Language). No hay que confundirlo con otro tipo de lenguajes que se usan en
Internet como los de descripción de páginas (ficheros PostScript, ficheros .pdf
de Acrobat...) o los de programación (Java, Perl, C++...). El HTML no es un
lenguaje de presentación ni de programación, sino que está orientado a definir la
estructura y la semántica del documento.

Su origen se produjo a la par que el del web, ya que se trata del lenguaje que
sirve para crear páginas web, también llamadas páginas HTML. Desde su
nacimiento ha estado sometido a incesantes cambios; de hecho ha habido
diversas versiones: 1.0, (en 1993), 2.0 (en 1995), 3.0 (en 1995), 3.2 (en 1997),
4.0 (en 1997, revisada en 1998). La última versión está disponible en el sitio
web del W3 Consorcium en la dirección http://www.w3.org/TR/1998/REC-
html40-19980424. Existe una guía en español elaborada por el Dr. Nogales
(profesor de la Universidad Carlos III de Madrid) en la que se comenta punto
por punto la especificación 4.0 de HTML:
http://hipatia.uc3m.es/~nogales/HTML/html40.html

Como aspecto novedoso de esta versión respecto a la anterior hay que destacar
que se da una reorientación del HTML hacia su función primitiva de marcado de
la estructura y semántica del documento, dejando lo relacionado con el aspecto
físico a las hojas de estilo y desaconsejando el uso de ciertos elementos o
atributos relacionados con la presentación del documento. Además, esta última
versión es capaz de representar diversos alfabetos y de utilizar dispositivos
diferentes a la pantalla del ordenador (por ejemplo la televisión, la impresora, un
dispositivo Braille...).

Si HTML es un lenguaje, es obvio que un documento html es aquel que ha sido

marcado usando dicho lenguaje. El formato del documento suele ser ASCII, por
ser el más sencillo de transportar de una plataforma a otra sin que dé problemas
de lectura, y su extensión es .html o .htm. Los clientes web son capaces de dotar
a la información que contiene el documento del aspecto que dictan las etiquetas
html.

Poco vamos a decir acerca de este lenguaje, ya que para el objetivo del presente
estudio no se requiere un conocimiento profundo sino tan solo unas nociones
que ayuden a comprender cómo están creadas las páginas web que visualizamos
desde el navegador. Por tanto nos limitaremos a hacer un breve repaso de su
estructura.

Los visualizadores web suelen disponer de una opción en su menú "ver" -

Netscape Navigator e Internet Explorer de Microsoft la tienen- desde la que
obtener el "origen" de la página html. Una ojeada a esta información nos da una
idea de en qué consiste el lenguaje html. El usuario observará que los códigos -
nos referimos a todo lo que no es contenido informativo propiamente dicho que
se visualiza en la página desde el cliente- aparecen encerrados entre los signos
de mayor y menor, y que algunas veces una misma etiqueta aparece precedida de
una barra inclinada. Pues bien, todo esto que a primera vista puede parecer tan
farragoso no lo es tanto cuando se tienen unas nociones que a qué se refieren.
Cada etiqueta html va encerrada entre los citados signos de menor y mayor
(<etiqueta>), y si se trata de una etiqueta que indica el final de determinada
instrucción se marca con la barra inclinada justo antes del nombre de la etiqueta
(</etiqueta>).

Todo documento HTML debe comenzar y finalizar con la etiqueta que indica
que se trata efectivamente de ese tipo de documento, y que es <HTML> al
comienzo y la misma de cierre al finalizar, </HTML>.

La segunda etiqueta que encontramos, y esta es la única realmente obligatoria

que establece la especificación, es la que indica el título del documento,
entendiendo por éste el texto que aparece en la parte superior de la pantalla del
cliente navegador, junto al nombre del programa que se está usando. Su etiqueta
es <TITLE> y no hay que cerrarla como a otras.

Una vez señalado el título se continúa con el cuerpo del documento, todo él
encerrado por la etiqueta <BODY> y su homónima de cierre </BODY>. Dentro
del cuerpo se coloca el contenido de la página web: textos, imágenes, mapas
pulsables, tablas, formularios. La información se puede estructurar en párrafos y
o secciones con cabeceras de distinto nivel, enlaces a otras partes del mimo
documento, de otros situados en la misma carpeta o en otras que estén en ese
servidor o incluso de ficheros en otros servidores.

Existe una gran cantidad de etiquetas, muchas de ellas pueden contener

elementos y atributos que realizarán una función u otra según la voluntad del
autor. Afortunadamente existen muchas guías que hacen más sencillo
comprender y aprender el lenguaje html, y para quien prefiera aprender de una
forma más sencilla a hacer sus páginas web también hay editores que facilitan
mucho el trabajo, por ejemplo el Netscape Composer y el FrontPage de
Microsoft.

HOJAS DE ESTILO (STYLE SHEETS)

Cuando se pensó en desarrollar el lenguaje html se fijó una orientación hacia la

definición de la estructura y la semántica de los documentos, ya que su
resultado, las páginas web, debían ser un medio de comunicación científica. El
gran éxito del sistema llevó la web hacia entornos comerciales y su usuario
potencial ya abarcaba un abanico mucho más amplio, haciéndose entonces más
importante la presentación de la información, su diseño. Los editores de páginas
html comenzaron a integrar funciones con resultados que aún no eran posibles
con las versiones de la especificación html que existían en el momento.- Poco a
poco las sucesivas versiones de html fueron incluyendo nuevas etiquetas capaces
de realizar esas funciones adelantadas por los editores.
La última versión de html, la 4.0, pretende ser una vuelta hacia ese objetivo
inicial que se estaba empezando a quedar en un segundo plano, y dar
importancia a los rasgos que afectan a la estructura y a la semántica de los
documentos, y no tanto a su diseño. La solución que da la especificación es
delegar las características de presentación en las hojas de estilo, indicando junto
a los elementos que serían suplantados por éstas que son elementos
desaconsejados a favor de las hojas de estilo.

La ventaja que supone el uso de hojas de estilo es que se diseñan de forma

independiente al documento html y se aplican, enteras o alguno de sus niveles, a
los documentos que se desee, facilitando la consistencia y la imagen del sitio
web. Además, las hojas de estilo tienen la propiedad de poder adecuarse a los
distintos medios posibles de presentación de documentos (la pantalla del
ordenador, la televisión, la impresora, los navegadores basados en voz,
documentos en Braille...). También es posible que el usuario elija qué tipo de
diseño prefiere visualizar en un mismo documento: puede ser un formato más
simple o tradicional, o uno más "de diseño". Una última ventaja es la relativa al
tiempo de carga: las hojas de estilo se cargan en el visualizador, de manera que
al acceder a un documento que incluya la misma hoja de estilo de otro que se ha
"bajado" anteriormente no será necesario volver a cargarla, puesto que ya está en
el ordenador cliente.

Un tipo de hojas de estilo muy usado es el de cascada (Cascading Style Sheets),

cuya especificación se ha desarrollado también en el W3 Consortium.
Actualmente nos encontramos en el nivel 2 (CSS2). La especificación oficial del
W3 Consortium se encuentra disponible en la dirección
http://www.w3.org/TR/1998/REC-CSS2-19980512. También se han publicado
libros que tratan la especificación, así como una guía en formato electrónico y en
español que se puede encontrar en la URL
http://hipatia.uc3m.es/~nogales/HTML/css2.html.

Hagamos un repaso rápido de las hojas de estilo en cascada (CSS). ¿Cómo se

indica en un documento html que se quiere incluir un rasgo de estilo que está en
una hoja de estilo?. Existen tres formas de hacerlo, y se usará una u otra en
función a los intereses que nos muevan en cada situación. Estas son las tres
posibilidades:

o Desde el atributo "style" de cada elemento. Afecta al elemento al que

está asociado y toma el diseño de la hoja de estilo marcada por defecto
en el atributo "content" del elemento "meta". Casi todos los elementos de
"body" pueden llevar este atributo. Si queremos señalar el tamaño de
letra y el color del texto de un párrafo en concreto podremos escribir: <P
style=font-size: 14 pt; color: red">Esta es tu web de jazz.
o Desde la cabecera del documento al que se apliquen las normas de
estilo. Se consigue incluyendo el elemento "style" dentro del elemento
"head". Por ejemplo, <STYLE type="text/css" [aquí se incluyen todas las
normas de estilo que afectarán al documento]</STYLE>
o Desde un documento aparte al que se hace referencia desde el
elemento de la cabecera "link" y su atributo de relación "rel="stylesheet".
Quedaría de la siguiente manera: <LINK rel=stylesheet">. Esta opción es
 la más adecuada si las mismas normas de estilo se van a utilizar en varios
documentos, ya que evita repetir esa información y asegura la coherencia
en el diseño. Tienen la ventaja de que un cambio en la hoja de estilo va a
afectar a todos los documentos que la referencien, y por tanto nos
evitaremos tener que ir por cada documento y establecer el cambio de
diseño oportuno; pensemos por ejemplo en un cambio de logotipo o de
imagen corporativa en general.

Hasta el momento hemos hablado de la creación de hojas de estilo por parte del
autor de los documentos, pero no son los únicos que pueden decidir acerca de la
presentación de la información. También el usuario/lector puede definir cómo
quiere que se le presente lo que va a leer, y lo hará desde su visualizador; éste a
su vez, puede que tenga una hoja de estilo introducida por defecto o varias para
dar a elegir al usuario.

En fin, a grandes rasgos se ha visto cómo se tiende a separar la función más

puramente hipertextual del lenguaje html y se crean lenguajes específicos para el
diseño de páginas web, objeto de este trabajo.

A continuación se recomienda seguir con la página siguiente para concocer algo

más acerca del diseño de hipertextos, o bien acudir al índice y continuar la
lectura de algún apartado concreto que interese.

QUÉ HAY QUE SABER PARA DISEÑAR INTERFACES WEB

UNA NUEVA METÁFORA: EL HIPERTEXTO

Los visualizadores de páginas web, a diferencia de la mayoría de las

aplicaciones informáticas actuales, no han recurrido a la conocida metáfora del
escritorio de trabajo para organizar la información, sino que han querido emular
la forma de conocimiento humano, desarrollando así el llamado hipertexto: la
información se presenta como nodos dentro de una red en la que una idea lleva a
otra y esta a otra diferente. Ahora bien, el sistema sería un caos si no existieran
formas de organizar la información en una forma lógica y con posibilidad de
conocer en todo momento dónde se está y cómo se ha llegado hasta ahí.

Pero, ¿por qué está cambiando la metáfora?, ¿por qué ya no resulta adecuada la
idea del escritorio?. La respuesta es fácil, el usuario antes gestionaba la
información que almacenaba en su disco duro, y lo hacía con la metáfora del
escritorio (documentos en carpetas, carpetas dentro de carpetas mayores como si
fueran cajones y estanterías, cambiar documentos y carpetas de sitios, sacar
copias para llevar a otro lado...). Ahora, con el acceso a información distribuida
en servidores de todo el mundo, ya no tiene sentido almacenar grandes
cantidades de datos en el disco local, pues se puede consultar en línea sin
necesidad de ocupar espacio en el disco; por tanto, los documentos que se usan
ya no son sólo los almacenados, y la metáfora de organizar el escritorio de
trabajo queda obsoleta. La nueva metáfora de la navegación está sustituyendo
con éxito a aquella.

La interfaz de la web se ha hecho tan popular que está llegando al mundo del
PC: los sistemas de exploración de los sistemas operativos (pensemos en
Windows) se están cambiando por una forma de navegación interna en el disco
duro idéntica a la acostumbrada en Internet basada en enlaces que llevan de un
directorio a otro. También los creadores de aplicaciones ofimáticas han
integrado el sistema de hipertexto en sus programas: en un documento de Word,
de Excel o de otras aplicaciones se pueden crear enlaces a otros documentos, no
importa si están en el disco duro en el que se trabaja, en otro de la red local o en
un servidor externo.

Otra tecnología, el cd-rom, comparte las características de las interfaces web en

cuanto al diseño y además integra el multimedia con el dinamismo de los
enlaces, que no sólo son internos sino que también salen a la red.

Según Conklin (1987) el hipertexto suponen una gran ventaja para aplicar al
web ya que:

o Ofrece facilidad para mantener referencias entre partes distintas o

documentos independientes.
o Ofrece facilidad para crear nuevas referencias por parte del propio lector,
donde haga sus propios comentarios acerca del documento. No hay más
que bajarse la página en cuestión al disco local y añadir lo que se crea
oportuno, por ejemplo nuevos enlaces referentes al asunto del que trata;
después habría que usar la versión local del documento, ya que los
cambios se han producido en modo local.
o Estructura la información de modo hipertextual, de manera que no se
cierra en una estructura única establecida por el autor, sino que es abierta
y adecuada a cada lector por él mismo.
o Esto conlleva que los documentos se puedan personalizar a la hora de
leerlos, ya que los diferentes segmentos de texto que lo componen se
pueden organizar para servir a múltiples funciones.
o Los autores de hipertextos pueden ofrecer una visión general en una tabla
de contenidos; al igual que se comentaba anteriormente, es posible
mezclar documentos locales y de la red en esa misma estructura, pero
hay que tener en cuenta que los locales no se podrán consultar más que
desde ese PC.
o La información aparece en forma de módulos, evitando el solapamiento
de ideas y la duplicación de textos en diferentes apartados en los que
pudieran interesar.
o La información es consistente, quiere decirse que los documentos llevan
asociadas sus referencias a otros documentos, y si los primeros cambian
de lugar eso no influye en sus referencias, que seguirán siendo válidas.

En una página web hay dos tipos de zonas en función de si suponen un cambio o
no, es decir, hay zonas que al pinchar en ellas no ocurre nada y otras en las que
se produce una acción; esa acción puede ser de dos tipos:
 o un enlace. Puede llevar a otra parte de esa página web, a otra página del
mismo sitio web o a una de otro servidor distinto del de origen, o
también el destino puede ser un servidor gopher o un servidor ftp.
o una ejecución. Por ejecución se entiende el resto de casos, por ejemplo
abrir un archivo, descargarlo, ejecutar un programa, lanzar una
aplicación (la de correo electrónico es muy frecuente que se lance al
pulsar un ancla que es una dirección de correo electrónico).

La zona donde al pinchar ocurre alguno de estos casos puede ser tanto un texto
como una imagen. Se sabe que se trata de ese tipo de zona porque al pasar sobre
ella con el puntero del ratón éste se convierte en una mano. Además,
normalmente las partes de texto que se pueden pinchar van en un color diferente
al del resto (azul casi siempre) y subrayadas, de manera que a simple vista
también se pueden reconocer. En el caso de las imágenes no siempre está claro
si hay un enlace hasta que no se pasa sobre ellas.

EL NAVEGADOR VISUALIZADOR WEB

La web es el último tipo documental que ha aparecido; si a esto se une la gran

facilidad que tiene cualquier persona para poner en ella la información que
quiera y con la presentación que le parezca, nos encontramos con que la web se
ha convertido en un conjunto de documentos vinculados que no guardan entre
ellos ninguna consistencia ni en su contenido ni en su aspecto.

El rasgo común que comparten es que se trata de documentos elaborados en

lenguaje HTML y por tanto tienen la capacidad de ser hipertextuales por un
lado, y por otro que precisan para ser visualizados una aplicación conocida como
navegador; Netscape Navigator e Internet Explorer son dos de los más utilizados
hoy en día.

Los navegadores citados se presentan bajo Windows, y por tanto mantienen la

estructura conocida por todos los usuarios de este sistema operativo: la barra de
título donde figura la aplicación abierta (el nombre del navegador) y el
documento que está en uso en ese momento (el título de la página web que se
tiene en pantalla); la barra de menús con las opciones archivo, edición, ver y
otras propias del programa, y los botones de minimizar, maximizar o restaurar y
cerrar.

Las interfaces de los navegadores llevan incluidas algunas opciones que

permiten al usuario ir de una a otra página web, a parte por supuesto de la forma
más típica que es recurrir a los enlaces que encontrará en cada página:

o Botones de "ir hacia atrás" e "ir hacia delante", en la barra superior.

Con cada pulsación en el primero de ellos se vuelve a las páginas
visitadas por orden de la más reciente hacia atrás, y con el otro se recorre
el camino en sentido contrario.
 o Determinación de una página de inicio. Tanto al arrancar la aplicación
como al pulsar el icono de forma de casa, el navegador muestra la página
web que el usuario haya determinado como "home". Suele ser una lista
de direcciones que le interesan, o un buscador que se acostumbra a
utilizar.
o Marcadores. Son enlaces a páginas que el usuario ha ido encontrando a
lo largo de su navegación y que ha decidido almacenar para volver
rápidamente a ellas sin necesidad de volver a localizarlas o tener que
teclear la dirección. Los marcadores pueden organizarse en forma de
directorio con una estructura jerárquica y utilizar separadores para
diferenciar apartados; así mismo, el usuario puede incluir junto a cada
marcador un comentario relacionado con la página que referencia. El
fichero de marcadores puede ser grabado en un disquete, de manera que
el usuario lo podrá llevar a otro ordenador y seguir trabajando con él
acudiendo a las páginas marcadas o añadiendo nuevas direcciones.
o Ventana de localización actual. Indica la URL completa de la página en
la que se encuentra el navegador en ese momento. Esa dirección puede
ser el resultado de haber pinchado un enlace, o bien puede haber sido
tecleada por quien está navegando. Esta ventana contiene además un
menú desplegable donde se guardan las últimas URLs a las que se ha
conectado el navegador; con tan solo marcar una de ellas se llega al sitio
indicado.

En las propias páginas se incluyen algunas veces herramientas que permiten al

usuario conocer dónde está y por qué sitios ha pasado para llegar ahí, se trata de:

o Tablas de contenidos que resaltan los enlaces ya visitados; pueden ir en

un frame de manera que se tenga siempre presente, o bien en página
aparte a la que se pueda volver retrocediendo.
o Mapas de los sitios web, en los que se muestra la estructura de toda la
web con un esquema de las distintas páginas que lo componen. Esas
referencias a las páginas pueden constituir enlaces a ellas, de manera que
los enlaces del mapa a las ya visitadas cambiarían su color.

QUIÉN DEBE REALIZAR EL DISEÑO

Diseñar una página web cuya interfaz sea adecuada para la finalidad que se
persigue no es algo sencillo ni para lo que se pueda decir ¡hágalo usted mismo
en unos minutos!, sino que es una tarea para expertos.

Snyder (1996) dice que crear un sitio web requiere un equipo con cuatro
personas, cada una experta en una de las siguientes materias:
 o El cabeza del equipo será un diseñador, él tendrá la visión general del
web.
o Otro será un programador que conozca el HTML y los programas
necesarios para hacer el web.
o El tercero será un diseñador gráfico y un diseñador de interfaces de
usuario.
o El cuarto es el usuario, que probará la página web y opinará sobre ella.

Existen diferencias entre el diseño de una interfaz web y el de una interfaz de

usuario tradicional. Nielsen (1995) se refiere a los tipos de personas que están
dedicándose al diseño de interfaces web, y ponen de relieve la carencia de cada
grupo:

o Los que copian el HTML saben hacer páginas simples, pero no suelen
tener idea de diseño de interfaces; se trata de diseñar sitios completos, no
páginas sueltas y desconectadas que no tengan estructura de navegación
entre ellas.
o Los profesionales de interfaces de usuario (UI) sí saben diseño, y si
tienen idea de hipertextos pueden lograr estructuras de navegación
buenas. En las interfaces tradicionales lo más importante era crear
diseños que hicieran a los sistemas fáciles de aprender y eficientes de
usar; al diseñar páginas web eso también es importante (si el usuario no
lo entiende se irá a otro sitio), pero está cobrando relevancia el aspecto
en cuanto a la atracción que produce.
o Las agencias publicitarias diseñan webs, pero a menudo no aprovechan
las posibilidades de interacción que les ofrece el medio. Ellas están
potenciando lo que llaman un "nuevo medio", refiriéndose a la
publicación en línea.

UN USUARIO ACTIVO
Algunos creadores han optado por asemejar su interfaz a la que acostumbramos
a ver en la televisión: con publicidad. El motivo es la financiación de las páginas
web. Este modelo no es adecuado para imitar, ya que frente a la televisión el
telespectador es pasivo, no puede controlar lo que va a aparecer en ella, mientras
que frente a la pantalla y dentro de la web, el internauta decide hacia dónde
quiere ir, qué tipo de información quiere recibir. No se trata ni mucho menos de
una lucha televisión/internet, cada uno tiene sus puntos positivos(Brueckner
1996): la televisión ofrece mayor resolución para ver imágenes en movimiento,
tiene mayor calidad de sonido, entretiene de forma pasiva y tiene cortes de la
programación para la publicidad; el web es bueno para la comunicación entre las
personas, entretiene de forma activa y permite elegir a quien lo usa qué tipo de
información desea recibir.
La interfaz para estas aplicaciones web debe ser lo más interactiva posible,
aunque cada uno utiliza sus páginas con la finalidad que quiere, y muchos lo
hacen para dar propaganda de su empresa y sus productos sin ofrecer la
posibilidad de nada más.

UN DISEÑO PARA CADA FINALIDAD

Puesto que la finalidad de los distintos tipos de programas varía, su interfaz
también cambiará para adaptarse a las expectativas del usuario. Así, la interfaz
de un juego intenta sorprender, ser divertida, y no necesita por tanto usar
elementos normalizados ni guardar una forma fija en los diferentes programas de
ocio; en cambio ocurre todo lo contrario con los programas para uso en
empresas: la interfaz debe ser ante todo funcional, y por tanto una característica
principal es la consistencia en el diseño, el usuario debe sentir que controla el
sistema y no debe ser sorprendido, pues eso va en detrimento de la eficacia del
programa.

El web no se puede encuadrar de forma general dentro de unas características

como las descritas porque en él residen páginas dirigidas al entretenimiento y
páginas de utilidad para las empresas, por lo que el diseño deberá hacerse en
función de la finalidad de cada sitio web. Como características del diseño de
páginas web deben mencionarse el dinamismo y la presencia de enlaces. El
diseño de páginas web comparte un rasgo con el de los juegos, el estilo; la
información que aparece recogida en la red se presenta siempre de una forma
atractiva para intentar que quien la visita una vez vuelvan.

DATOS DINÁMICOS EN LAS INTERFACES

Una de las principales ventajas de la web como herramienta de consulta de
información es la capacidad de actualización permanente de sus datos.

La web se usa a menudo para ofrecer información no estable, es decir, que varía
con el tiempo (precios, clima, noticias...); las interfaces que presentan este tipo
de información variante deben ser diferentes a las que mantienen datos estáticos.
Es importante variar la web regularmente para que los usuarios tengan que
visitarla frecuentemente si quieren estar al día de la información que hay en ella.
Es más probable que un usuario regrese a una página con datos cambiantes que a
una estática, porque una vez leída pierde interés. Aquí se dan algunos consejos
para los creadores de páginas que varían en el tiempo:
 o No poner fecha a la información a menos que se actualice a menudo, ya
que los usuarios no querrán visitar de nuevo un sitio con datos no
actuales.
o Indicar cada cuánto tiempo se actualiza la web. Actualizar de forma
automática. Dejar que los usuarios decidan con qué frecuencia desean
obtener los nuevos datos.
o Si los usuarios pueden actualizar la información por sí mismos, dejarles
hacerlo.
o Ofrecer un apartado de "Novedades" que ponga de relieve la información
más actual.
o Determinar si conviene tener contadores de visitantes de la página: si son
pocas no interesa que lo vean.
o Usar fechas de expiración; si la información caduca en un día
determinado es preferible colocarla en un archivo al que puedan acceder
los usuarios, y así mantener directamente en la página lo actual y en
archivos la información retrospectiva.

DIRECTRICES PARA DISEÑO DE

INTERFACES WEB
? Planteamiento general
? Organización de la información
? Facilidad de navegación: iconos y mapas sensibles
como enlaces
? Agilidad en las tareas
? Comodidad en la lectura
? Consistencia
? Accesibilidad
? Evaluación del diseño

Las claves del éxito de un sitio web están en dos puntos: su contenido y el
diseño de su interfaz. El primer punto deberá ser cuidado de la misma forma que
se hace con documentos en papel, pero el segundo requiere unas reglas propias.

Como norma general se puede decir que lo que se busca con un buen diseño de
interfaz web es la comodidad de los usuarios. Como en cualquier servicio, lo que
interesa es tener el mayor número de usuarios posible, por lo tanto es
fundamental que les agrade nuestro sitio.

Un primer paso para proceder al diseño de un sitio web –una vez determinado el
contenido- es conocer que tareas van a querer los usuarios realizar a través de él.
Puede ser que quieran encontrar información, conocer un producto, pedirlo,
descargar una demo, obtener soporte técnico, contactar con alguna persona (el
encargado de ventas, algún empleado de la empresa, el webmaster...), descargar
drivers y actualizaciones...

Todas las tareas posibles de realizar en la web se presentarán de la mejor forma

posible para el usuario. Para ello se han recogido las pautas que dan algunos de
los autores de directrices para el diseño de interfaces web, como son Mandel
(1997), Nielsen (1996), Heller y Rivers (1996) y Langa (1996).

Planteamiento general del diseño

Miller (1996) comenta en su artículo que el diseño de páginas web es un paso

más en el diseño de interfaces de usuario, si bien sus diferencias hacen necesario
que se elaboren nuevas pautas más adecuadas a la nueva realidad. Los
problemas con los que se encuentra el diseño de páginas web son los mismos
que los que afrontaron los primeros diseños de interfaces gráficas de usuario
(GUIs). Estas son algunas de las pautas que ofrece para crear interfaces en web:

o No copiar los sistemas anteriores, sino volver a pensar, a diseñar, a

probar y a implementar de la forma más adecuada al nuevo medio.
Equilibrar el uso de gráficos según n diseño apropiado y tener en cuenta
las limitaciones del ancho de banda de los usuarios. El web no es tan
radical como para olvidar los conceptos del diseño tradicional, pero es
sin duda diferente.
o No esperar que se vaya a hacer una interfaz efectiva aunque se sea un
experto en HTML o un buen programador, porque la calidad en la
creación de páginas web implica tener un contenido útil, un dominio del
web, unos diseñadores con experiencia en interfaces y un diseño
coordinado de los gráficos.
o Si se está creando un web que la gente necesita usar a menudo, se
recomienda considerar las cuestiones funcionales como parte principal
del diseño, por ejemplo que los iconos sean claros.
o Probar muchas veces para detectar carencias, eso puede salvar el futuro
del sitio web y preguntar a los usuarios para conocer los resultados que
se van obteniendo del diseño.
o Ante todo, se debe perseguir que sean una herramienta de acceso a la
información que se desea, esté en el disco duro local o en cualquier lugar
del mundo en un servidor web.

Organización de la información en el sitio web

Hay que dar al sitio una buena organización para que así se localice antes lo que
se busca. Los usuarios desconfían de los sitios desordenados, les parece que
cuanto mejor organizada está una página más confianza ofrece su lectura y se
plantean ¿si está tan mal la organización cómo será de bueno el contenido?. Por
tanto, conviene:
 o Dotar al sitio de una organización clara e intuitiva. Para eso existen las
tablas de contenidos, los índices, las secciones de novedades. Estas
herramientas mencionadas hacen posible tener una idea general de lo que
esa web ofrece y evitan tener que leer todo para encontrar lo que interesa
en cada momento. Para resultar de utilidad los títulos de sus apartados
deben ser un resumen del contenido total.
o Ofrecer un esquema de navegación visual comprensible y obvio. Para
eso se usarán los botones, el texto y los mapas pulsables.
o Simplificar el contenido: no mezclar varios temas en una página.
o Facilitar el acceso a la información importante colocándola en la parte
más alta de la jerarquía del sitio. El usuario centra su lectura en lo
primero que ve, que es siempre la parte superior de las páginas, hasta
donde muestra la pantalla. No utilizan continuamente la barra de scroll.
Sólo los más interesados en el tema utilizarán la barra de desplazamiento
para continuar la lectura más abajo. Por eso es importante recoger un
extracto de lo que contiene el sitio en esa parte que es la más leída,
porque si no se corre el riesgo de que la mayoría no pase a visitar partes
interesantes del sitio web.
o Limitar el número de opciones en cada nivel.
o Agrupar las opciones importantes en la misma página.
o Organizar la información y las páginas anticipándose a las tareas más
frecuentes para que el usuario llegue antes a ellas.
o Recurrir al hipertexto para remitir a información más detallada sobre un
tema, de manera que sólo lleguen a ella los usuarios realmente
interesados y no otros que tan solo perderían allí el tiempo. El hipertexto
no debe ser usado para partir un texto largo en varias partes sin más, sino
que debe usarse para ampliar conceptos; si se utiliza con ese fin de partir
textos de lectura secuencial se está haciendo al usuario descargar una
página detrás de otra, con el tiempo que se tarda en hacerlo, e
imprimirlas también de una en una, lo que supondría una traba en lugar
de estar facilitando la lectura de las páginas.

Facilidad en la navegación

o Ofrecer una visión general del sitio completo.

o Posibilitar la búsqueda de temas y palabras clave dentro del sitio.
o No dejar ninguna página huérfana (sin enlaces a otras páginas), para
permitir saltar desde ella a otras, por lo menos a la homepage del sitio.

Sobre la selección de opciones hay que decir quelos objetos típicos de los GUIs
como botones, listas, menús desplegables, cajas de texto están disponibles para
usar en interfaces web, pero debe elegirse bien cuando recurrir a cada uno, ya
que un uso inapropiado puede bajar la productividad de la web, aumentar los
errores y proporcionar resultados no deseados por el usuario. Para utilizarlos
debidamente es imprescindible conocer la intención de los usuarios. Las pruebas
de la web nos revelarán si se han elegido bien o no los objetos que en ella se
incluyen.
En las interfaces como Windows estamos acostumbrados a que al pulsar una
opción de un menú se produzca una acción (abrir un documento, abrir un menú,
copiar...), en cambio no ocurre lo mismo cuando seleccionamos una opción de
un menú en una página web, pues para que ocurra la acción es necesario pulsar
el icono de aceptación y envío ("summit" o "enviar") y después esperar la
respuesta. Pensemos en los motores de búsqueda: primero se teclean los
términos de consulta, se crea la cadena de interrogación con sus operadores
correspondientes, a veces se elige de un menú el idioma en el que se quieren los
resultados y el tipo de documentos que se desea recibir, y una vez que está
preparado se envía la consulta y se espera el listado de direcciones de interés.

En toda esta secuencia se pueden haber producidos diferentes errores: al teclear,

por dejarse un menú sin elegir lo que interesa, por elegir equivocadamente...

El uso de menús desplegables está aconsejado para usar en páginas web cuando
se debe seleccionar una opción de entre muchas (unas 10), pero no si se trata de
unas pocas posibilidades, en cuyo caso se recomienda el uso de botones tipo
radio, donde sólo uno es elegible (radio buttons).

En este punto sobre la navegación es muy importante que se den algunas

directrices acerca de los enlaces:

o Siempre debe quedar claro qué partes de la página son enlaces y cuáles
no, sobre todo cuando se trata de imágenes. Para aclarar esto es
conveniente que las partes pulsables queden bien identificadas como
tales, por ejemplo dándoles forma de botón y usando colores
normalizados para indicar cuando un texto es un enlace (azul para
enlaces no visitados y rojo o púrpura para los visitados).
o En los puntos dónde hay un enlace, se debe hacer saber qué información
aguarda tras él estableciendo una relación entre la palabra o imagen que
sirve de nodo y el contenido del documento que se referencia.
o Se debe poner una etiqueta textual a todos los gráficos que supongan un
enlace.

ICONOS

Miller (1996) propone que al diseñar o al tomar un icono de la red uno se

plantee lo siguiente:

o Debe ser simple.

o No importa tanto que tengan mejor presencia e iconos más divertidos,
sino que se espera que sean claros en su mensaje. Su significado debe
estar claro para la gente que lo va a ver.
o Su tamaño no debe ser tan elevado que retrase considerablemente la
descarga de la página en los navegadores.
o Será lo suficientemente grande como para distinguir el dibujo.
o No conviene recurrir constantemente a iconos animados, sobre todo en
páginas pensadas para la lectura atenta, ya que su movimiento hace que
la vista se dirija a ellos y por tanto distrae de la lectura.
 o Debe representar alguna acción: ir hacia atrás, ir a otra página, etc.
o La metáfora usada para lo que implica será apropiada y consistente con
el resto.

Si se ha decidido diseñar un icono propio en lugar de tomar uno que ya había

sido diseñado por otra persona, entonces Miller (1996) aconseja quitar la
etiqueta con las palabras que explican el significado del icono y preguntar a
posibles usuarios que qué entienden con ese dibujo. Las respuestas deben ir
encaminadas a su significado, si no, el icono no es válido porque no representa
lo que se quiere.

Las etiquetas que acompañan a los iconos no deben estar incluidas en el propio
gráfico, sino que deben ser texto en HTML. Los motivos que se dan son varios:
el gráfico tiene menos tamaño y por tanto no se ralentiza la carga de la página,
se puede cambiar el idioma del mensaje y se ajusta mejor a la resolución de los
monitores.

Otro aspecto importante en el diseño de los botones es el del borde. Es

aconsejable que los botones tengan esa apariencia tridimensional para que a
primera vista se sepa que se trata de lugares pulsables y no de meros adornos.
Para crear ese efecto simplemente se crea un borde en el botón que dé esa
impresión de relieve.

MAPAS SENSIBLES

Una alternativa a los menús de selección son los mapas pulsables. Tienen algún
inconveniente: al tratarse de imágenes tardan más en cargarse que el texto, y
además, si están mal diseñados, pueden hacer perder mucho tiempo al usuario,
ya que no elegirá el camino adecuado como primera opción (por ejemplo si las
distintas opciones se encuentran demasiado cerca es fácil pulsar sobre la que no
es).

De los mapas de regiones que existían en las interfaces tradicionales, en los que
había que indicar los códigos de latitud y longitud, a los mapas pulsables de hoy
en día o a los simuladores de realidad virtual hechos en VRML hay una
diferencia enorme. Eso es un buen ejemplo de aplicación del diseño de
interfaces a la web, ya que se explotan sus nuevas posibilidades que no existían
en los GUIs.

Agilidad en las tareas

o Reducir el tiempo de búsqueda dentro del sitio. Se consigue con una

buena organización de la información y disponiendo de un buen motor
de búsqueda interna dentro del sitio.
o Reducir el tiempo de descarga de páginas e imágenes. Se aconseja no
introducir ficheros grandes, especialmente imágenes. Está comprobado
que en una interfaz tradicional el tiempo máximo de descarga que el
usuario soportaba sin impacientarse era de diez segundos, con la
 aparición del web ha aumentado hasta quince segundos; pasado ese
tiempo es muy probable que el usuario decida interrumpir la carga de la
página y dirigirse a otra quizá más rápida. El problema que se está dando
es que crece con mayor rapidez el número de usuarios de Internet que la
infraestructura para proporcionar buenos accesos; por tanto, el diseñador
de páginas web deberá evitar retardar la carga de sus páginas para no
perder a los posibles usuarios.
o Reducir lo máximo el scroll en cada página para localizar lo que se busca
a primera vista.
o Usar controles de navegación conocidos: retroceder, ir a...

Comodidad en la lectura

o La pantalla no ofrece gran comodidad para la lectura en comparación con

el papel. Se sabe que la velocidad de lectura se reduce en un 25%. Por
tanto, para hacer esa lectura algo más llevadera habrá que disminuir la
cantidad de información ofrecida, se aconseja que se escriba un 50% de
lo que se escribiría en papel. El primer paso para abreviar es eliminar los
mensajes de bienvenida; el segundo presentar el texto de forma amena.
o Evitar el denominado efecto "Las Vegas" según Mandel (1997): algunos
creadores de páginas usan todos los colores que hay a su disposición, sin
importar si realmente se necesitan para cumplir con la finalidad de la
página web.
o No abusar de los fondos con imágenes, que a menudo hacen que la
lectura del texto sea incómoda.
o Utilizar paletas de color y tipos de fuentes normalizados, de manera que
el ordenador desde donde se visualice la página los presente en la misma
forma que se diseñaron, sin importar el navegador y la plataforma que se
usen.
o Utilizar fuentes lo suficientemente grandes y tipos que contrasten con el
fondo.
o Diseñar la interfaz de manera que pueda ser visualizada No codificar los
elementos que puedan ser modificados por los usuarios o los
navegadores, como la fuente o el color.
o Ofrecer la posibilidad de obtener versiones para imprimir en papel.

Consistencia del sitio web

o Determinar una identidad corporativa por medio de gráficos, imágenes,

colores, fuentes y layout; y mantenerla a lo largo de todo el sitio web.
o Usar siempre el mismo tipo de encabezamientos para apartados del
mismo nivel jerárquico.
o Mantener una terminología para referirse a los mismos asuntos.

Accesibilidad del sitio web y de sus páginas

 o Dotarle de una URL fácil de teclear para reducir la posibilidad de
equivocación (no usar mayúsculas y minúsculas, evitar que incluya
símbolos o signos que el usuario no sepa como conseguir con su
teclado). Además la URL debe se fácil de recordar e intuitiva, con cierta
relación acerca de lo que contiene; por ejemplo en una web de una
empresa que se dedica a la venta de hardware, la URL de la página que
trata sobre los cd-rom podría ser:
http://www.empresa.es/productos/cdrom.htm
o Es importante dar a cada página un título, de hecho es una etiqueta de
uso obligatorio en HTML. Ese título aparecerá en la parte superior del
navegador junto al nombre de éste. Además, será el identificador de las
páginas que se guarden en el bookmark, en la lista de "historia de
navegación", en los listados de resultados proporcionados por los
motores de búsqueda... Por tanto, conviene que sea un título
identificativo del contenido de cada página, ya que el usuario podrá verlo
fuera de contexto. Por ejemplo, una página que se titule "Bienvenida" no
dice nada si tan solo se conoce de ella el título, en cambio, si se titula
"Bienvenido a la Universidad Nacional de Misiones" el usuario ya puede
saber si le interesa o no visitarla. Se recomienda que el título contenga
entre cuatro y diez palabras, y que no comience por un artículo con el fin
de que se alfabetice por la primera palabra con significado en las listas
ordenadas.
o Introducir información acerca de las páginas en los motores de búsqueda
para poder recuperarlas desde ellos.

Evaluación o test de uso

Un buen ejemplo de cómo se pueden aplicar los test de uso al diseño de webs es
el que presentan Jacob Nielsen y Darrell Sano (1995), quienes los llevaron a
cabo en el diseño del nuevo sitio web de Sun Microsystems.

http://www.sun.com/technology-research/sun.design/sunweb.html

Sirva como ejemplo de buenos diseños web la recopilación que se hace en:
http://www.highfive.com, y como ejemplo de malos diseños la que hay en:
http://www.suck.com.

TENDENCIAS EN LAS INTERFACES DE PC Y

WEB

El diseño de interfaces para web no dispone todavía de unas pautas normalizadas

para seguir, por eso nos encontramos ante páginas que parecen puramente un
póster o un anuncio, y páginas con ventanas para rellenar con datos que
recuerdan a las aplicaciones de hace una década.

La tendencia que se está dando en el diseño de aplicaciones informáticas es de

acercamiento entre las interfaces para programas tradicionales de PC y las
interfaces habituales de la web, ya que ambas están tomando elementos una de la
otra. Nos estamos encontrando que los nuevos sistemas operativos integran
funciones típicas de las interfaces de los navegadores web para realizar tareas
propias de un S.O. como la administración de ficheros; por otro lado, los
navegadores cada vez van incluyendo más elementos hasta ahora propios de los
programas para PCs.

Tendencias más novedosas son las que se están dando ya en sistemas de tres
dimensiones: la realidad virtual permite al usuario integrarse mucho más en el
sistema informático y sentir sensaciones lo más parecido posible a la realidad.
Las interfaces de realidad virtual están yendo más allá del ocio y de la
simulación de aparatos, llegando a ser implementadas en sistemas de
recuperación de información, como se está haciendo en el proyecto IRVAIE
(proyecto de investigación de las universidades de Granada, Alcalá de Henares,
Extremadura y Carlos III).

BIBLIOGRAFÍA BÁSICA

Agosti, M. (1991). "Usage of current hypertext systems as powerfull information

retrieval tools". En: Negrini, G.; Farnesi, T.; Benediktsson, D. (eds.).
Documentary languages and databases: papers from the Rome Conference
(1990) organized by the Istituto di Studi sulla Ricerca e Documentazione
Scientifica, CNR. Francfurt: Indeks, pp. 213-219.

Apple Computer. (1992). Macintosh Human Interface Guidelines. New York:

Addison-Wesley.

Aronson, L. (1994). The HTML Manual of style. Emeriville, California: Ziff-

Davis Press.

Bolter, J.D. (1991). Writting space: the computer, hypertextm and the history of
writting. Hillsdale, Nueva Jersey: Erlbaum.

Brueckner, R. (1996). "Taking on TV: TV is a bad role model for the web".
Internet World (jul.), pp. 59-60.

Bush, Vannenar. (1945)."As we may think". Atlantic Mounthly, 176 (july), pp.
101-108.
Canals Cabiró, I. (1990). "El concepto de hipertexto y el futuro de la
documentación". En: Terceras Jornadas de Documentación Automatizada,
"Documat 90". Palma de Mallorca: Universitat de les Illes Balears, pp. 49-76.

Caridad, M.; Moscoso, P. (1991). Los sistemas de hipertexto e hipermedios: una

nueva aplicación en informática documental. Madrid: Fundación Germán
Sánchez Ruipérez; Pirámide.

Chandler, D.M. (1994?). Running a perfect web site. Indianapolis, Indiana: Que
Corporation.

Conklin, J. (1987). "Hypertext: an introduction and survey". IEEE Computer,

2:9 (sep.), pp. 17-41.

December, J.; Randall, N. (1994). The World Wide Web unleashed.

Indianapolis, Indiana: Que.

Dern, D. (1996). "Just one more click..." Computer World, 8(jul.), pp. 93-96.

Eager, W. (1994). Using the World Wide Web. Indianapolis, Indiana: Que.

Ellsworth, J.H.; Ellsworth, M.V. (1995). Marketing on the Internet: multimedia

strategies for the World Wide Web. New York: Wiley.

Erskine, L. E., Carter-Tod, D. and Burton, J. K. (1997). "Dialogical techniques

for the design of web sites". Int. J. Human-Computer Studies, 47:1, pp. 169-196.

Fernandes, T. (1995). Golbal interface design. Chestnut Hill, Massachussets:

Academic Press.

Galdo, E. Del; Nielsen, J. (1996). International user interfaces. New York:

Wiley.

García Marco, Javier; Tramullas Saz, Jesús. (1996). World Wide Web:
Fundamentos, navegación y lenguajes de la red mundial de información.
Madrid: Ra-Ma.

Gygi, K. (1990). "Recognizing the symptoms of hypertext.and what to do about

it". En: Laural, B. (ed.), The art of hu-man-computer interface design.
Massachussetts: Addison-Wesley.

Heller, H.; Rivers, D. (1996). "So you wanna design for the web". ACM
Interactions, (mar.), pp. 19-23.

Holmes, N.; DeNeve, R. (1990). Designing pictorial symbols. New York:

Watson-Guptill.

Horton, W. (1994). The Icon Book: Visual Symbols for Computer Systems and
Documentation. New York: Wiley.
Horton, W. (1994). Designing and writing online documentation. 2nd ed. New
York: Wiley.

Horton, W. (et al.). (1996). The web page design cookbook: all the ingredientes
you need to create 5-star web pages. New York: Wiley.

Landow, G. P. (1989). "The rhetoric of hypermedia: Somerules for authors".

Jour. of Computing in Higher Education, 1(1), pp. 39-64.

Langa, F. (1996). "Seven deadly web sins". Windows Magazine, (jun.), pp. 11-
14.

Laurel, B. (ed.) (1990). The Art of Human-Computer Interface Design . New

York: Addison-Wesley.

Lindquist, C.; Will-Harris, D. (1996). "Ultimate web publishing guide". PC

Computeing, (aug.), pp. 112-122.

Lynch, P.J. Manual of style. http://info.med.yale.edu/caim/manual/contents.html

Mandel, T.(1997). The elements of user interface design. New York: Wiley.

Marcus, A. (1992). Graphic design for electronic documents and user interfaces.
New York: ACM Press, Addison-Wesley.

Microsoft Corporation. (1995). The windows interface guidelines for software

design. Redmond, Washington: Microsoft Press.

Miller, R. (1996). "Web interface design: learning from our past".

http://athos.rutgers.edu/~shklar/www4/rmiller/rhmpapr.html

Moscoso, P. (1999). "Sistemas de hipermedios: desarrollo y configuración".

Revista Española de Documentación Científica, 13:3-4 (jul.-dic.), pp. 823-841.

Mullet, K., and Sano, D. (1995). Designing Visual Interfaces - Communication

Oriented Techniques. Englewood Cliffs, NJ: Prentice Hall.

Nielsen, J. (1995). "Who should you hire to design your web site?". The Alert
Box (oct.), http://www.useit.com/alertbox/9510.html

Nielsen, J. (1996). "Marginalia of web design". The Alert Box (nov.),

http://www.useit.com/alertbox/9611.html

Nielsen, J. (1996). "Top ten mistakes in web design". The Alert Box (may),
http://www.useit.com/alertbox/9605.html

Nielsen, J. (1997). "Be succinct! (Writing form the web)". The Alert Box (mar.),
http://www.useit.com/alertbox/9703b.html
Nielsen, J. The Alertbox, http://www.useit.com/alertbox. Publicación periódica
electrónica.

Nielsen, J., Galdo, E.M., Sprung, R.C., and Sukaviriya, P.N. (1990). "Designing
for International Use". Proceedings of ACM CHI '90 Conference on Human
Factors in Computing Systems, pp. 291-294.

Norman, D.A. (1990). "Why interfaces don't work". En: Laurel, B. (ed.). The art
of human-computer interface design. Reading, MA: Addison-Wesley.

Norman, D.A. (1993). Things that make us smart: Defending human attributes in
the age of the machine. Reading, MA: Addison-Wesley.

Patton, P. (1993). "Making metaphors: User interface design". ID 40 (2), pp. 62-
66.

Rada, R. (1991). Hypertext. From text to hypertext. London: McGraw-Hill.

Rodríguez de las Heras, A. (1991?). Navegar por la información. Madrid:

Fundesco.

Shneiderman, B. (1997). "Designing information-abundant web sites: issues and

recommendations". Int. J. Human-Computer Studies, 47:1, pp. 5-30.

Shneiderman, B.(1998). Designing the user interface: Strategies for effective

Human-Computer Interaction. 3th ed. Massachusetts: Addison-Wesley.

Sun Microsystem. Guide to Web Style, http://www.sun.com/styleguide

Tufte, E.R. (1983). The Visual Display of Quantitative Information. Cheshire,

Conn: Graphics Press.

Tufte, E.R. (1989). Visual design of the user interface. Armonk, NY: IBM
Corporation.

Tufte, E.R. (1990). Envisioning information. Cheshire, CT: Graphics Press.

Yale Center for Advanced Instructional Media. Web Style Manual.

http://www.cis.yale.edu/webguide

Web Wonk: Tips for Writers and Designers, http://www.dsiegel.com/tips

Virzi, R. A. (1990). "Streamlining the Design Process: Running Fewer

Subjects". En: Proceedings of the Human Factors Society 34th Annual Meeting.
Santa Monica, CA: Human Factors Society, pp. 291-294.

ÚLTIMA ACTUALIZACIÓN: 17-04-99

Mari-Carmen Marcos
Doctorado en Documentación. Universidad Carlos III de Madrid
mcmarcos@posta.unizar.es