Bocetos vs. Dibujo a Color en Diseño UI

Diseñar interfaces de usuario puede ser complicado para los diseñadores. Necesitan crear diseños efectivos y fáciles de usar que se destaquen. Para ayudar en este proceso, los diseñadores a menudo miran diseños existentes para inspirarse. Hay dos formas populares en las que encuentran inspiración. Una forma es navegando por plataformas de diseño como Dribbble y Behance, donde pueden ver muchos diseños diferentes. La otra forma implica usar herramientas que sugieren ejemplos de diseño basados en bocetos o diseños existentes. Estas herramientas utilizan algoritmos para encontrar imágenes similares.

Aunque estos métodos pueden ayudar, también tienen algunos problemas. Navegar por portafolios de diseño puede resultar abrumador y alejar a los diseñadores de sus ideas originales. Por otro lado, seguir demasiado de cerca diseños similares puede dificultar que los diseñadores sean originales.

Para encontrar una mejor manera, algunos investigadores crearon un modelo llamado StyleGAN. Este modelo puede crear una amplia gama de muestras de diseño basadas en una entrada de diseño inicial. Sin embargo, no le da a los diseñadores mucho control sobre el diseño o elementos específicos. Los diseñadores solo pueden elegir atributos de estilo como color y textura.

En este trabajo, analizamos dos métodos diferentes para ayudar a los diseñadores a crear maquetas. Un método usa bocetos, y el otro utiliza dibujos detallados con colores específicos para representar diferentes elementos de diseño. El método de bocetos permite a los diseñadores expresar sus ideas rápidamente, mientras que el método de Dibujo a color ayuda a representar el diseño de manera más precisa.

#Metodología

Para el método de bocetos, usamos un modelo llamado Pix2Pix, que es bueno convirtiendo bocetos en imágenes de alta Calidad. El método de dibujo a color utiliza un modelo diferente llamado SPADE, que genera imágenes basadas en dibujos a color semánticos. Este enfoque permite un mejor control sobre elementos de diseño específicos, ayudando a transmitir representaciones precisas del diseño final.

Queríamos ver cómo se desempeñan estos dos métodos en términos de Expresividad, Facilidad de uso, tiempo requerido e intuición. Para esto, realizamos pruebas con un grupo de 13 estudiantes que estudian Interacción Hombre-Computadora. Cada estudiante tuvo que crear una maqueta de una aplicación móvil usando ambos métodos, y luego compartieron sus experiencias durante la tarea.

#Participantes

El estudio incluyó 13 participantes, todos en su primer año de un programa de maestría relacionado con la ingeniería informática. Tenían algo de formación previa en diseño de interfaces de usuario. Entre estos participantes, había 2 mujeres y 11 hombres, con edades entre 23 y 25 años. El pequeño número de participantes significa que estos resultados son preliminares, y se necesitarían más estudios para confirmar los hallazgos con un grupo más grande.

#Diseño del Estudio

A los participantes se les asignó una tarea de dos partes donde necesitaban diseñar una interfaz de usuario móvil primero dibujando bocetos y luego dibujándola semánticamente. Se les informó sobre cómo completar la tarea a través de una guía proporcionada. Podían usar cualquier herramienta de dibujo digital con la que se sintieran cómodos, aunque estudios futuros podrían beneficiarse de limitar las herramientas a una opción para obtener resultados más consistentes.

Durante la primera parte, dibujaron sus ideas. Luego, cambiaron al método de dibujo a color para crear una versión más detallada de su diseño. Este orden de tareas se eligió para reflejar un proceso de diseño típico donde las ideas iniciales evolucionan hacia diseños más estructurados. Después de completar sus maquetas, los participantes clasificaron sus experiencias en varias dimensiones como facilidad, expresividad e intuición. También dieron sus opiniones sobre la calidad de las maquetas generadas a través de ambos métodos.

#Evaluación de los Métodos

