Diseño atómico y elementos digitales

El término “página web” es una reminicencia del pasado académico de la web, y ha sido una metáfora útil para acercar a los usuarios finales a esta tecnología. Desde la perspectiva de diseño, es necesario de ir más allá de hacer páginas para comenzar a crear sistemas multiplataforma.

Con el tiempo, la Web ha evolucionado y ya no está confinada al escaparate de un navegador web en una PC, sino que ha dado el salto a una enorme cantidad de dispositivos diversos, desde dispositivos móviles como smartphones hasta televisiones inteligentes, todos con diferentes capacidades, tamaños de pantalla, formatos y métodos de interacción.

Algunos de los dispositivos con los que las personas navegan la web
Algunos de los dispositivos que las personas usan para navegar en la web.

En este multiverso tecnológico, los profesionistas que crean, diseñan y mantienen la web se benefician al utilizar métodos y mejores prácticas que ayuden a mantener la consistencia y la escalabilidad de sus proyectos. Un concepto que se usa con frecuencia en pláticas sobre diseño de experiencia de usuario es la modularidad. Es aquí donde entran los conceptos de Diseño Atómico.

La metodología de Diseño Atómico

Diseño Atómico (Atomic Design) es una metodología de diseño creada por Brad Frost enfocada en la reutilización acumulativa de elementos modulares sencillos para crear estructuras de información más complejas.

El Diseño Atómico no se trata de diseñar una sola instancia de una página web a la vez, sino que vistos desde un punto de vista más amplio, se usa para crear la base de sistemas más grandes. El Diseño Atómico ayuda a que el diseño interactivo pueda adaptarse rápidamente a diferentes dispositivos, y es compatible con procesos de diseño centrado en el usuario, ya que se puede implementar desde las etapas tempranas de diseño usando sketches y prototipos.

La metodología de Diseño Atómico  se compone de cinco capas que trabajan juntas para crear interfaces y sistemas:

Los elementos del Diseño Atómico

1. Átomos

En esta metodología, los átomos son los elementos básicos que se utilizan en la construcción de interfaces digitales que no pueden ser reducidos en componentes más simples sin perder su funcionalidad. Los átomos de una página web incluyen las etiquetas básicas de HTML como párrafos, campos de texto, botones y  etiquetas, así como elementos básicos de estilo como colores y tipografías.

Átomos en HTML
Átomos en HTML

La tabla periódica de elementos HTML de Josh Duck ilustra de manera muy clara como todos nuestros sitios web, web apps, mensajes de correo, intranets y cualquier cosa que se visualice con un navegador web están compuestos de los mismos elementos:

Tabla periódica de elementos HTML
Tabla periódica de elementos HTML

2. Moléculas

En el diseño de interfaces, las moléculas son grupos relativamente simples de elementos visuales que funcionan juntos como una unidad. Un ejemplo sería juntar un campo de texto, una etiqueta de formulario y un botón para crear la molécula de un formulario de búsqueda.

Molécula de búsqueda
Molécula de búsqueda

Cuando se combinan, estos átomos tienen un propósito nuevo: la etiqueta define la entrada del campo, y el botón envía la información del formulario para ejecutar una búsqueda. El resultado es un componente simple y reutilizable que puede ser incluirse en cualquier sistema que necesite la funcionalidad de búsqueda.

3. Organismos

Los organismos son componentes de UI relativamente más complejos compuestos por átomos, moleculas y otros organismos. Los organismos se integran para crear las diferentes secciones de una interfaz.

Si a nuestra molécula de búsqueda le agregamos algunos elementos más, podremos obtener el organismo del encabezado, un elemento común en muchas páginas web.

Organismo de Encabezado
Organismo de Encabezado

4. Plantillas

Las plantillas son objetos a nivel de página –noten como aquí abandonamos la metáfora de elementos químicos y regresamos a elementos editoriales– que utilizan componentes basados en átomos, moléculas u organismos en una distribución que hace tangible la estructura general de contenido.

Plantilla con contenedores
Plantilla con contenedores para contenido

Las plantillas organizan los componentes básicos y les agregan contexto para que la página funcione correctamente. Otra característica importante de las plantillas es que se enfocan en la estructura del contenido en lugar del contenido final de la página. Los sistemas dinámicos deben poder adaptarse a contenido dinámico que cambia todo el tiempo, y las plantillas proveen los mecanismos para definir las propiedades de los componentes que las integran, como el tamaño y alineación de sus imágenes o la longitud y estilo de sus encabezados y párrafos.

5. Páginas

