Simplificar

Cuando se trata de diseñar una página web, debemos tener en cuenta exclusivamente al usuario de la misma. Una página web debería tener solo aquello que es necesario. Para conseguir que un diseño se vea de determinada forma, muchas veces se recurre en forma abusiva a las imágenes, animaciones, sonidos, etc., sin tener en cuenta que esto hace que el peso de la página aumente sensiblemente y puede generar demoras en la carga de la página.

También puede verse en muchas ocasiones, que los diseñadores terminan generando códigos extremadamente confusos y largos, para diseños que pueden conseguirse en forma mucho más sencilla. Un elemento clave para la generación de un código ordenado es la planificación del diseño. Todo diseño debe ser elaborado de afuera hacia adentro, es decir, de los elementos contenedores principales hacia los menores.

Esto quiere decir que cuando se inicia una página web, los primeros elementos que deben ser determinados mediante el uso de CSS son los contenedores, como “body” y la capa principal. A partir de allí, se debe generar las capas de cada sección de la estructura de la página (cabecera, columnas, pie) para luego comenzar con los detalles necesarios dentro de cada una de ellas.

Tratar de no utilizar “hacks”

Los hacks son trucos mediante los cuales se pueden sortear algunos de los problemas generados por las diferencias existentes en la interpretación del código por parte de los navegadores. En la mayoría de los casos no son necesarios. Una de las soluciones más  conocidas es la utilización de archivos CSS destinados a ser interpretados exclusivamente por determinados navegadores o versiones de navegadores.

Prestar atención a la utilización de márgenes y rellenos

Los márgenes (margin) y los rellenos (padding) son las propiedades que generan más inconvenientes a los diseñadores más nuevos, debido en parte a las diferencias notorias que existen en la interpretación de las mismas por parte de los navegadores. Es por ello que siempre es absolutamente necesario que se tengan en cuenta, ya que en muchas ocasiones son el origen de diferentes descuadres y errores en el posicionamiento de diferentes elementos.

Evitar el abuso de los posicionamientos absolutos

Una tendencia natural en los diseñadores recién iniciados, es al abuso de los elementos posicionados en forma absoluta (position: absolute), debido a que con ello se elimina toda posibilidad de que se produzcan “comportamientos extraños” de los elementos. La maquetación de páginas web requiere una comprensión completa del comportamiento de los diferentes elementos y de cómo actúa cada una de las propiedades sobre ellos.

Las páginas generadas en forma exclusiva o casi exclusiva con posicionamiento absoluto, tienen entre otros inconvenientes, la rigidez e inflexibilidad. Esto dificulta notoriamente la introducción de elementos dinámicos, y es prácticamente imposible pensar en una página con contenidos dinámicos cuyo diseño visual esté elaborado de esta forma, ya que la extensión de los contenidos será variable y originará diferentes errores, como desbordamientos de capas y superposición de contenidos.

Evitar el abuso de los ‘div’

Otro de los errores frecuentes entre principiantes es el pretender resolver todo mediante la utilización de capas. No siempre es necesaria la utilización de capas para generar elementos, ya que en muchos casos existen los elementos semánticamente correctos dentro de HTML. Muchos div’s pueden ser reemplazados por la utilización correcta de listas, párrafos, títulos, etc.

En parte este tipo de abusos se debe a que se desconoce las posibilidades que muchos de estos elementos, y que es posible que adquieran diferentes formatos visuales y pueden adaptarse prácticamente a cualquier diseño.

Evitar el abuso de clases e identificadores

Este tipo de errores es frecuente inclusive en algunos diseñadores con experiencia, y en general es debido a la carencia en el uso de una de las propiedades fundamentales del CSS, que es la herencia.

Para entender mejor de lo que estamos hablando, veremos los siguientes ejemplos. En el primer ejemplo, veremos la forma incorrecta de hacerlo, mientras que el segundo se trata de la forma correcta.

Primer ejemplo:

<ul>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
  <li class="lista">Elemento de lista</li>
