Existe una desconexión peligrosa en la industria del software. El “Creador” (Desarrollador/Diseñador) vive en una burbuja de privilegios tecnológicos.

Dispositivo: MacBook Pro M3 Max (€4000).
Conexión: Fibra Óptica (1 Gbps).
Pantalla: Monitor 4K de 32 pulgadas.
Entorno: Oficina tranquila y climatizada.

El “Consumidor” (Usuario) vive en la realidad.

Dispositivo: Samsung Galaxy A12 de 3 años (\€200).
Conexión: 4G irregular en un tren en movimiento.
Pantalla: Pantalla de 6 pulgadas rota con reflejos del sol.
Entorno: Llevando la compra, distraído por los niños.

Si diseñas para el entorno del Creador, rompes la experiencia del Consumidor. Este artículo presenta la Ingeniería de la empatía: la disciplina de construir para el peor de los casos, no para el mejor de los casos.

Por qué Maison Code habla de esto

En Maison Code Paris, operamos en la intersección del Lujo y la Tecnología. Hemos visto demasiadas marcas invertir millones en “Transformación Digital” solo para ver un crecimiento plano.

Discutimos esto porque el ROI de esta estrategia a menudo se malinterpreta. No se trata solo de “modernización”; se trata de maximizar el Valor de Vida (LTV) de cada interacción digital.

Por qué Maison Code habla de la empatía

Somos desarrolladores. Nos encantan los equipos de alta gama. Pero nos obligamos a sufrir. Tenemos un “cajón de dispositivos de prueba” lleno de Android antiguos (Moto G, Pixel 3). Vemos que el sitio que se ejecuta a 60 fps en un iPhone 15 se ejecuta a 10 fps en un Moto G. Discutimos esto porque El desempeño es equidad. Si su sitio sólo funciona en teléfonos caros, está excluyendo el 50% del mercado. Ese es un mal negocio.

1. El protocolo “3G lento”

Cada desarrollador de Maison Code debe hacer esto una vez por semana.

Abra Chrome DevTools.
Vaya a la pestaña “Red”.
Seleccione “Aceleración” -> “3G lento”.
Vuelva a cargar la página de inicio. El resultado: Dolor. Ves cómo se congela el video del héroe de 5 MB. Ves cómo parpadean las fuentes. Espera 15 segundos para que se pueda hacer clic en el botón “Comprar”. The Insight: “Necesitamos optimizar esta imagen”. Sin dolor, no hay motivación para optimizar.

2. El vampiro de la batería (empatía energética)

(Ver Estética del modo oscuro). Los usuarios están ansiosos por la duración de la batería. Es el instinto de supervivencia moderno. Si su sitio web ejecuta muchas animaciones JavaScript en segundo plano, su teléfono se calienta. La batería se agota. La Reacción: Cierran la pestaña. Lo ideal es que culpen a su sitio. De manera realista, simplemente sienten que “Internet es lento hoy”. La solución:

Utilice IntersectionObserver para pausar las animaciones cuando estén fuera de la pantalla.
No reproduzca automáticamente el video a menos que el usuario interactúe.
Respetar prefiere-movimiento-reducido.

3. Pobreza de datos (El coste de los megabytes)

En EE. UU. y UE, tenemos planes de datos ilimitados. En Brasil, India o Nigeria, los datos son caros. 1 GB de datos puede costar el 5% de un salario mensual. Si su página de inicio tiene 10 MB, literalmente le está costando dinero al usuario solo por decir “Hola”. El Cálculo Ético: ¿Vale la pena el coste para el usuario por esta imagen de 4 MB? Si es sólo decorativo, bórralo. Si es el producto, comprímalo (WebP/AVIF). Respeta la billetera del usuario.

4. Accesibilidad es empatía (no cumplimiento)

La mayoría de las empresas tratan la Accesibilidad (A11y) como una lista de verificación legal. “¿Tenemos etiquetas alt? Sí. No nos demandarán”. Ésta es la mentalidad equivocada. La accesibilidad se trata de Inclusión.

El usuario ciego: Utiliza un lector de pantalla.
El usuario con discapacidad motora: utiliza solo un teclado (sin mouse).
Usuario daltónico: No se puede distinguir el rojo (Error) del verde (Éxito). El caso de negocio: El 15% de la población tiene alguna discapacidad. Si su sitio es accesible, ganará un 15% más de cuota de mercado. (Consulte ROI de accesibilidad).

5. Empatía Cultural (Localización)

La empatía se extiende al lenguaje. Traduces tu sitio al francés. “Comprar ahora” -> “Comprar mantenimiento”. ¿Pero conviertes la moneda? ¿Muestras el precio en euros? ¿Calculan los derechos? La localización “perezosa”: usar Google Translate y mantener USD. La localización empática: “Vemos que estás en Francia. Calculamos el IVA. El precio es definitivo. Enviamos con Colissimo”. Esto le dice al usuario: “Entendemos tu realidad”. (Ver Comercio sin fronteras).

