Publicado por

PEC 2, Reto 2: Evaluación heurística

Publicado por

PEC 2, Reto 2: Evaluación heurística

Las compras online están en auge y más aún en este mes de noviembre debido al Black Friday, la campaña comercial en…
Las compras online están en auge y más aún en este mes de noviembre debido al Black Friday, la…

Las compras online están en auge y más aún en este mes de noviembre debido al Black Friday, la campaña comercial en la cual se encuentran grandes descuentos, original y principalmente sobre productos tecnológicos aunque ya está extendido a otra gran cantidad de áreas.

Por este motivo se ha elegido la plataforma de venta online de productos eléctricos y electrónicos www.pccomponentes.com para realizar en esta primera parte una evaluación heurística.

Metodología

La evaluación de la plataforma ha consistido en dos fases: una primera exploratoria, en la cual se ha navegado de forma libre para familiarizarse con la web y ver sus funcionalidades básicas.

A continuación se ha realizado una navegación más exhaustiva, buscando funcionalidades menos visibles y servicios secundarios, incluyendo una creación de cuenta en la plataforma para poder explorar el flujo de uso de compra.

Finalmente se han listado los 10 principios heurísticos de Nielsen y buscado ejemplos, tanto buenos como malos, para ilustrar cada uno de ellos.

 

? Evaluación Heurística  ?

1. Visibilidad del estado del sistema

El sistema debe mantener a los usuarios informados sobre lo que está ocurriendo y en dónde se encuentran.

Utiliza migas de pan (breadcrumbs) para informar al usuario de en qué parte de la página se encuentra.

También muestra los pasos del proceso de compra y en que el usuario se encuentra.

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

El lenguaje del sistema debe adecuarse a su público y hablar con términos que las personas usuarias puedan entender.

Explica las características de los productos con un lenguaje comprensible por usuarios no expertos en tecnología.

Otro ejemplo es la explicación del proceso de compra:

3. Libertad y control por parte de la persona usuaria

El usuario puede deshacer pasos o salir del estado en el que se encuentra, teniendo el control de la navegación.

En la cesta se muestran diferentes caminos a la persona compradora, de modo que además de continuar con la compra puede añadir más unidades del artículo, guardarlo en una lista de deseos, eliminar uno o todos los artículos de golpe o pausar el proceso de compra y seguir explorando la web.

4. Consistencia y estándares

La plataforma debe seguir unas normas tanto de coherencia entre los mismos elementos repetidos como en arbitrariedad de los iconos y elementos usados con respecto a otras webs, de manera que el usuario las identifique fácilmente.

En la web se pueden encontrar diversidad de botones con distintos colores y formas.

 

Además, en el módulo de compra de un producto, se pueden encontrar un par de botones con un color gris claro (al menos en mi pantalla, y supongo que en otras con calibración similar) que por arbitrariedad, se interpretan como opciones desactivadas (y están activos).

5. Prevención de errores

Evitar el error de uso antes de que éste ocurra.

Se encontró una mala práctica en la sección de recompra de dispositivos, donde era necesario seleccionar una categoría de producto antes de iniciar el proceso. Bien por peso visual o disposición de los elementos, el desplegable pasaba desapercibido.

Al pulsar el botón “vender online” salta un error solicitando seleccionar una categoría. Sin embargo, en el etiquetado del desplegable se nombra como “tipo de dispositivo”.

6. Reconocimiento antes que recuerdo

Hay que evitar que la persona tenga que memorizar pasos y procedimientos haciendo el proceso intuitivo y reconocible.

Volviendo a la cesta de la compra, antes de continuar con el proceso de compra, se muestra un listado de los artículos elegidos a la persona compradora en los que aparecen datos como el nombre, el precio o la fecha de entrega. De este modo puede echar un vistazo rápido que le permita confirmar que son esos los productos que desea comprar, en vez de tener que recordar qué productos había seleccionado.

7. Flexibilidad y eficiencia de uso

El sistema debe tener o permitir crear atajos frecuentes para aquellos usuarios más experimentados, de manera que puedan acelerar el proceso.

La web permite crear un perfil de usuario en el que se pueden recordar varias preferencias para agilizar los procesos futuros de compra: dirección de envío frecuente, dirección de facturación o datos de pago. También permite crear listas con artículos favoritos, para poder acceder a ellos más rápidamente en sesiones posteriores.

8. Diseño minimalista

Añadir únicamente los elementos más importantes, reduciendo la cantidad de opciones y mostrando las se consideren necesarias y relevantes, haciendo que el usuario mantenga el foco en lo importante.

Es una web que satura de información, sólo la home “emborracha” con tanta cantidad de opciones, imágenes, colores vivos y elementos clickables de diferentes estilos. 

 

Además, en su menú de categorías aparecen infinidad de opciones que hace complicada la tarea de elegir una.

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

Cuando ocurre un error, la plataforma debe comunicarlo de manera que la persona lo entienda. Además, tiene que ayudar a la persona usuaria a salir de esa situación sugiriendo opciones que ayuden a reconducir la navegación.

Al escribir incorrectamente el nombre de un producto se comunica al usuario que no hay coincidencias con la búsqueda (y se muestra la búsqueda). Además sugiere tres opciones para conseguir obtener resultados: revisar la ortografía, buscar otras palabras o visitar un enlace de ayuda.

10. Ayuda y documentación

La plataforma debe proveer de documentación que ayude al usuario a resolver sus dudas

Ofrece información adicional para explicar los servicios ofertados en los productos. Al pinchar sobre la “i” de información se abre una modal que explica en qué consiste el servicio.

 

Errores de usabilidad destacables

Sobrecarga de estímulos visuales: hay muchas imágenes coloridas que llaman la atención, perdiendo el foco de qué es lo importante. Sería recomendable reducir dichos estímulos y guardar los colores vivos para los CTA.

Excesiva cantidad de opciones y categorizaciones: en el menú se encuentra una gran cantidad de opciones y categorizaciones que resulta abrumadora. Sería buena idea estudiar posibles categorizaciones más sencillas, o un selector de categorizaciones, sin tener que ver todas las opciones de golpe.

Elementos clickables no perceptibles: Al pasar el ratón por un elemento interactivo, éste cambia de puntero, pero el elemento interactivo no cambia de estado (hover). Para hacer notar su interactividad es preferible mostrar un cambio de estado (cambio sutil de color por ejemplo).0

Falta de consistencia en el estilo visual: Los botones, colores, redondeos, tipografías… varían a lo largo de la página, perdiendo en algunas ocasiones el estilo visual y haciéndolo poco consistente. Es recomendable seguir unas guías de estilo más estrictas.

Textos extensos con tamaño de fuente pequeño y líneas largas: En algunos apartados hay textos largos que van de lado a lado de la página, haciendo poco apetecible su lectura. Además, la tipografía es pequeña para el ojo. Sería buena idea resumir el texto o incluir un desplegable tipo “saber más”, aumentar el tamaño de letra y reducir la longitud de línea a 10-12 palabras máximo.

 

Perspectiva de género e inclusión

En las secciones que hablan del personal, suelen cuidar del lenguaje. Se llaman a sí mismos: nuestros expertos, nuestro equipo humano, nuestro equipo técnico y profesional. 

Sin embargo, la diversidad no se refleja en las imágenes: Todas las imágenes del personal son de la misma etnia/raza y más o menos la misma edad. No muestran personas transgénero, ni con algún tipo de discapacidad física o cognitiva.

Existen asistentes expertos personificados en hombre o mujer, ambos de la misma etnia/raza. Al igual que en la parte de empleados, no hay referencias a transgénero, otras etnias/razas o personas discapacidadas.

