Publicado por

Evaluación heurística de YouTube

Publicado por

Evaluación heurística de YouTube

Evaluación heurística de YouTube Introduccion  En este post se realiza  una evaluación heurística de YouTube con los 10 principios de Nielsen. YouTube es un plataforma de videos de alcance mundial, con su complejidad  de funciones ( reproducción, búsqueda, comunidad, creación de contenido, aprendizaje), este tipo de variedad y complejidad la hace interesante  para realizar esta evaluación  a través de los principios de Nielsen con hallazgos de  buenos  y malos usos, así como áreas de mejora  y soluciones concretas. Metodologia Para…
Evaluación heurística de YouTube Introduccion  En este post se realiza  una evaluación heurística de YouTube con los 10 principios…

Evaluación heurística de YouTube

Introduccion 

En este post se realiza  una evaluación heurística de YouTube con los 10 principios de Nielsen. YouTube es un plataforma de videos de alcance mundial, con su complejidad  de funciones ( reproducción, búsqueda, comunidad, creación de contenido, aprendizaje), este tipo de variedad y complejidad la hace interesante  para realizar esta evaluación  a través de los principios de Nielsen con hallazgos de  buenos  y malos usos, así como áreas de mejora  y soluciones concretas.

Metodologia

Para realizar este análisis, se usó los 10 Principios de usabilidad de Jakob Nielsen, evaluando  tanto la versión Web  asi como la versión App móvil de YouTube.  Hallando interacciones en la navegación, historial de búsqueda, reproducción, controles de reproducción, gestionar suscripciones, interacción en los comentarios, logrando desglosar cada principio con buenos y malos usos.

 

Evaluación Heurística

Visibilidad del estado del sistema: Los usuarios siempre deben estar al tanto de lo que está sucediendo dentro del sistema.

  • Buen uso: En la parte inferior del video tiene una barra de progreso en la cual la  sección roja es el estado de reproducción del video y la línea gris es el buffer de cuanto se ha descargado y con el puntero puede indicar el tiempo exacto en el punto de la reproducción .
  • Mal uso: Al subir el video el tiempo estimado restante  es poco fiable, incluso puede estancarse en “Procesando HD” sin poder saber claramente cuánto tardará el proceso.
  • Justificación: YouTube Proporciona información crucial de la reproducción, carga del video permitiendo incluso al usuario saber cuando hay problemas de conexión
Cargando...

Relación entre el sistema y el mundo real: El diseño, los conceptos y las acciones del sistema deben ser familiares y coherentes con las expectativas de un usuario del mundo real.

 

  • Buen uso: Los íconos de pantalla completa, notificación, búsqueda, ajustes, subtítulos, play, pausa,  retroceder, adelantar son formatos universalmente reconocidos en las plataformas de reproducción de multimedia.
  • Mal uso:  El “Shorts” que se refiere a videos cortos, es un término propio de la plataforma que tomó un tiempo a los usuarios en adaptarse  a su formato y significado.
  • Justificación: YouTube utiliza patrones de lenguaje y formatos conocidos y familiares en los usuarios,  Sin embargo así mismo introduce  términos propios que toman tiempo para la comprensión y usos adecuado de su significado.
Cargando...

Control y libertad del usuario: Los usuarios requieren control sobre el sistema y deben estar habilitados para deshacer fácilmente acciones o salir de estados indeseables.

 

  • Buen uso: El Usuario tiene el control total en la reproducción del video puede pausar, reproducir adelantar e incluso retroceder, pantalla completa, cambiar la velocidad en cualquier momento de la reproducción.
  • Mal uso:  Durante las reproducciones automáticas de anuncios o videos publicitarios  se debe cumplir un tiempo mínimo para omitir o salir del mismo. Y publicidad de reproducción en un POP-UP a pantalla completa
  • Justificación: La navegación es clara  y ofrece múltiples opciones que ofrecen libertad. Y control al usuario, sin embargo durante los anuncios publicitarios el usuario es obligado a estar un tiempo mínimo antes de poder sátira, omitir o cancelar el anuncio.
Cargando...

Consistencia y estándares: Mantener la consistencia dentro de la aplicación, omnicanal o marca es tan importante como adherirse a las convenciones establecidas y las prácticas de la industria.

  • Buen uso: La  estructura general de la página y la app móvil son consistentes: Video arriba, abajo subtítulos, Título, número de visualizaciones, artista o  canal, suscripción, like o dialícelo, compartir  y luego descripción del video y comentarios, son convenciones establecidas.
  • Mal uso: Al reproducir videos en web, te permite explorar información del video y que el creador del canal comparte,  sin perder el resto de información como videos de sugerencias o comentarios, pero al realizar esto en la app móvil al hacer click en “más” solo se puede ver la información del canal o el video y el resto de la información queda oculta en otra capa que para visualizar hay que volver a la pantalla de la reproducción .
  • Justificación: YouTube si bien conserva patrones macro globales alineados en su sitio web y app  o grupo de familia de productos, lo que la hace fácil  e intuitiva de usar, sin embargo tiene cambios sutiles en escenarios específicos.
Cargando...

 

Prevención de errores: Enfatizar la prevención de errores es más importante que proporcionar mensajes de errores efectivos por sí solo.

  • Buen uso: Antes de realizar una eliminación ya sea de contenido, lista de reproducción, o comentario, YouTube pide confirmación explícita evitando que este “borrado” se haga por error o desliz.
  • Mal uso:  En las descripciones de los videos. Muchas veces existen link que te puede llevar a plataformas o contenidos no deseados o engañosos.
  • Justificación: A la hora de eliminación de contenido se implementan procesos que mantienen salvaguardada la información del creador digital o del Usuario en el comentario pidiendo una confirmación explícita, sin embargo cuando se accede al link qué están en la descripción si bien estos han sido Puestos por el creador Digital el Usuario no tiene un mensaje de confirmación de abandono de la plataforma.
Cargando...

Reconocimiento  en lugar de recordar: Facilitar el reconocimiento por parte del usuario de opciones, acciones e información es más fácil que hacer que recuerden información de la memoria.

 

  • Buen uso: Las opciones de guardar para ver más tarde, añadir a lista de reproducción, reproducir en la siguiente cola, historial de búsquedas, permiten que el usuario pueda reconocer fácilmente la información sin tener que recordar títulos explícitos.
  • Mal uso:  Las listas de ver más tarde son de difícil exploración y no cuenta con un sistema de recordatorio, solo hasta que el usuario las busca teniendo que recordar de memoria algunas partes del proceso.
  • Justificación: La plataforma utiliza varias opciones de fácil acceso para  acciones frecuentes, sin embargo para procesos específicos requiere mayor exploración o recordar de memoria el proceso.
Cargando...

Flexibilidad y eficiencia de uso: El sistema debe proporcionar a los nuevos usuarios formas de navegar fácilmente por el sistema y permitir a los usuarios expertos que aprovechen las herramientas del sistema con rapidez y eficiencia.

 

  • Buen uso: La función “Miniplayer” permite la reproducción de un video, mientras el usuario experto puede continuar explorando más contenido.
  • Mal uso:  Esta función de MiniPlayer o ventana flotante fuera de EEUU solo está disponible para explorar contenido dentro de la plataforma YouTube, sin embargo para explorar otro contenido fuera de YouTube el usuario debe ser premium.
  • Justificación: La flexibilidad  y eficiencia de uso se evidencia en el grupo de plataformas  de YouTube, siendo intuitivo para los nuevos usuarios, y aportando rapidez y eficiencia en usuarios expertos sin embargo no debería estar limitada por usuario premium.
Cargando...

Diseño estético y minimalista: La estética del sistema debe ser visualmente atractiva, y su diseño debe enfocar a propósito la atención de los usuarios eliminando el desorden y proporcionando una jerarquía clara dentro de la interfaz.

 

  • Buen uso: Mantiene dentro de su página web y la aplicación. Un “orden” siendo atractivo visualmente  que se mantiene en ambas interfases
  • Mal uso:  Cuando se salta a los short aparece múltiple información siendo un caos para el usuario entrando en un bucle algorítmicos 
  • Justificación:  La información en desorden genera caos y bucles
Cargando...

Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores: Proporcionar mensajes que expliquen claramente el problema y sugieran de manera constructiva una solución en un lenguaje sencillo y ayuda a los usuarios a saber cómo avanzar cuando se enfrentan a interrupciones.

 

  • Buen uso: Cuando un video no está disponible aparece un mensaje claro “ Video no disponible. El usuario que ha subido este video lo ha retirado” o bloqueo por geolocalización.
  • Mal uso:  Mensajes genéricos “Se ha producido un error. Inténtalo más tarde” o usos de códigos. No permite al usuario avanzar en la solución dado que no es clara la naturaleza del error.
  • Justificación:  Cuando la información del error es clara permite avanzar en una solución no siendo así cuando son mensajes genéricos o codificados.
Cargando...

Ayuda y documentación: Proporcionar guías de ayuda completas y documentación para los usuarios. 

 

  • Buen uso: Dispone de un icono fácil de ubicar en la barra de menú desplegable, accediendo a una extenso centro de ayuda, que incluye preguntas frecuentes.
  • Mal uso:  Encontrar soluciones a problemas específicos puede requerir navegar por varios retículos o foros de la comunidad. Contactar a un asesor  directo es casi imposible.
  • Justificación: El centro de ayuda  además de ser de fácil accesibilidad debe ser práctico, incluyendo preguntás frecuentes, sin embargo para problemas específicos se debería poder poner en contacto fácilmente con un asesor directo de la plataforma.
