Informe de lectura: No me hagas pensar. Una aproximación a la usabilidad en la web (Segunda ed.)....

Por: Héctor Garduño Real

Máster en Dirección e Ingeniería de Sitios Web Usabilidad, Accesibilidad y Métricas de Sitios Web

30 de diciembre de 2014 Página 1 de 9

INFORME DE LECTURA: No me hagas pensar.

Una aproximación a la usabilidad en la web.

INTRODUCCIÓN

En su libro, Steve Krug (2006), explica diversos aspectos referentes a la usabilidad en los sitios web

que resultan de gran utilidad para iniciarse en el tema de usabilidad web de manera profesional, ya

sea para mejorar sitios propios o incluso para hacerlo como consultor. No me hagas pensar, es un

libro que abarca conceptos básicos, recomendaciones, casos reales, explicaciones del comporta-

miento del usuario e incluso procedimientos para realizar evaluaciones de usabilidad, por lo que es

idóneo como punto de partida para profundizar en el tema o adentrarse en otros temas relacionados,

como el caso de la accesibilidad, que si bien no es un tema propio del libro, Krug lo relaciona en

algunos casos para reflejar su impacto.

No me hagas pensar es un libro destinado a diferentes tipos de lectores que puedan estar in-

volucrados en el desarrollo de sitios web o que ya tengan uno, por lo que no es una lectura técnica,

sino una lectura para conocer sobre la usabilidad y hacer conciencia sobre los principales problemas

presentes en la mayoría de los sitios web, de forma que se empiecen a generalizar los cambios para

cada vez tener una web más universal.

LA USABILIDAD

En palabras simples, la usabilidad web significa asegurarse que una página web funcione bien y que

pueda ser usada por una persona con capacidad y experiencia media o con capacidades disminuidas

para realizar cualquier actividad disponible en la misma pero sin sentirse completamente frustrado

(Krug, 2006, pág. 5).

El principal asunto con los sitios web y la usabilidad es que si algo resulta complicado de

usar, simplemente no se usará demasiado o inclusive se evitara su uso, y como es de imaginar, eso

sería un completo desastre en un sitio web donde lo que se pretende es que la mayor cantidad de

personas alrededor del mundo lo visite y lo explore lo más que sea posible.

Debido que no existe una forma correcta o una “receta mágica” para diseñar sitios web, lo

que Krug recomienda es hacer siempre y constantemente pruebas de usabilidad, ya que “simple-

mente depende” de las condiciones para decir que un sitio está bien hecho, por ejemplo para lo que

a un usuario le parece correcto, para otro quizás no, ya que dependerá de ciertos factores. Precisa-

mente porque no se puede generalizar o crear la fórmula perfecta es que Krug establece unas reglas

básicas que siempre deben considerarse.




LAS 3 NORMAS DE STEVE KRUG

En su libro, Krug (2006) plantea tres normas que nunca se deberían dejar de lado para tener un sitio

mínimamente usable, a continuación se explican cada una de ellas.

1era NORMA: No me hagas pensar

Es la primera y más importantes de las normas, ya que si un usuario le cuesta trabajo realizar algo

en un sitio web se le está poniendo a pensar lo que provoca que tarde o temprano abandone el sitio.

Como usuario, no se debería emplear ni una milésima de segundo en pensar dónde se puede o no

dar clic o qué es lo que se puede usar, de hecho, con simplemente dar un vistazo rápido, un usuario

debería poder saber de qué se trata la página y la forma en la que se puede usar, es decir el uso de

una página web debe ser muy fluido y rápido sin que se detengan a analizar algún aspecto, por ello

el usuario jamás debe preguntarse cosas como ¿Dónde estoy?, ¿Por dónde empiezo?, ¿Dónde está

___?, ¿Qué es lo más importante de esta página?, ¿Por qué se llama de esa forma?.

Aspectos que influyen en la norma

Los usuarios siempre echan un vistazo rápido, en busca de algo que es interesante o

que se parezca vagamente a lo que está buscando o en lo que pueda hacer clic, es decir, los

usuarios de la web no leen las páginas, las hojean, ya que tienen prisa y por experiencia

previa saben que no es necesario leer todo, la única excepción serán documentos (artículos,

noticias, descripciones de productos, etc.).

Así mismo los usuarios nunca toman la mejor decisión al dar un clic, un comporta-

miento llamado satisficing1 (satisfactorio y suficiente), esto quiere decir que no se quedan

con la mejor de las opciones, sino la que consideran más razonablemente adecuada, ya que

optimizar (es decir, encontrar la mejor opción) lleva tiempo, y en la web donde lo que se

