Sobre este post

Este post está hecho a base de los apuntes que he tomado mientras leía el libro. Es tan solo un resumen de los que puedes encontrar en él. Te animo a que lo hagas y disfrutes de la cantidad de imágenes y gráficos que explican mucho mejor lo que aquí se resume.

No me hagas pensar 2e: Una aproximación a la usabilidad en la web (PC Cuadernos)

Algunos capítulos han sido excluidos del post o han sido hiper-resumidos porque exceden los temas que trato en este blog.

A quién puede interesar “No me hagas pensar”

El libro está dirigido a empresas o particulares que están diseñando su página web y no pueden costearse un experto en usabilidad. es algo así como un libro de “hágalo usted mismo” fácil de entender y no muy largo.

Muchas de las cosas que cuenta “No me hagas pensar” ya las sabe cualquier usuario de Internet, otras son menos evidentes, pero en conjunto forma un buen manual de errores a evitar a la hora de crear un sitio web.

¿Que es usabilidad?

Según el autor algo usable es aquello que una persona con habilidades en la media es capaz de figurarse como funciona para poder realizar su tarea y que este esfuerzo merezca la pena.

 

Capítulo 1

No me hagas pensar

El usuario debe ser capaz de entender a primera vista que es lo que tiene delante suyo. Una página web debe ser auto-evidente.

Para ello el usuario no debe formularse preguntas acerca de lo que está viendo o cómo debe interactuar con ello, simplemente debe entenderlo a simple vista.

Cosas que nos hacen pensar

Cuando cambiamos el nombre obvio de algo por un nombre más elaborado o que atienda a la jerga interna de la empresa o del sector estamos haciendo que el usuario tarde un tiempo, aunque sea una fracción de segundo, en entender lo que le estamos presentando.

Algunas cosas no pueden ser auto-evidentes

Si una tarea por su propia naturaleza es demasiado compleja para ser auto-evidente. Esta misma debe ser diseñada para que el usuario solo le tome un pequeño tiempo para entenderla.

¿por qué es todo esto importante?

Más allá de que el usuario puede acabar harto de nuestra web y pasarse a la competencia es mas importante saber que la gente va gastar menos tiempo del que imaginamos viendo la web que hemos diseñado y ello debe ser capaz de mostrar su “magia” en un solo vistazo.

 

capítulo 2

¿Como usamos realmente la web?

Hay una gran diferencia entre cómo un diseñador web piensa que la gente usa sus páginas y cómo realmente se usan.

Los usuario no leen cuidadosamente la página siguiendo un orden. Realmente escanean de forma rápida cada página buscando un enlace que sea lo más parecido posible a lo que van buscando.

Esto depende de cada usuario y cada situación pero en términos generales es así.

Escanear

Escaneamos las páginas en vez de leerlas detenidamente debido a que:

  • Entramos en una web con una misión concreta.
  • Solo necesitamos una pequeña parte del contenido de la web.
  • Estamos acostumbrados a hacerlo en periódicos, revistas, redes sociales…

Satisfacer es suficiente, lo óptimo no es necesario.

Los usuarios no valoran las opciones que ofrece una web simplemente hacen clic en la primera opción que les parece válida. Esto es debido a:

  • En ocasiones tenemos prisa por completar la tarea.
  • Solo debemos volver atrás si no encontramos lo que queremos.
  • Sopesar varias opciones no nos garantiza mayor éxito.
  • Puede ser más divertido.

No nos planteamos cómo funcionan las cosas, simplemente las usamos

La gente es capaz de utilizar cosas sin leer las instrucciones, sin saber como se llaman o como un diseñador a pensado que es la mejor forma de utilizarlas. Simplemente las utilizan y si encuentran la forma de hacerlo las seguirán usando.

 

Capítulo 3

Diseño pensado para poder ser escaneado

Utiliza convenciones

En el diseño web existen ciertas convenciones, es decir patrones de diseño que todos reconocemos ya que nos resultan familiares.

En algún momento alguien tuvo una buena idea de diseño que la gente acogió bien y con el tiempo otros sitios fueron adoptando.

Algunos diseñadores puede que estén en desacuerdo con adoptar estas convenciones dado que pueden limitar su capacidad de creatividad.

Crea jerarquías visuales efectivas

El diseño de una página debe dejar claro:

  • Que cosas son la más importantes. Tamaño más grande, dejando espacio en blanco en la parte superior etc.
  • Que cosas son iguales entre si en cuanto a jerarquía. Juntándolas en un mismo espacio, mismo tamaño.
  • Que cosas son parte de otras cosas. Utilizando elementos de diseño para anidar contenidos.

Divide las páginas en secciones claramente definidas

Esto permite a los usuario ignorar fácilmente las secciones que no son de su interés.

Hacer obvio aquello que es cliqueable

Poner todos los enlaces del mismo color y que este sea diferente de encabezados, párrafos etc.

Mantén el ruido de fondo bajo control

