17 Noviembre, 2023

Análisis heurístico de la web de TikTok

Judit Agüera García
Visibilidad: Pública - - comentario en Análisis heurístico de la web de TikTok
Análisis heurístico de la web de TikTok

Análisis heurístico de la web de TikTok

Judit Agüera García
Visibilidad: Pública - - comentario en Análisis heurístico de la web de TikTok
Tenía en mente multitud de aplicaciones y webs para realizar un buen análisis heurístico, pero tras la comida familiar de este fin…
Tenía en mente multitud de aplicaciones y webs para realizar un buen análisis heurístico, pero tras la comida familiar…

Tenía en mente multitud de aplicaciones y webs para realizar un buen análisis heurístico, pero tras la comida familiar de este fin de semana compartiendo tiempo con mis queridísimas y queridísimos familiares adolescentes y no tanto, he decidido seguir con ese empacho de videos musicales en modo carrusel y realizar el análisis heurístico de la web TikTok.

He de admitir que TikTok me fascina, ha conseguido que visualizar contenido sea una experiencia de acción recompensa, adictiva para el usuario. Con un diseño de interfaz sencilla, con pocas elecciones, videos musicales, acciones repetitivas y contenido ilimitado, tal y como comentó en una reunión grupal el compañero psicólogo David Barqué, TikTok se ha convertido en las nuevas tragaperras.

Os preguntaréis por qué he escogido analizar la web y no la mundialmente predilecta aplicación para el dispositivo móvil. Como excusa diré me producía curiosidad analizar como se adaptaba, manteniendo su esencia u objetivos, un producto dirigido a utilizarse preferentemente desde tu smartphone a una interfaz más “tradicional” como es el formato desktop de la web, visto desde un ordenador.

Un punto a destacar a la hora de analizar este producto, es que no tengo experiencia previa de uso de la interfaz de TikTok, pero si tengo experiencia en interfaces y visualización de contenido similar.

Dicho esto, ¡Empezamos con el análisis heurístico!

OBJETIVO DE ANÁLISIS

Evaluar la web de TikTok España de acuerdo con los 10 principios de Nielsen.

https://www.tiktok.com/es/ visto desde MacBook Pro (dispositivo con sistema operativo IOS), pantalla externa de 32 pulgadas BenQ PD2700U.

METODOLOGÍA

1-. Reunir la lista de heurísticas y subheurísticas en formato cheklist e identificar cuáles reglas y principios de Nielsen se cumplen y cuáles no.

2-. Indicar el grado de gravedad del problema a partir de tres parámetros:

  • FRECUENCIA con la que nos encontramos con el problema.
  • IMPACTO a causa del problema al usuario; relevancia en la afecta al uso del producto.
  • PERSISTENCIA del problema; en qué medida afecta al uso progresivo del producto.

Puntuación de gravedad según la siguiente tabla:

3-. Organizar el análisis en función la gravedad de las malas prácticas encontradas.

ANÁLISIS

  • Reconocimiento antes que recuerdo

Para promover el reconocimiento y evitar que los usuarios memoricen sus acciones o elementos al desplazarse por el sistema, vemos cómo se muestra información junto a los iconos o cuando se realiza se pasa el ratón por encima de estos.

Podemos ver bajo los videos una barra de progreso que nos indica la parte del vídeo en la que nos encontramos y cuanto queda para que este acabe y salte al siguiente.

Mala práctica: Solo en la home podemos ver, señalado en el menú, en que parte de la web nos encontramos. En cuanto entramos en el modo de visualización, al tratarse de contenidos muy similares entre “Siguiendo”,“Para ti” y “Explorar”, no queda claro a qué categoría corresponde el contenido que estamos visualizando en ese momento. Una propuesta de mejora sería incorporar algún elemento o el nombre de la categoría en algún lugar de la pantalla para que el usuario pueda intensificarla. PUNTUACIÓN: 9

 

  • Flexibilidad y eficiencia de uso

En el menú nos encontramos con la categoría “Para ti”. En esta categoría la plataforma propone contenido según las preferencias del usuario. Con el contenido personalizado existe una mayor posibilidad de satisfacer al usuario de manera rápida.

Según la luminosidad del ambiente, en el panel de ajustes, el usuario puede activar o desactivar el modo oscuro según como este lo prefiera.

La interfaz propone alternativas para agilizar acciones frecuentes. Un claro ejemplo serían las teclas de acceso rápido como la tecla de “espacio” para realizar la acción de Play/Pause cuando se está reproduciendo un video.

Mala/Buena práctica: A pesar de que la plataforma propone atajos simples e intuitivos, no permite al usuario personalizar dichos accesos rápidos o atajos según la conveniencia del usuario. Quizás, como ejemplo, el usuario prefiera utilizar teclas más fáciles de controlar con la mano izquierda. En este caso, como propuesta de mejora, podría habilitarse la elección de teclas para atajos, gestionada en ajustes. PUNTUACIÓN: 6.

TikTok, a diferencia de otras aplicaciones de entretenimiento o RRSS, reduce la toma de decisiones. Esto limita la libertad del usuario para personalizar el uso de la interfaz, pero a la vez le aporta mayor sensación de seguridad. El usuario tan solo ha de dejarse llevar, y dejar que pasen los videos, uno tras otro, esperando que el siguiente le satisfaga más que el anterior. No tiene casi de elegir que ver perder tiempo tomando decisiones para personalizar su experiencia. Todo es simple, fácil, diferente, pero repetitivo.

 

  • Visibilidad del estado del sistema

Tras realizar varias acciones, antes y tras iniciar sesión, vemos como la interfaz ofrece retroacción y confirmación sobre las acciones realizadas por parte del usuario. En todo momento, el usuario puede cerciorarse si ha iniciado sesión con su cuenta, ya que al realizar cualquier acción trascendente nos aparece en pop-up un cuadro de diálogo informándonos que para ver o realizar ciertas acciones iniciemos sesión. También podemos recibir feedback visual sobre acciones como seguir o dar “like”; si clicamos en el botón de “seguir”, si hemos iniciado sesión, el botón cambia de color a gris con el texto “siguiendo”. Al clickar de nuevo en el botón “siguiendo”, este cambiará de nuevo de color y se convertirá de nuevo en el botón de “seguir”.

También, a través del menú se señala en que lugar de la web donde nos encontramos.

 

  • Coincidencia entre el sistema y el mundo real

Conceptos, íconos e imágenes siguen las convenciones del mundo real, podemos intuir o comprender rápidamente como funciona la interfaz. Como ejemplo, vemos como el botón de buscar está representado con una “lupa”. Además, vemos la posibilidad de adaptar la web, así como su mensaje e instrucciones a diferentes idiomas.

Los atajos o comandos a aprender son simples y parten de conceptos y expresiones ya popularizadas como: Utilizar la tecla “M” para mutear la reproducción o la tecla “L” para dar “like”.

 

  • Control y libertad del usuario

La aplicación permite corregir en todo momento acciones no deseadas y ofrece confirmación para prevenir que el usuario realice acciones por error. Vemos como haciendo doble click en el mismo botón, podemos deshacer la misma acción realizada con el primer click. Un ejemplo de esto, sería el botón de seguir o el de “like”. Vemos también que en el caso de escribir un comentario no deseado, podemos eliminarlo. Los comandos o atajos también nos permiten volver a visualizar videos que hemos “pasado” sin querer o que simplemente queremos volver a visualizar. Esto ofrece al usuario la sensación de seguridad y cierto control.

 

  • Consistencia y estándares

Encontramos iconos y lenguajes ya utilizados propios de las RRSS con los que el usuario se ha podido ir familiarizando, este es el caso del icono del corazón, para indicar que un contenido le ha gustado o el icono de compartir. También, encontramos iconos más reconocibles, como la utilización del buscador, señalado con un icono de lupa; la opción de “ajustes”, señalado con un icono de engranaje; o la “X” como elemento con el significado de cerrar.

Los atajos o comandos a aprender son simples y parten de conceptos y expresiones ya popularizadas como: Utilizar la tecla “M” para mutear la reproducción o la tecla “L” para dar “like”.

Esto ayuda al usuario a reconocer, a entender y en caso de aprender, a hacerlo con más rapidez y facilidad.

 

  • Prevención de errores

Al realizar diferentes acciones de carácter relevante como cerrar sesión o cambiar algún ajuste de la cuenta nos encontramos con mensajes que piden confirmación sobre las acciones realizadas. Esto evita que el usuario realice cambios y acciones más relevantes por error y permite deshacer dicha acción en caso de no ser deseada.