6. La prueba del “padre distraído” (carga cognitiva)

Los diseñadores asumen que el usuario lee cada palabra. Realidad: El usuario está preparando la cena, sosteniendo a un bebé y mirando la pantalla. La prueba: ¿Puedes completar el pago en 30 segundos con una mano? Si pides:

“Crear una cuenta” (Reglas de complejidad de contraseñas).
“Nombre de soltera de la madre”.
“Encuesta: ¿Cómo supo de nosotros?”. Los perdiste. La solución: Pago como invitado. Apple Pay (identificación facial). Eliminar la fricción requiere empatía por el contexto del usuario.

7. La ansiedad de las formas (diseño de formularios)

Las formas son estresantes. “¿Escribí bien mi correo electrónico?” “¿Me llamarán?” Anti-Patrones:

Asteriscos en todas partes: Número de teléfono *. ¿Por qué necesitas mi teléfono?
Validación agresiva: “FORMATO NO VÁLIDO” en rojo antes de terminar de escribir. Diseño empático:
Campos opcionales: marque los campos como “Opcionales” en lugar de marcar los obligatorios.
Validación en línea: “¡Se ve bien!” (Marca de verificación verde).
Enmascaramiento de entrada: Formatee el número de teléfono (555) 123-4567 automáticamente a medida que escribe.

8. El estado “Sin datos”

Los diseñadores diseñan pantallas con “Perfect Data”. *Foto de perfil: Hermosa modelo.

Panel de control: lleno de gráficos.
Reseña: 5 estrellas, texto largo. Realidad: El usuario acaba de registrarse.
Perfil: Círculo gris vacío.
Panel de control: “No se encontraron datos”.
Reseña: Vacío. La solución: diseñar el estado vacío. “Aún no has realizado el pedido. Aquí tienes una guía inicial”. Convierta el estado de vacío en una oportunidad de incorporación. No los dejes en una habitación en blanco.

9. El tono del mensaje de error

Cuando algo sale mal (404, 500, pago fallido), ¿cómo se habla con el usuario? Tecnócrata: Error 500: Conexión de base de datos rechazada. Excepción SQL. Empatía: ¡Ups! Algo salió mal por nuestra parte. Hemos sido notificados. Inténtelo de nuevo en 5 minutos. Nunca culpes al usuario (“Entrada no válida”). Asumir siempre la culpa (“No pudimos entender eso”). El lenguaje da forma a las emociones.

10. El “Pliegue” está muerto (profundidad de desplazamiento)

Los clientes suelen decir: “¡Pon todo en la mitad superior de la página!” Comprobación de empatía: En el móvil, el “Pliegue” es pequeño. El 30% de la pantalla es la barra de URL y las claves de software. Si mete un banner de héroe, un título y un botón en 400 píxeles, parece un desastre. Diseño basado en la empatía: Deje que el usuario se desplace. El desplazamiento es natural. Es más fácil que hacer clic. No temas al redil. Teme el desorden.

11. Tocar objetivos (dedos gordos)

Tengo pulgares gordos. El área promedio de contacto con el pulgar es de 44x44 píxeles. Si diseña un pequeño botón de cierre en forma de “X” de 20x20 píxeles, lo extrañaré. Haré clic en el anuncio detrás de él. Me enojaré. La regla: Objetivo táctil mínimo = 44 px (directrices de Apple). Agregue relleno a los elementos en los que se puede hacer clic. Haz que sea fácil para mí tener éxito.

12. La prueba de daltonismo (daltonización)

El 8% de los hombres son daltónicos (Deuteranomalía). Si su “Estado de error” es solo texto en rojo, es posible que no lo vean. Si su “Precio de oferta” es solo texto en rojo, es posible que no lo vean. La solución: utilice codificación redundante. No utilices sólo Color. Utilice Color + Icono + Forma. *Error: Texto rojo + Icono 🛑.

Éxito: Texto Verde + ✅ Icono. Esto asegura que todos reciban el mensaje, independientemente de su biología.

13. Conclusión: La empatía es beneficio

La empatía no es una “habilidad blanda”. Es un “requisito estricto” de escala. No puedes escalar a 1 millón de usuarios si solo construyes para el 1% de los usuarios que tienen el último iPhone. Debes construir para la realidad desordenada, lenta y distraída del mundo. Cuando lo haga, su software se sentirá “robusto”. Funciona para todos, en todas partes. Ésa es la definición de calidad. Y, en última instancia, la calidad es lo que genera ingresos. Un sitio que funciona para todos vende para todos. No dejes dinero sobre la mesa ignorando el 99%.

¿Construyendo para la burbuja?

Realizamos pruebas de laboratorio de dispositivos y auditorías de accesibilidad para garantizar que su sitio funcione al 99%.

Auditar mi UX. Contrate a nuestros arquitectos.