Como diseñar una web ANTES de tocar una línea de código

Cuando se trabaja con una empresa mediana o grande haciendo un nuevo sitio web, suelen tener las cosas bastante claras: ya han gestionado una web (o varias) anteriormente, saben lo que quieren con bastante grado de detalle.

Pero en empresas pequeñas, incluso aunque hayan tenido otros sitios web, a menudo no tienen la menor idea del trabajo de organización previo que hay que hacer. Un sitio web es donde un usuario entra para informarse respecto a algo (y a veces otras operaciones como reservar, comprar, etc), por lo que organizar esta información de acuerdo a las necesidades del visitante es crítico para que el sitio web cumpla su función.

El diseño minimalista actual

Visita Rumanía visto desde tabletEl diseño web de hoy en día es tremendamente funcional: No hace tanto (cuando la tecnología Flash lo petaba e internet en el móvil no existía) el diseño web lo que buscaba era el efecto WOW (dejarte con la boca abierta con sus efectos especiales, como una película de ciencia ficción). Hoy día, sabemos que satisfacer las necesidades informativas es más importante.

¿Qué nos ha pasado? ¿Acaso los diseñadores ya no queremos ser originales y preferimos sacar sitios web en serie, todos iguales para trabajar menos?

No. Lo que hacemos, es responder a las demandas de los usuarios. Porque no quieren tener que aprender una interfaz nueva cada vez que visitan un sitio web. El “efecto WOW” ni les atrae ni les importa: buscan una información, y si no la encuentran rápidamente, se irán a otro sitio. Para efecto wow ya tienen publicidad a raudales todos los días. O como diría Steve Krug (uno de los autores más influyentes del mundo en el área de la usabilidad) “no me hagas pensar”.

Pero ¿realmente somos tan vagos? ¿De verdad no queremos pensar? No es así. Lo que ocurre es que antes de llegar a un sitio web ya estábamos pensando. Nuestra mente es como una película que nunca para: siempre estamos pensando algo. Nuestros propios asuntos nos consumen, y dedicamos a lo demás el tiempo y atención justa. Y nos resulta molesto tener que hacer el esfuerzo cognitivo de aprender un nuevo sitio web, bastante tenemos ya con lo nuestro. De ahí viene la estandarización actual.

Dejando claro que el continente (el sitio web) es infinitamente menos importante que el contenido, centrémonos en lo importante: Cómo organizar el contenido de nuestra web para que cumpla su propósito, sin proporcionar un dolor de cabeza al usuario.

Primero, el índice

¿Cuántas páginas va a tener tu nuevo sitio web? Si no eres capaz de responder esta pregunta sin pensar, necesitas un índice. Este es el primer paso para organizar la información de la web: enumerar todas las páginas que se necesitan. Es posible que tengas dudas, quizá no tienes claro si un proceso (el de pago, por ejemplo) tiene varias páginas o una sólo. Da igual, estamos empezando a definir. Con añadir una página “de pago” es suficiente. Ahora no necesitas todo el detalle, estamos viendo el bosque antes de fijarnos en los árboles.

¿Cómo se hace este índice?

Lo habitual es crear una lista. Si además puedes empezar a categorizar, perfecto. Aunque aún no estén definidos los contenidos, seguro que sabes de qué tiene que hablar la web. Así que crearemos las secciones necesarias. A esto se le llama árbol del contenidos.

A veces la mejor explicación es un buen ejemplo, así que aquí va uno:

Índice webComo ves, no tiene mayor dificultad. Se trata de una enumeración. En este caso ya hemos categorizado un poco: la sección de noticias tiene algunas subsecciones, y los productos están divididos en tres categorías.

¿Qué es lo siguiente? Antes de pasar a la siguiente fase, tenemos que validar este esquema. ¿Cómo lo haremos? Se trata de lograr que lo vean y opinen los diferentes stakeholders (colaboradores, socios, clientes, etc). ¿Está todo lo que se necesita? La mayoría de empresas no incluyen un dossier con información para prensa. Aquí lo hemos incluido, pero si se nos hubiera pasado por alto quizá alguien de marketing nos lo recordaría.

Tampoco se han incluido las páginas de texto legal en este esquema. Nuestro asesor o abogado seguro que nos lo recordará. Y si nos dejamos atrás alguna información crítica para los clientes, serán ellos quienes localicen este fallo.

Pero ¿debemos dejar que participen nuestros clientes del proceso de creación de nuestra web? Sin duda, es lo mejor que podríamos hacer. Todos los días salen nuevos sitios web, que cambiemos el nuestro no tiene por qué ilusionar a nuestros clientes. Pero que los hagamos partícipes del proceso quizá si, y la información que nos pueden dar es muy importante. Porque la web de nuestra empresa no es para nosotros, es para ellos.

El mapa del tesoro

Como en cualquier buen libro, ya tenemos el índice. Pero una web no se lee de forma lineal como un libro. Podemos saltar de una sección a otra sin seguir un orden establecido, así que necesitamos saber cómo vamos a ordenar estas páginas. Necesitamos un mapa.

Mapa web

