Embarcarse en un proyecto con una idea vaga de su organización solo complicará el proceso. Una vez que conozcas los objetivos y el alcance, es hora de crear un mapa del sitio y un wireframe. Estos te servirán de guía para la organización de tu sitio web y como esquema preciso para crear el contenido.
Empieza con un mapa del sitio
¿Alguna vez has mirado por la ventanilla de un avión y has visto el trazado de una urbanización nueva formándose allá abajo? Pues un mapa del sitio es algo parecido: una huella que señala dónde deben construirse las estructuras, vista desde las alturas.
Un mapa del sitio ofrece un diagrama de la jerarquía del sitio y muestra dónde encaja cada página en esa estructura.
(Nota: en este artículo hablamos del mapa del sitio como una herramienta de planificación y comunicación, no del archivo XML literal que crearás para ayudar a los motores de búsqueda a rastrear tu sitio, aunque la herramienta de planificación debería definir esencialmente lo que contendrá ese XML).
A medida que construyas tu jerarquía, es vital que consultes continuamente los objetivos de tu proyecto. Esto se debe a que la jerarquía del sitio debe reflejar y contribuir al cumplimiento de esa meta.
Por ejemplo, si estás creando un sitio de comercio electrónico, uno de tus objetivos será sin duda vender productos. Por lo tanto, tu mapa del sitio debe colocar los índices y las páginas de productos en la parte superior de la jerarquía, para que los visitantes vean de inmediato adónde ir para cumplir tu objetivo y el suyo: comprar cosas.
Cómo crear tu mapa del sitio
Puedes abordar el diseño de tu mapa del sitio de varias maneras. Te convendrá elegir el método basándote en dos cualidades:
- Capacidad para capturar la información que necesitas
- Capacidad para transmitir la información que necesitas
En otras palabras, debe ser capaz de transmitir la información que quieres comunicar de una manera clara para tu audiencia.
Por ejemplo, aquí tienes 3 formas comunes de crear un mapa del sitio, junto con la información que cada una transmite mejor:
1. La lista
El formato de lista es una simple enumeración ordenada o desordenada que utiliza niveles para mostrar la jerarquía. Aquí tienes un ejemplo basado en parte del sitio principal de Webflow:
Índice
- Designer
- CMS
- Editor
- Hosting
- Clientes
- Groupon
- New Story
- Possible
- Salt
- Freelancers
Este formato es genial para comunicar los temas de las páginas y su jerarquía relativa. Puedes ver de un vistazo que las páginas de Designer, CMS, Editor, Hosting y Clientes tienen el mismo nivel de importancia, mientras que las historias de clientes específicos aparecen un nivel por debajo.
Lo que no comunica tan bien son las rutas de usuario entre esas páginas. Por ejemplo, no hay ninguna indicación de que Designer, CMS, Editor y Hosting aparezcan bajo un menú desplegable llamado "Funciones" en la navegación principal del sitio, o que cada una de esas páginas tenga un enlace desde la página de inicio.
Esto hace que el formato de lista sea útil para, digamos, un inventario de páginas, pero no es algo que quieras entregarle a un cliente diciéndole: "Así es como la gente navegará por el sitio".
2. Diagrama horizontal
El mapa del sitio de Hillary Pitts (al principio de esta sección) es un diagrama horizontal, probablemente la forma más conocida de mapa del sitio que existe.
Al igual que la lista, captura una visión general del sitio. A diferencia del formato de lista, indica con mayor claridad las rutas entre páginas y experiencias, como se puede ver en el flujo de pago que atraviesa el centro del mapa.
Eso lo convierte en una herramienta mucho mejor para comunicar la jerarquía y cómo navegarán los usuarios a clientes y personas sin perfil técnico. ¡Aunque también funciona de maravilla para los que sí lo tienen!
Vale la pena señalar que, como el sitio de Pitts es una tienda de comercio electrónico, no ofrece un inventario exhaustivo de todas las páginas. Podría haber una o mil páginas de productos; eso no importa para este mapa, ya que las páginas de producto casi con seguridad se gestionarán mediante plantillas dinámicas, y es poco probable que el flujo desde el índice de productos hasta el detalle del producto varíe de uno a otro. Sin embargo, si hay tipos de productos que requieren modelos de contenido distintos, sí convendría indicarlos.
3. Diagrama vertical
El diagrama vertical es básicamente un diagrama horizontal girado de lado. Dado que el flujo de izquierda a derecha sugiere progreso (en las culturas donde la lectura sigue esa dirección), los diagramas verticales son más útiles para mapear una experiencia más acotada, como un flujo de usuario específico o la estructura de un área concreta del sitio.
La sección del flujo de compra del diagrama horizontal de Pitts sería una buena candidata para un diagrama vertical (y, de hecho, en cierto modo es un diagrama vertical incrustado en el horizontal).
¿Tienes problemas con tu mapa del sitio? ¡Prueba con una clasificación de tarjetas!
Si tú y tu cliente han definido claramente los objetivos del proyecto, es muy probable que crear el mapa del sitio sea algo natural. Pero en proyectos más grandes, y en aquellos con contenido detallado, quizás necesites recurrir a una herramienta infalible: la clasificación de tarjetas (card sorting).
Para realizar una clasificación de tarjetas, solo tienes que reunirte con tu cliente y cualquier otra parte interesada (ya sea en persona o digitalmente). Luego, escribe los nombres de todas tus páginas en tarjetas y clasifíquenlas juntos en categorías que tengan sentido para todos. Una vez hecho esto, crea un mapa del sitio basado en las tarjetas clasificadas y (idealmente) compártelo con algunos miembros de tu público objetivo para asegurarte de que también les resulte lógico.
Una vez que hayas definido el mapa del sitio, puedes ponerte manos a la obra con los wireframes, donde este esquema se vuelve mucho más específico y detallado.
Herramientas para mapas del sitio
Cualquier herramienta de diseño que cuente con cuadros, flechas y funciones de edición de texto puede ayudarte a realizar el trabajo de mapas mentales. Pero ayuda (y mucho) usar una herramienta que ya tenga esos cuadros y flechas como elementos predefinidos (a menudo llamados plantillas o stencils).
Aquí tienes algunas herramientas que ya vienen con elementos para mapas del sitio precargados:
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
Por qué necesitas crear wireframes
Si un mapa del sitio proporciona el plano de todo tu sitio web, un wireframe representa el plano de una sola página (o grupo de páginas). Es lo que verías si pudieras tomar tu mapa del sitio, acercarte y mejorar una sola página de ese mapa general.
Al igual que el mapa del sitio, un wireframe captura la jerarquía. Pero esta vez, esa jerarquía se limita a una sola página y, por lo tanto, define la importancia relativa del contenido a medida que fluye hacia abajo.
Al igual que los prototipos, los wireframes pueden tener distintos niveles de fidelidad. Algunos wireframes básicamente son el diseño final, con sus fuentes, tamaños, fotos de muestra e incluso textos listos para producción. Otros son mucho más esquemáticos y se limitan a una colección de cuadros y formas monocromáticas donde algún día aparecerá el contenido.
Debido a esa amplia gama de fidelidades, es importante explicar claramente a tus partes interesadas qué tan definitivo es realmente tu wireframe.
Tómate un momento para revisar este wireframe desde la perspectiva del contenido. ¡En realidad tiene muchas implicaciones que deberán convertirse en estándares de contenido o revisarse teniendo en cuenta dichos estándares!
Por ejemplo:
- El tamaño grande de la tipografía de los titulares implica que los artículos no podrán tener más de 6 o 7 palabras
- Los avances de los artículos pueden ser comparativamente largos, lo que podría ayudar a mitigar el límite anterior
- Cada artículo deberá destacar una imagen
- Los titulares del carrusel deberán ser extremadamente cortos debido al tamaño de la fuente
- Hay un "selector de país" en la parte superior derecha, lo que podría implicar la necesidad de traducir el contenido del sitio. Eso puede tener un impacto significativo en el diseño, ya que un título de 6 o 7 palabras en alemán probablemente sea mucho más largo que uno escrito en inglés.
Y eso es solo para empezar.
Lecturas relacionadas: Las 10 mejores herramientas de wireframing para diseñadores
Dale a las partes interesadas justo lo necesario para que capten la idea
No confundas un wireframe con un prototipo. Los wireframes ofrecen una representación esquemática, (por lo general) sin gráficos ni contenido, mostrando la estructura básica. Los prototipos, por otro lado, deberían presentar una versión funcional del sitio final (aunque el nivel de fidelidad puede variar mucho, de nuevo).
Los wireframes permiten a las partes interesadas ver cómo fluirán y funcionarán las páginas individuales de un sitio web. Y como nada en un wireframe está escrito en código, tienen la libertad de pedir cambios drásticos antes incluso de que empieces a diseñar.
Los wireframes comunican la estructura de un sitio web de una forma visual que todos pueden entender. Algo como un cambio de estado puede ser complejo de explicar a alguien que no sabe de diseño, pero un wireframe puede aclararlo con un par de imágenes sencillas.
Una cosa que debe quedar clara antes de mostrar tus wireframes a nadie es qué representan exactamente.
Debería ser obvio para cualquier espectador que estos wireframes no representan cómo se verá y funcionará el producto final. Mantén las cosas simples y claras para que todos puedan visualizar lo que implicará el proyecto. Unas formas sencillas en escala de grises deberían bastar.
Ante la duda, añade anotaciones
Como tu wireframe es un esquema de una página web, probablemente querrás incluir notas o anotaciones adicionales que aporten claridad a la experiencia.
Mira los wireframes de abajo. Como diseñador, sin duda reconociste al instante el círculo gris y las cuatro rayas como un logotipo y enlaces de navegación. ¡Pero la mayoría de los clientes no sabrían qué están viendo sin la etiqueta de "Navegación"!
Personalmente, me gusta etiquetar las secciones del wireframe dentro del propio wireframe, siempre que pueda encontrar un nombre claro y sencillo. He visto a demasiadas partes interesadas malinterpretar el propósito de una sección y dejar que ese malentendido sesgue sus comentarios, como para escatimar en esta sencilla adición.
Los mapas del sitio y los wireframes te ayudan a avanzar con el contenido
¿Qué fue antes: el huevo o la gallina? A quién le importa; lo que cuenta es la yema. El diseño es como la cáscara que mantiene unido el contenido.
Por muy bien que se vea un diseño, no compensará el hecho de que su contenido pueda estar podrido.
¿Cómo ayudan los wireframes? Mostrándonos qué contenido necesitamos y cuánto espacio dedicar, aproximadamente, a cada sección. Por tanto, los wireframes deben fluir directamente de la estrategia de contenidos de tu sitio, mostrando la jerarquía de la información en cada página y cómo encaja cada una en la estrategia general. Cuando los redactores trabajan a partir de un mapa así, alcanzar sus objetivos resulta mucho más sencillo.
Eso no significa que debas empezar por la página de inicio. De hecho, muchos creen que la página de inicio debería ser lo último que crees.
Entonces, ¿por dónde empezar? Por el contenido que más importa, es decir, el que más contribuye a los objetivos principales de tu proyecto.
¿Este sitio web pretende aumentar las ventas online? Entonces tendrás que asegurarte de que cada producto tenga una descripción bien redactada y acorde a la marca, además de todas las especificaciones que un posible comprador querría conocer. ¡Esto ayuda mucho a estructurar los campos del CMS que necesitarás para tu colección de productos!
¿Tu sitio forma parte de un cambio de imagen más amplio? Asegúrate de saber cómo encaja tu proyecto en ese cambio y de tener todos los recursos necesarios para comunicar esta nueva identidad de marca.
No tienes que escribir todo el contenido de una vez. En su lugar, céntrate en que tu interfaz sea comprensible a simple vista, aunque solo sea en términos de qué irá en cada sitio.
Por ejemplo, puedes poner solo unos cuantos titulares para orientar a la gente sobre el contenido de la página y rellenar el resto con fuentes de marcador de posición como BLOKK o la tipografía Flow. Asegúrate de que cada sección esté etiquetada para indicar dónde irá el contenido, de modo que el cliente no se distraiga con el texto de relleno.
El contenido da forma al diseño
El contenido abarca todo lo sustancial de un sitio web. Ya sea un vídeo que explica un producto, animaciones que muestran cómo funciona una aplicación o la página "sobre nosotros" de una organización sin ánimo de lucro, cada elemento está ahí para comunicar un mensaje o contar una historia. No necesitas tener todo este contenido a mano antes de hacer el diseño, pero sin duda ayuda.
Ya hemos hablado de cómo un wireframe puede dar forma al contenido. Pero esto también funciona a la inversa. Una vez más, no hace falta tener todo el contenido terminado, pero si tienes un esquema de todo lo que quieres incluir, puedes crear un mapa del sitio y un wireframe basados en él.
Incluso conocer los tipos de contenido que requerirá el sitio web te ayudará a elaborar un mapa del sitio y un wireframe. Este contenido no tiene que estar desarrollado, pero saber que debe haber un blog, una página de contacto para clientes que busquen presupuestos y una página sobre la historia de la empresa te ayudará a determinar cómo debe estructurarse todo. Un mapa del sitio desglosa un sitio web en sus componentes más básicos y un wireframe detalla lo que contendrá cada página.
Pero si ya tienes el contenido desarrollado, incorpóralo a tus wireframes para ver cómo encaja. Si el contenido disponible supera el espacio dedicado, es posible que necesites dividirlo aún más. Entonces podrás añadir esta página adicional al wireframe y ajustar la organización del contenido. Esto es mucho más fácil para un diseñador que hacerlo a posteriori.
Conoce tu SEO
La optimización para motores de búsqueda no debería ser una ocurrencia tardía. Así que, antes de sentarte a empezar con el mapa del sitio y los wireframes, ármate con una lista de las palabras clave a las que el cliente quiere dirigirse y da forma a la estructura y organización del sitio web y su contenido en consecuencia.
La fase de wireframing puede ser un gran punto de partida para tu trabajo de SEO, ya que puedes hacerlo sin las distracciones que conlleva un contenido totalmente desarrollado. Sin todas esas palabras en la página, puedes centrarte en elementos clave de SEO como titulares, metaetiquetas y elementos de navegación. Estos wireframes optimizados para SEO pueden servir como un excelente esquema para los creadores del contenido final.
Cuando haces el trabajo de antemano, el proceso se vuelve más sencillo
Un mapa del sitio y unos wireframes sientan las bases sobre las que construir un sitio web. Cuando te has preparado y has reflexionado sobre los objetivos del sitio, la arquitectura y la experiencia de usuario, el proceso se vuelve mucho más intencionado. Cuando el camino hacia el éxito está libre de obstáculos, el viaje es mucho más rápido.