</ul>

li.lista  {
  list-style: square;
  font: bold 13px arial, helvetica, sans-serif;
  }

Segundo ejemplo:

<ul id="lista">
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
</ul>

ul.lista li {
  list-style: square;
  font: bold 13px arial, helvetica, sans-serif;
  }

Generar código válido y utilizar el validador

Dado que este tema se encuentra tratado en forma extensa en otro artículo, simplemente agregaremos un enlace al mismo para que vean cual es la importancia de generar códigos válidos.

Importancia de validar los códigos

Además, la utilización del validador hace que se detecten algunos errores durante el proceso de trabajo, por lo que en muchas ocasiones puede resultar útil también en la etapa del desarrollo y no exclusivamente al finalizar el trabajo.

Racionalización del código

Algunos de los consejos que ya hemos dado, hace que se generen códigos más racionales, y por tanto, más sencillos de entender. La utilización correcta de los diferentes elementos HTML, la eliminación de elementos innecesarios y la simplificación, hace que los códigos generados sean más limpios, sencillos y racionales, lo que tiene como consecuencia una mayor sencillez a la hora de realizar correcciones y modificaciones, además de ser por lo general, más cortos y por tanto, generan archivos más pequeños y de carga más rápida.

Diseño flexible

En los últimos años se ha producido un incremento notable en el tamaño de los monitores de los usuarios, además de aparecer monitores con diferentes proporciones. También se ha producido un incremento importante en el acceso a internet con otros tipos de dispositivos diferentes a los clásicos ordenadores.

Todo esto hace necesario que los diseños sean cada vez más flexibles, y que puedan visualizarse en forma correcta independientemente del dispositivo que se utilice para acceder a las páginas web o las dimensiones del monitor.

Comprobaciones en diferentes navegadores

Las conocidas diferencias existentes entre navegadores hace necesario que se utilice alguna forma de comprobar la visualización de las páginas que se están diseñando en ellos. En muchos casos puede decirse que con hacer la comprobación en alguno de ellos es suficiente para saber que en todos se va a ver bien, como puede ser el caso de los navegadores (generalmente solo en las últimas versiones) Mozilla-Firefox, Google Chrome, Opera y Safari.

No es el caso de Internet Explorer, que es el origen de la mayor parte de este tipo de dificultades, por lo que siempre es conveniente hacer comprobaciones en él luego de diseñada la página y en todas las versiones, ya que existen diferencias notables entre ellas en la forma en que interpretan el códigos CSS.

Si no es posible tener todos los navegadores instalados, o al menos algunos de ellos, es posible recurrir a algunas herramientas online o utilizar algunas herramientas que poseen los navegadores para emular a otros. También existen algunas herramientas instalables que permiten visualizar las páginas web como si se tratara de diferentes navegadores.

¿Porqué quiere una página Web? ¿Qué es exactamente lo que pretende conseguir con ella? ¿Cómo va a conseguirlo? ¿Es asumible el coste? Si no conoce la respuesta a las preguntas, su página web no tiene futuro.

Si su empresa fuese a abrir una sucursal en otra ciudad. ¿Empezaría por llamar al diseñador de interiores? ¿Al arquitecto? ¿Al informático? Más bien empezaría por hacer un estudio de mercado, para ver si su sucursal tendría éxito en esa ciudad. Haría un estudio de los costes, de las necesidades.. etc, en fin haría un estudio de viabilidad, un plan de negocios. Pues en Internet es exactamente igual!.

Todos los sitios Web difunden información de una u otra clase. Ofreciendo información útil y una buena comunicación con sus visitantes se mejorará su imagen y creará una relación de confianza.

Las cuatro características principales del diseño Web son:

1. Los contenidos (sobre todo el contenido original) son el corazón de una página, informan y convencen a los usuarios.
2. La tecnología posibilita la existencia de la página y la dotan de funcionalidad.
3. Los aspectos visuales proporcionan imagen al sitio destacando el contenido.
4. Los aspectos económicos determinan la viabilidad del sitio.