También nos encontramos con formularios que se comprueban a tiempo real y te indican el error y cómo solucionarlo. En la mayoría de formularios, bajo el espacio a rellenar, encontramos aclaraciones sobre el contenido, de esta manera, antes de rellenarlos y equivocarse, el usuario obtiene una idea sobre la información a rellenar.

 

  • Diseño estético y minimalista

Lo importante y llamativo de TikTok son los vídeos, es lógico que por ese motivo veamos una web de estética simple. Tan solo vemos la utilización de dos tonos y un color (gris, negro y rojo) y misma tipografía en diferentes pesos y tamaños.

Vemos iconos simples y una lista horizontal con temáticas genéricas a modo de filtros. También podemos buscar el contenido a través del buscador.

 

  • Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores

Al realizar diferentes acciones, como en el caso cambiar el nombre de usuario, nos encontramos  con formularios que se comprueban a tiempo real y te indican el error y cómo solucionarlo.  También nos encontramos con mensajes de error en caso de querer reproducir contenido sin estar logueados o en caso de Error de red.

 

  • Ayuda y documentación

En la plataforma encontramos aclaraciones y explicaciones adicionales que ayudan a los usuarios a entender cómo realizas y completar sus tareas.

Vemos guías de cómo hacer uso de los atajos y comandos y una sección dedicada exclusivamente a ayudar y a comentar estas ciertas dificultades que el usuario pueda llegar tener.

 

BIBLIOGRAFÍA

Amorín, D. (s.f.). 10 principios de usabilidad. Recuperado de https://diegoamorin.com/10-principios-usabilidad/ (Acceso: 17 de noviembre de 2023).
Quadern Usabilitat Recursos UOC. (s.f.). Página de Inicio. Recuperado de http://quadern-usabilitat.recursos.uoc.edu/es/ (Acceso: 17 de noviembre de 2023).
Design Toolkit UOC. (s.f.). Evaluación Heurística. Recuperado de http://design-toolkit.uoc.edu/es/evaluacion-heuristica/ (Acceso: 17 de noviembre de 2023).
Design Toolkit UOC. (s.f.). Guía de Evaluación Heurística. Recuperado de http://design-toolkit.uoc.edu/es/guia/evaluacion-heuristica/ (Acceso: 17 de noviembre de 2023).
Entrega de la actividad R2. Lliurament de l'activitat R2

Debate

No hay comentarios.

R2_T1_Evaluación Heurística Juego HEARTHSTONE

Socrates de la Encarnacion Pascual
Visibilidad: Pública - - comentario en R2_T1_Evaluación Heurística Juego HEARTHSTONE
R2_T1_Evaluación Heurística Juego HEARTHSTONE

R2_T1_Evaluación Heurística Juego HEARTHSTONE

Socrates de la Encarnacion Pascual
Visibilidad: Pública - - comentario en R2_T1_Evaluación Heurística Juego HEARTHSTONE
INTRODUCCIÓN En el mundo de los juegos digitales, la experiencia del usuario desempeña un papel crucial para la satisfacción y la retención…
INTRODUCCIÓN En el mundo de los juegos digitales, la experiencia del usuario desempeña un papel crucial para la satisfacción…

INTRODUCCIÓN

En el mundo de los juegos digitales, la experiencia del usuario desempeña un papel crucial para la satisfacción y la retención de los jugadores. En este contexto, los juegos de cartas digital «Hearthstone» ha ganado popularidad por su mezcla única de estrategia y fantasía. Para comprender plenamente la calidad de la experiencia del usuario en este juego, se va analizar mediante los 10 principios heurísticos propuestos por Jakob Nielsen.

Estos principios heurísticos son directrices fundamentales que se utilizan para evaluar la usabilidad y la experiencia general del usuario en diversas interfaces.

Se ha escogido este juego ya que es único que juego hoy en día, te permite jugar partidas sueltas en momentos como el café, antes de dormir, en el desayuno sin la necesidad de invertir gran tiempo en él. Dentro del propio juego, nos centraremos en una sección en concreta:
“Campos de batalla”: modo al que hago referencia dentro del propio juego

A través de un análisis detallado de la interfaz de Hearthstone, se examinará cómo se aplican estos principios, identificando posibles áreas de mejora y destacando los aspectos donde el juego brilla en términos de usabilidad.

 

METODOLOGÍA

Para realizar esta tarea se van a identificar los 10 principios comentados en la sección anterior.

Posteriormente se van a ver las buenas y malas praxis en cada uno de estos principios acompañados de fotos y de propuestas de mejora.

También se comentará de manera visual la gravedad del 1-10 de cada principio y su utilización para el posterior ranking.

Al final del documento se hará un ranking del top 3 principios a mejorar debido a sui calidad/importancia.

 

 

Una vez introducida la actividad comencemos con el análisis:

1. Visibilidad del estado del sistema:

El sistema debe mantener informado al usuario sobre lo que está ocurriendo en la web a cada momento.

Hay que tratar de no dejar a los usuarios pensando “¿Qué está pasando ahora?”

Praxis positivas: Existen ruedas que hacen analogías a los relojes y el paso del tiempo. También aparecen tiempos que quedan para comenzar los combates. Se utiliza una rueda como en las «tragaperras» para hacer hincapié en que se busca y se está encontrando algo.


Praxis negativas: No existe en pantallas de cargar y restauraciones de conexión tiempos de carga aproximados.

Propuestas de mejora: Añadir tiempos de carga de manera visual mediante números. Aunque se inventen, para dejar tranquilo al usuario.

GRAVEDAD:  2

 

2. Consistencia entre el sistema y el mundo real:

El sistema tiene que hablar el idioma del usuario. Se debe utilizar palabras, frases y conceptos que le sean familiares.

Es recomendable que el diseño siga las convenciones del mundo real y se pueda intuir o comprender rápidamente cómo funciona la interfaz.

Ejemplos:

  • Transcripción o adaptación de un mensaje de un idioma a otro.
  • El botón de “buscar” representado con una “lupa”.
  • El término 404 por un mensaje como “Página no encontrada”.

Praxis positivas: El juego utiliza lenguajes no verbales adecuados para entenderse con el usuario. Podemos observar en la imagen como recurren a la corona para la clasificación, la bolsa de dinero para la tienda y el libro para la colección. Las cartas y habilidades tienen nombres y descripciones que reflejan sus funciones de manera intuitiva.

Praxis negativas: Algunas habilidades tienen términos confusos o nombres que no se alinean con su efecto, generando confusión entre los jugadores.

Propuestas de mejora: Añadiría una sección de conceptos y diccionario del juego. Aunque se utilice el castellano, la formación de palabras que conocemos resultan ser mecánicas importantes de saber en el propio juego. Un glosario con esta información sería muy útil.

GRAVEDAD:  3

 

 

3. Control y libertad del usuario:

Los usuarios suelen realizar acciones por error. Siempre debe existir una “salida de emergencia” para revertir una acción no deseada.

Ofrece al usuario el control de la plataforma para que se sienta seguro. Una forma sencilla es agregar la funcionalidad de “rehacer” y “deshacer”

Ejemplos:

  • Aplicar y borrar filtros al comprar productos.
  • Deshacer una acción de creación de carta.
  • Quitar elementos de un carrito de compras.

Praxis positivas: El juego te permite rehacer compras con monedas virtuales en la mayoría de los casos. En los que no te dejan te hacen un aviso previo. Además cuando se realizan compras con dinero real la pasarela de pago es muy formal y el usuario es consciente del dinero involucrado y el pago en sí.



Praxis negativas: No destaco en este apartado mala praxis, son muy cuidadosos a la hora de la compra ya sea virtual o real.

GRAVEDAD:  0

 

 

4. Consistencia y estándares:

Los usuarios no deben verse obligados si diferentes palabras, situaciones o acciones significan lo mismo. Se debe seguir las convenciones establecidas en la plataforma y la industria.

Mantener una interfaz coherente en términos de diseño, estilo y comportamiento.

Hay que asegurar que las convenciones de diseño sean uniformes para evitar confusiones.

Recomendaciones:

  • Mantener las convenciones establecidas por la industria (“X” para cerrar, “Lupa” para buscar, etc.)
  • Mantener la consistencia interna, gracias a Atomic Design.

Praxis positivas: El juego utiliza las recomendaciones comentadas como la lupa y cerrar de manera correcta, además de otros estándares como quitar y poner sonido, idiomas o rehacer acción. Se muestran 2 ejemplos.

Praxis negativas: En botones como «atrás» situados abajo a la derecha no existe una X típica roja para cerrar como se indica en la recomendación. Es más frecuente este estilo a la hora de abandonar pantallas en los juegos.

Propuestas de mejora: Añadiría ese botón en forma circular con una X en medio rojo/blanco respectivamente para sumar al botón de «atrás» que aunque sea auto explicativo es más usual el otro.

