Podemos definir el mapa del sitio como un plano general que muestra su estructura y funcionalidad.

No nos referimos al mapa del sitio que a modo de directorio aparece en la página de inicio de muchas webs, generalmente con acceso en la zona superior derecha de la página. Hablamos de un mapa del sitio previo al diseño y construcción del sitio web.

El mapa del sitio es un documento de referencia en cualquier proyecto web. Las visitas al mapa del sitio serán contínuas durante todo el proceso de creación del mismo, para revisar su estructura y hacer todas las modificaciones que sean necesarias. Aún después de que la web se haya puesto en funcionamiento, el mapa del sitio es un documento fundamental, imprescindible para efectuar cualquier modificación.

Generalmente se muestra en un solo folio de papel, para ser más manejable, aunque en algunos proyectos el gran volumen de información y la compleja estructuración de la misma precisan soportes más grandes, también en papel, que suelen ser colgados en la pared para su consulta y manipulación.

El mapa de sitio no incorpora elementos de diseño. Su objetivo es que el cliente vea la estructura del sitio. Una vez conseguida la aprobación del cliente, el diseñador o diseñadores ya tienen algo con lo que empezar a trabajar.

Es un documento "vivo", que se está modificando contínuamente, por lo que es importante que etiquetemos los diferentes documentos con algún distintivo, como fecha o versión, para evitar encontrarnos con un montón de papeles sin saber cuál es la versión más actualizada.

Antes de empezar a diseñar nuestro mapa, hemos de revisar el diagrama que hemos creado con anterioridad. ¿Podemos mejorarlo?. Posiblemente sí. Es fundamental huir de las prisas en este estadio, ya que las modificaciones que hagamos ahora son sencillas y económicas y pueden mejorar sensiblemente la funcionalidad del futuro sitio.

Lo ideal es que, una vez tengamos claro nuestro diagrama, este sea validado por el cliente y el equipo que va a desarrollar el sitio, antes de ponernos a trabajar en el mapa.


Desarrollar categorías


Ahora se trata de que aquellos escenarios de uso que habíamos identificado en nuestro diagrama, los tenemos que trasladar a categorias lógicas, para que toda la información del sitio quede bien organizada.

La información se puede organizar de diferentes maneras, pero la predominante es la organización jerárquica. La mayoría de los sitios web tienen una organización jerárquica. En el mundo físico, tenemos la costumbre de organizar y ordenar las cosas por familias o grupos y, después, utilizar subcategorias más pequeñas.
Hacemos esto con los utensilios de cocina, o con la ropa, por ejemplo.

A veces, al organizar la información de un sitio web, el sistema jerárquico puro no es el más adecuado, por lo que tenemos que utilizar un sistema mixto. Por ejemplo: si vamos a organizar el contenido de una web de venta de música, la organización de los distintos álbumes puede hacerse por estilos, por intérpretes ordenados alfabéticamente, por décadas musicales...

Aunque a veces las categorias son obvias, en ocasiones puede resultar más difícil organizar el contenido del sitio.


El aluticaje

Extraña palabra, ¿verdad?. En realidad no significa nada, es una palabra que utilizo como regla nemotécnica para acordarme de cinco maneras de organizar los contenidos:

1.- Alfabeto
2.- Lugar
3.- Tiempo
4.- Categoría
5.- Jerarquía

Casi toda la información puede organizarse utilizando estos cinco parámetros y, generalmente, más de uno de ellos.
Por ejemplo, el sitio que vende música, que comentábamos antes. Vamos a ver diferentes maneras de organizar los álbumes con nuestro aluticaje:

1.- Alfabeto: por orden alfabético, según el nombre del grupo o intérprete.

2.- Lugar: según la nacionalidad del intérprete o grupo. Europeos, Americanos, Africanos, Asiáticos, etc.

3.- Tiempo: ordenados por décadas. Los 60, los 70, los 80, etc.

4.- Categoría: clásica, rock, pop, etc.

5.- Jerarquía: álbum más barato o más caro.

