El proceso de diseño web moderno: creación del mapa del sitio y wireframes

Emprender un proyecto con sólo una vaga idea de su organización sólo complicará el proceso. Una vez que conozcas los objetivos y el alcance del proyecto, es el momento de crear un mapa del sitio y un wireframes. Éstos le darán una guía para la organización de su sitio web y un esquema específico para la creación de contenidos.

Comience con un mapa del sitio

El ejemplo de mapa de sitio de diseño web de Hillary Pitts divide un sitio de comercio electrónico en sus bloques de construcción más básicos.

¿Ha mirado alguna vez por la ventanilla de un avión y ha visto la silueta de una nueva urbanización tomando forma? Es algo así como un mapa del sitio: una huella que señala dónde deben construirse las estructuras, vista desde 30.000 pies.

Un mapa del sitio proporciona un diagrama de la jerarquía del sitio y muestra dónde encaja cada página en esta jerarquía.

(Nota: en este post, estamos hablando del mapa del sitio como una herramienta de planificación y comunicación del sitio web, no el mapa del sitio XML literal que creará para ayudar a las arañas de los motores de búsqueda a rastrear su sitio – aunque la herramienta de planificación debería definir esencialmente lo que contendrá ese mapa del sitio XML).

A medida que vaya construyendo su jerarquía, es vital que haga referencia continuamente a los objetivos de su proyecto. Esto se debe a que la jerarquía del sitio debe reflejar y contribuir al cumplimiento de ese objetivo.

Por ejemplo, si está construyendo un sitio de comercio electrónico, uno de sus objetivos será sin duda vender productos. Por lo tanto, su mapa del sitio debe colocar los índices y las páginas de los productos en la parte superior de la jerarquía, o cerca de ella, para que los visitantes puedan ver inmediatamente dónde tienen que ir para cumplir su objetivo y el de ellos: comprar cosas.

Creación del mapa del sitio

Puede abordar el diseño de su mapa del sitio de varias maneras. Querrá elegir su método basándose en dos cualidades:

  1. Capacidad de captar la información que necesita captar
  2. Capacidad de transmitir la información que necesita transmitir

En otras palabras, tiene que ser capaz de transmitir la información que quieres mostrar de una manera que sea clara para tu audiencia.

Por ejemplo, aquí hay 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 lista ordenada o desordenada que utiliza el anidamiento para transmitir la jerarquía. He aquí un ejemplo:

Index

  • Deigner
  • CMS
  • Editor
  • Hosting
    • Customers
    • Groupon
    • New Story
    • Possible
    • Salt
    • Freelancers

Esto es genial para comunicar los temas de las páginas y la jerarquía relativa. Se puede ver inmediatamente que las páginas para el Diseñador, CMS, Editor, Alojamiento y Clientes reciben el mismo nivel de prominencia, con historias específicas de clientes que vienen en un nivel inferior.

Lo que no es tan bueno para comunicar son las rutas de los usuarios entre esas páginas. No hay ninguna indicación, por ejemplo, de que el Diseñador, el CMS, el Editor y el Alojamiento aparezcan en un menú desplegable llamado Características en la navegación principal del sitio. O que cada una de esas páginas esté vinculada a la página principal del sitio.

Eso hace que un formato de lista sea práctico para, por ejemplo, un inventario de páginas, pero no querrías entregárselo a un cliente y decirle: “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, capta una visión de alto nivel del sitio. A diferencia del formato de lista, indica más claramente las rutas entre páginas/experiencias, como se puede ver en el flujo de compra que atraviesa el centro del mapa.

Esto hace que sea una herramienta mucho mejor para comunicar la jerarquía y la forma de navegar por el sitio a los clientes y otras personas no técnicas. Aunque también funciona muy bien para los técnicos.

Vale la pena señalar que, como el sitio de Pitts es una tienda de comercio electrónico, no proporciona un inventario completo de las páginas del sitio. Puede haber una o mil páginas de productos diferentes; no importa para este mapa, ya que las páginas de productos se gestionarán casi con toda seguridad mediante plantillas dinámicas, y es poco probable que el flujo desde el índice del producto hasta el detalle del mismo varíe de un producto a otro. Sin embargo, si hay tipos de productos que requieren modelos de contenido distintos, querrás anotarlos.

3. Diagrama vertical

El diagrama vertical es básicamente un diagrama horizontal volcado sobre su lado. Dado que el flujo de izquierda a derecha connota progreso (en culturas en las que la lectura fluye de izquierda a derecha), los diagramas verticales son más útiles para mapear una experiencia más contenida, como un flujo de usuario específico, o la estructura de un área más específica del sitio.

La sección de flujo de compra del diagrama horizontal de Pitts sería un buen candidato para un diagrama vertical (y, de hecho, es una especie de diagrama vertical, incrustado en el horizontal).

¿Tiene problemas con su mapa del sitio? Pruebe con una clasificación por tarjetas.

