Valora este artículo

Si estás metido dentro del mundo del diseño web, es probable que hayas oído hablar de la heurística. Es un concepto que se ha puesto de moda hace unos años, pero que lleva estudiado mucho más tiempo del que parece.

La heurística es “el conjunto de técnicas o métodos para resolver un problema”. Su origen etimológico en Griego lo relaciona con los términos hallar o inventar. Es por esto que es considerado el arte, habilidad, capacidad de los seres humanos para conseguir superar obstáculos y barreras con nuestra capacidad de pensamiento lateral y recurriendo a la creatividad.

Aunque el concepto de Heurística se remonta a la antigua grecia, cuando nos referimos al entorno web, hablamos más centrados en el método heurístico. Esto es, la parte más práctica de todo este pensamiento.

Que es el método heurístico y cómo se aplica en web

El método heurístico es la parte práctica o aplicada de la heurística. Se dice que emana de la experiencia previa del individuo. Esto se debe a que los problemas a los que se ha enfrentado en el pasado y la solución obtenida es de una forma el punto de partida para la resolución del problema.

Aquí es donde nuestra cabeza empieza a hacer todo tipo de asociaciones, composiciones y planes cuando nos enfrentamos a un reto para el cual no tenemos solución.

Esto es sin duda un proceso único en cada persona. Seguro que puedes pensar en muchas situaciones con familia, amigos, conocidos en los que frente a determinado problema surgen diferentes ideas. Puede que sean completamente diferentes, y sin embargo que ambas sean buenas para abordar la situación.

Técnicas del método heurístico

Existen ciertas técnicas o “trucos” que nos pueden ayudar a resolver un problema. En el caso de cada persona, puede ser que unos funcionan mejor que otros, eso ya depende del tipo de memoria que tengamos.

Sin embargo, todos al final se basan en conseguir cierto nivel de abstracción del problema. Esto suele ser algo que nos ayuda bastante a lograr nuevas soluciones.

La necesidad agudiza el ingenio.

El enfrentarnos a problemas que no podemos resolver con las herramientas o métodos que empleamos de forma habitual es lo que nos hace avanzar. Descubrir nuevas formas de hacer las cosas, explorar nuevos caminos para conseguir alcanzar objetivos más ambiciosos de los que pensábamos en un principio.

Aparición de la Heurística aplicada en Internet

Su uso se introduce en el entorno de internet y las aplicaciones gracias a Jackob Nielsen. En 1997 publicó dos breves artículos en prensa acerca de cómo facilitar la lectura y la navegabilidad de los usuarios en la web.

Desde ahí se centró en investigar los principales problemas que tienen los usuarios en la interacción con las máquinas. Es necesario hacer el apunte de que en aquel entonces, los ordenadores no estaban en todas las casas, y era algo mucho más técnico y menos accesible.

Publicó libros muy conocidos dentro del mundo de la usabilidad, ya que plasma de manera muy sensata y llana lo que fueron las bases del user experience en el mundo de las páginas web y aplicaciones.

En sus libros analiza diferentes entornos, desde páginas web, ecommerce y llegando hasta la usabilidad para teléfonos móviles. En caso de que este tema te interese en profundidad, sin duda es un autor que no puedes pasar por alto.

A día de hoy sigue apareciendo como cofundador del Nielsen Norman Group. Una reconocida firma multinacional que estudia y desarrolla estrategias basadas en la experiencia de usuario para grandes marcas y empresas.

Análisis Heurístico realizado por Jakob Nielsen

Jakob Nielsen realiza un extenso estudio en el que primero reúne 249 problemas que los usuarios tienen de forma general en su interacción con las interfaces. Después de analizar todos estos problemas, sus fuentes y posibles soluciones, define lo que se conocen como las 10 reglas de la heurística.

En ellas identifica a la perfección cuál es el origen de la mayor parte de las frustraciones que sienten los usuarios cuando navegan en una web. Las soluciones que plantea son muy genéricas, por lo que hay que saber interpretarlas correctamente para implementarlas sobre los elementos que diseñamos.

Sin embargo, todas estas reglas o leyes, son tremendamente sencillas de entender. Ahora cuando las veas, te invito a que intentes pensar ejemplos tanto buenos como malos.

Seguro que si te menciono la página web de renfe se te ocurre por dónde puede venir esto de la frustración al navegar por una web. Aquí es donde Jackob Nielsen se intenta centrar para hacer que el usuario se sienta cómodo y encuentre lo que necesita de forma sencilla.

