El Mundo de los Anti-Patrones en UX

Como usuario web, de vez en cuando te debes encontrar con ciertas cosas realmente molestas. Quizá algo sobre un formulario de acceso, la navegación, o una aplicación web en general, te dificulta la conclusión de una tarea dada. ¿Por qué ha diseñado alguien algo de esta forma?

La respuesta es complicada. El primer y principal problema es que los responsables se hayan negado a comprobar su diseño con usuarios reales. Con frecuencia, cuando éste es el caso, ellos pensaron que sabían una forma de gestionar esa interacción. Después de todo, ya la habían visto en otros sitios web, y seguramente aquellos diseñadores han realizado tests. ¡¿Por qué reinventar la rueda?!

El problema aquí es que muchas veces la competencia podría no ser tan inteligente como presupones. Así que mientras estamos todos ocupados visitando galerías CSS y copiando el trabajo unos de otros sin hacer comprobaciones, estamos inadvertidamente creando una biblioteca de patrones.  

Algunos de estos patrones funcionan, pero otros no. Si la rueda que estás copiando es cuadrada (¡ah, funciona si la empujas con mucha fuerza!), entonces sí Virginia, ¡realmente no necesitas reinventar la rueda!

Considera lo siguiente:

• Tus usuarios no son necesariamente usuarios de Amazon, o Google, ni tan siquiera los usuarios de tu competencia. Para descubrir si un patrón funcionará, realmente necesitas comprobarlo con tus usuarios únicos. Quizá tus usuarios son todos marineros de Dubai (un caso de estudio que efectivamente se dio en mi organización hace poco). Tus usuarios tienen necesidades distintas a las de los usuarios de otros sitos web. 
• Pero, ¿no existen ciertas cosas sobre la forma en la que el cerebro humano interactúa con la información que ya sabemos?

Sí. Pero de nuevo, es un espectro. Existen pocas cosas absolutas. Toma como ejemplo, este reciente estudio de la Universidad de Harvard, que dio como resultado un juego que podía adivinar tu edad a través de la velocidad de las pulsaciones de tu ratón (yo lo hice, ¡y dio en el clavo!)

Los usuarios tienen necesidades distintas según su edad, sus capacidades físicas, cultura, y más. Éste es el motivo por el cual las soluciones enlatadas pueden ser un fracaso.

¿Qué es un Anti-Patrón?

Un anti-patrón es aquel patrón de diseño que o bien directamente no funciona o bien resulta improductivo. Los verás en aplicaciones y sitios web, en cualquier lugar en el que el usuario necesite llevar a cabo una acción de alguna forma, ya sea acceder, obtener información, o leer información para tomar una decisión.

Cómo Identificarlos

Como diseñador web, reconocerás fácilmente cuando algo es claramente inefectivo (por ejemplo, un menú que se despliega al situarnos encima y que se cierra antes de que puedas pulsar uno de sus elementos). De todas formas, los anti-patrones son con frecuencia sutiles. Para un determinado usuario podrían pasar inadvertidos, aunque no sin cierta cantidad de sufrimiento. 

Para identificarlos, es mejor trasnpolar tu web a métricas. Si no estás usando métricas en tu web, ¡empieza ya! Google Analytics es una buena opción para empezar, ya que es un servicio gratuito y fácil de configurar.

¿Qué estás buscando con las métricas? Entre las cosas que indiquen la presencia de un problema (y posiblemente un anti-patrón) se incluyen:

Usuarios saliendo de las páginas
Si muchos usuarios navegan a cierta página pero repentinamente desaparecen, es posible que necesites echar un vistazo con más detenimiento para descubrir qué pasa en ella. ¿Necesitan completar una acción para poder continuar? ¿Son incapaces de encontrar a donde deben dirigirse después? ¿Consiste el conjunto de la página una animación molesta? No lo sabrás hasta que investigues. Marca esta área para efectuar un análisis más profundo y un estudio con usuarios en tiempo real.  

