Mapas de sitio y flujos de usuario: planificando cómo se mueven los visitantes

Jazmie Jamaludin

Imagina entregarle a un amigo las llaves de un edificio que diseñaste y pedirle que encuentre la sala de reuniones en el tercer piso. Si los pasillos tienen sentido, las señales son claras y las escaleras están donde las esperarías, llegará sin pensarlo. Si el diseño es un laberinto de puertas sin marcar y callejones sin salida, deambulará, se frustrará y quizás se rinda y se vaya. Un sitio web funciona exactamente de la misma manera. Antes de que alguien elija un color o escriba una palabra, alguien tiene que planificar el edificio, dónde se encuentra cada habitación y cómo la gente se mueve entre ellas. Esa planificación es para lo que sirven los mapas del sitio y los flujos de usuario.

Estas dos herramientas suenan técnicas, pero la idea detrás de ellas es maravillosamente simple. Un mapa del sitio es el plano de tu sitio web, un mapa de todas sus páginas y cómo se relacionan. Un flujo de usuario es el viaje que realiza un visitante en particular para lograr algo, el camino desde "Tengo una pregunta" hasta "Estoy satisfecho". Planifícalos bien y tu sitio web será fácil de usar. Omítelos y terminarás con un sitio hermoso que nadie puede navegar. Esta guía explica ambos en un lenguaje sencillo y muestra por qué vale la pena hacerlos antes de construir.

Qué es realmente un mapa del sitio

Un mapa del sitio es simplemente una lista, generalmente dibujada como un diagrama, de todas las páginas que tendrá tu sitio web y cómo están agrupadas. Piensa en ello como la tabla de contenidos de tu sitio, decidida antes de construir una sola página. Muestra la página de inicio en la parte superior, las secciones principales que se ramifican de ella y cualquier subpágina anidada debajo. De un vistazo, cualquiera puede ver la estructura completa y cómo encaja todo.

Esto es diferente del mapa del sitio XML técnico que leen los motores de búsqueda, aunque son ideas relacionadas. El tipo que estamos discutiendo aquí es una herramienta de planificación para humanos, una forma de acordar qué páginas existen y cómo están organizadas antes de que comience el costoso trabajo de diseño y redacción. Acertar con este esqueleto al principio ahorra enormes cantidades de retrabajo más adelante, porque mover una habitación en papel es gratis, mientras que moverla después de que el edificio está levantado es costoso.

La estructura decide si las personas encuentran algo
La investigación de usabilidad encuentra consistentemente que cuando el contenido está organizado de la manera que los visitantes esperan, completan las tareas más rápido y abandonan con menos frecuencia.
Fuente: Nielsen Norman Group

Por qué la planificación de la estructura es tan importante

Es tentador sumergirse directamente en el diseño, los elementos visuales son la parte divertida. Pero construir un sitio web sin un mapa del sitio es como construir una casa sin un plano: terminas con habitaciones en lugares extraños, sin un flujo lógico y una sensación de que algo anda mal, incluso si no puedes nombrarlo. Los visitantes sienten esa confusión. No pueden encontrar la página que desean, pierden el rastro de dónde están y se van.

Una buena estructura hace lo contrario. Agrupa el contenido relacionado de manera sensible, mantiene el número de clics a cualquier cosa importante bajo y coincide con el modelo mental que los visitantes ya tienen. Cuando la gente llega esperando encontrar "precios" bajo un enlace de precios claro y "cómo contactarte" bajo contacto, y ahí es exactamente donde están esas cosas, el sitio se siente intuitivo. Esta organización reflexiva del contenido es el corazón de una buena planificación del sitio, y fluye directamente hacia una navegación del sitio web clara.

Cómo construir un mapa del sitio

No necesitas software especial para empezar. Las notas adhesivas en una pared, o las cajas en un diagrama simple, funcionan perfectamente. El proceso consiste principalmente en pensar con claridad en lugar de dibujar de forma ordenada. El objetivo es una estructura que tenga sentido para tus visitantes, no solo para ti.

Empieza con las páginas que necesitas

Haz una lista de todas las páginas que debería tener tu sitio. Para la mayoría de las pequeñas empresas, este es un conjunto manejable: una página de inicio, una página de "Acerca de", una o más páginas de servicios, una prueba o portafolio y una página de contacto. Nuestra guía sobre las páginas esenciales que necesita todo sitio web de una pequeña empresa es una buena lista de verificación para empezar. No te preocupes por el orden todavía, simplemente pon todas las páginas sobre la mesa.

Agrupar y clasificar

Ahora agrupa las páginas relacionadas y decide qué es lo más importante. Tu menú de nivel superior debe contener solo el puñado de cosas que más interesan a los visitantes. Las páginas menos críticas pueden colocarse debajo de estas como subpáginas, o vivir discretamente en el pie de página. El objetivo es una estructura poco profunda: los visitantes deben llegar a cualquier cosa importante en solo uno o dos clics, sin tener que excavar capa tras capa.