GRAVEDAD:  3

 

 

5. Prevención de errores:

Los buenos mensajes de error son importantes. Pero mejor aún, es crear un diseño que evite que los errores ocurran.

Implementar mecanismos para evitar acciones incorrectas por parte de los jugadores.

Proporcionar confirmaciones y salvaguardias para prevenir errores graves.

Ejemplos:

  • Los «placeholders» en campos de texto, donde aclaran la acción que debemos realizar.
  • La comprobación de campos de un formulario en tiempo real.
  • Posibilidad de confirmación ante ciertas acciones

Praxis positivas: Te permite la acción de deshacer en errores importantes como «vender» una carta legendaria.


 

Praxis negativas: No te indica si el amigo al que quieres agregar existe o no antes de enviar la supuesta solicitud de amistad.

Propuestas de mejora: Antes de que salga ese error, indicar en el propio formulario que algo está mal y no se encuentra ese usuario en la BBDD del juego.

GRAVEDAD:  3

 

 

6. Reconocimiento antes que recuerdo:

Priorizar la presentación de información sobre recordar detalles específicos.

Las interfaces deben promover el reconocimiento y evitar que los usuarios memoricen sus acciones o elementos al desplazarse por el sistema. Algunas preguntas que te pueden ayudar son: ¿Conoce el usuario de donde viene y a donde va? ¿El usuario tiene que recordar cosas para entender lo que esta pasando? y ¿Cómo lo ayudamos a recodar?
Facilitando a los jugadores la identificación de opciones y acciones disponibles en cada momento.

Ejemplos:

  • Historial de reproducciones de YouTube.
  • Pasarela de pagos que te muestra en que paso de la compra te encuentras.
  • Barra de progreso que muestra en que parte de un video o lección de un curso te has quedado.

Praxis positivas: Las opciones de juego, como las cartas en la mano, son siempre visibles para que los jugadores reconozcan rápidamente sus posibilidades. También el dinero que tienen. En progresos diarios/semanales te indican que % del total  llevas en forma de fracción como se observa en la imagen.

A la hora de crear un mazo tipo (hechos por jugadores profesionales) te indica cuánto te falta para acabar el mazo.

 

Praxis negativas: Los jugadores deben recordar las habilidades específicas de ciertos personajes, ya que no se proporciona información detallada durante el juego.

Propuestas de mejora: No consigo identificar una mejora para la parte negativa ya que es una parte muy frenética y no tiene sentido explicar paso a paso durante el combate (online) como y porque las cartas se van modificando. Esto se va aprendiendo y entendiendo a medida que se juega.

GRAVEDAD:  1

 

7. Flexibilidad y eficiencia en el uso:

Permitir a los jugadores realizar acciones de manera eficiente y personalizada.
Ofrecer atajos y opciones de personalización para adaptarse a diferentes estilos de juego.

La clave es la personalización tanto del contenido como de la funcionalidad para cada usuario.

Ejemplos:

  • El reingreso a la app de Spotify te muestra las playlists que escuchas frecuentemente.
  • Play/Pause con la tecla “espacio” en reproductores de video o música.

Praxis positivas: Los jugadores a la hora de jugar en  «Estándar» les sale los mazos más utilizados.

Praxis negativas: La falta de opciones de personalización y atajos dificulta la eficiencia para jugadores con estilos de juego únicos. A la hora de crear mazos no se recuerdan las cartas más usadas o favoritas.

Propuestas de mejora: Indicar y poder anotar las cartas favoritas de cada jugador para que luego sea más fácil encontrarlas.

GRAVEDAD:  6

 

 

8. Diseño estético y minimalista:

Buscar un equilibrio entre un diseño estéticamente agradable y una interfaz minimalista. Evitar la sobrecarga de información visual para no abrumar a los jugadores.

Cada elemento extra compite con la información relevante y disminuye su visibilidad. Recuerda, menos es más. Responde a estas preguntas: ¿Qué necesita mi usuario? ¿Qué valor le aporta lo que le estoy mostrando?

Ejemplos:

  • La página principal de Apple muestra solo los productos que desean destacar.
  • El buscador de Google solo muestra un campo de texto y un par de botones, no todos sus servicios.

Praxis positivas: Utilizan unas pantallas sencillas, atractivas y minimalistas. Sobre todo en los flujos del menú pre-partida. Se muestran a continuación pantallas de la principal y la de previa a la partida.

Praxis negativas: Durante el combate y la partida hay demasiado frenesí, colores, interacciones y efectos que hace que el usuario se pueda sentir abrumado. A veces molesta y distrae.

Propuestas de mejora: Poder personalizar lo que sale y lo que no en la partida además de poder silenciar a los jugadores para no molestar la parte visual y no distraer.

GRAVEDAD:  3

 

 

 

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

Proporcionar retroalimentación clara sobre los errores cometidos. Facilitar la recuperación ofreciendo opciones para corregir acciones incorrectas.

Gracias a los principios anteriores podemos evitar en gran medida que el usuario cometa un error, pero los errores son inevitables. Como solución, busquemos la manera de que estos mensajes sean visibles para que los usuarios puedan reconocerlos.

Ejemplos:

  • Si inicias sesión en Facebook y colocas un dato erróneo, la app te explicará en que puedes estar fallando.
  • Cuando existen productos agotados, la web muestra un mensaje de cuando se reabastecerá el producto y además tienes la opción de ser notificado cuando el producto este nuevamente disponible.

Praxis positivas: Se proporcionan mensajes de error claros cuando una acción no puede realizarse. Cuando se quiere hacer una compra y no se tienen los recursos se te indica.

 

Praxis negativas: No he encontrado ya que apenas se pueden cometer errores durante la partida o navegando por el menú y ajustes.

GRAVEDAD:  0

 

 

10. Ayuda y documentación:

Lo ideal es que un sistema no necesite ninguna explicación adicional. Pero en algunos casos, se debe proporcionar una documentación para ayudar a los usuarios a entender cómo completar sus tareas.

El contenido de ayuda y documentación deben ser fáciles de encontrar y tener pasos definidos de manera concisa (es decir, corto no extenso).

Ejemplos:

  • Sección de Preguntas frecuentes (FAQs).
  • Minitours en la primera visita del usuario a una interfaz.
  • Chats de ayuda o chatbots.
  • Tutorial o guías para herramientas web.

 

Praxis positivas: No he encontrado ninguna sección destacable a favor a cerca de este principio que considero tan importante.

Praxis negativas: La imagen muestra los ajustes como tal. Si bien sale lo de «Privacidad» no sale el apartado tan importante de «FAQs».

Propuestas de mejora: Indicar un apartado de preguntas frecuentes y otro (mediante enlace o parecido) a cerca de tutoriales a un canal de Youtube o algo similar

GRAVEDAD:  10

 

 

 

RANKING

En función del análisis previos y sobre todo fijándose en orden de gravedad de cada uno considero que los principios y por ende apartados más importantes son en orden de importancia de mayor a menor…

1ER LUGAR: Ayuda y documentación (10)

2ND LUGAR: Flexibilidad y eficiencia en el uso (6)

3ER LUGAR: Consistencia y estándares (3)

(en este último puesto podría haber incluido cualquiera de 3 puntos pero considero este entro todos ellos el más importante).

REFLEXIÓN:

La aplicación efectiva de los principios heurísticos de Nielsen en el modo «Campos de Batalla» dentro Hearthstone es vital para que garantice una experiencia de juego intuitiva y satisfactoria a nosotros, los jugadores. La coherencia en el diseño, la visibilidad clara del estado del juego y la prevención de errores son elementos clave para fomentar la participación del usuario. Sin embargo, la falta de consistencia, la interferencia visual innecesaria comentada anteriormente y la ausencia de información crucial pueden conducir a frustraciones y obstáculos para la experiencia del jugador. Sobre todo en jugadores primerizos. En última instancia, la atención cuidadosa a estos principios no solo mejora la usabilidad, sino que también contribuye a la retención y satisfacción duraderas de los usuarios en el mundo competitivo de los juegos digitales.

 

Sócrates de la Encarnación Pascual

17/11/2023

BIBLIOGRAFÍA:

Serafinelli, S. (2023, 25 octubre). Los 10 principios heurísticos de Nielsen explicados con ejemplos. TeaCup Lab. https://www.teacuplab.com/es/blog/los-10-principios-heuristicos-de-nielsen-explicados-con-ejemplos/
Design Toolkit. http://designtoolkit.recursos.uoc.edu
Amorin, D. (2023, 8 septiembre). 10 Principios de usabilidad de Nielsen (con ejemplos). Diego Amorin. https://diegoamorin.com/10-principios-usabilidad/
colaboradores de Wikipedia. (2023, 19 septiembre). Heurística. Wikipedia, la enciclopedia libre. https://es.wikipedia.org/wiki/Heur%C3%ADstica
Entrega de la actividad R2

