Versión 2 con IAG

Tras las pruebas realizadas con Rememora v1 y el análisis de datos posterior, se han detectado problemas de usabilidad que vamos a intentar resolver apoyándonos en la IAG. Se identifican todos los problemas, se los comunicamos a la IAG e implementamos la propuesta realizada. Todas estas propuestas implementadas sobre Rememora generan una nueva versión, la v2.

Problema detectado: botones

Problema

Los participantes de la Muestra B tienen problemas para realizar una funcionalidad porque no son capaces de identificar en la pantalla los botones. Los usuarios, al no estar seguros, tienen miedo de tocar en un sitio equivocado. Son capaces visualizar todos los elementos de la pantalla, pero presentan problemas para identificar que los botones son acciones. Además, los botones actuales presentan el siguiente problema:

No todos los usuarios escuchan el ‘beep’(sonido) cuando se pulsa.
Los usuarios presentan dudas de si se ha pulsado o no el botón.
Los usuarios presentan dificultades de ver el botón o el texto del botón cuando está en un estado deshabilitado.

Prompt

Actúa como un experto en diseño de interfaces y experiencia de usuario. En una aplicación para tablet y para usuarios mayores de 70 años existen botones diseñados según la guía de estilos de Material Design 3.

Cuando se pulsa en un botón, se muestra una animación de una onda sobre el botón y cambia de color mientras se pulse.

Los usuarios tienen problemas para identificar qué elemento de la pantalla es un botón. Teniendo en cuenta las características de los usuarios y que puede contener múltiples textos asociados como: música, vídeos, fotos… Describe de forma precisa y detallada como debe ser el diseño de un botón adecuado para esta aplicación siendo lo más importante la experiencia de usuario. Además, diseña una propuesta.

Solución Propuesta por la IAG

Diseñar un botón para una aplicación dirigida a personas mayores de 70 años implica considerar varios aspectos importantes para asegurar que la interfaz sea accesible, fácil de usar y comprender. Aquí te detallo un diseño enfocado en estas necesidades:

Aspectos clave del diseño:
- Tamaño Grande: Los botones deben ser de tamaño grande para facilitar la interacción, considerando posibles dificultades motoras o de precisión en el toque. Un tamaño recomendado podría ser de al menos 1.5 pulgadas de ancho por 1 pulgada de alto, pero esto puede ajustarse según el diseño general de la interfaz.
- Contraste Elevado: Utiliza colores con alto contraste entre el texto del botón y su fondo, así como entre el botón y el fondo de la aplicación. Por ejemplo, texto negro sobre fondo blanco o blanco con fondo azul oscuro. Esto mejora la legibilidad para usuarios con visión reducida.
- Texto Claro y Grande: El texto dentro del botón debe ser grande, claro y de fácil lectura. Se recomienda una tipografía sans-serif, como Arial o Helvetica, con un tamaño mínimo de 18 puntos. Evitar el uso de mayúsculas continuas ya que puede dificultar la lectura; en su lugar, utilizar capitalización de oraciones o títulos.
- Iconografía Intuitiva: Junto al texto, se puede incluir iconografía simple y reconocible que represente la acción del botón (como una flecha para "Avanzar" o un triángulo para "Reproducir"). Asegúrate de que estos íconos sean grandes y sencillos.
- Feedback Táctil y Sonoro: Al interactuar con el botón, proporcionar una respuesta tanto táctil (vibración) como sonora (un sonido corto y suave) para confirmar la acción, ayudando a los usuarios con limitaciones visuales o auditivas.
- Feedback Visual: Cambiar el color del botón: Al pulsar un botón, este puede cambiar de color durante un breve periodo de tiempo para indicar que se ha activado. Añadir una animación: Al pulsar un botón, se puede mostrar una pequeña animación que confirme la acción.
- Bordes Redondeados: Los botones con bordes redondeados son generalmente más agradables y fáciles de interactuar. Un radio de borde de 5-10% del tamaño del botón puede ser suficiente.
- Espaciado Adecuado: Asegúrate de que haya un espacio suficiente entre botones para evitar toques accidentales. Un margen de al menos 0.5 pulgadas alrededor de cada botón puede ser una buena práctica.
- Asegúrate de que los botones sean grandes y tengan texto o iconos grandes y claros (por ejemplo, un ícono de cámara para 'Fotos', una claqueta para 'Vídeos', una nota musical para 'Música' y un micrófono para 'Audios').
Ejemplo de Diseño:
- Fondo: Blanco
- Color del botón: Azul oscuro
- Texto: Blanco, tipografía Arial, tamaño 22 puntos
- Icono: Sencillo, ubicado a la izquierda del texto, con tamaño proporcional al texto
- Forma: Rectangular con bordes redondeados o Circular.
- Feedback: Vibración suave y sonido de clic al tocar
Diseño propuesto:

Cambios en el diseño

Las mejoras incluyen:

Diseño más cercano al propuesto por la IAG.
Vibración cuando el usuario pulsa en un botón. El botón inicial ya contaba con sonido.
Cambio de color del botón cuando se pulsa. En la v1 se produce un efecto Ripple que es un efecto onda de color gris claro. Ahora se cambia el color por completo.
Cambio de color cuando el botón está en estado deshabilitado. En la v1 el botón deshabilitado era color gris. Ahora el botón conserva el diseño cuando está en estado deshabilitado.

Problema detectado: menú de navegación

Problema

Los participantes de la Muestra B presentan dificultades para pasar de una fotografía a otra (avanzar o retroceder), reproducir un vídeo, canción o audio.

Se repite un patrón en la mayoría de los usuarios: cuando están en una sección (fotos, vídeos, música o audio) y tienen que visualizar o reproducir otro fichero, el usuario pulsa de nuevo en el botón de la sección. Por ejemplo, si el usuario está en la sección ‘Fotos’ tienen que pasar a la siguiente foto, vuelve a pulsar sobre el botón del menú principal ‘Fotos’.

Además, no saben identificar cuantas fotos, vídeos, música o audios hay disponibles por tanto sólo reproducen el primer archivo.

Prompt

Actúa como un experto en diseño de interfaces y experiencia de usuario. En una aplicación para tablet y para usuarios mayores de 70 años tiene una única pantalla formada por un menú principal situado en la parte izquierda y ocupando un 20% de la pantalla. El menú principal tiene cinco opciones representada por un botón cada una de ellas. Las opciones son: Fotos, Vídeos, Música, Audios y Ayuda.

Cuando el usuario pulsa el botón ‘Fotos’, se muestra una galería de imágenes en el 70% de la pantalla restante. Debajo de esta galería se muestran dos botones para pasar avanzar o retroceder fotos.

Los usuarios presentan problemas a la hora de visualizar todas las fotografías disponibles en la aplicación. El usuario no es capaz de pulsar el botón ‘Siguiente’ que permite mostrar la foto siguiente.

Describe de forma precisa y teniendo en cuenta que se desarrollaran los cambios en la interfaz de la aplicación, cómo podemos mejorar esta interfaz de usuario. Diseña una imagen con tu propuesta.

Solución propuesta por la IAG

Para resolver el problema que tienen los usuarios mayores al interactuar con el menú principal en la aplicación para tablet, debemos centrarnos en mejorar tanto la visibilidad como la usabilidad de los elementos de la interfaz. Aquí hay un enfoque detallado para abordar y mejorar la situación:

Separar en dos pantallas el diseño actual. En la primera pantalla estará el menú principal y en la segunda pantalla se mostrará la opción seleccionada en el menú principal con el menú de navegación. Se pretende dejar las pantallas lo más sencillas posibles y separar funcionalidades.
Simplifica las opciones del menú si es posible, agrupándolas en categorías más amplias para reducir la carga cognitiva.
Usa etiquetas claras y descriptivas para cada opción del menú de navegación.
Mover el menú inferior a la parte superior de la pantalla: Esta ubicación es más visible y accesible para los usuarios, especialmente para las personas mayores que tienen dificultades para mirar hacia abajo.
Imagen del diseño propuesto:

Cambios en el diseño

Teniendo en cuenta las soluciones propuestas por la IAG se realizan dos cambios que alteran el diseño anterior:

El menú principal se traslada a otra pantalla.
El menú de navegación se mueve de la parte inferior a la parte superior.

Problema nuevo: botón volver al menú principal

El crear una nueva pantalla para el menú principal provoca que se tenga que añadir una acción que permita volver al menú principal cuando se esté visualizando o reproduciendo un archivo multimedia. Para diseñar y ubicar el nuevo elemento, se usa la IAG.

Prompt