Una visión global de un sitio web tiene tres parámetros generales: objetivos, usuarios y viabilidad económica que determinan el contenido, el diseño y la tecnología.

Para desarrollar un Sitio eficaz, es necesario un proceso eficiente. No es complejo, incluso un diseñador “Free lancer” puede (debe) hacerlo. Aunque no hay dos procesos iguales, lo normal es que, a grandes rasgos, nos encontremos con las siguientes fases:

1.- Requisitos y planificación: Es la fase de la que se ocupa esta sección. En esta fase establecemos:

• Los objetivos.
• La audiencia.
• Las estrategias.
• Los requisitos o especificaciones.
• Estructura y organización.
• Inventario de contenidos.
• Presupuesto.

Tras seguir todos estos pasos contaremos con un documento (muy largo) que reunirá todos los elementos y requisitos necesarios para nuestro WebSite, incluida la guía de estilo.

2.- Diseño: La etapa de diseño es normalmente la más divertida. Se diseñan los prototipos técnico y visual. Un buen diseño se integra con el contenido. La recogida de contenidos es uno de los aspectos más lentos del diseño Web. Al final de esta etapa dispondremos de un prototipo listo para su revisión y prueba.

3.- Desarrollo: A estas alturas ya deberíamos tener muy claro lo que nuestro cliente (o nuestro jefe) quiere, incluidas la apariencia y funcionalidad del Sitio Web. Es el momento de empezar a crear las piezas del puzzle y ensamblar el conjunto. Al final de esta etapa dispondremos de una versión beta del Sitio que volveremos a revisar y probar.

4.- Producción: Comprueba una vez más el sitio web, validándolo y comprobando la accesibilidad. Es el momento de “entregar” la página web, junto con la guía de estilo y la documentación.

5.- Promoción: No tiene sentido crear un sitio Web si nadie sabe que existe. Utiliza diversas técnicas de promoción web, otro tanto con el posicionamiento en los buscadores.

6.- Mantenimiento y evaluación: Un error común en las páginas web es olvidarse del mantenimiento y la puesta al día de los contenidos, estudiando los intereses de sus visitantes. Sin esta labor, su Web pronto quedará obsoleta y perderá su valor.

La importancia de tener unos objetivos claros

Muchos sitios web fallan por tener unos objetivos poco claros. Sin embargo, son de vital importancia y deben estar articulados desde el principio. ¿Montaría usted una tienda sin tener una idea de lo que quiere vender? ¿Se plantearía un negocio del que no conoce el objeto? Pues en una web hay que planteárselo también.

Los objetivos de la página son la base de todo diseño Web y la medida de su éxito. Junto con la audiencia, determinan:

• El diseño
• El contenido
• La tecnología a utilizar
• La viabilidad

Deben ser objetivos claros, concisos y cuantificables. Si no tenemos claro qué queremos conseguir ¿Cómo vamos a saber si lo hemos logrado o no? Son la herramienta indispensable para determinar el éxito de un sitio web. Ejemplo de Objetivos básicos que habría que desarrollar después:

1. Conseguir un 20% de las ventas de la compañía.
2. Disminuir en un 25% la atención telefónica prestada en estas materias.
3. Disminuir en un 25% el coste de material de papelería y envíos postales.
4. Disminuir en un 15% la atención telefónica y/o presencial prestada por el departamento de comunicación.
5. Disminuir en un 20% los costes de selección de personal.

Parte del problema con la Web hoy día es encontrar lo que buscamos. Una estructura y organización web claras, ayudarán a los usuarios. Al organizar un sitio Web, es necesario tener en cuenta a los usuarios que normalmente no estarán familiarizados ni con el sitio ni con su estructura lógica. El modo en que se organiza y relaciona la información puede ser crítica, y dependerá del tipo de sitio de que se trate y de sus objetivos.

Ahora vamos a ocuparnos de la estructura física, de la organización interna de los distintos archivos y documentos.

