Diseño conceptual en la UX

Cuando se habla de “diseño conceptual” nos referimos al proceso de diseño, dentro del proceso de desarrollo de un producto. Aunque algunas fases se puedan sobreponer, se puede afirmar que el diseño conceptual es el momento después de la fase en la cual ya se han determinado los requisitos, pero aún no se ha empezado el proyecto de manera detallada.

Cuando se empieza el diseño conceptual ya se deben haber comprendido adecuadamente los objetivos y conocer el presupuesto. Para poder hacerlo hay que tomarse el tiempo necesario para comprender a la perfección cuál es la necesidad del cliente.

Diseño conceptual, un término prestado por la ingeniería 

El diseño conceptual es un término que hoy en día se aplica a diferentes disciplinas, desde el marketing a la experiencia de usuario, pero es un término propio de la ingeniería. Los ingenieros pasan mucho tiempo elaborando prototipos para construcciones y luego presentarlas a los clientes. El cliente puede hacer sugerencias, proporcionar feedback y a partir de allí se hacen los cambios basados ​​en ellos. 

En nuestra disciplina, pasa algo parecido, los diseñadores UX y UI son los “ingenieros”.

Si estuviésemos hablando de producto industrial las fases serían: Idea – Requisitos – Diseño conceptual – Proyecto detallado – Prototipo – Fabricación.

En nuestro caso las fases son: Sketch – Wireframe – Mockup – Prototipo

El diseño conceptual muestra qué problemas solucionará el producto, cómo los solucionará y cómo será mientras los soluciona. Probablemente es la fase más creativa del diseño de producto, ya que en esas fases es cuando se pueden explorar todas las posibilidades. En el diseño conceptual es también cuando emerge la innovación.

Es importante conocer las diferencias entre Sketch y Wireframe, ya que muchos diseñadores piensan erróneamente que un sketch es un wireframe. Pero no es así. Ambos son útiles para ilustrar un concepto de interfaz, pero un wireframe y un sketch se realizan en diferentes medios y producen resultados diferentes.

Sketch. Qué es y para qué sirve

Los sketch son dibujos a mano alzada en una hoja de papel o en una herramienta digital que brinda una representación básica de su concepto. Se pueden crear con lápiz y papel o en casi cualquier herramienta de diseño. (Lee también Ventajas de los prototipos en papel). Es muy útil en la fase de ideación para un trabajo interno. Entre diseñadores o incluso en reuniones donde hay dificultad de comprensión de documentación. Todos pueden contribuir.

Los sketch son baratos, rápidos, se pueden realizar durante las sesiones de brainstorming y permiten tener una visión común. Dibujar ayuda a intercambiar ideas con los clientes y compañeros.

El objetivo principal es ilustrar la idea. Es más fácil hacer un boceto rápido que explicar la idea con palabras.

Otra característica importante del sketch es que nadie se apega demasiado a esas ideas.

En algunos casos, es mejor ir directamente al wireframe. Hay que saber reconocer la situación en la cual mostrar el boceto al cliente no es útil porque puede generar un malentendido y causar confusión.

Sketch. Toma fotos de tus bocetos 

Hay tres razones por las que aconsejamos esta buena práctica:

• Primero, las imágenes se pueden usar como documentación para el proyecto. 
• En segundo lugar, podrás utilizar las fotos para cualquier fase del proyecto. Los sketch son muy útiles cuando hay que desempolvar viejas ideas. Algunas de las mejores ideas que surgen de los sprints suelen surgir antes de que comience el sprint. No es que fueran malas ideas; simplemente no era su momento…
• En tercer lugar, herramientas como Marvel POP pueden ayudarte a transformar tus ideas de lápiz y papel en un prototipo interactivo de iPhone o Android.

Wireframe baja/media fidelidad. Qué es y para qué sirve