Si usted y su cliente han definido claramente los objetivos de su proyecto, es muy probable que la elaboración del mapa del sitio resulte bastante natural. Pero en los proyectos más grandes y con contenido detallado, es posible que tengas que recurrir a una herramienta probada: la clasificación por tarjetas.

Para llevar a cabo una clasificación por tarjetas, basta con que te reúnas con tu cliente y cualquier otra persona interesada (en persona o digitalmente). A continuación, escribe todos los nombres de las páginas en fichas y clasifícalos en colaboración en categorías que tengan sentido para todos. Una vez hecho esto, cree un mapa del sitio basado en las tarjetas clasificadas y (idealmente) páselo por algunos miembros de su público objetivo para asegurarse de que también tiene sentido para ellos.

Una vez que haya definido el mapa del sitio, podrá profundizar en sus esquemas, que serán mucho más específicos y detallados.

Herramientas de mapa del sitio

Cualquier herramienta de diseño que cuente con recuadros, flechas y funciones de edición de texto puede ayudarle a realizar el trabajo de mapeo mental. Pero ayuda (y mucho) utilizar una herramienta que tenga esas cajas y flechas como elementos preexistentes (a menudo llamados plantillas).

He aquí algunas herramientas que vienen con elementos de mapa de sitio precargados:

Por qué hay que hacer un wireframe

Si un mapa del sitio proporciona el plano de todo su sitio web, un esquema 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, y luego ampliar y mejorar una sola página en ese mapa de alto nivel.

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 por la página.

Al igual que los prototipos, los wireframes pueden tener distintos niveles de fidelidad. Algunos wireframes son básicamente el diseño final, con las fuentes y el tamaño definitivos, fotos de muestra e incluso textos listos para la producción. Otros son mucho más esquemáticos y se limitan a una colección de cajas y manchas monocromáticas donde algún día aparecerá el contenido.

Debido a esta amplia gama de fidelidades, es importante explicar claramente a las partes interesadas hasta qué punto el esquema es definitivo.

Derek Clark creó este wireframe, que muestra sólo los elementos básicos de un diseño de página, pero aún así comunica mucho de cómo el diseño final se verá y funcionará.

Tómese un momento para revisar este esquema desde la perspectiva del contenido. En realidad, tiene muchas implicaciones que deberán convertirse en normas de contenido, o revisarse teniendo en cuenta las normas de contenido.

Por ejemplo:

  • El tipo de titular grande significa que los artículos no podrán tener más de 6 o 7 palabras
  • Los teasers de los artículos pueden ser comparativamente largos, lo que podría ayudar a mitigar el límite anterior
  • Cada artículo tendrá que destacar una imagen
  • Los titulares de los sliders tendrán que ser extremadamente cortos debido al tamaño de la letra
  • En la parte superior derecha hay un “conmutador de países”, lo que podría implicar la necesidad de traducir el contenido del sitio. Esto puede tener un impacto significativo en el diseño, ya que un título de 6 o 7 palabras en alemán es probablemente mucho más largo que uno escrito en inglés.

Y eso es sólo para empezar.

Dar a los interesados lo justo para que se hagan una idea

Los sencillos wireframes dibujados a mano por Virgil Pana captan la esencia del diseño final.
Los sencillos wireframes dibujados a mano por Virgil Pana captan la esencia del diseño final.

No hay que confundir un wireframe con un prototipo. Los wireframes ofrecen una representación esquemática, sin gráficos ni contenido (normalmente), que muestra la estructura básica. Los prototipos, en cambio, deben presentar una versión funcional del sitio final (aunque el nivel de fidelidad puede, de nuevo, variar mucho).

Los wireframes permiten a los interesados ver cómo fluyen y funcionan las páginas individuales de un sitio web. Y como nada de lo que aparece en un wireframe se ha plasmado en el código, las partes interesadas tienen la libertad de solicitar cambios drásticos antes de que se empiece 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 describir para alguien que no esté familiarizado con el diseño, pero un wireframe puede aclararlo con un simple visual o dos.

Una cosa que debe quedar clara antes de mostrar a alguien sus wireframes es lo que representan exactamente.

Debería ser obvio para cualquier espectador que estos wireframes no representan el aspecto y el funcionamiento del producto final. Mantén las cosas sencillas y claras para que todo el mundo pueda visualizar lo que va a suponer el proyecto. Unas simples formas en escala de grises son suficientes.

En caso de duda, anotaciones

Dado que su esquema es un esquema de una página web, probablemente querrá incluir cualquier nota o anotación adicional que pueda aportar claridad a la experiencia.

Fíjate en los siguientes wireframes. Como diseñador, sin duda has reconocido inmediatamente el círculo gris y los cuatro guiones como logotipo y enlaces de navegación. Pero la mayoría de los clientes no sabrían lo que están viendo sin la llamada “Navegación”.

Un GIF animado que recopila algunos wireframes creados por Chris Bannister.

