El auge de las herramientas de desarrollo al servicio de otros

La experiencia de desarrollo (DX) y la experiencia del usuario (UX) no siempre se complementan. Más a menudo de lo que parece, una herramienta que ofrece una buena DX puede generar una mala UX para el usuario final, y viceversa.

Un estudio reciente demostró que, en promedio, los sitios web basados en React tienen un rendimiento peor que los renderizados en el servidor con jQuery. ¿Significa eso que React es una mala herramienta? En absoluto. Pero los marcos de trabajo tienen un coste que acaba pagando el usuario final.

Al usuario no le importan JSX, los componentes web, CSS-in-JS ni otros debates absurdos de la comunidad de desarrollo. Pero sí le importa, aunque sea indirectamente, que el HTML sea semántico si utiliza un lector de pantalla. También le importa el tamaño total de la página cuando tiene una conexión 2G o 3G lenta, o cuando no dispone de un plan de datos asequible.

En el software, una buena abstracción resuelve problemas de manera eficaz y oculta los detalles subyacentes. Cuando usamos una herramienta para resolver un problema complejo, damos por sentado que funciona como una buena abstracción. Por eso, las herramientas y los marcos de trabajo deberían servir de red de seguridad para abordar problemas comunes como el rendimiento y la accesibilidad. Sin embargo, muchas de estas herramientas solo atienden nuestras necesidades egoístas (la DX) e ignoran en gran medida las de los usuarios (la UX).

Hoy en día, los desarrolladores deben dominar el rendimiento web, la optimización de imágenes, la accesibilidad y la seguridad si quieren ofrecer una experiencia adecuada a sus usuarios. Esto se suma a una lista cada vez más larga de habilidades que necesitan adquirir antes incluso de lanzar su primer «proyecto real». Al final, terminan luchando contra los frameworks que deberían estar a su servicio.

Por suerte, algunos creadores de frameworks ya están dando pasos en esta dirección. Buscan formas de ofrecer la división del código de forma integrada. Incorporan herramientas de análisis estático para aspectos sensibles como la accesibilidad y la seguridad, entre otros. Pero aún queda mucho camino por recorrer, y esto debe convertirse en una tendencia en el sector.

Así que nos preguntamos:

• ¿Quiénes son nuestros usuarios?
• ¿Son los desarrolladores, diseñadores y creadores de contenido que usan la herramienta a diario?
• ¿O son quienes consumen el contenido que genera la plataforma?

Terminamos por comprender que ofrecemos una experiencia directa a nuestros clientes y una experiencia indirecta a sus usuarios, los consumidores. Creemos firmemente que tomar medidas para mejorar la experiencia de los consumidores es una forma de atender mejor a nuestros clientes. No les trasladaremos toda la responsabilidad de crear aplicaciones web accesibles, seguras y rápidas.

Estas son algunas medidas para integrar esa red de seguridad en nuestro producto:

1. Incorporar las mejores prácticas
2. Prevenir acciones perjudiciales
3. Crear conciencia y educar

Incorporar las mejores prácticas#

Hay situaciones en las que, desde la perspectiva de la experiencia de usuario, tiene sentido tomar decisiones con criterio propio. Con el tiempo, la comunidad ha definido estas mejores prácticas para crear aplicaciones web. No deberíamos tener que preocuparnos por ellas en cada nuevo proyecto.

Tomemos como ejemplo la optimización de imágenes. Las imágenes representan el 75 % del peso de las páginas web

según httparchive.org. Pero no todo el mundo cuenta con las habilidades ni las herramientas necesarias para crear imágenes lo más optimizadas posible para sus usuarios. La optimización de imágenes puede complicarse muy rápidamente debido a los distintos formatos, densidades de píxeles y tamaños adaptables.

Hace poco añadimos un servicio que cambia el tamaño de las imágenes que subes según los contenedores en los que se usan. Esto ocurre sin que tengas que hacer nada, ya que damos por hecho que quieres la versión más optimizada de esa imagen para el producto final. En los próximos meses, trabajaremos en una solución para generar imágenes adaptables y ofrecer formatos webp en los navegadores compatibles.

La imagen cambia de tamaño según el contenedor en el que se usa

En este nivel, la plataforma trabaja por ti y hace su “magia” entre bastidores, sin que tengas que intervenir.

Evitar acciones perjudiciales#

No deberías tener que ejecutar auditorías en producción para descubrir que a tu imagen le falta un texto alternativo o que anidaste accidentalmente algunas etiquetas de anclaje. Todas estas situaciones se pueden señalar en el momento de la compilación.

Podemos garantizar que no se produzcan estados no válidos o incorrectos porque disponemos en tiempo real de toda la información semántica. Por ejemplo, podemos impedir que se aniden etiquetas de anclaje o que se use una jerarquía incorrecta de encabezados mientras diseñas tu página.

Aviso: Esta función aún no está implementada; se encuentra en la fase de propuesta de diseño.

En este escenario, el conocimiento de la plataforma bloquea las acciones que pueden perjudicar la experiencia del usuario.

Concienciar y educar#

Por último, hay recomendaciones de usabilidad que quizá debas conocer. Decidir si las aplicas depende de ti, pero es importante que tomes una decisión fundamentada.

El contraste de color es un buen ejemplo. Debes decidir si los contrastes cumplen las recomendaciones AA o AAA de las WCAG, según tu público objetivo. Podemos destacar las áreas problemáticas, ofrecer información y orientarte hacia materiales educativos sobre el tema.

El tamaño de la fuente es otro ejemplo. Puedes respetar o no la recomendación de un tamaño mínimo de 16 px, según el propósito de la aplicación que estés creando. Sin embargo, la plataforma destacará las implicaciones de tus acciones para que puedas tomar una decisión fundamentada.

La herramienta muestra un mensaje informativo sobre el tamaño de fuente estándar.

Aún estamos dando nuestros primeros pasos en esta dirección, pero estamos convencidos de que es la adecuada para nuestro producto. Creemos que Playground debería ser una herramienta de desarrollo de apoyo, con implicaciones directas para ti como cliente y beneficios indirectos para tus usuarios. Porque, al fin y al cabo, tus usuarios también son nuestros usuarios.