Mal diseño frente a buen diseño: 5 ejemplos de los que podemos aprender

Examinar ejemplos de mal diseño junto a contraejemplos de buen diseño no sólo es divertido, sino que también permite extraer importantes lecciones para los diseñadores. Ponen de manifiesto las trampas que los diseñadores deben evitar y nos permiten entender cómo traducir las teorías del diseño en soluciones que funcionen en el mundo real. Jared Spool, escritor, investigador y experto en usabilidad estadounidense, dijo una vez «El buen diseño, cuando se hace bien, se vuelve invisible. Sólo cuando se hace mal nos damos cuenta». Así pues, veamos cinco ejemplos de diseños evidentemente malos, hagamos brillar la luz sobre cómo el buen diseño hace que funcione y destilemos algunas lecciones para que todos podamos crear experiencias geniales e invisibles para nuestros usuarios.

Sobrecarga de información

Lo malo: Señales de aparcamiento en Los Ángeles

Las señales de aparcamiento en Los Ángeles (LA) han sido el epítome de la sobrecarga de información durante décadas. Siempre han sido notoriamente difíciles de entender, porque las normas de tráfico son complejas, lo que resulta en la necesidad de transmitir una gran cantidad de información en un área pequeña.

¿Qué tan confusas son estas señales? Tradicionalmente, muy -mira este ejemplo de la década de 2010:

Autor/titular del copyright: Jorge González. Términos y licencia de los derechos de autor: CC BY-SA 2.0

Como señales de aparcamiento de Los Ángeles, este ejemplo ya es bastante sencillo.

Imagina que eres un conductor que circula por esta carretera un martes por la mañana a las 9. ¿Puedes aparcar en este lugar? Lo que parece una pregunta sencilla requiere mucho procesamiento mental para responderla.

Como diseñadores, a menudo nos enfrentamos a situaciones en las que tenemos que diseñar para que se muestre mucha información en un espacio reducido. Las señales de aparcamiento en Los Ángeles pueden ser un caso extremo, pero muchas veces diseñar para aplicaciones móviles supone enfrentarse a los mismos problemas. ¿Existe una salida, tanto para las señales de aparcamiento como para los diseñadores en general?

Lo bueno: La señal de aparcamiento de Nikki Sylianteng

Diseñar una señal que muestre toda la información, y que a la vez sea fácil de entender, parece una tarea imposible. Pero eso es exactamente lo que hizo la diseñadora de Brooklyn Nikki Sylianteng.

Autora/titular del copyright: Nikki Sylianteng. Términos y licencia de los derechos de autor: CC BY-NC-SA 4.0

La señal de aparcamiento propuesta por Nikki se utilizó finalmente en Los Ángeles como parte de una prueba.

Parte de la razón por la que el diseño de Nikki1 funciona bien es que está centrado en el usuario: Nikki se dio cuenta de que los conductores simplemente quieren saber si pueden aparcar en un lugar. Sí o no, eso es todo lo que necesitan los conductores, y eso es todo lo que muestra la señal de aparcamiento.

Su diseño también utilizó elementos visuales, en lugar de texto, para transmitir la información. El resultado es increíblemente intuitivo: verde para OK, rojo para No aparcar. Incluso está diseñado para los daltónicos, con rayas para No aparcar.

Ahora, cuando mires la señal, sabrás que el martes a las 9 de la mañana no se puede aparcar. Las barras muestran lo que hay de un vistazo-simplemente.

Lecciones aprendidas: Mejores prácticas

• Entiende lo que necesitan tus usuarios y diseña en base a ello. Esto ayuda a reducir la sobrecarga de información.
• ¿Tiene mucha información que transmitir a sus usuarios? Pruebe a utilizar elementos visuales en lugar de texto. Aprenda más sobre la visualización de datos aquí.

Navegación en carne de misterio

Lo malo: LazorOffice.com

Conocida en 1998 por Vincent Flanders de Web Pages That Suck2, la navegación de carne misteriosa (MMN) se refiere a los casos en los que el destino de un enlace no es visible hasta que el usuario hace clic en él o apunta con el cursor. El término «carne misteriosa» es una referencia a la carne que se sirve en las cafeterías de las escuelas públicas estadounidenses y que está tan procesada que su tipo exacto ya no es discernible.

