No me hagas pensar: una guía de usabilidad para aplicaciones web y móviles

Andres Gonzalez - julio 19, 2018

El siguiente artículo es una compilación de algunos de los principios más importantes introducidos por Steve Krug en su libro best seller «No me hagas pensar«. Si está trabajando en la industria del software, creando sitios web o productos, debe leer este libro. No está destinado solo a diseñadores de UX, porque tiene conceptos básicos que todos deberían saber al crear aplicaciones.

En las siguientes palabras, voy a enumerar algunas de las ideas principales, que puede explorar más profundamente en el libro. Este artículo no pretende ser fácil de leer porque es solo una lista de ideas que agrupamos en Swapps para nuestra referencia interna y que estamos compartiendo con el mundo.

Principios de Usabilidad

Principio principal: no hagas pensar al usuario
El usuario debe poder mirar la página de inicio e inmediatamente saber para qué sirve.
Elimine todos los signos de interrogación del usuario, esto significa que el usuario nunca debe preguntarse sobre nada en el sitio, todo debe ser obvio.
Si no puede hacer algo evidente por sí mismo (obvio), explíquelo por sí mismo (eso se explica por sí mismo). Esto significa que, por ejemplo, los elementos enlazables en un sitio deberían ser evidentes, lo que significa estar resaltados con otro color, pero si es algo que no puede ser tan evidente como esto, puede agregar un texto que explique lo que debe hacer. con ese botón específico (también podría ser una etiqueta).

Cosas que hacen pensar al usuario y deben evitarse tanto como sea posible:

Usar nombres raros. Simplemente manténgalo simple con nombres que pongan las palabras más comunes para su usuario.
Botones y enlaces no resaltados.
El usuario nunca debe preguntarse si se puede hacer clic en algo (imágenes, enlaces, botones).

¿Qué es lo que hace la gente?

Lo que las personas realmente hacen cuando visitan su página web es simplemente escanear la página, ver parte del texto y hacer clic en el primer enlace que les llama la atención.

Las personas buscan palabras o frases que les llamen la atención.
Las personas escanean páginas porque normalmente tienen un objetivo (buscar algo, comprar algo, en particular, obtener información sobre algo específico, etc.) así que no prestarán atención a nada que no esté relacionado con eso.
«Lo que miramos, cuando miramos una página, depende de lo que tenemos en mente, y generalmente es solo una fracción de lo que hay».
Tendemos a centrarnos en frases que coincidan con la tarea en cuestión, nuestros intereses personales actuales o palabras como «gratis» o «venta».
La gente elige la primera opción razonable.
A la gente no le gusta leer las instrucciones, a la gente le gusta meterse. Las aplicaciones y los sitios web deben ser intuitivos, sin asistentes ni instrucciones.

¿Cómo mejorar la usabilidad?

1. Saque provecho de las convenciones

Esto significa utilizar los patrones de diseño ampliamente utilizados o estandarizados. Por ejemplo:

Logotipo de la empresa en la esquina superior izquierda y navegación principal en la parte superior o inferior del lado izquierdo.
Uso de los íconos más usados.

2. Cree jerarquías visuales efectivas

Esto significa que el sitio debe retratar las relaciones entre las cosas en la página: qué cosas son más importantes, qué cosas son similares y qué cosas son parte de otras cosas.

Cuanto más importante es algo, más prominente debería ser.
Destaca por ser más grande, más audaz, en un color distintivo, resaltado por más espacio en blanco, y/o más cerca de la parte superior de la página.
Las cosas relacionadas deben tener el mismo formato.
Las cosas que están agrupadas deberían permitir esto ahora visualmente. Como agrupar todo bajo el mismo título, en el mismo cuadro, etc.

«Una buena jerarquía visual nos ahorra trabajo al preprocesar la página para nosotros, organizar y priorizar su contenido de una manera que podamos captar casi al instante»

3. Divida las páginas en áreas claramente definidas

El usuario debe poder saber claramente las cosas que puede hacer en el sitio, los enlaces a las principales historias, los productos que vende la empresa, las cosas que la empresa quiere venderme y la navegación para llegar al resto del sitio.

Dividir la página en áreas claramente definidas permite a los usuarios decidir rápidamente en qué áreas de la página enfocarse.

4. Haga obvio lo que es cliqueable

debe tener en cuenta la forma, la ubicación y el formato.

Para esto, estará bien si solo se adhiere a un color para todos los enlaces de texto.

Evite errores como usar el mismo color para enlaces y encabezados sin clics.

5. Mantenga el ruido bajo a un rugido sordo

Esto significa no distraer al usuario con:

Muchos ítems reclamando atención, como muchas invitaciones para comprar, signos de exclamación o colores brillantes.
Desorganización: toda la información no está bien organizada, no está alineada.
Desorden: demasiada información en la página.