Es demasiado frecuente encontrarse con websites sin ningún tipo de organización, en los que todos los archivos están en el mismo directorio sin orden ni concierto. Esta estrategia lleva invariablemente al CAOS, especialmente a la hora de mantener el WebSite. Si usted guardara toda la información que maneja en su puesto de trabajo limitándose a meterla en un cajón… ¿Cómo encontraría las cosas?

Es aconsejable crear una estructura de directorios para dividir la información de acuerdo con las secciones y subsecciones del site. Si su web es muy grande, es posible que se haga necesario subdividir aún más los directorios de imágenes, creando un directorio para cada sección de la página web.

También es habitual encontrarse con documentos nombrados de forma incomprensible:

pag_001.html
pag_002.html
pag_003.html
pag003b.html
uno.jpg
dos.jpg
tres.gif
005.jpg

De esta forma resulta bastante difícil averiguar de que trata cada página o archivo gráfico.

Recomiendo nombres cortos, claros y fáciles de identificar. Ahorrará muchas horas de trabajo inútil a los encargados del mantenimiento de la página web.

index.html*
prensa.html
productos.html
noticias.html
consejero.jpg

* index.html (o default.htm, dependiendo del sistema) es la página de inicio de cualquier Sitio Web o sección.

Algunos diseñadores prefieren nombrar sus imágenes utilizando convenciones que definan a que sección pertenecen las imágenes, otros, utilizamos subdirectorios.

pr_consejero.jpg
pr_feriajunio.jpg
corp_sede.gif
corp_oficina.gif

Los sitios se pueden clasificar de muchas maneras. Cada tipo de sitio tiene unas características y limitaciones propias. Una buena organización es vital para conseguir los objetivos del Sitio.

Vamos a ver diferentes formas de clasificar los sitios:

Por su audiencia

• Públicos: Es un WebSite normal, una página dirigida al público general, sin restricciones de acceso en principio.

• Extranet: Son Sitios limitados por el tipo de usuarios que pueden acceder, por ejemplo los proveedores de una empresa determinada, o los clientes.

• Intranet: Son sitios cuyo acceso está restringido a una empresa u organización, normalmente funcionan dentro de redes privadas, aunque no siempre es así.

Por su dinamismo

Aquí encontramos sitios interactivos y sitios estáticos:

• Sitios Interactivos: El usuario puede influir sobre el contenido del sitio que variará en función de cada usuario y de los objetivos de éste. Normalmente, las páginas se generan cuando el usuario las solicita, personalizando la información que se le ofrece.

• Sitios estáticos: Los usuarios no pueden modificar o añadir nada al sitio, de cuyos contenidos se encargan exclusivamente sus diseñadores.

• Por su estructura Hemos dedicado una sección para estudiar la estructura física de los sitios Web, tenemos: Lineal, Jerarquía, parrilla, Web pura y mixta.

Por su apertura

Estructuras abiertas, cerradas y semicerradas:

• Estructura abierta: Todos los documentos disponen de su dirección y los usuarios pueden acceder a cualquier punto del WebSite.

• Estructura cerrada: Limita el acceso a unos pocos puntos de entrada (incluso a uno sólo). Un ejemplo sería un sitio que requiere un registro previo para entrar, el usuario siempre tendría que pasar primero por el registro antes de poder acceder al resto de la página.

• Estructura semicerrada: A medio camino entre ambas, obliga a los usuarios a acceder por unos puntos específicos, cómo por ejemplo sólo la página principal y las páginas de entrada a las secciones más importantes.

Por su profundidad

Basada en el número de enlaces que hay que pulsar para llegar al contenido. En general los usuarios prefieren sitios poco profundos. Una buena regla a seguir es que el usuario no tenga que pulsar más de 3 enlaces para encontrar lo que busca. 

Por sus objetivos

• Comerciales: Están creados para promocionar los negocios de una empresa. Su finalidad es económica. Su audiencia puede estar formada por clientes (actuales y potenciales), inversores (actuales y potenciales), empleados (actuales y potenciales) e incluso la competencia y los medios de comunicación. Podemos a su vez dividirlas en Corporativas (Informan sobre la empresa) y Promocionales (promocionan productos).