La MMN es mala porque reduce la capacidad de descubrimiento de los elementos de navegación. Esto añade carga cognitiva a los usuarios, porque ahora tienen que adivinar cómo navegar o qué hace el clic en algo.

Aunque la mayoría de los MMN se encuentran en sitios web antiguos, son sorprendentemente frecuentes en los sitios web modernos. Por ejemplo, Lazor Office, una empresa de diseño que crea casas prefabricadas.

Autor/titular del copyright:Lazor Office, LLC. Términos y licencia de los derechos de autor: Uso razonable

LazorOffice.com tiene un cuadro de imágenes de MMN en su página de inicio. Como puede ver, este retablo da muy pocas indicaciones sobre dónde ir. En su lugar, nueve imágenes se quedan ahí, dejando a algunos de nosotros reflexionando sobre un enigma en lugar de interactuar con una página.

Debajo del pliegue de su página de inicio, una cuadrícula de miniaturas de imágenes está esperando. ¿Se puede hacer clic en ellas? Bueno, sí: si mueves el cursor del ratón sobre una imagen, se convierte en un puntero. Pero, ¿qué ocurre cuando se hace clic en una imagen?

«Haga clic para averiguarlo» nunca es una buena solución para la experiencia del usuario (UX). Lo más probable es que sus usuarios abandonen la navegación y encuentren una solución alternativa en el sitio de la competencia.

Lo bueno: Fichas del curso en la web de la Interaction Design Foundation

Por suerte, los problemas de NMM son fáciles de resolver. La clave es ser consciente de que hay que etiquetar claramente los enlaces. Simplemente añadiendo «Ver proyecto» que aparezca al pasar el ratón mejorará la usabilidad de la página de Lazor Office de arriba.

Autor/titular del copyright: Interaction Design Foundation ApS. Términos de copyright y licencia: Uso razonable

Nuestras tarjetas de curso son tan poco misteriosas como los enlaces.

Para las tarjetas de curso de la Interaction Design Foundation, no sólo tenemos «Ver curso» en la parte inferior de cada tarjeta para indicar la acción que se realizará, sino que también tenemos un estado hover con el texto «Ir al curso». Muchos sitios web siguen una convención similar, y usted también debería hacerlo, para maximizar la usabilidad de su sitio web.

Lección aprendida: Buenas prácticas

¡Etiqueta siempre tus enlaces! No te gustaría comer carne misteriosa y, del mismo modo, a tus usuarios no les gustaría hacer clic en enlaces misteriosos.

Añadir fricción a las acciones del usuario

Lo malo: iFly50.com

Como diseñadores, deberíamos añadir fricción a las acciones del usuario con extrema precaución, a menos que el objetivo sea disuadir a los usuarios de realizar esa acción. A veces, sin embargo, podemos incluso añadir involuntariamente fricción a las acciones del usuario (sobre todo por razones estéticas o de novedad) que resultan en una UX perjudicial.

Un ejemplo es iFly50.com, creado para el aniversario de la revista iFly de KLM. iFly 50 es un sitio web de desplazamiento vertical en el que se muestran 50 destinos de viaje, y en algunos destinos (como el de abajo), un botón cerca de la parte inferior pide a los usuarios que pulsen y mantengan pulsado durante unos segundos para ver más fotos.

Autor/titular del copyright: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Términos de copyright y licencia: Fair Use

iFly 50 espera que sus usuarios hagan clic y mantengan pulsado durante unos segundos cada vez que quieran ver más fotos.

El hecho de añadir unos segundos de fricción a cada acción puede resultar en una UX tremendamente pobre. Imagina que, en lugar de hacer clic para cargar una página al instante, ahora tienes que mantener el clic durante dos segundos por cada enlace que pulses en tu navegador. Dejarías de explorar Internet por completo después de unos cuantos clics y retenciones.

Muchas veces, los diseñadores tendemos a dejarnos llevar por los estilos o acciones de interacción más novedosos, pero es fundamental que siempre tengas precaución cuando tu diseño pueda añadir fricción a las acciones del usuario. La mayoría de las veces, las convenciones probadas (por ejemplo, simples clics o deslizamientos) funcionan perfectamente.

Lo bueno: Desplazamiento elástico en iOS

Interesantemente, la adición consciente de fricción a las acciones del usuario puede dar lugar a un gran diseño. Uno de los inventos más populares de Apple en su sistema operativo móvil, iOS, es la creación del desplazamiento elástico, en el que en determinadas situaciones (como al final de una página web) el desplazamiento se hace cada vez más difícil.