Mapa del sitio vs. flujo de usuario: dos herramientas de planificación, dos trabajos
Aspecto Mapa del sitio Flujo de usuario
Qué muestra Todas las páginas y cómo están agrupadas El camino para completar una tarea
La pregunta que responde ¿Qué páginas existen y dónde? ¿Cómo hace alguien para lograr algo?
Mejor dibujado como Un árbol ramificado de páginas Un camino paso a paso con decisiones
Principal beneficio Una estructura lógica y fácil de encontrar Trayectorias fluidas hacia acciones clave

Lo que añade un flujo de usuario

Si un mapa del sitio muestra las habitaciones, un flujo de usuario muestra la ruta que alguien toma a través de ellas para lograr un objetivo. Se acerca desde "aquí está todo el edificio" a "aquí está exactamente cómo un visitante por primera vez reserva una cita". Un flujo de usuario sigue a un tipo de visitante con una intención y mapea cada paso que dan, y cada decisión que enfrentan, hasta que tienen éxito o se quedan atascados.

Este cambio de enfoque es poderoso porque las personas reales no visitan tu sitio para admirar su estructura, vienen a hacer algo. Quieren encontrar un precio, reservar un espacio, hacer una pregunta o comprar un producto. Un flujo de usuario te obliga a ponerte en su lugar y preguntar: desde donde aterrizan, ¿el camino hacia ese objetivo es obvio y corto? ¿O termina en un callejón sin salida, retrocede o exige demasiados pasos? Este es exactamente el pensamiento detrás de una página de destino de alta conversión, donde cada paso está diseñado para mover al visitante hacia una acción.

Mapeo de un flujo simple

Elige un objetivo común, digamos, reservar una consulta. Ahora traza: el visitante aterriza en la página de inicio, hace clic en servicios, lee sobre el servicio relevante, hace clic en un botón "reservar ahora", elige una hora y confirma. Escribe cada paso. Luego, míralo críticamente. ¿Falta algo? ¿Hay demasiados pasos? ¿Podría un visitante preparado llegar a "reservar ahora" antes? A menudo, detectarás un paso que añade fricción, o una señal que falta, que nunca habrías notado solo en el diseño. Una página de reservas fluida al final de ese flujo es lo que convierte la intención en una cita confirmada.

Diseño de flujos para tus objetivos más importantes

No puedes mapear todos los posibles recorridos, y no es necesario. Concéntrate en el puñado de flujos que más importan para tu negocio: los que conducen a consultas, reservas o ventas. Para un negocio de servicios, eso podría ser "de visitante a consulta". Para una tienda, podría ser "de navegante a compra completada". Diseña estos caminos críticos para que sean lo más fluidos y obvios posible, y el resto del sitio se encargará en gran medida de sí mismo.

Cuando mapeas estos flujos clave, naturalmente empiezas a eliminar obstáculos, un clic extra aquí, una etiqueta confusa allí, una tranquilidad que falta en el momento de la decisión. Cada obstáculo que eliminas hace que sea más probable que el visitante alcance el objetivo. Este es el núcleo práctico de lo que hace que un sitio web convierta: no magia, sino viajes claros y sin fricciones hacia las acciones que importan.

Errores estructurales comunes a evitar

Algunas trampas atrapan a la gente una y otra vez. La primera es enterrar páginas importantes demasiado profundamente, obligando a los visitantes a hacer clic cuatro o cinco veces para llegar a algo que querían de inmediato. La segunda es meter demasiados elementos en el menú principal, lo que abruma a la gente y esconde lo que realmente importa. La tercera es organizar el sitio en torno a tu estructura interna, tus departamentos o títulos de trabajo, en lugar de lo que los visitantes intentan hacer.

La cura para los tres es volver siempre al punto de vista del visitante. Nombra las cosas como ellos lo harían, agrupa las cosas como ellos esperarían, y mantén los destinos importantes al alcance de la mano. En caso de duda, pídele a alguien que no esté familiarizado con tu negocio que encuentre una página clave, y observa dónde duda. Su confusión te enseñará más que cualquier teoría.

Planifica el crecimiento desde el principio

Un mapa del sitio no se trata solo de las páginas que necesitas hoy; es una apuesta silenciosa sobre hacia dónde se dirige tu sitio. Muchas empresas comienzan pequeñas y luego van añadiendo página tras página a lo largo de los años, hasta que la estructura se resiente bajo el peso y nada se ubica donde los visitantes esperan. Un poco de previsión evita esto. Cuando bosquejas tu estructura, deja espacio para las secciones que razonablemente puedas imaginar añadir, un blog, más servicios, un área de recursos, y decide aproximadamente dónde vivirían. No tienes que construirlas ahora, pero saber dónde irán mantiene tu sitio coherente a medida que crece.

