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.
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á.
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á.
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
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.
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 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
Referencias
Formación relacionada