Diseño UX: de la pantalla a los átomos y viceversa

Las tarifas freelance de diseño UX se benefician al entender el Atomic Design desde la perspectiva del usuario.

                                                            
                                                  .        :
         .                . . . . .             .      :    
. (o)                 ..  (   |   )  ..       . :           
    \               .    (    |    )    .                 . 
                   .---------------------.                  
                  .     (     |     )     .        +        
:    :           .      (     |     )      .         .      
                 .-------------------------.       .        
.                .      (     |     )      .                
                  .     (v    |     )     .                 
                   .-----*---------------.                  
                    .    (    |    )    .                   
            :         . . (   |   )  ..             .       
    .                     . . . . .                    .    
                                                         .  
.  .                              :         [ UX GLOBAL ]   
          .    : .                                          

Puntos clave

• El Atomic Design no es un proceso lineal, sino un modelo mental para ver el todo y sus partes simultáneamente.
• Priorizar la experiencia del usuario al iniciar un proyecto de diseño es más efectivo que empezar por los componentes.
• La elección de iconos y la estructura de navegación impactan directamente la usabilidad y la percepción del usuario.

UX: más allá de los términos

El diseño de experiencia de usuario (UX) abarca múltiples disciplinas, a menudo confundidas entre sí. Nielsen Norman Group señala que términos como UX, UI, CX y diseño visual se usan indistintamente, aunque describen campos de práctica distintos. Esta falta de estandarización se refleja en los 134 títulos de trabajo únicos reportados en su encuesta de carreras UX. Para quienes cotizan servicios de diseño UX/UI app móvil o diseño UX/UI sitio web (5 páginas), comprender estas diferencias no solo valida su experiencia, sino que también ayuda a definir el alcance de sus propuestas y a justificar sus tarifas freelance. Un freelancer que domina el análisis de datos de usuario o la creación de prototipos interactivos puede ofrecer un valor diferenciado.

Diseño atómico: del usuario al componente

UX Collective destaca que el Atomic Design, un modelo clave en los sistemas de diseño, no siempre debe construirse desde los átomos. Aunque la práctica común es definir las partes más pequeñas y luego ensamblar bloques mayores, el trabajo de producto suele empezar desde la experiencia del usuario. La pregunta inicial no es "¿qué componentes se usan aquí?", sino "¿qué necesita hacer el usuario?". Este enfoque, que el artículo denomina "scope-first", permite desglosar una pantalla comenzando por el alcance de cada acción del usuario. Para los freelancers que ofrecen design system completo o diseño de interfaces de usuario, adoptar esta perspectiva puede llevar a soluciones más centradas en el cliente y a una mejor justificación de sus tarifas.

Iconos y usabilidad: la elección importa

La usabilidad de los elementos de interfaz es un detalle que no se puede pasar por alto. Smashing Magazine revela que la elección de iconos para expandir y colapsar secciones, como los acordeones, tiene un impacto notable. Sin un icono, los usuarios esperan que al tocar un elemento se abra una nueva página. El artículo aconseja que "la elección segura es usar el caret/triángulo apuntando hacia abajo por defecto, y cambiarlo a un caret apuntando hacia arriba o un caret apuntando hacia los lados en la interacción". Evitar botones divididos, donde el texto y el icono realizan acciones diferentes, también mejora la claridad. Para quienes trabajan en diseño de iconos o diseño de elementos de navegación, estas recomendaciones son directas para mejorar la experiencia del usuario y, por ende, el valor de su trabajo.

El template como gestor de lógica

UX Collective sugiere una visión extendida del rol de los templates en el Atomic Design. En pantallas de productos con mucha información, el nivel de template puede ser el lugar natural para gestionar la lógica de cómo los componentes interactúan entre sí, más allá de solo definir el layout. Por ejemplo, un filtro puede reiniciar la paginación a la primera página. Esta lógica, que no pertenece a los componentes individuales para mantener su reusabilidad, encuentra su hogar en el template. Esto es relevante para freelancers que ofrecen desarrollo de API REST/GraphQL Completa o integración frontend con API, ya que les permite estructurar proyectos de manera más robusta y escalable, ofreciendo un servicio más completo a sus clientes en Latinoamérica, España o Estados Unidos.