Publicado por

Evaluación Heurística de Interfaz de Usuarios

Publicado por

Evaluación Heurística de Interfaz de Usuarios

Introducción   Tras la crisis sanitaria propiciada por la Covid-19, un gran número de administraciones públicas de todo el mundo han impulsado…
Introducción   Tras la crisis sanitaria propiciada por la Covid-19, un gran número de administraciones públicas de todo el…

Introducción

 

Tras la crisis sanitaria propiciada por la Covid-19, un gran número de administraciones públicas de todo el mundo han impulsado el uso de las tecnologías para intensificar el número de gestiones telemáticas que los ciudadanos pueden hacer. Este es el caso de la sede electrónica de la Agencia Tributaria española, donde podemos observar un aumento del 10.000% del tráfico orgánico en dicha web, llegando actualmente a los 10.8 Millones de visitas mensuales.

 

En este contexto cabe preguntarse, ¿están nuestras administraciones preparadas para servir a sus clientes (ciudadanos) servicios telemáticos realmente usables? A lo largo de esta entrada de Folio daremos respuesta a esta pregunta a través de una evaluación de la usabilidad sin usuarios de varios recorridos funcionales dentro de la sede electrónica de la Agencia Tributaria del Ministerio de Hacienda de España.

 

 

Metodología: Explicación acerca de cómo se ha llevado a cabo el análisis

La realización del análisis de la usabilidad sin usuarios la haremos a través de una Evaluación Heurística, concretamente haremos uso de los 10 heurísticos propuestos por Nielsen y Molich (Nielsen J. – 1994) que se describirán a continuación.

A pesar de que según como indican ciertos estudios (Nielsen 1994) el número óptimo de evaluadores al ejecutar una Evaluación Heurística sea entre 3 y 5, este estudio se ejecutará por una sola persona (yo) a lo largo de una sesión de aproximadamente 2 horas. Antes de comenzar la evaluación en sí, se harán 2 recorridos por la web para familiarizarme con los diferentes flujos de tareas.

Una vez comencemos con la evaluación de cada principio, se tomarán como referencia las preguntas contenidas en la checklist propuestas por Ross, L. (2006). Para cada hallazgo se confeccionará una ficha a través de la extensión de Chrome UX Check que contenga una descripción del problema, una propuesta de mejora un pantallazo ilustrativo de la aplicación y la severidad del error. La clasificación de la severidad se hará de acuerdo a la clasificación numérica del 0 al 4 planteada por Nielsen, J. ( 1994):

  • 0 = No es un problema de usabilidad.
  • 1 = Problema sin importancia. No necesita arreglarse a menos que haya tiempo de sobra.
  • 2 = Problema de poca importancia. Arreglarlo no tiene mucha prioridad.
  • 3 = Problema grave. Es importante arreglarlo.
  • 4 = Catástrofe. Es imprescindible arreglarlo

Los 10 Heurísticos de Nielsen

1.    Visibilidad del estado del sistema

Descripción:

El sistema debe mantener a las personas usuarias informadas sobre lo que ocurre (feedback en un tiempo razonable). Para evaluar este principio tendremos en cuenta:

  • ¿Se muestra algún mensaje de error en algún momento?
  • ¿Saben los usuarios que deberían hacer a continuación?
  • ¿Saben los usuarios cómo de lejos están en el proceso?
  • ¿Hay info. disponible acerca de tiempo restante para timeout de la sesión?
  • ¿La disposición general es fácil de escanear a simple vista?, ¿hay zonas con mucha info o por el contrario zonas con mucho texto que impiden un escaneo de la página rápido?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación:

Malas prácticas

Es difícil saber en qué parte de la web estamos situados porque no hay nada que identifique en qué posición del arbol de contenido estamos.

Recomendaciones:

Categorizar las gestiones que realizan los usuarios (p.ej. mediante un card sorting) y añadir migas de pan que identifiquen cómo hemos llegado aquí (p.ej. Inicio / Gestiones / Declaraciones tributarias / Presentación de declaraciones de renta)

2.    Adecuación entre el sistema y el mundo real

Descripción:

El sistema debe hablar el mismo lenguaje que la persona usuaria. Para ello utilizaremos la siguiente checklist:

  • Facilidad de uso: ¿Es fácil para los usuarios aprender a usar el sistema? ¿Hay muchos pasos involucrados en su uso? ¿Pueden los usuarios entender lo que necesitan hacer con un poco de capacitación?
  • Rendimiento: ¿funciona el sistema lo suficientemente rápido al responder a las solicitudes de los usuarios? ¿Es molesto para los usuarios cuando tienen que esperar demasiado para que se cumplan sus solicitudes?
  • Mensajes de error: ¿los mensajes de error son lo suficientemente claros para que los usuarios sepan qué salió mal y por qué?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Malas prácticas

A la declaración de la renta se accede a través de la sección de «Presentación de declaraciones, calendario del contribuyente / Todos los modelos / IRPF», cuando realmente el término comúnmente empleado en todo tipo de medios es el de «Declaración de la Renta», por lo que vemos un desalineamiento entre el lenguaje empleado y el comúnmente utilizado por las personas usuarias.

