Introducción

La web que se ha elegido para este ejercicio ha sido la de Incapto, Café de Especialidad. A simple vista, se trata de una web relativamente nueva, actual y visual.

Bajo los 10 principios de Nielsen, realizaremos un análisis heurístico que nos ayudará a encontrar problemas de usabilidad en el diseño de interfaces de usuario. A lo largo del análisis iremos viendo sus puntos fuertes y no tan fuertes, a la vez que ofreceremos ideas y soluciones pare mejorarla.

¡Vamos allá!

Metodología

Metodología basada en los 10 principios de Nielsen.

Proceso

1. Elección: elegimos una interfaz que sea actual pero que tiene margen de mejora.
2. Aclimatación: navegamos por la web para conocer todos los rincones, viendo así todo lo que tiene que aportar al usuario y dónde falla para poder aportar soluciones de mejora.
3. Evaluación:  Análisis heurísticos bajo los 10 principios de Nielsen, cada uno de los principios tendrá un ejemplo con su buen y un mal ejemplo de aplicación, con su respectiva justificación.
4. Sugerencias e ideas: Tras el análisis y la observación, aportaremos ideas de mejora en todos los campos que creamos oportunos.

10 Principios heurísticos de Nielsen

 

Visibilidad del estado del sistema

? Buen ejemplo

Mantiene a los usuarios informados sobre lo que está sucediendo. En el ejemplo de crea tu plan, describe y detalla de forma gráfica y sencilla cada uno de los pasos mediante una retroalimentación adecuada y detallada para que el usuario tenga toda la información que necesita y no se pierda en ningún paso del proceso.

 

Adecuación del estado del sistema y el mundo real

? Buen ejemplo

Respeta los valores de la marca y esto se ve reflejado tanto en la paleta de color, en las tipografías, el uso de imágenes y vídeos de alta calidad y en sus iconos. Utiliza palabras, frases y conceptos familiares para los amantes del café, además de utilizar slogans y preguntas directas.

? Mal ejemplo

Da muy mala impresión ver esta imagen de los granos de café cortada de esta forma, los granos tendrían que haber bordeado lo que es la figura redonda para conseguir la continuidad que todos esperamos en una web actual y de esta calidad.

 

Libertad y control por parte de la persona usuaria

? Buen ejemplo

El usuario puede eliminar un producto fácilmente sin necesidad de volver un paso atrás, esto lo puede hacer en el último paso, revisando su lista de compra.

? Mal ejemplo

Esta captura es la siguiente pantalla al ejemplo anterior que hemos puesto. En este caso, echo de menos tener la opción de eliminar ya que puede haber algún despistado que no haya revisado correctamente la lista, para no volver atrás o producir sentimientos malos en el usuario, una buena solución sería poner la opción en este último paso y tener de este modo este double check.

 

Consistencia y estándares

? Buen ejemplo

En el cuestionario ¿quieres saber cuál es tu café?, emplea el mismo vocabulario para determinar cada uno de los apartados y opciones que ofrece Incapto. De esta forma, el usuario podrá identificar, sin importar las veces y lo que seleccione en el cuestionario, fácilmente lo que está seleccionando.

? Mal ejemplo

Hemos detectado que usan tanto la palabra suscripción como la palabra plan, esto puede crear confusión dependiendo del usuario que está detrás. Si se trata de un usuario joven, este analiza de una forma más intuitiva cada uno de los mensajes; si por el contrario es un usuario mayor, es posible que le genere confusión y se pregunte si es lo mismo lo que están ofreciendo.

Prevención de errores

? Buen ejemplo

Si no seleccionas los términos y condiciones no puedes dar al botón de realizar el pedido, con lo cual, estás indicando que el usuario tiene que seleccionar esta casilla previamente o de lo contrario no podrá continuar con el proceso.

? Mal ejemplo

Si eliminas un producto de la cesta, no aparece una ventana secundaria de confirmación para verificar que realmente quieres eliminar este producto. Es posible que el usuario lo elimine por error y de esta forma, tiene que volver un paso atrás o navegar por el menú de productos/accesorios para volver a meter en la cesta el producto que ha eliminado por error.

Reconocimiento antes que recuerdo

? Buen ejemplo

Utilizar este tipo de iconos tan reconocidos y que el usuario ya tiene interiorizados, es de tal ayuda que no haría falta utilizar la palabra Acceder al lado ya que emplear este icono lo dice todo.

 

Flexibilidad y eficiencia en el uso

? Buen ejemplo

Es cierto que si vas a comprar en una web de café de especialidad, la gran mayoría de los usuarios serán personas expertas o que al menos saben algo sobre el mundo del café. Es por eso que la posibilidad de realizar configuraciones personalizadas en Incapto, permite satisfacer las necesidades de ambos tipos de usuarios, tanto para los principiantes como para los expertos.

Diseño estético y minimalista

? Buen ejemplo

Cada bloque de información está equilibrado y en armonía, se respeta la paleta de color y hay un buen uso de las tipografías corporativas. El conjunto del diseño es agradable, coherente y funcional.

 

Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse

? Buen ejemplo

Si no cumples con el mínimo establecido para el plan que has elegido, salta un aviso informando al usuario de que no ha seleccionado la cantidad mínima de café, en este caso. De esta forma, le estás indicando al usuario que lo que tiene que cambiar es la cantidad de café para poder continuar con su compra.

 

Ayuda y documentación

? Buen ejemplo

En este bloque están detallados los pasos a seguir y en qué consiste cada apartado que seleccionas. Esto es muy interesante ya que el usuario sabe en cada momento todo lo que incluye el pack y valorar lo que vale o no.

 

? Mal ejemplo

Las barras indicadoras fallan a veces tras varias pruebas, no se cambia automáticamente y es lo que espera el usuario, esta información tan relevante y visual de mostrar la información pierde interés al no funcionar siempre del todo correctamente.

 

Errores detectados y propuestas de mejora

 

La interfaz desde una perspectiva de género e inclusión

A día de hoy, es importante tener en cuenta la inclusión y la diversidad ya que son primordiales para crear una experiencia de usuario satisfactoria.

Incapto utiliza un lenguaje inclusivo, destaca la utilización de términos neutros como por ejemplo, no utilizar términos que indiquen un género. De este modo, podemos ver que hablan en términos general y por grupos.

Evitan estereotipos de género, eso se ve reflejado en la paleta de colores de la marca ya que es actual y unisex. El contraste de colores y la legibilidad de los textos está más que estudiada, han tenido presente las posibles discapacidades visuales. Respecto a las imágenes,  son inclusivas y evitan prejuicios a la vez que respetan la armonía y valores de la marca.

A nivel interno y por parte del diseñador, forma parte de su trabajo también hacer pruebas de usuarios, realizando pruebas a usuarios de diferentes géneros, edades, culturas y habilidades para asegurarse de que la experiencia de usuario es satisfactoria para todos. Además, el diseñador no puede dejar de lado la parte de investigación, es su tarea estar informado de la actualidad y aprender sobre los diferentes aspectos de la inclusión y diversidad, de este modo, el trabajo final será mucho mejor.

 

Bibliografía

Capítulos UOC:

4. La evaluación de la usabilidad sin personas usuarias

6. La evaluación de la usabilidad con personas usuarias

Evaluación Heurística (PARTE I)

Evaluación Heurística (PARTE II)

Qué es un análisis heurístico, cómo se realiza y cuáles son sus aplicaciones en UI&UX