busca es ahorrarlo, entonces el satisficing siempre será más efectivo.

Los usuarios no averiguan cómo funcionan las cosas, sino todo lo contrario, tratan

de arreglárselas por cuenta propia sin importar que se le presentes las instrucciones. Esto se

debe a que no importa para qué se haya diseñado algo, mientras pueda ser usado es válido,

y si le funciona al usuario a pesar de ir en contra de las instrucciones, lo seguirá haciendo de

la misma forma porque es lo que le funciona.

Recomendaciones para cumplir la norma:

Lo más importante y/o más usado debe estar a menos de dos clics de distancia de cualquiera

de las páginas del sitio.

Usar el lenguaje del usuario y ser coherente en la redacción.

Si algo puede presionarse, debe tener la apariencia de poder hacerlo. Por ejemplo si un tex-

to es un vínculo debe estar subrayado y con color diferente; y si se trata de un botón, debe-

rán estar dibujados los bordes y tener una sombra o simular profundidad.

1 Ante un problema tomamos la primera decisión que se nos venga a la cabeza, evaluamos muy rápidamente

los posibles problemas y si no los encontramos, se toma esa decisión como plan de acción.




Mostrar el encanto de la página con un solo vistazo. Para lo cual es necesario tener cuidado

con la apariencia de las cosas, la elección de los nombres, la disposición de los elementos y

textos; es decir, todo en su conjunto debe funcionar bien.

Asegurarse que el usuario vea y entienda el contenido, para lo cual se recomienda:

o Crear una jerarquía visual clara en cada página: Lo más importante deberá ser lo

que más resalte (en tamaño, color o forma), por lo que se ha de agrupar elementos

similares en una zona claramente definida visualmente y delimitar visualmente los

contenidos por bloques.

o Aprovechar las convenciones: Desde niños estamos acostumbrados a reglas de lec-

tura, por ejemplo, el significado de letras más grandes, más pequeñas, que acompa-

ña a una foto, etc.; así como el uso de metáforas en la computadora. Si algo es muy

difundido y adoptado se vuelve una convención y con el tiempo los usuarios se fa-

miliarizarán con ello, por eso se deben provechar las convenciones cuando no haya

mejores ideas2.

o Dividir las páginas en zonas claramente definidas: Agrupar la información en blo-

ques claramente diferenciables (por ejemplo por color) para que el usuario decida

rápidamente en qué quiere centrarse y qué quiere ignorar.

o Minimizar el ruido: Evitar elementos abrumadores para tener que ir al contenido o

que busquen llamar la atención de alguna manera3. De igual forma evitar elementos

de fondo que resalten en exceso, por ejemplo imágenes, colores, formas, etc., ya

que distraen o dificultan la lectura.

Acciones que contradicen la norma:

X Usar nombres “bonitos”, ingeniosos o muy técnicos para nombrar elementos, por ejemplo

un botón con el texto “¡Vamos!” en lugar del “Buscar” provocaría confusión.

2da NORMA: No importa el número de veces que hay que hacer clic en algo si la opción

es mecánica e inequívoca.

No importa cuántos clics haya que dar (siempre hay límites razonables) para llegar a lo deseado.

Aunque un procedimiento sea mecánico (clic tras clic) si no hace pensar y no provoca una equivo-

cación, el usuario no le importará la cantidad de clics que se tengan que dar.

3ra NORMA: Elimine la mitad de las palabras en todas las páginas y luego deshágase de

la mitad de lo que quede.

El simple hecho de haber muchas palabras en una página hace pensar al usuario que en realidad hay

que leerlas todas para entender de qué se trata. Por ello se debe procurar que una frase no tenga

palabras innecesarias y un párrafo omita las frases superfluas. Lo mismo aplica para los nombres de

los elementos, por ejemplo es mejor el botón [Buscar] que uno largo como [Buscar en el sitio].

2 Si se va a reinventar una mejor forma de hacer o representar algo, no debe ser un cambio muy drástico, sino

algo claro y fácil de entender que no tenga curva de aprendizaje o sea mínima. Por ejemplo, mientras no exis-

ta una mejor alternativa al icono de carrito de compras, se deberá seguir usando dicha convención en los sitios

de comercio electrónico. 3 Por ejemplo los cuadros flotantes que aparecen con publicidad o formularios de suscripción que deben ser

rellenados para poder continuar leyendo la página.




Cuando la cantidad de texto es acortada se reduce el nivel de ruido en la página y el usua-

rio no se siente tan abrumado; también se realza el contenido realmente práctico brindándole al

usuario exactamente lo que necesita; además de que las páginas son más cortas, haciendo que el

usuario vea más con un simple vistazo y sin tener que desplazarse de arriba abajo.

Recomendaciones para cumplir la norma:

Evitar o desaparecer los discursos innecesarios, ya que lo que el usuario busca es ir al

grano. Es absurdo que exista un discurso introductorio que explique lo increíble que es o lo

que podemos encontrar en la página que acabamos de entrar.

Eliminar las instrucciones, ya que los usuarios no las leen, salvo que hayan fracasado varias

veces en hacer algo. Si algo se le dificulta al usuario no se deben poner instrucciones, sino

poner todo claro y hacerlo fácil, salvo que sean absolutamente esenciales, deberán ponerse

las instrucciones lo más reducidas posible.

RECOMENDACIONES EN LA NAVEGACIÓN DE UN SITIO WEB

En el capítulo 6 de su libro, Krug (2006, págs. 51-

93) expone diversas recomendaciones y ejemplos

sobre la navegación, y explica los beneficios y pro-

blemas realizando una comparación bastante buena

que aplica para la gran mayoría de sitios web. Se

trata de la analogía de entrar a un supermercado

para conseguir un producto, similar a como se in-

gresa a un sitio web a buscar un conteni-

do/producto, donde si la experiencia de navegación

resulta frustrante, el usuario termina saliendo.

En un sitio web estamos básicamente per-

didos, no sabemos lo que hay en él, por lo tanto se

debe “navegar” o averiguar en dónde se está, es por

ese motivo que la navegación tiene que ser buena.

Hay que recordar (como se mencionó en el tema

Usabilidad) que un usuario no utilizará un sitio web

si no se siente cómodo al usarlo.

Al igual que en el diseño, no hay una “rece-

ta mágica” para crear sistemas de navegación perfectos, ya que todos los usuarios son diferentes y

cada uno tiene sus propias costumbres o si se tiene prisa en un momento dado. Sin embargo algo

que siempre se da, es que hay tres formas de comportamiento del usuario:

1. El que no requiere ayuda: El usuario tratara de buscar lo que desea por sí mismo, si

no lo encuentra, sale del sitio.

Ilustración 1. Navegación en un supermercado según

Krug (2006, pág. 56)




2. El que requiere ayuda: Lo primero que hace es ubicar un cuadro de búsqueda, la reali-

za, y si no aparece lo que buscaba, sale del sitio (por ello la importancia de tener siem-

pre un cuadro de búsqueda).

3. El que busca sólo y luego usa la ayuda: Este tipo de usuario primero busca por cuenta

propia lo que desea, al haber quedado sin vínculos que visitar significa que fracasó, por

lo que como alternativa ubica un cuadro de búsqueda que le ayude, si los resultados son

fallidos entonces abandona el sitio.

Una forma de saber que una página tiene una buena navegación es que se puedan responder las

siguientes preguntas identificando los elementos que sirven para ello en la página y adicionalmente

que dichos elementos estén claramente diferenciables o puedan verse de un vistazo:

¿Qué sitio es? (Identificador del sitio o logo)

¿En qué página estoy? (Nombre de la página)

¿Cuáles son las principales secciones del sitio? (Secciones de navegación)

¿Qué opciones tengo en este nivel? (Navegación local)

¿Dónde estoy en el esquema de las cosas? (Indicador “usted está aquí:”)

¿Cómo busco algo? (Cuadro de búsqueda)

Recomendaciones para mejorar la navegación

Usar indicadores visuales: Con ello el usuario sabrá dónde se encuentra y poder darse una idea so-

bre si ha visto todo lo que le interesa del sitio o cuándo puede parar de buscar. El indicador más

simple es poner de otro color los vínculos ya visitados.

Usar las convenciones como la identifi-

cación del sitio, diferenciar secciones de sub-

secciones y utilidades, identificar4 o diferen-

ciar5 la ubicación del usuario, colocar nombre a

la página, así como colocar una navegación

local si se tiene demasiada información.

Usar una “navegación coherente”, lo

cual implica que los elementos de navegación

aparezcan igual6 en todas las páginas del sitio

web. Para ello se recomienda incluir (además

de lo mencionado en el párrafo anterior) el ca-

mino a la página de inicio (vínculo “Inicio”) y

4 Se puede identificar la ubicación del usuario con breadcumbs las cuales se recomienda colocarlas en la parte

superior al margen de todo (como un accesorio), con letras pequeñas, el último elemento en negritas y acom-

pañado del texto “Usted está aquí:”. 5 Se puede diferenciar la página en la que se ubica el usuario con algún distintivo visual, como cambiar el

