Métodos prácticos para mejorar el UX en startups que sobreviven sin diseñador

• Usar una biblioteca de componentes como Material UI puede parecer el camino fácil, pero aunque ofrece bloques básicos de construcción, el diseño del flujo completo del usuario requiere trabajo aparte
• Si necesitas invertir tiempo en hacer que el producto sea distintivo, ¿cómo puedes definir una buena experiencia de usuario lo antes posible?

La página en blanco es una trampa

• Evita mirar un lienzo vacío y preguntarte: "¿Cómo debería verse un campo para ingresar el correo electrónico?"
• Puedes aprovechar patrones ya validados por grandes empresas
  • Esto ahorra tiempo y puede mejorar la experiencia de usuario

• Enfoques que debes evitar

  • Sitios de premios de diseño – tienen originalidad, pero no garantizan usabilidad
  • Dribbble – se enfoca en lo estético, no necesariamente en la funcionalidad

• Enfoques que sí conviene revisar

  • Sitios de la competencia – crea una cuenta y documenta con capturas de pantalla
  • Sitios de colecciones de patrones – puedes revisar rápidamente referencias en PageFlows, Mobbin, etc.

• Tomar nota de patrones comunes de UI

  • Elementos comunes de UI como correo electrónico, campos de contraseña y flujos de confirmación
  • Reglas visuales y de layout:
    • Formularios centrados
    • Diseño responsivo
    • Botones claros
    • Logo en la parte superior

• Fricción intencional

  • Algunas empresas piden información de tarjeta de crédito → estrategia para atraer usuarios realmente comprometidos
  • Una experiencia rápida no siempre es mejor

Definir claramente el objetivo

• El objetivo no es simplemente "crear una página de registro", sino → "hacer que el registro sea lo más fácil posible"
• Conviértelo en una pregunta:

  "¿Cómo podemos hacer que registrarse sea fácil para el usuario?"

• Ejemplos de soluciones

  • Mostrar la fortaleza de la contraseña mientras se escribe
  • Dar una razón para completar el formulario de registro

• Preguntas adicionales

  • Iniciar sesión inmediatamente después del registro vs iniciar sesión después de verificar el correo
  • Mostrar una página de confirmación después del registro vs mostrar un mensaje de éxito

Considerar casos límite (situaciones excepcionales)

• Los usuarios reales no actúan como esperamos → van con prisa, ignoran instrucciones y cometen errores
• Revisa con preguntas si pueden surgir problemas:
  • ¿Qué pasaría si el usuario se equivoca al escribir rápido?
  • ¿Los errores en los campos de entrada se comunican claramente al usuario?

• Cómo corregir problemas cuando ocurren

  • Descuido al crear la contraseña → podría causar bloqueo de la cuenta más adelante
    • → agrega un "campo de confirmación de contraseña" para pedir que la escriba de nuevo
  • Si las contraseñas no coinciden → muestra un mensaje de error
    • → muestra una advertencia de inmediato al escribir la segunda contraseña

Usar IA para detectar problemas de UX

• Puedes usar herramientas como ChatGPT para revisar problemas de UX
• No es perfecto, pero permite una revisión rápida y efectiva

• Ejemplos de prompts útiles

  • Red Team vs Blue Team:

    "¿En qué puntos de este flujo de registro podría quedarse atascado el usuario?"
    "¿Por qué este diseño resulta intuitivo?"

  • Estándares de la industria:

    "¿Cómo diseñan el flujo de registro las principales empresas SaaS?"

  • Casos límite:

    "¿Qué pasa si el usuario escribe mal su correo electrónico y no se da cuenta?"

Otros consejos para mejorar el UX

• Definir métricas de medición
  • Tasa de conversión, retención de usuarios, satisfacción del usuario, etc. → evalúa el desempeño con métricas objetivas
• Usar colores simples
  • Color principal, color secundario, color de acento → se recomienda Coolors
• Usar lenguaje familiar
  • En lugar de "error de base de datos" → "no se pueden guardar los cambios"

Conclusión

• En una startup, la velocidad importa → evita el perfeccionismo
• En UX, la usabilidad va primero que la originalidad
  • Un flujo de usuario intuitivo y claro es más efectivo que un diseño complejo y original
• Innova solo en el valor central → para lo demás, usa patrones ya validados
• Si sigues patrones que los usuarios ya conocen, reduces la carga de aprendizaje

[GN⁺]

Opinión de Hacker News