Para conseguir diseñar esta propuesta, tiene en cuenta las asociaciones mentales que solemos hacer los seres humanos. Asociaciones entre formas y colores, cómo se mueve nuestra vista tratando de localizar información, etc.

Las 10 leyes de la Heurística de Jackob Nielsen

Aquí tienes una traducción de las que Nielsen enumeró como reglas generales de la usabilidad. Después te pondré algunos ejemplos para que veas de forma mucho más concreta a que se refiere.

Como te he dicho antes, aunque aún no lo hayas pensado, existe un tremendo trabajo detrás de empresas que depuran su experiencia de usuario.

Las grandes startups como Glovo, Deliveroo, Cabify, etc. basan sus modelos de negocio principalmente en la experiencia de usuario proporcionada.  Piensa en lo cómodas que resultan siempre sus plataformas o aplicaciones. Pero bueno, no me enrollo más y te dejo con las 10 reglas o leyes de la heurística enumeradas por Nielsen.

  • Visibilidad del estado del sistema:

El sistema debe proporcionar al usuario información de lo que está sucediendo dentro de un espacio de tiempo razonable.

  • Relación entre el sistema y el mundo real:

El sistema debe comunicarse con los usuarios mediante palabras, frases o conceptos que le sean familiares y no con términos técnicos propios del sistema.

Siempre debemos intentar seguir y respetar las convenciones del mundo real, presentando la información al usuario en un orden lógico y natural.

  • Control y libertad del usuario:

Existen ocasiones en las que los usuarios elegirán funciones del sistema por error y necesitan una “salida de emergencia” inmediata. Esta salida debe estar señalizada de forma clara y precisa para que el usuario pueda abandonar el estado no deseado sin tener que realizar pasos intermedios.

Se debe siempre apoyar la implementación de deshacer y rehacer para los usuarios.

  • Consistencia y estándares:

Los usuarios no deben cuestionarse si una acción, situación, palabra o frase quiere decir o hace lo mismo que otra. Sigue siempre las convenciones establecidas dentro de cada proyecto.

  • Prevención de errores:

Es siempre mucho más recomendable conseguir un sistema que reduzca los casos de error al mínimo, en vez de diseñar bonitos mensajes de error.

  • Reconocimiento antes que recuerdo:

Siempre debemos hacer visibles los objetos, acciones y opciones del sistema. El usuario no tiene que recordar la información proporcionada en una parte concreta del proceso.

Deben permanecer siempre a la vista éstos elementos e instrucciones y ser fácilmente recuperables para los usuarios.

  • Flexibilidad y eficiencia de uso:

Dotar al sistema o aplicación de elementos que aceleran el acceso a acciones o procesos mediante la interacción. Deben permanecer ocultos a la vista de los usuarios más novatos para evitar que se distraigan, pero que los usuarios habituales comprendan.

Debemos perseguir siempre que los usuarios frecuentes se adapten rápido a nuestro sistema.

  • Estética y diseño minimalista:

Los diálogos que creemos con el usuario deben contener la información esencial, obviando la irrelevante o poco usada. Cada unidad extra de información dificulta la comprensión por parte del usuario, ya que disminuye la visibilidad relativa del elemento.

  • Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores:

Los mensajes de error que configuremos deben entregarse en un lenguaje sencillo, claro y comprensible por los usuarios. Debemos indicar de forma precisa el problema y sugerir una solución constructiva para resolver el problema de la forma más cómoda para el usuario.

  • Ayuda y documentación:

Existen casos en los que el sistema es sencillo y puede ser usado sin necesidad de ayuda o documentación. Sin embargo, aún en éstos casos, puede haber situaciones que requieran de detalles o documentación para ayudar a los usuarios.

Debe estar ubicada en un lugar fácil de localizar y a la vista. Debe siempre enfocarse en las historias de usuario de nuestra aplicación, listar los pasos a seguir de forma concisa y no ser demasiado extensa.

Cómo aplicar en tu web las leyes de la Heurística

Ahora te dejo con lo que me parecen buenos (y malos) ejemplos de la aplicación de las leyes de la heurística. Estoy seguro de que has interactuado con muchas de estas interfaces, y te suena de lo que hablo.

Existen páginas web o herramientas muy potentes que hacen que navegar por ellas sea extremadamente sencillo. Sin embargo, también conocerás ejemplos de páginas web, aplicaciones o herramientas que hacen un infierno de cada rato que interactúas con ellas.

Visibilidad del estado del sistema

Mal uso: Renfe no muestra que algunos asientos están reservados hasta el final del proceso de compra. De modo que el usuario cree que puede acceder a unos asientos en todo momento hasta que no llega al final.

