“No me hagas pensar”: qué es (y qué no) la usabilidad en una web

“No me hagas pensar: una aproximación a la usabilidad en la web” es uno de los libros más interesantes acerca de este campo que se pueden encontrar en el mercado. En este nuevo post te explicamos por qué.

Comprensión de las cosas

En “No me hagas pensar: una aproximación a la usabilidad en la web”, su autor, Steve Krug, apunta que la usabilidad no va de tecnología, sino de cómo la gente comprende y usa las cosas.

Esto consiste en decidir qué queremos que suceda después de que un usuario haga clic, pulse o arrastre; los temas de interacción y arquitectura de información (cómo cada cosa debe ser organizada), etc.

Así, la definición de usabilidad web que establece Steve Krug es la siguiente:

• Útil: posibilita algo que la gente necesita hacer.
• Comprensible: consigue que la gente pueda imaginarse cómo usarlo.
• Recordable: la gente no tiene que reaprenderlo cada vez que lo emplee.
• Eficaz: realiza el trabajo.
• Deseable: lo quiere la gente.
• Delicioso: usarlo es agradable e incluso divertido.

Qué hay que tener en cuenta para que un sitio sea fácil de usar

La respuesta, pese a lo que pudiera parecer, es sencilla: no se trata de que nada importante esté a más de dos clics de distancia, de hablar el lenguaje del usuario o de ser coherente… sino de que el usuario pueda decir: “no me hagas pensar”.

En ocasiones, en internet nos surgen interrogantes que aumentan nuestro volumen de trabajo cognitivo y distraen nuestra atención de la tarea que tenemos entre manos. Estas distracciones, que a veces son leves, en ocasiones se acumulan y pueden incluso llevarnos a abandonar esa tarea.

De este modo, el objetivo de una buena página web debe de ser el de resultar evidente, de forma que el usuario medio, con sólo mirarla, pueda saber de qué trata y de qué forma usarla. La realidad del mercado digital es que la competencia está solamente a un clic. Por eso, si nuestro usuario llega a sentirse frustrado, no le resultará difícil irse a cualquier otro site en busca de productos o soluciones similares.

Usabilidad web: cómo usamos una web

Muchas veces invertimos grandes esfuerzos intentando crear literatura de calidad, pensando que va a ser leída al detalle, cuando la realidad es que los usuarios ven los contenidos como si se tratara de un anuncio publicitario que pasa a 100 kilómetros por hora.

Si tu objetivo es diseñar páginas eficientes, debes entender que la gente no tiene tiempo. Hay que convivir con las siguientes realidades:

No leemos páginas, las escaneamos

• Tenemos prisa. Usamos internet porque queremos ahorrar tiempo, con una idea muy concreta. Somos, por tanto, tiburones.
• Sabemos que no hay que leerlo todo. En la mayoría de los casos nos interesa sólamente algo muy concreto. Cosas que se ajustan a nuestros intereses y a la tarea que tenemos que solucionar. El resto es irrelevante.
• Somos buenos en ello. Una vez el ser humano aprende a leer, aprende a escanear entre la información, como hacemos al leer un periódico.

En definitiva, lo que leemos de una página depende de lo que tenemos en nuestra mente.

No tomamos decisiones óptimas, es suficiente satisfacer necesidades

En el diseño de una página tendemos a pensar que el usuario escanea, considera las opciones disponibles y elige la mejor. La realidad es otra. Ante un problema, se toma la primera solución que no tiene contraindicaciones. 

¿Por qué los usuarios de internet no buscan la mejor opción?

• Normalmente tenemos prisa, lo que deriva en la búsqueda de la satisfacción por encima de la optimización.
• El sopesar distintas opciones no garantiza el éxito. Suele ser más rentable hacer caso de la primera suposición y usar el botón para atrás si no funciona.
• Adivinar es más divertido. Supone menos trabajo sopesar las opciones y es más rápido si la suposición es correcta. Además, se introduce el concepto de “la grata posibilidad de dar con algo sorprendente y bueno”.