Evita crear páginas donde todo quiere llamar la atención: anuncios con animaciones, sliders, anuncios de ofertas y todo tipo de exclamaciones deben ser mantenidos a raya.

Utilizar diseño basados en un patrón de rejilla es útil para crear aspecto de orden.

Evita las páginas atiborradas de contenido.

Formatea el texto para que sea fácilmente escaneable

Utiliza párrafos cortos, listas, resaltados en negrita, encabezados etc. (este post puede ser un buen ejemplo 😉 )

 

Capítulo 4

¿Por qué a los usuarios les gustan las decisiones inconscientes?

Existe un debate acerca del número máximo de clics que debe hacer un usuario para llegar a donde quiere. Pero el autor del libro pone en mayor valor el cómo de difícil es la decisión a tomar para elegir cada clic que se hace.

Si el usuario tiene una certeza de que está siguiendo los enlaces correctos, entonces el número de clics que tenga que hacer no es tan importante.

El diseñador debe tener presente que si una de estas decisiones es más difícil de tomar debe informar al usuario de forma que:

La indicación sea corta, oportuna e imposible de pasar desapercibida.

Esto es especialmente importante en formularios o en campos de búsqueda complejos.

 

Capítulo 5

Omite palabras innecesarias

Omite cualquier texto que sea innecesario para conseguir:

  • Reducir el ruido de fondo del sitio web
  • Conseguir que el contenido principal sea más relevante
  • Conseguir que los usuarios vean más contenido de un vistazo sin hacer scroll.

Evita los textos del tipo “Bienvenidos a nuestro sitio web… ”

Evita las instrucciones de uso. En su lugar intenta que el sitio sea auto-evidente.

 

Capítulo 6

Diseñando la navegación

Los elementos de navegación como los menús juegan un papel esencial en la usabilidad de un sitio web. No solo nos permiten navegar en ellos para encontrar la sección que buscamos, además:

  • Nos informa de que hay en ese sitio de un vistazo
  • Nos informa de como usar ese sitio de forma intuitiva.
  • Un buen diseño de la navegación nos transmite confianza acerca de las personas tras ese sitio.

Todos los elementos de navegación tienen ciertas convenciones que es aconsejable seguir:

  • Nombre del sitio en la esquina superior izquierda.
  • Cuadro de búsqueda y utilidades (acceso a mi cuenta, carro de compra, selección de idioma) en la esquina superior derecha.
  • El menú de navegación debe indicar en que sección estamos (resaltando ese elemento).
  • Nombre de página que anide correctamente el contenido de esta.
  • Navegación local (dentro de la sección actual) claramente identificable.

De la lista anterior los tres primeros elementos deben ser persistentes. Deben ser accesibles desde todas las páginas del sitio con unas pocas excepciones (final del proceso de compra).

Otros elementos de navegación también siguen ciertas convenciones:

  • Las migas de pan o “breadcrumbs” deben ir separadas por el símbolo > y resaltar el último elemento.
  • La navegación con pestañas debe resaltar la pestaña actual de las demás.

Si la navegación está bien diseñada debe permitir saber en todo momento:

  • Saber el nombre del sitio
  • En qué página estamos
  • Cuales son las secciones principales
  • Que puedo ver en la sección actual
  • Donde estoy dentro de la jerarquía del sitio
  • Como hacer una búsqueda

 

capítulo 7

La teoría del Big Bang del diseño web

El diseño web se asemeja a la teoría del Big Bang en que los primeros segundos son cruciales para entender todo lo demás.

Cuando un usuario llega a nuestra web, a través de la home page, debe poder resolver estas preguntas:

  • ¿Qué es esto?
  • ¿Qué puedo hacer aquí?
  • ¿Qué tienen aquí?
  • ¿Por qué debería estar aquí y no en otro sitio?

Si los usuarios no tienen claro en que lugar están desde un principio quizás acaben más perdidos.

Aunque los usuarios no lleguen a nuestro sitio a través de la home page, es muy posible que accedan a ella para saber de que va el sitio.

Elementos que son importantes para orientar a los usuarios:

  • La descripción del sitio o tagline que se situa bajo el logo. Está a la vista en todo el sitio por lo que es una buena herramienta para definir que es exactamente el sitio.
  • Mensaje de bienvenida en la página principal. Normalmente situado en un espacio prominente en la parte superior de la home page.  Es un lugar excepcional para explicar que es nuestro sitio y que le hace diferente.
  • Si el sitio es un poco más complicado de entender de lo normal quizás necesite una sección de primeros pasos o ayuda.

Una buena home page debe entonces contener:

  • Nombre del sitio y su misión (logo y tagline).
  • Una clara jerarquía del sitio (menú navegación).
  • Promos que atraigan hacia las partes importantes de la web y otras partes menos relevantes.
  • Promos que atraigan hacia nuevos contenidos.

