Navegabilidad

Uno de los puntos más importantes cuando diseñamos nuestro sitio web es la navegabilidad que
queremos darle a nuestros usuarios cuando nos visiten. Pensemos que sería algo similar a planificar
un paseo donde debemos elegir qué lugares mostrar, qué hacer en cada lugar y cuánto tiempo
pensamos dedicarle a cada uno. Estas decisiones no son poca cosa y pueden definir en gran parte la
satisfacción de un visitante al explorar nuestro sitio. Si el proyecto que estás realizando trata sobre
ventas, más importante aún. Las grandes tiendas digitales dedican incontables esfuerzos en reducir
los tiempos de búsqueda de los productos y la concreción de la compra. Si bien acá aplican
conceptos más generales de usabilidad, el tema de la navegabilidad es relevante desde el punto de
vista que define la estructura del sitio y su interacción.

Comencemos presentando un concepto conocido como mapa de sitio o site map en inglés. El mapa
de sitio presenta las diferentes secciones y cómo se relacionan entre ellas. Tiene como público
objetivo 3 tipos: diseñadores, visitantes humanos y visitantes robots. Es importante que recuerdes
siempre los 2 tipos de visitantes, en breve veremos su importancia.

Este es un ejemplo de mapa de sitio:

Tiene forma de ábol dado que el ingreso al sitio siempre es a través de su url y por lo tanto, esa será
su raíz. Luego, cada sección del sitio lista las diferentes páginas o subsecciones que contiene.

De cara a los diseñadores, el mapa del sitio nos permite distribuir el trabajo entre el equipo y
asignar por secciones al grupo de personas que trabajen sobre ese asunto. También les permite
tener un marco de referencia de lo que trata el sitio y ellos lo usarán para medir el progreso de su
trabajo en cuanto a la cobertura realizada sobre el mapa. Es importante incluir una breve
descripción de las acciones que se ofreceran en las diferentes páginas o secciones de forma tal de
permitirle al diseñador comprender la usabilidad que se le dará a la misma.

Veamos un pequeño ejemplo parcial de un sitio e-commerce:

Página de productos: el visitante puede loguearse en el sitio (Credenciales de ingreso)

Página de login: el visitante se loguea en el sistema exitosamente (Login)
Página de catálogo: el visitante elige productos y los agrega al carrito de compras (Agregar Item)
Página de catálogo: el visitante decide hacer proceder a comprar los items de su carrito (Rendición)

Notar que en el ejemplo anterior se repiten las páginas porque explicamos diferentes tipos de acción
sobre la misma. Eso implica que probablemente, utilicemos diferentes diseños o componentes
relevantes, para realizar las diferentes acciones.

De cara a los visitantes humanos, el mapa del sitio debe ser lo suficientemente intuitivo para que la
persona pueda encontrar lo que busca y explorar tu sitio aprender sobre lo que ofreces con total
facilidad. Si el visitante encuentra dificultades o no logra comprender la estructura de tu sitio,
probablemente se vaya al poco tiempo. Piensa en sitios que tengan mucha información mal
estructura, seguramente te hayas encontrado con alguno de ellos y habrás optado por buscar en
otro lado. La presentación del mapa del sitio se suele realizar a través de la barra de navegación,
donde se indican todas las secciones. Luego, algunos utilizan los Breadcrumbs para ubicar al visitante
el lugar dentro del mapa del sitio en el que se encuentran.

De cara los visitantes no humanos, entiendase robots, utilizaremos una versión del mapa del sitio
en formato xml que permitirá a los motores de búsqueda, indexar nuestro sitio para luego rankearlo
en las páginas de búsqueda como Google, Yahoo o Bing. Este archivo xml se suele alojar en el mismo
servidor que nuestra web. Es importante incluirlo ya que si deseamos aparecer entre los primeros
lugares de las búsquedas, los motores tienen como recurso primario este archivo.

Veamos un ejemplo:

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://tusitio.com/</loc>
<lastmod>2018-08-08</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>http://tusitio.com/productos</loc>
<lastmod>2018-08-08</lastmod>
<changefreq>weekly</changefreq>
<priority>0.3</priority>
</url>
</urlset>