Debate

No hay comentarios.

EVALUACIÓN HEURÍSTICA DE LA WEB ‘ZALANDO PRIVÉ’

Oriol Llados Salazar
Visibilidad: Pública - - comentario en EVALUACIÓN HEURÍSTICA DE LA WEB ‘ZALANDO PRIVÉ’

EVALUACIÓN HEURÍSTICA DE LA WEB ‘ZALANDO PRIVÉ’

Oriol Llados Salazar
Visibilidad: Pública - - comentario en EVALUACIÓN HEURÍSTICA DE LA WEB ‘ZALANDO PRIVÉ’
INTRODUCCIÓN En esta publicación se realizará una Evaluación Heurística del proceso de compra en la página web de Zalando Privé. He seleccionado…
INTRODUCCIÓN En esta publicación se realizará una Evaluación Heurística del proceso de compra en la página web de Zalando…

INTRODUCCIÓN

En esta publicación se realizará una Evaluación Heurística del proceso de compra en la página web de Zalando Privé. He seleccionado esta interfaz debido a que se trata de una tienda online con elementos y procesos que difieren ligeramente de lo habitual en este tipo de webs. Además es una web con la que ya estoy familiarizado como usuario, por lo que la Evaluación Heurística será aún más precisa y completa.

 

METODOLOGÍA

Esta Evaluación se ha llevado a cabo mediante un análisis general previo de la herramienta a evaluar. Seguidamente, se ha realizado un análisis más concreto del proceso a estudiar (en este caso el proceso de compra dentro de la web), indagado paso por paso en este, detectando y puntualizando un hallazgo para cada uno de los principios de Nielsen y clasificando cada uno de los hallazgos según si el principio se usaba correctamente o no. Finalmente se ha elaborado un listado de los errores detectados en el anterior punto, clasificándolos según su gravedad y proponiendo soluciones y mejoras para corregirlos.

 

PRINCIPALES HALLAZGOS EN BASE A LOS 10 PRINCIPIOS HEURÍSTICOS DE NIELSEN

 

LISTADO DE ERRORES SEGÚN SU GRAVEDAD

 

 

Lliurament de l'activitat R2

Debate

No hay comentarios.

Avalucio Heuristica de rcarecords.com

Isaura Almar Rios
Visibilidad: Pública - - comentario en Avalucio Heuristica de rcarecords.com

Avalucio Heuristica de rcarecords.com

Isaura Almar Rios
Visibilidad: Pública - - comentario en Avalucio Heuristica de rcarecords.com
Benvinguts a la meva avaluació heurística de la plataforma web de RCA Records. És emocionant explorar i avaluar la usabilitat i el…
Benvinguts a la meva avaluació heurística de la plataforma web de RCA Records. És emocionant explorar i avaluar la…

Benvinguts a la meva avaluació heurística de la plataforma web de RCA Records. És emocionant explorar i avaluar la usabilitat i el disseny d’aquesta influent discogràfica. Amb més de [menciona el nombre d’anys, si ho saps] d’història, RCA Records es converteix en la segona discogràfica més antiga del món. No només això, sinó que ha guanyat recentment el reconeixement d’Awwwards amb el guardó SOTD (Site of the Day) al mes d’abril del 2023.

En aquesta revisió detallada, exploraré en profunditat els elements de la interfície d’aquest lloc web, avaluant la seva conformitat amb els principis de disseny i usabilitat.

La pàgina web de RCA Records és un element clau dins la indústria musical i la seva història innovadora és innegable. Amb aquesta avaluació, l’objectiu és analitzar la interfície actual, identificar punts forts i àrees d’oportunitat, i oferir suggeriments per a futures millores.

Durant aquesta anàlisi, exploraré la navegació, la coherència visual, la facilitat d’ús i altres aspectes rellevants que configuren l’experiència dels usuaris en aquest lloc web. La meva intenció és proporcionar una visió crítica i constructiva que ajudi a RCA Records a millorar la seva plataforma web per continuar sent un referent en el món de la música.

Us convido a acompanyar-me en aquest recorregut mentre explorem la interfície de la pàgina web de RCA Records des d’una perspectiva centrada en l’experiència de l’usuari, amb l’objectiu de promoure un entorn més eficient, atractiu i satisfactori per als seus visitants.

Mètode

Per dur a terme la recopilació de les troballes en l’avaluació heurística, s’ha creat una llista de verificació, la qual es troba disponible en aquest enllaç: https://www.canva.com/design/DAFz9g2LWB4/cZ9ojo-9HB1KDiv2U6_1_Q/edit?utm_content=DAFz9g2LWB4&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton. Aquesta llista serveix com a guia durant el procés d’avaluació, ajudant a identificar els punts clau de manera sistemàtica i detallada:

Un cop s’ha identificat un punt essencial de la heurística, s’ha desenvolupat un sistema d’avaluació específic. Aquest sistema es basa en la freqüència, la gravetat i la importància de la funcionalitat, permetent una mesura quantitativa de les troballes. Aquest enfocament mètric proporciona una manera estructurada de classificar les troballes, alliberant una anàlisi detallada i, finalment, facilitant la formulació de recomanacions de millora precises i fonamentades en dades concretes.

La freqüència en una avaluació heurística es refereix a la probabilitat o la freqüència amb què els usuaris podrien trobar-se amb un problema específic. Si una troballa té una alta freqüència, significa que és una situació comuna o que molts usuaris podrien experimentar-la amb regularitat. En contraposició, una freqüència baixa indica que és una situació poc habitual, que només uns pocs usuaris podrien trobar en circumstàncies específiques. És important considerar la freqüència per prioritzar les millores i correccions, ja que els problemes més freqüents poden tenir un impacte més gran en l’experiència global dels usuaris.

  1. Molt improbable: Només uns pocs usuaris en situacions molt rares o específiques.
    2.- Poc probable.
    3.- Moderadament probable.
    4.- Bastant probable.
    5.- Molt probable: Situació que es dona amb molta freqüència i afecta una gran quantitat d’usuaris.

La gravetat d’una troballa o descoberta en una avaluació heurística representa la seva seriositat o la magnitud de l’impacte que pot tenir en l’experiència de l’usuari o en el funcionament del sistema. Quan es determina la gravetat, es considera la importància relativa d’aquesta troballa en termes de quanta afectació pot tenir sobre la interacció dels usuaris o sobre la consecució dels seus objectius. Una gravetat alta indica problemes crítics o situacions que poden causar grans obstacles o confusions, afectant negativament la experiència d’usuari, mentre que una gravetat baixa indica problemes menys crítics o amb un impacte menor.

  1. Molt baixa: Impacte mínim o sense conseqüències greus per als usuaris.
  2. Baixa
  3. Moderada
  4. Alta
  5. Molt alta: Impacte greu que afecta de manera significativa la experiència dels usuaris o impedeix completament la realització de les seves tasques.

La importància de la funcionalitat es refereix al valor relatiu o la necessitat que té una determinada característica o funció dins del context d’una aplicació, sistema o producte. Es tracta de determinar quin és l’impacte o la rellevància d’aquesta funcionalitat per a l’usuari final o per al funcionament general del sistema. Aquesta importància pot variar segons les necessitats dels usuaris, els objectius del sistema o la seva relació amb altres funcions.

  1. Molt Baixa: Funcionalitat poc rellevant que no afecta significativament l’ús o la satisfacció de l’usuari.
  2. Baixa: Funcionalitat que aporta valor addicional, però no és essencial per a la majoria dels usuaris.
  3. Moderada: Funcionalitat rellevant que pot millorar l’experiència de l’usuari o afegir valor al sistema.
  4. Alta: Funcionalitat essencial que és important per als usuaris i és clau per a la interacció o el funcionament del sistema.
  5. Molt Alta: Funcionalitat crítica, imprescindible per al sistema o que té un impacte substancial en l’ús i la satisfacció de l’usuari, sense la qual el sistema seria significativament menys útil o complet.

Avaluació Heurística

1: Visibilitat de l’estat del sistema

El disseny sempre ha de mantenir els usuaris informats sobre el que està succeint, mitjançant una retroalimentació adequada en un temps raonable.

Descobriment 1: Mal Exemple
Descripció:

La animació de so es mou quan no hi ha cap reproducció en curs, cosa que pot donar la falsa impressió que el so està actiu.

Idea de millora:

La millora podria consistir en mostrar un botó de reproducció tipus ‘play’ quan cap cançó està sonant, mentre que l’animació actual només s’utilitzaria quan hi ha música reproduint-se.

Avaluació:
  • Freqüència: 4/5
  • Gravetat: 2/5
  • Importància de la funcionalitat:  5/5

Descobriment 2: Bon Exemple
Descripció:

En els carrusels amb cartes es pot distingeix una carta tallada per la delimitatico de la pantalla, tot i que anivell visual

Idea de millora:

Incloure una retroalimentació visual similar en tots els elements podria ajudar a proporcionar una experiència més coherent i intuitiva als usuaris, eliminant confusions i millorant la usabilitat del sistema.

Avaluació:
  • Freqüència: 4/5
  • Gravetat: 2/5
  • Importància de la funcionalitat:  5/5

2: Adequació entre el sistema i el món real

El disseny ha de parlar el llenguatge dels usuaris. Utilitza paraules, frases i conceptes familiars a l’usuari, en lloc de jerga interna. Segueix les convencions del món real, fent que la informació aparegui en un ordre natural i lògic.

Descobriment 3: Mal Exemple
Descripció:

En les targetes, els enllaços als articles es proporcionen només a través de les imatges i del text subratllat. Això pot causar confusió a l’usuari, ja que l’ús d’una línia delimita les targetes pot donar la sensació d’un únic element. Això també pot ser problemàtic si l’usuari no fa clic al punt específic desitjat.

Idea de solució:

Que el link sigui la tarjeta en si.

Avaluació:
  • Freqüència: 3/5
  • Gravetat: 4/5
  • Importància de la funcionalitat:  3/5
Descobriment 4: Bon Exemple
Descripció:

Es fa serir graphics que imiten als botons de control d’una taula de punchar.

Idea de solució:

En aquest escenari, els botons es troben inactius ja que cap opció està seleccionada. Una millora proposada seria utilitzar elements gràfics que imitin la funcionalitat dels LED que indicin cuan hi ha so actiu.

Avaluació:
  • Freqüència: 2/5
  • Gravetat: 1/5
  • Importància de la funcionalitat:  2/5

3: Llibertat i control per part de l’usuari

Els usuaris sovint realitzen accions per error. Necessiten una «sortida d’emergència» clarament indicada per abandonar l’acció no desitjada sense haver de passar per un procés estès.

Descobriment 5: Mal Exemple
Descripció:

En fer clic al botó ‘Veure rols oberts’, s’accedeix a la secció de rols oberts. No obstant això, en cas d’haver realitzat aquesta acció per error, pot resultar confús per a l’usuari tornar al punt anterior.

Idea de millora:

Una possible solució podria ser implementar un botó o enllaç de «Tornar » que redireccioni l’usuari a la secció anterior des d’on va accedir al apartat de «open roles». Això permetria una navegació més intuïtiva i senzilla perquè l’usuari pugui retrocedir fàcilment si ha accedit a la secció incorrecta per error.

Avaluació:
  • Freqüència: 1/5
  • Gravetat: 2/5
  • Importància de la funcionalitat:  1/5
Descobriment 6: Bon Exemple
Descripció:

 

Idea de millora:
Avaluació:
  • Freqüència: 1/5
  • Gravetat: 4/5
  • Importància de la funcionalitat:  4/5

4: Consistència i estàndards

Els usuaris no haurien de qüestionar-se si diferents paraules, situacions o accions volen dir el mateix. Segueix les convencions de la plataforma i la indústria.

Descobriment 7: Mal Exemple
Descripció:

Inconsistència en la reacció de la icona del ratolí en diferents elements. La icona, de forma circular, presenta comportaments diversos al passar per sobre de diversos elements de la interfície. En alguns casos, reacciona sense grans canvis, generant una sensació de ser clicables; en altres, es transforma en un cercle gegant, canvia de color i mostra el text ‘GO’, mentre que en altres elements no experimenta canvis, malgrat ser enllaços o elements interactius, la qual cosa pot provocar una confusió sobre la seva funcionalitat.

Idea de millora:

Incloure una retroalimentació visual similar en tots els elements podria ajudar a proporcionar una experiència més coherent i intuitiva als usuaris, eliminant confusions i millorant la usabilitat del sistema.

Avaluació:
  • Freqüència: 4/5
  • Gravetat: 2/5
  • Importància de la funcionalitat:  5/5
Descobriment 8: Bon Exemple
Descripció:

Les etiquetes defineixen la categoria de cada element. Totes tenen la mateixa tipografia i un punt al davant, però es distingeixen pel color. En l’exemple següent, observem ‘ALBUMS’ en vermell i ‘SINGLE’ en groc.

Idea de millora:

una millora podria ser mantenir la Incorporacio d’icones o símbols específics podria reforçar la comprensió i la identificació del contingut, millorant la navegació i l’experiència d’usuari.

Això podria proporcionar una identificació més ràpida i fàcil dels diferents tipus d’elements, fins i tot per aquells usuaris amb dificultats de percepció del color.

Avaluació:
  • Freqüència: 1/5
  • Gravetat: 1/5
  • Importància de la funcionalitat:  3/5

5: Prevenció d’errors

Les bones missatges d’error són importants, però els millors dissenys eviten amb compte que es produeixin problemes en primer lloc. Elimina les condicions propenses a errors o verifica-les i presenta als usuaris una opció de confirmació abans que es comprometin amb l’acció.

Descobriment 9: Mal
Descripció:

En la secció d’ofertes de treball, no hi ha res mostrat. Aquesta absència d’informació pot crear confusió sobre si és un error, si no hi ha ofertes disponibles o si s’estan carregant en aquest moment.

Idea de millora:

Per evitar la confusió, seria beneficiós afegir un missatge temporal explicatiu que indiqui si en aquest moment no hi ha ofertes de treball disponibles o si la secció encara s’està carregant. Això proporcionaria claredat als usuaris sobre l’estat actual de la secció d’ofertes laborals.

Avaluació:
  • Freqüència: 1/5
  • Gravetat: 5/5
  • Importància de la funcionalitat:  1/5
Descobriment 10: Bon Exemple

No he trobat cap exemple adequat d’aquesta heurística a la pàgina web que estic avaluant.

6: Reconeixement abans que record

Minimitza la càrrega de memòria de l’usuari fent que els elements, accions i opcions siguin visibles. L’usuari no hauria de recordar informació d’una part de la interfície a una altra. La informació necessària per utilitzar el disseny (p. ex., etiquetes de camps o elements de menú) ha de ser visible o fàcil de recuperar quan sigui necessària.

 

Descobriment 11: Mal Exemple
Descripció:

Idea de millora:

 

Avaluació:
  • Freqüència: /5
  • Gravetat: /5
  • Importància de la funcionalitat:  /5
Descobriment 12: Bon Exemple
Descripció:

En aquest cas, tenim una taula de mescles que representa la taula de mescles de la vida real. Un usuari familiaritzat amb aquest tipus de taula no haurà de aprendre res de nou ja que la disposició i funcionalitats són molt similars a les d’una taula de mescles convencional.

Idea de millora:

er millorar l’experiència, podrien proporcionar-se opcions de personalització a la taula de mescles per permetre als usuaris adaptar-la segons les seves preferències. Això podria incloure la capacitat de canviar la disposició dels controls o ajustar les preferències d’àudio per proporcionar una experiència més adaptable i personalitzada

Avaluació:
  • Freqüència: 2/5
  • Gravetat: 1/5
  • Importància de la funcionalitat:  3/5

 

7: Flexibilitat i eficiència en l’ús

Les dreceres, ocultes als usuaris novells, poden accelerar la interacció per a l’usuari expert, de manera que el disseny pugui satisfer tant a usuaris inexperts com a usuaris experimentats. Permet als usuaris adaptar accions freqüents.

Descobriment 13: Mal Exemple
Descripció:
Als usuaris els resulta impossible accedir a la pàgina de «News» des de la pàgina principal.

 

Idea de millora:

Proporcionar un enllaç a la pàgina principal des de la secció de ‘NEW RELEASES’ que redireccione als usuaris a la pàgina de ‘Notícies’

Avaluació:
  • Freqüència: 3/5
  • Gravetat: 3/5
  • Importància de la funcionalitat:  4/5
Descobriment 14: Bon Exemple
Descripció:
Quan es fa clic en un botó de filtració, el contingut es filtra o es mostra d’acord amb el criteri seleccionat.

Idea de millora:

«mplementar una indicació visual, com ara un ressalt o una etiqueta activa, per als botons de filtració seleccionats. Això proporcionaria als usuaris una millor retroalimentació sobre quin filtre està actiu, millorant la seva comprensió i facilitant la navegació del contingut filtrat