Además la home debe reforzar que:

  • El usuario debe encontrar aquello que está buscando.
  • La web ofrece algo adicional a lo que el usuario está buscando.
  • Debe poder saber por donde empezar su tarea, búsqueda, navegación, compra etc.
  • Establecer credibilidad y confianza.

Si así lo necesita nuestro sitio también puede contener:

  • Contenido sujeto a un espacio de tiempo.
  • Promociones.
  • Registro o login prominente.
home page de lanzanos.com

Un buen ejemplo de estos puntos puede ser la home page de lanzanos.com portal dedicado al crowdfounding

 

Capítulo 8

¿Cómo evitar debates absurdos sobre usabilidad?

Las agencias de diseño web suelen tener en sus equipos diferentes perfiles: Diseñador gráfico, desarrollador, experto en marketing y gestor de proyecto entre otros.

Cada uno puede tener una idea diferente sobre que es lo que al usuario medio le gusta. Debido a que cada uno tiene unos gustos diferentes.

En vez de plantear un debate sobre: ¿este elemento le gusta al usuario medio?. El debate debería orientarse hacia: ¿este elemento, diseñado de esta manera, con estos elementos en concreto, en esta página en concreto, en este contexto funciona con nuestro usuario medio?. Y la forma de responder a esto es llevando a cabo tests de usabilidad.

 

Capítulo 9

Tests de usabilidad

(Este es uno de los capítulos más largos y complejos del libro. Tanto es así que el autor tiene  un libro exclusivamente para hablar de este tema). Rocket surgery made easy – Steve Krug. (El libro habla sobre como hacer tests de usabilidad sin tener que contratar a un profesional.)

Algunos conceptos en cuanto a los tests de usabilidad:

  • Si quieres un gran sitio necesitas hacerlos. (Especialmente interesante para ecommerce o servicios complejos)
  • Hacer un test a una sola persona es 100% mejor que ningún test.
  • Testear a un solo usuario en una fase temprana del desarrollo es mejor que a muchos al final.
  • El objetivo de los test es detectar los principales problemas de usabilidad, no todos.
  • Por cada usuario que haga el test se deben extraer los tres principales problemas encontrados.
  • Crea tareas específicas a realizar (Crear una cuenta nueva, recuperar una contraseña, buscar una categoría concreta).

 

Capítulo 10

Usabilidad en sitios web para móviles

Algunos aspectos acerca de la usabilidad de sitios web en dispositivos móviles:

  • Los principios de usabilidad siguen siendo los mismos.
  • Los usuarios de móvil leen todavía menos texto.
  • Algunos elementos deben ser eliminados (por ejemplo de la home page) lo que no significa que no puedan ser accedidos.
  • Diseñar para una navegación móvil (menor velocidad, menos espacio) no debe ser hecho a costa de la usabilidad.
  • Un diseño adaptable a todos los tamaños de pantalla es más facil de gestionar que varios sitios (móvil y desktop).
  • Tendencias como el diseño plano (flat design), o diseños minimalistas pueden repercutir en la usabilidad.
  • La ausencia de cursor en el móvil, y por consiguiente de efectos tipo hover (algo cambia cuando pasamos el cursor por encima), también afecta la usabilidad.

 

Capítulo 11

Usabilidad como cortesía

Más allá de como organizar la información, dar pistas sobre el funcionamiento del sitio y crear una experiencia de navegación agradable existen ciertos aspectos a tener en cuenta que también van a alterar la imagen que genera un sitio web:

  • Ocultar información de utilidad ( número de teléfono, gastos de envío, costes ocultos).
  • Pedir información que no es del todo necesaria (formularios de registro).
  • Atención al cliente lenta, mal organizada, mal atendida etc.

Otros sin embargo van a mejorarla:

  • Saber que buscan los usuarios y ponerlo en una posición visible y que sea fácil de usar.
  • Ofrecer información de interés que puede suponer un problema.
  • Crear una buena página de preguntas frecuentes

Capítulo 12

Accesibilidad

Una parte importante de la población sufre de algún impedimento para poder visualizar correctamente una página web.

Aunque la tendencia es a mejorar cada vez más la accesibilidad de los sitios web, puede que diseñadores o desarrolladores traten de ignorarlo con la intención de ahorrar trabajo y no dificultar más el desarrollo.

Aspectos para mejorar la accesibilidad:

  • Utilizar el campo “alt” de las imágenes.
  • Utilizar las etiquetas <H1><H2> etc. correctamente y que sean fácil de distinguir entre ellas
  • Rellenar la etiqueta <label> de los formularios.
  • Utilizar un contraste alto entre texto y fondo.
  • Utilizar un tema de WordPress que sea accesible.

Actualización: Ya está disponible la segunda edición en castellano, actualizada y con el capítulo para usabilidad en móviles:

No me hagas pensar 2e: Una aproximación a la usabilidad en la web (PC Cuadernos)

¿Ya has leído el libro? deja tu opinión en los comentarios. Si te ha gustado el post anímate a compartirlo.