Esto es importante porque una estructura que escala con gracia te evita costosas reconstrucciones posteriores. Añadir un nuevo servicio a un sitio bien planificado es una cuestión sencilla de colocarlo en un grupo lógico existente. Añadirlo a un sitio que creció sin un plan a menudo significa reorganizar menús, romper enlaces y confundir a los visitantes que regresan. Pensar un paso adelante durante la planificación es una de las formas más baratas de preparación para el futuro que existen, y no cuesta nada más que unos minutos de imaginación en la etapa de esbozo.

Prueba tu plan antes de construir

La belleza de los mapas del sitio y los flujos de usuario es que puedes probarlos antes de gastar dinero en diseño y desarrollo. Muestra tu mapa del sitio a algunas personas que coincidan con tu audiencia y pregúntales dónde harían clic para realizar varias tareas. Recorre tus flujos de usuario clave y ve si los pasos se sienten naturales. Solucionar un problema estructural en papel te cuesta minutos; solucionarlo después del lanzamiento puede costar semanas y un rediseño frustrante.

Esta etapa de planificación se sitúa de forma natural junto con el diseño de tus páginas clave y trabaja de la mano con el wireframing, donde se esboza el diseño de las páginas individuales. Juntos, la estructura y el diseño forman el plano sobre el que se construye todo tu sitio. Las decisiones bien tomadas aquí repercuten positivamente en cada página que le sigue.

La recompensa: un sitio que resulta obvio

Cuando los mapas del sitio y los flujos de usuario se hacen con esmero, los visitantes nunca los notan, y ese es el objetivo. El sitio simplemente se siente bien. La gente encuentra lo que necesita, el camino hacia la acción que desea es corto y claro, y se va satisfecha en lugar de frustrada. Esa fluidez invisible es el resultado de una planificación cuidadosa, no de la suerte.

Así que, antes de enamorarte de las fuentes y los colores, tómate un tiempo como arquitecto. Dibuja el edificio, planifica las rutas a través de él y recórrelas como lo harían tus visitantes. Un sitio web construido sobre un mapa del sitio claro y flujos de usuario fluidos no solo tiene buen aspecto, sino que funciona, guiando silenciosamente a cada visitante hacia aquello que más deseas que haga. Si necesitas ayuda para planificar el tuyo, siempre puedes ponerte en contacto.

Preguntas frecuentes

¿Cuál es la diferencia entre un mapa del sitio y un flujo de usuario?+
Un mapa del sitio es el plano: muestra todas tus páginas y cómo están agrupadas, respondiendo "¿qué páginas existen y dónde se encuentran?". Un flujo de usuario se centra en un solo recorrido, el camino paso a paso que sigue un visitante para completar una tarea, como reservar o comprar. El mapa del sitio traza las habitaciones; el flujo de usuario traza la ruta que alguien sigue a través de ellas para lograr algo.
¿Realmente necesito un mapa del sitio para un sitio web pequeño?+
Incluso un sitio de cinco páginas se beneficia de uno. Esbozar la estructura primero, en papel o con notas adhesivas, te ayuda a decidir qué páginas necesitas, cómo agruparlas y qué pertenece al menú antes de gastar dinero en diseño. Lleva minutos y evita el resultado confuso y difícil de navegar que se obtiene al construir página por página sin un plan general.
¿Cuántos clics se necesitan para llegar a una página importante?+
Tan pocos como sea posible, idealmente uno o dos. En lugar de contar los clics rígidamente, busca una estructura poco profunda donde cualquier cosa importante sea fácil de alcanzar y cada clic se sienta útil. Enterrar páginas clave varias capas de profundidad frustra a los visitantes. Mantén tus destinos más valiosos cerca de la superficie, en el menú principal o un paso por debajo de él.
¿Es lo mismo que el mapa del sitio XML que usan los motores de búsqueda?+
No, aunque están relacionados. El mapa del sitio de planificación en esta guía es un diagrama para humanos, una forma de acordar qué páginas existen y cómo están organizadas antes de construir. Un mapa del sitio XML es un archivo técnico que lista tus páginas para que los motores de búsqueda las rastreen. Planificas con el primer tipo, luego tu sitio genera el segundo tipo para los motores de búsqueda automáticamente.

Referencias

  1. Nielsen Norman Group. "Information Architecture and Site Structure." nngroup.com.
  2. Interaction Design Foundation. "User Flows and Information Architecture." interaction-design.org.
  3. Google. "Search Central: Sitemaps." developers.google.com.
Regresar al blog

AUTOMATICE. OPTIMICE. DOMINE.

Optimice sus operaciones y ofrezca una experiencia de cliente fluida. Deje que nuestros expertos implementen tecnología de vanguardia y flujos de trabajo optimizados para que pueda concentrarse en lo que mejor sabe hacer.