Clics Aleatorios
Si los usuarios realizan clics por todos lados, esto significa que no saben realmente dónde se supone que deben hacerlo. 

Deslizan la página continuamente hacia arriba y hacia abajo.
Si los usuarios no paran de deslizar la página en ambos sentidos, indica que no pueden encontrar lo que buscan, o lo que esperaban ver.

Algunos Anti-Patrones Habituales

Un problema de usabilidad no equivale necesariamente con la presencia de un anti-patrón, pero podría ser una clave. Muchos anti-patrones han sido estudiados y expuesta su ineficiencia con suficiente frecuencia como para generalizar que son realmente malas concepciones. Aquí tienes algunos de ellos:

Elementos clicables que no tienen la apariencia de serlo

Muestras de esto incluyen:

• Botones demasiado pequeños
• Enlaces de texto que no son visualmente distinguibles (¡el azul es la mejor opción!)
• Botones que son demasiado planos para que los usuarios los identifiquen como tales (para más problemas sobre la usabilidad en la tendencia del diseño plano o "flat design", lee este artículo.)
• La ausencia de un estado hover también puede resultar problemático, incluyendo el error de no usar {cursor: pointer;}.

Situar y ocultar

Es conveniente simplificar las interfaces ocultando información detrás de objetos susceptibles de ser pulsados tales como botones o leyendas, pero asegúrate de que la información no queda oculta con demasiada rapidez. Los usuarios no pueden leer tan rápido como crees. Es muy molesto tener que situar continuamente el ratón en un sitio para mantener visible la información.

Contexto inconsistente

Por ejemplo, la presencia de tres tipos diferentes de enlaces en una página. Uno de los tipo nos lleva a la página de inicio, otro saca al usuario de la web, y el tercero abre una ventana emergente. Esto podría resultar confuso y frustrante.

Uno cada vez

En una lista compleja en la que los usuarios realizan acciones como añadir eliminar, o cambiar el estado de los elementos del menú de alguna manera, ¡proporciona una opción para hacerlo por lotes! Ser forzado a efectuar ediciones una a una es tedioso y doloroso.

Toneladas de contenido embutido "above de fold" o en la primera pantalla

Los estudios han demostrado que los usuarios realmente leen más abajo de la parte que primero se visualiza en la pantalla. De hecho, el mito de mantener todo el contenido importante en esta área persiste. ¡Espacia tu contenido! 

Pogo navegación fija

La navegación fija pogo se da cuando un usuario tiene que bajar un nivel para realizar una acción, volver al área superior, y después volver a bajar de nuevo. El nombre fue acuñado por Jared Spool y describe la acción de saltar para navegar desde abajo, arriba y otra vez abajo.

Eliminar la información tras un error

Un ejemplo de esto sería el que cualquier formulario que un usuario guarde, lanzase un error, y después sea forzado a re-introducir toda o parte de la información que habían introducido anteriormente. 

El destino equivocado

Se da cuando una acción se completa y el usuario es dirigido a una página diferente de la que esperaba. Un caso común de esto se da en webs de eCommerce, en donde a un usuario se le solicita que se suscriba para completar su transacción. De todos modos, cuando accedan, serán dirigidos de vuelta a la página principal en lugar de a la página en la que iban a introducir la información de sus tarjetas de crédito.

Deberes para casa

Echa un vistazo a tu proyecto actual, con especial atención a estos patrones. Haz que un amigo o compañero no involucrado en el proyecto realicen tareas en la web y observa lo que sucede. ¿Se sienten frustrados en algún punto? Los lugares en los que las cosas no parezcan fluir podrían ser indicios de la existencia de un anti-patrón.

¡Estos son solo algunos ejemplos! ¿Qué los anti-patrones has encontrado por la web? ¿Has caído en alguna de estas trampas en tus propios sitios web?