color de la sección en el menú, poniéndola en negrita, o añadiendo un símbolo por ejemplo “Inicio” 6 La única excepción es la página principal, donde se puede usar un diseño diferente de navegación o las pá-

ginas con formularios para evitar distraer al usuario.

Ilustración 2. Convenciones de navegación en sitios web

(Krug, 2006, pág. 61)




una forma de buscar (un cuadro de búsqueda).

Los cuadros de búsqueda deberán ser simples y claros, solamente si se genera confusión se

deberá poner ámbito o lugar en donde se buscará de todo el sitio.

Ilustración 3. Usos correctos de cuadros de búsqueda (Krug, 2006, pág. 67)

El título de la página debe enmarcar al contenido, ser grande y con posición y color adecua-

dos. Además si esa página fue abierta desde un vínculo, éste debe decir lo mismo que el título.

Se recomienda hacer uso de pestañas como metáfora en la navegación, pues son claras, fá-

ciles de entender y difícilmente se pierden de vista. Pero es importante que las pestañas estén bien

dibujadas (que parezcan solapas); que se produzca un efecto de conexión al pasar la página a primer

plano; que al dar clic se diferencien por colores contrastantes7; y siempre debe de haber una pestaña

seleccionada al entrar al sitio, de lo contrario perderá su efecto.

Ilustración 4. Uso correcto de pestañas como navegación (Krug, 2006, pág. 82)

RECOMENDACIONES PARA LA PÁGINA PRINCIPAL

El primer contacto de una persona con un sitio web suele darse a través de la página principal, por

lo que si ésta no resulta atractiva, útil y fácil de usar entonces probablemente el usuario abandone el

sitio por lo cual Krug plantean las siguientes recomendaciones:

El cuadro de búsqueda deberá ser mucho más visible y grande.

Mostrar una perspectiva de todo lo que hay en el sitio usando fragmentos de contenidos.

El contenido debe ser temporal y actualizarse constantemente.

Colocar los mejores contenidos en la parte más visible de la página y los elementos o con-

tenidos más usados como accesos directos para que el usuario no tenga que buscarlos.

Indicar claramente por donde se puede empezar a navegar para el caso de usuarios nuevos.

Solamente en caso de que no resulte obvio, agregar una breve descripción del sitio.

Usar un tagline claro y corto que acompañe al logo para así diferenciar el sitio del resto.

El menú de navegación podrá tener descripciones para cada sección o cambiar la posición

(horizontal-vertical) pero siempre conservando el orden, redacción y agrupación.

Por ningún motivo deberán emplearse menús desplegables como método de navegación ya que

son inadecuados pues hay que buscar entre secciones que no llaman la atención, además no se les

puede dar apariencia adecuada, su forma de agrupación es ineficiente, y resulta difícil leer.

7 Los colores solo se deben tomar como reforzamiento ya que muchas personas tienen daltonismo.




LAS PRUEBAS DE USABILIDAD

Para saber si un sitio web tiene un alto grado de usabilidad la única forma es determinándolo me-

diante pruebas de usabilidad, que ayudaran a detectar problemas a solucionar. Aunque pueden reali-

zarse diferentes pruebas, más o menos profesionales y más o menos adecuadas, lo correcto es reali-

zar “pruebas de usabilidad” ya que son las más adecuadas, sin embargo se pueden hacer otras.

Pruebas de cubículo: Se hacen pruebas muy rápidas con los compañeros de desarrollo

mostrando o imprimiendo la página para que den su opinión, por ello se llaman pruebas de

cubículo, ya que solo hay que moverse un poco para conocer la opinión.

Grupo de enfoque: Reunión de un pequeño grupo de personas (normalmente de 5 a 8) que

reacciona ante las ideas y los diseños que se les muestran, es decir, la opinión de un partici-

pante es ante la reacción o influencia del resto. Es una prueba adecuada para determinar lo

que la audiencia quiere, necesita o le gusta, si la idea general del sitio tiene sentido o es

atractiva, así como probar nombres de los elementos.

Pruebas de usabilidad: Se le muestra a un grupo de usuarios seleccionados un sitio web y

se les pide que averigüen lo que es, que intenten realizar tareas y se les hacen preguntas.

Si se quiere un gran sitio, hay que probarlo y preferentemente al iniciar el desarrollo, y seguir

repitiendo las pruebas cada que se hagan cambios, ya que cuando los problemas ya estén resueltos

las pruebas posteriores podrían permitir encontrar problemas que no se percibieron en pruebas ante-

riores.

Las pruebas pueden realizarse en cualquier momento, pueden comenzar incluso antes del dise-