Actúa como un experto en diseño de interfaces y experiencia de usuario. En una aplicación Android para tablets y con usuarios mayores de 70 años, hay dos pantallas. En la pantalla principal se muestra un menú con opciones. Cuando se selecciona una de estas opciones se muestra la segunda pantalla. En esta segunda pantalla hay un carrusel de fotografías con botones grandes para navegar entre las fotografías. Los usuarios que usan esta aplicación son personas mayores de 70 años. Necesito dar la opción a los usuarios de volver desde la segunda pantalla a la primera (menú principal). Dime de una forma precisa y con detalles cómo puedo implementar una solución visual para que el usuario pueda volver al menú principal teniendo en cuenta las características de los usuarios a los que se destina la aplicación.

Propuesta realizada por la IAG

Para diseñar una interfaz amigable para usuarios mayores de 70 años, especialmente en una aplicación para tabletas que incluye navegación entre dos pantallas principales, es crucial considerar la accesibilidad, la visibilidad y la facilidad de uso. A continuación, se detalla una solución visual para implementar una opción que permita a los usuarios volver desde la segunda pantalla (donde se muestra el carrusel de fotografías) a la primera pantalla (menú principal):

Botón de Vuelta Prominente:
1. Tamaño Grande: El botón para volver al menú principal debe ser grande, considerando que los usuarios mayores pueden tener dificultades con la precisión de los toques. Un tamaño recomendado para este botón podría ser de al menos 1/10 del ancho de la pantalla para asegurar que sea fácilmente accesible.
2. Iconografía Clara: Utiliza un icono universalmente reconocido, como una flecha hacia la izquierda o el icono de una casa, que indique claramente la acción de volver al menú principal. Este icono debe tener un contraste alto respecto al fondo para facilitar su visibilidad.
Posición Intuitiva:
1. Coloca el botón en una esquina superior de la pantalla, preferiblemente en la esquina superior izquierda, o en la esquina inferior derecha, donde los usuarios tienden a buscar opciones de navegación. Esta posición es intuitiva y fácilmente accesible sin obstruir el contenido principal de la pantalla.
Contraste y Colores:
1. Asegúrate de que el botón tenga un contraste alto con el fondo para que sea fácilmente identificable. Los colores deben ser seleccionados cuidadosamente para ayudar a los usuarios con visión reducida o daltonismo; por ejemplo, un botón azul sobre un fondo blanco ofrece un buen contraste visual.
Feedback Táctil y Visual:
1. Implementa feedback visual y táctil al interactuar con el botón. Por ejemplo, el botón puede cambiar de color o emitir una sombra cuando se toca, y la tableta puede vibrar ligeramente. Este feedback ayuda a confirmar la acción realizada por el usuario.
Instrucciones y Ayuda:
1. Considera incluir un breve tutorial o instrucciones la primera vez que el usuario inicie la aplicación, destacando cómo navegar entre pantallas y cómo utilizar el botón para volver al menú principal. Esto puede ser particularmente útil para usuarios que no estén familiarizados con las convenciones de diseño de interfaces.
Testeo con Usuarios:
1. Finalmente, pero no menos importante, realiza pruebas de usabilidad con usuarios dentro del rango de edad objetivo para recoger feedback sobre el diseño e implementación del botón de retorno. Ajusta el diseño según sea necesario para asegurar que cumple con las necesidades y preferencias de tus usuarios.

Implementando estas recomendaciones, puedes crear una solución visual que no solo sea accesible y fácil de usar para los usuarios mayores, sino que también mejore la experiencia general del usuario en tu aplicación para tabletas.

Problema detectado: reproducción de un archivo multimedia

Problema

Los participantes de la Muestra B tienen problemas para reproducir un archivo multimedia (audio, vídeo o música). El hecho de no poder reproducir el archivo provoca que los usuarios no puedan ver el vídeo o escuchar la música o el audio. Este problema lo contextualizaremos bajo la sección de vídeos y la solución propuesta la replicaremos en música y audios.

Prompt

La sección vídeos de la aplicación muestra una pantalla con un reproductor de vídeos y un menú de navegación situado en la parte inferior del reproductor (parte inferior de la tablet) con tres botones: El botón de la izquierda tiene el texto ‘Anterior’ y sirve para pasar al anterior vídeo. El botón de la derecha tiene el texto ‘Siguiente’ y sirve para pasar al siguiente vídeo. El botón del centro tiene el texto ‘Reproducir’ y sirve para ver el vídeo. Además, si se está reproduciendo el vídeo, el botón ‘Reproducir’ cambia el texto a ‘Pausar’ y si se pulsa ahora cambia su funcionamiento y pausa el vídeo. Si está pausado vuelve a tener el texto ‘Reproducir’ y si se pulsa se reproduce el vídeo. Este botón funciona como un switch entre reproducir y pausar el vídeo.

