Qué es un wireframe y pasos para hacerlo como un experto en usabilidad (UX)

Estarás preguntándote que puedes obtener de un artículo como este? Mi objetivo es profundizar en las plantillas web desde un punto de vista más práctico.

En este artículo vamos a responder a las siguientes preguntas básicas:

• ¿Quien los usa?
• ¿Por qué deberías considerar usarlos?
• ¿Cómo puedes crear increíbles diseños con o sin software?

Qué es un wireframes

Cuando se trata de hacer wireframes de página web, la mejor manera de describirlos es que se tratan de la piedra angular del diseño y desarrollo del producto. Sin importar el tipo de proyecto que tengas en mente, trabajarás con esta herramienta cuando desarrolles sitios web o aplicaciones móviles. El objetivo es que todos los involucrados del proyecto se encuentren en la misma página involucrando a todos, desde los diseñadores del producto, programadores, UX, etc. Es decir a todo el equipo. Si miramos a las compañías que prefieren la metodología de desarrollo ágil, notaremos que los esquemas web son implementados en una fase temprana de desarrollo. Y sí, hasta un simple borrador en papel es considerado un wireframe de página web, pero eso lo veremos más adelante.

Sketch, esquema y modelado

Mmm pero espera, ¿esquemas y modelar es lo mismo cierto?

No, para nada.

El Wireframe se trata de funcionalidad. Como podemos ver arriba, la fidelidad fluctúa entre mediana y baja. Si se trata de una app, o una página web, en por ejemplo, la navegación, los wireframes nos ayudan a decidir el acomodo de las cajas, botones y otros elementos de funcionalidad. Mientras que un prototipo es lo más cercano que tendremos a la funcionalidad final, al estar en este estado, es posible aún hacer los cambios necesarios para optimizar la web.

Algo muy interesante es que el entender exactamente como los usuarios interactúan con la web hace una gran diferencia y nos ayuda mucho a mejorar la conversión al posicionar los elementos en el mejor lugar posible.

La idea es tener una probadita gráfica del producto final, y si lo que buscas es mayor detalle, puedes utilizar algún software para crear un prototipo detallado o inclusive, sumergirte en el código si eso es lo tuyo. Si el prototipo es muy detallado, y va mucho más allá de una simple muestra, estaríamos hablando entonces de un prototipado, pero eso es otro tema.

¿Para quiénes son realmente los Wireframes?

En resumen, cualquiera que se involucre en el desarrollo del producto – en cualquier nivel.

A pesar de que los diseñadores, desarrolladores, y gerentes de producto, típicamente desarrollan utilizando wireframes normalmente en su trabajo día a día, no son los únicos que pueden utilizarlos. Muchas más personas pueden beneficiarse de los Wireframes, incluyendo a analistas de negocios, arquitectos de información, diseñadores de interacción, diseñadores de experiencia de usuario, diseñadores gráficos, programadores, y gerentes de producto.

Por qué los Wireframes son los ˝Planos para el diseño”

En otras palabras, conectar la arquitectura de la información y el diseño visual, para representar gráficamente una interfaz. La interfaz tiene 5 propósitos principales:

• Mostrar como una web o una app se formara
• Mostrar cómo será su funcionalidad
• Mostrar y organizar la información
• Decidir que contenido deberá tener
• Perfeccionar la interacción del usuario con el sitio web

Entonces ¿cómo podemos crear Wireframes?

Anteriormente dije que los diseñadores, desarrolladores, y gerentes de producto hacen wireframes, pero eso no significa que sean lo mismo.

Los UX/ Diseñadores Gráficos consideran utilizar wireframes cuando desean crear modelos, prototipos o una nueva interfaz de usuario. Así que para ellos, este es un proceso preliminar al trabajo. Otra razón para usarlos es que es posible simular el flujo de los usuarios. Ellos crean los wireframes después de desarrollar una “Persona”, un user journey y un mapa de sitio con el cual trabajar. En otras palabras, después de identificar las actividades relacionadas con el descubrimiento.

Para los expertos en UX, los esquemas son como lienzos en blanco, esperando a ser pintados

El diseñador decide qué cosa va en cada lugar, y como es que los usuarios navegan a través de la casa. En otras palabras, el flujo de usuarios son básicamente una serie de interacciones entre el usuario y la interfaz, de manera que dé como resultado un camino suave y sedoso. Los cuadros de flujo, la historia y los esquemas trabajan juntos para alcanzar el objetivo.

Los desarrolladores utilizan los wireframes para tener un modelo tangible de la funcionalidad del sitio.
Esto le da al principal desarrollador una imagen clara de los elementos a codificar. Es importante destacar el tipo de desarrollo del que estemos hablando, en el caso del desarrollo back-end, los wireframes pueden ser de baja fidelidad, mientras que el Front End se requiere de un wireframe de alta fidelidad.

Los gerentes de producto, requieren de los wireframes más que nada con el propósito de inspeccionar el proyecto. De esta manera se aseguran que los requerimientos sean cumplidos durante el diseño del proyecto.

