Índice de contenidos
1. Introducción
Una buena forma de iniciarse en usabilidad es a través del libro Don’t make me think o lo que es lo mismo, No me hagas pensar de Steve Krug. Un pequeño manual muy fácil de leer, lleno de obviedades en las que, tal vez, no te has parado a pensar. Este es un resumen de la última versión actualizada que incluye referencias a la usabilidad aplicada en móviles.
2. Resumen
1. Introducción
La usabilidad no va de tecnología, va de cómo la gente comprende y usa las cosas. Mientras la tecnología cambia a menudo con rapidez, la gente cambia muy despacio.
Si algo es usable significa que cualquier persona de habilidad y experiencia media o media-baja, puede imaginar cómo usar cualquier cosa (sitio web, App…) para realizar algo sin que sea más difícil de lo que se merece.
Principio de usabilidad: si algo requiere una gran inversión de tiempo, o lo parece, es menos probable que sea usado.
2. Tener en cuenta
¡No me hagas pensar!
- Nada importante a más de dos clics. Tres, cuatro o cinco serían aceptables. Sin embargo, Steve Krug indica que “no importa el número de veces que haya que hacer clic en algo, si la opción es mecánica e inequívoca”. Tres clics inconscientes podrían equivaler a uno que requiere reflexión. Cuando no podamos evitar una elección difícil, hay que orientar al usuario de forma breve, oportuna (fácil de encontrar cuando se necesite) e ineludible (no debe pasar desapercibida).
- Hablar el lenguaje de usuario.
- Ser coherente.
- Evitar interrogantes.
Cosas que hacen pensar:
- Terminología: palabras generadas por el departamento de marketing, tecnicismos y nombres específicos de la empresa. Ejemplo: Trabajo/Ofertas de trabajo/Rama de trabajo.
- Vínculos y botones mal definidos y/o indicados.
- Interrogantes.
3. Uso de la web por los usuarios
En términos generales, el usuario escanea la página buscando un link que se parezca a lo que tiene en mente. No lee toda la página (normalmente porque tiene prisa, sabe que no todo el contenido es relevante y porque está entrenado), no sigue un orden y gran parte del total de la página ni lo mira.
Hay excepciones en páginas de noticias, reportajes o descripciones pero el usuario aunque lee, también escanea.
Centran su atención en palabras y frases que encajan mejor con:
- La tarea que tenemos en mente.
- Nuestros intereses personales en ese momento.
- Palabras que causan una reacción repentina (Ejemplo: gratis, oferta, sexo, nuestro nombre).
Por norma general el usuario no ve las opciones que se le ofrecen y elige, si no que opta por la primera opción razonable ya que:
- Tiene prisa.
- El fallo no se paga caro: el botón “atrás” es el más utilizado en web.
- El éxito nunca está asegurado.
Utilizamos las cosas sin libro de instrucciones.
4. Claves para que los usuarios vean y entiendan la mayor parte de un site
Aprovechamiento y uso de convencionalismos: patrones de diseño más usados y estandarizados.
- Colocación de elementos en una página: logotipo, navegación primaria…
- Funcionamiento: iconos, formularios…
- Apariencia de los elementos: link, botones de redes sociales.
Creación de una jerarquía clara en cada página. Si somos conscientes de que estamos escaneando es porque probablemente haya una mala jerarquización.
- Los elementos más importantes deben ser los más destacados.
- Lo relacionado por lógica, también se relaciona visualmente.
- Los elementos se agrupan visualmente para mostrar que son parte de algo.
Dividir las páginas en zonas claramente definidas, así el usuario se centrará en las zonas donde cree que estará la información que busca.
Mostrar claramente dónde se puede hacer clic ya que es lo que más hace el usuario en Web. Busca claves visuales Cook formas (botones, enlaces), lugares (barra de menú) y formatos (color, subrayado, cambio del cursor).
Ejemplo: vínculos y encabezamientos donde no se puede hacer clic NO llevarán el mismo color.
Eliminar el ruido visual:
- Ruido: cuando todo parece importante o tiene mucha animación, color, etc.
- Desorganizado: usar rejillas.
- Desorden: evitar páginas cargadas de contenido.
Formatear el contenido para facilitar el escaneo:
- Usa muchos encabezados y bien escritos: deben definir el contenido al que preceden y estar más cerca de este que del contenido anterior. Si hay varios niveles, hacer bien visible cada uno.
- Párrafos cortos, incluso de una frase.
- Uso de bullets.
- Destacar palabras claves en negrita, sobretodo cuando aparecen por primera vez.
5. Cómo escribir en web
Omitir palabras innecesarias: “Elimine la mitad de las palabras de cada página; luego deshágase de la mitad restante” Krug.
- Suprimir lo que no va a leerse reduce el ruido, destaca el contenido principal y se acortan las páginas.
- Ofrecer información práctica evitando elogios en textos publicitarios y/o introductorios.
- Las primeras páginas de las secciones del sitio y las instrucciones suelen tener siempre exceso de texto.
6. Diseño de navegación
“Un usuario no utiliza tu site si no está cómodo al hacerlo” Krug.
Proceso general de navegación del usuario:
- Intenta encontrar algo.
- Pregunta o busca:
- Usuarios que dominan la búsqueda: van al buscador.
- Usuarios con dominio de los vínculos: navegan por los menús.
- Otros usuarios: estarán condicionados por el esquema de su mente, el momento, las prisas y de la facilidad de uso de la navegación del site.
- O encuentra o abandona.
- Carencias de la web en relación a usabilidad:
- Ignorancia del tamaño de la página: dificulta saber si se ha visto todo lo que interesa de un sitio, así como cuando parar de buscar. Que los links clicados cambien de color acota el tamaño.
- Ausencia de la sensación de ubicación: de ahí la importancia de una home (lugar fijo), el botón “atrás” o los marcadores de libros.
Funciones de una buena navegación:
- Ayudar a encontrar lo que busca el usuario.
- Informa al usuario de dónde se encuentra. Las “migas de pan” o ruta que ha seguido el usuario:
- Situadas en la postre superior.
- Utilizar > para separar los niveles.
- Ejemplo: negrita el último término
- Crea una jerarquía visible de los contenidos guiando correctamente al usuario.
- Enseña a usar el sitio.
- Da confianza al usuario sobre el dueño del site.
Tener el cuenta las convenciones (cambiantes) de la navegación web:
- Logotipo en la parte superior izquierda que lleva la home.
- Menú con indicador de estilo (puntero, cambio del color del texto, negrita, invirtiendo el color, cambio de color del botón) para señalar dónde estamos.
- Log in/out, registro en la parte superior derecha.
- Pie de página en la parte inferior.
- Cuadro de búsqueda obligatorio.
- Hamburguesas como icono de menú en móvil…
Crear una navegación coherente que englobe al site, así el usuario aprende una sola vez cómo usarlo y no se perderá.
Esta coherencia debe reducirse a la mínima expresión en páginas donde hay que rellenar un formulario ya que el usuario no necesita distracciones. Ejemplo: formulario de pago.
Tener muy en cuenta la arquitectura de contenidos antes de diseñar. Intentar hacer sites con no más de tres niveles de profundidad.
Poner nombre a las páginas:
- Ubica.
- Enmarca el contenido.
- Destaca (tamaño, color, fuente…) marcando jerarquía.
- Coherencia con el nombre de su link. En la medida de lo posible serán iguales. Ejemplo: botón “contacto” lleva a la página “contacto”.
Las pestañas son una herramienta de navegación excelentes porque:
- Son muy claras y fáciles de entender.
- Difíciles de perder.
- Están muy logradas.
7. Página principal
Elementos:
- Identidad y misión del sitio: si además justifica por qué será perfecto. OBLIGATORIO.
- Jerarquía del sitio: qué hay y qué puedo hacer. OBLIGATORIO.
- Búsqueda.
- Sugerencias.
- Promoción del contenido: lo mejor, lo último, lo popular.
- Presenta promociones: invitan a explorar nuevas secciones.
- Contenido actualizado.
- Transacciones: espacio para publicidad, promos cruzadas y potenciados de marca.
- Accesos directos.
- Registro y logística.
- Mostrar por dónde empezar.
- Credibilidad y confianza.
Restricciones:
- Espacio limitado en el que no cabe todo el que quiera poner publicidad.
- Todo el mundo opina porque es la página más importante.
- Llamar la atención de cualquiera (sea público objetivo o no).
Transmitir el mensaje:
Hay lugares importantes donde esperamos encontrar frases que explican cómo funciona el site:
- Línea de etiquetas (tagline): frase cardinal que caracteriza a toda la empresa. Aparece debajo, encima o al lado del logotipo. Son muy eficaces.
- Claras e informativas.
- Extensión justa (seis a ocho palabras).
- Expresan diferenciación y un beneficio claro.
- No son slogans.
- Gratas, enérgicas y a veces ingeniosas.
- Mensaje de bienvenida: descripción breve del site generalmente está en la parte superior derecha o en el centro de contenidos
- Video corto explicativo.
El usuario intentará por su cuenta ubicarse y si no lo consigue querrá un lugar al que acudir.
Pautas para dar a entender el mensaje:
- Utiliza tanto espacio como sea necesario pero no más: hay que ir al grano y explicar como mucho cuatro características.
- No uses una frase relativa a la misión de la empresa como mensaje de bienvenida.
Debe ser autoexplicativa: debe decirnos dónde empezar a buscar, a navegar y a probar el mejor material.
La página principal debe estar libre de una carga promocional excesiva.
8. Pruebas de usabilidad
El usuario medio no existe. Cada individuo, según sus circunstancias, empleo, gustos, etc., verá una misma página como ideal, de diferente manera. Sin embargo, en discusiones entre desarrolladores y diseñadores (habituales en el día a día), se tiende a argumentar que la mayoría de los usuarios se comportan como uno mismo.
Un test de usabilidad determina qué funciona y qué no, dejando de lado si al usuario le gusta o le disgusta y ayudando a la toma de decisiones entre ambos equipos.
Estas pruebas sirven para determinar cómo una persona usa algo en un tiempo determinado.
Por el contrario, con un grupo de discusión se obtiene con rapidez una muestra de las opiniones y los sentimientos de los usuarios sobre los productos. Pueden ser apropiados para determinar, de forma rápida, lo que la audiencia quiere, necesita y le gusta. Son más rentables en la fase de planificación de un proyecto.
Los tests de usabilidad deben hacerse desde el principio del proyecto.
- Si quieres un gran sitio, tienes que probarlo.
- Hacer una prueba con un usuario es mejor que nada.
- Probar con un usuario al principio es mejor que con 50 al final.
- Para ahorrar costes las puedes hacer tu mismo.
- Una mañana al mes para una prueba de entre 35 minutos y una hora, con tres usuarios diferentes, más una reunión para decidir qué corregir, está bien.
- Tres participantes (no todos especializados en el ámbito del producto) son suficientes para detectar problemas importantes que den trabajo para el siguiente mes.
- Haced la prueba en un lugar donde no nos interrumpan.
- Haz tests de las páginas de la competencia antes de empezar.
Prueba típica, intentando que el participante piense en voz alta:
- Bienvenida: 4 minutos. Explicación del funcionamiento de la prueba.
- Preguntas personales: 2 minutos.
- Tour: 3 minutos. Explicación por parte de los participantes de qué entienden en la página principal.
- Tareas: 35 minutos. Observar al participante tratando de realizar tareas a veces, largas. Dejar libertad al participante, no influenciarle, ni ayudarle.
- Explotación: 5 minutos. Ronda de preguntas.
- Conclusión: 5 minutos. Despedida.
9. Móvil
Un sitio para móviles es un subconjunto del sitio completo. Por tanto, ha partes que se dejan a un lado. Si se incluye todo hay que establecer prioridades.
Las cosas que quiero usar con prisa y/o con frecuencia deben estar muy a mano. Todo lo demás puede estar a unos clics pero en un camino fácil de seguir.
Para ver la misma cantidad de información que en la versión de escritorio, el usuario tendrá que hacer más clics y desplazarte más, pero esto es inevitable, solo hay que hacer que se sienta cómodo haciéndolo.
Debe ser responsive. Como esto aún da problemas hay que:
Permitir zoom.
Poner un link al Sitio completo.
En el móvil no hay cursor por tanto los elementos no cambian de estado al pasar sobre ellos.
Las páginas deben ser:
- Rápidas de cargar.
- Comprensibles. Deja las instrucciones a mano.
- Memorizables: debes recordar cómo se usan la segunda vez que accedes a ellas.
Test de usuario en móvil:
El proceso para hacer tests de usuario en móvil es igual al de escritorio. Lo que cambia es la logística.
Graba la pantalla y por tanto los gestos del usuario aunque repliques la imagen en un monitor.
Adjunta la cámara al dispositivo para que el usuario pueda mantenerla con naturalidad y pueda moverse libremente manteniendo la pantalla visible y enfocada.
10. Sites bien hechos
Hay que tener en cuenta que los que visitan nuestro site son personas que tienen un “depósito de buena voluntad” o una determinada paciencia, que no es igual en todas ellas ni en todas las situaciones.
Cosas que acaban con la paciencia del usuario porque siente que el autor no le tiene en cuenta:
- Ocultar la información deseada: como el teléfono de atención al cliente, precios o costes de envío por ejemplo.
- Castigar al usuario por no hacer las cosas a su manera: introducción de los números de la tarjeta de crédito sin espacios.
- Pedir información innecesaria.
- Mentir.
- Colocar obstáculos/publicidad en el camino.
- Mala apariencia y diseño.
Cosas que aumentan nuestra paciencia:
- Conoce qué quiere el usuario y dáselo fácil.
- Sé honesto y muestra la información que no quieres mostrar.
- Ahorra pasos siempre que puedas.
- Anticípate a las posibles preguntas y contéstalas: FAQS.
- Proporciona comodidades: botón para imprimir la página por ejemplo.
- Facilita la recuperación ante los errores.
- Si tienes limitaciones para hacer algo de forma óptima para el usuario, dilo.
11. Accesibilidad
Cosas a implementar desde el comienzo para hacer más accesible un site a todo tipo de personas:
- Añadir alt a las imágenes.
- Usa los encabezados h1,h2 y h3 correctamente.
- Haz que los formularios funcionen con lectores de pantalla.
- Crea un vínculo “saltar al contenido principal” al principio de cada página.
- Permite el uso del teclado.
- Crea gran contraste entre fondo y texto.
- Elude una plantilla accesible.
3. Bibliografía recomendada
- Orígenes del poder: cómo las personas toman decisiones. Gary Klein.
- Letting go of the words. Janice (Ginny) Redish.
- Formularios que funcionan: diseñar impuestos web para la usabilidad. Carolina Jarrett.