ño, probando sitios similares, la distribución de elementos o características que se tengan pensadas.

También es posible mostrar bocetos de diseño, pero en este caso es recomendable que sean bocetos

que muestren que el trabajo está en proceso, ya que un boceto finalizado limitara a la persona pues

pensara que ha llevado demasiado tiempo y no se permiten cambios, además no se distraerán con

detalles de un diseño muy pulido.

El proceso de hacer pruebas de usabilidad

1. Reclutar usuarios con tranquilidad y clasificarlos para que al hacer las pruebas sea con

personas similares a las que usaran el sitio8.

2. En un cuarto el usuario se sienta frete a la computadora, el encuestador en otra silla y

hay una cámara que transmite en vivo9 el video a otro cuarto para que los interesados10

analicen la prueba.

3. Se da a firmar al usuario un breve contrato de confidencialidad.

4. Se muestra al usuario el sitio web para que sin usarlo trate de describirlo, exprese su

opinión e indique el primer lugar donde haría clic. Posteriormente el usuario comenzará

a hacer uso del sitio para lo cual el encuestador designara algunas actividades y en todo

momento irá haciendo preguntas y tomando nota. La prueba dura 45min. aprox.

8 Se recomienda ofrecer incentivos razonables a las personas que hagan las pruebas. 9 No se recomienda hacer grabación del video, pues casi nunca se utilizan y hacen el proceso más largo, com-

plejo y caro. Sin embargo se puede optar por grabar la pantalla con algún software. 10 Es recomendable que los directivos presencien las pruebas.




5. Después de realizar las pruebas, se habla con los interesados sobre los problemas que

el usuario encontró, cuáles deberían solucionarse y cómo solucionarlos, o si la reco-

mendación que dio algún usuario debería tomarse o no.

Ilustración 5. El laboratorio para hacer pruebas de usabilidad (Krug, 2006, pág. 142)




CONCLUSIÓN

Steve Krug plante clara y concisamente las mejores recomendaciones para lograr un sitio web más

usable, sin embargo creo que es conveniente añadir que ya han pasado más de 8 años desde la pu-

blicación de la segunda edición de su libro, y ya son bastantes las cosas que han cambiado en la web

desde entonces. Entre estos cambios me gustaría destacar la multitud de tamaños de dispositivos y

el incremento en el uso de dispositivos táctiles.

Son dos factores de suma relevancia, ya que en el caso de los smartphones o tabletas la usa-

bilidad cambia drásticamente, ya que pasa de ser un uso basado en teclado principalmente a un uso

basado en gestos, donde además el espacio para mostrar contenidos suele ser más limitado. Esos

son los factores más relevantes, pero no los únicos, ya que el nacimiento de nuevas tecnologías

como AJAX también tiene repercusión directa sobre la usabilidad.

Adicionalmente considero que la usabilidad es dinámica, pues los usuarios están constan-

temente aprendiendo y desaprendiendo técnicas y costumbre, por ejemplo en mi caso antiguamente

realizaba la lectura completa o daba un vistazo rápido al contenido para encontrar lo que deseaba,

sin embargo con el tiempo consideré más eficaz usar la herramienta de búsqueda del navegador

para encontrar más rápido lo que deseaba, por ejemplo al entrar al sitio de una centro comercial,

antes de dar incluso un vistazo presiono Ctrl+F para buscar el vínculo de facturación, salvo que sea

un sitio conocido donde voy directamente al enlace pues ya sé dónde está.

Por ello considero que la usabilidad es dinámica reforzando lo que dice Krug sobre hacer

pruebas después de realizar cambios, creo que es adecuado hacer pruebas que también identifiquen

el cambio en el comportamiento de los usuarios.

No me hagas pensar, es un libro que me ha dejado bastante ya que anteriormente tomaba a

la ligera la usabilidad, me abrió la mente a más posibilidades y a considerar analizar mi propio

comportamiento al usar sitios web, además de aprender la forma básica de realizar pruebas de usa-

bilidad, en definitiva, es un libro que recomendaría ampliamente como punto de partida para aden-

trarse en el tema de usabilidad web.

Referencias Bibliográficas

Krug, S. (2006). No me hagas pensar. Una aproximación a la usabilidad en la web (Segunda ed.).

(D. Fayerman, Ed., & J. M. Díaz, Trad.) Madrid, España: Pearson Educación.

Informe de lectura: No me hagas pensar. Una aproximación a la usabilidad en la web (Segunda ed.)....

Technology

Transcript of Informe de lectura: No me hagas pensar. Una aproximación a la usabilidad en la web (Segunda ed.)....