28/10/2015

Anti-patterns: un riesgo latente para la experiencia de usuario

Anti-patterns: un riesgo latente para la experiencia de usuario

Ya conocimos los dark patterns: trampas que los diseñadores de UX colocan voluntariamente en sus interfaces, con el fin de engañar al usuario. Un error similar, pero involuntario, son los anti-patterns: patrones de diseño que no funcionan bien o resultan contraproducentes. Para el diseñador Michael Boeke, un anti-pattern es un patrón de diseño que a simple vista parece beneficioso, pero trae consecuencias indeseadas; y debe ser marcadamente inferior a un patrón de diseño alternativo usado en otro lado.

Es habitual que, cuando vemos una misma práctica de diseño repetida alrededor de muchos sitios web, pensemos que es correcta y la apliquemos en nuestros proyectos. Pero este patrón, por más común que sea, puede ser perjudicial. Solo realizando pruebas y conociendo a nuestro público objetivo podemos darnos cuenta de si esa elección de diseño realmente ayuda al usuario a cumplir sus objetivos o, por el contrario, es una costumbre nociva demasiado extendida.

Conozcamos algunos anti-patterns:

  • «Haga clic aquí». El anchor text debe describir lo que hace el enlace. Por ejemplo, no tiene sentido usar la frase «Haga clic aquí para obtener más información»: lo correcto sería «Más información».
  • Elementos cliqueables que no parecen cliqueables. Los elementos «cliqueables» —mayormente, enlaces y botones— deben distinguirse de aquellos que no lo son. Por ejemplo, la tendencia al flat design hace que muchos botones, al no tener relieve, parezcan estar al mismo nivel que la pantalla, resultando indistinguibles del resto del contenido.
  • Mystery meat (carne misteriosa). Se refiere a los casos donde el usuario tiene que hacer clic sobre un enlace, o pasar el mouse por encima, para saber adónde conduce. Esto es habitual en muchos menús que usan íconos o imágenes en vez de texto: si el gráfico no es descriptivo, el usuario se ve obligado a pasar el mouse por encima para que el browser le informe a qué dirección conduce, o, en el mejor de los casos, para que aparezca un tooltip informando el destino. La frase mystery meat suele usarse para los productos de carne muy procesada (como salchichas o nuggets) cuyo origen es difícil de determinar.
  • Repetición robótica. Ocurre cuando el usuario debe ingresar más de una vez la misma información. Por ejemplo, cuando al llenar un formulario se le pide su edad y su fecha de nacimiento. Esto es innecesario, ya que el primer dato puede calcularse a partir del segundo.
  • Mala superficie para el touch. Los enlaces y botones deben estar suficientemente separados entre sí y contar con una superficie de al menos 48dp. Si esto no ocurre, el usuario de dispositivo táctil tendrá problemas para tocar el link correcto: el dedo podría exceder la superficie cliqueable o accionar un enlace adyacente.

Para evitar la aplicación de estos patrones, es importante realizar pruebas de usabilidad y no creer que lo que vemos en otros sitios es necesariamente correcto. Nosotros somos los únicos capaces de brindar la mejor experiencia de usuario posible para nuestro público particular.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce