Ago 072012
 
wireframe

Una vez que se tiene claro funcionalmente qué queremos que haga nuestra tienda online, la siguiente fase en nuestro proyecto es la de «aterrizar» nuestra voluntad consensuada con el departamento técnico, en un diseño elegante, que convierta, que transmita los valores de nuestra marca, etc.

Pero justo entre medias, y antes de entrar en una fase tan subjetiva y opinable como es el diseño web, hay una especie de «guión visual»: el wireframing, es decir, la plasmación visual, página por página, de la funcionalidad que queremos para nuestra web, pero sin diseño.

Wireframe de una página web (homepage)

Wireframe de una página web (homepage)

Los wireframes son estructuras cuadriculadas (sin diseño, sin curvas, sin imagen) y organizadas, de cada página de nuestra tienda online, con un peso bastante real de lo que ponderará cada zona de la misma. De hecho, entre los wireframes más importantes destacan el de la cabecera (header) y el pie (footer) de nuestro e-commerce, ya que deberán incluir todo lo que se necesita a lo largo de una compra online (el logo de la tienda, el acceso a la zona cliente, el contacta, el quiénes somos, el carro, etc.

Cada oveja con su pareja
Además de los wireframes de encabezado y pie, cada página de nuestro sitio web debe tener su propio wireframe: home, universo, categoría, subcategoría, producto, carro, registro, olvidé mi contraseña, contacto, confirmación de la entrega, confirmación del pedido, contacta, aviso legal, etc.

Muchos de ellos serán bastante parecidos así que bastará con copiarlos y cambiar lo que queramos o reaprovecharlos. Por ejemplo, las páginas estáticas de contenido en texto plano tipo quiénes somos, aviso legal, condiciones de compra, etc. podrán perfectamente utilizar el mismo wireframe, y eso que nos ahorraremos en horas de diseñador y «fee» de la agencia que haga el diseño web.

Cómo se hacen los wireframes
Cualquiera puede hacer sus propios wireframes. Basta con abrir powerpoint y mediante rectángulos ir construyendo la estructura.

Cuando tengamos un wireframe completado, bastará con copiar esa página y sobre la copia, manteniendo los elementos comunes como el encabezado y pie, hacer las modificaciones necesarias para la nueva página.

Consejos a la hora de hacer los wireframes
Aquí algunos consejos:

1.-Empieza por tener perfectamente clara la estructura completa de navegación de tu página web y la relación de páginas estáticas que la compondrán. Aprende cuáles de tus páginas son realmente similares en cuanto a su estructura, de manera que puedan reaprovechar el mismo wireframe.

2.-Fíjate en los líderes online, página a página, y obtén sus wireframes para luego diseñar el tuyo propio, página a página: home, producto, etc.

3.-Ten muy clara cómo será la navegación por el sitio web: por universos horizontales superiores (como por ejemplo Falabella)

Header de Falabella.com

Header de Falabella.com con los universos de producto desplegados de forma horizontal

o mediante un solo botón que permita desplegar todos los departamentos (como Amazon).

Header de Amazon.es

Header de Amazon.es donde hay un solo botón para desplegar todos los departamentos

4.-Ataca lo primero el wireframe del que será tu «header» sin olvidar los enlaces indispensables que deberán acompañar al usuario durante toda la navegación (logo, registro/login, contacto, carro, newsletter, etc.). incluido el acceso a las tiendas físicas si somos una empresa multicanal.

Si en el encabezado has optado por mantener universos horizontales, decide si querrás que estos desplieguen menús hacia abajo con sus categorías, o no, en función de lo que esté aprobado en el documento funcional, al respecto. En caso afirmativo el funcional y el wireframe deberán coincidir.

5.-Ataca después el footer de tu página con los indispensables que habrán de acompañar siempre al usuario esté donde esté: política de privacidad, seguridad, teléfono de contacto, quiénes somos, etc.

Tanto en el encabezado como en el pie de la página y pensando en SEO, es bueno que los enlaces irrelevantes a efectos de SEO (contraseña, newsletter, carro, etc.) contengan una etiqueta «No follow» (<a href=»http://www.loquesea.es» rel=»nofollow»>), ya que al repetirse siempre a lo largo de la navegación, tienen demasiada relevancia para Google y demás buscadores. Con esta etiqueta conseguimos que no se tengan en cuenta a efectos de SEO y repartimos más «link juice» a otros enlaces más relevantes de nuestras páginas (categoría de producto, producto, etc.).

También es interesante que se describan en el footer las categorías de producto de la tienda a modo de «keywords». Por ejemplo, Niumba, una web de alquiler vacacional en varios países de la UE, muestra para una provincia, en el pie de su página, «Alquiler apartamentos [nombre localidad]», que además de ser de utilizad, le ayuda a conseguir relevancia en buscadores para esas keywords.

Footer de Niumba.es

6.-Donde vaya una imagen (logo, imagen de producto, imagen corporativa, etc.), simplemente pon un aspa para que el diseñador entienda que ahí va una imagen, sea cual sea) y donde vaya texto (copy), se suele emplear texto de relleno sin relevancia).

Donde vayan precios prevé precios máximos para ver que quepan (por ejemplo, y aunque sea poco factible: 9.999,99 €, precio anterior tachado, etc.

Es decir, todos los elementos que acompañan a un precio, a un producto, a una descripción del producto.

7.-Recuerda que una misma página puede tener varios wireframes. Por ejemplo, la página de subcategoría (aquella donde se muestra un listado de productos de la misma categoría) puede tener una disposición vertical (un producto por fila) o matricial (tres columnas por fila, etc.). Por tanto, esta página deberá prever tales disposiciones, la opción de la primera a la segunda y a la inversa y aunque compartirán al máximo el wireframe, tendrán variaciones.

8.-No inventes nada ni quieras ser revolucionario con los wireframes. En mi opinión, lo funcional debe primar sobre lo novedoso. Por ejemplo, puedes decidir que el carro de compra aparezca a la izquierda, junto al logotipo de tu tienda, pero la realidad es que los usuarios estamos acostumbrados a verlo en la esquina superior derecha de tu header.

9.-Hay secciones completas del sitio como el «checkout» que requiren un análisis muy profundo si se quiere tener éxito con la conversión de producto añadido a la cesta a pedido web.

10.-No olvides que el wireframe es la traslación visual del documento funcional pero sin diseño, así que revísalos a fondo para no olvidar incluir funcionalidad en tus páginas.

Y por último, no olvides comentar los wireframes para que el diseñador que los transforme en diseño tenga en cuenta tus expectativas.

Be Sociable, Share!

 Deja un comentario

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(requerido)

(requerido)