¿Sistemas de diseño nativos o customizados?

El mundo del diseño y la tecnología evoluciona constantemente, y con ello, la importancia de los sistemas de diseño se vuelve cada vez más evidente. Un sistema de diseño es mucho más que un simple catálogo de elementos, debe incluir guías claras para el uso de los mismos de forma consistente.

Un sistema de diseño es una colección de componentes reutilizables, guiados por estándares claros, que pueden ensamblarse para construir cualquier cantidad de aplicaciones – Marco Suarez, Design System Lead en Invision

En esencia, un sistema de diseño nos proporciona un conjunto de elementos fundamentales, como contenedores, imágenes, iconos y estilos de texto, que combinamos para construir composiciones más complejas. Estas composiciones tienen un propósito y sentido específicos y se utilizan en diversas pantallas y dispositivos, desde teléfonos móviles hasta tablets y más allá.

La importancia de la coherencia y la familiaridad

La clave de un sistema de diseño es que todo lo que se encuentra dentro de nuestra aplicación mantiene una coherencia que facilita su uso y genera familiaridad para los usuarios. La familiaridad es crucial, ya que permite a los usuarios interactuar con nuestra aplicación sin necesidad de aprender nuevos patrones de uso. Esto es especialmente relevante en un mundo donde los usuarios pasan mucho tiempo utilizando diversas aplicaciones y sitios web.

Los usuarios pasan la mayor parte de su tiempo en otros sitios web, por lo que esperan que su sitio funcione como todos los demás sitios que ya conocen. – Jakob Nielsen

La Ley de Jacob de la Usabilidad establece que los usuarios pasan la mayoría de su tiempo en otros sitios web o aplicaciones y esperan que nuestras aplicaciones sigan patrones familiares. Por tanto, al diseñar experiencias dentro de nuestras aplicaciones, debemos considerar cómo se integran con la plataforma sobre la que operan. 

La familiaridad hace que tengamos ciertas expectativas, y las expectativas generan hábitos de comportamiento. Y una realidad a la que nos enfrentamos cuando diseñamos experiencias es que las personas que usan productos digitales no van a cambiar de hábitos, es el diseño el que debe adaptarse a ellas.

¿Cuánto puedo customizar?

Afortunadamente, las plataformas modernas ofrecen bastantes grados de flexibilidad para customizar aspectos visuales sin romper totalmente la coherencia con el sistema de diseño nativo. Por ejemplo, Jeff Verkoeyen, ingeniero jefe de Google Design, anunció en 2021 que abandonaban el uso de componentes customizados en el desarrollo de apps de Google para iPhone y iPad. Esta decisión, muy aplaudida por el sector, fue posible precisamente por esa flexibilidad de adaptación de los componentes nativos.

También es posible combinar componentes nativos con algunos diseñados específicamente para nuevas interacciones o casos de uso muy concretos para los que no hay patrones asentados. Para que tus esfuerzos de customización tengan éxito, analiza cada componente como una pieza con múltiples niveles.

Las Capas de un Componente

Imagina un componente como una caja con múltiples capas, cada una desempeñando un papel crítico. Estas capas también presentan diferentes grados de flexibilidad a la hora de ser customizadas:

Significante (Signifier): Esta capa es la primera que encontramos al analizar un componente. Es la representación visual, sonora o háptica que permite al usuario entender qué significa este componente y qué se puede hacer con él. Está muy relacionado con el Feedback, que también se basa en los mecanismos sensoriales para comunicar al usuario eventos relacionados con el componente o resultados de su interacción.

Affordance: El affordance es lo que el componente permite hacer. Por ejemplo, un botón permite ser apretado, un enlace ser clicado, y una rueda ser girada. El significante y el affordance son codependientes.

Interacción: En esta capa se define cómo el usuario puede interactuar con el componente para llevar a cabo la acción asociada, y constituye la parte práctica de la experiencia del usuario. Toda interacción debe tener, además, asociado un feedback que oriente al usuario durante dicha interacción.

Patrón de uso: Finalmente, el patrón de uso responde a cómo asociamos el uso de un componente en ciertos escenarios. Depende de los modelos mentales de los usuarios, es decir, sus hábitos y expectativas. Los modelos mentales y los patrones de uso asociados se desarrollan a lo largo del tiempo y se convierten en parte integral de la experiencia.

Flexibilidad en la Personalización

No todas las capas de un componente son igualmente flexibles. Mientras que las características sensoriales, como lo visual, pueden ser altamente personalizables, la ‘affordance’ y la interacción tienen límites más estrictos. Esto es crítico para evitar confusiones y mantener la efectividad del diseño.

Puedes jugar con colores, animaciones y otros aspectos visuales sin comprometer la funcionalidad cuando customizas los significantes o la forma de dar feedback, logrando un toque distintivo a tus componentes. Sin embargo, la flexibilidad en un affordance o en un patrón es mucho más limitada. Por ejemplo, un botón que parezca un interruptor de luz no debería, en realidad, abrir una nueva ventana. 

Aunque es posible proponer nuevos affordances y cultivar patrones y modelos mentales, solamente tiene sentido cuando realmente aportamos algo nuevo y diferente, como cuando Tinder propuso en su día el swipe como modelo de interacción. No competía con ningún affordance ni patrón existente, por tanto, pudo establecerse sin demasiada resistencia.

Para recordar

• El mundo no gira en torno a nuestras apps. Recuerda que nuestras apps comparten espacio con otras en dispositivos de usuarios. Debemos aprovechar las convenciones de los sistemas nativos a los que los usuarios están acostumbrados en lugar de imponer cambios radicales.
• Equilibrio entre diferenciación y estandarización: Buscar una identidad visual única para nuestra marca, pero sin comprometer la funcionalidad y comprensión del usuario. Personalizar componentes visuales manteniendo la estandarización de las interacciones.
• Aprovecha la flexibilidad de cada elemento sin forzarla. Por ejemplo, la personalización visual y de feedback tiene flexibilidad alta, pero la comunicación de lo que se puede hacer tiene límites. No debemos alejarnos demasiado de cómo los usuarios esperan ver las cosas, ya que podríamos provocar confusión y frustración.
• Utiliza variables (tokens) para customizar los sistemas nativos. La personalización inteligente a través de variables es poderosa. Personalizar sistemas de diseño nativos con flexibilidad controlada para diferenciación equilibrada sin sacrificar la coherencia y familiaridad de la experiencia del usuario.

Referencias:

– Deng, Tao et al. Measuring smartphone usage and task switching with log tracking and self-reports. Mobile Media & Communication
– Google iOS apps to use native design elements instead of material design. iThinkDifferent
– Laws of Ux: Jakob’s Law
– iOS vs. Android App UI Design: The Complete Guide