Mapas de sitio y flujos de usuario: planificando cómo se mueven los visitantes
Jazmie JamaludinImagina 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.
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.
| 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?+
¿Realmente necesito un mapa del sitio para un sitio web pequeño?+
¿Cuántos clics se necesitan para llegar a una página importante?+
¿Es lo mismo que el mapa del sitio XML que usan los motores de búsqueda?+
Referencias
- Nielsen Norman Group. "Information Architecture and Site Structure." nngroup.com.
- Interaction Design Foundation. "User Flows and Information Architecture." interaction-design.org.
- Google. "Search Central: Sitemaps." developers.google.com.