Los clientes necesitan comprender cómo funcionará una característica propuesta. Pero simplemente describírsela verbalmente o textualmente para que se construya la característica objetivo puede ser bastante desafiante para su imaginación. El wireframing puede ser extremadamente útil para resolver ese círculo, ya que puede servir como una herramienta visual de prototipo “muestra, no digas” para confirmar ideas de diseño del sistema con los clientes.
¿Qué es un wireframe?
Los wireframes son bocetos de pantallas de un sistema, a veces denominados plano o esqueleto. Se crean con el fin de presentar y explicar ideas de diseño del sistema a los clientes, lo que finalmente conduce a un consenso sobre las ideas propuestas.
Los wireframes muestran la información “justo suficiente” asociada con la característica propuesta. Cada wireframe consta de elementos gráficos básicos que representan los componentes de la pantalla, o los marcadores de posición de los componentes de la pantalla. Un wireframe representa el diseño de la pantalla y cómo se organiza el contenido de la pantalla. Se centra en lo que hace una pantalla y cómo los usuarios interactuarán con el sistema para satisfacer sus necesidades, en lugar de cómo se verá realmente la pantalla final.
Antes de seguir adelante, echemos un vistazo a un wireframe creado basado en youtube.com
Como puedes ver, un wireframe es simplemente así de simple y directo. Todo el mundo puede entenderlo sin dificultades. Ayuda al equipo de desarrollo a explicar fácilmente cómo los usuarios interactuarán con el sitio web.
El wireframe es solo un plano
Un wireframe es solo una versión de baja fidelidad de una interfaz de usuario y no pretende ser una representación de una pantalla real. Los wireframes están pensados para demostrar las funcionalidades, las interacciones del usuario y los flujos de pantalla, sin especificar explícitamente cómo deben verse los componentes de la pantalla ni cómo deben comportarse para lograr la máxima usabilidad.
Ejemplos de wireframes
Aquí tienes un ejemplo de wireframe web para una página de inicio:
Aquí tienes algunos ejemplos de wireframes para aplicaciones Android:
 |
 |
 |
Aquí tienes un ejemplo de wireframe para una aplicación de iPad:
Aquí tienes un ejemplo de wireframe para una aplicación de iPhone:
Finalmente, aquí tienes un ejemplo de wireframe para una aplicación de escritorio:
Beneficios del uso de wireframes
Clarificar la interfaz de usuario
Los clientes pueden no entender los términos técnicos del diseño de pantallas como deslizador, caja giratoria, bootstrap, etc. Los wireframes incluyen elementos gráficos básicos que todos pueden entender, ayudando a los clientes a saber cómo funcionarán las características y cómo podrán interactuar con el sistema para lograr lo que desean.
Consideración temprana de la usabilidad
La experiencia de usuario (UX) es una consideración importante en todos los software actualmente. El uso de wireframes en la recopilación de requisitos lleva la consideración de la experiencia de usuario al inicio del proyecto. Sin desarrollar prototipos ni dibujar diseños reales de pantallas, los usuarios aún pueden experimentar cómo funcionará el sistema.
Rentable
Toma tiempo y experiencia crear diseños de pantallas completos y de alta fidelidad, lo que termina generando un gran gasto. El wireframing es una forma rápida e económica de crear bocetos básicos de pantallas. También hace que ajustar o incluso rehacer los bocetos sea sencillo y económico.
Más dispuestos a hacer cambios
Los cambios de diseño son inevitables. El problema con confirmar ideas de diseño utilizando un prototipo completo del sistema o un mockup es que ya se ha realizado una cantidad considerable de trabajo, y esto implicará una cantidad considerable de rehacer, lo que significa tiempo, esfuerzo y gastos adicionales. En esa situación, los clientes y el equipo de desarrollo son más reacios a expresar preocupaciones o solicitar cambios. Por el contrario, producir y revisar wireframes toma mucho menos tiempo. Todos estarán más dispuestos a solicitar y realizar cambios.
Clientes comprometidos
Debido a que los wireframes son toscos y flexibles, dan a los clientes espacio para brainstorming y para expresar sus sugerencias. Y, como el tiempo de respuesta para refinar un wireframe es corto, los clientes participan activamente brindando retroalimentación, lo que los hace más propensos a aprobar el diseño final.
¿Cómo usar el wireframe de forma efectiva?
El uso de wireframes puede traer muchos beneficios tanto al equipo de desarrollo como a los clientes, pero esto solo ocurre cuando se utiliza de forma inteligente y adecuada. Un uso típico incorrecto de los wireframes es tratarlos como un sustituto del diseño de pantallas. Esto hace que la producción y la refinación sean difíciles y costosas, reduciendo la utilidad del wireframing. En esta sección repasaremos algunas de las pautas efectivas para el wireframing.
- Un wireframe está pensado para ser simple y suficiente. Es simple para que pueda producirse rápidamente y fácilmente, y no hay dudas al descartarlo o volver a trabajar en él. La presentación de baja fidelidad también lo hace más comprensible y comunicativo. Por lo tanto, no es necesario gastar demasiado tiempo en embellecer el dibujo, alinear elementos o usar tipografías atractivas, entre otros.
- En un wireframe, en lugar de mostrar contenido real, podemos reemplazar un gran bloque de texto (el contexto real) con un marcador de texto. Esto evita perder tiempo en preparar contenido innecesariamente y previene que los lectores se distraigan por el contenido textual. Pero si es necesario mostrar texto, podrías considerar colocar texto de relleno allí. Puedes encontrar fácilmente un generador de texto de relleno en internet.
- El uso de anotaciones te ayuda a describir un elemento (por ejemplo, “logotipo de la empresa”) o a explicar algo relacionado con su comportamiento (por ejemplo, “ocultar en 5 segundos”). Úsalo si es necesario. Pero nuevamente, no intentes documentar cada uno de los elementos del wireframe. Debes usar anotaciones solo cuando sea necesario.
- Los wireframes pueden dibujarse a mano, pero normalmente creamos wireframes con software para una gestión más eficiente y sencilla de nuestro trabajo. Además, algunas herramientas de wireframes te ofrecen funciones que el papel y el lápiz no pueden lograr. Aquí tienes tres de ellas:
- Estado – La herramienta de creación de wireframes de Visual Paradigm admite el concepto de estado, que te permite crear un wireframe secundario basado en uno existente. No solo ahorra tiempo al crear un flujo de pantallas con una secuencia de wireframes secundarios similares, sino que también facilita mucho las mejoras en los wireframes relacionados (ya que al realizar cambios en el estado inicial de un wireframe, esos cambios también se reflejarán en todos sus wireframes secundarios)
- Guion gráfico – Un guion gráfico presenta el flujo de pantallas de un escenario particular. Hace que los wireframes sean más manejables y la presentación mucho más sencilla.
- Gestión de wireframes mediante historias de usuario – Una historia de usuario es una herramienta ágil para registrar las preocupaciones y requisitos del usuario. Incluir los wireframes como parte del escenario de una historia de usuario muestra cómo el usuario utilizará la función en la parte de su trabajo descrita en esa historia de usuario. Además, cuando el desarrollador comienza a implementar la historia de usuario, puede revisar el wireframe para obtener ideas sobre las expectativas del usuario.
English
Arabic
Chinese (Simplified)
Dutch
French
German
Italian
Japanese
Korean
Portuguese
Russian
Spanish