No averiguamos cómo funcionan las cosas, simplemente nos apañamos

Así como nos inventamos nuestra propia historia para seguir adelante con el uso de un electrodoméstico, y no leemos las instrucciones sino que las hacemos propias, con Internet es lo mismo. Esto ocurre porque:

• No nos importa. Carece de importancia llegar a entender cómo es el funcionamiento de algo, siempre y cuando podamos usarlo.
• Si damos con algo que funciona, seguimos con ello. Solamente usaremos otra opción si por casualidad encontramos una solución B que nos satisfaga más.

Así pues, sabiendo que el usuario pasa velozmente por nuestro site, hay cinco claves a tener en cuenta para asegurarnos de que ve y entiende la mayor parte del sitio:

• Aprovechar y hacer uso de las convenciones.
• Crear una jerarquía visual clara en cada página.
• Dividir las páginas en zonas bien definidas.
• Dejar claro sobre qué se puede hacer clic.
• Eliminar el ruido visual.
• Formatear el contenido para facilitar el escaneo.

Vamos a detallar algo más cada uno de estos aspectos sobre la usabilidad web:

Los convencionalismos son nuestros aliados

Innova cuando sepas que tienes una idea mejor. Sino pégate a las convenciones, esas señales inequívocas y universales, como son la colocación estandarizada de elementos, cómo funcionan, cómo se ven…

Creación de una jerarquía visual clara

• Los elementos más importantes deben ser los más destacados.
• Lo que está relacionado por lógica también debe estarlo de forma visual.
• Los elementos se agrupan visualmente para mostrar que son parte de algo (como las noticias en las diferentes secciones del periódico).

División de las páginas en zonas claramente definidas

Resulta muy importante generar espacios visuales claramente definidos para que el usuario pueda decidir, rápidamente, cuál es el bloque que le interesa y cuál el que desea desechar.

Dejar bien claro aquello sobre lo que puedo hacer clic

Internet es una herramienta de búsqueda. En la mayoría de las situaciones, el usuario busca un sitio para hacer clic. Poder identificar esa acción de forma rápida es primordial. 

Mantener el ruido bajo control

El ruido es, sin duda, uno de los grandes enemigos del customer journey. Ocurre cuando hay demasiados elementos llamativos que tratan de llamar la atención, o las páginas aparecen cargadas de contenido. Provoca sensación de desorden y desorganización y dificulta la identificación del material útil.

Formatear el texto para que sea más fácil de leer

Elegir un formato adecuado para el texto facilita su comprensión. Algunas prácticas recomendadas son:

• Usar encabezados. Bien escritos, intercalados en el contenido. Éstos describen los bloques que preceden y ayudan por tanto al usuario a escanear lo que le interesa.
• Escribir párrafos cortos.
• Usar listas de bolos.
• Destacar en negrita los términos clave.

¿Por qué le gustan al usuario las opciones mecánicas?

Al usuario no le importa el número de clics que deba hacer mientras el camino sea sencillo y ofrezca confianza. 

A la hora de ofrecer orientación cuando sea necesario, ésta funcionará mejor cuando sea:

• Breve: una pequeña cantidad de información que ayude.
• Oportuna: debe estar situada de tal manera que se encuentre cuando se necesite.
• Ineludible: nunca debe pasar desapercibida.

Menos es más

Ya hemos hablado del escaneo en busca de la “palabra de enfoque” que dirija a la “acción”. Reducir el número de palabras que no van a leerse tiene, por tanto, efectos beneficiosos:

• Reduce el nivel de ruido del site.
• Hace que el contenido principal sea más relevante.
• Permite que los usuarios vean más contenido de un vistazo sin avanzar o retroceder.

Por ello, toma nota para mejorar tu usabilidad web:

El discurso excesivo (como las bienvenidas) debe desaparecer.

Hay que eliminar instrucciones innecesarias tales como“rellene el formulario”, “estos son los pasos a seguir”…