Los wireframes de baja/media fidelidad actúan como esqueletos para el diseño: representan la interfaz de usuario básica. En los wireframes se trabajan solo los elementos esenciales de la interfaz de usuario. Ayudan tanto a diseñadores como al equipo de implementación a tener una visión clara del producto y a plasmar visualmente las ideas y la arquitectura de la información que desean para el producto digital.

Se pueden realizar tanto con lápiz y papel como con herramientas digitales como Whimiscal, Uxpin, Balsamiq… (puedes profundizar leyendo Herramientas para hacer prototipos).

Un wireframe, intencionalmente, parece un dibujo o un diagrama para que el “cliente”  pueda diferenciar entre el producto real y la ideación del producto real. Normalmente tiene una paleta de colores en escala de grises y se compone principalmente de cuadros, líneas y texto.

Podemos encontrarnos con que el valor de los wireframes puede ser difícil de entender por los clientes que tienen un nivel de madurez bajo en asuntos de diseño, pero eso no disminuye su importancia.

Wireframe. ¿Qué contiene? 

Un wireframe puede contener lo siguiente:

• Una idea aproximada de cómo se verá la pantalla individual.
• Una idea aproximada de todos los elementos existentes en pantallas individuales.
• Una idea aproximada de qué interacción se esperará de los usuarios.
• Una idea aproximada de cómo será el flujo.
• Una idea aproximada de cómo se comportan los elementos o componentes cuando los usuarios interactúen con ellos.

Wireframe. ¿Cuándo usarlos?

• Se suele usar en las etapas iniciales del proceso de diseño del producto. Pero, realmente son muy útiles en cualquier etapa del diseño, muy fáciles de iterar y tienen un coste relativamente bajo.
• Para realizar diagramas de flujo.
• Para evaluar la estructura de páginas/pantallas individuales.
• Para comprender cómo funcionan juntas las pantallas/páginas relacionadas.

Wireframe. Buenas prácticas

• El primer consejo que se puede dar es de no agregar demasiados detalles a los wireframes. Los wireframes son la estructura básica del producto. El objetivo del wireframing es evaluar el diseño, no pulir detalles. Por lo tanto, hay que agregar solo elementos esenciales que aparecerían en una página/pantalla.
• Acompañarlo de los insights más importantes que el equipo de diseño debe tener en cuenta a la hora de plantear una propuesta. Esto permite enfocar muy bien cuál es el problema a resolver. 
• Usar el color para llamar la atención. Los wireframes se crean tradicionalmente en blanco y negro, pero es posible usar una cantidad limitada de colores (por ejemplo, uno o dos colores que contrasten) para crear acentos visuales.
• Tener cuidado con Lorem Ipsum. Muchos diseñadores llenan las maquetas con texto ficticio. Si bien este enfoque puede ahorrar algo de tiempo durante el diseño, puede causar muchos problemas cuando reemplazamos el contenido ficticio por contenido real. Es posible que los contenedores no estén diseñados para ajustarse y esto genera un trabajo no planificado con los diseños.
• Agregar anotaciones breves. Si planeamos presentar una estructura a un equipo, es buena idea incluir siempre anotaciones. Las anotaciones ayudan a crear contexto y ofrecer rápidamente ideas clave.

Ver también:

• Wireframes de baja fidelidad
• Wireframes y prototipos
• Prototipos y wireframes en proyectos de UX
• El futuro de los wireframes

Una vez acabada la fase de los wireframes salimos ya del diseño conceptual, para entrar en otra fase que es la del diseño visual con mockup y prototipos.

En conclusión, el diseño conceptual es una herramienta que se usa a menudo en disciplinas como la ingeniería y que también se puede aplicar al diseño gráfico y de sitios web y aplicaciones. Se puede pensar en el diseño conceptual como los elementos y el proceso de creación de ideas.

El diseño conceptual permite trabajar con ideas abstractas, luego funcionales y luego elementos visuales en el camino para crear algo que resuelva un problema con una solución viable.