Buen uso: Los formularios desarrollados en Google Forms son un ejemplo de buenas prácticas. Consiguen que no haya elementos distractores y permiten informar al usuario de forma muy visible de la cantidad de pasos que se deben realizar.

Relación entre el sistema y el mundo real

Mal uso:  Avisos de error que incluyen conceptos muy técnicos o que el usuario no comprende. Esto hace que no pueda encontrar solución al problema y no entienda los siguientes pasos para solucionarlo.

Buen uso: Nombrar a todos los elementos de forma sencilla y descriptiva. Incluir todas las etiquetas posibles para dar la mayor cantidad de información posible (title, alt, etc), emplear iconos que siguen los estándares y que los usuarios pueden reconocer.

Control y libertad del usuario

Mal uso: Páginas web que en el logo no tienen un enlace a su página de inicio, o páginas de error 404 en las que no se incluye ningún enlace a otras secciones.

Esta asociación es algo que todos los usuarios tienen en la cabeza siempre, de modo que no proporcionarles esa vía permanente de volver a la página de inicio es un error.

Buen uso: La página de error 404 de Airbnb cuenta con un diseño eficaz y deja rápidamente a la vista varios enlaces que pueden ser de utilidad para el usuario. Esto hace que la retención y la experiencia mejore notablemente.

Consistencia y estándares

Mal uso: Renfe cuenta con un gran número de secciones con botones y composiciones muy dispares o diferentes. Esto hace que el usuario se pierda y no tenga claro donde se encuentra la información que está buscando.

Buen uso: Google es sin duda un ejemplo de consistencia en todos sus productos. En ellos aplica siempre unas líneas de diseño con las que hace increíblemente usables todas las aplicaciones o sitios web que desarrolla.

Desde formularios de contacto hasta los paneles del correo electrónico mantienen una cohesión impresionante para que personas de todas las edades puedan utilizar su software de forma sencilla.

Prevención de errores

Mal uso:  Formularios de registro en los que no indica los requisitos mínimos para una contraseña y el usuario debe probar varias veces hasta poder acceder.

Buen uso: Especificar en todos los campos de los formularios desarrollados que clase de campo se trata, qué valores puede introducir, si es obligatorio, requisitos, etc.

Reconocimiento antes que recuerdo

Mal uso: La página web de Renfe cuenta con una complejidad asombrosa. Unida a los diseños dispares y la poca cohesión, nos encontramos con que la estética de elementos como botones o menús no son iguales en toda la web.

En muchas ocasiones nos encontramos con que la posición de los elementos cambia esenciales de una web cambian (menú, footer, contacto), Esto produce confusión y malestar en el usuario, y es lo que no queremos.

Buen uso: Google siempre mantiene una estética similar en todos los elementos más importantes como botones, menús, footers, etc.

Pese a que puede variar la tipografía o los colores en función de la herramienta que estemos usando (gmail, adwords, analytics, adsense, pagespeed insights, etc) los elementos guardan siempre relación visual y se colocan justo donde el usuario espera encontrarlos.

Flexibilidad y eficiencia de uso

Mal uso: Páginas web que bloquean los atajos de teclado a la hora de poder realizar configuraciones, edición de texto para noticias, posts, comentarios, etc.

Buen uso: Los programas de Adobe (Photoshop – Illustrator – etc) cuentan con gran número de atajos de teclado que facilitan mucho el control de las herramientas cuando se conocen.

Permitir atajos de teclado conocidos por los usuarios y desarrollar funcionalidades para funciones recurrentes dentro del servicio ofrecido. Acompañar esto de la documentación necesaria para favorecer que los usuarios puedan adaptarse a ellos.

Estética y diseño minimalista

Mal uso: Renfe tiende a incluir mucha información en el diseño de sus páginas. Además, el uso de sliders en los que incluye información casi carente de interés dificulta mucho el reconocer la información relevante para el usuario.

Buen uso: Google es sin duda un ejemplo de diseño minimalista y que mantiene una estética muy adaptada a su imagen corporativa en cualquier herramienta que desarrolla. Como principales desarrolladores del Material Desing siempre tratan de ajustarse a sus estándares.

Ayudar a los usuarios a reconocer

Mal uso: Muchos de los foros desarrollados en SMF no cuentan con los mensajes de error adecuados cuando el registro de acceso al foro falla por el correo.