Cargando...

Listado Priorizado de Hallazgos (Problemas de usabilidad)

Del más grave al menos grave

 

  • Columna de recomendaciones( Feed algorítmico) . En ocasiones irrelevante y/o adictivo. Impacta directamente en el flujo del Usuario, en ocasiones distrayéndose del objetivo inicial, lo cual puede generar frustración por contenido no deseado y fomentar bucles de consumos no intencionados lo cual reduce la sensación de Control sobre el contenido que consume.

Propuesta de mejora: controles más transparentes para que el usuario pueda indicar qué temas no desea ver y permitir resetear el perfil de recomendaciones, reducir la densidad visual de la columna de recomendaciones.

  • Dificultad extrema  para obtener ayuda personalizada directa.  Cuando un usuario enfrenta un problema complejo, que no puede ser resuelto por la ayuda estándar, la falta de una ayuda personalizada genera una gran frustración e impotencia, incluso llevando al usuario al abandono de la plataforma. 

Propuesta de mejora: Incluir en la plataforma un Chat directo que permita un soporte escalonado y accesible incluso para los usuarios estándar .

  • Mensajes  de error genéricos. Impide al usuario entender qué salió mal, no permite una solución eficaz y lleva a múltiples intentos fallidos, e incluso abandono de la tarea que está realizando el Usuario como cargar un video.

Propuesta de mejoras: Sustituir los mensajes genéricos, por mensajes específicos, e incluso por códigos, que estén acompañados de una explicación en lenguaje claro y  vínculos a artículos de ayuda que desglose las posibles causas y soluciones.

 

  • Falta de fiabilidad ocasional en los indicadores de progreso tiempo. Evidenciado sobre todo en el momento de la subida de Videos, sin poder saber claramente cuánto tardará el proceso, e impidiendo al creador digital realizar una planificación adecuada.

Propuesta de mejora: mejorar los algoritmos de estimación de tiempo si un proceso se estanca proporcionar información detallada de la causa del retraso o un rango de tiempo más realista.

 

  • Contenido engañoso en links que puedan llevar a plataformas o contenidos engañosos o no deseados. El usuario pierde la confianza en la plataforma, además de perder tiempo y lo lleva a contenido que no cumple sus expectativas.

     

 Propuesta de mejora:  Mensaje de confirmación explícita antes de abandonar la plataforma, evitando que el usuario acceda a otros sitios no deseados.

 

Conclusión 