Avaluació:
  • Freqüència: 1/5
  • Gravetat: 2/5
  • Importància de la funcionalitat:  4/5

8: Disseny estètic i minimalista

Les interfícies no haurien de contenir informació que sigui irrelevant o rarament necessària. Cada unitat addicional d’informació en una interfície competeix amb les unitats rellevants d’informació i disminueix la seva visibilitat relativa.

Descobriment 15: Mal Exemple
Descripció:

La ‘Top Bar’ de la pàgina web presenta un fons transparent que, en alguns casos, es superposa amb els elements de la pàgina principal. Aquesta superposició causa confusió i dificulta la visualització clara del contingut, ja que alguns elements gràfics es veuen interposats amb altres parts de la interfície, creant una experiència incòmoda i poc satisfactòria per als usuaris.

Idea de millora:

Modificar el fons de la ‘Top Bar’ perquè no sigui completament transparent, sinó que tingui una opacitat o degradacio lleugera que permeti veure els elements de la pàgina sense interferir en la seva visualització. Això pot millorar la claritat i la llegibilitat dels continguts, proporcionant una experiència més coherent i agradable als usuaris.

Avaluació:
  • Freqüència: 5/5
  • Gravetat: 3/5
  • Importància de la funcionalitat:  5/5
Descobriment 16: Bon Exemple
Descripció:
Barra per subscriures simple, amb la informacio necessaria
Avaluació:
  • Freqüència: 2/5
  • Gravetat: 1/5
  • Importància de la funcionalitat:  3/5

9: Ajuda les persones usuàries a reconèixer, diagnosticar i recuperar-se dels errors

Els missatges d’error han d’estar expressats en un llenguatge clar (sense codis d’error), indicar amb precisió el problema i suggerir constructivament una solució.

Descobriment 17: Mal Exemple
Descripció:
En aquest cas argumento dos mals exemples ja que no he sapigut trovar un bon exemple.

En aquesta situació, al fer clic a l’ícona de música, s’inicia la reproducció de música. En cas que aquesta acció s’hagi realitzat per error, no hi ha una opció clara per aturar la reproducció de la música.

 

Idea de millora:

Incorporar un botó o una icona evident per a aturar la reproducció de música en cas que l’usuari ho desitgi. Això proporcionaria un control més senzill i immediat sobre la reproducció de música accidental.

Avaluació:
  • Freqüència: 3/5
  • Gravetat: 4/5
  • Importància de la funcionalitat:  4/5

Descobriment 18: Bon Exemple
Descripció:

En el camp de correu electrònic per subscriure’s, si s’introdueix un correu electrònic incorrecte, es mostra un missatge d’error.

Idea de millora:

Millorar el missatge d’error per oferir una explicació clara sobre què ha fallat en el correu electrònic introduït. Podria incloure indicacions específiques, com per exemple ‘El format del correu electrònic és incorrecte’ o ‘Si us plau, introdueix un correu electrònic vàlid’ per ajudar l’usuari a identificar millor el problema

Avaluació:
  • Freqüència: 1/5
  • Gravetat: 3/5
  • Importància de la funcionalitat: 3 /5

 

10: Ajuda i documentació

És millor si el sistema no necessita cap explicació addicional. No obstant això, pot ser necessari proporcionar documentació per ajudar els usuaris a comprendre com completar les seves tasques.

Descobriment 19: Mal Exemple
Descripció:

En aquest cas, tenim un exemple deficient ja que les barres de cerca són elements estàndards, però en aquest cas, no s’utilitza cap icona estàndard per a les barres de cerca. Aquest text seria innecessari si s’utilitzés una solució més estàndard. A més, genera confusió, ja que no es té clar el que es pot buscar.

Idea de millora:

Implementar una barra de cerca estàndard amb una icona reconeixible per millorar l’experiència de l’usuari. A més, proporcionar una funció de suggeriments de cerca predictiva podria facilitar la comprensió i la usabilitat de la barra de cerca, oferint termes o frases comunes per ajudar els usuaris a iniciar la seva cerca de manera més ràpida i eficient.

Avaluació:
  • Freqüència: /5
  • Gravetat: /5
  • Importància de la funcionalitat:  /5
Descobriment 20: Bon Exemple
Descripció:

En el panell de la mescla de cançons, aquestes es poden seleccionar i canvien de color. Hi ha una explicació que indica el propòsit de cada color.

Idea de millora:

Augmentar la visibilitat de la explicació dels colors per facilitar la seva trobada. Podria ser útil col·locar-la en un lloc més destacat dins del panell de mescla de cançons, com ara adjuntar-la prop de les opcions de selecció o fer-la visible amb un botó d’informació que es pugui activar fàcilment.

Avaluació:
  • Freqüència: 1/5
  • Gravetat: 3/5
  • Importància de la funcionalitat:  4/5

Conclusions:

Aquesta avaluació heurística proporciona una visió en profunditat de la plataforma web de RCA Records, destacant els aspectes positius i les àrees d’optimització. La revisió abasta la interfície, l’experiència de l’usuari i els principis de disseny i usabilita.

Basant-me en les troballes de l’avaluació heurística, aquí tens algunes prioritats per a la millora de la plataforma web de RCA Records:

  1. Millorar la visibilitat de l’estat del sistema:
    • Problema Identificat: L’animació de so es mou quan no hi ha cap reproducció en curs, la qual cosa pot donar la falsa impressió que el so està actiu.
    • Prioritat: Alta
    • Exemple de Millora: Mostrar un botó de reproducció tipus ‘play’ quan cap cançó està sonant, reservant l’animació actual només per quan hi ha música reproduint-se.
  2. Millorar la consistència visual:
    • Problema Identificat: Inconsistència en la reacció de la icona del ratolí en diversos elements.
    • Prioritat: Mitjana
    • Exemple de Millora: Uniformitzar la reacció de la icona del ratolí en tots els elements, proporcionant una experiència visual coherent i eliminant confusions sobre la seva funcionalitat.
  3. Optimitzar la navegació per a usuaris novells:
    • Problema Identificat: Als usuaris els resulta impossible accedir a la pàgina de «News» des de la pàgina principal.
    • Prioritat: Alta
    • Exemple de Millora: Afegir un enllaç directe a la pàgina de «News» des de la secció «NEW RELEASES», facilitant la navegació per als usuaris novells.
  4. Millorar els missatges d’error:
    • Problema Identificat: En la secció d’ofertes de treball, quan no hi ha ofertes, no es proporciona cap explicació, la qual cosa pot crear confusió.
    • Prioritat: Mitjana
    • Exemple de Millora: Afegir un missatge clar que indiqui si no hi ha ofertes disponibles actualment o si la secció s’està carregant, evitant la incertesa per als usuaris.
  5. Optimitzar la barra de cerca:
    • Problema Identificat: La barra de cerca no utilitza cap icona estàndard, generant confusió.
    • Prioritat: Alta
    • Exemple de Millora: Implementar una barra de cerca estàndard amb una icona reconeixible, a més de proporcionar suggeriments de cerca predictiva per millorar la usabilitat.

Aquestes prioritats es basen en la freqüència, la gravetat i la importància de cada problema identificat. Abordar aquestes àrees millorarà significativament l’experiència de l’usuari a la plataforma web de RCA Records.

Referències:

https://www.nngroup.com/articles/ten-usability-heuristics/#poster
https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
https://www.toptal.com/designers/usability-testing/usability-analysis-how-to-run-a-heuristic-evaluation
https://www.linkedin.com/pulse/evaluaci%C3%B3n-heur%C3%ADstica-checklist-francisco-mujica-/?originalSubdomain=es
Guia d'estudi. Avaluació Heurística, Pla de test i Card Sorting R2

Debate

No hay comentarios.

Evaluación heurística

Martí Fortuny Conrado
Visibilidad: Pública - - comentario en Evaluación heurística
Evaluación heurística

Evaluación heurística

Martí Fortuny Conrado
Visibilidad: Pública - - comentario en Evaluación heurística
Para realizar esta parte se ha hecho una evaluación heurística del portal trabajo de Cataluña (serveiocupacio), la navegación realizada por el usuario…
Para realizar esta parte se ha hecho una evaluación heurística del portal trabajo de Cataluña (serveiocupacio), la navegación realizada…

Para realizar esta parte se ha hecho una evaluación heurística del portal trabajo de Cataluña (serveiocupacio), la navegación realizada por el usuario y su interacción en esta interfaz. Se entiende como evaluación heurística la investigación de los procesos de usuario en un ámbito controlado, en este caso búsqueda de empleo mediante la página web de la Generalitat, donde se le valúa dentro de ciertos parámetros por varios investigadores que se centran en estudiar la usabilidad del portal de trabajo por el usuaria ajeno al estudio de dicha navegación.