• Informativos: Su finalidad principal es distribuir información. La audiencia de este tipo de sitios depende del tipo de información que distribuyen.

• Ocio: Aunque normalmente son sitios con una finalidad económica, son un caso especial. No son sitios fáciles de crear ni de mantener y a veces siguen reglas propias; puesto que a veces es más importante sorprender al usuario con innovaciones que mantener la consistencia y la estructura.

• Navegación: Su finalidad es ayudar al usuario a encontrar lo que busca en Internet. Dentro de este grupo se sitúan los llamados portales, que intentan abarcar prácticamente todo dentro del propio sitio.

• Artísticos: Son un medio de expresión artística de su creador o creadores. Este tipo de sitios suele saltarse todas las convenciones y las únicas normas a aplicar son las que el propio artista o artistas deseen.

• Personales: Al igual que los anteriores, son un medio de expresión de su creador o creadores. Sus objetivos y su audiencia pueden ser de lo más variopinto. Dentro de este grupo puede haber de todo desde colecciones de fotos de la familia hasta tratados científicos de primer orden.

Si sólo se tiene una vaga idea de cómo se relacionan las distintas secciones de una Web, si no se tiene sentido claro de la organización y la narrativa, los usuarios lo percibirán inmediatamente.

Una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto de páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio. Planifique la estructura antes de empezar.

Incluso para los sitios más pequeños, es conveniente hacer algún esquema sencillo, para la mayoría de los casos una hoja de papel y un lapicero bastará, pero si el emplazamiento es grande, es recomendable usar algún tipo de programa que permita manejar estructuras de tipo grafo.

La estructura depende del contenido

No es lo mismo crear una estructura de navegación para un sitio que desea publicar información al estilo de un libro formado por capítulos que se adapta bastante bien tanto a una estructura lineal como a una jerárquica. Mientras que un sitio donde se expone un tutorial o un tour es más apropiada una estructura de tipo lineal. Depende del tipo de sitio web.

Tipos de estructuras

• Secuencial o lineal: Es la forma más simple de organizar la información, que presentando una narrativa lineal. La información que fluye de forma natural como cómo una narrativa lineal o con un orden lógico es perfecta para este tipo de tratamiento.

La estructura secuencial puede ser cronológica, una serie de temas ordenados lógicamente de lo más general a lo más específico o incluso ordenado alfabéticamente.

Sin embargo, este tipo de organización sólo suele funcionar para sitios pequeños; a medida que la narrativa se torna más compleja, necesita una mayor estructuración para seguir siendo comprensible.

• Parrilla: Muchos manuales de procedimientos, listados de cursos universitarios, descripciones médicas de casos… se adaptan perfectamente a este tipo de estructura.

Las parrillas son una buena forma de asociar variables, en una serie de categorías standard como "eventos", "tecnología", "cultura"…

Para tener éxito con este tipo de estructura es necesario que las unidades individuales de una parrilla, compartan una estructura de temas y subtemas absolutamente uniforme.

Sin embargo las parrillas pueden ser difíciles de comprender si el usuario no consigue establecer la relación entre las diferentes categorías de información, y quizá más apropiadas para audiencias experimentadas que ya poseen un conocimiento básico del tema y de su organización.

En estas estructuras, resultan muy útiles los mapas gráficos del "Site".

• Estructura jerárquica: es quizá la mejor manera de organizar información compleja. Este tipo de estructura está especialmente bien adaptada para los Web "Sites", que siempre parten de una única página de inicio.

La mayor parte de los usuarios están familiarizados con los diagramas jerárquicos, y les resulta fácil de comprender cómo esquema de navegación.

Además, la organización jerárquica impone disciplina a la hora de analizar el contenido, ya que las jerarquías sólo funcionan bien cuando el material está perfectamente actualizado.

