Como crear wireframes modernos como experto en usabilidad?

Pero, antes de empezar, que son los wireframes?

Un wireframe representa la base para el diseño de cualquier interfaz de usuario, no solamente para el desarrollo web, de manera similar, para la creación de interfaces para aplicaciones móviles u otros tipos de aplicación que requiera una maquetación visual.

El wireframe no es el aspecto definitivo de la capa visual, es una representación de las funciones y los elementos que compondrán la interfaz de usuario UI que van de la mano con las técnicas de desarrollo de experiencia de usuario UX.

Que diferencia existe entre el prototipado y los wifeframes?

Entre las diferencias a destacar podemos decir que el wireframe se enfoca solo en la acomodación de los elementos, cajas, botones, cuadros de texto, imágenes, y las diferentes paginas que compondrán las capas del proyecto.

Por otro lado, el prototipado representa una vista más aproximada al producto final, nos permite incluso realizar test para evaluar el rendimiento del producto, algunos de los tipos de prototipado a destacar durante el diseño de la interfaz son los de baja fidelidad y los de alta fidelidad por mencionar algunos.

Un ejemplo sencillo seria la ubicación de un botón de compras en una tienda online, no tendría sentido que el usuario se tenga que desplazar a través de la pagina para llegar al botón de “comprar”, con ayuda del wireframe el diseñador determina que área de la interfaz permitiría al usuario ver el botón de comprar con facilidad sin que este afecte la estética y cause una “saturación visual”.

Poder entender el comportamiento del usuario nos ayudara a mejorar la conversión al posicionar los elementos de la interfaz en la mejor posición posible.

Quienes pueden desarrollar un wireframe?

A pesar de que los diseñadores, gerentes de producto y desarrolladores son quienes en la mayoría de los casos los utilizan, no son los únicos que pueden beneficiarse de los wireframes.

También los diseñadores gráficos, diseñadores de experiencia de usuario, programadores, analistas de negocios, gerentes de producto, arquitectos de información, y diseñadores de interacción pueden utilizarlos.

Que características pueden tener los wireframes?

Aunque mencionamos al inicio que los wireframes sirven para representar la ubicación de los elementos este no es su único propósito, existen otras características que podremos aprovechar de su utilidad, entre ellas están:

• Nos permite ver un esquema de la interfaz web o app a desarrollar.
• Permite analizar su funcionalidad
• Nos muestra como organizar la información
• Ayuda a decidir que contenido o elementos puede tener
• Ayuda a optimizar la interfaz para una mejor experiencia de usuario
• Nos da una visión general del producto a desarrollar con una mínima inversión

Los desarrolladores de UX y los diseñadores gráficos, consideran implementar los wireframes cuando desean crear prototipos, modelos o una interfaz nueva de usuario. Otra razón para usarlos es la posibilidad de poder simular el flujo de los usuarios. Ellos crean los wireframes después de desarrollar una “Persona” o un user journey y un mapa de sitio con el cual poder trabajar.

El diseñador decide qué elemento se colocará en cada lugar y como los usuarios navegaran a través de la vista. En otras palabras, el flujo de usuarios es básicamente una serie de interacciones entre el usuario y la interfaz de la aplicación, el diseñador es el encargado de proporcionar al usuario un camino fácil y rápido para acceder a las diferentes funciones y pantallas del proyecto.

Los wireframes le dan al desarrollador una imagen clara de los elementos a codificar. Cabe aclarar que el tipo de wireframe a utilizar dependerá del tipo de desarrollo, en el caso del desarrollo back-end, los wireframes pueden ser de baja fidelidad, mientras que en el Front End se requiere de un wireframe de alta fidelidad.

El wireframe pasa a ser el mapa del desarrollador haciendo que este pueda codificar la interfaz de forma más rápida.

Pasos para crear wireframes con cero inversión

Este tipo de wireframe es el mas habitual, consiste en realizar un bosquejo rápido para cotejar la posición de cada elemento del proyecto (cajas de texto, botones, imágenes) permitiendo así tener una idea de como se va a componer la vista del proyecto.

Ventajas:

• Facil de realizar
• Se trabaja con rapidez
• Escalable, brinda facilidad para modificar o cambiar la estructura
• Facilidad para llevarlo contigo a todas partes
• Poca o nula inversión 0$

Este tipo de wireframe puede ser creado de manera similar al primero, con la excepción de que podemos utilizar un lápiz digital en una tablet o en un panel de dibujo USB conectado al computador.

Es ideal para proyectos remotos en los que, debido a la distancia, necesitamos enviar el diseño a los gerentes del proyecto o a las personas encargadas de utilizarlo.

Ventajas:

• Facil de realizar
• También se trabaja con rapidez
• Escalable
• Facilidad para borrar elementos sin tener que desperdiciar papel
• Duplicidado instantáneo para trabajar con varias copias
• Permite recuperar copias en caso de error
• Exportación, envío por correo o la nube
• Facilidad para trabajar en grupos a través de la nube
• 0$ inversión (si se cuenta con una tablet y un lápiz digital)

Este tipo de wireframe es más rápido de desarrollar gracias a las diferentes herramientas de diseño que están disponibles, algunas como aplicaciones para tablets o desde sitios web.

La ventaja de utilizar herramientas de diseño es que algunas ya vienen con plantillas para definir los elementos que componen el wireframe, en este caso, solo se necesita arrastrar y soltar el elemento deseado o elegirlo desde una lista desplegable en el menú de elementos.

Existen herramientas gratuitas y de pago, pero entre las que podremos utilizar de forma gratuita están Page / Keynote (para Mac / iPad), Adobe Comp (en iPad), Canva (sitio web), Pencil Project (Linux, Window, Mac).

Ventajas:

• Cuenta con las ventajas del wireframe digital
• Más rápido de crear gracias a las plantillas de elementos
• 0$ inversión (si se cuenta con una tablet o PC)

De esta manera podremos empezar a desarrollar wireframes con baja o nula inversión.