Para monitorizar la navegación del usuario en la web: serveiocupació.cat se requiere de un flujo de trabajo establecido entre el grupo o por el individuo, pero sea analógico o digital se estable que el mejor método para hacer un control de la interacción es “checklist de heurísticos”. Este listado es una tabla de evaluación según los criterios subjetivos de los investigadores se evalúa por un voto positivo, negativo, o neutro sobre el estado de alguno de los pasos a realizar por el usuario ya sea la fácil interacción en un paso, falta legibilidad, navegación memorable o la falta de enfoque gráfico a la interfaz como es en este caso.

Según las 10 leyes de Nielsen, la interfaz debe ser:

  1. Accesible por los usuarios y comprensible, el usuario debe ser capaz donde está y que función esta haciendo y como cree que podrá seguir navegando antes de continuar.
    :( La web es accesible pero no navegable, tiene muchos subportales y categorías interconectadas que no están directamente relacionadas entre ellas.
  1. Similitudes argot gramatical, aportar un diseño personalizado al público objetivo que va destinado, familiarizando así un entorno claro, simple y directo.
    :) Dispone de un vocabulario sencillo y directo, fácil de entender, y breve.
  2. Libertad para el usuario, fácil navegación permite al usuario recular o cambiar de sección sin tener que cerrar y reabrir el entorne donde este. Le da control y seguridad.
    :) Sencillo pero funcional, hay un tracklist o listado de menús de donde vienes para poder volver atrás sin salir completamente de la categoría eligida.
  1. Similar al paso dos, el usuario debe sentirse cómodo con el vocabulario de la interfaz donde este sea fácil entendible y se repita “sin tener que aprender nada nuevo”.
    :) Es correcto, aunque hay mucha información a desglosar, se entiende el al ser breve nos facilita la lectura para los disléxicos y ayuda a la navegación.
  1. Evitar las páginas sin salidas, por error de servidor, software o hardware se recomienda reconducir al usuario a otra página para seguir con la navegación.
    :( Hay varias páginas sin salida o sin información útil, por ejemplo en las ofertas de empleo ya seleccionadas pero siguen visible para seleccionar.
  1. Permitir al usuario los mismos recursos de navegación desde su entorno, permitiendo así una interacción controlada donde le es familizado el entorno donde se mueve.
    :(     Gráficamente se mantiene el coglomerado pero carece de una interfaz similar entre los diferentes ámbitos, la navegación cambia mucho de “Empleo” a “Formación”
  1. Para un usuario experimentado es más fácil una interfaz donde permite acceder de forma rápida y cómoda a su destino, reduciendo tiempo navegación y desinterés.
    :) Es accesible pero sigue siendo complejo si quieres acceder portal diferente al de tu interés habitual, es por eso que es fácil si sabes a donde vas por la simplicidad y una vez ya has navegado anteriormente.
  1. Menos es más, así es como mejorar navegación sin acciones que hagan al usuario perderse de la ruta que se ha diseñado para él con un fin minimalista pero sólido.
    :) A nivel visual no esta muy cargado pero carece coherencia audiovisual, con iconos, fotos y destacados de texto, dicho esto por la gran cantidad de información esta bien.
  2. Similar al paso cinco, hay que evitar los errores de código o informáticos para aclarlo al público que hay un problema y se redirige hasta su solución temporal o arreglo.
    :) Fácil y directo, si te pierdes o experimentas un “bugg” siempre puedes volver atrás.
  1. Una ayuda siempre va bien como guía para el usuario, si se requiere, ya sea por un buscador, soporte técnico, foro de ayuda para navegar o instrucciones básicas.
    :( No hay ayuda posible, el proceso es complejo y no hay contacto ni mejoras posibles, el servicio telefónico esta saturado y carece de soporte técnico competitivo.

Positivo: Textos directos, claros y sencillos, con una estética entendible y recursos visuales variados, mucho contenido pero esta distribuido para que no sea muy directo y fácil de recordar la fotografia con el valor que quiere el usuario acceder.

 

 

 

 

 

Negativo: Páginas desfasadas o mal conectadas, falta de apoyo al usuario, con una interfaz cambiada y compleja aunque te familiarices es poco memorable. El contenido del artículo no conserva la misma imagen ni el titular de la primera diapositiva del slider. Desituando al usuario de donde viene y gráficamente cuesta más de leer sin contenido fotográfico o iconico.
No esta la estructura ni la imagen gráfica de la página web, canvia según el ámbito donde te encuentres.

 

A mejorar: Tiene mucho potencial y con un uso básico de pictogramas y colores para saber que ámbito estas y que puedes hacer en cada sección de forma básica puede ayuda a la navegación del usuario y familiazarlo con esta plataforma web de búsqueda de trabajo.

 

 

 

 

 

 

 

 

 

Entrega de la actividad R2

Debate

No hay comentarios.

PEC2 – T1 – Heurística de Hearts of Iron IV

Jose Pascual Rocher Camps
Visibilidad: Pública - - comentario en PEC2 – T1 – Heurística de Hearts of Iron IV

PEC2 – T1 – Heurística de Hearts of Iron IV

Jose Pascual Rocher Camps
Visibilidad: Pública - - comentario en PEC2 – T1 – Heurística de Hearts of Iron IV
Introducción Voy a realizar un juego con el que llevo mucho tiempo jugando, y es «Hears of Iron IV» o HOI4. «Hearts…
Introducción Voy a realizar un juego con el que llevo mucho tiempo jugando, y es «Hears of Iron IV»…

Hearts of Iron IV - PC - Cómpralo en Nuuvem

Introducción

Voy a realizar un juego con el que llevo mucho tiempo jugando, y es «Hears of Iron IV» o HOI4.

«Hearts of Iron IV» es un juego de estrategia que transporta a los jugadores a los momentos cruciales de la Segunda Guerra Mundial, permitiéndoles controlar una nación y tomar decisiones que moldean el curso de la historia. Aplicar los principios heurísticos de Nielsen a este juego nos ofrece una comprensión más profunda de cómo su diseño se alinea con las necesidades y expectativas de los usuarios, impactando así su experiencia de juego.

Metodología

Para evaluar la aplicación de los principios heurísticos de Nielsen en «Hearts of Iron IV», se realizó un análisis exhaustivo del juego, centrándose en la experiencia del usuario en áreas clave:

  1. Interfaz de usuario (UI): Se examinaron la disposición de elementos visuales, la claridad en la presentación de información y la consistencia en el diseño.
  2. Experiencia de juego: Se evaluó la flexibilidad de acciones, la prevención de errores y la coherencia entre las acciones del jugador y las consecuencias en el juego.
  3. Documentación y asistencia: Se analizó la disponibilidad de tutoriales, consejos emergentes y recursos de ayuda para facilitar la comprensión del juego.
  4. Estética y usabilidad: Se consideró la estética visual, la eficiencia en el uso de la interfaz y la facilidad para recuperarse de errores.

Los 10 principios heurísticos de Nielsen

1. Visibilidad del estado del sistema:

Buen Ejemplo:

  • Positivo: Los paneles muestran la producción de recursos, fuerzas militares y relaciones diplomáticas de la nación controlada por el jugador.
  • Justificación: Facilita la toma de decisiones informadas al proporcionar información crucial de manera accesible.

Mal Ejemplo:

 

  • Negativo: No todas las gestiones se ven claramente, algunas opciones como la gestión de recursos (hierro, niquel…) no se reflejan inmediatamente en los paneles, lo que dificulta la comprensión inmediata del impacto de las decisiones económicas. También algunas acciones rápidas como los desembarcos no se alertan correctamente.
  • Justificación: La falta de actualización en tiempo real puede llevar a decisiones menos precisas y confundir al jugador.

 

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

Buen Ejemplo:

  • Positivo: El juego refleja eventos históricos, tecnología disponible y alianzas políticas de la Segunda Guerra Mundial. La gestión de logística y terreno es fiel a las batallas de la II Guerra Mundial.
  • Justificación: Esta autenticidad histórica aumenta la inmersión del jugador en el contexto histórico del juego.

Mal Ejemplo:

  • Negativo: Introduce eventos o tecnologías ficticias que no tienen base histórica, rompiendo la coherencia con la realidad histórica. Esto sucede de forma arbitraria.
  • Justificación: Estos cambios pueden afectar la credibilidad y la inmersión del jugador en el período histórico representado. En el ejemplo de la imagen, no muestra la Francia de Vichy.

3. libertad y control para el usuario:

Buen Ejemplo:

  • Positivo: Los jugadores tienen amplia libertad para tomar decisiones políticas, económicas y militares que afectan el curso del juego, y también subsanar aquellos errores.
  • Justificación: Fomenta la exploración y la experimentación, brindando una experiencia más personalizada y variada.

Mal Ejemplo:

  • Negativo: Ciertos actos, como iniciar una guerra, no puede finalizar con una paz blanca. También algunas naciones no tienen todas las opciones de jugabilidad, como desde el panel de política iniciar una Rusia democrática
  • Justificación: La falta de opciones puede hacer que el juego se sienta restrictivo y menos atractivo.

4. Consistencia y estándares:

Buen Ejemplo:

  • Positivo: La interfaz mantiene una estructura coherente en la presentación de información y opciones a lo largo del juego.
  • Justificación: Facilita la navegación y comprensión, ya que los jugadores se familiarizan con un diseño consistente.

Mal Ejemplo:

  • Negativo: Los menús o paneles tienen diseños diferentes y cambian su ubicación, lo que puede confundir a los jugadores al buscar información específica. Esto sucede con las actualizaciones de la sección de aviación, barcos y tanques.
  • Justificación: La falta de consistencia puede generar frustración y dificultar la familiarización con la interfaz. Como vemos en la imagen, la configuración de aviones es vertical y la de barcos horizontal (además los barcos muestran tecnología naval)

5. Prevención de errores:

Buen Ejemplo:

  • Positivo: Antes de tomar decisiones importantes, como la declaración de guerra, el juego muestra advertencias sobre las posibles consecuencias.
  • Justificación: Reduce la posibilidad de cometer errores costosos al brindar al jugador la oportunidad de reconsiderar sus acciones.

Mal Ejemplo:

  • Negativo: Algunas acciones cruciales carecen de confirmaciones o avisos, lo que puede llevar a errores irreversibles. Un ejemplo de ello es que al declarar la guerra a un país, este puede unirse a una alianza mayor y ganar la guerra. También sucede en el frente, que la IA del juego te mueve los batallones automáticamente, y esto produce errores de defensa y que pierdas posiciones.
  • Justificación: La falta de advertencias, como las simpatías por otros países, puede frustrar al jugador al cometer acciones involuntarias y perjudiciales.

6. Reconocimiento antes que recuerdo:

Buen Ejemplo:

  • Positivo: El juego utiliza iconografía clara y nombres descriptivos para unidades y tecnologías, facilitando su identificación. Un ejemplo lo encontramos en la configuración de batallones, que es intuitiva.
  • Justificación: Permite a los jugadores reconocer elementos fácilmente sin necesidad de recordar detalles previos.

Mal Ejemplo:

  • Negativo: Algunos elementos carecen de descripciones claras o nombres informativos, lo que dificulta su identificación rápida. Como ejemplo, algunas tecnologías marítimas están mezcladas con tecnologías de inteligencia o los estats de los batallones son muy confusos.
  • Justificación: Esto puede generar confusión y requerir que los jugadores recuerden detalles previos o realizar tutoriales para comprender completamente una tecnología.

7. Flexibilidad y eficiencia en el uso:

Buen Ejemplo:

  • Positivo: «Hearts of Iron IV» ofrece atajos de teclado y opciones de interfaz que permiten a los jugadores realizar acciones de manera eficiente. Esto generalmente se realiza con las teclas superiores «FX» y algunas teclas genéricas como «L» de logística
  • Justificación: Facilita la jugabilidad rápida y la ejecución de estrategias complejas de manera más eficiente.

Mal Ejemplo:

  • Negativo: Necesidad de navegar a través de múltiples menús para realizar acciones comunes, como el comercio internacional, ralentiza la jugabilidad.
  • Justificación: Puede generar frustración y afectar la experiencia del usuario al hacerla menos fluida.

8. Diseño estético y minimalismo:

Buen Ejemplo:

  • Positivo: La interfaz del juego muestra información detallada de manera organizada y limpia, evitando la saturación visual.
  • Justificación: Permite que los jugadores se centren en la estrategia sin distraerse por elementos innecesarios o desordenados.

Mal Ejemplo:

  • Negativo: En ciertos casos, como las características de los batallones, tienen un exceso información en pantalla, resultando en una interfaz confusa y abrumadora.
  • Justificación: Esto puede dificultar la comprensión rápida y generar una experiencia visualmente agotadora.

9. Ayuda y documentación:

Buen Ejemplo:

  • Positivo: «Hearts of Iron IV» ofrece tutoriales iniciales interactivos, consejos emergentes y una base de conocimientos accesible.
  • Justificación: Facilita la comprensión del juego para nuevos jugadores y proporciona ayuda contextual cuando se necesita.

Mal Ejemplo:

  • Negativo: En guerra avanzada, la falta de información o tutoriales exhaustivos hace que los nuevos jugadores se sientan perdidos o desorientados. Un ejemplo de esto lo encontramos en la batalla aérea o la batalla naval, que a pesar de tener ayuda estilo tooltip, el conjunto de opciones abruma su jugabilidad..
  • Justificación: La ausencia de ayuda y/o tutoriales puede dificultar el aprendizaje y la inmersión en el juego.

10. Diagnóstico y recuperación fácil de los errores:

Buen Ejemplo:

  • Positivo: «Hearts of Iron IV» cargar partidas previas para corregir errores.
  • Justificación: Brinda a los jugadores la oportunidad de rectificar decisiones sin consecuencias permanentes.

Mal Ejemplo:

  • Negativo: Algunas acciones no pueden revertirse o corregirse, lo que lleva a situaciones irremediables. Esto sucede cuando un país de forma arbitraria niega el comercio o la simpatía, provocando dificultades en el juego.
  • Justificación: Esto puede generar frustración y desmotivación al no poder enmendar errores.

 

Listado priorizado según la gravedad

Gravedad Alta:

  1. Falta de actualización inmediata en paneles económicos: Esto puede llevar a decisiones erróneas y estrategias menos efectivas debido a la falta de información en tiempo real sobre las consecuencias de las acciones económicas.
    • Solución: Debe aparecer avisos de emergencia en situaciones críticas, tales como problemas en materias primas.
  2. Acciones irreversibles sin confirmaciones o advertencias: Esto se produce en los desembarcos navales. Las decisiones sin oportunidad de revisión pueden conducir a errores graves que afectan negativamente el progreso del juego.
    • Solución: Debe aparecer avisos de emergencia en situaciones críticas, tales como un desembarco naval.
  3. Exceso de elementos visuales o información en pantalla: Una interfaz confusa y sobrecargada, con distintos elementos y propiedades, puede ser abrumadora para los jugadores, dificultando la comprensión y generando confusión.
    • Solución: Se recomienda que el juego incluya ejemplos de movimientos o tooltips más elaboradas.
  4. Ausencia o limitación en la documentación y tutoriales: Si bien puede dificultar la comprensión inicial del juego, esto puede ser superado con la experiencia y la búsqueda de información externa.
    • Solución: El juego puede incluir en su canal ejemplos de jugadas o tutoriales más detallados
  5. Movimientos automáticos de batallones por la IA: Esto produce que deje huecos en el campo de batalla y te cerquen tu ejército, provocando un malestar en el juego.
    • Solución: Dar la opción al usuario de deshabilitar la IA y pasar al control manual

Gravedad Media:

  1. Cambios incoherentes con la realidad histórica: Introducir elementos o eventos ficticios que rompen la autenticidad histórica puede afectar la credibilidad y la inmersión en el contexto del juego.
    • Solución: Corregir aquellos errores que generen error en la autenticidad histórica
  2. Restricciones excesivas en las acciones del jugador: Limitar en gran medida la libertad de elección puede hacer que la experiencia se sienta restrictiva y menos atractiva para los jugadores.
    • Solución: Añadir aquellas opciones que aun no se encuentran en el videojuego

Gravedad Baja:

  1. Información o elementos poco descriptivos y difíciles de identificar: Aunque puede generar cierta confusión, no tiene un impacto tan inmediato en la jugabilidad como los aspectos mencionados anteriormente.
    • Solución: Se puede añadir mensajes de tooltips más descriptivos.
  2. Falta de atajos o métodos de acceso rápido a acciones comunes: Esto puede ralentizar la jugabilidad y afectar la eficiencia del jugador al realizar acciones repetitivas.
    • Solución: Añadir un panel de configuración de opciones, para que el usuario pueda configurar las teclas y todas las opciones posibles.

 

Espero compañeros que os haya gustado mi análisis de este grandioso juego, que a pesar de ser muy entretenido aun considero que tiene un gran abanico de mejoras.

Entrega de la actividad R2

Debate

No hay comentarios.