#Intuición

Al ver la facilidad de entender y usar cada método, el método de bocetos generalmente tuvo una puntuación más alta que el método de dibujo a color. La mayoría de los participantes sintieron que dibujar bocetos les permitía expresar claramente sus ideas y visualizar mejor sus diseños. Varios notaron que se sentía más natural transferir sus pensamientos a bocetos.

Sin embargo, algunos participantes encontraron el método de dibujo a color menos intuitivo porque les costaba recordar las asignaciones de color para diferentes elementos. Algunos participantes mencionaron que el método parecía confuso, lo que dificultaba ver su utilidad.

#Facilidad de Uso

En cuanto a la facilidad de uso, los participantes expresaron sentimientos encontrados sobre ambos métodos. Mientras que algunos sintieron que dibujar bocetos requería habilidades de dibujo específicas, otros creían que el método de dibujo a color era simple porque se centraba más en formas básicas como cuadrados y rectángulos. Los participantes tenían opiniones variadas sobre los desafíos que enfrentaron, como dibujar con un mouse o ajustarse a diferentes dispositivos para la tarea.

#Eficiencia Temporal

Los participantes tenían diferentes opiniones sobre cuánto tiempo requería cada método. Algunos encontraron que el proceso de bocetos era más rápido ya que les permitía delinear el diseño más libremente, mientras que otros se sentían atrapados tratando de crear un boceto decente. Similarmente, las opiniones sobre el método de dibujo a color variaban, con algunos terminando rápido mientras que otros sentían que tomaba demasiado tiempo encontrar el software adecuado o igualar sus ideas con lo que salió.

#Expresividad

En términos de expresividad, los participantes generalmente preferían el método de bocetos. Sentían que les permitía transmitir ideas más detalladas, mientras que muchos encontraban que el método de dibujo a color era limitado en cómo bien expresaba sus conceptos originales. Algunos participantes disfrutaron de cómo el boceto podía ilustrar casi todo lo que imaginaron, mientras que otros notaron que el método de color se sentía demasiado restrictivo.

#Calidad y Fidelidad de Resultados

Al comparar las maquetas finales producidas por cada método, el enfoque de bocetos resultó en imágenes de mayor calidad que el método de dibujo a color. Muchos participantes también sintieron que el método de bocetos se mantenía más cerca de sus ideas originales. Sin embargo, la diferencia en calidad y adherencia al diseño inicial no fue tan amplia como se percibió en expresividad.

#Perspectivas Adicionales

Al ver los comentarios adicionales de los participantes, quedó claro que las preferencias variaban. Algunos participantes insistieron en que el método de bocetos era mejor pero sugirieron agregar una clave de colores para abordar los desafíos de definir la función de cada componente. Otros vieron los beneficios de combinar bocetos con dibujos a color para crear una experiencia más funcional.

Varios participantes argumentaron que el mejor método podría depender del contexto de la tarea de diseño. Afirmaron que ninguno de los métodos es superior; en cambio, se complementan bien y pueden ser útiles cuando se utilizan juntos.

#Conclusiones

Este estudio evaluó y comparó dos métodos de generación de maquetas de interfaces de usuario: bocetos y dibujo semántico. Los participantes generalmente preferían los bocetos por su mayor intuición y expresividad. Sin embargo, ambos métodos tienen sus ventajas y desventajas, lo que sugiere que una combinación de los dos podría ser el enfoque más beneficioso.

Un método mixto que incluya tanto bocetos para la generación rápida de ideas como dibujos a color para representación detallada podría proporcionar a los diseñadores una herramienta poderosa para crear maquetas. Esto les permitiría expresar sus ideas con claridad mientras mantienen un alto nivel de precisión, resultando en mejores productos finales.

La investigación futura debería explorar cómo se pueden integrar efectivamente estos dos métodos, mejorando en última instancia el proceso de diseño de interfaces de usuario.