Mejorando la consistencia del diseño de UI y métodos de inspiración

Diseñar interfaces de usuario (UIs) para aplicaciones móviles es clave para hacer que las apps sean atractivas y funcionales. Los diseñadores a menudo buscan inspiración en apps ya existentes, utilizando plataformas como Dribbble o Pinterest. También necesitan asegurarse de que su diseño sea consistente en diferentes pantallas de la misma app. Este documento habla sobre nuevos métodos para ayudar a los diseñadores a recuperar UIs similares de diferentes apps y verificar si sus diseños son coherentes.

#Métodos Actuales

Las herramientas actuales para obtener inspiración de UIs dependen principalmente del aprendizaje automático. Analizan capturas de pantalla de UIs móviles y las convierten en representaciones semánticas, lo que ayuda a los diseñadores a ver similitudes entre diferentes diseños. Sin embargo, estos enfoques a menudo utilizan conjuntos de datos pequeños, lo que dificulta generalizar los hallazgos. Además, muchas de estas herramientas no están disponibles para el público, lo que complica su uso para los diseñadores.

Muchos diseños se basan en una sola captura de pantalla, lo que hace complicado para los diseñadores encontrar alternativas cuando están considerando múltiples pantallas. Como resultado, les cuesta identificar apps que tengan flujos de usuario o diseños similares. Esta necesidad de una herramienta más comprensiva es lo que queremos abordar.

#Soluciones Propuestas

Presentamos dos métodos importantes para mejorar los enfoques actuales:

1. Usar Modelos Visuales entrenados con grandes conjuntos de imágenes para capturar representaciones de UI sin necesitar una calibración extensa.
2. Desarrollar métodos para permitir comparaciones de app a app y analizar la consistencia del diseño.

#Usando Modelos Visuales

Nos enfocamos en un enfoque específico que utiliza imágenes a gran escala de la web para ver si estos modelos pueden extraer representaciones de UI sin entrenamiento previo. Con esto, esperamos mostrar que estos modelos visuales superan a los modelos especializados existentes diseñados solo para la recuperación de UI.

#Recuperación de App a App y Consistencia de Diseño

Otro objetivo principal es facilitar las comparaciones entre diferentes apps. Proponemos un método de transporte óptimo que proporciona una manera de medir la similitud entre aplicaciones enteras en lugar de solo mirar pantallas individuales. Esto permite a los diseñadores ver si diferentes apps tienen diseños generales similares.

#Importancia de la Consistencia de Diseño

A medida que las apps evolucionan, mantener la consistencia entre varias pantallas es fundamental para la experiencia del usuario. Al lanzar una nueva app, los diseñadores a menudo se enfocan en asegurar que todas las pantallas se vean y se sientan similares. En muchos casos, garantizar la consistencia del diseño puede ser más importante que encontrar nuevas ideas de diseño.

Para ayudar en este proceso, proponemos usar métricas que puedan ayudar a validar si los diseños de diferentes pantallas en la misma app son consistentes. Al emplear una métrica llamada Uniformidad, los diseñadores pueden medir fácilmente cuán uniformes son sus diseños de UI.

#El Papel de la Visión por Computadora en el Diseño de UIs

El campo de la Interacción Humano-Computadora (HCI) y el aprendizaje automático ha avanzado en la comprensión de las interfaces de usuario. Los estudios han mostrado que los diseñadores a menudo dependen de ejemplos existentes durante el proceso de diseño. Por lo tanto, es esencial desarrollar herramientas computacionales que puedan apoyar eficazmente las necesidades de los diseñadores.

Los esfuerzos de investigación se han centrado en crear modelos que puedan procesar UIs, pero muchas de estas herramientas son difíciles de usar. Los diseñadores a menudo encuentran complicado obtener información de estos modelos debido a la complejidad involucrada. Por lo tanto, debemos construir sistemas que no solo analicen capturas de pantalla individuales, sino que también comprendan el flujo de diseño a través de múltiples pantallas.

#Metodología de Recuperación de App a App

Para lograr la recuperación de app a app, necesitamos crear una forma de analizar toda la aplicación en lugar de UIs individuales. Nuestro enfoque se basa en entender las relaciones entre las capturas de pantalla en una app y cómo se comparan con otras apps.

Esto implica definir una app como un conjunto de capturas de pantalla de UI y usar métodos matemáticos para evaluar sus similitudes. Al enfocarnos en cómo diferentes apps pueden compararse en su totalidad, podemos permitir una búsqueda más completa de alternativas de diseño.

#Considerando la Variabilidad en las Apps