Cuidar el diseño de navegación. Un usuario no utilizará tu web, si no se siente cómodo para hacerlo.

Usabilidad web: sistemas de navegación

Para encontrar lo que busca, el usuario se sirve de un sistema de navegación y de su habilidad para echar un vistazo rápido.

Las indicaciones y jerarquías ayudan a encontrar lo que busca. A medida que va avanzando en el embudo, nuestro usuario dedica menos tiempo a tomar la decisión sobre si quiere seguir buscando o prefiere pedir ayuda.

Esta decisión se basa en variables como estas:

• La familiarización con el sitio.
• La confianza en uno mismo.
• La capacidad de organizar las cosas de forma sensata.
• La prisa que uno tenga.
• Lo sociable que también resulte ser.

Navegación web 101

Al navegar por una web es habitual este proceso: el usuario normalmente intenta encontrar algo guiándose por señalizaciones y jerarquías. Si no encuentra lo que busca, abandonará. Y será él quien decida si preguntar primero o seguir buscando.

Particularidades de búsqueda web

A diferencia de las búsquedas en el mundo real, hay una falta de percepción de la escala o tamaño del site, de la dirección a seguir y de la ubicación.

Propósitos ignorados en la navegación web

Los propósitos esenciales de la navegación web son dos: encontrar lo que se busca o recopilar información del sitio en el que estamos.

Pero la navegación tiene otros propósitos que a veces son ignorados:

• Nos dice lo que hay en cada lugar. Y lo hace con una jerarquía visible.
• Nos enseña a usar el sitio. Si la navegación es correcta, nos enseñará de forma implícita a usar el sitio.
• Nos permite confiar en las personas que la han creado.

Usabilidad web: convenciones de la navegación web

Por todo ello debemos asegurarnos de ajustarnos a las convenciones de navegación para ser eficientes.

Si el sitio está correctamente diseñado, el usuario debe responder de esta forma: “La navegación está aquí, algunas partes de la página cambiarán según dónde me encuentre, pero la navegación siempre estará aquí y funcionará de forma coherente”.

Las secciones y utilidades

Contienen los vínculos a la navegación principal y secundaria. Las utilidades conviene separarlas de las secciones.

El enlace a la home, simple visible

Normalmente enlazado por convencionalismo al logo.

Camino a seguir

Dado que mucha gente prefiere buscar en vez de echar un vistazo, es necesario tener un cuadro de búsqueda. Aunque, cuidado, debe arrojar correctamente los resultados. De nada sirve tener un buscador, si éste no funciona bien.

Jerarquías

Es fundamental contar con páginas de ejemplo que muestren la navegación en todos los niveles potenciales del sitio antes de empezar a discutir sobre otros temas de diseño.

Nombres de las páginas

• Cada página necesita un nombre. H1.
• El nombre ha de estar en el sitio adecuado, es decir, relacionado como parte del contenido de la página.
• El nombre debe estar destacado.
• El nombre debe tener relación con aquello a lo que se ha hecho clic.

Migas de pan

• Situarlas en la parte superior
• Utilizar el signo “>” entre niveles
• Poner en negrita el último término.

Checklist

Hay que responder de forma rápida a estas cuestiones:

• ¿Qué sitio es éste? Identificador del sitio.
• ¿En qué página estoy? Nombre de la página.
• ¿Cuáles son las principales secciones del sitio? Secciones.
• ¿Qué opciones tengo en este nivel? Navegación local. 
• ¿Dónde estoy en el esquema de las cosas? Indicadores del tipo “estás aquí”.
• ¿Cómo busco algo?

Usabilidad web: situar a la gente en el camino correcto

Qué debe tener la página principal:

• Identidad y misión del sitio. Qué es el sitio y para qué sirve y si es posible por qué debemos estar en él y no en otro site.
• Jerarquía del sitio. Debe dar una visión global de lo que ofrece el sitio, tanto de contenido (qué tiene), como de características (qué puedo hacer) y organización.
• Búsqueda. El cuadro de búsqueda tiene que estar a la vista.
• Sugerencias. Convencer con sugerencias de lo bueno que hay en el interior.
• Promociones de contenido. Mejores contenidos, historias novedosas, ofertas…
• Presentación de promociones. Invitar a explorar secciones adicionales o probar nuevas funciones.
• Contenido actualizado. Señales de actividad.
• Transacciones. Anuncios, promociones y potenciados de la marca.
• Accesos directos a lo más visitado.
• Registro visible, si procede.

Además de todo ello, hay que dejar de forma clara lo que se está buscando y lo que no, mostrar dónde empezar la navegación y establecer credibilidad y confianza, además del objetivo y lo más importante del site.

Hay que responder al usuario, y de forma nítida, lo siguiente:

• Qué es esto.
• Qué tienen aquí.
• Qué pueden hacer aquí.
• Por qué debería estar en nuestra web y no en otro lugar.

Cómo transmitir el mensaje en la página principal

• La Tagline (o lema). Se trata de uno de los lugares más valiosos. Es la frase asociada al identificador corporativo. Tiene que lanzar un mensaje claro e informativo en el que se explique exactamente lo que es tu sitio o lo que hace. Debe contar con una extensión ajustada y expresar diferenciación a través de un texto enérgico e ingenioso.

• Mensaje de bienvenida: descripción general del sitio mostrada en un espacio destacado.
• Un espacio necesario para explicar lo que haces (sin emplear más espacio del necesario).
• No hay que establecer una frase relativa a la misión de la empresa como mensaje de bienvenida.

Móviles

¿Cuál es la diferencia de UX en un móvil? No mucha, salvo que los usuarios se mueven más rápido, por consecuencia leen menos en el móvil y se trabaja con menos espacio de pantalla.

Consistencia por compensación

Hay que considerar el diseño como limitaciones (cosas que tienen que hacerse frente a cosas que no pueden hacerse) y compensaciones (elecciones que hacemos para manejarnos en las limitaciones). 

Pequeño espacio

Mobile First consiste en el ejercicio de determinar qué es lo más importante sobre lo importante.

Supone fijarse en las prioridades de uso. Las cosas que se quieren usar con frecuencia o prisa deben estar a mano.

Las limitaciones de espacio se traducen en aplicaciones más profundas en niveles.

Refuerzo de los elementos de comprensión intuitiva (CTAs claros).

Sin cursor no hay texto desplegable (no hay diferencia entre mover y hacer clic).

Simplicidad en el diseño (diseño plano, evitando que los CTA sean confundidos como un elemento de diseño plano).

Ahorro en Mb (fuera de un entorno WiFi la conexión es lenta, por lo que es necesario evitar pesos de archivos y código redundante).

Atributos de usabilidad. Una persona con habilidad y experiencia más o menos normal o incluso por debajo de la media puede descubrir cómo usar algo (es comprensible) para conseguir otra cosa (es efectivo) sin encontrar dificultades (es eficiente).

Placer, comprensión y memorización serían por tanto los atributos principales de una solución móvil.

La usabilidad como cortesía común

Hemos hablado hasta ahora de claridad. Pero hay otro elemento igualmente importante: hacer las cosas bien, con consideración hacia el usuario. Además de preguntarte: ¿es mi sitio claro?, tienes que cuestionarte: ¿tiene cualidad humana?

Evita:

• Esconder información deseada: un teléfono, un coste de envío…
• Pedir información innecesaria.
• Colocar obstáculos en el camino.
• Sitios que parecen de aficionado.

Procura:

• Conocer bien las cosas que los usuarios quieren lograr de tu sitio web. Hazlas obvias y sencillas.
• Di lo que quieren saber. Sé honesto.
• Ahorra pasos al cliente, siempre que puedas. 
• Anticípate a las preguntas que probablemente te hagan.
• Facilita la recuperación ante errores.