Las páginas son instancias específicas de las plantillas que utilizan contenido real. Si tomamos la plantilla de la capa anterior y la llenamos contenido real en sus contenedores podremos ver el resultado final del proceso.

Página con contenido final
Página con contenido final

Ventajas de utilizar Diseño Atómico

Como mencionaba al principio, una de las principales ventajas de utilizar esta metodología es que está enfocada en la modularidad, lo que permite crear elementos simples que pueden reutilizarse constantemente en equipos de diseño y desarrollo de cualquier tamaño sin perder la consistencia del diseño final.

La modularidad del Diseño Atómico también habilita la transversalidad entre los componentes abstractos y concretos del diseño, lo que permite generar diferentes patrones de interfaz reutilizando los mismos elementos al reorganizar su arquitectura y crear nuevos contextos para ellos.

Modularidad y reutilización de elementos atómicos
Modularidad y reutilización de elementos atómicos

El Diseño Atómico es muy útil para crear un sistema de lenguaje de diseño (Design Language System o DLS) para crear prototipos y código más eficiente y que cualquier persona en el equipo de producción puede entender y utilizar para procesos de diseño y desarrollo más rápidos y productivos. Al final, el Diseño Atómico no es un proceso lineal, sino un modelo de pensamiento sobre el que se puede iterar para crear sistemas complejos partiendo de elementos sencillos.

Equipos de productos reales, como el de Airbnb se han beneficiado al implementar Diseño Atómico en sus procesos de diseño y desarrollo, integrándolo a las metodologías que ya utilizaban previamente.

Elementos de diseño en Airbnb creados con Atomic Design
Elementos de diseño en Airbnb creados con Atomic Design

Brad Frost y Dave Olsen crearon un generador de elementos llamado Pattern Lab, basados en los principios de Diseño Atómico. Este generador está creado con el principio de “Móvil primero” (mobile first) con opciones para ajustar el tamaño de las páginas y de agregar comentarios a las secciones del sitio y a los bloques de construcción a nivel de código.

Pattern Lab, un generador de elementos para Atomic Design
Pattern Lab, un generador de elementos para Atomic Design

La versión original de Pattern Lab está escrita en PHP, pero ya hay dos versiones para NodeJS: una para Gulp y otra para Grunt. Recomiendo ampliamente jugar un poco con el demo en la herramienta para entender mejor cómo funciona una implementación real de Diseño Atómico.

* * *

Vale la pena recordar que la diversidad en los dispositivos con los que nuestros usuarios navegan la web o consumen información no se detendrá, sino que seguirá creciendo de manera acelerada, y posiblemente los modelos de diseño y desarrollo tradicionales no soportarán esa diversidad sin adaptarse a formas más ágiles de trabajo. Diseño Atómico es una metodología que  puede ayudarnos a crear sistemas e interfaces que se pueden adaptar a cualquier entorno.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

Lenguajes para prototipado: Jade

El diseño de experiencia de usuario es, por necesidad, una labor colaborativa y multidisciplinaria. Si decimos que ‘todos somos diseñadores’, ¿por qué no todos podemos también aportar código?

Un equipo que realiza diseño centrado en el usuario debe de contar entre sus miembros con al menos un diseñador que materialize la parte visual del proyecto y un programador que realice la ejecución técnica.

Aunque todavía hay empresas que continúan en la búsqueda del mítico Unicornio de UXuna rara criatura, mitad diseñador y mitad programador-, para la mayoría de los equipos de UX uno de los principales retos es lograr que sus miembros puedan trabajar y comunicarse de una manera coherente.

En el caso de la relaProgramando en HTMLción del dúo diseñador / programador, uno de sus principales problemas es la capacidad de cada uno de generar código útil para producción, y es un problema porque la mayor parte de esa responsabilidad normalmente cae en el programador, que debe lidear con la complejidad de volver tangible una visión de diseño que surge de bocetos en papel, dibujos en un programa de diseño o en el mejor caso, de un prototipo cuyo código no es reutilizable.

Éste es en parte, un problema creado en parte por la formación de los diseñadores a los que les hacen creer que escribir código es algo complejo y en parte por la falta de herramientas correctas para diseñar código usable. Hay una larga lista de programas de diseño WYSIWYG (What you see is what you get – Lo que ves es lo que obtienes) que ofuscan el código para que el diseñador no lo vea, pero que al final producen código poco eficiente y complejo que el diseñador que lo hizo no puede entender y que para integrarlo a un producto real requiere retoques del programador que deberá darle mantenimiento en lo sucesivo.

Lo que ves es lo que quieres decir