En la imagen del asistente, hay 5 personas, pero sólo una es una mujer. Tampoco hay diversidad en cuanto a raza o edad, ni personas con algún tipo de discapacidad.

Llaman a los clientes nuestros clientes, nuestros usuarios, compromiso con “el cliente”.  Se evita en la mayoría de los casos usar el género de la persona a la que se refieren (cliente), pero en algunos casos se habla en masculino. En los datos recopilados de las personas usuarias no pide datos relativos a género ni hace referencia a ello.

Sin embargo, en el ranking de usuarios sí que hace referencia al género y categoriza todo en masculino: maestro, experto, entendido, iniciado. Todas las referencias a género son masculinas (“¿eres un tecnolover?”, “los ganadores de este mes”).

Además, no se encuentra un selector multi-idioma que permita cambiar el idioma de la web. Hay un desplegable referenciando a las tiendas en España y Portugal, que al modificarlo lo cambia a Español o Portugués, asumiendo que las personas residentes van a hablar dichos idiomas, cuando no tiene por qué.

Se ve que hay un esfuerzo detrás de simplificar el lenguaje para que los procesos y las descripciones de productos sean entendidas por mayor grupo de personas.

En cuanto a accesibilidad, tiene carencias. No siempre están separadas o recuadradas las secciones, los enlaces no se identifican visualmente y los botones o elementos clickables no son identificables visualmente. En algunos casos la combinación de colores no tienen suficiente contraste fondo-texto, el tamaño de letra es pequeño en algunos párrafos. Además poseen demasiados colores y estímulos visuales. Al pasar la web por un inspector automático de accesibilidad, encuentra que el html no presta atención a cuestiones como el texto alternativo de imágenes, que pueden ser útiles para lectores de pantalla o cuando no carga la imagen.

Debate0en PEC 2, Reto 2: Evaluación heurística

No hay comentarios.

Publicado por

Evaluación Heurística – Zara

Evaluación Heurística – Zara
Publicado por

Evaluación Heurística – Zara

A continuación voy a analizar la usabilidad de la interfaz de la página web de Zara. Zara es una cadena de moda…
A continuación voy a analizar la usabilidad de la interfaz de la página web de Zara. Zara es una…

A continuación voy a analizar la usabilidad de la interfaz de la página web de Zara. Zara es una cadena de moda española, insignia del grupo textil Inditex. Cuenta con más de 7000 tiendas repartidas por todo el mundo. En su web podemos encontrar ropa, calzado, accesorios y productos de belleza.

La decisión que me ha llevado a escoger esta página web es mi propia experiencia como usuaria de la marca. A pesar de que visualmente me gusta mucho su web, las veces que he comprado en ella he experimentado confusión y creo que tiene cosas que podrían mejorar en cuanto a usabilidad.

La metodología con la que voy a analizar la usabilidad de la página web es la evaluación heurística. Me centraré en el flujo principal de búsqueda y compra de ropa. Para ello, utilizaré los diez principios de Jacob Nielsen, y buscaré ejemplos de buenas y malas prácticas para cada uno de ellos.

Por cada mala práctica, se indicará la gravedad del mismo en una escala de 1 a 5. Una vez terminado el análisis, se seleccionarán los hallazgos más graves y se propondrán mejoras y soluciones.

∙  ∙  ∙

1. VISIBILIDAD DEL ESTADO DEL SISTEMA

El sistema debe dar feedback a los usuarios sobre lo que está sucediendo en la web en un tiempo razonable.

Buenas prácticas:
  • En la página de producto, se visualizan los colores y las tallas disponibles. Además, si una talla no está disponible, se puede hacer click en ella para ver prendas similares.
  • Cuando se añade una prenda a la cesta de compra, un ventana muestra la información del producto añadido. 

     

✘ Malas prácticas: 
  • Cuando el usuario pasa el ratón por encima de las categorías en el menú de navegación, el estado del texto no cambia, por lo que el usuario puede confundirse de categoría. (Gravedad: 2/5)
  • En el proceso de pago, no hay información del número de pasos que se deben realizar para finalizar la compra. (Gravedad: 5/5) 

   

∙  ∙  ∙

2. COINCIDENCIA ENTRE EL SISTEMA Y EL MUNDO REAL

El sistema debe hablar el idioma de los usuarios. Debe utilizar palabras, frases y conceptos que le sean familiares.

✔ Buenas prácticas: 
  • La cesta de la compra utiliza un icono que es fácil de entender.
✘ Malas prácticas: 
  • Un control deslizante permite al usuario cambiar la cuadrícula de los productos pero no hay nada que explique su función. (Gravedad: 2/5)
  • Hay fotos que no dan ninguna información sobre el producto al que están vinculados. (Gravedad: 3/5) 

    

∙  ∙  ∙

3. CONTROL Y LIBERTAD DEL USUARIO

El sistema debe dar a los usuarios la capacidad de deshacer de forma rápida acciones que haya podido realizar por error.

✔ Buenas prácticas: 
  • El sistema permite eliminar un producto del carrito y también deshacer la acción si se ha eliminado por error.

✘ Malas prácticas: 
  • En la pagina de producto no hay forma de volver atrás. (Gravedad: 4/5)
  • Si el usuario hace click en buscar, se abre una página que no tiene botón de salida. (Gravedad: 4/5)
  • Si el usuario se equivoca de talla, no puede editarlo en el carrito de compra. Debe eliminar el producto y volver a buscarlo para añadirlo a la cesta. (Gravedad: 4/5)
  • Una vez se inicia el proceso de compra, el usuario no tiene la opción de ir atrás ni de salir. (Gravedad: 4/5)

   

∙  ∙  ∙

4. CONSISTENCIA Y ESTÁNDARES

Los usuarios no deben cuestionarse si acciones, situaciones o palabras diferentes significan lo mismo. Se deben seguir las normas y convicciones establecidas en la industria.

✔ Buenas prácticas: 
  • Debajo de cada producto se indican productos similares.
  • El icono del menu burger se mantiene fijo en la esquina al hacer scroll.

✘ Malas prácticas: 
  • El layout irregular no es estándar en las tiendas de ropa y dificulta el proceso de seleccionar prendas. (Gravedad: 3/5)

∙  ∙  ∙

5. PREVENCIÓN DE ERRORES

Es importante diseñar buenos mensajes de error, pero es aún más importante que un diseño cuidadoso del sistema prevenga esos errores.

✔ Buenas prácticas: 
  • Se indica con una descripción cómo se debe rellenar cada campo de los formularios.
  • Si el usuario introduce un dato no válido en un campo de un formulario se le indica al momento.

✘ Malas prácticas: no se han encontrado.

∙  ∙  ∙

6. RECONOCIMIENTO MEJOR QUE RECUERDO

Minimizar la carga de memoria del usuario haciendo visibles los elementos, acciones y opciones. Los usuarios no deben tener que recordar la información de una parte del sistema a otra.

✔ Buenas prácticas: 
  • En la página de búsqueda, el usuario puede ver sus búsquedas recientes y sugerencias de búsqueda.
✘ Malas prácticas: 
  • En la pestaña de filtros, no hay ningún resumen de los filtros seleccionados por lo que el usuario debe ir abriendo cada apartado para recordar qué filtros había seleccionado. (Gravedad: 2/5)
  • Justo antes de autorizar el pago, se muestran fotos de los productos que se van a comprar pero no se muestra ninguna otra información. (Gravedad: 5/5)

 

∙  ∙  ∙

7. FLEXIBILIDAD Y EFICIENCIA DE USO

El sistema debe ofrecer aceleradores, ocultos a usuarios principiantes, para ofrecer una mejor interacción a los usuarios experimentados. El sistema debe permitirles personalizar sus acciones frecuentes.

