Cómo Hacer Wireframes Efectivos.

Debo aclarar que no soy un diseñador de profesión. Así que todo lo que está escrito aquí está sujeto a ser re-evaluado y que, lo que aplica para mi empresa puede no aplicar para la tuya.

Lo que sí puedo asegurar es que en este artículo he recopilado las que creo, son las mejores prácticas como desarrollador en cuanto a la creación de wireframes se refiere.

Y cómo hacer que los wireframes sean en realidad una herramienta útil en la creación de proyectos que requieren la generación de interfaces gráficas. Principalmente páginas Web.

¿Quieres aprender como hacer wireframes efectivos? Esto es lo que nosotros aprendimos.

Pero bueno ¿qué es un wireframe?

Empecemos con una definición no oficial de que es un wireframe

Un wireframe es un boceto donde se plasma de manera visual y esquemática la estructura de una interfaz de usuario.

Es por lo general uno de los primeros pasos (si no es que es el primero) a tomar cuando se va a crear una nueva página web o se va a crear una nueva app.

Si te das cuenta, la definición es extremadamente genérica y vaga… Y la verdad es que eso es parte de la naturaleza de un wireframe: Ser genérico.

Es importante resaltar los 3 componentes de un wireframe:

1. Es un boceto. Esto quiere decir que no se debe acercar a como se verá el producto terminado
2. Es esquemático. Es decir que NO usa elementos gráficos complejos sino elementos representativos.
3. Es para interfaces de usuario. Es decir, se usa generalmente en proyectos o productos con los cuales los usuarios tienen que interactuar.

… Entonces qué es un WireFrame?

Bueno, podemos decir que un wireframe es un dibujo de cómo se organizará una página web o una app y que información se publicará en esta.

Veamos un ejemplo rápido de un Wireframe:

Si te das cuenta es algo que parece hecho a mano y que está incompleto… Y la verdad es que debe ser así. El wireframe no es el diseño de la página.

Si el wireframe no se parece en nada a lo que se va hacer, entonces ¿para qué se hace?

Los wireframes cumplen dos objetivos principales:

1. Establecer QUÉ información irá en cada página (o ventana) del sitio que se va a crear.
2. Establecer DÓNDE irá esta información.

Esto quiere decir que para realizar un Wireframe, es necesairo hacerle preguntas al cliente del estilo:

• ¿Qué desean lograr con la Web que se está creando? (vender productos, capturar leads, generar expectativa, mostrar resultados)
• ¿Qué es lo más importante de su producto o servicio? (evita que se pierda dinero, cumple con un requisito legal, es entretenido, es lindo)
• ¿Qué lo diferencia de la competencia? (es de mejor calidad, es más barato, es el único del mercado, nada)
• ¿Qué motiva a su cliente a buscar su producto o servicio? (el cliente sufre de una enfermedad, hay nueva legislación en el país, es algo que ciertas empresas necesitan para funcionar)

Si te das cuentas, estas preguntas parecen preguntas de un brief… Y lo son. Pero hablaré de eso un poco más adelante.

En esta fase todavía NO es importante saber que paleta de colores usa el cliente, si tiene o no logo, ni tampoco información de banco de imáges. Lo que sí es importante es saber que quiere comunicar el cliente y a quién quiere comunicarselo.

Quién y cuando se debe hacer el Wireframe?

El wireframe es muchas veces la primera interacción entre el cliente y tu empresa, así que es importante que esté presente por lo menos el director del proyecto junto con el cliente. Dependiendo de cómo sea el flujo de trabajo de la empresa, también es importante que esté el diseñador (aunque he sabido de empresas que no lo involucran) en este paso.

… Nuevamente:

El wireframe es una herramienta, no una obligación. Así que puedes involucrar en la creación de wireframes a tantas personas como sean necesarias.

¿Y cuál es el papel del brief entonces? ¿El wireframe lo reemplaza?

El poder del wireframe reside en ser gráfico. Esto hace que:

• El cliente se sienta más cómodo al ver sus ideas plasmadas en papel.
• El director de proyecto interprete más fielmente las ideas del cliente.
• Se empieza a visualizar el proyecto.
• Se tendrá información de qué se verá y como se verá

Te digo todo esto para justificar que en mi caso, muchas veces uso el wireframe como brief… Las preguntas que normalmente hago en un brief, las respondo en el dibujo del wireframe.

Entonces, el brief sigue siendo sumamente importante. Pero la forma de llenarlo puede ser directamente en un wireframe.

Un ejemplo de wireframe.

Uno de los proyectos realizados por nuestra empresa incluía la creación de un sitio Web para nuestro cliente.

Este cliente se dedica a la creación y gestión de sofware médico que le ayuda a los consultorios médicos, hospitales y particulares a gestionar sus pacientes, sus citas y sus prescripciones.

Hablando con el cliente se llegó a la siguiente conclusión:

• Su producto es para un nicho muy específico
• Es común que el cliente de mi cliente no tenga claro qué hace el producto. Es decir, la venta es altamente consultiva.
• La herramienta de venta más efectiva es permitirle a los interesados probar el software por un período de 15 días.
• Lo que más diferencia el producto de mi cliente al de la competencia, es ser compatible con la legislación local.
• Uno de los problemas para realizar la venta es el miedo que existe de que mi cliente no sea una empresa real.
• A los clientes de mi cliente, les interesa mucho saber donde están ubicados físicamente.

Entonces.

¿Cómo hacer wireframes?

Después de haber llegado a estas conclusiones, se decidió que la página principal debería tener la siguiente estructura:

De aquí se pueden resaltar los siguientes elementos:

• Lo primero que debe ver el usuario del sitio es como contactar a mi cliente usando WhatsApp
• Los primeros enlaces deben ser de autenticación (login) y solicitud de demo, ya que la mayoría de las preguntas que reciben son esas: Cómo solicito un demo y cómo ingreso a la herramienta
• El software tiene 3 stakeholders: Consultorios particulares, Clínicas y Pacientes. Para los 3 hay ventajas que se deben mostrar
• Se necesita un video que explique qué hace la herramienta y sus ventajas.
• Existen muchas razones para que el cliente al menos pruebe la herramienta, es por esto que se tiene toda una sección para eso
• Los referidos son muy importantes ya que generan confiabilidad, para esto se usa un slider con testimoniales.
• Al ser un software médico, hay una serie de requisitos legales que deben ser informados al cliente. Es por esto que se agregan al final.

¿Cuál es la mejor herramienta para hacer wireframes?

Existen muchas herramientas para hacer wireframes.

• Balsamic (Yo la uso mucho)
• Pencil
• Draw.io
• Figma (aunque es más para diseño)

Sin embargo, una de las mejores recomendaciones que te puedo dar es que uses papel y lápiz para crear el wireframe y no software de mockups ya que, por lo general, este software hace que la realización de wireframes sea algo lenta.

Sin importar cuál es la herramienta que uses, lo importante es que tu wireframe responda y aclare las preguntas que pueda tener tu cliente y sus usuarios.

Esperamos que este artículo sea de gran utilidad y hayas aprendido cómo hacer wireframes efectivos.