Buen uso: Amazon en todo momento informa del estado de las compras o de los pedidos. Pese a tener un panel complejo consigue dar la relevancia necesaria a cada elemento para que con las compras recurrentes acabe siendo sencillo reconocer todos los elementos. Todos los estados y cambios son además notificados por correo para cerciorarse de que el usuario está actualizado de con todos los detalles relevantes de sus compras.

Ayuda y documentación

Mal uso: Profesional Hosting cuenta con una sección en la que incluye todos los manuales y guías de uso. Pese a que aparece en el menú, lo hace con el anchor text de “Ayuda en Línea”, lo que hace al usuario esperar un chat o contacto. Esto entorpece la experiencia de usuario, ya que los que buscan documentación no encuentran esta sección, mientras que los usuarios que acaban ahí lo hacen con una intención que no se ve satisfecha.

Buen uso: PhotoShop cuenta con una etiqueta que nombra el atajo de teclado configurado para cualquier opción cuando esta está disponible. Esta opción salta siempre en un pequeño modal cuando ponemos el ratón encima o aparece a la derecha de la opción cuando la vemos en los desplegables desde la barra de herramientas superior.

Conclusiones acerca de la Heurística de Nielsen aplicada en web

Como puedes ver, todas estas reglas es algo que se aplica en numerosas formas,  que se da en toda clase de dispositivos y plataformas. Esto hace que el trabajo sea inmenso, ya que existen siempre:

  1. Cosas que pasamos por alto
  2. Cosas nuevas que introducimos
  3. Nuevos cambios para testear

Este último punto lo meto aqui para dejar claro que el proceso de usabilidad no debería ser algo estático. Debemos estar constantemente haciendo pruebas para comprobar los cambios.

Ahora, como Chuiso diría, no hay que ser asmáticos. Deja tiempo suficiente en las pruebas como para tener un volumen de datos relevante y que te permita tomar las mejores decisiones.

No intentes probar demasiadas cosas a la vez tampoco. Intenta centrarte en elementos concretos y valorar su rendimiento en un par de formatos diferentes. Los test A / B son sin duda una herramienta perfecta para llevar a cabo este tipo de estudios.

Cómo se implementan estas mejoras en la usabilidad

En mi opinión, se pueden dividir estos problemas en 2 tipos según la implementación. Algunos se enfocan en el elemento concreto y la información que proporciona al usuario. Otros se centran más en el conjunto o ecosistema global de la web o aplicación.

Esto hace que por una parte tengamos que fijarnos en dotar de toda la información que queremos a cada elemento cuando lo creamos. Otras sin embargo se reducen en llevar un buen control de los estilos corporativos en todos los elementos.

Esto se aplica a que si tienes un botón de contacto cuadrado, siempre debes hacer que para el botón de contacto de tu web aparezca ese mismo botón. Con esa tipografía, esos colores (puedes tener una alternativa para fondos claros / oscuros).

Pues aplica esto a todos los encabezados, a todo el contenido, todos lo elementos, … y en todas las secciones de una web!

Si tienes una web pequeña, es posible que esto te parezca sencillo. Pero en cualquier proyecto grande, a nada que intervienen varias personas, es fácil que se pierda la línea. Esto se traduce en que se acaba creando inconsistencia en el diseño de diferentes secciones de la web.

Cómo mantener la consistencia y no morir en el intento

A la hora de diseñar una web que tenga cierta complejidad, me he dado cuenta de que siguiendo estos pasos, se simplifica la tarea de que conseguir un aspecto mucho más limpio en los diseños de nuestra web.

Así conseguiremos que los usuarios encuentren de forma sencillas los elementos. También lograremos que los usuarios sepan en todo momento cómo moverse por nuestras páginas. Facilitar la navegación hace que el tiempo de retención de las visitas mejore de forma increíble.

Antes de comenzar a diseñar conviene saber las medidas y estilos principales que necesitamos emplear. Suelo hacerme una lista con lo siguiente:

  1. Tipografía y color para encabezados o Headings
  2. Tipografía y color para el texto del contenido
  3. Botón de contacto
  4. Botón Genérico
  5. Secciones que se repitan (Footer, Módulo de contacto, Widgets)
  6. Estilo de los enlaces (Con sus estados)

Una vez tengo todo eso claro y guardado, procuro siempre aplicarlo en la web. De esta forma, conseguimos que haya un aspecto homogéneo, coherente y consistente entre todas las páginas y secciones.

Esto me ayuda a que según voy avanzando en el proyecto, siempre tengo un documento con los estilos para cada web o aplicación, así como procuro hacerme una biblioteca en la que guarde los módulos que utilizo de forma recurrente en mi web.