✔ Buenas prácticas: 
  • El sistema permite guardar artículos en un listado de favoritos a usuarios registrados.
  • Se puede realizar la compra como invitado.

 

✘ Malas prácticas: 
  • No es posible ordenar los productos en base a ningún parámetro (precio, novedad…). (Gravedad: 2/5)

∙  ∙  ∙

8. DISEÑO ESTÉTICO Y MINIMALISTA

El sistema no debe contener información irrelevante o poco utilizada. Cada unidad extra de información compite con la información importante y disminuye su visibilidad relativa.

✔ Buenas prácticas: 
  • La web tiene un diseño minimalista y moderno.
✘ Malas prácticas: 
  • El menú superior tiene el fondo transparente por lo que es difícil de ver cuando solapa con determinados elementos. (Gravedad: 1/5)
  • Se utiliza más de una imagen para el mismo producto en las paginas de categorías, añadiendo un exceso de información innecesaria. (Gravedad: 3/5)

 

∙  ∙  ∙

9. AYUDA AL USUARIO A RECONOCER, DIAGNOSTICAR Y RECUPERARSE DE LOS ERRORES

El sistema debe expresar los mensajes de error con un lenguaje claro (sin códigos), indicando el problema y sugiriendo una solución.

✔ Buenas prácticas: 
  • Los formularios identifican los errores y muestran cómo solucionarlos con un comentario en rojo, facilitando su comprensión.
  • Los errores se explican con un lenguaje sencillo y se sugiere una solución.

✘ Malas prácticas: no se han encontrado.

∙  ∙  ∙

10. AYUDA Y DOCUMENTACIÓN

Es mejor si el sistema se puede utilizar sin explicaciones adicionales, pero se le debe proporcionar al usuario documentación que le ayude a completar sus tareas.

✔ Buenas prácticas: 
  • La web proporciona un excelente asistente de accesibilidad.
  • La herramienta encuentra tu talla permite al usuario conocer la talla recomendada en base a sus medidas.

 

✘ Malas prácticas: 
  • La sección de ayuda, aunque es fácil de encontrar, es difícil de navegar ya que hay que ir entrando en cada categoría para ver si lo que el usuario busca está en esa pagina. (Gravedad: 1/5)

 

1 – Antes de autorizar el pago solo se muestran fotos de los productos que se van a comprar.

(Gravedad: 5/5) Es un error crítico, ya que al no mostrar al usuario el nombre, talla o color de los productos de su cesta es fácil que compre algún producto equivocado.

Solución: Mostrar toda la información relevante de cada producto de la cesta durante todo el proceso de compra. Las imágenes de los productos pueden hacerse más pequeñas para colocar el texto junto a ellas.

∙  ∙  ∙

2 – No hay información del número de pasos que se deben realizar en el proceso la compra.

(Gravedad: 5/5) El usuario tiene que pasar por seis pantallas para finalizar la compra por lo que se trata de un proceso bastante largo. Al no informar al usuario de los pasos que le quedan para terminar, es muy probable que abandone el proceso de compra.

Solución: En la parte superior de la pantalla se debería indicar el número de pasos que debe completar el usuario para finalizar su compra y mostrarle en todo momento en qué paso se encuentra. Además, es posible reducir el número de pasos al condensar la información requerida en menos páginas.

∙  ∙  ∙

3 – No se puede editar la talla de un producto en la cesta de compra.

(Gravedad: 4/5) Añadir una talla equivocada a la cesta es un error muy común. Al no permitir al usuario editar la talla en la cesta de compra, se le obliga a eliminar el producto y volver a buscarlo para poder finalizar su compra.

Solución: De la misma forma que se puede editar la cantidad de cada producto en la cesta de compra, en lugar de indicar simplemente la talla, se debería sustituir por un desplegable en el que seleccionar la talla correcta.

∙  ∙  ∙

4 – No es posible salir o retroceder de las páginas de producto, búsqueda o cesta de compra.

(Gravedad: 4/5) Es un error muy repetido en la web que se debería solucionar ya que dificulta la navegación del usuario y lo obliga muchas veces a volver al inicio.

Solución: La solución más sencilla es incluir un botón para ir atrás o para cerrar la página actual. Otra opción es incluir breadcrumbs en la navegación que permitan al usuario ir a la página anterior que desee.

∙  ∙  ∙

5 – El layout irregular no es estándar en las tiendas de ropa y dificulta el proceso de seleccionar prendas.

(Gravedad: 3/5) El layout irregular hace que el usuario deba pasar mucho más tiempo en cada página para poder ver todos los productos disponibles. 

Solución: Un layout más regular y al que el usuario esté más acostumbrado mejorará su experiencia en la web.

∙  ∙  ∙

6 – Se muestra el mismo producto con imágenes diferentes.

(Gravedad: 3/5) Mostrar el mismo producto en repetidas ocasiones pero con diferentes imágenes lo único que logra es confundir al usuario, ya que si no se fija bien en el nombre o precio del producto (que tienen un tamaño de fuente muy pequeño) es probable que piense que se trata de productos diferentes.

Solución: Sera más fácil para el usuario ver las opciones disponibles si solo se muestra cada producto una vez. Solo se debería poder repetir un producto si se trata de un color diferente.

∙  ∙  ∙

7 – Hay fotos que no dan ninguna información sobre el producto al que están vinculados.

(Gravedad: 3/5) Al navegar por las páginas de producto muchas de las fotos tienen el nombre y el precio escritos debajo, pero muchos otros no muestran ninguna información. Por ejemplo, una foto de una mujer con un collar sin más información puede hacer pensar al usuario que si hace click podrá comprar el collar pero, en cambio, se le redirige a un pintalabios. Esto puede generar confusión y pérdida de tiempo.

Solución: Todas las fotos de producto deberían tener asociado claramente un nombre, para que el usuario sepa de que se trata.

∙  ∙  ∙

8 – No se explica la función del control deslizante que permite cambiar la cuadrícula.

(Gravedad: 2/5) Como ya hemos comentado antes, la web tiene un layout que dificulta su navegación. Este control deslizante mejora ese problema, pero pasa muy desapercibido y no hay nada que explique su función.

Solución: Sería recomendable sustituirlo por iconos que indiquen el número de productos a mostrar por cada fila, ya que es un recurso habitual en muchas webs y es más fácil de entender.

∙  ∙  ∙

9 – No es posible ordenar los productos en base a ningún parámetro.

(Gravedad: 2/5) En algunas categorías hay centenares de productos, pero el usuario no tiene ninguna forma de organizarlos de la manera que le sea más conveniente. La única opción que tiene para encontrar lo que busca es utilizando los filtros.

Solución: Es posible que el usuario no desee filtrar su búsqueda pero sí organizarla por precio o novedad, por lo que se debería incluir esta función junto a la herramienta filtro.

∙  ∙  ∙

10 – No se informa al usuario de los filtros que ha aplicado.

(Gravedad: 2/5) La única información que puede ver el usuario a simple vista es el número de filtros que ha seleccionado, pero si quiere recordar cuáles son debe entrar en la herramienta de filtro y mirar en cada categoría, algo que puede resultar tedioso.

Solución: Se debería indicar un breve resumen de los filtros seleccionados.

 

Como es habitual en las páginas webs dedicadas a la venta de ropa, se hace una distinción entre productos para hombres y para mujeres, aunque en este caso está parcialmente justificado ya que sino se hiciese esta distinción habría demasiados productos en cada categoría. Aun así, sería recomendable que se pudiese buscar un producto en ambas categorías.

Además, vemos que en la categoría de belleza, disponible tanto en la sección de mujer como de hombre, solo se utilizan modelos femeninas, a pesar de que cada vez es más amplio el público que utiliza estos productos. Todo esto puede generar conflicto en personas de género fluido o que simplemente quieran productos asociados tradicionalmente a otro género.

