Después de bastante tiempo (años) dedicado a ver todo tipo de cosas en el mundo de Internet, he decidido escribir este Decálogo de Usabilidad para Todos.
Casi todo lo que escribo es un resumen del libro de Steve Krug “Don’t make me think”, que creo puede ayudar a todo el mundo que se encuentra como yo, inmerso en el mundo de Internet y las nuevas tecnologías.
Primera norma de usabilidad -> ¡No me hagas pensar!
Todo usuario quiere llegar a su objetivo con el mínimo esfuerzo y si para encontrarlo, supone demasiado esfuerzo, lo abandonará.
Nuestro objetivo -> conseguir que el usuario encuentre lo que busca con el mínimo esfuerzo y no abandone en el intento.
Los creadores de contenido web pensamos en un gran texto literario. Mientras que la realidad de los usuarios es como si ven una valla publicitaria a 60 kilómetros por hora. La web no se lee, se escanea y el usuario hace clic en el primer enlace que atrae su atención. Por tanto, debemos diseñar páginas para ser escaneadas no para ser leídas.
Cómo usamos realmente la web
3 hechos que marcan el uso de la web:
- No leemos páginas, las escaneamos. Buscamos palabras o frases o elementos que atraigan nuestra atención.
¿Por qué? Porque vamos corriendo y queremos ahorrar tiempo. Sabemos que no necesitamos leerlo todo, llevamos haciéndolo toda la vida: con los periódicos, revistas, etc. - No tomamos la mejor decisión. No elegimos la mejor opción, sino la suficientemente buena. Elegimos la primera opción más razonable.
¿Por qué? Porque vamos rápido y si elegimos mal, no hay gran penalización, volvemos atrás y lo volvemos a intentar. Adivinar es más divertido. - No entendemos cómo funcionan las cosas. Simplemente nos lanzamos a ello y nos las apañamos.
5 cosas que puedes hacer para asegurar que ven lo máximo de tu web:
- Crear una clara jerarquía visual en la página (ejemplo: periódicos).
- Los elementos relacionados lógicamente también deben estar relacionados visualmente.
- Los elementos se anidan visualmente para mostrar qué es parte de qué.
- Aprovecha los estándares cuando sea posible. Son útiles (ejemplo: periódicos).
- Divide las páginas en áreas claramente identificables.
- Haz obvio lo que es clicable.
- Minimiza el ruido.
A 3 clics o 4 o 5…
¿Cuántos clics hacen los usuarios para encontrar lo que buscan sin sentirse frustrados?
Se suele decir que con 3, 4 o 5 clics debes poder llegar a cualquier página de tu sitio web. Pero no es correcto. Al usuario no le importa hacer más clics, siempre y cuando tengan sentido y tenga la impresión de ir avanzando hasta su objetivo.
¿Has dejado de comprar las entradas para ir a un concierto de tu grupo favorito porque tenías que hacer demasiados clics para comprarlas?
Evita palabras innecesarias
Por la misma razón que una máquina no tiene partes que no funcionan, una frase no debe tener palabras innecesaria y si no que se lo digan a los británicos -> Vigorous writing is concise!
Por norma general, las palabras de un texto se pueden reducir a la mitad, sin perder la esencia o el sentido de lo que se pretende comunicar. Ejemplos como eliminar el “happy talk”, textos introductorios que dan la bienvenida y eliminar las instrucciones (algo bien diseñado no necesita dos párrafos para que el usuario lo entienda).
Recuerda: el usuario escanea -> No sirve de nada llenar el espacio con palabras que lo único que hacen es añadir ruido visual.
Las señales de la calle y migas de pan
La web es como si entras en un supermercado: vas buscando algo, miras los carteles del techo, cuando encuentras las sección, entras y miras lo lineales. Si no hay suerte, vuelves atrás y vas a otra sección o preguntas a algún empleado por lo que buscas.
Navegar en la web es más o menos lo mismo -> decides navegar por las distintas secciones o puedes ir al buscador que es como preguntar al empleado. Si no encuentras lo que buscas -> te vas!
Navegación persistente -> Algunas partes de la web pueden cambiar un poco, pero todo debe funcionar en general de la misma forma.
Toda web debe incluir 5 elementos que necesitamos tener siempre a mano:
- El logo.
- Secciones -> Añadir subsecciones.
- Utilidades -> Enlaces a elementos importantes de la web: Ayuda, SiteMap, Shopping Cart, Your Account, Contacto o About Us.
- Botón de la home. Siempre visible, asegura que no importa lo perdido que esté, siempre puedo volver a empezar.
- Un camino rápido a la búsqueda. Teniendo en cuenta el número de personas que prefiere buscar a navegar, toda web debe tener el cuadro de búsqueda bien visible.
Un mapa claro de niveles y un ejemplo claro de páginas y subpáginas.
ERROR -> No darle la misma atención a las subpáginas que a las páginas principales. Un claro ejemplo:
¡Cuando se pasa al 2º nivel no se debe romper la navegación!
Es vital tener páginas de ejemplo que muestren la navegación para todos los niveles potenciales lo antes posible.
Hay 4 cosas que debes saber de los nombres de las páginas:
- Toda página necesita un nombre. Los diseñadores piensan que es suficiente con resaltar el nombre en la navegación, pero no es suficiente!
- El nombre tiene que estar en el lugar adecuado.
- ¡El título debe destacar! Tamaño, color y tipografía para decir: éste es el nombre de la página.
- El nombre tiene que ser coherente con el enlace en el que hago clic.
¡Estás aquí!
Hay que destacar siempre dónde estoy en la barra de navegación, listas o menús.
Te enseña dónde estás dentro del esquema en su conjunto.
Migas de pan (Breadcrumbs)
Te enseña el camino desde la home -> No es lo mismo que el apartado de estás aquí.
Te enseña cómo llegar ahí.
Mejores prácticas para las migas de pan que debes seguir sí o sí:
- Ponerlas arriba.
- Utilizar > entre niveles.
- Utilizar letra pequeña.
- Utilizar las palabras: Estás aquí (You are here).
- Resalta el último nivel.
- No las utilices para sustituir el nombre de la página.
Pestañas
¡Son tremendamente útiles! Es uno de los pocos ejemplos que usando una metáfora de algo físico, funciona!
4 razones por las que las pestañas funcionan:
- Son evidentes.
- Son tan distintivas visualmente, que son difíciles de perder.
- Si se utilizan correctamente, pueden añadir brillo y tener un propósito tremendamente útil.
- Sugieren un espacio físico. Para funcionar bien debe haber un efecto de que la pestaña activa está delante del resto.
Haz el test de dónde estoy
Sitúate en cualquier página de tu web y trata de responder a las siguientes preguntas:
- ¿Qué web es ésta? (Logo del sitio)
- ¿En qué página estoy? (Nombre de página).
- ¿Cuáles son las secciones de la página?
- ¿Cuáles son mis opciones a este nivel? (Navegación local).
- ¿Dónde estoy en el esquema de navegación? (“You are here”).
- ¿Cómo puedo buscar algo?
La página principal
La página principal es la más importante de todas y, por tanto, puede suponer una excepción, pero no debe promocionar todo lo que hay en la web.
Todo lo que la página principal debe incluir:
- Identidad del sitio.
- Jerarquía del sitio.
- Botón de buscar.
- Debe tener contenido que enganche al usuario.
- Contenido temporal -> Si el éxito de la web depende de que vuelva el usaurio -> la web necesita contenido que se actualice frecuentemente.
- Ofertas
- Atajos -> Lo más accedido se merece un espacio en la home, para que la gente no tenga que salir a buscarlo.
- Registro -> Si el sitio requiere registrarse, la home necesita enlaces a registro e identificación y una forma de saber si estoy logado o no.
Además:
- Debe ser capaz de mostrarme lo que estoy buscando -> hacer evidente cómo llegar a donde quiera.
- Y a lo que no estoy buscando: de alguna forma, la home debe mostrar cosas increíbles que ni siquiera estaba buscando.
- Enséñame por dónde empezar -> No hay nada peor que encontrar una web nueva y no saber por dónde empezar.
- Para algunos visitantes, la home es la única oportunidad de crear buena impresión.
Si está bien hecha, debe responder a estas preguntas:
- ¿Qué es esta página?
- ¿Qué puedo hacer aquí?
- ¿Por qué debo estar aquí y no en otro lugar?
- ¿Por dónde empiezo?
Hay 2 sitios muy importantes para encontrar qué web es:
- Debajo del logo.
- El texto de bienvenida -> Nada mejor que un slogan.
El mito del usuario medio
Todos tenemos una tendencia natural: cuando algo nos gusta, asumimos que también le gusta al resto de usuarios.
Los diseñadores piensan que a la gente le gustan las webs bonitas, porque a ellos les gustan las webs visualmente atractivas. Y los diseñadores piensan que a la gente le gustan las webs con muchas funcionalidades chulas, porque a ellos les gustan.
La realidad es que todos los usuarios web son únicos.
En vez de preguntar si un elemento le gusta a la mayoría, la pregunta correcta es: ¿crea una buena experiencia de usuario a la mayoría de las personas que usa esta web este elemento, con estas palabras en este contexto en esta página?
Sólo hay una forma de responder -> Pruebas, pruebas y más pruebas (Testing!).
Probar te recuerda que no todo el mundo piensa como tú. Hacer pruebas a un usuario es 1.000 veces mejor que a ninguno. Y hacer pruebas a 1 usuario al principio del proyecto es mejor que probar con 50 usuarios al final del proyecto.
Las webs de éxito suelen tener un equilibrio muy delicado y es importante tener en mente que el menor de los cambios puede tener un gran impacto no deseado.
A veces, el reto real no es arreglar lo que falla, sino arreglarlo sin romper lo que funciona.
La accesibilidad
No puedes decir que tu página es usable si no es accesible.
Cinco cosas que debes hacer ya relacionadas con la accesibilidad:
- Arregla los problemas de usabilidad que confunden a todo el mundo.
- Si tienes tiempo y motivación, utiliza un lector de pantalla para leer tu web.
- Lee un libro sobre accesibilidad web.
- Empieza a usar CSS
- Ataca lo más evidente:
- Usa alt en las imágenes.
- Haz que los formularios funcionen correctamente con los lectores de pantalla.
- Añade un “Saltar al contenido” al principio de cada página.
- Haz que todo el contenido sea accesible con el teclado.
- No utilices JavaScript sin una buena razón.