¿Necesitas un nuevo sitio web? Curioso cómo el paso de los años afecta a los sitios web de la misma forma que a la ropa, a los peinados, a las películas y mil cosas más, ¿verdad? No queremos que nuestra tienda online se vea antigua, poco usable o que pierda efectividad o capacidad de seducción con el paso del tiempo, y para eso debemos repensarla cada cierto tiempo.

En ese proceso de repensar la web hay dos conceptos que es conveniente tener presente porque nos van a evitar muchos quebraderos de cabeza. Hablamos del wireframing y del prototyping, dos conceptos similares pero distintos que contribuyen a que tu nuevo sitio web sea útil y usable. Ambos te serán útiles en el proceso.

Lo primero es lo primero: definamos estos conceptos, ya que (no eres el único) a veces se confunden. Pero no queremos teorizar mucho, así que lo haremos sencillo con una descripción breve: con los wireframes muestras la disposición y organización de los contenidos de una página, con lo que es una herramienta imprescindible a la hora de plasmar una primera idea de estructura y una jerarquización de contenidos. El objetivo de un wireframe es la validación de la arquitectura de la información y poder plantear cambios en un estado prematuro cuando aún tienen bajo coste.

WireframingAsí, un buen wireframe mostrará, entre otros, y sin necesidad de incluir diseño ni tipografías:

  • Posición del logo
  • Campos de búsqueda
  • Breadcrumbs
  • Headers
  • Menús de navegación
  • Cajas de organización de contenido por tipos
  • Botones sociales y de contacto
  • Footer

 

Como ves, un  montón de información en forma de cajas que facilita enormemente a quien los tenga en sus manos comprender de manera muy visual cuál es la propuesta de organización del sitio web.

El prototyping, clave para valorar la experiencia de uso

Los wireframes te dan una idea muy clara de cuán útil y valiosa puede ser tu web. ¿En qué se diferencia el prototyping? Con el prototyping consigues un prototipo funcional, lo cual indica que puede ser probado, por lo tanto ya entra en juego la experiencia de usuario.

Prototyping

Imagen: swiss-miss.com

Es esa diferencia sustancial entre wireframing y prototyping la que hace que este último sea especialmente aconsejado para tiendas online en general, y para las partes más transaccionales en concreto. Cuanta más interacción con el usuario tenga un sitio web (incluyendo cajas de diálogo, pero no solamente), más necesario se hace el prototyping sin perjuicio del wireframing.

¿En qué otros aspectos (además del diálogo con el sistema durante una transacción o registro) es valioso el prototyping? Por ejemplo, en menús que utilicen la función “on mouse over” para mostrarse o contraerse, menús desplegables, sliders…

Por tanto, ambos conceptos, wireframing y prototyping te aportan perspectivas distintas pero valiosas cuando necesitas replantear un sitio web.

Usa ambos en función de lo que necesites; y aunque siempre se puede llegar a darle al wireframing un toque de experiencia de uso (con el paper prototyping, el que con diferentes papeles simulas las diversas funcionalidades), pero disponer de un prototipo realmente funcional de tu sitio web te será posiblemente más valioso, para hacer tests de usabilidad, por ejemplo.

Si quieres más información sobre cómo concebimos en Smartbrand el diseño y desarrollo web, la innovación en Internet y cómo tenemos un enfoque 360º para que tu negocio maximice el ROI en su apuesta online, no te pierdas lo que dicen nuestros clientes, o contacta y te contamos.