Autor/titular del copyright: Interaction Design Foundation ApS. Términos de copyright y licencia: Uso legítimo

En el desplazamiento elástico de iOS, se añade deliberadamente fricción en algunas situaciones.

Puedes ver esto en acción arriba, donde se produce una mayor fricción cuando el usuario se desplaza hasta el final de la página web. La fricción se añadió para indicar las situaciones en las que ya no se permite el desplazamiento: y el efecto es una experiencia intuitiva.

Lección aprendida: Mejor práctica

Evite añadir cualquier tipo de fricción a las acciones del usuario en la medida de lo posible-y aplíquela con cuidado cuando no tenga otra alternativa.

Diseño «inteligente» que ignora la usabilidad

Lo malo: Bolden.nl

A veces, los diseños inteligentes pueden ir en detrimento de la UX. Lo que hace más peligroso este error es que a los diseñadores nos encantan los diseños inteligentes. Son pequeñas maravillas gráficas que nos arrancan una sonrisa. Lamentablemente, la mayoría de los humanos no son diseñadores. Y lo que es más triste, no todos los diseños ingeniosos son buenos diseños, sobre todo cuando crean problemas de accesibilidad, descubribilidad o usabilidad.

Por ejemplo, el sitio web del estudio holandés de diseño estratégico y desarrollo Bolden:

Autor/titular de los derechos de autor: Bolden. Términos y licencia de los derechos de autor: Uso legítimo

¿Se puede saber qué intenta decir su página de inicio? ¿No? Bueno, eso es porque tendrás que mover el ratón a la esquina de la página para poder ver bien los mensajes.

Autor/titular del copyright: Bolden. Términos de copyright y licencia: Uso legítimo

¿Es un diseño inteligente? Sí, definitivamente. ¿Pero es un mal diseño? Absolutamente!

Este es un gran ejemplo de diseño para el diseñador, en lugar de para el usuario: el sitio web redujo seriamente la legibilidad de sus titulares en la determinación de sus creadores de ofrecer un diseño novedoso. Quien diseñó esto también omitió el texto que indica a los usuarios que deben mover el ratón hacia las esquinas, lo que significa que el descubrimiento de los titulares depende de la casualidad. Además, incluso cuando se descubre el titular, el contraste entre el texto y el fondo es pobre, hasta el punto de que se sigue viendo el texto superpuesto. Todo esto se suma para crear un sitio web poco amigable para el usuario.

Lo bueno: CultivatedWit.com

El sitio web de Cultivated Wit es un gran contraejemplo de cómo un diseño inteligente no tiene por qué suponer una carga para la usabilidad.

Autor/titular del copyright: Cultivated Wit. Términos de copyright y licencia: Uso legítimo

La página de inicio de Cultivated Wit muestra un búho ilustrado.

En la página de inicio de Cultivated Wit, la ilustración del búho guiña el ojo al pasar el ratón por encima:

Autor/titular del copyright: Cultivated Wit. Términos y licencia de los derechos de autor: Uso legítimo

¡Sorpresa! El búho te guiña el ojo cuando le apuntas con el cursor. Obsérvese también la sabia distribución del espacio en blanco.

La diferencia clave aquí es que esto no forma una parte esencial del sitio web, por lo que no disminuye la usabilidad aunque el usuario no descubra este inteligente elemento de diseño.

Además, tienen una clara flecha que apunta hacia abajo para sugerir que hay algo debajo del pliegue. Y cuando se desplace hacia abajo, verá esto:

Autor/titular de los derechos de autor: Cultivated Wit. Términos y licencia de los derechos de autor: Uso justo

Y los sitios web pueden ser ingeniosos sin sacrificar la UX.

El texto (que es legible y tiene un buen contraste) crea una sensación de ingenio -no muy diferente de lo que Bolden intentaba conseguir- sin disminuir la UX del sitio web. El único pequeño problema es que el texto «Únete a nuestro club de correo electrónico» debería ser más visible, pero en su conjunto, el sitio web de Cultivated Wit es un gran ejemplo de cómo ofrecer un diseño inteligente sin crear una mala UX.

Lección aprendida: Mejores Prácticas