YouTube una de las plataformas más antiguas, maduras y populares del mercado tiene un ecosistema complejo donde los principios heurísticos se aplican en varias áreas claves,  ( control de reproducción, reconocimiento sobre recuerdo, Eficiencia para expertos, sin embargo presenta desafíos importante desde las recomendaciones algorítmicas, la necesitas de monetización (anuncios) y pérdida de la sensación de control por el usuario, el soporte a millones de usuarios e incluso en seguridad en contenidos o información (links) agregados por los creadores digitales.  

 

 Esta evaluación heurística deja en evidencia que incluso las plataformas grandes tienen oportunidades de mejora continua al centrarse en los principios básicos de usabilidad, siendo fundamental  para que la experiencia del usuario sea de satisfacción plena 

 

Debate0en Evaluación heurística de YouTube

No hay comentarios.

Publicado por

Análisis heurístico de la interfaz de YouTube

Publicado por

Análisis heurístico de la interfaz de YouTube

Introducción En este post comparto un análisis heurístico del sitio web de YouTube, una plataforma que utilizo a diario sobre todo en…
Introducción En este post comparto un análisis heurístico del sitio web de YouTube, una plataforma que utilizo a diario…

Introducción

En este post comparto un análisis heurístico del sitio web de YouTube, una plataforma que utilizo a diario sobre todo en el ordenador. A través de este análisis quiero identificar aciertos y áreas en las que se puede mejorar, basándome en los 10 principios heurísticos de Nielsen. El objetivo principal es entender cómo YouTube facilita o complica la experiencia del usuario, y proponer posibles soluciones para mejorarla.

Metodología

Para este análisis, exploré la interfaz de YouTube desde su versión web y móvil (iOS). Me enfoqué en tareas cotidianas como buscar un video, ver contenido recomendado, interactuar con los botones (like, compartir, guardar), comentar, explorar playlists y gestionar una cuenta. Evalué cada uno de los principios heurísticos de Jakob Nielsen con al menos un hallazgo (positivo o negativo), y al final hice un ranking de los problemas más graves con propuestas de mejora.

Los 10 principios heurísticos de Nielsen en YouTube

A continuación, se encuentran los hallazgos por cada principio con una breve descripción : 

    1. Visibilidad del estado del sistema

      Buena práctica: El reproductor de video muestra claramente el tiempo transcurrido, el buffering, y si el video está en pausa o reproducción.
      A mejorar: Cuando un video está cargando lentamente, el sistema no indica el problema de conexión.
      Propuesta: Añadir un mensaje que indique si hay una interrupción por red o por YouTube.

    2. Coincidencia entre el sistema y el mundo real

      Buena práctica: El botón de «Me gusta» usa un ícono de pulgar arriba, muy reconocible.
      A mejorar: Algunas funciones adicionales se encuentran dentro del icono de tres botones en cada video lo que  no puede ser intuitivo para usuarios nuevos.
      Propuesta: Añadir un icono más universal quizás el “+” o  pequeños tooltips o descripciones al pasar el ratón o tocar el icono.

    3. Control del usuario y libertad

      Buena práctica: Se puede retroceder, avanzar, salir de pantalla completa o detener el video fácilmente.

    4. Consistencia y estándares

      Buena práctica: El diseño se mantiene coherente entre móvil y escritorio, con íconos repetidos (compartir, comentarios, etc.).
      A mejorar:  Los Shorts tienen un diseño que rompe el estilo del resto de la plataforma si se consulta en el ordenador.
      Propuesta: Unificar el diseño visual de Shorts con el entorno principal de YouTube.

      Screenshot
    5. Prevención de errores

      A mejorar: Al enviar un comentario, este se publica de inmediato, sin confirmación ni vista previa. Esto puede llevar a errores tipográficos o publicaciones accidentales.
      Propuesta: Añadir una opción de vista previa o un mensaje de confirmación antes de publicar.

    6. Reconocimiento antes que recuerdo

      A mejorar: si se desea acceder a la transcripción del video, la misma no es visible al instante, hay que explorar y ver toda la descripción del video para al final encontrar la transcripción.
      Propuesta: poner esta función de manera más visible al inicio de la descripción del video quizás con un icono más reconocible.

    7. Flexibilidad y eficiencia de uso

      Buena práctica: Los atajos de teclado (por ejemplo, K para pausar, J y L para avanzar o retroceder) mejoran mucho la experiencia en escritorio.
      A mejorar: Estas funciones no están explicadas en ningún lugar.
      Propuesta: Añadir una pequeña sección de atajos dentro del menú o en la configuración.

    8. Diseño estético y minimalista

      Buena práctica: YouTube mantiene una interfaz limpia, con buena jerarquía visual.
      A mejorar: Las etiquetas de recomendaciones de la página de inicio pueden verse muy cargadas.
      Propuesta: Permitir al usuario ocultar las etiquetas recomendadas si lo desea.

    9. Ayuda a reconocer, diagnosticar y recuperarse de errores

      A mejorar: Al intentar reproducir un video eliminado, solo aparece “Este video no está disponible” sin más contexto.
      Propuesta: Incluir detalles como «El video fue eliminado por el creador» o «por infringir derechos».

    10. Ayuda y documentación

      Buena práctica:  La sección de ayuda es completa
      A mejorar: está algo escondida en la parte inferior de la plataforma. Propuesta: Mostrar un botón de ayuda más visible. 

Ranking de problemas por gravedad y propuestas de mejora

    1. Transcripción poco visible
      Gravedad: Alta
      Esta función es útil para accesibilidad y comprensión, pero se encuentra al final de la descripción del video, lo que dificulta su localización.
      Propuesta: Ubicarla en una zona más visible, con un icono claro desde el inicio. 
    2. Publicación inmediata de comentarios
      Gravedad: Alta
      Los comentarios se publican sin confirmación ni vista previa, lo que puede generar errores tipográficos o publicaciones accidentales.
      Propuesta: Añadir una vista previa o una confirmación antes de publicar. 
    3. Ayuda difícil de encontrar
      Gravedad: Media-alta
      La sección de ayuda está ubicada en la parte inferior de la interfaz, lo que dificulta su descubrimiento por parte del usuario.
      Propuesta: Incluir un botón de acceso más visible o ayuda contextual en funciones complejas. 
    4. Falta de información durante la carga de videos
      Gravedad: Media
      Cuando un video tarda en cargar, no se indica si el problema proviene de la conexión del usuario o del servidor de YouTube.
      Propuesta: Añadir mensajes informativos sobre el estado de la carga. 
    5. Atajos de teclado poco visibles
      Gravedad: Media
      Son funciones muy útiles para usuarios frecuentes en escritorio, pero no están explicadas ni accesibles desde el menú.
      Propuesta: Incluir una sección informativa sobre los atajos en el menú o en configuración. 
    6. Inicio recargado de etiquetas y recomendaciones
      Gravedad: Media-baja
      La página principal puede parecer saturada visualmente debido a la gran cantidad de etiquetas y sugerencias.
      Propuesta: Permitir al usuario personalizar u ocultar estas secciones según sus preferencias.

 

Reflexión final

YouTube tiene una interfaz muy optimizada para el consumo diario de contenido, pero aún puede mejorar en áreas clave como visibilidad de funciones menos conocidas, prevención de errores y claridad ante situaciones inesperadas. Aplicar los principios heurísticos permite detectar oportunidades reales de mejora, incluso en una plataforma tan consolidada.

Referencias

Nielsen, J. (1994). Usability Engineering. Morgan Kaufmann.

Membrives, J. (2019). Cuaderno de evaluación de la usabilidad. Universitat Oberta de Catalunya (UOC). Recuperado de https://quadern-usabilitat.recursos.uoc.edu/es/1-1-que-es-la-usabilidad/

Norman, D. A. (2013). The Design of Everyday Things (Rev. ed.). MIT Press.

 

Debate0en Análisis heurístico de la interfaz de YouTube

No hay comentarios.

Publicado por

Reto 2 – Análisis Heurístico de la plataforma Twitch

Publicado por

Reto 2 – Análisis Heurístico de la plataforma Twitch

1. Introducción En este post realizaremos un análisis heurístico de la interfaz de la página web de Twitch. Twitch es una plataforma…
1. Introducción En este post realizaremos un análisis heurístico de la interfaz de la página web de Twitch. Twitch…

1. Introducción

En este post realizaremos un análisis heurístico de la interfaz de la página web de Twitch. Twitch es una plataforma de transmisión en vivo y video bajo demanda, conocida principalmente por sus transmisiones de videojuegos, pero también por otros tipos de contenido como música, arte y charlas. Debido a su naturaleza interactiva y dinámica, la usabilidad de la interfaz es fundamental para garantizar una experiencia fluida para los usuarios. Aplicaremos los principios heurísticos de Jakob Nielsen para evaluar su usabilidad.

2. Metodología

Para realizar este análisis, hemos seguido los siguientes pasos:

  1. Exploración de la interfaz: Navegación por las secciones principales de la página web, explorando tanto la parte de transmisión en vivo como las secciones de contenido bajo demanda.
  2. Aplicación de los 10 principios heurísticos de Nielsen: Evaluación detallada de la interfaz de Twitch bajo cada uno de los principios de usabilidad.
  3. Documentación de hallazgos: Identificación de errores y aciertos visuales y funcionales mediante captura de pantallas.
  4. Priorización de problemas: Evaluación de la gravedad de los problemas encontrados en relación con la experiencia del usuario.
  5. Propuestas de mejora: Sugerencias para mejorar la experiencia del usuario.

3. Análisis Heurístico según los Principios de Nielsen

1. Visibilidad del estado del sistema

Ejemplo positivo: Cuando se está transmitiendo un video en vivo, Twitch muestra un indicador claro de que el video está en directo, y una barra de progreso con la duración de la transmisión.

Ejemplo negativo: A veces, al cambiar de calidad de video, no se muestra claramente que la calidad se ha actualizado hasta que el video comienza a cargarse de nuevo.

Propuesta de mejora: Implementar una confirmación visual inmediata (como un pequeño icono o mensaje) que indique que la calidad de video ha sido cambiada.

2. Correspondencia entre el sistema y el mundo real

Ejemplo positivo: Los menús y las categorías en Twitch están claramente etiquetados con nombres familiares y fáciles de entender, como «Juegos», «Música» y «Charlas».

Ejemplo negativo:Twitch utiliza una moneda virtual llamada «Bits» para que los espectadores puedan donar a los streamers. Sin embargo, la plataforma no deja clara la equivalencia entre Bits y dinero real en todo momento. Los usuarios deben buscar información externa o hacer cálculos manuales para entender cuánto están realmente donando.

Propuesta de mejora: Mostrar de manera clara y visible la conversión de Bits a dinero real en la interfaz antes de la compra o al realizar una donación, para que los usuarios comprendan exactamente cuánto están gastando y cuánto recibe el streamer.

3. Control y libertad del usuario

Ejemplo positivo: Twitch permite a los usuarios pausar, adelantar y retroceder en los videos de transmisión bajo demanda, lo que les da total control sobre su experiencia de visualización.

Ejemplo negativo: En la plataforma de Twitch, cuando un usuario se encuentra navegando por contenido en vivo, no hay una forma sencilla de retroceder o saltar hacia el inicio de una transmisión en vivo si se ha perdido el comienzo, lo que limita la libertad de navegar. No hay una barra para iniciar la transmisión desde el principio.

Propuesta de mejora: Ofrecer una opción de retroceso en transmisiones en vivo o una función de «retransmisión» para que los usuarios puedan acceder al contenido desde el inicio si lo desean.

4. Consistencia y estándares

Ejemplo positivo: El diseño de la barra lateral y el reproductor de video sigue convenciones de plataformas de video, como YouTube, lo que facilita la adaptación del usuario.

Ejemplo negativo: Las opciones de configuración del perfil están distribuidas de manera inconsistente en el menú de usuario. A veces se encuentran en un lugar diferente dependiendo de si el usuario está en su canal, en el menú de «ajustes» o en la página principal.

Propuesta de mejora: Unificar el acceso a las configuraciones de usuario en un solo menú para que los usuarios no se pierdan buscando las opciones de personalización.

5. Prevención de errores

Ejemplo positivo: Twitch muestra advertencias claras cuando un usuario intenta realizar una acción no permitida, como interactuar con un canal restringido.

Ejemplo negativo: Al hacer clic en el chat de un canal sin estar conectado, no siempre hay un mensaje claro que informe al usuario de que debe iniciar sesión para participar.

Propuesta de mejora: Incluir un mensaje emergente o un texto en el chat para informar al usuario de que debe iniciar sesión para interactuar.

6. Reconocimiento en lugar de recuerdo

Ejemplo positivo: Los videos que el usuario ha visto recientemente están fácilmente accesibles desde su página de inicio, lo que permite un acceso rápido sin tener que recordarlos.

Ejemplo negativo: Cuando un usuario visita un canal que sigue, no siempre es evidente si está en vivo o si hay nuevos videos disponibles, lo que puede generar confusión.

Propuesta de mejora: Colocar un indicador visual más destacado que indique si un canal está transmitiendo en vivo o si hay nuevo contenido en el canal.

7. Flexibilidad y eficiencia de uso

Ejemplo positivo: Twitch ofrece varias opciones de interacción para usuarios avanzados, como atajos de teclado para controlar el reproductor, y ajustes rápidos para cambiar la calidad del video.

Ejemplo negativo: En muchos casos, los espectadores solo pueden ver un stream en la calidad que el streamer ha configurado (por ejemplo, 1080p), sin opciones para reducir la resolución si tienen una conexión lenta. Esto limita la accesibilidad y la experiencia del usuario, ya que algunos pueden experimentar lag o buffering constante sin una alternativa para ajustar la calidad manualmente.

Propuesta de mejora: Permitir que todos los usuarios puedan elegir entre varias opciones de calidad de video, independientemente de si el streamer es afiliado o partner, asegurando una mejor experiencia para aquellos con conexiones más lentas.

8. Estética y diseño minimalista

Ejemplo positivo: El diseño de la interfaz es limpio y visualmente agradable, con un fondo oscuro que facilita la visualización del contenido sin distracciones.

Ejemplo negativo: En Twitch, los anuncios aparecen de forma automática durante los streams sin previo aviso, lo que interrumpe el contenido en momentos clave. A diferencia de otras plataformas que permiten «picture-in-picture» o pausas estratégicas, en Twitch el usuario pierde completamente lo que está ocurriendo en el stream durante la duración del anuncio. Esto puede ser especialmente frustrante en transmisiones de eSports o momentos importantes en los juegos.

Propuesta de mejora: Implementar un sistema de previsualización del anuncio donde los usuarios sean informados de cuándo se reproducirá un anuncio, permitir que los anuncios sean menos intrusivos, como una opción de «picture-in-picture», donde el stream continúe en una esquina mientras se muestra la publicidad, dar más control a los streamers para decidir cuándo insertar anuncios sin afectar la experiencia del espectador.

9. Ayudar a los usuarios a reconocer, diagnosticar y corregir errores

Ejemplo positivo: Si la transmisión no se carga correctamente, Twitch proporciona mensajes claros que explican que el video no está disponible o que hay un problema con la conexión.

Ejemplo negativo: Cuando un error de conexión o buffering ocurre, no siempre se ofrece información sobre la causa del problema, lo que puede dejar a los usuarios confundidos.

Propuesta de mejora: Proveer mensajes de error detallados, como información sobre la calidad de la conexión o la disponibilidad del servidor, y pasos sugeridos para corregir el problema.

10. Ayuda y documentación

Ejemplo positivo: Twitch tiene una sección de preguntas frecuentes y soporte técnico accesible desde su página de ayuda.

Ejemplo negativo: La ayuda no está fácilmente accesible desde todas las páginas de la plataforma. Por ejemplo, al ver una transmisión en vivo o cuando se navega por el chat, no hay un acceso rápido a la sección de ayuda..

Propuesta de mejora: Incluir un acceso rápido a la documentación de ayuda desde todas las páginas de Twitch, tal vez en el menú de usuario o en la barra lateral.

4. Priorización de Hallazgos según Gravedad

  1. Falta de retroceso o reemisión en transmisiones en vivo: Limita la libertad del usuario al no poder acceder fácilmente a lo que se ha perdido en una transmisión en vivo.
    • Propuesta de solución: Implementar una función de «retransmisión» o retroceso en transmisiones en vivo.
  2. Configuración inconsistente de opciones de perfil y ajustes: Frustra a los usuarios al tener que buscar configuraciones en diferentes lugares.
    • Propuesta de solución: Consolidar todas las configuraciones del perfil en un solo menú.
  3. Mensajes de error poco claros cuando no hay conexión o hay buffering: Los usuarios no entienden siempre la causa de los problemas.
    • Propuesta de solución: Ofrecer mensajes de error más detallados con sugerencias para resolver el problema.
  4. Aparición de anuncios de forma automática: Esto dificulta al espectador a seguir con el contenido, puesto que el contenido que se ofrece durante el anuncio se pierde.
    • Propuesta de solución: Dar la opción al creador de contenido a implantar el anuncio cuando considere oportuno y no crear contenido durante el anuncio para que el espectador no se pierda nada.
  5. Interacciones no visibles para usuarios no registrados en el chat: Puede generar frustración en los usuarios que desean participar en el chat pero no están logueados.
    • Propuesta de solución: Mostrar un mensaje claro cuando un usuario no esté logueado y quiera interactuar en el chat.

5.  Conclusión

El análisis heurístico de Twitch ha revelado tanto puntos fuertes como áreas de mejora. La plataforma ya ofrece una gran experiencia para la mayoría de los usuarios, pero algunos aspectos, como la falta de retroceso en transmisiones en vivo y la configuración dispersa, pueden mejorar significativamente la usabilidad. Implementando las propuestas de mejora, Twitch podría ofrecer una experiencia aún más fluida y accesible para su gran base de usuarios.

Debate0en Reto 2 – Análisis Heurístico de la plataforma Twitch

No hay comentarios.

Publicado por

Evaluación heurística de la aplicación móvil de GitHub

Publicado por

Evaluación heurística de la aplicación móvil de GitHub

Introducción En este análisis heurístico exploraremos la experiencia de usuario de la aplicación móvil de GitHub, una herramienta ampliamente utilizada por desarrolladores…
Introducción En este análisis heurístico exploraremos la experiencia de usuario de la aplicación móvil de GitHub, una herramienta ampliamente…

Introducción

En este análisis heurístico exploraremos la experiencia de usuario de la aplicación móvil de GitHub, una herramienta ampliamente utilizada por desarrolladores y equipos de software para la gestión de repositorios y colaboración en proyectos de código abierto y privados. El objetivo es evaluar la aplicación en función de los principios heurísticos de Nielsen y determinar en qué medida satisface los criterios de usabilidad establecidos.

Hemos seleccionado la versión móvil de GitHub debido a la familiaridad con su versión web y la curiosidad por analizar cómo una herramienta colaborativa enfrenta los desafíos de la movilidad, la adaptabilidad a pantallas más pequeñas y las limitaciones de interacción en dispositivos táctiles.

En este post, definiremos a la persona usuaria, detallaremos la metodología utilizada para el análisis, revisaremos los principios heurísticos de Nielsen en relación con la aplicación y presentaremos un listado priorizado de hallazgos con sus respectivas propuestas de mejora.

Dado que se presenta mucho vocaculario específico de la aplicación y que podría complicar la comprensión de un lector no familiariazado con la aplicación, en el último apartado del documento se recogen en un glosario que puede ayudar a entender mejor el contexto.

Índice de contenido

Metodología

El análisis heurístico de la aplicación móvil de GitHub se ha realizado siguiendo los diez principios de usabilidad de Jakob Nielsen. Para ello, se ha llevado a cabo una evaluación basada en la experiencia directa con la aplicación, observando el flujo de interacción, la claridad de la interfaz y la facilidad de uso en distintas tareas clave, como la navegación entre repositorios, la creación y revisión de pull requests, y la gestión de notificaciones.

El análisis ha sido guiado por los siguientes pasos:

  1. Definición de un perfil de usuario: la aplicación está orientada a un perfil técnico así que es conveniente ponerse en la piel de quien la usará para poder notar sus frustraciones.
  2. Exploración inicial: Se utilizó la aplicación en distintas situaciones cotidianas para familiarizarse con sus funcionalidades y detectar posibles problemas de usabilidad.
  3. Aplicación de principios heurísticos: Se evaluó la aplicación conforme a los diez principios de Nielsen, identificando puntos fuertes y áreas de mejora.
  4. Priorización de hallazgos: Se clasificaron los problemas según su impacto en la experiencia del usuario, destacando aquellos que podrían afectar la eficiencia y efectividad en el uso de la aplicación.
  5. Propuestas de mejora: Para cada hallazgo identificado, se plantearon soluciones que podrían optimizar la usabilidad de la aplicación.

Este enfoque nos permite identificar oportunidades para mejorar la experiencia del usuario en GitHub móvil y proporcionar recomendaciones basadas en principios reconocidos de usabilidad.

Perfil de usuario

Nombre: Javier, 30 años
Ocupación: Desarrollador Full Stack en una empresa de tecnología
Nivel de experiencia: Avanzado (al menos 4 años trabajando con Git y GitHub)

Objetivos con la app móvil

Javier es un desarrollador que ya está muy familiarizado con la versión web de GitHub. Utiliza la app móvil principalmente para mantenerse al tanto de las actualizaciones diarias de su equipo y seguir el progreso de las pull requests, issues, y cambios en los proyectos en los que está involucrado. Prefiere tener acceso rápido a notificaciones y detalles sin necesidad de abrir su ordenador dado que quiere poder desbloquear a su equipo en cualquier momento y en cualquier lugar. Su principal objetivo es revisar y responder a sugerencias de cambios, y realizar tareas administrativas sencillas mientras está fuera de su escritorio o en movimiento.

Escenario de uso

Javier comienza su día revisando las notificaciones en la app móvil sobre los cambios más recientes en sus proyectos. Si algún miembro del equipo ha actualizado un issue o ha abierto una pull request, Javier puede rápidamente revisar los cambios y aprobarlos o comentar si es necesario. Cuando está en una reunión o en movimiento, usa la app para hacer pequeñas modificaciones como asignar tareas a los miembros de su equipo, agregar comentarios o revisar y aprobar el trabajo de su equipo cuando las modificaciones son pequeñas. La app le permite mantenerse al día con el trabajo de su equipo, sin tener que estar pegado al escritorio todo el día.

Expectativas

Javier necesita acceder a información relevante y actualizada de manera eficiente sin perder tiempo navegando por varias pantallas. En objectivo es realizar tareas sencillas como responder a comentarios, asignar issues, aprobar pull requests o modificar configuraciones sin tener que recurrir al ordenador.

Posibles frustraciones

Javier es consciente de que, para tareas más complejas como revisar grandes cambios o comparar el código de manera detallada, necesitará recurrir a la versión web. La pantalla pequeña del móvil no es ideal para ese tipo de trabajo. Además, aunque la app es eficiente para tareas rápidas, la navegación entre proyectos y repositorios podría ser algo confusa dado que hay varias capas de jerarquía dentro de cada proyecto.

Los 10 principios heurísticos de Nielsen

Visibilidad del estado del sistema

GitHub móvil informa a los usuarios sobre el estado de las operaciones mediante notificaciones y barras de progreso. Sin embargo, las actualizaciones no ocurren en tiempo real. Por ejemplo, si otro usuario efectúa un cambio (por ejemplo, elimina la rama que el usuario principal está visualizando), el usuario principal sólo verá el cambio de estado una vez interactúe con la página de nuevo.

Interacción clara en el merge de una pull request

GitHub móvil ofrece un buen ejemplo de visibilidad del estado al realizar un merge. Al iniciar la acción, el botón correspondiente muestra un icono de carga y, una vez finalizada la operación, se transforma para indicar que el merge ha sido exitoso. Todo ocurre dentro del mismo espacio de la interfaz, lo que facilita el seguimiento del proceso y refuerza la comprensión de cada cambio.

Visibilidad del estado del sistema

 

Información desactualizada al visualizar ramas eliminadas

Un caso concreto en el que el principio falla parcialmente es cuando otro usuario elimina una rama que el usuario principal está visualizando. En estas situaciones, GitHub móvil no refleja el cambio de inmediato. El usuario solo descubre que la rama ha sido eliminada tras interactuar nuevamente con la página o refrescarla. Esta falta de actualización en tiempo real puede generar confusión y una falsa sensación de que el sistema está mostrando información actual.

Concordancia entre el sistema y el mundo real

Este principio se refiere a que los sistemas deben hablar el idioma de los usuarios, usando términos, conceptos y convenciones que les resulten familiares, en lugar de utilizar jerga técnica interna o estructuras abstractas. GitHub aplica este principio con eficacia, especialmente considerando que su público principal está compuesto por desarrolladores acostumbrados a trabajar con Git.

Terminología coherente con el entorno de desarrollo

GitHub utiliza una terminología técnica que, aunque especializada, refleja con precisión el lenguaje que los desarrolladores ya conocen a través del uso de Git. Términos como repositorio, commit, branch o pull request están directamente alineados con el funcionamiento de Git y su ecosistema, por lo que resultan naturales para los usuarios del sistema. Esta concordancia reduce la curva de aprendizaje y facilita el uso fluido de la plataforma.

Confusión en el uso de «fork» para nuevos usuarios

Aunque la mayoría de los términos en GitHub reflejan fielmente conceptos del mundo del desarrollo, algunos pueden generar confusión para usuarios menos experimentados. Un ejemplo es el término fork, que en el contexto general significa «bifurcar» o «dividir», pero en GitHub tiene un significado técnico específico: crear una copia de un repositorio para modificarla de forma independiente. Para usuarios nuevos, especialmente aquellos que provienen de contextos educativos o colaborativos más básicos, este término puede no estar del todo claro y requiere aprendizaje adicional o consulta externa para comprender su propósito real.

Control y libertad del usuario

Una buena interfaz debe permitir a los usuarios tomar decisiones con libertad, ofrecer mecanismos claros para deshacer acciones no deseadas y evitar que se sientan atrapados en flujos rígidos. GitHub, como herramienta colaborativa, proporciona a sus usuarios un alto nivel de control sobre sus acciones, aunque hay diferencias notables entre lo que se puede hacer en su versión web frente a la aplicación móvil.

Navegación libre y reversibilidad mediante control de versiones

GitHub permite a los usuarios moverse libremente entre repositorios, ramas y archivos, y revertir acciones gracias al sistema de control de versiones de Git. Además, dependiendo de la configuración de la organización, es posible establecer flujos de trabajo donde ciertos cambios requieren aprobación, lo que da a los equipos un control adicional sobre el código que se integra. Esta combinación de flexibilidad y control asegura que las acciones sean reversibles y estén alineadas con los permisos establecidos por cada entorno de trabajo.

En la imagen se puede observar cómo esta organización ha configurado sus pull request de modo que sólo se puedan mergear cuando los 4 checks han pasado correctamente o cuando se es administrador.

Limitaciones de la app móvil al restaurar ramas

Sin embargo, en la versión móvil de GitHub, los usuarios encuentran limitaciones que reducen esa sensación de control total. Por ejemplo, aunque en la versión web es posible restaurar ramas eliminadas, esta opción no está disponible en la app. Esto significa que, ante una acción accidental o una decisión apresurada, el usuario móvil no tiene la libertad de corregirla desde el dispositivo, lo que puede resultar frustrante o incluso bloquear el flujo de trabajo hasta tener acceso a la versión web.

En el siguiente video se muestra cuán sencilla resulta esta acción en la versión web, mientras que en las imágenes se muestra el proceso en la versión móvil, si bien es cierto que maneja un posible error pidiendo confirmación de la acción, no permite la reversibilidad.

Consistencia y estándares

Los sistemas deben seguir convenciones reconocibles y mantener la coherencia tanto en su diseño como en su comportamiento, para que los usuarios no tengan que preguntarse si distintas palabras, situaciones o acciones significan lo mismo. GitHub móvil respeta los estándares de diseño propios del entorno móvil, y en muchos aspectos mantiene una coherencia visual y funcional con la experiencia general de GitHub.

Diseño visual coherente con la identidad de GitHub

Uno de los aspectos en los que GitHub móvil muestra consistencia es en su identidad visual: el uso del logotipo, los colores característicos y el estilo de los íconos es coherente con la versión web. Además, elementos como los estados de las pull requests (abiertas, cerradas, mergeadas) mantienen la misma codificación por color y terminología, lo cual ayuda a los usuarios a orientarse rápidamente sin necesidad de reaprender conceptos al cambiar de dispositivo.

En las siguientes imágenes se muestra el menú principal sobre la versión web y la aplicación. Puede observarse que a pesar de priorizar categorías distintas, el nombre de las categorías y los iconos que las acompañan son una constante

Menu principal el github web

Diferencias estructurales entre la versión móvil y la web

No obstante, hay diferencias importantes en la estructura de navegación que afectan la consistencia entre plataformas. En la versión web, al seleccionar un repositorio, se presenta directamente su contenido, seguido de secciones como Issues, Pull requests y Actions, lo que permite trabajar con un enfoque claro en un solo proyecto. En esta imagen que se mostró previamente, puede observarse el menú principal dentro de un proyecto.

Menu principal el github web

En cambio, la app móvil organiza estas secciones de manera distinta: al entrar a Issues o Pull requests, se muestra un listado global de todos los proyectos, y el usuario debe aplicar filtros para encontrar los elementos relevantes. Esta ruptura con la lógica de la versión web puede resultar confusa y obliga al usuario a adaptarse a un modelo mental diferente, disminuyendo la sensación de familiaridad. En la siguiente imagen se muestra cómo desde el menú principal de la app se pueden acceder a las diferentes categorías con filtros. Si bien existe una categoría Projects en el menú principal, más tarde se desarrollará que el contenido del apartado es diferente al contenido de la web.

Prevención de errores

Un sistema bien diseñado debe anticiparse a los errores que puedan cometer los usuarios, ya sea reduciendo las posibilidades de que ocurran o advirtiendo antes de que se cometan. GitHub móvil implementa varias estrategias para proteger al usuario en acciones sensibles, pero aún hay situaciones en las que la interfaz no minimiza del todo el riesgo de errores.

Confirmaciones para acciones críticas

En la versión móvil, GitHub toma precauciones adicionales cuando se trata de acciones potencialmente destructivas, como la eliminación de una rama o una rama. A diferencia de la versión web, donde estas acciones son fácilmente reversibles, en la app móvil se consideran más delicadas. Por eso, la aplicación muestra un mensaje de confirmación mediante un pop-up antes de ejecutarlas, reduciendo así la probabilidad de que el usuario cometa un error irreversible por accidente.

Riesgo de errores por interacciones involuntarias

Sin embargo, debido al diseño compacto y táctil de la interfaz móvil, es posible cometer errores con más facilidad. Por ejemplo, los botones de acciones sensibles, como hacer merge de una pull request, a veces están ubicados cerca de otros elementos interactivos o no requieren mantener pulsado para confirmar intención. Aunque se muestra un pop-up de confirmación, este puede ser aceptado sin querer si el usuario toca la pantalla forma mecánica para cerrar el elemento rápidamente. En estos casos, el diseño no previene el error tanto como podría, especialmente considerando que ciertas acciones no se pueden deshacer directamente desde la app.

En la siguiente imagen se muestra cómo el botón de merge está en un elemento que normalmente es interactivo como es un dropdown, lo cual podría llevar a confusión si el usuario trata de cerrar el elemento y por error pulsa el botón.

Reconocimiento en lugar de memorización

Un sistema usable debe permitir que los usuarios identifiquen fácilmente opciones, rutas y estados, sin depender de la memoria. Cuanto más visible y predecible sea la interfaz, menos esfuerzo cognitivo requerirá. GitHub móvil, en general, guía bien al usuario mediante menús y etiquetas claras, aunque existen inconsistencias que obligan a memorizar diferencias de comportamiento entre plataformas.

Menús claros que favorecen la exploración

En la versión móvil de GitHub, los elementos principales de navegación como Issues, Pull requests y Actions están organizados en secciones accesibles desde la pantalla principal. Esta disposición, junto con etiquetas textuales y una jerarquía visual coherente, permite al usuario reconocer fácilmente las opciones disponibles, sin necesidad de recordar rutas complejas o los nombres concretos de los Issues o Pull requests.

Acceso limitado a categorías en “Projects

Una diferencia importante con respecto a la versión web ocurre al acceder a la sección de Projects. En la web, esta vista muestra no solo los Issues, sino también el código, Pull requests, Milestones y otras categorías relacionadas con el proyecto en curso. En cambio, en la versión móvil solo se muestran los Issues organizados por proyectos. Esto obliga al usuario a recordar que los proyectos funcionan de forma distinta en móvil y que, si necesita acceder a otras categorías, tendrá que salir de esa vista y buscar por otro camino. Además, la interfaz no deja claro desde el menú principal que este acceso está limitado, lo que genera confusión y rompe con la lógica de reconocimiento que se espera.

Flexibilidad y eficiencia de uso 

Los sistemas deben estar diseñados para atender tanto a usuarios novatos como a usuarios experimentados, permitiendo atajos y modos de uso eficientes sin sacrificar la simplicidad. GitHub móvil logra ofrecer una experiencia bastante ágil para tareas puntuales, aunque ciertas limitaciones de formato afectan la eficiencia en tareas más complejas.

Respuesta rápida a comentarios en pull requests

Una funcionalidad destacada de la app móvil es la posibilidad de revisar y responder comentarios en pull requests de forma rápida y contextual. Por ejemplo, al recibir una notificación sobre un comentario en una línea específica de código, el usuario puede abrir directamente esa parte del diff (vista comparada de versiones), ver el comentario y responderlo sin necesidad de navegar manualmente por todo el archivo. Esta eficiencia resulta especialmente útil para usuarios avanzados que están revisando código de otros, resolviendo dudas o aprobando pequeños cambios desde el móvil, manteniendo así el ritmo del equipo aunque no estén en un escritorio.

Lectura y comparación de cambios limitada por la pantalla

Sin embargo, la eficiencia disminuye cuando se trata de tareas más complejas como revisar código detalladamente o comparar múltiples commits. La naturaleza textual y densa de estas tareas, combinada con las limitaciones de espacio en una pantalla pequeña, hace que la experiencia sea más lenta e incómoda. Aunque técnicamente es posible, requiere más esfuerzo visual y navegación adicional, lo que termina restando flexibilidad al usuario que busca profundidad de análisis sin cambiar de dispositivo.

Estética y diseño minimalista

El diseño debe evitar el desorden visual y centrarse solo en lo esencial, ayudando al usuario a enfocarse en la tarea sin distracciones. GitHub móvil adopta un enfoque minimalista, que en general favorece la experiencia, aunque en algunos casos puede resultar demasiado austero.

Interfaz limpia que prioriza la jerarquía del contenido

La aplicación organiza la información de forma clara y sin elementos visuales innecesarios. Por ejemplo, al abrir una pull request, se muestran solo los datos clave: título, estado, revisores y cambios asociados. Las acciones más importantes están destacadas, mientras que las secundarias permanecen discretas hasta que se necesitan. Esta jerarquía visual permite al usuario entender rápidamente el estado de un proceso sin distraerse con información irrelevante. Además, el uso de espacios amplios y colores neutros contribuye a una sensación de orden y focalización.

Minimalismo que puede resultar monótono y poco informativo

No obstante, ese mismo enfoque minimalista puede, en ciertos contextos, volverse excesivo. Por ejemplo, en la navegación dentro de secciones como Issues o Pull requests, la interfaz se vuelve tan homogénea que obliga al usuario a leer con atención cada título para saber en qué parte exacta de la app se encuentra. La falta de elementos visuales distintivos, como iconos persistentes o colores que indiquen contexto, dificulta la orientación rápida. Esto no solo genera una experiencia más monótona, sino que también aumenta la carga cognitiva, especialmente cuando el usuario busca moverse con agilidad entre secciones.

Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores

Un buen sistema no solo debe evitar errores, sino también ayudar al usuario a entenderlos cuando ocurren y ofrecer caminos claros para solucionarlos. GitHub móvil aplica este principio correctamente en varios escenarios preventivos, aunque en ciertos casos críticos no ofrece el mismo nivel de recuperación que la versión web.

Indicaciones claras para acciones críticas

GitHub proporciona mensajes de error claros y ofrece soluciones para corregir problemas antes de que se produzcan. Por ejemplo, la aplicación ayuda a los usuarios a identificar conflictos de merge antes de que estos ocurran y alerta sobre ramas desactualizadas o bloqueadas, permitiendo resolverlos con antelación. Esta anticipación reduce errores y ofrece un entorno más seguro para trabajar desde el móvil.

Sin opción de recuperación tras eliminación de ramas

Sin embargo, en la acción crítica de eliminación de ramas, la aplicación móvil no ofrece mecanismos de recuperación. Si bien este ejemplo ya se propuso anteriormente como ejemplo de falta de libertad del usuario, en caso de haber eliminado la rama por error este ejemplo aplica también para este principio al dejar al usuario sin una vía clara de recuperación, lo cual puede ser muy problemático para favorecer el trabajo fluido de los miembros del equipo.

Ayuda y documentación 

Aunque el ideal es que un sistema sea lo suficientemente claro como para no necesitar ayuda externa, siempre debe ofrecer soporte accesible para cuando sea necesario. GitHub móvil incorpora accesos directos a documentación, y se apoya en una comunidad muy activa que facilita la resolución de dudas. Aun así, su enfoque está claramente orientado a usuarios con conocimientos previos en Git, lo que deja poco espacio para la educación progresiva de principiantes.

Acceso rápido a documentación y comunidad

La aplicación no incluye enlaces directos a documentación oficial, términos técnicos y recursos de ayuda desde diferentes partes de la interfaz, sin embargo una búsqueda rápida en un buscador nos dará varias respuestas sobre diferentes plataformas dado que el ecosistema se nutre de una vasta comunidad de desarrolladores en GitHub y foros como Stack Overflow ofrecen soluciones inmediatas para todos de los problemas comunes y la mayoría de los menos frecuentes, lo que convierte a la plataforma en un entorno de aprendizaje continuo para usuarios con cierta experiencia.

Falta de orientación para usuarios principiantes

Sin embargo, la aplicación móvil no hace mucho por enseñar a quienes no están familiarizados con Git o con los flujos de trabajo típicos de GitHub. No hay indicaciones paso a paso, ni explicaciones accesibles de conceptos clave como forks, branches o pull requests. Esto puede hacer que los usuarios menos técnicos se sientan desorientados o dependientes de recursos externos, especialmente si están usando la app como primer punto de contacto con el ecosistema. Una integración más visible de ayudas contextuales o explicaciones básicas en lenguaje accesible podría mejorar significativamente la experiencia de quienes están empezando.

Mejoras en la UX: Errores y Soluciones

En esta sección se presentan los principales problemas de usabilidad detectados durante el análisis de la aplicación, priorizados por gravedad en su impacto en la experiencia del usuario. Cada hallazgo se clasifica en función de su gravedad y se justifica el motivo por el cual se considera un problema relevante para la navegación, productividad o satisfacción del usuario. Además, se incluyen propuestas concretas para mejorar cada uno de estos problemas, con el objetivo de optimizar la experiencia de los usuarios y facilitar su interacción con la aplicación. A través de estas sugerencias, buscamos proporcionar soluciones prácticas que aborden los aspectos más críticos y, a su vez, mejorar la eficacia y eficiencia del flujo de trabajo del usuario.

1. Acceso limitado a categorías en Projects /5

Princpios impactados
  • Reconocimiento en lugar de memorización
  • Consistencia y estándares
    Justificación

Una diferencia notable entre la versión móvil y la versión web de GitHub se presenta al acceder a la sección de Projects. En la interfaz web, esta vista permite navegar entre múltiples categorías relevantes del proyecto, como Issues, Pull Requests, Milestones y más, manteniendo una estructura consistente y predecible. Sin embargo, en la app móvil, al acceder a un proyecto solo se muestran los Issues, omitiendo otras categorías clave. Esta limitación no se comunica de forma clara en el menú principal, lo que puede llevar a confusión y obliga al usuario a recordar que el flujo de navegación en móvil es distinto. Este tipo de inconsistencia rompe con la lógica de reconocimiento y genera fricción, especialmente para usuarios acostumbrados a la versión web.

Propuesta de mejora

Para reducir la carga cognitiva y mantener la coherencia entre plataformas, se sugiere:

  • Unificar la experiencia de navegación incorporando dentro de la vista del proyecto accesos directos a otras categorías, como se hace en la versión web.

  • Añadir una vista expandida de proyectos en la app, permitiendo que el usuario vea todos los elementos relacionados con un proyecto específico sin tener que salir de la sección.

2.  Lectura y comparación de cambios limitada por la pantalla /5

Princpios impactados
  • Flexibilidad y eficiencia de uso
Justificación

GitHub móvil está optimizado para tareas rápidas y gestión de tareas rápidas de conversación, pero la naturaleza del producto requiere la comparación detallada de cambios en el código. En la revisión de una sugencia de cambio, los usuarios deben ver las diferencias entre dos versiones de un mismo archivo, con las líneas eliminadas en rojo y las añadidas en verde. Sin embargo, en móvil esto se vuelve muy complicado porque la pantalla pequeña impide una visualización efectiva en paralelo. Esta limitación afecta gravemente la eficiencia y hace que los usuarios prefieran esperar hasta tener acceso a una versión de escritorio en lugar de utilizar la aplicación móvil.

Propuesta de mejora

Para mejorar esta experiencia, se podrían implementar alternativas como:

    • Un modo de comparación, que permita alternar rápidamente entre las versiones vieja y nueva del código con un simple gesto o desplazamiento lateral.
    • Una resaltación más clara y compacta de los cambios dentro del mismo bloque de texto, en lugar de una visualización de línea completa, optimizando el uso del espacio.
    • La opción de zoom dinámico, que permita alejar las secciones con cambios para no perder el contexto general del documento.
    • Mantener el modo de vista dividida vertical opcional donde, en dispositivos de mayor pantalla (como tablets), se puedan ver ambas versiones una junto a la otra.

3. Opción de recuperación tras eliminación de ramas /5

Princpios impactados
  • Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores
  • Control y libertad del usuario
Justificación

Como ya se comentó, en la versión móvil de GitHub, la eliminación de ramas es una acción crítica que, aunque va acompañada de un mensaje de confirmación, no ofrece ninguna vía de recuperación directa una vez ejecutada. A diferencia de la versión web, donde el sistema permite restaurar inmediatamente una rama eliminada mediante un botón visible y accesible, en la app móvil esta funcionalidad no existe. Esto deja al usuario en una situación de vulnerabilidad dado que si la acción fue accidental o si luego se reconsidera, no hay forma de revertirla desde el móvil ni se informa que sea posible hacerlo desde la web. Esta limitación reduce la sensación de control y seguridad, especialmente en un entorno colaborativo donde los errores pueden afectar a otros miembros del equipo y ralentizar el flujo de trabajo.

Propuesta de mejora

Para solventar esta limitación y alinear la experiencia móvil con la web, se propone:

  • Añadir un botón de restauración tras la eliminación de una rama, visible en el mismo lugar donde se confirmó la acción, tal como sucede en la versión web.

  • Si no se pudiese implementar el botón, incluir un mensaje que informe al usuario que la acción puede revertirse desde la versión web.

4.Diferencias estructurales entre la versión móvil y la web /5

Princpios impactados
  • Consistencia y estándares
  • Flexibilidad y eficiencia de uso
Justificación

Aunque GitHub móvil sigue las convenciones generales del diseño de aplicaciones para dispositivos portátiles, la falta de consistencia con la versión web introduce una curva de aprendizaje innecesaria. Los usuarios familiarizados con la versión web pueden sentirse confundidos al navegar por la interfaz móvil, lo que impacta negativamente en la adopción de la aplicación.

Propuesta de mejora

Para mejorar la consistencia entre la versión móvil y la versión web, y facilitar la navegación, se podría:

  • Replicar la estructura jerárquica de navegación de la web, permitiendo primero seleccionar un proyecto y luego acceder desde ahí a todas sus secciones (Code, Issues, Pull Requests, Actions, etc.).

  • Incorporar una navegación contextual dentro de cada proyecto, mostrando de forma clara y agrupada todos los elementos asociados al repositorio actual.

  • Añadir señales visuales o navegación lateral/tabulada para moverse fácilmente entre las secciones internas del proyecto, manteniendo una experiencia más coherente y reconocible, del mismo modo que la versión web tiene la barra de navegación en horizontal en tabs.

5. Información desactualizada al visualizar ramas eliminadas /5

Princpios impactados
  • Visibilidad del estado del sistema
Justificación

GitHub móvil informa a los usuarios sobre el estado de las operaciones mediante notificaciones y barras de progreso. Sin embargo, las actualizaciones no ocurren en tiempo real. Por ejemplo, si otro usuario efectúa un cambio (como eliminar una rama que el usuario principal está visualizando), el usuario solo verá el cambio de estado una vez interactúe con la página nuevamente. Aunque esto no impide completar tareas, puede generar confusión o la necesidad de repetir acciones, como presionar el botón de merge dos veces si no se actualiza correctamente el estado del sistema.

Propuesta de mejora

Para mitigar este problema, se podrían implementar soluciones como:

      • Actualización en tiempo real de los cambios en el estado del sistema sin necesidad de recargar la página manualmente.
      • Indicadores visuales que alerten al usuario cuando un cambio externo afecte el contenido que está viendo.
      • Confirmaciones más claras al ejecutar acciones críticas, asegurando que el estado reflejado en la interfaz es el más actualizado.

6. Minimalismo que puede resultar monótono y poco informativo /5

Princpios impactados
  • Estética y diseño minimalista
  • Reconocimiento en lugar de memorización
Justificación

GitHub móvil apuesta por un diseño limpio y funcional, con una interfaz minimalista que favorece la concentración y la simplicidad. Sin embargo, este enfoque puede resultar excesivamente simplificado, generando una experiencia monótona y poco informativa. La escasa diferenciación visual entre secciones hace que, en ocasiones, el usuario deba esforzarse por recordar en qué parte de la aplicación se encuentra o qué ruta siguió para llegar allí. Esta falta de dinamismo y retroalimentación visual puede afectar tanto la orientación como la eficiencia en la navegación, especialmente en tareas repetitivas o cuando se gestionan múltiples repositorios.

Propuestas de mejora

Para enriquecer la experiencia sin comprometer la claridad del diseño, se proponen las siguientes mejoras:

  • Mayor diferenciación visual entre secciones, mediante encabezados más destacados, variaciones sutiles de color o secciones con estilos propios que ayuden a situarse en la interfaz.

  • Mejora en la navegación y la localización, incorporando elementos como breadcrumbs o rutas visibles que permitan ver el recorrido dentro de la app.

  • Íconos más distintivos y consistentes dentro de las secciones, por ejemplo manteniendo los iconos a color del menú principal pero no solo en los menús, para reforzar el reconocimiento inmediato de funciones.

  • Estilos tipográficos variados y jerarquizados que guíen la atención del usuario y hagan más clara la estructura de la información.

Glosario

Repositorio:
Espacio donde se almacenan los archivos de un proyecto, junto con todo su historial de versiones. Es como una «caja» donde se guarda todo el trabajo relacionado con un proyecto de desarrollo de software.

Proyecto:
Colección de issues, pull requests y tareas que se organizan para gestionar el flujo de trabajo de un equipo. Es común que un proyecto esté vinculado a un repositorio, pero el concepto de proyecto puede ser más amplio, permitiendo a los equipos organizar tareas y gestionar su progreso de manera eficiente.

Issues:
Tarea o un problema que necesita ser resuelto. Los issues pueden ser errores en el código, solicitudes de nuevas características o cualquier otro tipo de trabajo relacionado con el proyecto. Los usuarios pueden asignar issues a otras personas, agregar comentarios y darles seguimiento hasta que se resuelvan.

Pull Requests:
Solicitud para integrar cambios de una rama (una versión separada del proyecto) al repositorio principal. Es una parte clave del proceso de revisión en GitHub, ya que los miembros del equipo pueden discutir y revisar los cambios antes de que sean fusionados (merge) en el proyecto.

Merge:
Proceso de integrar los cambios realizados en una rama de un proyecto en la rama principal (o cualquier otra rama en la que se desee fusionar). Cuando un desarrollador hace cambios en una rama, esos cambios deben ser fusionados de nuevo al repositorio principal para que se conviertan en parte del proyecto. El merge puede implicar la resolución de conflictos si los cambios en ambas ramas afectan a las mismas partes del código.

Debate0en Evaluación heurística de la aplicación móvil de GitHub

No hay comentarios.

Publicado por

P2 – Anáisis heurístico sonbre AliExpress

Publicado por

P2 – Anáisis heurístico sonbre AliExpress

INTRODUCCIÓN En este post vamos a hacer un análisis heurístico del sitio web de AliExpress. Elegimos esta página porque, aunque es conocida…
INTRODUCCIÓN En este post vamos a hacer un análisis heurístico del sitio web de AliExpress. Elegimos esta página porque,…

INTRODUCCIÓN

En este post vamos a hacer un análisis heurístico del sitio web de AliExpress. Elegimos esta página porque, aunque es conocida y recibe miles de visitas al día, desde mi punto de vista es un poco caótica y seguro que hay cosas que se pueden mejorar.

METODOLOGÍA 

Para realizar el análisis nos basaremos en los 10 principios de Jakob Nielsen para evaluar la usabilidad del sitio. Luego, clasificaremos los problemas que encontremos de acuerdo con su gravedad, de los más críticos a los menos importantes, y explicaremos por qué les damos esa clasificación.

LOS 10 PRINCIPIOS HEURÍSTICOS DE NIELSEN

1.Visibilidad del estado del sistema.

Este principio nos habla de cómo el sitio web debe proporcionar información al usuario en qué estado se encuentra en cada momento.

Buena práctica: Cuando exploras el menú de AliExpress y haces clic en una categoría, en la parte superior de la página aparece un indicador que te muestra dónde estás. Por ejemplo, si entras en la categoría “Cabello y pelucas”, verás esa referencia en la parte superior.

Mala práctica: El problema es que, si dentro de una categoría eliges una subcategoría, como “tupé”, ya no aparece ninguna pista sobre en qué sección o subcategoría estás. Esto puede hacer que el usuario se pierda y no sepa cómo volver atrás fácilmente.


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

Este principio se basa en que el usuario debe reconocer fácilmente los conceptos y elementos de una página porque le resultan familiares. Por ejemplo, en Windows, la papelera de reciclaje nos hace pensar en tirar cosas, lo que facilita su uso.

Buena práctica: AliExpress usa bien los iconos en su interfaz. Por ejemplo, el carrito representa las compras online, y el reloj indica el tiempo restante de una oferta. Son símbolos universales que el usuario identifica de manera intuitiva.

Mala práctica: En general, no encontré grandes problemas en este aspecto. Parece que los diseñadores UX de AliExpress lo tienen bien en cuenta, ya que ayuda al usuario en la navegación de su sitio web. Lo único que me generó confusión fue un icono en la parte derecha de la página (el segundo en la imagen de ejemplo). Al principio, no entendía qué significaba, pero luego descubrí que era un radar que, al hacer clic, te lleva a una página de radar de tiendas.

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

Este principio se trata de que cualquier usuario debe poder equivocarse en una página web y tener la opción de corregirlo o volver atrás sin problema. Si un sitio no permite esto, puede generar confusión y frustración, lo que podría hacer que el usuario termine abandonando la página.

Buena práctica: Si agregas un producto al carrito por error, puedes ir al carrito y eliminarlo sin problema, evitando compras no deseadas. Además, durante el proceso de pago, siempre tienes la opción de cancelarlo o retroceder en cualquier momento.

Mala práctica: Cuando haces clic en una subcategoría dentro de AliExpress, la página te redirige sin mostrar un botón o enlace claro para regresar a la categoría anterior. Esto puede desorientar al usuario y hacer que la navegación sea más confusa de lo necesario.

4.Consistencia y estándares.

Al diseñar una web, es importante seguir los estándares ya establecidos para no confundir a los usuarios. Por ejemplo, si en lugar del clásico ícono de las tres rayas para abrir un menú usáramos otro símbolo que no se parezca en nada a un menú, la gente no sabría cómo interactuar con él. Mantenerse dentro de las normas ayuda a que la navegación sea más intuitiva y fácil para todos.

Buena práctica: Un buen ejemplo de esto en AliExpress es el uso del ícono de tres rayas para indicar el menú y el símbolo de la lupa para señalar la barra de búsqueda. Son elementos estándar que los usuarios reconocen de inmediato, haciendo la navegación más intuitiva.

Mala práctica:  AliExpress usa demasiado el color rojo en sus botones de compra. Entiendo que el rojo llama la atención y es ideal para los botones de acción, pero usarlo en exceso puede generar confusión. Por ejemplo, un botón rojo para continuar con el pago podría no ser la mejor opción, ya que ese color suele asociarse con advertencias o errores. Sería más claro si usaran el color naranja corporativo de la marca o algún otro tono llamativo pero menos confuso.

5.Prevención de errores.

Al diseñar un sitio web, hay que intentar que los usuarios cometan la menor cantidad de errores posible. Y si llegan a ocurrir, es clave que la página les avise con un mensaje claro. Por ejemplo, cuando alguien escribe mal su contraseña, lo ideal es que aparezca un aviso indicando que es incorrecta.

Buena práctica: En AliExpress, cuando introduces el número de tu tarjeta de crédito y no tiene la cantidad de dígitos correcta, aparece un mensaje de advertencia de inmediato. Esto ayuda a prevenir errores antes de seguir adelante, lo que mejora la experiencia del usuario.

Mala práctica: Al registrarte en AliExpress, solo te piden que escribas tu correo y contraseña una vez. Esto no es lo ideal, porque si te equivocas al escribirlos, podrías tener problemas para acceder más tarde. Lo mejor sería que pidieran confirmarlos escribiéndolos dos veces, como hacen muchas otras webs, para evitar errores desde el principio.

6.Reconocimiento antes que recuerdo.

En una web, lo ideal es que las acciones, opciones y elementos sean visibles para que el usuario no tenga que recordar constantemente dónde está o qué está haciendo. Todo debe estar a la vista y ser fácil de identificar.

Buena práctica: En AliExpress, cuando pasas el cursor sobre algunos iconos, aparece una pequeña descripción que te indica de qué se trata. Esto es útil porque te ayuda a entender su función antes de hacer clic. Sin embargo, hay varios iconos en la plataforma que no muestran esta información, lo que puede generar confusión. En la imagen del blog hemos puesto un ejemplo donde sí funciona bien, pero lamentablemente no siempre es así.

Mala práctica: Al comprar en AliExpress, no aparece una barra o indicador que muestre los pasos del proceso de compra. En otras webs, es común ver algo como: añadir dirección → elegir método de envío → seleccionar forma de pago → finalizar compra. Esto ayuda al usuario a ubicarse y saber qué le falta por completar. En AliExpress, al no haber esta guía visual, la experiencia puede ser un poco más confusa.

7.Flexibilidad y eficiencia en el uso.

Para ofrecer una mejor experiencia al usuario, tu web debe tener atajos que los usuarios más experimentados puedan aprovechar, pero sin sacrificar la facilidad de navegación para los novatos. Todos deberían sentirse cómodos usando el sitio, sin importar su nivel de experiencia.

Buena práctica: AliExpress tiene una barra de búsqueda en la parte superior de la página, lo que permite a los usuarios con experiencia buscar directamente el producto o subcategoría que desean, sin tener que navegar por todo el menú.

Mala práctica: A la hora de realizar una compra, tienes que volver a ingresar los datos de tu tarjeta de crédito. Si AliExpress guardara esta información o tuviera un botón de «compra rápida» para usuarios frecuentes, se evitarían estos pasos extra, haciendo la compra más rápida y fácil. Un botón de este tipo permitiría a los usuarios realizar la compra con un solo clic, ahorrándoles tiempo.

8.Diseño estético y minimalista.

Al diseñar un sitio web, es importante mostrar solo la información relevante y necesaria. Si sobrecargamos la página con detalles innecesarios, lo que hacemos es distraer al usuario y perder la atención en lo que realmente importa. Un diseño limpio y directo hace que el usuario se enfoque mejor en lo esencial.

Buena práctica: En la página de Inicio de AliExpress, el diseño es bastante limpio y no está sobrecargado. Solo tienen un banner estático que atrae la atención, lo cual es una buena estrategia. Muchas otras webs tienen carruseles de banners que terminan dispersando la atención del usuario, sin que se queden con un mensaje claro.

Mala práctica: En la sección de Inicio de  «Seguro que te gusta», que muestra artículos recomendados, la página sigue cargando más filas de productos a medida que haces scroll. Esto puede resultar molesto, ya que si el usuario quiere ir al pie de página, se le hace difícil porque la página sigue cargando más contenido. Esta sección estaría mejor si solo mostrara un número limitado de artículos y luego ofreciera un enlace para seguir navegando en otra página. Otro punto a destacar es su menú, es bastante extenso con categorías innecesarias, lo que podría simplificarse sin perder claridad.

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

Los mensajes de error en un sitio web deben ser claros y fáciles de entender. Es importante que estén escritos en un lenguaje sencillo, para que cualquier usuario pueda identificar el problema y saber cómo solucionarlo.

Buena práctica: Cuando intentas iniciar sesión en AliExpress y cometes un error con la contraseña, el sitio te muestra un mensaje claro que explica por qué no se pudo iniciar sesión. Esto hace que sea mucho más fácil para el usuario corregir el problema rápidamente.

Mala práctica: En este caso, no hemos encontrado ejemplos de malas prácticas relacionadas con los errores. Después de realizar algunas compras y navegar por el sitio, no encontramos mensajes de error confusos. Parece que los diseñadores UX han trabajado bien en este aspecto, asegurándose de que todo funcione correctamente.

10.Ayuda y documentación.

Este principio se trata de tener secciones de ayuda claras y accesibles para que los usuarios puedan solucionar cualquier problema o duda que tengan mientras navegan por el sitio web.

Buena práctica: AliExpress tiene una sección de ayuda donde puedes encontrar preguntas frecuentes y un chat automatizado que guía al usuario para resolver dudas rápidamente.

Mala práctica: Aunque AliExpress tiene una sección de ayuda, no es muy visible. Para acceder a ella, tienes que ir al menú de usuario y seleccionar «Atención al cliente». Esta sección debería estar más accesible, y sobre todo, el chat en vivo debería ser más fácil de encontrar para facilitar la solución de problemas de los usuarios.

 

CLASIFICACIÓN SEGÚN GRAVEDAD

A continuación, hemos organizado algunas malas prácticas en la web de AliExpress, ordenadas de menos a más grave en cuanto a la experiencia del usuario. Además, proponemos posibles soluciones para mejorarlas.

Ayuda y documentación: Un problema común en muchos sitios web, incluido AliExpress, es que la sección de ayuda no es fácil de encontrar. Esto puede hacer que los usuarios tengan dificultades para resolver sus dudas o problemas. Se puede solucionar incluyendo un ícono de «?» en el encabezado de la página, para que el usuario tenga acceso rápido a la ayuda sin tener que buscar en menús ocultos. Esto haría que la asistencia de ayuda fuese más accesible para todos.

Prevención de errores: Un problema en el registro de AliExpress es que solo te piden escribir la contraseña una vez. Esto puede llevar a errores tipográficos, haciendo que el usuario no pueda iniciar sesión más tarde, lo que genera frustración y puede hacer que abandone la página. Se solucionaría si incluyeran un campo para repetir la contraseña y validar que ambas coincidan antes de completar el registro, y si hay un error, mostrar un mensaje claro para que el usuario pueda corregirlo antes de finalizar el proceso.

Diseño estético y minimalista: En general, AliExpress es una página bastante recargada, pero uno de los puntos más problemáticos es la sección «Seguro que te gusta». A medida que haces scroll, sigue cargando más y más productos, lo que puede resultar pesado y hacer que el usuario abandone la página. Una posible solución sería limitar la cantidad de productos visibles y añadir un botón o enlace tipo «Ver más recomendaciones«, que lleve a otra página con más opciones. Esto haría la navegación más fluida y menos abrumadora.

Visibilidad del estado del sistema: Una de las malas prácticas en AliExpress es que, cuando entras en una subcategoría, no hay ninguna indicación clara de dónde te encuentras. Esto puede desorientar al usuario. Una solución sencilla sería agregar un título en la parte superior de la página, debajo del encabezado. Por ejemplo, si estás en la categoría de Tupés, debería aparecer un mensaje que lo indique claramente.

Libertad y control por parte de la persona usuaria: Para mí, este es el mayor problema de la página. Cuando un usuario entra en una subcategoría, no solo no sabe dónde está, sino que tampoco hay un enlace claro para volver atrás. Esto puede hacer que la navegación sea frustrante. La solución sería añadir una flecha en la parte superior con un texto como “Volver a la categoría Bolsos”, facilitando que el usuario regrese sin complicaciones.

Debate0en P2 – Anáisis heurístico sonbre AliExpress

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.