Otro apartado en los que la web tiene perspectiva de género es en los formularios, ya que en ningún momento se pregunta por el género. El principal problema que nos encontramos en cuanto a los usuarios es la imposibilidad de cambiar el nombre una vez creada la cuenta. Lo que obliga a personas que deciden cambiar su identidad de género o su nombre a crear una cuenta nueva.

En cuanto a la representación, muestran algo de diversidad étnica en la selección de modelos, aunque podría mejorar considerablemente. Lamentablemente, no muestran diversidad en cuanto a tallas, ni se esfuerzan en mostrar una representación real del cuerpo. Además, en muchos productos la talla más grande que ofrecen es la XL, lo que excluye a un gran número de personas.

Por último, vemos que la marca conoce la importancia de la accesibilidad. Ya que aunque los textos son excesivamente pequeños para una gran parte de usuarios, soluciona este problema ofreciendo una herramienta de accesibilidad que permite editar muchísimos parámetros.

Debate0en Evaluación Heurística – Zara

No hay comentarios.

Publicado por

Reto 2: Evaluación Heurística, Plan de test y Card Sorting

Publicado por

Reto 2: Evaluación Heurística, Plan de test y Card Sorting

Introducción: Para el desarrollo de la PEC 2 voy a analizar la página web de Gigaset en base a las 10 heurísticas…
Introducción: Para el desarrollo de la PEC 2 voy a analizar la página web de Gigaset en base a…

Introducción:

Para el desarrollo de la PEC 2 voy a analizar la página web de Gigaset en base a las 10 heurísticas de Nielsen. Gigaset es una empresa de telecomunicaciones alemana, líder europea en la venta en teléfonos, smartphones y smart home. Analizare los flujos del proceso de compra, búsqueda de productos y proceso de pago.

Escogí esta web por que compré algunos de sus productos y aunque la página estéticamente se ve muy bien, tiene algunos problemas de interacción, por ejemplo: se debe realizar muchos clics y cambios de pantallas para realizar la compra o al regresar a un proceso anterior se pierde parte de la información ya realizada.

Metodología:

Como previamente lo indique, para este análisis voy a utilizar la evaluación heurística de Nielsen, la cual nos ayudara con sus 10 principios a detectar los errores de usabilidad de la página gigaset.com.

Los 10 principios componen mi checklist, con los cuales voy a inspeccionar los flujos del proceso de compra, búsqueda de productos y proceso de pago. Luego realizaré un listado de los resultados de los principios clasificándolos según su gravedad. Los parámetros para esta clasificación son:

– La frecuencia con la que ocurre el problema.
– El impacto del problema.
– La persistencia del problema.

Para finalizar realizaré un análisis desde una perspectiva de género e inclusión.

Los 10 principios heurísticos de Nielsen:

1. Visibilidad del estado del sistema.

Buena práctica: El usuario sabe en todo momento el estado del sistema. Se le informa qué ha buscado previamente y en qué parte del proceso de compra se encuentra.

2. Empate entre el sistema y el mundo real.

Mala práctica: La página de Gigaset esta traducida a muchos idiomas. Sin embargo, en la página en español existen muchas palabras en inglés. Si el usuario no habla el idioma no va a poder navegar de una manera óptima.

3. Control y libertad del usuario.

Buena práctica: El usuario puede eliminar productos de la lista de compras sin ningún aviso molesto.

4. Consistencia y estándares.

Mala práctica: Mala práctica: Al hacer clic en la categoría de una tienda online, el usuario está acostumbrado a que se muestre los productos que puede comprar. En la página de Gigaset al hacer clic en una categoría “Smartphones” te lleva a una landing page informativa y cuando haces clic en “Comprar teléfonos móviles” (que está escondido) te lleva a la página de los productos que puedes comprar.

5. Prevención de errores.

Buena práctica: El usuario recibe información oportuna de los campos que ha llenado mal o la información es incompleta.

6. Reconocimiento mejor que recuerdo.

Buena práctica: Indica al usuario los campos por los cuales se ha realizado una búsqueda. El usuario no necesita recordar estos datos.

7. Flexibilidad y eficiencia de uso.

Mala práctica: Al querer realizar el pago en cada paso aparece una ventana de comprobación de dirección. Dos veces tuve que confirmar la misma dirección. Estoy hace la interacción muy lenta.

8. Diseño estético y minimalista.

Buena práctica: EL diseño de la página es minimalista y el usuario puede encontrar los productos fácilmente. No existen elementos innecesarios o ruido visual.

9. Ayudar a reconocer, diagnosticar y recuperarse de errores.

Buena práctica: Los mensajes de erros son indicados con precisión y sugieren una solución.

10. Ayuda y documentación.

Mala práctica: La página no cuenta con un mapa del sitio web.

Luego de la evaluación heurística de Nielsen encontré 4 principios que no se cumplen y un 1 principio que se cumplen, pero tienen posibilidades de mejoras.

Listado priorizado según gravedad:

– Flexibilidad y eficiencia de uso.
– Empate entre el sistema y el mundo real.
– Consistencia y estándares.
– Ayuda y documentación.

– Visibilidad del estado del sistema.

 

– Flexibilidad y eficiencia de uso.

Este es el problema más grave que encontré en la página web, ya que el usuario se puede arrepentir de la compra en el último proceso que debería cumplir. El proceso de pago debe ser lo más fácil y rápido posible para concretar la compra.

Solución: La dirección que no tenga errores debe ser aprobada y no reconfirmada. Se puede usar un plug de google maps que verifique automáticamente la dirección.

– Empate entre el sistema y el mundo real.

Existen muchas palabras en el idioma inglés, esto dificulta la navegación de los usuarios que no hablan ese idioma.

Solución: Traducir las palabras en inglés al castellano y utilizar un lenguaje acorde con el usuario.

– Consistencia y estándares.

Al hacer clic en la categoría no te lleva directo a la lista de productos que puedes comprar. esto es un problema para los usuarios que compran habitualmente online y están acostumbrados a ver lo más rápido posible los productos.

Solución: Mostrar los productos de la tienda online luego del primer clic en las categorías.

– Ayuda y documentación.

Los usuarios inexpertos no tienen una sección de ayuda de la página web.

Solución: Crear un mapa del sitio.

– Visibilidad del estado del sistema.

Si bien este principio se cumple, los textos de la ubicación del usuario en la página web son demasiado pequeños y dificultan su lectura.

Solución: Aumentar dos puntos a estos textos y realizar pruebas de usuario para poder verificar que el usuario puede encontrar esta información sin problemas.

Consideraciones de la interfaz desde una perspectiva de género.

La web no hace muchas alusiones al género, utiliza mayormente términos neutros. Para crear una cuenta no existen preguntas de género.

Es satisfactorio ver que usan imágenes diversas sin dejar de lado a ningún grupo de personas. Incluso tienen un aparatado “Fair for future” donde describen su responsabilidad social con las personas y el medio ambiente.

Llegue a la conclusión que en general la web de Gigaset no incumple con el diseño inclusivo y tienen campañas que impulsan la igualdad de las personas y el cuidado del medio ambiente.

Bibliografía:

Judith Membrives, Cuaderno de evaluación de la usabilidad. Barcelona UOC, Febrero 2019. [consulta: 11.11.22]. Disponible en: http://quadern-usabilitat.recursos.uoc.edu/es/

Tomàs Modroño, Evaluación Heurística (PARTE I-II). Septiembre 2017. [consulta: 12.11.22]. Disponible en: https://interactius.com/evaluacion-heuristica-parte-i/