Recomendaciones:

Utilizar sustituir accesos tortuosos a las secciones a las que más se accede por accesos directos visibles desde la página principal, empleando los mismos términos empleados comúnmente en los medios

 

 

3.    Libertad y control por parte de la persona usuaria:

Descripción

Las personas usuarias tienen la sensación de control sobre lo que hacen. Para evaluarlo intentaremos detectar si concurren las siguientes fallas del sistema:

  • Falta de opciones: los usuarios no saben qué opciones están disponibles para ellos, por lo que no saben cómo usar el sitio de manera efectiva (p.ej. un buscador sin posibilidad de filtrar resultados puede resultar poco útil).
  • Inexistencia de feedback: sin feedback sobre sus acciones, los usuarios no pueden saber si han tenido éxito haciendo lo que pretendían o no (p.ej. envío de un formulario sin respuesta).

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación:

Malas prácticas

Estando en otra sección hemos clicado en «Identificación digital» y nos ha derivado a otra sección completamente diferente. No obstante, no es posible volver a la sección de donde originalmente veníamos.

Recomendaciones:

Incluir un árbol de páginas a la izquierda que nos permita movernos con mayor facilidad por todo el contenido.

 

4.    Consistencia y estándares

Descripción

Que se sigan las normas y convenciones del sistema/plataforma ayuda a que las personas usuarias no tengan que preguntarse si varios elementos significan la misma cosa o no. Evaluaremos concretamente:

  • Consistencia interna: todos lo elementos visuales son harmoniosos en color, fuentes, gráficos y contenido.
  • Consistencia externa: todas las páginas tienen un diseño y layout similar, dando la sensación de que pertenecen a un mismo todo.

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Buenas prácticas

Todas las páginas siguen un estilo similar

 

5.    Prevención de errores:

Descripción

Antes que diseñar buenos mensajes de error, es mejor evitar que el problema ocurra. Para ello evaluaremos:

  • ¿Hay algún error 404?
  • ¿Todos los hipervínculos funcionan correctamente?
  • ¿Hay alguna imagen que no se muestra correctamente?
  • ¿Tienen las personas usuarias toda la información necesaria para completar una tarea?
  • ¿Hay algún problema que prevenga a las personas usuarias de completar las tareas sin errores?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Buenas prácticas

A la hora de presentar la declaración de la renta, cualquier opción relacionada con modificar datos (especialmente si son relevantes), ofrece feedback inmediato del sistema pidiendo confirmación del usuario para llevar a cabo la acción

 

 

6.    Reconocimiento antes que recuerdo:

Descripción

Evaluar si se está minimizando la carga cognitiva de las personas usuarias haciendo elementos, acciones y opciones visibles.

  • ¿Hay elementos/rutas que sin que sean recordados las personas usuarias no podrían continuar?
  • ¿Se ofrece ayuda en contexto en lugar de un tutorial largo para ser recordado?
  • ¿Es necesario recordar mucha información en alguna interfaz (más de 5 elementos)?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación:

Malas prácticas

Una consulta esencial no es posible encontrarla de una manera eficiente a través del buscador del portal (notar que sí que es posible y muy eficiente hacerlo desde Google sin embargo)

Recomendaciones:

Clasificar las secciones, gestiones e información en base a palabras clave utilizadas por los usuarios

 

7.    Flexibilidad y eficiencia del uso

Descripción