Lo que hemos hecho es dar un espacio a cada página y establecer las relaciones entre ellas. Un usuario puede llegar directo a una página de producto buscando desde Google, pero también necesitan encontrarla fácilmente desde cualquier parte de la web. Vemos que desde la home podemos acceder a una página de productos, que tiene tres categorías, y dentro de cada una están los productos.

Este mapa nos ayudará a establecer la navegación, y los distintos “niveles de profudidad” del sitio web. Además, al tener el mapa, podemos ver fácilmente los tipos de página diferentes que necesitamos:

Las fichas de producto deben ser parecidas.- Deben tener el mismo esquema de página. No podemos utilizar una organización de contenidos diferente para cada producto, ya que aumentamos el esfuerzo necesario para entender y comparar.

Las páginas de categoría de producto, exactamente igual.- deben ser parecidas para que cada categoría se entienda y facilitemos al usuario encontrar lo que busca.

Las páginas informativas pueden ser algo diferentes (no vamos a poner lo mismo en “quienes somos” que en el blog) pero tendrán una serie de características comunes: la cabecera será parecida, seguramente habrá un menú principal que se repita en todas las páginas, etc. Así que tras este paso, toca crear el “mapa” de cada página, o de cada tipo de página. Así, crearemos un esquema que sirva para todas las fichas de producto, otro para las categorías de producto, otro para los artículos del blog, etc.

Ni que decir tiene que tras esta fase hay que volver a validar: Necesitamos la opinión de terceros, que cuestionen nuestras ideas y nos señalen los puntos débiles de nuestro diseño. ¿Por qué hacerlo ahora? Porque si esperamos a tener la web publicada, nos tomará más tiempo y será más caro.

Mapas de página o wireframes

En este punto, estamos descendiendo en altura: Ya no queremos ver el bosque en su totalidad, vamos a observar cada árbol por separado (quizá sea más acertado decir cada especie de árbol). Los wireframes (esquemas de página) nos permitirán tener una idea bastante aproximada de cómo se organiza cada página, y nos ayudarán a determinar los textos que deben ir en cada sitio.

Aquí no estamos trabajando sobre el diseño gráfico: No importan aún los colores, las fotos, ni los efectos especiales. Estamos diseñando, sí, pero no es diseño gráfico. Aún estamos organizando la información. Así que aún no necesitamos ordenador, podemos seguir sobre lápiz y papel. Porque si hay que hacer cambios, posiblemente sea la forma más barata y rápida.

Permíteme una excepción: Si trabajamos en un proyecto grande, con muchas pantallas, sobre las que va a opinar mucha gente, tiene todo el sentido que estos esquemas se hagan en ordenador: hacer cambios será más rápido. Así que haz caso a tu sentido común, para eso está ;)

Como siempre, mejor con un ejemplo:

wireframes

Aquí podemos ver un ejemplo de wireframes sencillos, para las página de categoría de “productos” (donde se ven las tres categorías, con unos botones para entrar a cada una de ellas) y una ficha de producto (todas deberían seguir el mismo esquema).

Esto ya nos permite hacernos una idea de los textos que debemos crear. En la primera página necesitamos un texto de introducción que nos explique por qué la división por categorías, y también un breve texto explicando cada categoría (para poner debajo de su icono).

En las fichas de producto, debemos determinar un texto para cada uno, y otro relativo al transporte, que probablemente será el mismo en todos los casos. También fotos de producto, y revisiones de usuarios. Si no las tenemos, hay que decidir cómo vamos a incentivar para tenerlas lo antes posible (por ejemplo, un descuento en la próxima compra).

Y por si queda alguna duda, aquí también hay que validar ;)

En definitiva

Hemos visto en tres esquemas, como pasamos de lo general a lo particular para definir los contenidos de nuestra web. Realizar este proceso nos ayuda a aclarar nuestros mensajes, y a crear una organización del sitio web que los usuarios puedan entender fácilmente.

Este trabajo puede llevarlo a cabo un diseñador, pero necesita también del conocimiento de la empresa. Además, supone un ahorro de costes, ya que tener este esquema definido nos permite:

  • Tener los textos antes de comenzar a maquetar (evitamos maquetar dos veces por usar texto ficticio o no definitivo).
  • Acotar el proyecto fácilmente (sabemos exactamente cuántas páginas hay que hacer).
  • Validar nuestro proyecto (otras personas lo han visto antes de que esté acabado, y hacer cambios en estas fases es más rápido y económico).
  • Diseñar para nuestros usuarios en vez de para nosotros (aumentando las probabilidades de éxito del proyecto).
  • Todo esto supone un ahorro de costes en el desarrollo del sitio web.

Nada de esto garantiza el éxito. Tan importante como el diseño, es el marketing y la promoción posterior. Pero hay algo que si puedo garantizar: Trabajar de esta forma reduce costes y resulta en un mejor producto final.

Pero un proyecto web no acaba cuando se publica, ahí es cuando empieza realmente. Lo que toca es promocionar, dar contenido de valor que atraiga a nuestros clientes, y seguir midiendo. Siempre se puede seguir mejorando, y más cuando empezamos a tener datos reales.