By GammaUX , Diseño inclusivo desde una perspectiva de género. Febrero de 2020. [consulta: 12.11.22]. Disponible en: https://www.gammaux.com/blog/diseno-inclusivo-desde-perspectiva-de-genero/

Screenshots y Fotos utilizadas: Gigaset.com, freepik.com, tenor.com

Debate0en Reto 2: Evaluación Heurística, Plan de test y Card Sorting

No hay comentarios.

Publicado por

Reto 2: Evaluación Heurística

Publicado por

Reto 2: Evaluación Heurística

Motivaciones  Con un papel muy relevante en el desarrollo de gran parte de las metodologías académicas que se imparten actualmente en todo…
Motivaciones  Con un papel muy relevante en el desarrollo de gran parte de las metodologías académicas que se imparten…

Motivaciones 

Con un papel muy relevante en el desarrollo de gran parte de las metodologías académicas que se imparten actualmente en todo el mundo, los entornos de aprendizaje online están cada vez más presentes en los centros educativos. 

De forma directa o indirecta sirven como facilitadores del aprendizaje presencial, llevando las posibilidades que brindan las herramientas online al ámbito educacional.  

Herramientas como Moddle proporcionan un entorno que permite dar estructura a distintos modelos de enseñanza y ofrecer a los estudiantes herramientas online que facilitan tareas derivadas de sus estudios.  

Con una presencia cada vez mayor en la educción a todos los niveles, se ha demostrado que el diseño de estas herramientas tiene un papel determinante en la experiencia de aprendizaje, y un mal diseño influye en el abandono y la falta de motivación. 

Después de leer estas afirmaciones es fácil constatar que el buen diseño de estas aplicaciones está directamente relacionado con la calidad de los estudios y a grandes rasgos relacionado con un buen rendimiento académico por parte de los estudiantes. Rendimiento impulsado por el augmento de la motivación gracias a una buena satisfacción de uso y componentes de carácter hedónicos que acompañan al estudiante durante su experiencia.  


Introducción 

El propósito principal de esta actividad ha sido poner en práctica el método de evaluación sin usuarios de Evaluación Heurística. Este método nos permite realizar una evaluación de la interfaz sin necesidad de involucrar a usuarios finales. A partir del análisis del diseño por parte de un experto, en este caso un estudiante, siguiendo unos principios de la disciplina de HCI aceptados y reconocidos que nos permiten encontrar errores y posibles puntos de mejora en las aplicaciones. 

Para la realización de esta, se ha elegido trabajar con el campus virtual del centro universitario CITM, un centro universitario dedicado a la imagen y tecnologías multimedia.   

En esta plataforma tanto los alumnos del centro como los docentes tienen acceso a información relevante para el desempeño de sus tareas lectivas y se utiliza para multitud de trámites y tareas que se llevan a cabo durante la consecución de los estudios. 

Esta actividad se centrará en las tareas que llevan a cabo los estudiantes y una serie de journeys principales que se realizan dentro del portal.  

    • Como alumno quiero consultar el material lectivo de una asignatura concreta, para poder seguir los contenidos mientras hago indicaciones en los apuntes. 
    • Como alumno quiero consultar los horarios de las asignaturas de este semestre para poder planificar la semana. 
    • Como alumno quiero consultar las calificaciones de la última práctica que entregue en una asignatura concreta. 
    • Como alumno quiero mandar un mensaje a un profesor.  
    • Como alumno quiero consultar apuntes de asignaturas de cursos anteriores.  
    • Como alumno quiero descargar la última entrega para consultar su contenido. 

Objetivos de la evaluación: 

Esta evaluación se realiza en una aplicación que se encuentra en funcionamiento y su principal objetivo es localizar problemas de usabilidad para poder ofrecer insights que ayuden a postular posibles soluciones que mejoren el diseño de la aplicación.  

Se busca encontrar aquellos problemas que suponen una barrera para que el uso de la aplicación se corresponda con una buena experiencia de usuario, que permita a los alumnos realizar sus tareas con eficacia, eficiencia y satisfacción de uso.  

Estos problemas se ordenan por distintos niveles de severidad que permiten realizar un análisis que visibilice los hallazgos más problemáticos y aquellos donde es más importante actuar.  


Los 10 Principios Heurísticos de Nielsen 

Con el fin de poder ilustrar los principales problemas identificados en el análisis a continuación ejemplificaremos los hallazgos más importantes. Cada uno de ellos relacionado con la heurística sobre la que aplica. 

1 – Visibilidad del estado del sistema 

La plataforma tiene que mantener al usuario informado del estado del sistema, dar información de en qué punto se encuentra y que pasa a partir de sus acciones. Esta información se tiene que transmitir de forma constructiva y a tiempo al usuario para mantener una correlación temporal con este.    

❌   En la página principal de la plataforma no encontramos ningún marcador visual que indique en que curso académico nos encontramos. La falta de jerarquización de este dato concreto dificulta que el estudiante localice rápidamente las aulas con las que está trabajando en el momento de la visita. 

Lo mismo pasa con las franjas horarias del aula de estudio de la parte inferior. 

 ❌    La variedad de sistemas de navegación, divididos en subsistemas separados, y los elementos gráficos usados para indicar donde nos encontramos hacen difícil que un usuario inexperto se oriente. No quedan claro los distintos caminos que puede seguir a lo largo de la interfaz. 

 

 

2 – Correlación entre el sistema y el mundo real 

El uso del lenguaje, términos, frases, símbolos y conceptos tienen que ser similares o mantener una relación directa con los que se usan en el entorno físico.  

 

    En este caso, el calendario que se muestra dentro del apartado de cada curso, y en general a lo largo de toda la interfaz, se usan términos que hacen referencia a conceptos con poca relación directa con el contenido real que aguardan. En este ejemplo concreto, vemos como el botón para crear un nuevo evento es etiquetado con el texto ‘Nueva entrada’ en vez de nuevo evento.  

De forma similar los textos e iconos de los diferentes tipos de eventos que se pueden marcar en el calendario no mantienen ninguna relación semántica gráfica.  

 

Además esta heurística nos dice que la información que se muestra en la interfaz tiene que mantener un orden natural y lógico. 

 ❌    En este card, que muestra la localización de las aulas habilitadas para el estudio, se muestra un orden cronológico pero que no pone en valor las distintas franjas horarias que se siguen cada día, ni la diferenciación clara entre los días de la semana. El código de texto que se usa para identificar a las aulas añade ruido a la información ya que la nomenclatura TR no aporta nada en este contexto.  

3 – Control y libertad del usuario  

Los usuarios tienen que tener control directo sobre el sistema. Cuando quieran, e incluso si han cometido errores tienen que poder abandonar la plataforma. 

Se tienen que proporcionar facilidades para hacer y deshacer acciones. 

 ✅     Una buena aplicación de esta heurística es la extendida y estandarizada práctica de cuando se elimina un menaje de una bandeja de entrada, moverlo a una carpeta de eliminados, donde podemos recuperar mensajes una vez eliminados. En este caso el flujo para realizar esta acción no esta demasiado bien diseñado de cara a un usuario inexperto pero la funcionalidad está allí. 

4 – Consistencia 

A lo largo de la interfaz se tienen que usar estándares que sean aceptados de forma amplia y conocidos por el usuario. Los conceptos, palabras, símbolos y acciones se refieren a la misma cosa en distintas aplicaciones. 

 