Los redactores también pueden utilizar los wireframes. Por ejemplo, para poder visualizar sus copias hacia los clientes o ayudar a los diseñadores durante el proceso del diseño. Es importante mencionar que los wireframes no solo proveen fuertes cimientos pero también aceleran el trabajo.

Creando wireframes con cero inversión

1. Bosquejo / Wireframe en Papel

Pros:

• Fácil: No necesitas más que una pluma y un papel. Eso es todo. Nada del otro mundo. Puedes comenzar con algunos garabatos e ir tomando inspiración en el camino, tu imaginación es el límite.
• Flexible: Con la oportunidad de cambiar entre alta y baja fidelidad, puedes empezar con algo tan sencillo como como un bosquejo, y terminar con todo un prototipo.
• Simplicidad: Papel y pluma, sin complicaciones, sin colores ni formas o templetes, a dibujar y listo.
• Todo en un mismo canal: Al crear múltiples patrones con el mismo diseño, la estandarización de prototipos es muy fácil y depende de ti.
• Móviles y vivos: Puedes ir a todos lados con ellos, ve y muéstraselo a todos, pídeles su opinión, es excelente para el trabajo colaborativo.

Contras:

• Poco margen de error: Todos hemos estado allí, estamos casi por terminar y de pronto algo no queda como desearíamos, tratamos de corregirlo y simplemente queda peor. Horrible los sé! Aunque a veces podemos arreglarlo encimando algunas líneas o borrando algo, muchas veces nos quedara inevitablemente un caos de tinta.
• Sin efectos especiales: A menos que seas un artista genial, no habrá objetos animados, ni híper links entre los bosquejos, ni videos ni lucecitas, nada de cositas brillantes aquí.
• ¿Actualizar? Nada de eso: El momento llego, después de cientos de papelitos y miles de dibujos tus bosquejos están listos, pero de pronto pasa lo peor, hay que actualizar algo en la interfaz, fatal! La única solución es volver a tomar papel y pluma para volver a bosquejar.
• Sincronización en equipos: Si varias personas están trabajando en los bosquejos, y no son cuidadosos a la hora de bosquejar, es posible terminar con un desastre total, con diferentes estilos, tamaños y colores. Es muy importante mantener la comunicación abierta para mantener siempre el mismo estilo en los bosquejos.
• Orden, Orden, Orden: Si no llevas un orden de tu trabajo, ya sea solo o en trabajo, terminaras con bosquejos de todos los colores, olores y sabores. Requiere un poco más de trabajo tener todo perfectamente ordenado, pero definitivamente vale la pena.

2. Tablero Blanco y Negro

Pros: (ver los sketchs)

• Tu imaginación es el límite: Si te vuelves loco, y decides cambiar todas tus paredes por pizarrones, tendrás la posibilidad de escalar tus diseños, y dejarlos allí a la vista de todos. Quien sabe, tal vez y hasta te inspiras mientras caminas alrededor de tus creaciones.
• Creatividad: Que podría motivar más a tu equipo que dejarlos pintar por todas las paredes como cuando eran niños, y sin que nadie los regane! jijiji. Esto da la sensación de que la compañía es abierta, moderna y colaborativa.

Contras: (ver sketch)

• Imposible moverte: Si estás trabajando en pizarrones, es muy difícil ( por no decir imposible) que te muevas alrededor de la oficina con él. Además de que desgraciadamente tendrás no podrás visitar a todos con tu obra maestra al estar terminada.
• Difícil de detallar: Salvo que seas muy buen dibujante y cuentes con plumines muy finos, tendrás problemas al momento de ir a los pequeños detalles, y al alejarte mucho del pizarrón perderás los detalles.

3. Plantillas

Mi forma preferida de crear wireframes al momento de dibujar, olvidándonos de las computadoras. Es lo mismo que bosquejar pero con un giro interesante. Recuerdas que te mencione la falta de plantillas como una desventaja al bosquejar? Pues con esta herramienta se resuelve el problema de manera muy fácil y elegante. Además con la ventaja de que son muy fáciles de encontrar, y los hay de todos tamaños y sabores! Incluso, si eres muy flojito los puedes descargar en línea, hay un montón para escoger y de todos los estilos que te imagines. Incluso puedes diseñar tus propias plantillas, genial no? Eso te da la oportunidad de enfocarte en tu proyecto y te facilitarte enormemente la tarea de mantener un mismo estilo en todos tus bosquejos.

Conclusión:

Hay cierta confusión al referirnos a los wireframes. Los wireframes sirven sobre todo para generar proyectos centrándonos en la funcionalidad que tendrá nuestro proyecto. Por lo mismo varían desde baja hasta media fidelidad. Estos son utilizados por diseñadores UX y por los que no lo son. Hay varios caminos para desarrollar los wireframes, papel y pluma, plumón y pizarrón, o mouse y teclado. A mi me gusta comenzar con plumones, y avanzar poco a poco a lo digital, utilizando software como Balsamiciq o UXpin. Si no tienes ideas puedes siempre inspirarte usando otros sitios cool utilizando herramientas como Wirify

Imagen destacada tomada de DepositPhotos.com

Autor:

Ronald Ríos