Los 7 pecados mortales del diseño de productos (y cómo evitarlos)
En este punto de nuestra línea de tiempo, no hay absolutamente ninguna excusa para un mal diseño de producto. En el competitivo mundo de los productos de software, acertar en el diseño de UI y UX no es negociable. Incluso si tienes una gran tecnología capaz de resolver los problemas de tus usuarios, una mala experiencia de usuario hará que los usuarios huyan de tu producto—ya sea porque no podían averiguar cómo usarlo o, francamente, porque lo odian.
Prepárate; estoy a punto de darte una "dosis de realidad" sobre cómo no hacer UX, enumerando los siete pecados capitales del diseño de producto y exponiendo a algunos de los peores infractores.
Pecado #1: “El Árbol de Navidad”
Uno de los recuerdos más agradables de mi infancia es cuando mi hermana y yo decorábamos el árbol de Navidad. Tan pronto como terminábamos, lo mirábamos maravillados como si fuera algo absolutamente hermoso para nosotros. Bueno, al menos así lo veíamos nosotros. ¿Cómo se veía en la vida real? Algo como esto.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Supongo que ya sabes por dónde voy con esto. A diferencia del árbol de Navidad, que realmente quieres que tus hijos decoren como les dé la gana, tu UI y UX no deberían parecerse a un revoltijo masivo de elementos y colores dispersos por todas partes.
Ahora, veamos un producto de la vida real que parece un “árbol de Navidad”.
Solo mira esto un momento e intenta explicarme de qué trata este producto. Estoy seguro de que también te perdiste en la interfaz y no pudiste descifrarlo por un tiempo. Hay demasiadas cosas sucediendo en esta pantalla; básicamente es imposible comprender dónde estás y qué deberías estar haciendo.
Los problemas que veo con esta interfaz incluyen:
- Uso excesivo de color: El color es una herramienta poderosa en manos de hábiles diseñadores de producto, ya que pueden guiar a los usuarios en la dirección correcta. Sin embargo, si tienes demasiado color en tu UI, este poder se debilita y cada elemento coloreado empieza a competir por la atención.
- Sobrecarga de CTAs: ¿Cuál es la cosa más importante en la que debería hacer clic ahora? Honestamente, no tengo idea—hay botones por todas partes.
- Disposición confusa: Básicamente, la pantalla está dividida en tres columnas, donde la central tiene dos pestañas y también hay una sección grande de línea de tiempo en la parte inferior. Los diseñadores han intentado meter la mayor cantidad de cosas posible en una sola pantalla.
Haz Esto en su Lugar
Este es un caso de intentar abordar la UX creando algún tipo de orden a partir de un montón de información. En cambio, piensa en tu experiencia de usuario como un mapa del comportamiento que deseas de tus usuarios. Es conceptos básicos de diseño de producto que el color, las llamadas a la acción (CTAs) y la disposición deben trabajar juntos para guiar al usuario a tomar los siguientes pasos adecuados.
Pecado #2: Mala jerarquía visual
La jerarquía visual se refiere a la disposición de los elementos en tu UI de tal manera que se transmiten claramente las relaciones jerárquicas entre ellos.
El artículo que estás leyendo ahora, por ejemplo, tiene una jerarquía visual clara: el título aparece en un tipo de letra grande en la parte superior; los subtítulos son de menor tamaño que el título pero mucho más destacados que los párrafos, y así sucesivamente.
En ambos casos, destacamos los títulos ya sea haciéndolos más grandes o más gruesos, indicando claramente que los párrafos tratan sobre los temas en cada subtítulo correspondiente.
La jerarquía visual es una excelente manera de organizar tu UI y hacerla fácil de navegar. La ausencia de ella, sin embargo, es una forma efectiva de hacer que tus usuarios tengan dificultades para orientarse en tu interfaz.
Uno de los fracasos notables en jerarquía visual que me molesta a diario es la sección de respuestas de Quora.
Para animar a la gente a navegar por otras preguntas y permanecer más tiempo en su sitio web, Quora también ha incluido preguntas y respuestas relacionadas con la pregunta que estás consultando.
No me molesta. Es un comportamiento de usuario existente y Quora ha encontrado una forma orgánica de beneficiarse de ello.
Sin embargo, sí me molesta la forma en que han diseñado estas preguntas/respuestas relacionadas. Se ven casi idénticas a las respuestas reales en la página y carecen de jerarquía visual. Mira la captura de pantalla de arriba y dime cuál es una respuesta y cuál es una pregunta relacionada. Realmente tienes que leer con atención para darte cuenta.
Haz Esto en su Lugar
Idealmente, las preguntas relacionadas deberían ser menos prominentes en la interfaz de usuario y estar en un nivel inferior al de las respuestas principales en cuanto a la jerarquía visual (por ejemplo, tener un fondo grisáceo en lugar de uno blanco).
Pecado n.º 3: Interfaces de usuario sacadas de los años 2000
Lo sé, lo sé, Craigslist tiene una interfaz terriblemente desactualizada y aún así funciona perfectamente bien. Pero es una excepción a la regla y no deberías pensar que todavía está bien tener algo así en 2023.
El problema es que, a diferencia de Craigslist, tu producto no será súper popular y no tiene una marca reconocida universalmente. Por lo tanto, si la gente ve algo anticuado cuando visita tu sitio web o utiliza tu aplicación, simplemente no te tomarán en serio. Sin embargo, siempre tienes la oportunidad de ser reconocido por tu diseño creativo de logotipo y branding.
Lamentablemente, a veces son las organizaciones más “serias” las que cometen este pecado.
Tuve la oportunidad de colaborar con el Banco Central de Armenia hace un par de años. Tienen algunos de los analistas financieros y expertos en política monetaria más talentosos que existen. Además, el presidente de esta institución (un graduado de Harvard) solía ser mi profesor y es, probablemente, la persona más inteligente que he conocido en mi vida.
Sin embargo, el sitio web del Banco Central luce tan mal que te costará creer que se trata de una organización de alto prestigio con personal súper talentoso.
Pecado n.º 4: Patrones Oscuros (O Usar UX En Contra de Tus Usuarios)
En el mundo de la experiencia de usuario, los “patrones oscuros” son recorridos de usuario y elementos de la interfaz que desinforman al usuario y lo guían a realizar una acción de la que no es plenamente consciente.
Hay una tienda de comercio electrónico con un logotipo en forma de flecha naranja que es especialmente “famosa” por implementar patrones oscuros. Son tan recurrentes en esto que existen quejas e investigaciones en curso contra ellos por no seguir las normas de la FCC.
Una de las experiencias de usuario más famosas que entra en esta categoría es la dificultad para cancelar una suscripción Prime.
Siendo justos, creo que sigue siendo una buena idea preguntar a tus usuarios por qué quieren cancelar su suscripción de pago o incluso ofrecerles un descuento "por favor, no te vayas". Pero necesitas respetar el tiempo y la paciencia de tus usuarios.
Ten en cuenta que las personas que quieren cancelar tu suscripción probablemente ya estén molestas o insatisfechas contigo. Así que, dificultarles el proceso de cancelación solo las enfadará más (y olvídate de la posibilidad de que quieran volver en el futuro).
Si intentas cancelar tu suscripción Prime, por ejemplo, Amazon te pedirá que reconsideres.
Esta pantalla me parece bien, todos la usan.
Sin embargo, lo que no me parece bien es el hecho de que necesitas confirmar tu selección ¡dos(!) veces más para cancelar (¿me estás tomando el pelo?). Además, la redacción y los colores que usan en sus CTA están diseñados para dificultar que encuentres la opción que realmente cancela la suscripción en lugar de conservarla.
Haz Esto en su Lugar
No trates de engañar a tus usuarios para que realicen una acción contraria a su intención, ni trates de "agotarlos" haciendo excesivamente difícil la cancelación. La gente es lo suficientemente inteligente como para saber que lo haces a propósito, y solo lograrás que tus competidores parezcan más atractivos. En su lugar, realiza una breve encuesta sobre el motivo de su baja y haz que el proceso sea eficiente dejando siempre la puerta abierta para que regresen.
Pecado n.º 5: No seguir las mejores prácticas en formularios
Los formularios son uno de los elementos fundamentales de los sitios web y una de las primeras cosas que los desarrolladores aprenden a construir y los diseñadores a, bueno, diseñar.
Lograr una gran experiencia de usuario en los formularios es probablemente uno de los temas más debatidos entre diseñadores y puedes encontrar mejores prácticas, guías y lecciones al respecto prácticamente en todos lados.
Considerando la abundancia de materiales educativos sobre formularios y la importancia de hacerlos bien (al fin y al cabo, esto afectará directamente tu adquisición y otras métricas clave), diría que no seguir las mejores prácticas de UX establecidas para formularios es un pecado.
Ahora, permíteme darte un ejemplo de mal diseño de producto en formularios.
No puedo ni mirar esta página sin que me ardan los ojos. Hay tantas cosas mal aquí. Por mencionar algunas:
Uso inadecuado del espacio en blanco: ¿Por qué los nombres de los campos están tan lejos de los propios campos? ¿Por qué usas todo un bloque para colocar dos pequeños interruptores para recoger y entregar? Puedes crear un formulario con toda esta información al menos 4 veces más pequeño y mucho más fácil de inspeccionar.
Formato incorrecto de los campos: Hay un campo de teléfono donde los dígitos que escribes no aparecen con el formato de un número telefónico (por ejemplo, +1 (555) 123-1234) para que sea fácil de leer. Esto es tan común que la mayoría de las herramientas de diseño incluso tienen componentes listos para ello.
Ausencia de un marcador de posición: Casi ni se nota que hay un campo de texto en la sección “Instrucciones Adicionales de Entrega”. Además, no estoy seguro de qué se supone que debes escribir ahí. Una excelente UX de formularios siempre asume la existencia de marcadores de posición que te dan una pista, como "Por favor, deja el paquete en el porche principal."
Haz Esto en Su Lugar
Los remedios para cada uno de estos problemas son bastante evidentes, pero este es un caso donde parece que las únicas personas que probaron este formulario son quienes lo crearon. Los diseñadores se habrían beneficiado mucho de obtener algo de retroalimentación real de los usuarios sobre esta experiencia UX antes de lanzarla.
Pecado #6: Usar Los Elementos de Interfaz Incorrectos
El siguiente pecado del que quiero hablar es una continuación del anterior. Los formularios no son los únicos elementos de interfaz en tu producto que deben seguir convenciones y mejores prácticas bien establecidas. Hay otros elementos comunes como interruptores, casillas de verificación y otros.
De hecho, los usuarios ya tienen modelos mentales establecidos de cómo funciona cada uno de estos elementos y debes asegurarte de utilizarlos de la manera correcta.
Aquí tienes un par de ejemplos de para qué fueron creados estos elementos y cómo no usarlos correctamente:
Interruptores: Este elemento te muestra un estado “booleano” (como Encendido/Apagado o Activo/Inactivo). Son geniales para mostrar a tus usuarios el estado de la antena Bluetooth en su smartphone y permitirles encenderla o apagarla.
Sin embargo, en el formulario anterior hay dos interruptores que permiten al usuario elegir entre recogida y entrega.
Si piensas en esto un momento, habrás pensado más que el propio diseñador. Estos interruptores implican que tienes que poner “recogida” en OFF y “entrega” en ON para seleccionar la opción de “entrega”. ¡Podrían haber usado botones de opción! Honestamente, me pregunto qué pasaría si un usuario activa ambos al mismo tiempo.
Menús select sin filtro: Siendo uno de los elementos más antiguos que aparecen en sitios web, los menús select todavía son populares y muy amigables para el usuario si se emplean correctamente.
Haz Esto en Su Lugar
La mejor práctica indica que deberías usar un menú select en los casos en que el usuario necesita elegir una sola opción de una lista de 5-15 opciones. Si hay menos de 5, deberías optar por botones de opción.
En caso de que haya una lista muy extensa de opciones (por ejemplo, 50 estados de EE.UU. o unas 200 naciones), deberás añadir un filtro a tu menú select. De lo contrario, tu usuario tendrá que desplazarse por toda esa larga lista para encontrar la opción que desea.
Pecado #7: Negligir Quiénes Son Tus Usuarios y Qué Quieren
Finalmente, el mayor pecado de todos: crear un nuevo producto con un diseño UX que no se ajusta a las necesidades e intereses de tus usuarios. Esto es una receta para el fracaso.
Haz Esto en Su Lugar
Un buen proceso de diseño de producto siempre comienza con la investigación de usuarios. A menos que sepas quiénes son tus usuarios y qué necesitan, no importa cuán hermoso sea tu interfaz de usuario, muy probablemente terminarás con un producto mal diseñado.
Sé que la investigación de usuarios no es una tarea sencilla. Después de todo, a Apple le tomó años de pruebas con usuarios alcanzar un nivel excepcional de facilidad de uso tanto en el diseño industrial como en la experiencia de usuario de su iPhone. Sin embargo, créeme, es el trabajo más impactante que puedes hacer para asegurar el éxito de tu producto.
Es muy fácil evitar cometer pecados de diseño
Si trabajas creando sitios web, partes de una mejor posición. ¿Por qué? Porque las herramientas de diseño web normalmente ofrecen plantillas que ya evitan algunos de los errores mencionados aquí. Sin embargo, no importa si eres una startup desarrollando productos digitales o una empresa que fabrica productos físicos (como teclados o sensores de movimiento), en realidad es bastante fácil evitar un mal diseño.
Mientras tu proceso de desarrollo de producto se enfoque en las necesidades y puntos de dolor de tus usuarios y uses el software adecuado para diseño de productos, podrás evitar fallos importantes de diseño y terminar con un producto mal diseñado (esto también es uno de los muchos beneficios del software de diseño con IA).
Espero que estos ejemplos te hayan hecho sentir mejor respecto a tus propios productos, o al menos te hayan sacado una sonrisa. Para más consejos de UX y otros artículos para profesionales de productos, ¡asegúrate de suscribirte a nuestro newsletter!