❌   Los sistemas de navegación no mantienen ningún esquema lógico estandarizado. No quedan claras las jerarquías de las distintas pantallas y apartados. El Apartado de actividad tiene un comportamiento extraño. Llevando al usuario a la última pantalla del mismo nivel jerárquico que un curso escolar que ha visitado. De esta forma, si el usuario entra, accede al curso 2020, accede al apartado de mensajes y luego quiere volver a la pantalla del curso donde estaba, puede hacer click en actividad.  

 ❌    En este apartado el usuario puede almacenar archivos de forma privada. Resulta curioso interpretar la forma con la que se puede variar el orden de este listado. Las flechas de la parte izquierda permiten modificar el orden en el que se listan. En la mayoría de las acciones estandarizadas relacionadas el usuario usaría la utilidad drag and drop para modificar el orden de los ítems. Otra opción sería aplicar ordenación por alguno de los atributos de las columnas.  

5 – Error 

El sistema tiene que estar diseñado para que el usuario no pueda cometer errores graves de usabilidad. Cuando un usuario comete un error, este se tiene que notificar a tiempo y con el mensaje adecuado. 

 ❌    Dentro del apartado personal, encontramos un espacio para almacenar ficheros en la plataforma. Estos ficheros se pueden eliminar haciendo clic en el botón situado en el lateral de la tabla. Esta acción pude suponer un error grave si se realiza sin conocimiento de causa o si se piensa que se pueden recuperar los archivos borrados ya que solo al hacer clic se elimina el archivo y no se puede recuperar de ninguna forma.  

Para evitar que el usuario cometa errores en acciones importantes es básico notificar de las consecuencias de estas acciones y dar la posibilidad de cancelar el borrado. 

6 – Reconocer antes que recordar 

Los objetos que se tienen que manipular y las acciones que se pueden tomar tienen que estar visibles. El usuario no debe tener que recordar información importante entre apartados. Las instrucciones de cómo se tiene que usar el sistema tienen que estar accesibles cuando el usuario más las necesite. 

 ✅      En esta captura podemos apreciar un buen ejemplo de uso de esta heurística. Cuando el usuario tiene que añadir destinatarios a un mensaje, en vez de tener que recordar los nombres de usuario puede acceder al directorio de usuarios y seleccionarlos desde allí, donde los encuentra ordenados por categorías.

❌    Para una buena ejecución de la heurística, se debería de poder visualizar esta información en la misma pestaña del ordenador, mediante una modal, o permitir el autocompletado, directamente en el campo de destinatario o en un filtro aplicado a la lista de usuarios. 

7 – Flexibilidad y eficiencia de uso 

El sitio debe atender a diferentes niveles de usuarios, desde principiantes hasta expertos. Los atajos de teclado, ocultos para los usuarios principiantes tienen que servir para que los usuarios más experimentados puedan acelerar su flujo de trabajo y terminar las tareas en menos tiempo que un usuario principiante.  

 ✅    Gracias a que ejecutamos la aplicación dentro del contexto del navegador podemos hacer uso de los atajos de teclado que nos proporciona. En este caso pulsando la combinación de teclas indicada podemos realizar búsquedas de texto en toda la interfaz. 

❌    Como posible mejora, en el contexto de esta aplicación, se podría facilitar el uso de la mensajería interna para usuarios avanzados con reglas personalizadas y subcarpetas para poder ordenar los mensajes de forma customizada a partir de ciertas reglas complejas.  

8 – Estética y diseño minimalista 

Los diálogos no deberían contener información irrelevante o que el usuario no necesita en la tarea que está realizando. Cada unidad extra de información en un diálogo o página, compite con la información importante, disminuyendo su visibilidad relativa y haciendo más difícil la ejecución de la tarea. 

 ❌    En la mayoría de las páginas de esta aplicación encontramos una sobrecarga importante de información.  El diseño no ayuda a destacar y diferenciar distintos chunks para facilitar la identificación de los distintos apartados. 

9 – Ayudar a reconocer, recuperar y diagnosticar errores 

Los mensajes de error deben estar expresados en lenguaje llano (sin códigos), indicando con precisión el problema y sugiriendo una solución. 

 

 ✅    Al intentar previsualizar un archivo no admitido en el visualizador de la aplicación se muestra este mensaje de error.  En la segunda captura vemos como si en alguno de los formularios dejamos vacío uno de los campos obligatorios e intentamos enviar la información nos aparece un mensaje que nos alerta y sugiere una solución. 

❌    Con tal de poder ofrecer una alternativa al usuario se debería indicar una posible solución al problema. 

10 – Ayuda y documentación 

La aplicación tiene que ofrecer y facilitar ayuda y documentación para dar soporte a las necesidades de los usuarios. La información en esta documentación tiene que ser fácil de encontrar y proporcionar instrucciones concretas de los pasos que se tienen que seguir para completar las tareas con éxito.  

 ❌    En ninguna parte de la aplicación se encuentra documentación que detalle el funcionamiento del campus. Encontramos algunos ficheros de ayuda pero se trata de manuales de aplicaciones externas.  

 

Bibliografía

  1.  Cuaderno de Evaluación de la Usabilidad. 4.Universitat Oberta de Catalunya. Disponible en: http://quadern-usabilitat.recursos.uoc.edu/es/4-1-introduccion/-usabilidad/
  2.  Cuaderno de Evaluación de la Usabilidad. 6.Universitat Oberta de Catalunya. Disponible en: http://quadern-usabilitat.recursos.uoc.edu/es/6-1-introduccion/
  3. Metodologías de UX: Evaluación Heurística Parte 1  (Interactius).  Tomàs Modroño. 1 setembre 2017. Disponible en: https://interactius.com/evaluacion-heuristica-parte-i/
  4. Metodologías de UX: Evaluación Heurística Parte  2(Interactius).  Tomàs Modroño. 12 gener 2018. Disponible: https://interactius.com/evaluacion-heuristica-parte-ii/
  5. Fundació Oberta de Catalunya. Fitxes: Avaluació heurística i guia, Card Sorting, Test amb usuaris. Disponible en: http://design-toolkit.uoc.edu/
  6. Heuristic Evaluation: How To (Nielsen). Jakob Nielsen on November 1, 1994. Disponible en:  https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
  7. Diseño inclusivo desde una perspectiva de género. Blog de Gamma UX. Disponible a: https://www.gammaux.com/blog/diseno-inclusivo-desde-perspectiva-de-genero/
  8. El rol del Diseño UX en la inclusión de género, en el blog de Torres Burriel. Disponible a: https://www.torresburriel.com/weblog/2021/10/28/el-rol-del-diseno-ux-en-la-inclusion-de-genero/

Debate0en Reto 2: Evaluación Heurística

No hay comentarios.

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

PEC 2. Evaluación Heurística, Plan de test y Card Sorting

PEC 2. Evaluación Heurística, Plan de test y Card Sorting
Publicado por

PEC 2. Evaluación Heurística, Plan de test y Card Sorting

Esta semana mostraremos cómo evaluar una interfaz bajo una de las herramientas de inspección de la usabilidad, junto al ‘Test con usuarios’,…
Esta semana mostraremos cómo evaluar una interfaz bajo una de las herramientas de inspección de la usabilidad, junto al…

Esta semana mostraremos cómo evaluar una interfaz bajo una de las herramientas de inspección de la usabilidad, junto al ‘Test con usuarios’, más usadas en el campo de la Experiencia de Usuarios: la Evaluación Heurística. Para que resulte intuitivo, acompañaremos el post con un análisis detallado del proceso de compra en uno de los e-commerce de impresión online más completos del sector: OnlinePrinters.es .

¿Quién es OnlinePrinters.es?

Cuando el tiempo es limitado, es probable que al centrarte en acabar uno de tus proyectos offline olvidases que tenías que imprimirlo para su entrega antes de que llegase el fin de semana. Llegados a este punto, probablemente busques en Google imprentas con acabados de nivel y que trabajen bajo mínimos, o incluso 24h.