Esta sería una forma de organizar la información, pero no la única, ni tampoco la mejor necesariamente.

En nuestras conversaciones con nuestro cliente hemos de obtener información que nos sirva para identificar a los usuarios del sitio web en el que estamos trabajando.

Una vez tenemos definidos los perfiles de nuestros usuarios, hemos de imaginar los posibles escenarios de uso que describan sus necesidades y comportamiento.

Todos estos datos pueden trasladarse a un diagrama, que será el "borrador" que nos servirá de base para, posteriormente, elaborar el mapa del sitio y después el prototipo

Utilizar esta secuencia de forma sistemática ayuda a no dejarse ningún detalle importante, aparte de que el cliente percibe una imagen más profesional de nuestro trabajo.

Nuestro cliente puede verse confundido ante nuestra pregunta sobre los escenarios de uso del sitio web. No se trata de que nos diga "todo" lo que se puede ver o hacer en el sitio, sino de intentar identificar aquellos patrones de comportamiento que son previsibles para determinados perfiles de usuarios.

Por ejemplo, en una web especializada en restaurantes, los usuarios empezarán buscando restaurantes de su zona en un listado y, posteriormente, acotarán la búsqueda según precio. Esto sería un escenario de uso.

Esto nos ayudará a la hora de decidir que habrá en nuestro menu principal, en la página de inicio y, consecuentemente, a definir la jerarquía de los distintos contenidos del sitio. Algo aparentemente tan sencillo, puede complicarse bastante según la temática del sitio y, lógicamente, según el volumen de información que tengamos que organizar.

Ahora que ya hemos definido a nuestros usuarios y sus escenarios de uso, tenemos que hacer un diagrama que nos ayude a construir la mejor estructura para "sostener" la información del sitio.


Cómo hacer diagramas


Con los diagramas intentamos describir gráficamente todos los escenarios de uso, descartando redundancias, de forma que las necesidades de nuestros usuarios queden cubiertas de la forma más simple y eficaz posible. El propósito del diagrama es visualizar qué es lo que podrán hacer nuestros usuarios en nuestro sitio.

Si quieres dar una buena imagen a tu cliente, mejor utiliza Visio o Illustrator, o cualquier otro programa similar. Siempre queda más profesional que hacerlo a mano, en un folio de papel. Yo, personalmente, utilizo Visio para hacer mis diagramas, mapas de sitio y prototipos, pero hay quien prefiere Powerpoint u otros.

Un ejemplo que a mí me gusta mucho para explicar cómo se hace un diagrama es el de los empleados de una gran empresa, cómo se dirigen a sus casas al terminar la jornada laboral y qué hacen durante el trayecto de sus oficinas a sus domicilios.

Definamos los pérfiles de usuario:

1.- Los que utilizan el metro.
2.- Los que utilizan el autobús.
3.- Los que van caminando a casa.
4.- Los que conducen su propio vehículo.
5.- Los que utilizan el tren de cercanías.


Ahora definamos los escenarios de uso:


1.- Empleados que van de la oficina a su casa.
2.- Empleados que paran en el banco y en una cafetería.
3.- Empleados que consultan los horarios y tarifas en la estación.
4.- Empleados que adquieren billetes para viajar.

Al combinar los pérfiles de usuario con los escenarios de uso es cuando podemos dibujar nuestro diagrama, que nos servirá posteriormente para la elaboración del mapa del sitio. Ya sé que habrá quien diga que podemos obviar este paso, e irnos diréctamente al mapa del sitio, para ganar tiempo. Si queremos hacer un trabajo minucioso la metododología es esencial, para evitar olvidos, errores y redundancias.

Con los diagramas no pretendemos definir todas las páginas de nuestro sitio, no hace falta llegar a tanto nivel de detalle, ni mucho menos. Se trata de definir "lugares", por donde el usuario tendrá que pasar para conseguir sus objetivos.

Este diagrama corresponde a un proyecto para el sitio web de los Yankees de Nueva York. No fue el diagrama definitivo, pero da una idea de lo que hemos visto antes.