Una buena práctica de desarrollo es la separación en capas de los componentes de presentación, contenido y lógica para asignar responsables a cada una y después integrarlos; así la actualización de una capa por mantenimiento no obliga a las otras a cambiar a menos que cambien los requerimientos del proyecto.

El desarrollo para web en el navegador está diseñado de esta manera, dejando el contenido a HTML, la presentación de CSS y la lógica de la aplicación a Javascript. Idealmente la generación de HTML y CSS debería ser lo suficientemente sencilla para el diseñador de manera que pudiera enfocarse en qué está haciendo, y no en cómo lo está haciendo.

Estructura de una página web con HTML, CSS y Javascript en archivos separados
Estructura de una página web con HTML, CSS y Javascript en archivos separados

Para lograr eso es necesario dejar los generadores de código visuales WYSIWYG por el modelo WYSIWYM (What you see is what you mean – Lo que ves es lo que quieres decir). En este modelo el diseñador se encarga de introducir el contenido de forma estructurada siguiendo su valor semántico en lugar de indicar su formato de representación final.

Jade – un lenguaje sencillo para plantillas web

Logo de JadeUna herramienta que puede servir justo a este propósito es Jade, un sistema para generación de plantillas HTML hecho para trabajar con NodeJS y que puede usarse como lenguaje para prototipado.

Jade utiliza un metalenguaje -casi mecanografía- basado en la notación de HTML que ha sido simplificado para ser breve, consciso y fácil de recordar.

Este es un ejemplo de una página web escrita en Jade:

doctype html
html(lang="es")
  head
    title Jade
  body
    h1 Jade - sistema de plantillas para Node
    #container.col
      if youAreUsingJade
        p ¡Gracias por usar Jade!
      else
        p Deberías usar Jade
      p.
        Jade es un lenguaje de plantillas práctico y simple 
        enfocado en tener buen desempeño y características poderosas.

que genera el siguiente código HTML:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Jade</title>
  </head>
  <body>
    <h1>Jade - sistema de plantillas para Node</h1>
    <div id="container" class="col">
      <p>¡Gracias por usar Jade!</p>
      <p>
        Jade es un lenguaje de plantillas práctico y simple enfocado en tener un buen desempeño y características poderosas.
      </p>
    </div>
  </body>
</html>

Es así de simple.

Jade se encarga de generar código HTML bien formado. En un ejemplo para generar una lista numerada escribimos:

ol
 li Elemento A
 li Elemento B
 li Elemento C

que genera en HTML:

<ol>
      <li>Elemento A</li>
      <li>Elemento B</li>
      <li>Elemento C</li>
</ol>

Jade también pueden utilizar variables y condicionales de Javascript para generar código HTML según su configuración:

var user = { description: 'Usuario frecuente' }
var authorised = false
#user
 if user.description
   h2 Descripción
   p.description= user.description
 else if authorised
   h2 Descripción
   p.description.
     El usuario no tiene descripción, ¿por qué no añades una?
   else
     h1 Description
     p.description El usuario no tiene descripción

en HTML:

<div id="user">
     <h2>Description</h2>
     <div class="description">Usuario frecuente</div>
</div>

Existe documentación sobre cómo escribir en Jade, y en general se puede comenzar a utilizar en poco tiempo. No es necesario tener un servidor, se puede instalar de manera local en un equipo de desarrollo / diseño, y tanto NodeJS como Jade son gratuitos.

Jade puede ser una herramienta útil para prototipar y generar código para prototipos funcionales usando como guía los bocetos y prototipos en papel, los archivos de Jade son compactos, fáciles de leer por humanos y es muy sencillo editarlos y compartirlos.

Lo mejor es que el HTML generado por Jade puede integrarse después al código en producción con poco esfuerzo, ya que su salida es de alta calidad y es compatible con otras librerías y frameworks que se usan en desarrollo web como Bootstrap, JQuery o AngularJS entre otros.

¿Es esto suficiente para habilitar a los diseñadores a escribir código? Tal vez no, pero es un buen acercamiento a resolver el problema y una buena idea para prototipar rápidamente con código para que todos los miembros de un equipo y no solo los desarrolladores puedan aportar código útil a un proyecto.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

Accesibilidad para sitios web

La accesibilidad en aplicaciones web para usuarios invidentes no es difícil de implementar, si se conocen las especificaciones que le dan soporte, como WAI ARIA.