Personalmente, me gusta etiquetar las secciones del wireframe, siempre y cuando se me ocurra un nombre claro y sencillo. He visto a demasiados interesados malinterpretar el propósito de una sección, y hacer que ese malentendido distorsione sus comentarios, como para escatimar esta simple adición.

Los mapas del sitio y los esquemas de programación te ayudan a tener una ventaja sobre el contenido

¿Qué fue primero: el huevo o la gallina? Qué más da, lo que importa es la yema. El diseño es como la cáscara que sostiene el contenido.

Por muy bueno que sea un diseño, no compensará el hecho de que su contenido esté podrido.

¿Cómo ayudan los wireframes? Mostrando el contenido que necesitamos y el espacio que debemos dedicar a cada sección. Por tanto, los esquemas deben derivarse directamente de la estrategia de contenidos del sitio, mostrando la jerarquía de contenidos de cada página y cómo encaja cada una de ellas en la estrategia general. Cuando los redactores trabajan a partir de este mapa, alcanzar sus objetivos es mucho más fácil.

Esto no quiere decir que haya que empezar por la página de inicio. De hecho, muchos creen que la página de inicio debería ser lo último que se crea.

Entonces, ¿por dónde empezar? Con el contenido que más importa, es decir, el que más contribuye a los objetivos principales de su proyecto.

¿Espera este sitio web impulsar las ventas en línea? Entonces tendrá que asegurarse de que cada producto tenga una descripción bien redactada y acorde con la marca, además de todas las especificaciones que un comprador potencial querría conocer. Lo cual contribuye en gran medida a estructurar los campos del CMS que necesitará para su colección de productos.

¿Su sitio forma parte de un cambio de marca mayor? Asegúrese de saber cómo encaja su proyecto en el rebranding, y de que tiene todos los activos que necesita para comunicar esta nueva identidad de la empresa.

No tiene que hacer toda la redacción a la vez. En lugar de eso, céntrate en asegurarte de que tu interfaz de usuario es comprensible de un vistazo, aunque sólo sea en términos de lo que irá allí.

Por ejemplo, puedes tener sólo unos pocos titulares para orientar a la gente hacia el contenido de la página, y luego rellenar el resto con fuentes de marcador de posición como BLOKK o Flow typeface. Asegúrate de que cada sección esté etiquetada para mostrar dónde irá el contenido, de modo que el cliente no se distraiga con el contenido de relleno. 

El contenido da forma al diseño

El contenido influye en el aspecto y la navegación de una página. Imagen del usuario de Flickr PerzonSEO.

El contenido engloba todo lo que tiene sustancia en un sitio web. Ya sea un vídeo explicativo de un producto, animaciones que muestren el funcionamiento de una aplicación o la página sobre una organización sin ánimo de lucro, cada elemento está ahí para comunicar un mensaje o contar una historia. No es necesario tener todo este contenido a mano antes de realizar el diseño, pero sin duda ayuda.

Ya hemos hablado de cómo un wireframe puede dar forma al contenido. Pero esto también puede funcionar en la otra dirección. Una vez más, no tienes que tener todo este contenido terminado. Pero si tienes un esquema de todo lo que quieres incluir, puedes crear un mapa del sitio y un esquema basado en ese esquema.

Incluso conocer los tipos de contenido que requerirá el sitio web le ayudará a elaborar un mapa del sitio y un esquema. Este contenido no tiene que ser detallado, pero saber que debe haber un blog, una página de contacto para los clientes que buscan presupuestos y una página sobre la historia de la empresa le ayudará a saber cómo debe estructurarse todo. Un mapa del sitio desglosa un sitio web en sus componentes más básicos, mientras que un esquema de diseño ofrece más detalles sobre el contenido de cada página.

Pero si ya tiene un contenido completo, introdúzcalo en sus esquemas para ver cómo encaja. Si el contenido que tiene a mano excede el espacio dedicado, puede que tenga que dividirlo más. A continuación, puede 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.

Conozca su SEO

La optimización de los motores de búsqueda no debería ser una idea tardía. Por eso, antes de sentarse a hacer el mapa del sitio y el esquema, hay que tener una lista de las palabras clave que el cliente quiere buscar, y dar forma a la estructura y organización del sitio web y su contenido en consecuencia.

La etapa de wireframing puede ser un gran lugar para comenzar su trabajo de SEO porque puede hacerlo sin todas las distracciones que vienen de un contenido completamente desarrollado. Sin todas esas palabras en la página, puede centrarse en los elementos clave de SEO como los titulares, las etiquetas meta y los elementos de navegación. Estos wireframes con SEO pueden servir como un gran esquema para los creadores del contenido final.

Cuando se hace el trabajo de antemano, el proceso es más fácil

El mapa del sitio y los esquemas de navegación sientan las bases para construir un sitio web. Cuando se ha preparado y reflexionado sobre los objetivos del sitio, la arquitectura y la experiencia del usuario, el proceso se orienta hacia un objetivo. Cuando el camino hacia el éxito se ha despejado de obstáculos, el viaje es más rápido.