Los usuarios tienen problemas para reproducir un vídeo.

Describe de forma precisa y detallada cómo podemos resolver el problema con el menú de navegación de vídeos siendo lo más importante la experiencia de usuario.

Solución propuesta por la IAG

Para resolver el problema que tienen los usuarios mayores al interactuar con el menú de navegación y reproducir un vídeo en la aplicación para tablet, debemos centrarnos en mejorar tanto la visibilidad como la usabilidad de los elementos de la interfaz. Aquí hay un enfoque detallado para abordar y mejorar la situación:

Usa etiquetas claras y descriptivas para cada opción del menú de navegación.
Separa en dos botones el ‘Reproducir’ y el ‘Pausar’. El usuario puede confundirse cuando un botón realiza acciones diferentes.

Cambios en el diseño

Se separan en dos botones las funcionalidades de reproducir y pausar.

Problema detectado: visualización de errores

Problema

Los participantes de la Muestra B tienen problemas para interpretar los errores que se producen en la aplicación y ejecutar la acción que recomiendan.

Prompt

Cuando se produce un error en la aplicación se muestra una pantalla con una imagen que interpreta un error, un título descriptivo del error, una descripción del error sucedido y un botón que permite reintentar el error. El usuario tiene problemas para interpretar el error.

Describe de forma precisa y detallada cómo podemos resolver el problema con el menú de navegación de vídeos siendo lo más importante la experiencia de usuario.

Solución propuesta por la IAG

Para mejorar la experiencia de usuario, especialmente en el contexto de personas mayores de 70 años, frente a errores en la aplicación, es esencial simplificar la comunicación del error y ofrecer una solución clara y directa. Aquí hay un enfoque detallado para optimizar la pantalla de error:

Iconografía Intuitiva y Diseño Amigable

Icono Amigable: Utilice un icono grande y fácil de entender que no cause alarma, como un signo de interrogación suave o una imagen sencilla que indique que algo necesita atención, en lugar de las imágenes tradicionales de error que pueden ser estresantes.

Título Descriptivo Simple

Título Claro y Sin Tecnicismos: En lugar de términos técnicos o códigos de error, el título debe describir en términos sencillos lo que sucedió, como "Algo no salió como esperábamos".

Descripción Comprensible del Error.

Lenguaje Simple y Directo: Use un lenguaje claro y conciso para la descripción del error. Evite jerga técnica y sea lo más claro posible, por ejemplo: "No se pudo cargar el video. Puede ser un problema temporal."

Instrucciones Claras para Solucionar el Error.

Instrucciones de Acción: Proporcione una breve explicación de cómo solucionar el problema o qué hacer a continuación. Por ejemplo: "Por favor, toque 'Reintentar' para cargar el video de nuevo."

Botón de Acción Prominente .

Botón de 'Reintentar' Grande y Visible: Asegúrese de que el botón para reintentar sea grande, esté coloreado de manera contrastante con el resto de la pantalla y esté etiquetado con un verbo de acción como "Reintentar" o "Probar de Nuevo".

Soporte Adicional.

Opción de Ayuda: Incluya un método fácil y accesible para obtener ayuda adicional, como un botón o enlace "Obtener Ayuda" que pueda conectar al usuario con soporte técnico o abrir una sección de preguntas frecuentes.

Testing y Retroalimentación.

Pruebas de Usabilidad: Realice pruebas de usabilidad con usuarios mayores para asegurarse de que la pantalla de error es entendida y que las instrucciones son claras. Implementar un diseño y comunicación cuidadosos en las pantallas de error puede hacer que la experiencia de usuario sea menos frustrante y más empática, ayudando a los usuarios mayores a sentirse más seguros y capaces al utilizar la aplicación.

Testing y Retroalimentación

Pruebas de Usabilidad: Realice pruebas de usabilidad con usuarios mayores para asegurarse de que la pantalla de error es entendida y que las instrucciones son claras.

Implementar un diseño y comunicación cuidadosos en las pantallas de error puede hacer que la experiencia de usuario sea menos frustrante y más empática, ayudando a los usuarios mayores a sentirse más seguros y capaces al utilizar la aplicación.

Cambios en el diseño

Resumen de mejoras para Rememora v2

Con las propuestas ofrecidas por la IAG se crea una nueva versión etiquetada como Rememora v2 la cual contiene los cambios vistos en apartado anteriores y que se resumen aquí:

Nuevo diseño para los botones.
Se crea una nueva pantalla que contiene el menú principal de la aplicación.
Se cambia la posición del menú de navegación (secciones) de Imágenes, Audios, Vídeos y Música.
Se separa en dos botones la funcionalidad de ‘Pausar’ y ‘Reproducir’.
Se añade un botón para navegar al menú principal.
Se añade una imagen, título, descripción y botón de acción en la pantalla de errores.

Métricas de la aplicación

Con los cambios propuestos por la IAG se realizan las modificaciones en la aplicación y se crea una nueva versión: v2.

A continuación, se realiza una nueva prueba (P3) con 10 usuarios de la Muestra B de los cuales, 5 ya participaron en la prueba anterior (usuario 1, 2, 3, 4 y 5), y otros 5 son usuarios que participan por primera vez.

Los datos obtenidos por los usuarios pueden verse en el Anexo 6 y en la siguiente tabla se recoge un resumen de esos datos.

Cuestionario de usabilidad de la aplicación

Al acabar la prueba con la aplicación, se realiza el cuestionario de usabilidad a los participantes de esta prueba P3. Los valores obtenidos se reflejan en las tablas siguientes.

Análisis de los datos obtenidos

De los resultados obtenidos de la P3 y que se recogen en las tablas del apartado anterior sacamos el siguiente análisis:

Funcionalidades completadas (VAR-FUN)

Esta variable mide el número de funcionalidades completadas y no completadas. De las 8 funcionalidades que hemos medido en la prueba con la aplicación, no existe ningún usuario que haya completado todas las funcionalidades. En el mejor de los casos, hay una funcionalidad que ha sido completada por el 80% de los usuarios. En el peor de los casos, hay una funcionalidad que sólo ha sido completada por un usuario. No existe ningún usuario que haya completado todas las funcionalidades. Se puede ver en la gráfica siguiente:

Tiempo en ejecutarse las funcionalidades (VAR-TIM)

Según datos obtenidos de la tabla de resultados de la P3:

El 0% de las funcionalidades realizadas han sido completadas en un tiempo inferior a 10 segundos (poco).
El 100% de las funcionalidades realizadas han sido completadas en un tiempo superior a 10 segundos e inferior a 30 segundos (normal).
El 0% de las funcionalidades realizadas han sido completadas en un tiempo superior a 30 segundos. Todas las funcionalidades que se engloban en este tiempo han sido completadas.
Muchas funcionalidades no han podido ser completadas y por tanto no se dispone de una clasificación basada en el tiempo.

Errores cometidos al ejecutar las funcionalidades (VAR-ERR)

Según los datos recogidos en la tabla de resultados de la P3 la funcionalidad de pasar de un archivo multimedia a otro es la que más errores provoca (4).

Usabilidad en la aplicación (VAR-TEST)

Según los datos reflejados en la tabla de resultados del cuestionario (SUS) la versión inicial o Rememora v2 el 60% de la Muestra B ha valorado positivamente la usabilidad de la aplicación y un 40% la ha valorado con una usabilidad negativa.

Variables a medir

Conclusiones

Tras el análisis de la prueba P3 entre Rememora v1 y v2 con la Muestra B se sacan las siguientes conclusiones:

La v2 ha mejorado en un 4% el número de funcionalidades completadas por los usuarios.
La v2 ha mejorado en un 9% el tiempo que tarda un usuario en completar una funcionalidad.
Los usuarios de la v2 han cometido más errores (9).
El cuestionario de usabilidad mejora en la v2 en un 50% más. Aumenta la media en 21,6 puntos.

Se puede decir que Rememora v2 ha mejorado ligeramente la v1. Si valoramos los cambios producidos por la IAG para mejorar los problemas resultados tenemos que:

El cambio de separar el menú ha mejorado la interacción con los botones del menú de navegación, pero ha empeorado que se pueda cambiar de secciones ya que muchos usuarios presentan problemas a la hora de encontrar el botón que los lleva de vuelta al menú principal. Al mejorar la visibilidad de los botones de navegación algunos usuarios han sido capaces de averiguar cuantos archivos multimedia tiene la aplicación.
El cambio de separar el botón reproducir/pausar en dos botones ha mejorado que los usuarios puedan pausar los archivos multimedia. En cambio, ha empeorado que los usuarios sepan reproducir dichos archivos.
Los cambios introducidos en errores han mejorado la identificación de la pantalla de error.