De acuerdo con el último censo de INEGI en el año 2010, en México había entonces cerca de 1,292,201 personas con discapacidad visual, esto es poco más del 1% de la población del país. Si sumamos a las personas que no son completamente invidentes pero tienen algún problema visual el número sube a 48,575,560 personas, o al 43.24% de la población, de los que la tercera parte son niños en edad escolar.

En México la segunda discapacidad más común es la visual, y es la más temida por la población en general. No es sorpresa si consideramos que de toda la información que una persona recibe en su vida, el 80% de ella ingresa por los ojos. Esto es particularmente cierto cuando hablamos de la web y de los medios digitales.

Muchas personas que trabajan diseñando o desarrollando sitios web creen que para hacer sus sitios accesibles es necesario una tecnología adicional a lo que ya utilizan. En realidad no se necesita nada adicional, sino tener en consideración algunas guías para que su trabajo sea accesible a todas las personas, incluyendo a las que tienen problemas visuales.

La W3C ha creado una especificación técnica para la implementación de accesibilidad para sitios web llamada WAI ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), enfocada especialmente a aplicaciones web que utilizan Javascript y AJAX, ya que estos patrones de desarrollo cambian dinámicamente el contenido de una página web, haciéndola poco accesible para personas que utilizan lectores digitales u otras tecnologías para usuarios con discapacidades.

WAI-ARIA describe cómo añadir contenido semántico y metadatos al contenido HTML para hacer los controles de la UI y el contenido dinámico más accesible. Por ejemplo, con WAI-ARIA es posible identificar enlaces en el menú de navegación incluso si éste se encuentra colapsado.

La especificación WAI-ARIA está basada en tres diferentes atributos: roles, estados y propiedades. Estos atributos tienen las siguientes funciones:

  • Roles (roles): describen algunos de los elementos y widgets comunes en la UI web pero que no están disponibles en HTML, como sliders, pestañas, etc., contruidos con HTML, CSS y JavaScript. También se utilizan para describir la estructura de la página incluyendo encabezados, tablas y otros elementos.
  • Propiedades (properties): describen los estados de los widgets. Por ejemplo, cuando un elemento en la página es “arrastrable”, tiene un elemento popup asociado con él.
  • Estados (states): describen si un elemento es interactivo o no, es decir, los ‘estados’ informan a los lectores digitales si el estado de un elemento en la página es ‘ocupado’, ‘deshabilitado’, ‘seleccionado’ u ‘oculto’.

Revisemos este código web sencillo para una navegación de pestañas:

<!-- ¿Cómo sabrías que este es un widget de pestañas solo viendo el código? -->

<ol>
    <li id="chapter1Tab">
        <a href="#chapter1Panel">Capítulo 1</a> 
    </li>
    <li id="chapter2Tab">
        <a href="#chapter2Panel">Capítulo 2</a>
    </li>
    <li id="quizTab">
        <a href="#quizPanel">Examen</a>
    </li>
</ol>

<div>
    <div id="chapter1Panel">Contenido del capítulo 1</div>
    <div id="chapter2Panel">Contenido del capítulo 2</div>
    <div id="quizPanel">Contenido del examen</div>
</div>

Ahora el mismo código, pero con WAI ARIA:

<!-- He añadido atributos de roles para describir cada pestaña y su contenido asociado -->

<ol role="tablist">
    <li id="chapter1Tab" role="tab">
        <a href="#chapter1Panel">Capítulo 1</a> 
    </li>
    <li id="chapter2Tab" role="tab">
        <a href="#chapter2Panel">Capítulo 2</a>
    </li>
    <li id="quizTab" role="tab">
        <a href="#quizPanel">Examen</a>
    </li>
</ol>

<div>
    <div id="chapter1Panel" role="tabpanel" aria-labelledby="chapter1Tab">
        Contenido del capítulo 1
</div>
    <div id="chapter2Panel" role="tabpanel" aria-labelledby="chapter2Tab">
        Contenido del capítulo 2
</div>
    <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">
        Contenido del examen
    </div>
</div>

Al añadir los atributos de WAI-ARIA al etiquetado HTML, las tecnologías de apoyo a personas discapacitadas pueden interactuar también con controles creados con JavaScript. De hecho, la implementación de WAI-ARIA está pensada para hacer accesibles sitios en navegadores viejos sin soporte a las etiquetas semánticas de HTML5.

El grupo de trabajo de WAI ARIA en el W3C ya está trabajando en una nueva versión de la especificación para integrarla con HTML5 y otros lenguajes como SVG. También han creado una herramienta llamada “Generador de reportes de evaluación de accesibilidad de sitios web” para revisar la integración de WAI ARIA y otras especificaciones de accesibilidad en sitios web existentes.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.