Aquí es importante comenzar con la suposición de que todo es ruido visual, de esta manera, se deshará de todo lo que no hace una contribución real.

Todo lo que no es parte de la solución debe desaparecer.

6. Dele formato al texto para permitir el escaneo

Use muchos encabezados y formateelos correctamente. Además, no deje mucho espacio entre el encabezado y su contenido.
Mantenga los párrafos cortos.
Use listas con viñetas.
Resaltar términos clave.

No haga las cosas complicadas

Haga que las elecciones no las tengasn que pensar los usuarios. Esto se puede lograr colocando el enlace o el botón para que se encuentre exactamente donde el usuario lo necesita, con la menor cantidad de información y formateado de manera que se garantice que el usuario lo notará.

Omita palabras innecesarias en el sitio web ya que esto:

Reduce el nivel de ruido de la página
Hacer contenido útil más destacado
Haga las páginas más cortas, permitiendo a los usuarios ver más de cada página de un vistazo sin tener que desplazarse.

Evite las «conversaciones felices», que son párrafos introductorios, que dan la bienvenida a las personas a su sitio y, en general, solo mensajes de texto que sean sociables.

Las instrucciones deben morir

Su sitio debe ser lo suficientemente intuitivo para evitar agregar instrucciones. Lo principal que debe saber sobre las instrucciones es que nadie las va a leer. El objetivo principal siempre debe ser eliminar las instrucciones por completo haciendo que todo se explique por sí mismo. Cuando las instrucciones sean absolutamente necesarias, recórtelas al mínimo.

Diseñando la Navegación

Algunos usuarios casi siempre buscarán un cuadro de búsqueda tan pronto como ingresen a un sitio. Otros casi siempre navegarán primero.

Los usuarios buscan en la página de inicio una lista de las secciones principales del sitio.

«La navegación clara y bien pensada es una de las mejores oportunidades que tiene un sitio para crear una buena impresión»

La navegación persistente debe incluir los cuatro elementos que más necesita tener a mano en todo momento: ID del sitio, utilidades (inicio de sesión, orden de seguimiento, contacto), búsqueda y secciones. Esto se aplica a todas las páginas, excepto los formularios o las páginas de pago en las que no desea que el usuario se distraiga hasta que finalice la acción.

Siempre tenga una barra de búsqueda en todas las páginas con el formato típico. cuadro, botón y la palabra «buscar» o el icono de lupa.

Cada página necesita un nombre y el nombre debe estar en el lugar correcto, esto significa, enmarcando el contenido que es único para esta página.

Es importante que el enlace que me guía a cierta página tenga el mismo nombre. El enlace y la página deben tener los mismos nombres.

Recomendaciones para breadcrumbs

Póngalos en la parte superior
Use «>» entre niveles
Ponga en negrilla el últime ítem

Consideraciones para la página de inicio

Lo que se debe tener en cuenta en la homepage:

Identidad del sitio: la página de inicio debe decirle al usuario de qué sitio se trata y para qué sirve y, si es posible, por qué debería estar en esta página y no en otro sitio.
Jerarquía del sitio: la página de inicio debe ofrecer una visión general de lo que el sitio puede ofrecer. ¿Qué puedo encontrar aquí y qué puedo hacer aquí y cómo está todo organizado? Esto está cubierto por la navegación persistente.
Búsqueda: la mayoría de los sitios deben tener un cuadro de búsqueda destacado en la página de inicio.
Incitadores: atraiga a los usuarios con pistas de las «cosas buenas» en su interior.
Promociones de contenido: Destaque las piezas más nuevas, mejores o más populares, como las mejores historias y las mejores ofertas.
Promociones de funciones: invite a los usuarios a explorar secciones adicionales.
Contenido oportuno: el contenido debe actualizarse con frecuencia.
Ofertas: publicidad, promoción y ofertas de marca compartida.
Atajos: el contenido solicitado con mayor frecuencia debe tener sus propios enlaces.
Registro: registro / caja de registro.

Objetivos de la Página de Inicio

Muéstrale al usuario lo que está buscando, haga que sea obvio cómo llegar a donde el usuario quiere.
Muestre al usuario algunas cosas maravillosas en las que podría estar interesado.
Mostrar al usuario dónde comenzar.
Establecer credibilidad y confianza: la página de inicio debe crear una buena impresión.

Tres lugares importantes en la página donde los usuarios esperan encontrar declaraciones explícitas de lo que trata el sitio

Lema: Declaración junto al ID del sitio.
Welcome Blurb: breve descripción del sitio que se muestra en un bloque destacado en la página de inicio, generalmente en la parte superior izquierda o central.
El «Más información»: explicación de los nuevos productos, recomendado usar videos cortos en lugar de texto.

Consideraciones para el diseño