Los diagramas se hacen mejor con papel y lápiz, ya que se cambia contínuamente de idea durante su elaboración, por lo que las modificaciones son frecuentes. Trabajar a mano da más agilidad. Otra cosa es la presentación al cliente, que debe ser lo más profesional y esmerada posible. En este caso se ha exagerado al máximo la intensidad de los colores para resaltar las diferentes categorias.

En la primera media hora con Renfe.es, como vimos en el artículo anterior, se detectaron errores de diseño, algunos más graves que otros, que dificultan o impiden la consecución de objetivos por parte del usuario.

Vamos a dedicar un poco más de atención a la web de Renfe. No hemos pretendido hacer una evaluación heurística de este sitio, que precisaría de más tiempo de dedicación y de un estudio más detallado.

La web de Renfe, tal como dijimos anteriormente, no aprovecha bien el espacio, utilizando a menudo elementos innecesarios, supérfluos, llegando en ocasiones a duplicarlos. Hemos de tener en cuenta que el primer contacto visual del usuario con un sitio web es crítico. Localizar visualmente la información debe convertirse en una tarea fácil. Cuanto más recargada esté nuestra página, tanto más difícil se lo ponemos a nuestro visitante.

Si el visitante ha llegado hasta nosotros por casualidad, o es la primera vez que nos visita deliberadamente, corremos el riesgo de que nos abandone con rapidez, porque le resulte incómoda la interfaz.

Renfe debe preguntarse cuál es el propósito de su web y qué objetivos persigue. Lógicamente, la venta de billetes debería ser su objetivo principal, para beneficiarse de la automatización del proceso y abaratar costes. Por el contrario, la compra de billetes no sólo resulta dificultosa, sino que, en ocasiones, es imposible de llevar a cabo, como ocurre en el caso de los trenes de cercanías

No parece muy preocupada Renfe con las ventas que pueda efectuar a través de su web. Si nos situamos en "Mundo tren" y accedemos a "Tienda Renfe", vemos que no tenemos opción de comprar online, sino que tenemos que hacerlo por teléfono, fax, o correo electrónico. Realmente muy operativo. Se desaprovecha así el impulso de compra, tan habitual en Internet, y que difiere de la actitud de compra que predomina en el mundo físico. Y ya que estamos en esta página, no puedo evitar volver a hacer mención a algo que hemos comentado con anterioridad: la obsesión de Renfe.es por hacernos creer que estamos en un sitio diferente al que creemos estar. Esta es la pantalla que aparece cuando seleccionamos "Mundo tren" y después "Tienda Renfe":




No quiero que compres

Parece que es el mensaje que nos transmite Renfe, después de decepcionarnos con sus planteamientos. Vamos a situarnos nuevamente en su página de inicio. En la zona superior derecha encontramos la palabra TIKNET, y debajo "Compra de billetes". Por cierto, ¿qué aporta la palabra Tiknet al proceso de compra?. ¿No contribuye a introducir un nuevo elemento de confusión en la navegación de la página?. Además, ¿es probable que alguien diga: "he comprado un billete de tren por Tiknet", o es más probable que diga que lo ha comprado por Internet?. Si no aporta nada bueno y encima contribuye a confundir, ¡no lo pongas!.

Ahora la situación se va a complicar un poco más para el usuario. En cuanto haga click en "Compra de billetes" accederá a una página de la cuál hemos obtenido la siguiente captura:




El menú de la izquierda es el que, teóricamente, nos permitirá iniciar el proceso de compra, que es lo que hemos venido a hacer aquí. No obstante, al hacer scrolling para leer la información referente al sistema de venta de billetes, nos vamos a encontrar con una pantalla en la que el menú de la izquierda ha quedado parcialmente oculto, impidiendo acceder a varias de las opciones, entre ellas "Compra de billetes".




Durante la simulación del proceso de compra de un billete, hemos observado que los datos del tren seleccionado no quedan memorizados, teniendo que introducirse de nuevo una vez hemos hecho click en el carrito. No sólo se consigue irritar al usuario, también se aumentan las posibilidades de cometer errores.