En nuestro análisis, consideramos que las apps en la misma categoría o con el mismo nombre pueden compartir aspectos de diseño. Al emplear nuestro método, podemos medir eficazmente la distancia entre apps en varios criterios, como:

• Nombres de apps
• Categorías
• Plataformas

Esto permite a los diseñadores identificar similitudes que pueden ayudarles en su proceso de toma de decisiones.

#Analizando la Consistencia del Diseño

Además de encontrar UIs similares, nuestro objetivo es proporcionar herramientas para analizar la consistencia del diseño. Esto implica ver si diferentes pantallas dentro de la misma app mantienen una apariencia y sensación cohesiva.

Históricamente, las guías de diseño se han centrado en recomendaciones amplias para el diseño de UI, pero estas guías pueden no alinearse con las necesidades específicas de una empresa o sus diseñadores. Para cerrar esta brecha, proponemos evaluaciones basadas en consultas del mundo real y UIs existentes, en lugar de depender únicamente de guías generalizadas.

A través de nuestro trabajo, queremos crear métricas que permitan a los diseñadores verificar la uniformidad de sus UIs fácilmente. Esto puede ayudarles a determinar si algún cambio hace que el diseño de una app sea más o menos consistente.

#Recolección de un Conjunto de Datos para Análisis

Para validar nuestro método y su efectividad, recolectamos un conjunto de datos de un centro de capturas de pantalla de UI móvil. El nuevo conjunto de datos consiste en más de 300 apps móviles, con un promedio de 126 capturas de pantalla por app. Este número significativo nos proporciona material suficiente para probar nuestras nuevas metodologías de manera efectiva.

Muchos conjuntos de datos utilizados para el análisis de UI tienen limitaciones, como ser demasiado pequeños o no permitir comparaciones grupales. Nuestro nuevo conjunto de datos aborda estos problemas, facilitando un análisis integral.

#Representaciones de UI y Aumento de Imágenes

Utilizamos un modelo conocido como CLIP, que ha demostrado la capacidad de entender UIs y sus representaciones de manera efectiva. Al aplicar técnicas de aumento de imágenes, mejoramos la calidad de las representaciones derivadas de las capturas de pantalla.

Este enfoque aumentativo asegura que los modelos que usamos estén bien equipados para analizar diseños de UI. La capacidad del modelo CLIP para procesar conjuntos de datos no vistos lo posiciona como una herramienta valiosa para entender varias UIs.

#Medición de Uniformidad para la Consistencia del Diseño

A medida que evaluamos la consistencia del diseño, nos enfocamos en una métrica conocida como uniformidad. Esta métrica permite una evaluación de cuán consistentes son los diseños dentro de una app dada. Cuanto más baja es la uniformidad, menos consistente parece el diseño, y viceversa.

Para validar este enfoque, realizamos experimentos donde alteramos diseños existentes para ver cómo se veía afectada la uniformidad. Los resultados confirmaron que nuestra métrica es estable y efectiva para medir la consistencia en el diseño.

#Implicaciones para los Diseñadores

Con nuestros métodos propuestos, proporcionamos a los diseñadores nuevas herramientas para recuperar inspiraciones de UI de manera efectiva y verificar la consistencia del diseño. Estas mejoras buscan facilitar la vida de los diseñadores al simplificar el proceso de encontrar diseños similares, ayudándoles a mantenerse enfocados en crear aplicaciones de alta calidad.

#Trabajo Futuro

Aunque nuestros hallazgos iniciales son prometedores, se requieren más validaciones en el mundo real y estudios con usuarios para establecer la eficacia de nuestros métodos. A medida que avanzamos, nuestro enfoque estará en refinar estas herramientas para su uso práctico en entornos de diseño.

También planeamos explorar diferentes formas de analizar la consistencia de la UI agrupando capturas de pantalla con características o funciones específicas, en lugar de solo por app. Esto podría generar nuevos conocimientos y ayudar a los diseñadores a lograr sus objetivos de diseño.

#Conclusión

En conclusión, nuestro trabajo presenta avances valiosos en el campo del diseño computacional al mejorar las maneras en que los diseñadores pueden recuperar inspiraciones de UI y verificar la consistencia entre pantallas. Al aprovechar grandes conjuntos de datos y modelos robustos, podemos maximizar la efectividad de los procesos de diseño, facilitando a los diseñadores la creación de aplicaciones exitosas.

Las metodologías introducidas aquí buscan proporcionar un puente entre la inspiración de diseño y la consistencia, fomentando un enfoque más fluido e integrado en el diseño de UIs. A medida que la tecnología sigue evolucionando, estamos emocionados por explorar más posibilidades en este ámbito.