Aquí es donde aparecen los profesionales de Online Printer, una imprenta profesional online que ofrece sus servicios para transferir tu imagen a cualquier formato imaginable (flyer, cartel, merchandising, stand, textiles y mucho más), con servicio 24h de profesionales en el sector.

La clave de su interfaz web es que en un primer contacto empiezas a comprobar que se ha planteado la problemática de sus personas usuarias y se enfoca en solucionarla. Su simplicidad y sobriedad visual hace que configures tus impresiones a gran escala en sencillos pasos y con las customizaciones necesarias para conseguir un buen acabado.

Además, parece interesante su mirada ecológica donde pone en valor productos alternativos que reducen la emisión de CO2 o, simplemente, soportes ecológicos que ofrecen en su catálogo y que están fabricados con materiales sostenibles.

¿Será esta la mejor opción para incluir en tu pantonera de imprentas?

Metodología

Para llevar a cabo el análisis de la interfaz, utilizaremos la herramienta ya mencionada anteriormente como «Evaluación Heurística». En primer lugar, definiremos las heurísticas bajo los «Principios Heurísticos de Nielsen» que probablemente se traten de los más utilizados a nivel popular para este tipo de evaluaciones gracias a su aceptación profesional. Además, añadiremos un principio más en la lista titulado «Perspectiva de género e inclusión».

A continuación, configuraremos un Checklist de subheurísticas que nos permitan indicar de manera sencilla si la interfaz cumple con los requisitos mínimos de usabilidad para, posteriormente, evaluar cuantitativa y/o cualitativamente los resultados. Para la evaluación cuantitativa generaremos un listado de los hallazgos priorizados según su gravedad respecto a la experiencia de usuarios.

Por último, generaremos una posible solución de cada uno de los puntos de estos listados con los que la interfaz en cuestión podría mejorar su usabilidad.

Análisis Heurístico

Para el análisis heurístico se ha utilizado una plantilla creada mediante la herramienta Figma donde se detallan los diferentes puntos de la checklist tenidos en cuenta durante el proceso para medir de una forma más exacta la gravedad de los problemas encontrados durante la evaluación. Para consultarla puedes acceder desde aquí (recomendado).

#1 Visibilidad del estado del sistema

La visibilidad del estado del sistema es uno de los puntos fuertes del e-commerce en cuestión. Han sabido defenderse especialmente en la página de producto.

Buenas prácticas:
  • Utiliza un sistema de miga de pan en la página de producto para que el usuario sepa dónde se encuentra en cada momento. También utiliza un recurso detallado de steps dentro de la pasarela de pago para que el usuario esté informado de los pasos que debe dar antes de finalizar.
  • Durante la finalización de cada step en el proceso de compra existe un feedback del sistema mediante popups que te resume los detalles que completaste o simplemente te informa de que no hubo errores.
  • Además, el tiempo de respuestas en estas retroalimentaciones son breves lo que permite al usuario sentirse informado en todo momento del estado del sistema
Malas prácticas:
  • Dentro del menú no se aprecia ninguna diferenciación en la categoría y/o producto donde se encuentra el usuario, lo que puede llegar a confundir a la persona usuaria cuando intente navegar por él, por ejemplo, con el fin de encontrar otro elemento interesante en la misma categoría.

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

El uso de plantillas en las pasarelas de pago, a veces, puede verse afectada en el déficit de adecuación al mundo real del usuario. Este, ha sido uno de los problemas que ha sufrido la interfaz de Online Printers.

Buenas prácticas:
  • Los iconos utilizados en la interfaz están resueltos de manera sencilla para la comprensión de los usuarios novels.
Malas prácticas:
  • Los iconos que representan plegados y formatos especiales pueden llegar a confundir a los usuarios ya que no se especifica si se refiere al tamaño plegado o sin plegar.
  • No existe ninguna metáfora que ayude al usuario a identificar el e-commerce como un servicio de imprenta. De hecho, los botones llevan mensajes estándar como «Añadir a la cesta» cuando en imprenta se suele utilizar el concepto de «Enviar a producción» o «Añadir a la cola de impresión».

#3 Control y libertad del usuario

Este es, sin duda, la heurística sobresaliente del sistema por el que puede quizás ser un punto por el que destaque frente a los sitios webs de la competencia.

Buenas prácticas:
  • La persona usuaria tiene libertad de actuación durante todo el proceso de compra, sin restricciones.
  • El sitio web dispone de un personalizador de productos online, que de normal suele tener ventanas que entorpecen las acciones o coartan la libertad de los usuarios. Sin embargo, este no es el caso pues se adecua a las necesidades mínimas para gestionar un proceso infalible.
Malas prácticas:
  • No existen apenas pegas, pero si hubiese que buscar alguna razón para mejorar el sistema sería la libertad del usuario al colocar elementos en el diseño mediante un canvas con libertad de posicionamiento sin limitar sus coordenadas.

#4 Consistencia y estándares

Llegados a este punto, he de decir, que la primera impresión del sitio web puede confundir. Una vez vas mirando los detalles, existen muchas inconsistencia que pueden llegar a confundir a los usuarios.

Buenas prácticas:
  • Es cierto que siguen unos patrones genéricos en los elementos que hacen suponer que existe una guía de estilos.
Malas prácticas:
  • No existe un a ubicación de los elementos coherente dentro de la página del producto donde puedes encontrar sidebars  que no tienen ninguna referencia ni relación con el contenido más inmediato de la estructura central. Los datos de envío se mezclan con demasiados datos que no se explican claramente.
  • Utilizan iconografías procedentes de familias diferentes dentro de una misma sección: algunos con elementos simples y otros demasiados sobrecargados de información.
  • No existen animaciones que ayuden a las personas usuarias a comprender los elementos del sitio web.

#5 Prevención de errores

Online Printers intenta evitar los problemas que puedan ocurrir durante el proceso de compra recurriendo al Help Center como elemento central.

Buenas prácticas:
  • Cuando ocurren errores en el sistema suelen aparecer feedbacks  con indicaciones claras y concisas que ayudan al usuario a ser autónomo durante todo el proceso.
  • Existe un botón de ayuda, ya mencionado, en la esquina inferior izquierda en todo momento para acudir al Centro de Ayuda con el que accedes a información personalizada para completar tu ayuda.
  • Cada concepto complejo, es explicado al usuario mediante Toolkits con pequeñas descripciones que facilitan la lectura y el procedimiento de compra.
Malas prácticas:
  • Cuando ocurren errores en el sistema no se facilita una reversión de la acción que permita regresar al estado inicial, lo cual supone que el usuario deba salir del proceso para comenzar de cero si erra de algún modo.

#6 Reconocimiento mejor que recuerdo

En esta ocasión, nos encontramos con una web carente de ayudas al usuario en cuanto a información ya completada durante el proceso de compra de artículos.

Buenas prácticas:
  • La información se encuentra esquematizada y sin demasiada sobrecarga, por lo que favorece a la fluidez para la consecución de objetivos en el usuario.
Malas prácticas:
  • No se muestra ningún resumen de los parámetros seleccionados a lo largo de la compra, lo cual no facilita la carga memorable hacia la persona que interactúe con el servicio.
  • En las migas de pan, a veces pueden llegar a acumularse gran cantidad de términos dentro de una misma sección entorpeciendo la memorización del camino que se ha tomado hasta llegar al producto.

#7 Flexibilidad y eficiencia de uso

Buenas prácticas:
  • La interfaz favorece el flujo de trabajo del usuario experto mediante técnicas como el registro en la plataforma que le permite guardar sus datos para evadir rápidamente ciertos pasos en sus próximas compras.
  • Se resumen las informaciones mediante listados con breves descripciones del producto o proceso, consiguiendo una mayor fluidez para usuarios inexpertos y experimentados.
