El futuro del diseño de la interfaz de usuario: herramientas de interfaz de usuario de próxima generación

Las herramientas de diseño de interfaz de usuario han recorrido un largo camino desde la primera generación de Adobe Photoshop, un programa destinado a editar fotos, no a crear interfaces de usuario dinámicas. La generación actual de herramientas, como Adobe XD, Figma y Sketch, han hecho que nuestro trabajo sea más fácil y rápido.

Sin embargo, abundan las ineficiencias en nuestros flujos de trabajo diarios y estamos desperdiciando tiempo y recursos preciosos cuando podríamos estar diseñando productos que la gente quiera usar. Los programas de diseño disponibles en la actualidad son superiores a los que empezamos, pero no logran capitalizar la tecnología actual y nos impiden desarrollar todo nuestro potencial como diseñadores de UI.

Es hora de una nueva generación de herramientas de interfaz de usuario.

Integrando diseño y código

Las futuras herramientas de interfaz de usuario unirán el diseño y el código para brindar una experiencia más fluida a los diseñadores y desarrolladores. Nuestras herramientas actuales no nos ayudan a diseñar interfaces de usuario web; nos están ayudando a diseñar representaciones abstractas de interfaces de usuario web. Las maquetas realizadas en Figma y Sketch están desconectadas del código fuente.

Hoy en día, muchos diseñadores conocen los conceptos básicos de HTML y CSS. Algunos de línea dura diseñan en código, pero eso no es efectivo para proyectos complejos; los diseñadores necesitan la capacidad de explorar una prueba de concepto rápidamente antes de comprometerse con ella.

Los desarrolladores de software tienen Visual Studio Code, una herramienta que une la edición y el desarrollo de código y permite a los ingenieros crear, probar y depurar código en el mismo entorno. Del mismo modo, los diseñadores necesitan un entorno de desarrollo visual que proporcione capacidades de diseño completas pero que también genere código listo para la producción.

Esto es lo que depara el futuro.

La creación paralela reemplazará las entregas de diseñador/desarrollador

Hay demasiadas idas y venidas entre diseñadores y desarrolladores, especialmente durante la fase de transferencia. En algunos casos, el traspaso consume tanto tiempo y es tan agotador que la calidad del trabajo se ve afectada. Con las herramientas de diseño de próxima generación interactuando con el código fuente, los desarrolladores ya no serán los únicos responsables de crear interfaces de usuario. En su lugar, podrán concentrarse en desarrollar la arquitectura lógica que conecta la interfaz de usuario de un producto con su back-end y hace que funcione correctamente.

Los diseñadores sentarán las bases de las interfaces de usuario con el código incorporado, y los desarrolladores se basarán en este código para dar vida a los productos. Los diseñadores ya no tendrán que molestar a los desarrolladores con solicitudes como "Agregue 16 px de relleno en lugar de 8 px, como se muestra en la maqueta". Y los desarrolladores no tendrán que hacer una pausa para hacer preguntas de diseño como "¿Cómo debería escalar este componente entre los puntos de interrupción de la tableta y el escritorio?"

En su lugar, los diseñadores y desarrolladores se asociarán en cuestiones más importantes, como si un enfoque de diseño es viable dado el tiempo y el presupuesto o si se han abordado todos los estados de un componente de la interfaz de usuario.

Las herramientas de diseño de interfaz de usuario y el software de desarrollo se alinearán

Las herramientas actuales se basan en modelos de programación personalizados para generar componentes de diseño. Por lo general, estos modelos no son tan sólidos como CSS y no permiten que los diseñadores vean el código generado automáticamente que subyace a sus archivos de diseño, código que en última instancia debe exportarse a HTML, CSS o JavaScript. Sería mucho más sencillo si nuestras herramientas utilizaran HTML y CSS de forma nativa.

Por ejemplo, CSS usa el modelo de caja, que exige colocar los elementos HTML en cada página dentro de una caja codificada para definir su altura, ancho, borde y relleno. Figma se acerca a proporcionar esta capacidad con su función de diseño automático. Pero si Figma usara el modelo de caja que ya funciona con la mayoría de las interfaces de usuario web, los desarrolladores tendrían que traducir y exportar menos.

Lo mismo ocurre con la herencia de estilo, que controla lo que sucede cuando no se especifica ningún estilo para un elemento específico, de forma similar a un valor predeterminado. CSS lo usa, pero la mayoría de las herramientas de diseño, que no fueron creadas para ser específicas de la web, no lo hacen.

Necesitamos nuestras herramientas para generar vistas web, no mesas de trabajo estáticas o maquetas. No necesitamos simuladores de HTML y CSS. Necesitamos HTML y CSS.

Las maquetas quedarán obsoletas

En lugar de maquetas desechables, tiremos las maquetas por la puerta.

