Muy buenas, les saluda Miguel y esta vez les traigo este post.
En Microsoft To Do, trabajamos mucho para que nuestras funciones estén disponibles para todos los que usan nuestras aplicaciones. Descubrimos que la forma en que se implementó nuestro reordenamiento de tareas no era accesible y así es como abordamos este problema.
Índice
Desafíos de arrastrar y soltar
En las aplicaciones de Microsoft To Do, la funcionalidad para reordenar la lista de tareas solo estaba disponible mediante arrastrar y soltar, que utiliza gestos de puntero. Los gestos de puntero funcionan bien para permitir la interacción del usuario con la interfaz directamente, sin embargo, no todos los usuarios pueden realizar estos gestos. Los siguientes grupos de usuarios podrían tener problemas con este enfoque de diferentes maneras:
- Es posible que los usuarios con discapacidades motoras no puedan ejecutar el gesto con precisión.
- Es posible que los usuarios que utilicen un teclado u otro dispositivo de entrada no puedan realizar ningún gesto.
- Los usuarios que navegan a través de Talkback pueden tener dificultades para arrastrar un elemento con precisión sin ver hacia dónde se dirige.
- Es posible que otros usuarios simplemente no estén familiarizados con la interacción de arrastrar y soltar y no puedan descubrirla fácilmente al usar la aplicación, por lo que se pierden esta función.
Íbamos a mantener la implementación existente de arrastrar y soltar, ya que muchos de nuestros usuarios ya la utilizan y es una parte importante de nuestra aplicación. Sin embargo, también necesitábamos eliminar la barrera que impedía a algunos de nuestros usuarios reordenar la lista. Como tal, decidimos abordar este desafío y encontrar una forma alternativa de reordenar a los usuarios que no usaban gestos de puntero. Tuvimos que ser creativos para encontrar una solución.
Investigación
Cuando comenzamos a investigar posibles soluciones, encontramos algunos recursos que parecían prometedores.
- Harris Schneiderman descrito un gran enfoque en Smashing Magazine que usa regiones en vivo de aria y un teclado para reordenar elementos.
- Jesse Hausler y Cordelia McGee-Tubb compartieron enfoques accesibles de arrastrar y soltar desde Salesforce, haciendo uso de las regiones y atributos de aria live también.
- En el Club de accesibilidad Cumbre 2019 aquí en Berlín, Sergei Kriger compartido estrategias sobre cómo hacer que los componentes arrastrables sean utilizables para las personas que dependen de lectores de pantalla.
Estos recursos fueron realmente útiles al tratar de comprender los problemas experimentados con la función de arrastrar y soltar, la funcionalidad que debería proporcionarse y los anuncios que esperan los usuarios que utilizan un lector de pantalla.
Sin embargo, estas soluciones se basaron principalmente en la navegación por teclado. Por supuesto, el teclado externo se puede usar con teléfonos móviles, pero no esperaríamos que todos los usuarios que quieran reordenar su lista usen uno. Necesitábamos una solución que no dependiera de accesorios adicionales.
Exploraciones de diseño
Comenzamos con Android para permitirnos enfocarnos en una plataforma a la vez y probar nuestros conceptos antes de expandirnos a otros clientes. Decidimos incorporar el modo de acción, que es común en las aplicaciones de Android para permitir a los usuarios habilitar el modo de reorden. Entonces surgieron dos conceptos potenciales sobre cómo funcionaría la interacción a partir de ahí.
Concepto 1
Cuando el modo de reordenar está activo, mostramos botones en cada elemento para permitir que el usuario mueva el elemento hacia arriba o hacia abajo un espacio. A medida que los elementos se mueven, el foco permanece en el elemento seleccionado, por lo que los usuarios de Talkback y teclado no pierden su lugar en la lista. Este enfoque solo permite al usuario mover un elemento a la vez, por lo que puede llevar mucho tiempo reordenar todo si la lista es muy larga (esta limitación también se aplica a arrastrar y soltar).
Concepto 2
Para este concepto, el usuario debe seleccionar uno o varios elementos antes de moverlos. Mostramos los botones en la parte superior que permiten al usuario mover todos los elementos seleccionados, ya sea por un espacio o hasta el final o la parte superior o inferior de la lista. Este enfoque es más poderoso y permite al usuario organizar varios elementos a la vez. El desafío aquí es administrar el enfoque entre la lista y la barra superior y dejar en claro al usuario cómo seleccionar elementos antes de moverlos.
Verificación de conceptos
Para verificar conceptos trabajamos en paralelo; Mientras yo creaba un prototipo de los conceptos en una aplicación de muestra para descubrir los desafíos técnicos para ambos enfoques, Lene construyó prototipos de diseño que enviamos a las pruebas de los usuarios para recopilar comentarios.
Ioannis ha organizado pruebas de usuario a través de usertesting.com. Las pruebas de forma remota nos permitieron obtener los resultados muy rápidamente. Nueve participantes probaron ambos conceptos en orden aleatorio, lo que aseguró que la prueba no estuviera sesgada hacia una solución.
Descubrimos que la función de reordenar era fácilmente detectable en ambos casos, aunque algunos participantes empezaron por intentar arrastrar y soltar de inmediato, demostrando familiaridad con el funcionamiento normal de reordenar en las aplicaciones de Android. No hubo preocupaciones sobre cómo salir del modo de reorden. Con el concepto 1, algunos evaluadores carecían de la opción de mover varios elementos a la vez, mientras que con el concepto 2 había cierta confusión sobre la selección de elementos primero y la distinción entre los botones para mover un espacio a la vez versus todo el camino hacia arriba / abajo.
Al observar la interacción del usuario con los prototipos, pudimos reconocer claramente una preferencia por el concepto 1 por parte de la mayoría de los participantes.
Cuando se trataba de prototipos de código, el concepto 2 necesitaba un trabajo adicional para hacer que la selección de elementos y los cambios de enfoque fueran claros y fáciles de descubrir, mientras que el concepto 1 era mucho más sencillo de implementar y agregar a la base de código actual de Microsoft To Do.
En resumen, estas fueron las principales propiedades de cada enfoque:
Arrastrar y soltar
- Detectable si el usuario ya está familiarizado con el ecosistema de Android.
- No accesible sin gestos de puntero.
- Desafiante de usar con Talkback.
Concepto 1
- Fácilmente reconocible.
- Intuitivo.
- Accesible sin gestos de puntero.
- Funciona con Talkback y teclado.
Concepto 2
- Fácilmente reconocible.
- Interfaz potente, que permite reordenar varios artículos.
- Necesita más trabajo para aclarar la interfaz.
- Accesible sin gestos de puntero.
- Talkback y navegación por teclado poco claros.
Basándonos en nuestras exploraciones técnicas y los resultados de las pruebas de los usuarios, decidimos trabajar en la publicación del concepto 1 para proporcionar la funcionalidad que faltaba actualmente, luego recopilaríamos los comentarios de los usuarios y volveríamos a visitar esta función en una fecha posterior para realizar más mejoras.
Implementación
La aplicación de Android Microsoft To Do se utiliza RecyclerView para mostrar las tareas en la lista. Agregamos opciones adicionales de reordenar al menú adicional y usamos ActionMode.
ActionMode.Callback se utilizó para ajustar la interfaz para el modo de reordenar y luego volver a configurarla después de que el usuario terminó de reordenar los elementos de la lista. Nuestra RecyclerView.Adapter incluye un nuevo modo para reordenar, que actualiza los elementos de la lista y muestra nuevos botones en cada ViewHolder para mover el artículo arriba / abajo.
ActionMode.Callback {
override fun onCreateActionMode(mode: ActionMode, menu: Menu): Boolean {
//set adapter to show reorder buttons on items, hide irrelevant UI
//announce that reorder mode is open for accessibility
}
override fun onDestroyActionMode(mode: ActionMode) {
//set adapter to show normal item state, show previously hidden UI
//announce that reorder mode is closed for accessibility
}
}
Ejemplo de devolución de llamada de ActionMode
Las otras interfaces también se simplifican cuando el modo de reordenar está abierto, incluida la eliminación de un botón para crear nuevos elementos y la modificación de los propios elementos para mostrar solo la información relevante para el reordenamiento. Para algunos elementos, las vistas estaban deshabilitadas en lugar de estar completamente ocultas. Por ejemplo, el usuario aún puede ver la importancia del artículo en el modo de reorden, pero no puede marcar el artículo como importante hasta que salga del modo de reorden. Esto mejora la experiencia del usuario al asegurarse de que los usuarios puedan concentrarse claramente en la tarea en cuestión: reordenar. También simplifica la navegación por Talkback y el teclado, al no tener tantos elementos por los que pasar.
Los anuncios de accesibilidad también se utilizaron para informar a los usuarios de Talkback sobre los cambios. Esto incluía anuncios para abrir y cerrar el modo de reorden, así como anuncios cuando el artículo se mueve hacia arriba o hacia abajo.
A medida que el usuario navega por la lista y mueve los elementos, también es importante mantener el foco en el elemento correcto. Garantiza que el usuario mantenga su lugar en la lista y no tenga que navegar por toda la lista nuevamente después de mover un elemento. Esto se logró mediante el uso de técnicas cubiertas en una publicación de blog anterior sobre la accesibilidad de Android.
Para resumir
Así es como se ve el resultado final en la aplicación Microsoft To Do. La función ha sido lanzada – descargar Microsoft To Do ¡y pruébalo tú mismo!
Aprendimos mucho sobre cómo manejar los gestos del puntero mientras trabajábamos en esto. Compartimos nuestro enfoque con la comunidad, ya que queremos ayudar a más equipos a satisfacer las necesidades de cada usuario en sus aplicaciones. ¿Ha trabajado en algún problema de accesibilidad difícil? ¡Nos encantaría leer sobre las soluciones que se le ocurrieron!
¡Gracias por leer!
Añadir comentario