Los diseños inteligentes siempre deben hacerse lo más infalible posible, y/o probarse en usuarios reales. A veces, los diseños ingeniosos pueden ser contraproducentes y perjudicar la usabilidad.

Animaciones superfluas

Lo malo: Concepto de recibo de PayPal en Dribbble

Las animaciones son un elemento crucial del diseño de interacción, pero siempre deben servir para algo. Nunca deben hacerse por la animación. Por desgracia, los diseñadores tienden a tener una historia de amor con las animaciones, en parte porque son tan divertidas de crear que puede que no sepamos cuándo parar.

El concepto de animación de Vladyslav Tyzun para un recibo de correo electrónico de PayPal, publicado en Dribbble, es un ejemplo de animación mal hecha:

Autor/titular del copyright: Vladyslav Tyzun. Términos y licencia de los derechos de autor: Uso justo.

La animación es bonita, pero superflua. En total, se tarda la friolera de 3,5 segundos en ver los detalles de la transacción. Un simple fundido del recibo sería más elegante y, al ocupar menos tiempo, también mejor para el usuario.

Este problema se vuelve peligroso cuando los diseñadores parecen no tener suficiente con las animaciones. A partir de 2016, la animación de Vladyslav recibiría más de 500 likes y 8.000 visitas. Esto muestra una apreciación errónea que los diseñadores tienen hacia la animación por la animación. Tener una visión de la tendencia del diseñador a preferir las épicas en picado en lugar de representaciones más directas y atraparte a ti mismo antes de ceder a las animaciones te ahorrará mucho tiempo y evitará muchos dolores de cabeza. Recuerde que los usuarios vienen a los sitios con un propósito: queremos mostrarles lo que buscan en un espacio y tiempo cortos, no detenerlos en un gran recorrido por la galería.

Lo bueno: La animación de Stripe Checkout

Cuando hacemos la animación a propósito, sin embargo, los resultados pueden ser estupendos. Mira la animación de Stripe Checkout cuando el usuario recibe un código de verificación:

Autor/titular del copyright: Stripe, Inc. Términos de copyright y licencia: Uso justo.

Stripe utiliza animaciones para que las cosas parezcan más rápidas de lo que son: ofrece a los usuarios actualizaciones (como «Enviado») aunque no hayan recibido el SMS todavía. Esto evita que los usuarios se sientan frustrados por tener que esperar, y proporciona la seguridad de que un SMS está en camino ahora mismo.

Rachel Nabors, experta en animaciones web invitada por el W3C, sugiere cinco principios a tener en cuenta al diseñar animaciones3:

1. Anima deliberadamente: piensa en cada animación antes de crearla.
2. Se necesitan más de 12 principios: Los 12 principios de animación de Disney funcionan para las películas, pero no necesariamente para los sitios web y las apps.
3. Útil y necesario, y luego bonito: la estética debe pasar a un segundo plano frente a la UX.
4. Vaya cuatro veces más rápido: las buenas animaciones son discretas, lo que significa que se ejecutan con rapidez.
5. Instale un interruptor de apagado: para las animaciones grandes, como los efectos paralelos, cree un botón de desactivación.

Lección aprendida: Mejores prácticas

Haz siempre que tu animación tenga un propósito: demasiado puede matar la UX de un producto. La belleza tiene que tirar de su peso y ser funcional.

Lo que hay que saber

¿No es divertido ver ejemplos de mal diseño? Afortunadamente, también es educativo. Aquí están las lecciones clave y las mejores prácticas de los cinco ejemplos de buenos y malos diseños:

1. Entiende lo que tus usuarios necesitan, y luego entrega esa información.
2. Si tienes mucha información que transmitir, intenta usar imágenes en lugar de texto.
3. ¡Etiqueta siempre tus enlaces! A los usuarios no les gustan los enlaces misteriosos.
4. Evita añadir cualquier tipo de fricción a las acciones del usuario, a no ser que estén pensadas para disuadir la acción.
5. Prueba tus diseños inteligentes e inclúyelos con precaución.
6. La animación es como las palabrotas. Si la utilizas en exceso, pierde todo su impacto.4

La próxima vez que frunzas el ceño ante un caso de mal diseño, párate a pensar: entiende por qué ha fallado el diseño, busca ejemplos de diseños que hayan hecho las cosas bien y anota mentalmente la lección que has aprendido. Y luego comparte el amor: ¡comparte tu lección con otros diseñadores en nuestro foro de debate!