Saltar al contenido

Diseño Atómico (Glosario de UX)

El diseño atómico es una metodología que propone construir la interfaz en base a un pequeño grupo de componentes atómicos y un conjunto de reglas para agruparlos en componentes cada vez más complejos.

diseño atómico por Brad Frost

Tanto en la naturaleza como en las creaciones humanas los infinitos sistemas existentes, independientemente de su complejidad, están formados de pequeñas piezas atómicas. Desde la materia misma, formada literalmente por átomos y los organismos vivos formados por células, hasta el lenguaje formado por letras de un alfabeto y las composiciones musicales formadas por un puñado de notas y escalas.

El diseño UX no es la excepción. A diferencia de lo que se podría presuponer, una interfaz concebida en dos pasos, primero definiendo un pequeño grupo de componentes atómicos y un conjunto de reglas de agrupación, seguido por una segunda instancia en la que en base a estas reglas se definen componentes cada vez más complejos, produce interfaces más potentes y flexibles que el diseño de cada página del sitio por separado en base a requerimientos y plantillas. Y lo hace a un costo menor, con mayor estabilidad en el tiempo y con un resultado más usable y accesible.

A diferencia de lo que se podría presuponer, una interfaz concebida en dos pasos produce interfaces más potentes y flexibles

Si bien la idea parece incontestable y los beneficios justifican largamente su adopción, esto no resulta evidente en todos los casos, sobre todo al comienzo de un proyecto: los dos pasos en la construcción pueden llegar a ser más trabajosos, no tanto por el tiempo sino por la necesidad de alinear a la organización que diseña e implementa el producto basado en software detrás de la idea. Sumado a eso, como la mayoría de los beneficios de la Usabilidad, el resultado es impactante a mediano plazo, pero no siempre de inmediato, lo que redunda en poco apoyo de otras áreas de la organización acuciadas por los cronogramas y la necesidad de obtener logros ya.

Consistencia interactiva

Es muy importante tener en cuenta al aplicar la metodología de diseño atómico que la consistencia a nivel de interacción es aún más relevante que la consistencia visual o gráfica.

Desde los átomos se debe definir cómo se comportan en la interfaz los elementos. Qué sucede con ellos cuando se clickean, arrastran, editan, deshabilitan, copian, pegan o cualquier otra acción que tenga sentido en cada caso. Al agruparlos estos átomos en moléculas un escalón más arriba en la complejidad, es imprescindible definir el comportamiento interactivo del nuevo elemento: cómo se relacionan entre ellos los átomos que forman la molécula. Qué sucede con un campo cuando hago click en su etiqueta.

Allí donde se despliegue un elemento, siempre tendrá las mismas propiedades interactivas, independientemente del tamaño que ocupe en la pantalla.

Y este proceso sigue hasta la construcción de plantillas y páginas completas, generando una interfaz sólida a partir de la consistencia: allí donde se despliegue un elemento, siempre tendrá las mismas propiedades interactivas, independientemente del tamaño que ocupe en la pantalla.

los componentes de la interfaz deben tener un comportamiento homogeneo
Los elementos de la interfaz deben tener definido cómo utilizan el espacio en la pantalla y comportarse siempre igual independientemente del tamaño que se les asigne.

Un elemento relevante es la definición de cómo los organismos y otros elementos más complejos utilizan el espacio de la pantalla. Deben tener especificado cómo se representan en espacios de distinto tamaño, y cómo brindan desde ese espacio, sobre todo cuando es pequeño, acceso al conjunto de la funcionalidad para mantener la consistencia.


La idea de diseño atómico, introducida por Brad Frost en 2012 tiene un potencial enorme, producto de su simplicidad y fácil comprensión. Desde su nacimiento se ha difundido rápidamente, generando altos niveles de adopción y satisfacción de diseñadores, implementadores y usuarios.

____

Taller Intensivo de Diseño de la Interacción

Un entrenamiento práctico con tutoría para desarrollar y/o profundizar tus habilidades como diseñador, a través del análisis del proceso del Diseño.

Una oportunidad de crecer profesionalmente, con el apoyo de un equipo docente de calidad, trabajando en equipo con casos de la vida real.

Próximo comienzo: 12 de octubre

Solicitar InformaciónInscripciones

Deja una respuesta

Tu dirección de correo electrónico no será publicada.