No tiene sentido hablar de colores o diseños en el sitio, ya que todos tendrán su opinión personal.

Lo correcto es que el usuario pruebe el sitio y haga la pregunta correcta: ¿Esto es lo que estamos discutiendo, con estos elementos y esta redacción en este contexto en esta página, crea una buena experiencia para la mayoría de las personas que probablemente usen este sitio?

Pruebas de Usabilidad

Deben ser realizados si quiere un gran sitio.
Hacer pruebas así sea con una sola persona es mejor que no hacerlo.
Hacer pruebas con un solo usuario en etapa temprana del proyecto es mejor que probar con 50 cerca del final.

¿Con qué frecuencia hacer la prueba? una mañana en un mes (tres participantes son suficientes) o dos veces si trabaja con ágil.

Es importante programar un día de prueba y no vincular la prueba a un hito.

Las sesiones de prueba deberían ser en vivo y todo el equipo debería estar observando y escuchando sobre eso en otra sala. Después de la prueba, cada miembro del equipo debe escribir los tres principales problemas de usabilidad que percibieron.

Para preparar la prueba, primero debemos determinar las tareas, que es lo que le pediremos al participante que haga, por ejemplo (iniciar sesión, registrarse, encontrar algo que le gustaría comprar).

Existe una estructura para las pruebas de usabilidad sugeridas por el autor. https://www.sensible.com/downloads/test-script-web.pdf

Después de realizar las pruebas, es importante centrarse primero en los problemas más graves, ¿cómo hacer esto?

Haga una lista de todos los problemas detectados.
Elige los diez problemas más serios.
Califíquelos del 1 al diez, siendo 1 el más problemático.
Ordene la lista.

Instrucciones sobre qué y qué no arreglar

Mantenga una lista separada de las cosas que se pueden hacer en menos de una hora.
No agregue cosas. Si los usuarios no obtienen algo, no agregue instrucciones o explicaciones, intente sacar las cosas en lugar de agregar más.
No tome solicitudes de «nuevas funciones» demasiado serias de los usuarios, ya que no son diseñadores.

Algunos aprendizajes importantes

En responsive siempre incluya zoom y la posibilidad de ver el modo de página completa.
Para los botones es mejor usar la apariencia 3d. Y para rellenar campos para usar el marco.
Las aplicaciones deben ser deliciosas, lo que es más que bueno, para diferenciar su aplicación no solo debe ser usable, sino mágica.
Las aplicaciones deben ser fáciles de aprender a usarlas.
Nunca oculte información que la gente suele buscar, como números de teléfono de soporte, tarifas de envío y precios.
Nunca castigue a las personas por no hacer las cosas a su manera, como espacios en los números de tarjeta de crédito o paréntesis en los números de teléfono.
Nunca solicite información que no necesita.
Nunca coloque muchos anuncios de marketing en todo el sitio.

Importante tener claridad con:

Conozca las principales cosas que la gente quiere hacer en su sitio y hágalas obvias y fáciles.
Guarde los pasos para el usuario siempre que sea posible.
Agregue preguntas frecuentes significativas.
Páginas fáciles de imprimir en vez de anuncios.
Sea directo sobre cosas como los costos de envío, interrupciones del servicio.

Accessibilidad

Hacer los sitios accesibles es simplemente lo que se debe hacer.

4 pasos para abarcar la accesibilidad:

Arregle problemas de usabilidad que confunden a todos.
Lea un artículo sobre accesibilidad «Guideline for accessible and usable websites: Observing users who work with screen readers«
Lea un libro sobre accesibilidad. Recomendado «A web for everyone: Designing accessible user experiences» y «Web Accessibility: Web standards and regulatory compliance«
Implemente cambios específicos al sitio.

Las cosas más importantes a realizar:

Agregue texto alternativo apropiado a cada imagen. Se recomienda agregar «nulo» o «» para las imágenes que los lectores de pantalla deben ignorar y agregar texto descriptivo útil para el resto.
Use los encabezados correctamente. H1 para el título de la página o el título del contenido principal, h2 para los títulos de las secciones principales, h3 para los subtítulos, etc.
Haga formularios accesibles. Use el elemento HTML <label> para asociar el campo con sus etiquetas de texto para que las personas sepan lo que se supone que deben ingresar.
Coloque un enlace «Saltar al contenido principal» al comienzo de cada página.
Haga que todo el contenido sea accesible con el teclado.
Cree un contraste significativo entre el texto y el fondo (nunca use texto gris claro sobre fondo gris oscuro).
Use una plantilla accesible si está utilizando WordPress, por ejemplo.

Un sitio importante para la accesibilidad webaim.org

Con suerte, esta información sea útil para usted como referencia, como lo es para nosotros. Si considera que deberíamos explicar algo mejor, deje un comentario.

Gracias por leer.

accesibilidad No me hagas pensar