Dado que las estructuras jerárquicas son tan habituales en las oficinas e instituciones resulta fácil para los usuarios contruirse modelos mentales.

• Estructura en Web: Estas estructuras imponen pocas restricciones en el patrón de la información.

En este caso el objetivo es imitar el pensamiento asociativo y la libre circulación de ideas; los usuarios siguen sus intereses en una secuencia única para cada usuario del Sitio.

Este tipo de estructura se utiliza en sitios con una estructura de enlaces externos e internos muy densa. La meta es explotar al máximo el poder del hipertexto en la Web, pero este tipo de estructuras confunden al usuario fácilmente, por lo que, irónicamente, resultan muchas veces poco apropiadas para WebSites.

Funcionan mejor en Webs pequeñas, en los que predominan los listados de enlaces y que están dirigidas a usuarios muy instruidos o a usuarios experimentados buscando profundizar en su educación, pero no para logarar un entendimiento básico de un tema o producto.

• Estructura mixta: Los estudios de "funcionalidad" indican que los usuarios recuerdan mejor la información con este tipo de estructura (jerárquica con enlaces cruzados del tipo estructura Web), puesto que la estructura jerárquica resulta demasiado restrictiva y la no lineal ofrece demasiada información y lleva a la confusión.

Jacob Nielsen nos da las dos reglas más importantes sobre la estructura de un sitio web:

1. Puede parecer obvia pero no lo es tanto: tener una estructura y conseguir que refleje el contenido de sitio y sus relaciones.
2. La estructura no debe reflejar en ningún caso la organización de su compañía. Al usuario no le interesa su organización sino su Web. La estructura debe deperminarse por las tareas, incluso si eso significa que varios departamentos tienen que colaborar para realizar un sólo documento.

Sin una organización web sólida y lógica un sitio no funcionará bien incluso si el contenido es preciso y está bien escrito. Los 4 pasos básicos para organizar la información son:

1. Dividir la información en unidades lógicas.
2. Establecer una jerarquía por orden de importancia y generalidad.
3. Utilizar esta jerarquía para establecer relaciones entre las piezas de información.
4. Analizar el sistema estética y funcionalmente.

Subdividiendo la Información

La mayor parte de la información disponible en la WWW consiste en pequeñas piezas de información que se leen de forma no secuencial; especialmente en websites de tipo académico, corporativo, gubernamentales y de Organizaciones que ofrecen información que hace algunos años hubiera sido distribuida en papel.

Los autores de manuales y material técnico descubrieron mucho antes de que la web se inventase, que los usuarios prefieren pequeñas piezas de información que se pueden hojear y localizar rápidamente.

Esta manera de organizar la información es especialmente válida para la WWW por los siguientes motivos:

• Los usarios no leen las páginas en pantalla, las miran por encima . Si son largas, las guardarán o las imprimirán.
• Las pequeñas piezas de información son perfectas para los enlaces. Quien pulsa un enlace espera encontrar información específica relacionada con el tema que estaba viendo, no un libro entero de información que filtrar.
• Tampoco es necesario subdividir la información demasiado o los usuarios se cansarán de pulsar enlaces. El máximo para una Web con documentos de referencia es de una a 3 páginas de información impresa.
• Un formato uniforme para organizar y presentar la información permite a los usuarios aplicar su experiencia anterior con el “Site” a la hora de explorarlo y buscar información, permitiéndoles en cierta manera, adivinar como está organizada la información.
• Las piezas de información pequeñas y concisas se adaptan mejor a la visualización en pantalla que sólo permite ver una pequeña parte de documentos grandes.
• Las páginas muy largas tienden a desorientar al usuario, puesto que al avanzar a lo largo del documento el usuario se ve obligado a recordar la situación de elementos que ya no se pueden ver en pantalla (por ejemplo una barra de navegación en la parte superior).

Rosenfeld y Morville:

• Clarifica la misión y visión del sitio, equilibrando las necesidades del patrocinador y las necesidades de la audiencia.
• Determina el contenido y funcionalidad que el sitio va a tener.
• Especifica cómo los usuarios van a encontrar la información al definir su organización, navegación, etiquetado y sistemas de búsqueda.
• Mapea como el sitio se va a acomodar al cambio y crecimiento en el tiempo.

Es decir se ocupa de la planificación, organización, navegación, interfaz de usuario…

Es esta disciplina la que se ocupa de convertir una idea en un proyecto viable, utilizable y útil.

Durante la planificación del sitio es necesario construir dos mapas:

• Mapa Lógico: Refleja los contenidos del sitio y la forma en que están relacionados unos con otros. Es similar a un Diagrama funcional.
• Mapa de Navegación: Define de forma conceptual cada documento, su contenido y estructura. También define los nombres de los archivos y su vinculación. A través de un mapa de navegación tenemos una visión abstracta de todo el proyecto.

Sólo después de esta planificación podremos empezar a diseñar los prototipos del sitio.

Los elementos de navegación, son los que permiten al usuario moverse por nuestro sitio y encontrar la información que busca. Con un sistema de navegación consistente y predecible, se ayudará al usuario a hacerse una idea de la organización del site.

La Web es Navegación. La interacción más básica de cualquier usuario es pulsar enlaces para moverse a través de la información en un espacio que abarca cientos de millones de documentos. Un interfaz de navegación debe dar respuesta a estas preguntas básicas:

• ¿Dónde estoy?: La Web es un medio dimensiones enormes que aporta muy pocas pistas sobre la ubicación de la documentación. Debido a la naturaleza de los hipertextos un usuario puede pasar de un website a otros in transición, es absolutamente necesario decirle al usuario dónde esta. Tanto en relación con la WWW, como en relación con la estructura de su sitio.
• ¿Quién me está contando todo esto?: Es una cuestión que se da por supuesta demasiadas veces, siempre hay que decirle al usuario quien ha creado la página.
• ¿Qué es esto?: Todos los documentos necesitan títulos claros que capturen la atención del usuarios. El título del documento es normalmente el primer elemento que los navegadores visualizan. En páginas con muchos gráficos, el título puede ser lo único que los usuarios puedan ver en un buen rato, mientras cargan los gráficos. Además, el título de una página será la frase que se guardará en favoritos para identificar la página. Un título ambiguo o que cree confusión no ayudará en nada al los usuarios cuando pretendan recordar qué página es esa que han guardado.
• ¿Dónde he estado?. El usuario puede haber visitado otras partes del sitio, hay que evitar que se pase el rato dando vueltas en círculo porque no puede distinguir qué partes ha visitado y cuales no. Esta información además puede ayudar al usuario a comprender la estructura del sitio. Los Navegadores incorporan unas características que ayudan al usuario a saber dónde han estado y por donde han venido: el botón atrás, y la lista de páginas visitadas (historial), y la carpeta de favoritos. Lamentablemente, son muchos los diseñadores que "secuestran" las barras de herramientas de los navegadores, privando a los usuarios de una herramienta primordial. ¿Cómo se sentiría usted si al abrir un documento de Word desparecieran todas sus barras de herramientas?.
• ¿Dónde puedo ir?: Esta pregunta parece fácil de responder con los elementos de navegación y cualquier otro enlace que haya en el documento. Siempre, claro está que estén claramente identificados como tales.
• ¿Cuando?: En la WWW hay millones de páginas no actualizadas desde hace años, ayude a sus visitantes a saber si su información es actual o tiene 10 años, incorporando la fecha.

Otras preguntas en la mente del usuario pueden ser:

¿Cómo voy a volver dónde estuve antes?
¿Cuánto tardaremos en llegar?

Una buena navegación intenta contestar todas las preguntas del usuario mediante la utilización de una navegación consistente, ayudas a la navegación como las direcciones URL, etiquetas de página y páginas de referencia. 

Proporcionar un contexto o perder al usuario