Malas prácticas:
  • No se resumen las técnicas recurrentes dentro del personalizador de productos mediante shortcuts  lo que puede repercutir en el incremento de abandonos en las compras.

#8 Diseño estético y minimalista

Podemos apreciar a simple vista que la web destaca por su simpleza y minimalismo en todas las secciones que disminuye la visibilidad relativa de la información.

Buenas prácticas:
  • Se utiliza en todo momento iconografía para reconocer los conceptos rápidamente sin crear confusiones entre estos.
  • Los enlaces y botones son fácilmente reconocibles en todo el proceso.
  • Se elimina cualquier información o elemento irrelevante en la plataforma que pueda causar ruido visual e interferir en la atención del usuario.
  • Las longitudes de las páginas de producto se suelen reducir gracias a botones que despliegan las descripciones largas.
Malas prácticas:
  • Interfiere en la fluidez del proceso que no puedas acceder al paso de subir tus diseños hasta terminar el proceso de compra.
  • En la página del producto se ha recurrido a un orden de la información ilógico, donde la descripción del producto se encuentra al final de la página tras el proceso de personalización.

#9 Reconocimiento, diagnóstico y recuperación de errores

Los mensajes de errores a menudo suelen ser un campo a mejorar en las tiendas online, pero el resultado en Online Printer está mejorado.

Buenas prácticas:
  • Los mensajes de error no están codificados ni tienen un lenguaje complejo, consiguiendo así la comprensión del contenido por parte de la persona usuaria y su correcta solución a los problemas.
  • Una vez que erras en un formulario, los datos de cada campo se quedan registrados y no se pierden en la recarga, lo que supone que el usuario pueda identificar los errores fácilmente y no perder tiempo en el proceso.
Malas prácticas:
  • Como ya hemos mencionado con anterioridad, no se pueden revertir algunos errores que los usuarios hayan cometido en algún paso y que el sistema haya validado.

#10 Ayuda y documentación

Buenas prácticas:
  • Existe un Help Center bastante completo con opciones como el Chat o las FAQ’s que suelen optimizar el tiempo invertido en la consulta de dudas.
Malas prácticas:
  • Se echa en falta una pequeña documentación donde se expliquen algunos tecnicismos, algunos procesos más detallados o una simple guía de entrega de formatos más centrada en que el usuario no cometa errores y garantizar el buen resultado de la impresión.

#11 Perspectiva de género e inclusión

El lenguaje de la interfaz debe tener un claro objetivo de dirigirse a cualquier género mostrando respeto y sin jerarquizar unos sobre el resto.

Buenas prácticas:
  • Utiliza un lenguaje que respeta a cualquier género dando confianza a las personas consumidoras durante el proceso de compra o información.
  • No existe distinción de género cuando se refiere al uso de la interfaz. La plataforma tiene la misma accesibilidad y usabilidad independientemente del género del usuario.
Malas prácticas:
  • En los formularios echamos de menos la opción de no sentirte identificado con ningún género o simplemente no querer mostrarlo. Es más, referirte a una persona como Sr./Sra. es una forma desfasada de mostrarse ante una nueva generación que aspira a una diversidad amplia de género.
  • Se prioriza en todo momento la figura del género masculino sobre el género femenino en los campos de selección, mostrando una jerarquía que puede incomodar y afectar a la experiencia del consumidor en la plataforma.
  • Aproximadamente, el 98% de las imágenes representativas de la empresa se muestran más cercanas al genero masculino interfiriendo en que la persona usuaria se sienta comprendida y reflejada en sus productos.

Gravedad de los errores y posibles soluciones

A continuación, haremos un listado de las heurísticas ordenadas según su nivel de gravedad en cuanto a la experiencia de usuario y acompañadas de una evaluación del 5 al 10, donde 5 es mínimamente grave y 10 de máxima gravedad.

  • Perspectiva de género e inclusión: 10.
  • Consistencia y estándares: 10.
  • Reconocimiento mejor que recuerdo: 9.
  • Diseño estético y minimalista: 8.
  • Adecuación entre el sistema y el mundo real: 8.
  • Prevención de errores: 7.
  • Reconocimiento, diagnóstico y recuperación de errores: 7.
  • Ayuda y documentación: 6.
  • Visibilidad del estado del sistema: 6.
  • Control y libertad del usuario: 5.
  • Flexibilidad y eficiencia de uso: 5.

Como conclusión, podemos dar una serie de recomendaciones a la empresa para solucionar los errores más graves como:

  • El uso de imágenes y lenguaje inclusivos en sliders y formularios.
  • Eliminación de inputs tipo select para registrar el género del usuario, es una información irrelevante.
  • Cambiar la disposición de la información en la página de producto a un orden más coherente.
  • El uso de pequeños resúmenes que muestren las opciones elegidas en la personalización del producto o los camplos relevantes completados en los anteriores pasos del formulario con la posibilidad de edición.
  • Uso de iconos con estilos unificados.
  • Reducir el número de términos utilizados en las migas de pan y/o en los títulos del producto.
  • Colocar la posibilidad de subir el diseño del producto al comienzo del proceso de compra para poder comparar cómo queda el mismo en todos los productos.
  • Dotar a los elementos de animaciones que ayuden con la lectura y jerarquización de los elementos.
  • Usar la metáfora de la relación impresor/a-consumidor/a para darle otro aspecto visual a la plataforma y un lenguaje más cercano.
  • Destacar los sitios donde se encuentra la persona usuaria en ese mismo momento dentro del menú.

Referencias

ARMENGOL, Dani. CASACUBERTA, David. CHACÓN, Jonathan. GARRETA, Muriel. GONDOMAR, Romualdo. MORA, Alberto. MORA, Joan. MEMBRIVES, Judith. MONJO, Tona. MOR, Enric. NIETO, Javier. ZAMBRANO, Jossie.
Design Toolkit [en línea]. UOC, 2020. https://design-toolkit.uoc.edu/

MEMBRIVES, Judith
Cuaderno de evaluación de la usabilidad [en línea]. UOC, 2019. https://quadern-usabilitat.recursos.uoc.edu/

MODROÑO, T. [Tomàs M. (2017, 1 septiembre). Evaluación Heurística (PARTE I). Interactius. https://interactius.com/evaluacion-heuristica-parte-i/

Debate0en PEC 2. Evaluación Heurística, Plan de test y Card Sorting

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.

Publicado por

¡Bienvenidos y bienvenidas!

¡Bienvenidos y bienvenidas!
Publicado por

¡Bienvenidos y bienvenidas!

¡Hola! Esta publicación se ha generado automáticamente en el Ágora. Te encuentras en el Ágora de la asignatura. En este espacio se…
¡Hola! Esta publicación se ha generado automáticamente en el Ágora. Te encuentras en el Ágora de la asignatura. En…

¡Hola!

Esta publicación se ha generado automáticamente en el Ágora.

Te encuentras en el Ágora de la asignatura. En este espacio se recogerán todas las publicaciones relacionadas con las actividades que hagan los compañeros y compañeras del aula a lo largo del semestre.

El Ágora es un espacio de debate en el que estudiantes y docentes pueden ver, compartir y comentar los proyectos y las tareas de la asignatura.

Si solamente ves esta publicación, puede ser porque todavía no se ha hecho ninguna más, porque no has entrado con tu usuario de la UOC o porque no perteneces a esta aula. Si no eres miembro de la UOC y ves alguna publicación, es porque su autor o autora ha decidido hacerla pública.

¡Esperamos que esta Ágora sea un espacio de debate enriquecedor para todos y todas!

Debate0en ¡Bienvenidos y bienvenidas!

No hay comentarios.

Las intervenciones están cerradas.