El proceso de compra sólo es posible ser llevado a cabo por usuarios registrados. ¿Cómo soluciona Renfe la incidencia, tan habitual por otra parte, de que un usuario no recuerde su código?. ¿Nos lo enviará rápidamente a la dirección de correo electrónico vinculada, como suele resolverse el problema en la mayoría de los sitios?. Pues no, tendremos que hacer una llamada telefónica, pero además a un 902, que no es un teléfono gratuito.




Nuevamente se aprecia un error de colocación de texto con respecto a los campos de introducción de datos. En este caso ocurre con "código de cliente" y "clave secreta". Ninguno de los textos está donde tendría que estar y puede dar lugar a errores por parte del usuario.


El teléfono de contacto

Incluir un teléfono de contacto es fundamental en los sitios web que estén dedicados total o parcialmente al comercio electrónico. Renfe.es así lo entiende, pero equivoca el concepto, a nuestro parecer, ya que incluye dos teléfonos diferentes, en vez de uno que centralice toda la información y redirija al usuario al departamento que mejor le pueda atender. Se conseguiría, además, descargar la cabecera de elementos supérfluos.




Se me ha parado el motor

En el artículo anterior, criticábamos la ubicación del texto e iconos de la zona superior derecha, ya situados en un nivel secundario de navegación, donde presumiblemente se podía contactar con la empresa y realizar búsquedas del contenido interno del sitio. Ya entonces comentamos que la palabra buscar no actúa como vínculo. Bueno, tampoco el pequeño icono situado a la derecha del campo de búsqueda lo hace. O sea, buscar es imposible. Con el agravante de que el mapa del sitio, como vimos anteriormente, es totalmente ineficaz.




También llama la atención que dicha opción de búsqueda no se incluya en todas las páginas de la web, como sería lo esperado, especialmente en la página de inicio, que es donde normalmente resulta más necesario.

Preguntas más frecuentes

Es curioso que el usuario de Renfe sólo plantée CUATRO preguntas frecuentes a la compañía. ¿No justificaría eso que la información relacionada con dichas preguntas estuviera perfectamente accesible en un lugar destacado de la web?.

Lo que resulta pretencioso es la frase "Todas las respuestas a sus preguntas". ¿Tan simple y previsible es el usuario de Renfe?. ¿Acaso no se merece un sistema de ayuda un poco más completo?




Esconder información relevante

La información relevante ha de estar en un sitio visible. En la zona inferior izquierda de la página de inicio aparece un enlace denominado "Alteraciones en el servicio". ¿A qué se refiere exáctamente, a algo relacionado con el funcionamiento de la web?. Pues no, se refiere a los servicios mínimos disponibles en periodo de huelga de trenes, durante el último trimestre del presente año. Es una información relevante, que debería estar más visible en la página principal.




Justo en zona inferior izquierda de la página principal hay tres enlaces: "Emisión de pagarés", "Proveedores" y "Oferta de empleo público", que podrían incluirse en alguna de las secciones principales del menú, por ejemplo en "Empresa". Aquí, al fondo de la página, son difícilmente localizables y, además, contribuyen a recargarla.

Si seguimos en la zona inferior de la página, encontramos un banner estático que nos avisa de que ya es posible comprar billetes en Internet para trayectos Madrid-León y Madrid-Vitoria, y que al pincharlo nos lleva diréctamente a la sección de Tiknet. Nosotros nos preguntamos: ¿Alquien dudaba que se pudiera adquirir billetes para dichos trayectos?. ¿Suponen un porcentaje elevado del total de billetes emitidos por Renfe para merecer un banner en la página principal?, y si así fuera, ¿por qué no darle un lugar más destacado a una noticia tan relevante.

Por último, también en la zona inferior, pero situado en la zona derecha de la pantalla, aparece un banner sobre el Referéndum de la Constitución Europea. ¿Necesita Renfe sobrecargar su página principal con publicidad de temas ajenos a la temática de su web?.