Las maquetas dejan demasiadas preguntas sin respuesta. Es inviable diseñar uno para cada entorno digital. Hoy en día, los diseñadores crean diseños para anchos de pantalla de 320 px, 834 px y 1440 px; pero, ¿qué sucede si parte del diseño se rompe en una ventana gráfica de 1220 px? ¿Y por qué no optimizar para 375 px, un tamaño común para los teléfonos más grandes de la actualidad?

Crear una mesa de trabajo para cada escenario no es práctico, especialmente cuando se consideran todos los puntos de interrupción y vistas, sin mencionar los temas oscuros. Diseñar para todas estas variables aumenta la cantidad de mesas de trabajo más allá de lo razonable.

Las maquetas también son un desperdicio de recursos. Requieren mucho tiempo de construcción y se han vuelto menos prominentes en el diseño de productos digitales. Webflow ha eliminado las maquetas y, en cambio, aboga por prototipos interactivos y receptivos. (Desafortunadamente, Webflow se limita a soluciones basadas en la web y se adapta a sitios web simples). Y si bien los entregables desechables pueden tener sentido durante la ideación, son un desperdicio durante la fase de solución.

Se tendrán en cuenta todos los estados del sistema

Todos los productos digitales tienen estados que corresponden a lo que están haciendo en un momento dado, por ejemplo, detenerse durante la carga o mostrar un mensaje de error.

Se deben considerar todos los estados, pero las herramientas de interfaz de usuario actuales dejan esta tarea a los diseñadores, obligándolos a crear numerosas variantes de un solo componente. Las herramientas de desarrollo React y Vue.js permiten a los desarrolladores ajustar fácilmente todos los estados posibles de un componente. Las herramientas de diseño deben hacer lo mismo y alentar a los diseñadores, incluso regañarlos, para garantizar que todos los estados de los componentes estén diseñados.

Los datos reales reemplazarán el contenido del marcador de posición

Así como los diseñadores crean componentes para múltiples estados, también diseñan para una amplia variedad de datos. Los diseñadores de UI deben poder probar sus componentes con la entrada real (la copia, las imágenes, las fechas, los nombres, los títulos y más) que finalmente completarán los componentes en sus diseños. Actualmente, los diseñadores solo pueden simular datos copiándolos y pegándolos manualmente en mesas de trabajo, una tarea extremadamente tediosa. Existen complementos que pueden ayudar a automatizar este proceso, pero son engorrosos.

Pedirle a los desarrolladores que evalúen cómo los componentes manejan los datos tampoco es la respuesta. En el momento en que los componentes llegan a las pruebas, lleva demasiado tiempo rediseñarlos. Y si los diseñadores no pueden probar e iterar componentes con datos reales, ¿cómo sabrán si una tarjeta funciona con un título largo o sin ningún título? ¿Cómo descubrirán que una fuente no admite caracteres árabes o que un sitio no admite idiomas que se leen de derecha a izquierda?

Las pruebas de casos extremos serán más fáciles

Cuando las herramientas de la interfaz de usuario finalmente se adapten a todos los estados y permitan la prueba de datos reales, los diseñadores podrán anticipar mejor los casos extremos. Una vez que se crea un componente, los diseñadores realizarán pruebas de estrés en sus diversos estados, explotándolo con diversos datos para ver cómo se desempeña en diferentes escenarios. De esta manera, la interfaz de usuario se convertirá en el dominio del diseñador, lo que liberará a los desarrolladores para que se concentren en tareas como corregir JavaScript o probar las API.

Se abrirá un mundo de herramientas para desarrolladores y extensiones de navegador de terceros

Una vez que nuestro trabajo viva en HTML y CSS, todo un ecosistema de extensiones estará disponible durante la fase de diseño, como el indispensable Lighthouse para auditorías de rendimiento, SEO y accesibilidad, o las diversas herramientas de desarrollo de navegadores que simulan puntos de interrupción de dispositivos y bajas velocidades de red. El conjunto de herramientas del navegador es mucho más valioso para crear y probar interfaces de usuario listas para producción que cualquiera de los complementos en Figma, Sketch o Adobe XD.

Los diseñadores y desarrolladores trabajarán en paralelo

Comparo el estado actual del desarrollo de productos con una cocina en la que un chef intenta cocinar un plato diciéndole a otro chef qué hacer: podría funcionar, pero llevará mucho más tiempo y será mucho menos eficiente. Hay empresas que desarrollan herramientas de diseño basadas en código: Hadron, Modulz y Relate tienen productos en versión beta. La adopción generalizada de estas herramientas marcará el comienzo de una revolución en la creación de productos digitales.

También señalará un cambio radical en la relación diseñador-desarrollador. Con los dos lados trabajando en paralelo, los equipos de productos serán exponencialmente más eficientes. Los desarrolladores tendrán la libertad de abordar la lógica compleja de la arquitectura de la interfaz de usuario en lugar de perder el tiempo interpretando maquetas o atascados por los diseñadores que les piden que lleven los píxeles a la perfección. Y los diseñadores serán más valiosos para sus equipos y empresas a medida que se conviertan en co-creadores de productos digitales exitosos.