Para evaluar si el diseño tiene en consideración la eficiencia en el uso del software tanto de personas usuarias expertas como de novatas haremos uso de la siguiente checklist:

  • ¿Es posible personalizar el contenido para personas usuarias individuales?
  • ¿Se proveen maneras de mejorar la eficiencia de uso (p.ej shortcuts?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Malas prácticas

No hay posibilidades de configurar el acceso a las secciones más relevantes para un usuario

Recomendaciones:

Sería positivo dar la oportunidad a las personas usuarias de grabar un filtro para las consultas de su mayor interés

 

8.    Diseño estético y minimalista

Descripción

Las interfaces no deberían contener información irrelevante o que raramente se necesita. Cada unidad extra de información en una interfaz compite con las unidades relevantes de información y reduce su visibilidad relativa.

Este principio heurístico lo evaluaremos con reflexiones como las siguientes:

  • Diseño simple, limpio y consistente.
  • Uso de gráficos y fotografías reducido al mínimo exponente si no fuesen necesarias.
  • Imágenes de alta calidad cuando sea necesario.
  • Tipografía fácil de leer y agradable a la vista.
  • Fondos de página simples y de colores claros para que su contenido se destaque más claramente
  • Todo el texto sea lo suficientemente grande para facilitar la lectura (al menos 14 puntos).
  • Para cada página web, asegúrese de tener un menú de navegación claro para encontrar páginas dentro de su sitio o vincular a otros sitios (es decir, un mapa del sitio)

 

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Buenas prácticas

En líneas generales el portal tiene un estilo de diseño minimalista y entendible (fondo blanco, letras con tamaño adecuado, se minimiza la cantidad en ciertas páginas,…)

 

9.    Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse:

Descripción

Para ello se evaluarán:

  • Usar mensajes visuales de error tradicionales (p.ej. rojo, negrita, etc)
  • Avisar a las personas usuarias de qué fue mal en un lenguaje sencillo, evitando tecnicismos.
  • Ofrecer a las personas usuarias una solución (p.ej. un atajo para resolver el error rápidamente)

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación:

Mala práctica

El sistema informa de la hora actual de conexión y de que el usuario está logado en el sistema, pero no avisa de cuánto tiempo queda para el logout.

Recomendaciones:

Añadir un contador o similar para avisar del logout automático del sistema.

 

10. Ayuda y documentación

Descripción

Sería ideal que el sistema no necesitase de explicaciones adicionales, pero como probablemente no sea el caso, es mejor ofrecer a las personas usuarias documentación para ayudar a los usuarios entender como completar sus tareas. Para evaluar esta heurística haremos uso de la siguiente checklist:

  • ¿El sitio incluye una página de ayuda o soporte?
  • ¿Es fácil de encontrar?
  • ¿Está claro lo que se puede hacer en esta página?
  • ¿Hay una dirección de correo electrónico para contactar para soporte?
  • ¿Hay un formulario de contacto en el sitio o en otro lugar que permita enviar comentarios o hacer preguntas?

Evaluación buenas/malas prácticas:

Ejemplo

Evaluación

Buenas prácticas

Impacto positivo del asistente virtual y de la opción de contacto en una zona altamente visible

 

Listado priorizado según gravedad.

Apoyándonos en la herramienta Ux Check se han evaluado los anteriores principios heurísticos en la sede electrónica de la Agencia Tributaria española. Como resultado de ello, encontraremos a continuación los hallazgos relacionados, ordenados de mayor impacto a menos.

Para consultar el informe original hacer click aquí para descargar el informe completo de UX Check.

 

1.    Difícil hacer un escaneo completo y eficiente de la web para crear un mapa mental de su estructura

Imagen

Heurístico: #8, Diseño estético y minimalista

Severidad: 4

Reflexión acerca de la severidad de la severidad:

Es difícil hacer un escaneo completo de la web de manera eficiente ya que es necesario hacer scroll completo en la página hasta 4 veces para ver todo el contenido de la página principal que además tiene mucha carga visual.

Recomendaciones:

Eliminar imágenes cuyo único propósito sea ornamental. Hacer una investigación de los trámites más consultados y mostrar en la landing page directamente sólo los 7 – 10 más relevantes.

 

2.    Difícil saber en qué punto de la web se está en relación a todo el contenido

Imagen

Severidad: 4

Heurístico: #1, Visibilidad del estatus del sistema

Reflexión acerca de la severidad:

Es difícil saber en qué parte de la web estamos situados porque no hay nada que identifique en qué posición del arbol de contenido estamos. Parece que a pesar de que hayas migas de pan, el último nivel (donde está la persona usuaria) no está visualmente conectado con el resto de páginas.

Recomendaciones:

Categorizar las gestiones que realizan los usuarios (p.ej. mediante un card sorting) y añadir migas de pan que identifiquen cómo hemos llegado aquí (p.ej. Inicio / Gestiones / Declaraciones tributarias / Presentación de declaraciones de renta)

 

3.    Imposibilidad de encontrar ciertas gestiones/secciones a través del portal

Imagen

Severidad: 4

Heurístico: #4, Reconocimiento antes que recuerdo

Reflexión acerca de la severidad:

Una consulta esencial no es posible encontrarla de una manera eficiente a través del buscador del portal (notar que sí que es posible y muy eficiente hacerlo desde Google sin embargo)

Recomendaciones:

Clasificar las secciones, gestiones e información en base a palabras clave utilizadas por los usuarios

 

4.    Cambio repentino de una sección a otra

Imagen

Severidad: 3

Heurístico: #1, Visibilidad del estatus del sistema

Reflexión acerca de la severidad:

Al clicar la opción de «Identificación digital» contenida dentro de la sección «Presentación de declaraciones, calendario del contribuyente», el sistema nos lleva a dicha opción pero de repente esta está contenida en una sección diferente a la que originalmente hemos clicado.

Recomendaciones:

Si se pretende seguir teniendo acceso la identificación digital dentro de esta sección, localizaría un icono fuera del árbol de esta sección (p.ej. en la esquina superior izquierda), de esta manera sería más fácil desvincular la sensación de relación padre-hija entre estas dos páginas

 

5.    El lenguaje empleado para ciertos trámites no es el mismo que el que comunmente emplean los medios y las personas usuarias.

Imagen

Severidad: 3

Heurístico: #2, Adecuación entre el sistema y el mundo real

Reflexión acerca de la severidad:

A la declaración de la renta se accede a través de la sección de «Presentación de declaraciones, calendario del contribuyente / Todos los modelos / IRPF», cuando realmente el término comúnmente empleado en todo tipo de medios es el de «Declaración de la Renta»

Recomendaciones:

Utilizar sustituir accesos tortuosos a las secciones a las que más se accede por accesos directos visibles desde la página principal, empleando los mismos términos empleados comúnmente en los medios

 

6.    Imposibilidad de deshacer la ruta a la que accidentalmente hemos llegado

Imagen

Ver hallazgo #4.

Severidad: 3

Heurístico: #3, Libertad y control por parte de la persona usuaria

Reflexión acerca de la severidad:

En este caso, y muy en conexión con la casuística #4, donde partíamos de una sección en dónde clicábamos en «Identificación digital» y nos derivaba a otra sección completamente diferente, en este caso señalamos la imposibilidad de volver a la sección de donde originalmente partíamos.

Recomendaciones:

Incluir un árbol de páginas a la izquierda que nos permita movernos con mayor facilidad por todo el contenido

 

7.    Landing Page sobrecargada de elementos

Imagen

Severidad: 2

Heurístico: #8, Diseño estético y minimalista

Reflexión acerca de la severidad:

A pesar de que las subsecciones tienen un diseño minimalista que es utilizado incluso en la Landing Page, en esta última puede observarse demasiada información infográfica que puede producir cierta sensación de fatiga visual.

Recomendaciones:

Categorizar las secciones aún más y mostrar para cada subsección sólo la información/gestiones más usadas y para el resto utilizar otras opciones para mostrarlas en una segunda instancia (p.ej. incluyendo en cada sección un icono «+» que despliegue más opciones de las mostradas originalmente)

 

8.    Múltiples opciones con nombres similares para acceder a secciones de ayuda

Imagen

Severidad: 2

Heurístico: #10, Ayuda y documentacion

Reflexión acerca de la severidad:

La ayuda se muestra en varias secciones de la interfaz. No obstante, al presentar varias secciones de ayuda/guía muy similares quizás pueda ser un poco confuso (p.ej información general VS ayuda técnica vs Normativa vs Documentos y ficheros)

Recomendaciones:

Localizar siempre en el mismo sitio (p.ej. esquina superior derecha) un único punto de entrada a la sección de ayuda

 

9.    Iconos difícilmente asimilables a la realidad que representan

Imagen

Severidad: 1

Heurística: #2, Adecuación entre el sistema y el mundo real

Reflexión acerca de la severidad:

Ciertos iconos son difícilmente reconocibles (p.ej. un cuaderno con una R, representa el IRPF). No obstante, este hecho se ve compensado por un título anexo explicativo de la opción en cuestión.

Recomendaciones:

Sustituir siglas no convencionales por las que sí se utilizan ampliamente (R  IRPF o I  IVA)

 

10. No se muestra información del tiempo restante de sesión antes del logout

Imagen

Severidad: 1

Heurístico: #5, Prevención de errores

Reflexión acerca de la severidad:

El sistema informa de la hora actual de conexión y de que el usuario está logado en el sistema, pero no avisa de cuánto tiempo queda para el logout.

Recomendaciones:

Añadir un contador o similar para avisar del logout automático del sistema

Consideraciones de la interfaz desde una perspectiva de género e inclusión.

La naturaleza de la Sede Electrónica de la Agencia Tributaria, así como el de cualquier otra Administración Pública, es la de servir a las personas ciudadanas. Por ello sería esperable que dicha Sede hubiese sido diseñada aspirando a cubrir la amplia diversidad etnográfica, cultural, funcional y de género que compone nuestra sociedad, prestando especial atención en no excluir a ningún sector de la población.

A pesar de que el contenido de la web a priori tiene un carácter un carácter neutro (no hay secciones específicas por genero como por ejemplo en retail), es posible encontrar puntuales puntos de mejora en cuanto al uso de un lenguaje más inclusivo. Listamos a continuación algunos de ellos:

  • Sección  «Calendario del contribuyente»: ¿Podría llegar a reformularse como «Calendario de las personas contribuyentes» para evitar sesgos binarios de género?

  • Sección «Empresarios individuales y profesionales»: En línea al ejemplo anterior, ¿no seguiría teniendo sentido si se reformulase como «Personas empresarias individuales y profesionales»?

  • Sección Colaborar con la Agencia Tributaria: En esta sección, ¿tendría sentido sustituir «representantes aduaneros» por «representantes ante aduanas» o incluso por «representación de terceras personas ante aduanas»?

  • Área personal de la declaración de la renta: En esta sección encontramos que entre nuestros datos está la clasificación Varón/Mujer, aunque realmente cabe pensar si realmente esta información es relevante para los efectos de esta sede y el tipo de gestiones que en ella se realizan. No obstante, quizás también cabría pensar que pudiera ser relevante para realizar cierta discriminación poblacional positiva (p.ej. programa de ayudas a minorías).

 

 

 

Conclusiones

Debido al importante tráfico que genera (10.8 M visitas/mes) y la importancia que tiene para los ciudadanos de España, en este ejercicio se ha evaluado la usabilidad de la sede electrónica del Ministerio de España a través de una Evaluación Heurística sin usuarios.

El número de gestiones posibles dentro de esta web es muy numerosa, por lo que hemos centrado el estudio en aspectos generales del portal de entrada (o Landing Page) y algunos posibles flujos funcionados relacionados con la declaración de la renta.

En total, de manera no exhaustiva se han realizado 16 hallazgos, de los cuales 11 están relacionados con malas prácticas. Es notable como algunos de los principios heurísticos se han tenido en cuenta para el diseño de algunas secciones (es decir, siguen las buenas prácticas) y no se han tenido en cuenta en otras.

Como conclusión, cabe señalar que a pesar de los esfuerzos realizados por el Ministerio de Hacienda para unificar todas las gestiones de la Agencia Tributaria en un sólo portal más usable, aún queda espacio para la mejora del mismo en cuanto a usabilidad para las personas usuarias.

Bibliografía

  • Nielsen, J (1994). “How to Conduct a Heuristic Evaluation” [artículo en línea]. <https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/>. NN/g Nielsen Norman Group. [Fecha de consulta: 16 de noviembre de 2022].
  • Modroño, T. (2017). “Evaluación Heurística (PARTE I)” [artículo en línea]. <https://interactius.com/evaluacion-heuristica-parte-i/>. INTERACTIUS. [Fecha de consulta: 17 de noviembre de 2022].
  • Modroño, T. (2018). “Evaluación Heurística (PARTE II)” [artículo en línea]. < https://interactius.com/evaluacion-heuristica-parte-ii/>. INTERACTIUS. [Fecha de consulta: 17 de noviembre de 2022].
  • “Diseño inclusivo desde la una perspectiva de género” (2020). [artículo en línea]. <https://www.gammaux.com/blog/diseno-inclusivo-desde-perspectiva-de-genero/>. Gamma UX. [Fecha consulta: 17 de noviembre de 2022]
  • Torres B., D. (2021). “El rol del Diseño UX en la inclusion de género” [artículo en línea].< https://www.torresburriel.com/weblog/2021/10/28/el-rol-del-diseno-ux-en-la-inclusion-de-genero/>. Torres Burriel Estudio. [Fecha consulta: 17 de noviembre de 2022]
  • Carreras, O. (2012). «Estándares formales de usabilidad y su aplicación práctica en una evaluación heurística» [en línea]. Usable y accesible. <https://olgacarreras.blogspot.com.es/2012/03/estandares-formales-de-usabilidad-y-su.html>. [Fecha consulta: 17 de noviembre de 2022]
  • «Principios de diseño de interacción de Bruce Tognazzini» [artículo en línea]. <http://galinus.com/es/articulos/principios-diseno-de-interaccion.html>. [Fecha consulta: 17 de noviembre de 2022].
  • Zapata, M. «Métodos de evaluación sin usuarios» [en línea]. <http://openaccess.uoc.edu/webapps/o2/bitstream/10609/12922/8/usabilidad_módulo2_métodos%20de%20evaluación%20sin%20usuarios.pdf>. [Fecha consulta: 17 de noviembre de 2022].
  • Travis, D. (2014). «247 web usability guidelines». http://www.userfocus.co.uk/resources/guidelines.html [artículo en línea]. USERFOCUS.  [Fecha de consulta: 17 de noviembre de 2022].
  • Canva <www.canva.com>. [Fecha de consulta: 15 de noviembre de 2022].
  • Semrush <semrush.com>. [Fecha de consulta: 15 de noviembre de 2022]
  • Sede Agencia Tributaria <https://sede.agenciatributaria.gob.es/Sede/Renta.html>. [Fecha de consulta: 15 de noviembre de 2022]
  • Ross, L (2006). «Heuristic Evaluation Checklist to Use On Your Website». <https://www.invespcro.com/blog/heuristic-evaluation-checklist-to-use-on-your-website/> [artículo en línea]. Invesp. [Fecha de consulta: 17 de noviembre de 2022].
  • Nielsen, J. (1994). «Severity Ratings for Usability Problems». <https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/> [artículo en línea]. NN/g Nielsen Norman Group. [Fecha de consulta: 17 de noviembre de 2022].
  • UOC – Design Toolkit / Guía: Evaluación Heurística. <http://design-toolkit.recursos.uoc.edu/es/guia/evaluacion-heuristica/>. [Fecha de consulta: 15 de noviembre de 2022]
  • UOC – Design Toolkit / Evaluación Heurística. <http://design-toolkit.recursos.uoc.edu/es/evaluacion-heuristica >. [Fecha de consulta: 15 de noviembre de 2022]

Debate0en Evaluación Heurística de Interfaz de Usuarios

No hay comentarios.

Publicado por

Identificación de las leyes de percepción asociadas a la usablidad con ejemplos

Publicado por

Identificación de las leyes de percepción asociadas a la usablidad con ejemplos

0. Introducción Partiendo de las leyes de percepción más relevantes analizaremos mediante ejemplos el grado de cumplimiento (incumplimiento) de las mismas: Ley…
0. Introducción Partiendo de las leyes de percepción más relevantes analizaremos mediante ejemplos el grado de cumplimiento (incumplimiento) de…

0. Introducción

Partiendo de las leyes de percepción más relevantes analizaremos mediante ejemplos el grado de cumplimiento (incumplimiento) de las mismas:

  1. Ley de Fitts
  2. Ley de Hick
  3. Similitud
  4. Metáfora
  5. Disonancia cognitiva
  6. Modelo mental

 

1.  Ley de Fitts

1.1. Descripción de Ley de Fitts

El tiempo necesario para desplazarse hasta un elemento depende del tamaño del elemento y de la distancia hasta este.

1.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

En la página de Amazon cuando se ha de introducir el País asociado a una dirección, encontramos menus «dropdown» con un gran número de elementos que, por lo general, suele requerir de un tiempo considerable del usuario para encontrar el país deseado.

1.3. Ley de Fitts: ¿cumplimiento o incumplimiento?

En este caso la Ley de Fitts se prueba cierta porque no se ha tenido en cuenta en el diseño.

 

2.  Ley de Hick

2.1. Descripción de Ley de Hick

El tiempo que tardamos en tomar una decisión aumenta en relación directa con el número de alternativas disponibles: a más alternativas, mayor tiempo

2.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

La página en contexto es la landing page de la web oficial del IAAP (Instituto Andaluz de la Administración Pública). En concreto pueden verse un gran número de elementos que dificultan al usuario alcanzar su objetivo, lo cual se ve empeorado por la falta de un menú navegador.

2.3. Ley de Hick: ¿cumplimiento o incumplimiento?

Incumplimiento

 

3.  Similitud

3.1. Descripción de Ley de Similitud

Los elementos que son similares son percibidos como relacionados, frente a los elementos que son diferentes.

3.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

El calendario de  Google, muestra todos los días del mismo mes con el mismo formato, excepto el día actual (según la foto 20 de Octubre). Además, los días de los meses diferentes aparecen con un formato diferente a los días del mes en curso.

3.3. Ley de Similitud: ¿cumplimiento o incumplimiento?

Cumplimiento

 

4.  Metáfora

4.1. Descripción de la Metáfora

Uso de una analogía para hacer referencia a un concepto.

4.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

El uso de metáforas está especialmente extendido en la iconografía. En este caso podemos ver en la página de eBay los iconos de una campana y del carrito de la compra, simbolizando las alertas al usuario y el listado de elementos que el usuario se dispone a comprar respectivamente.

4.3. Metáfora: ¿cumplimiento o incumplimiento?

Cumplimiento

 

5.  Disonancia cognitiva

5.1. Descripción de la Disonancia Cognitiva

Cuando no hay una coherencia entre los pensamientos, las creencias o las actitudes se trata de una disonancia, que resulta en una experiencia desagradable o molesta.

5.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

En este ejemplo podemos ver el empaquetado de los yogures Danacol, unos yogures que aclaman reducir el colesterol. Para hacer más potente el mensaje, el envase incluye una imagen que representa una fuerza que arrasa por un conducto, quitando toda suciedad. Esto el usuario lo relaciona con la reducción de colesterol, produciendo una sensación de alivio.

5.3. Disonancia Cognitiva: ¿cumplimiento o incumplimiento?

Cumplimiento.

 

6.  Modelo Mental

6.1. Descripción del Modelo Mental

Modelos conceptuales que tenemos las personas sobre cómo funciona el mundo que nos rodea.

6.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

En este ejemplo podemos ver el logotipo de una consultoría de servicios psicológicos. En este caso, a pesar de no estar perfectamente delimitado, es fácil reconocer que el icono que acompaña a este logotipo representa un cerebro.

6.3. Modelo Mental: ¿cumplimiento o incumplimiento?

Cumplimiento

 

Bibliografía

  • https://www.nosolousabilidad.com/manual/1htm
  • https://www.nngroup.com/articles/usability-101-introduction-to-usability/
  • http://quadern-usabilitat.recursos.uoc.edu/es/
  • https://medium.com/adalab/the-importance-of-usability-10e9871a16d8
  • https://www.nngroup.com/videos/principles-human-centered-design-don-norman/
  • https://blog.prototypr.io/how-spotifys-website-ux-has-changed-2006-to-2016-ff981fe3b0a3
  • https://www.torresburriel.com/weblog/2018/01/25/error-humano-mal-diseno/
  • https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design
  • https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users
  • https://www.interaction-design.org/literature/topics/hick-s-law
  • https://thenextweb.com/news/how-to-create-visual-relationships-with-contrast-similarity
  • https://blog.tubikstudio.com/gestalt-theory-for-efficient-ux-principle-of-similarity/
  • https://www.smashingmagazine.com/2011/10/design-with-dissonance/

Debate0en Identificación de las leyes de percepción asociadas a la usablidad con ejemplos

No hay comentarios.

Publicado por

Identificación de los principios de la usabilidad con ejemplos

Publicado por

Identificación de los principios de la usabilidad con ejemplos

0. Introducción En esta entrada vamos a analizar los diferentes principios de la usabilidad de las interfaces, desde un punto de vista…
0. Introducción En esta entrada vamos a analizar los diferentes principios de la usabilidad de las interfaces, desde un…

0. Introducción

En esta entrada vamos a analizar los diferentes principios de la usabilidad de las interfaces, desde un punto de vista práctico, exponiendo para cada principio un ejemplo de cómo se ha tenido (o no se ha tenido) este en cuenta. Para ello se expondrán interacciones con productos físicos y digitales, así como con servicios u otras situaciones que cualquier persona puede experimentar en su vida diaria.

Los principios de usabilidad que tendremos en cuenta son:

  1. Coherencia
  2. Confirmación
  3. Control
  4. Errores
  5. Punto de Entrada
  6. Reconocer antes que recordar
  7. Restricciones
  8. Accesibilidad
  9. Visibilidad
  10. Affordance
  11. Retroacción

1. Coherencia

  • Descripción del principio: Los sistemas son más usables cuando las funciones similares se representan de manera similar.
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Alargadera eléctrica
  • Contexto del ejemplo y la interacción: Los enchufes de una alargadera eléctrica mantienen la coherencia con los enchufe de pared, puesto que estos sirven el mismo propósito.
  • Clasificación, ¿buena o mala práctica?: Buena práctica

 

2. Confirmación

  • Descripción del principio: Para ciertas tareas críticas, consiste en verificar que el usuario realmente quiere ejecutar la acción y que no es una interacción accidental.
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Google Chrome
  • Contexto del ejemplo y la interacción: Cuando estás trabajando en un archivo editable en línea desde Chrome y el sistema detecta que vas a salir de la pantalla sin guardar los cambios, el sistema te alerta de ello y pide confirmación de si quieres realmente salir del sitio sin guardar o cancelar la acción.
  • Clasificación, ¿buena o mala práctica?: Buena práctica (aunque no siempre funciona correctamente)

 

3. Control

  • Descripción del principio: El nivel de control de un usuario sobre el sistema es proporcional al nivel de experiencia del usuario.
  • Imagen del ejemplo:

  • Dispositivo e interfaz: SAP / Documentación
  • Contexto del ejemplo y la interacción: SAP es generalmente utilizado por gente experta en este sistema, pero para los principiantes en esta herramienta, sus primeros usos son por lo general notablemente árduos.
  • Clasificación – ¿buena o mala práctica?: Mala práctica, porque a pesar de que SAP es un sistema muy extendido y cuyas bondades son innumerables, he visto profesionales que tras años de experiencia en esta herramienta siguen sin ser capaces de utilizar el potencial de esta herramienta por la dificultad que presenta la misma, que, en el caso de multinacionales, se ve acrecentada por desarrollos ad-hoc hechos específicamente para cada empresa.

 

4. Errores

  • Descripción del principio: Los humanos cometemos errores con frecuencia, bien de ejecución (se hace algo que no se pretendía hacer) o bien de intención (cuando el razonamiento para realizar una acción no es adecuado.
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Mensaje de confirmación en JIRA cuando se pretende rechazar un ticket.
  • Contexto del ejemplo y la interacción: En este caso, el usuario está intentando rechazar un ticket y las opciones que tiene para cerrar el circuito son: cancelar o rechazar. Por ello, si en sí un usuario puede cometer errores, con este tipo de mensajes es aún más fácil que los cometa.
  • Clasificación, ¿buena o mala práctica?: Mala práctica

 

5. Punto de Entrada

  • Descripción del principio: el punto de entrada de un sistema interactivo nos proporciona una primera impresión del mismo que posteriormente influirá notablemente en cómo percibimos el sistema o producto.
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Landing page de la app móvil de N26 (un banco 100% online).
  • Contexto del ejemplo y la interacción: Tras hacer login en la app móvil de N26, accedemos a la landing page. A simple vista puede observarse una interfaz intuitiva y fácil de usar, a pesar de que es un banco 100% online que ofrece todas las posibles operaciones que puedes hacer con cualquier otro banco. Esto automáticamente se gana la confianza de aquellos usuarios más recelosos del concepto de banca 100%.
  • Clasificación, ¿buena o mala práctica?: Buena práctica

 

6. Reconocer antes que recordar

  • Descripción del principio: Reconocer las cosas es mucho más fácil que recordarlas
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Esta es la línea de comandos de Windows para ejecutar una bbdd (concretamente PostgreSQL)
  • Contexto del ejemplo y la interacción: Para establecer una conexión a una instancia de una bbdd de PostgreSQL (o cualquier otra) desde la línea de comandos,  es necesario recordar una serie de comandos (en este caso «C: UsersGerard>psql -d postgres -U postgres»), que sin conocerlos de antemano es muy difícil que el usuario en cuestión sea capaz de intuir qué tiene que hacer para conseguir su objetivo.
  • Clasificación: ¿buena o mala práctica?: A pesar de que la línea de comandos es clave para ciertos perfiles profesionales (p.ej desarrolladores de software o administradores de sistemas informáticos), no tiene en cuenta este principio de la usabilidad.

 

7. Restricciones

  • Descripción del principio: La dificultad de experimentar con una situación nueva está directamente relacionada con el número de posibilidades que se presentan.
  • Imagen del ejemplo:

Cubiertos: ¿Cómo deben colocarse en la mesa? - NIUS

  • Dispositivo e interfaz: Cubertería de protocolo en un banquete.
  • Contexto del ejemplo y la interacción: El protocolo de colocación de cubiertos se basa en la accesibilidad y el orden de uso. Esto podría intuirse si, por ejemplo, tenemos 2 tenedores y 2 cucharas diferentes. No obstante, conforme el número de cubiertos crece, es más difícil intuir el prpósito que sirve cada elemento de la cubertería.
  • Clasificación, ¿buena o mala práctica?: Mala práctica

 

8. Accesibilidad

  • Descripción del principio: Concepto para describir si el diseño de un producto, dispositivo o servicio puede ser utilizado por personas de todas las capacidades y discapacidades.
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Cierre, minimización y maximización de documentos en Mac.
  • Contexto del ejemplo y la interacción: Los 3 botones que caracterizan el cierre, minimización y apertura en Mac vienen determinados por los colores rojo, amarillo y verde respectivamente, pero no hay ningún elemento/icono adicional que los distinga. Los casos más comunes de daltonismo se asocian a fallos en la detección del color rojo y verde, por lo que cabe la duda de que una persona que padezca de estas deficiencias encontraría esta interacción usable o no.
  • Clasificación, ¿buena o mala práctica?: Mala práctica.

 

9. Visibilidad

  • Descripción del principio: Hacer más visibles las partes relevantes del diseño
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Botonadura de una barra de sonido – lateralmente se observa el regulador de volumen y en la parte trasera unos botones de canción anterior, pausa y canción siguiente.
  • Contexto del ejemplo y la interacción: En las barras de sonido actuales, la funcionalidad principal es la regulación del sonido, ya que el resto de controles de canción suelen gestionarse directamente desde el dispositivo al que se conecte la barra de sonido (p.ej. desde spotify en el teléfono móvil). En algunas barras de sonido pueden encontrarse otra botonadura complementaria de pausa y cambio de canción, pero sin duda, ejerciendo un papel secundario. En este caso puede observarse como la botonadura más prominente es la de regulación del volumen, mientras que la botonadura de cambio de pista pasa muy desapercibida en la parte trasera del aparato.
  • Clasificación, ¿buena o mala práctica?: Buena práctica

 

10. Affordance

  • Descripción del principio: Capacidad de un objeto de sugerir su propia utilización
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Empuñadura de un agarre de musculación.
  • Contexto del ejemplo y la interacción: Una empuñadura, con la forma ergonómica de una mano y con protectores, sugiere para qué parte del cuerpo es y cómo has de colocar tu mano en ella para conseguir tu objetivo como usuario (ejercitar la musculación de agarre).
  • Clasificación, ¿buena o mala práctica?:Buena práctica

 

11. Retroacción

  • Descripción del principio: Visibilidad del efecto de nuestras acciones
  • Imagen del ejemplo:

  • Dispositivo e interfaz: Migas de pan en la Web de Decathlon
  • Contexto del ejemplo y la interacción: En la Web de Decathlon es posible acceder a cientos de productos a través de una serie de filtros (deporte, sexo, tipo de producto,..). Para facilitar al usuario el seguimiento de sus propias acciones y saber dónde se encuentra este respecto al mapa de la web, han incluido unas migas de pan en la parte superior izquierda en color gris.
  • Clasificación, ¿buena o mala práctica?: Buena práctica, aunque quizás el color gris no es fácilmente visible a primera vista.

Bibliografía:

  • https://www.sap.com/spain/index.html
  • https://www.atlassian.com/es/software/jira
  • https://www.google.com/intl/es/chrome
  • https://www.decathlon.es/es/
  • https://www.bartalentlab.com/academy/tecnicas-sala-barra/manual-sobre-cuberteria
  • https://n26.com/es-es
  • https://www.nosolousabilidad.com/manual/1.htm
  • https://www.interaction-design.org/literature/article/an-introduction-to-usability?utm_source=newsletter&utm_medium=email&utm_content=letter2019-09-24&utm_campaign=individual-members
  • https://www.nngroup.com/articles/usability-101-introduction-to-usability/
  • http://quadern-usabilitat.recursos.uoc.edu/es/
  • https://medium.com/adalab/the-importance-of-usability-10e9871a16d8
  • https://www.nngroup.com/videos/principles-human-centered-design-don-norman/
  • https://blog.prototypr.io/how-spotifys-website-ux-has-changed-2006-to-2016-ff981fe3b0a3
  • https://www.torresburriel.com/weblog/2018/01/25/error-humano-mal-diseno/

Debate0en Identificación de los principios de la usabilidad con ejemplos

No hay comentarios.