• El punto más alto de la usabilidad de hace 25 años fue cuando la mayoría de las aplicaciones tenían barras de herramientas y menús que seguían patrones estándar

  • Los usuarios no especializados frecuentes usaban la barra de herramientas, y los usuarios no especializados ocasionales realizaban tareas mediante los menús
  • Los usuarios avanzados memorizaban atajos mediante las letras subrayadas en las etiquetas de los menús
  • Para cambiar configuraciones, se abría un cuadro de diálogo de ajustes con pestañas como "General", "Fuentes y colores", etc.
  • En ese entonces, la mayoría de las personas sabía poco sobre computadoras, pero aun así podía usar la mayoría de las aplicaciones casi sin ayuda
  • El objetivo en ese momento era minimizar el tiempo que el usuario pasaba en la aplicación para completar su trabajo de forma eficiente
  • El UX moderno busca mantener al usuario lo más "enganchado" posible; eso puede estar bien para apps de consumo, pero se vuelve problemático cuando también se aplica a aplicaciones empresariales
  • Hay casos de empleados no técnicos de empresas Fortune 100 que se quejaban de que un nuevo SPA les hacía trabajar más lento y pedían de vuelta la terminal antigua

• Después de contratar a un diseñador gráfico, el cambio más evidente es que la app o el sitio web se ve mejor

  • UX abarca un alcance mucho más amplio, desde los flujos de interacción hasta widgets de una sola función
  • A la mayoría de las personas se les da mal predecir el UX general de un sistema
  • El UX se desarrolla copiando soluciones existentes o probando cosas nuevas
  • Evaluar un sistema en la imaginación es mucho más difícil que implementarlo
  • En el diseño de sistemas backend, es posible predecir y evitar errores mediante principios básicos y razonamiento
  • Un diseñador o ingeniero con una intuición excepcional para UX tiene muchísimo valor, pero no se puede esperar indefinidamente a encontrar a alguien así

• La mejor herramienta para encontrar problemas de usabilidad es compartir pantalla con Gemini y explicarle por voz la tarea que uno quiere realizar

  • Gemini observa la UI, averigua cómo completar la tarea y te va diciendo por voz dónde hacer clic
  • Si Gemini no puede resolverlo, entonces hay un problema de usabilidad

• Según la "ley de Jakob", los usuarios pasan la mayor parte de su tiempo en otros sitios, por lo que prefieren que las cosas funcionen igual que otros sitios que ya conocen

  • Los usuarios trasladan sus expectativas de productos familiares a otros productos similares
  • Aprovechar los modelos mentales existentes permite crear una mejor experiencia de usuario, porque el usuario puede concentrarse en la tarea en vez de aprender un modelo nuevo
  • Al hacer cambios, conviene minimizar las discrepancias permitiendo que el usuario siga usando por un tiempo limitado la versión a la que ya estaba acostumbrado

• Hay una razón por la que casi todos los productos funcionan de forma parecida, y si algo funciona distinto, conviene preguntarse si fue intencional o un error

  • Hay que equilibrar los patrones familiares para el usuario con las ideas nuevas
  • Por ejemplo, al intentar mejorar la experiencia de pago de Amazon, podrías perder los beneficios de la familiaridad
  • Si prefieres casillas de verificación, botones de opción, listas desplegables y campos de texto, obtienes gratis formas de leer y cambiar estados que ya son familiares para el usuario
  • "No intuitivo" muchas veces puede significar simplemente "no estoy familiarizado con este patrón"

• Se puede usar IA para identificar problemas de UX, y herramientas como ChatGPT pueden destacar problemas de UX que uno podría pasar por alto

  • No es perfecto, pero es mejor que adivinar

• Se recomienda enfocarse en principios generales de diseño y en la forma de pensar

  • Leer "The Design of Everyday Things" de Donald Norman ayuda a entender la diferencia entre un buen diseño y un mal diseño
  • "The Art of Game Design" de Jesse Schell habla sobre cómo crear experiencias inmersivas, y los juegos son especialmente implacables en este aspecto

• Seguir ciegamente lo que hacen las grandes empresas puede llevar a una mentalidad de culto a la carga

  • Hay que saber exactamente por qué se construye cada parte del sistema
  • Solo porque el CAPTCHA que usa Google sea molesto no significa que tengas que copiarlo
  • Hay que pensar con seguridad en qué partes realmente se pueden mejorar

• Incluso en etapa bootstrap se puede contratar a un diseñador de UX, y es una inversión muy valiosa

  • No hace falta contratarlo a tiempo completo; se puede hacer un sprint de diseño para crear algunos conceptos, realizar un taller de UX y luego desarrollar la opción elegida hasta convertirla en un prototipo clicable
  • Eso vale ahorrar $5k del presupuesto de desarrollo frontend, y en el primer año generará más de $5k en ganancias gracias al aumento en la retención de usuarios

• No recuerdo la última vez que trabajé con un diseñador dedicado

  • DevOps parece estar siguiendo un camino parecido, como si esperaran que los programadores también se encarguen de eso mientras compilan código
  • Los siguientes serán los programadores
  • Contratar especialistas es muy incómodo