Es necesario que las páginas Web proporcionen al usuario pistas explícitas sobre el contexto en el que se encuentran y la organización de la información, puesto que sólo pueden ver una pequeña parte del "Site" (menos de una página cada vez) y además pueden haber llegado ahí desde cualquier parte.

Esta cuestión es tan básica, que muchos diseñadores pasan por alto ofrecer esta información, crítica para el usuario a la hora de saber si ha encontrado lo que buscaba.

Independientemente de si se trata de un sitio personal o de un gran sitio de comercio electrónico, siempre hay que decirle al visitante dónde está y quién ha creado la página.

Y hay que decirle dónde está, tanto en relación con el resto del "mundo" como en relación con nuestro propio sitio.

A veces, al usuario le resulta difícil saber dónde está puesto que no tiene puntos de referencia. Para saber dónde están los usuarios cuentan no solo con las direcciones URL, sino también con los nombres de las páginas, los colores, los logotipos, las llamadas "migas de pan".

Tenga en cuenta que los usuarios siguen pocas veces los patrones de navegación que pretenden los diseñadores. Pueden llegar a cualquier documento de su sitio desde cualquier otro sitio: buscadores, favoritos, boca a boca. Por eso ubicarlos inmediatamente resulta crucial. 

Direcciones URL

La dirección URL (Uniform Resurce Locator) definen las posiciones de las páginas. Y precisamente por ello no conviene "secuéstralas", quitando las barras de herramientas de los navegadores o utilizando marcos.

Le guste o no, una dirección como esta:
http://www.compañía/productos/telefonos/modvh7.html
le dice al usuario exactamente dónde está.

Esta ventaja se pierde con las páginas generadas dinámicamente que suelen aparecer así:

http://www.compañia.com/main/actu.asp?ref=NOT19322&tipo=econ

Utilice direcciones sencillas y fáciles de recordar siempre que se posible, para mejorar la navegación. 

La etiqueta Title. Barra de título del navegador

La etiqueta <title> es lo primero que se ve en el navegador y debe indicar los contenidos de la página. Utiliza un título claro.

Además es precisamente este título el que se guardará en la carpeta de favoritos, por ello es muy importante que esté bien definido y sobre todo, que no sea ambigüo. 

Identificación del Sitio

Como no sabemos desde dónde viene nuestro visitante, y el primer documento que vea de nuestro sitio puede no ser la página principal, hay que poner en todas las páginas el nombre del sitio.

La identificación representa al sitio entero y, como tal, ocupa el lugar más alto en la jerarquía lógica.

El mejor lugar para poner el identificador es (para páginas occidentales que se leen de izquierda a derecha) la parte superior izquierda de la pantalla, porqué ahí es dónde se dirige instintivamente la mirada.

Por convención, este logotipo suele incluir un enlace a la página del sitio pero no todo el mundo lo sabe por lo qué:

No le exime de la obligación de poner un enlace a la página principal identificado como tal.

Es aconsejable utilizar los atributos "title" (en el enlace) y alt (en la imagen) para indicar a los usuarios que pulsando sobre el logotipo podrán ir a la página principal. 

Identificación de la página

Ya hemos visto la etiqueta <title> pero esto no es suficiente, todas las páginas tienen que tener un nombre, que debe estar situado de forma que enmarque el contenido y debe ser prominente.

Además tiene que que corresponderse con en enlace que ha llevado a esa página. Si el nombre no se corresponde, puede perder la confianza del usuario puesto que los enlaces no conducen a dónde apuntan.

Por supuesto, que en barras de navegación hay que llegar a soluciones de compromiso, puesto que no caben nombres largos pero por lo menos deben parecerse lo más posible.

Por ejemplo un enlace pone Arquitectura -> el nombre de la página es "Arquitectura de la Información". 

Barras de ubicación o "migas"

Esta característica se está convirtiendo en una convención y cada vez aparece en más sitios. Muestran el camino desde la página principal.

La barra de navegación

También se puede indicar la posición en la navegación principal del sitio, por ejemplo, dando un color distinto al enlace de la página en la que nos encontramos ahora.