Pautas de usabilidad y accesibilidad móvil. "Accesible Mobile Interfaces" y "Mobile Navigation" de Funka

El objetivo de este artículo es divulgar las guías "Accesible Mobile Interfaces" (2012) y "Mobile Navigation" (2014) de Funka, una empresa sueca especializada en accesibilidad de reconocido prestigio internacional.

Estas guías nos ofrecen un listado de pautas, estudiadas y testeadas con usuarios, que nos permiten diseñar e implementar interfaces móviles más usables y accesibles.

Al final del post podéis consultar otros artículos sobre accesibilidad y usabilidad en dispositivos móviles.

"Guidelines for the Development of Accessible Mobile Interfaces", Funka, 2012

Funka elaboró las directrices para el desarrollo de interfaces móviles accesibles en el marco de un proyecto financiado por el Swedish Internet Fund.

Los smartphones tienen buen soporte para la accesibilidad y a menudo algún producto de apoyo incorporado. Pero todavía se cometen muchos errores por falta de conocimientos, documentación y prácticas.

Los problemas son tanto en accesibilidad técnica (que afectan especialmente a los usuarios que utilizan productos de apoyo) como en accesibilidad pedagógica (que nos afectan a todos, pero especialmente a las personas mayores, con poca experiencia tecnológica o con discapacidad cognitiva, visual o motriz)

Funka señala que las pruebas realizadas con usuarios con distintas necesidades y en distintas condiciones (con o sin productos de apoyo) muestran que las WCAG 2.0 no son suficientes, puesto que carecen de principios de desarrollo para interfaces móviles. Por ello han elaborado criterios de testeo que las complementan.

En el artículo anterior (WCAG 2.0 Extensions. "WCAG Cognitive Extension", "WCAG Mobile Extension", y nueva versión de las WCAG 2.0 ) comenté precisamente la futura WCAG Mobile Extension. El Mobile A11Y TF tiene abierto en su wiki un espacio para la discusión y el análisis de las directrices de Funka.

La guía explica que durante el proceso de elaboración inventariaron las directrices y estudios existentes sobre accesibilidad en interfaces móviles, realizaron encuestas, se entrevistaron con usuarios con diferentes tipos de discapacidad y realizaron variados test con usuarios.

Las directrices son de uso gratuito y están disponibles en español: Pautas para el desarrollo de interfaces móviles accesibles, PDF (350Kb)

Son 48 pautas agrupadas en 6 temas. Las enumero a continuación, con alguna anotación interesante en determinados casos. Podéis consultar la descripción de cada pauta en el documento original.

Elección de una solución

Observe que su sitio web básico funcione en dispositivos móviles
Un problema común es el de las opciones de menú que solo se despliegan al colocar el cursor sobre una opción. Recomiendan un enfoque Mobile First
No obligue al usuario a utilizar una versión móvil, pero ofrézcala en caso de que las páginas del sitio web básico sean grandes o tengan unas funcionalidades complejas
Se debe ofrecer enlaces entre las diferentes versiones y recordar la elección del usuario.
Una versión móvil del sitio web debe, en la medida de lo posible, facilitar al usuario la misma información y servicios que el sitio web normal, a no ser que se trate expresamente de una versión móvil de un servicio o funcionalidad específicamente delimitados
Aplicable en el caso de que se ofrezca una versión móvil.
Cree aplicaciones para funcionalidades claramente delimitadas a las que el usuario pueda necesitar acceder con frecuencia
La creación de una app debería hacerse sobre todo para tareas específicas a las que un grupo de usuarios necesite acceder o ejecutar con frecuencia.

Diseño

Siga las WCAG 2.0 excepto en los aspectos que las presentes pautas contradigan a las WCAG 2.0
Al crear aplicaciones para dispositivos específicos, deberán seguirse las directrices de diseño y accesibilidad, siempre y cuando no contradigan estas pautas
En caso de que existan. Por ejemplo, cuando se desarrollen aplicaciones para iPhone, deben seguirse las directrices de Apple (siempre y cuando no contradigan estas pautas). Lo traté en el artículo Accesibilidad y usabilidad móvil: web móvil y app nativa
Si desarrolla una aplicación para una plataforma específica, deberá ser compatible con las características propias de la plataforma
Identifique los elementos gráficos, iconos y botones con su motivo o función
En los sitios web tendrán un texto alternativo. En las aplicaciones, la forma de incluir la descripción dependerá del sistema operativo.
Cada objeto de formulario debe tener una etiqueta o una descripción
No utilice marcos (frames, iframes) en interfaces web
Ayude al usuario a introducir datos adaptando el teclado virtual al contenido que debe introducirse
Lo traté en el artículo: HTML5 y accesibilidad: nuevos tipos de input, atributos asociados y validación nativa
Minimice el uso de scripts ejecutados en cliente
Los dispositivos móviles tienen a menudo menor capacidad que los ordenadores normales y el empleo de muchos scripts puede causar problemas.
Realice pruebas prácticas de la solución
Siempre debe realizarse un testeo práctico de la solución con personas que no hayan participado en el desarrollo, incluyendo a personas con discapacidad en los tests de usuario.

Estructura y presentación

En las vistas con scroll, coloque las cosas importantes más arriba y las menos importantes más abajo
Pero ten en cuenta también que es difícil conseguir hacer clic en los objetos que se encuentran arriba del todo en la pantalla. Por lo tanto, una interacción importante no debe situarse en la parte de arriba del todo de la pantalla.

Lo comentaba en el artículo Responsive Design y accesibilidad. Buenas y malas prácticas. Errores comunes. .

Imagen de Responsive Navigation: Optimizing for Touch Across Devices, Luke Wroblewski
Agrupe los elementos que van juntos
La página debe redistribuirse, en la medida de lo posible, de modo que la información relacionada se posicione justo detrás de la sección con la que se relaciona, en lugar de que todo el material relacionado se coloque abajo del todo.
Procure crear un diseño limpio y minimice el número de objetos “innecesarios”
Procure que el encabezado de la página sea pequeño
Cree áreas grandes para hacer clic
Procure que el área para hacer clic tenga como mínimo el alto de fila del cuerpo de texto en un sentido y el alto de fila del cuerpo de texto multiplicado por 3 en el otro sentido. Los iconos de una aplicación deberían tener, como mínimo, 9 milímetros de ancho y de alto.
No coloque los botones de uso frecuente en el margen derecho o izquierdo, a no ser que ocupen, como mínimo, una tercera parte del ancho de la pantalla
A los usuarios que solo utilizan una mano, o que tienen que equilibrar el móvil sobre la rodilla para poder utilizarlo, les resulta difícil pulsar botones que están en los márgenes.
No coloque a la derecha los botones, funcionalidades o grupos con botones y funcionalidades, a no ser que el grupo ocupe, como mínimo, el 75 % de la pantalla en todas las posiciones
Beneficia específicamente a los usuarios que no ven el sitio web y utilizan el dedo índice para escanear la interfaz.
Oriente los botones y los enlaces en filas claras (horizontal y verticalmente)
Las etiquetas de los campos de introducción deben colocarse principalmente encima del campo
Son una excepción las casillas de verificación y los botones de opción, en los que el texto puede situarse a la derecha, pero el título del grupo se colocaría encima del mismo.
Las longitudes de línea deben adaptarse al ancho de la pantalla, pero nunca superar un máximo de 70 caracteres por línea, espacios incluidos
El objetivo es que la longitud sea de 55-60 caracteres por línea, espacios incluidos.
Limite la cantidad de información y el número de objetos mostrados
Esto no significa que se deban eliminar partes del contenido, pero sí que puede ser más fácil para el usuario que se oculten algunas partes en forma de acordeón, o que los submenús se oculten en desplegables. En estos casos, la funcionalidad debe ser clara y el usuario debe poder acceder a las partes ocultas de manera intuitiva.
Utilice iconos conocidos
Diseñe los objetos clicables para que sean obvios
Los enlaces no se deben distinguir solo por el color.
Utilice contrastes altos
Debe ser posible utilizar la interfaz en la visualización tanto horizontal como vertical

Interacción

Utilice conceptos de navegación sencillos
Los mega-menús no funcionan bien en móvil y han de rediseñarse.
Si desarrolla una aplicación para un sistema operativo o un dispositivo móvil que pueda tener botones de control (por ejemplo, teclas de flecha y un botón Aceptar), debe ser posible utilizarlos para navegar por la interfaz
Si desarrolla una interfaz que se pueda utilizar en dispositivos a los que se pueda conectar un teclado, la interfaz debe, cuando sea posible, poder controlarse con el teclado
Inserte atajos para facilitar que el usuario salte de una parte a otra del contenido en las páginas largas
Aunque estén ocultos inicialmente, deben mostrarse al recibir el foco en la navegación por teclado.
Minimice la introducción de texto en la interfaz
Si la interfaz admite el control mediante gestos, debe implementarse esta función
No incluya funciones que solo se puedan ejecutar mediante gestos, compleméntelas siempre con un botón o enlace
Permita controlar la interfaz solo con un dedo
Sea sistemático
Por ejemplo, coloca los botones que tengan una determinada funcionalidad en el mismo lugar de la pantalla o diséñalos de forma homogénea.
Utilice los objetos integrados según su uso previsto y de la forma en que el usuario espera que se utilicen
Es decir, en vez de implementar componentes propios con una funcionalidad equivalente.
Proporcione feedback al usuario
Mediante un sonido y una vibración breve si el dispositivo lo permite, pero siendo posible desconectar esta confirmación. Puede haber excepciones cuando un exceso de confirmaciones se perciba como molesto (por ejemplo, una aplicación que funciona como podómetro no debe confirmar cada paso registrado).
Proporcione información de estado clara al usuario
Por ejemplo, si la aplicación o sitio web están cargando datos, es conveniente mostrar el progreso de la carga.
Proporcione al usuario tiempo suficiente y avísele antes de que se supere el límite de tiempo
Si fuera posible, también debería existir la posibilidad de prorrogar el tiempo de forma sencilla.
Ayude al usuario a evitar y a corregir posibles errores
Por ejemplo con autocompletado o con sugerencias de búsqueda. Si aun así se producen errores, debe informarse claramente al usuario tanto en la parte superior de la página como en el lugar en el que se haya producido el error. Cuando sea posible, se debe ofrecer también propuestas de solución.

Contenido

Utilice imágenes solo si son realmente útiles para el usuario
Utilice encabezados breves y descriptivos para estructurar la información
Evite las abreviaturas

Configuración de usuario

Asegure que la interfaz pueda ampliarse
Considere la posibilidad de proporcionar una opción para invertir los colores
Considere la posibilidad de proporcionar un ajuste para cambiar el tipo de letra

“Mobile Navigation Guidelines”, Funka, 2014

Entre octubre de 2013 y febrero de 2014 Funka encabezó un proyecto con 20 clientes para investigar los conceptos de navegación en interfaces móviles.

En primer lugar analizaron y testearon los conceptos de navegación existentes; y en segundo lugar desarrollaron y testearon con usuarios (también con usuarios con discapacidad) prototipos de nuevos conceptos de navegación.

En base a los resultados elaboraron las "Mobile Navigation Guidelines" (PDF, 315 kb), las directrices a seguir en la definición de la interfaz de navegación de sitios o aplicaciones móviles para asegurar su usabilidad y accesibilidad.

En base al estudio, hemos podido confirmar que hay diversos conceptos de navegación para elegir. No parece que haya uno perfecto, todos tienen sus ventajas y desventajas. La elección del concepto de navegación puede depender del tipo de interfaz o de la cantidad de contenido. Por tanto no se puede decir que se puedan resolver todos los problemas con un concepto de navegación concreto.

Es decir, no podemos decir "este es el mejor sistema de navegación en todos los casos", lo que sí se puede decir es qué directrices debe cumplir.

Aunque se desarrollaron principalmente para sitios web de información, muchas de las directrices se pueden aplicar a otros tipos de sitios o aplicaciones móviles, pero indican que su aplicación en estos casos debería ser siempre testeada con usuarios reales (algo que sería recomendable siempre, claro, pero más todavía en estos casos).

Las directrices son de libre acceso y de uso gratuito. Son 23 pautas que se agrupan en 5 temas. Las enumero a continuación, con alguna anotación interesante en determinados casos. Podéis consultar la descripción de cada pauta en el documento original (solo disponible en inglés).

Interacción

El concepto de navegación es fácil de comprender
La navegación es consistente y predecible entre los diferentes niveles de la estructura de información.
Una excepción es la navegación por el nivel superior, que puede ser diferente a la de los submenús sin crear problemas.
El usuario recibe feedback relevante
Por ejemplo, se informa de la opción de menú seleccionada; un título visible indica en qué página se ha aterrizado; etc.
La comprensión del concepto de navegación no está basado en la ruta del enlace
El tiempo que se necesita para navegar está minimizado
Por ejemplo, se reduce el número de pasos para alcanzar el contenido si dichos pasos requieren una carga de página. Las pruebas demuestran que a menudo hacer scroll es más rápido.
La navegación trabaja en diferentes tamaños de ventana
No solo en diferentes tamaños sino también en posición vertical y horizontal. Ciertos conceptos funcionan mejor en pantallas grandes y otros mejor en pantallas pequeñas, por ello no cambies demasiado pronto a la versión de navegación móvil.
La estructura de navegación soporta diferentes niveles de profundidad (si así se requiere)
Hay conceptos que solo soportan uno o dos niveles de profundidad. Si tu web tiene una estructura más profunda debes escoger el concepto de navegación adecuado.
El menú solo debe contener la estructura de la información
Si la función de búsqueda está en el menú, habrá personas a las que les costará encontrarla. Tampoco recomiendan que tengas que abrir el menú para cambiar de idioma.
La estructura de la información se ha estudiado detenidamente
Si la arquitectura de información del sitio es incorrecta o está desequilibrada, el concepto de navegación se vuelve irrelevante, pues la información será difícil de encontrar independientemente del mismo.

Layout y diseño

El menú tiene un diseño claro
Trata la importancia de saber en qué página estás, en qué nivel de la estructura te encuentras y qué otras opciones hay al mismo nivel. O también aspectos como el diseño consistente o la delimitación clara de las diferentes zonas clicables.
Presentar el menú verticalmente
Este punto no se aplica necesariamente al menú superior.
Áreas clicables suficientemente grandes
Indican 9 mm medidos en la pantalla del dispositivo.
El menú es fácil de encontrar
El icono del menú más texto complementario (si hay icono de menú)
Utiliza el icono de menú que los usuarios esperan encontrar y acompáñalo del texto "Menú".
El menú es de fácil acceso
Debes poder acceder fácilmente al mismo cuando sostienes el teléfono con una sola mano.
Las opciones importantes del menú no están ocultas
No se refiere al menú oculto tras un botón "menú”, medida eficaz si su ubicación y diseño es claro y que además permite poner el foco en el contenido. Se refiere a ocultar opciones de menú tras un enlace "Mostrar más". Muchos usuarios evitan hacer clic en este tipo de enlaces incluso si no encuentran lo que están buscando en las opciones visibles.

Contenido

Poner el foco en el contenido
Lo prioritario de la página es el contenido, que confirma además si lo que estás buscando es esa página o si llegaste a la página correcta. El menú no debe ocupar toda la pantalla a menos que el usuario así lo haya elegido.
Los enlaces a las páginas importantes también están incluidos en el contenido
Las preferencias de navegación varían: unos usuarios utilizan el menú, otros el buscador, y muchos hojean títulos y enlaces relevantes, evitando el menú y el buscador. Los enlaces deben ser claros, descriptivos y legibles, para lo cual ayuda que estén en líneas separadas.

Diseño técnico

El menú trabaja con el lector de pantalla
El menú puede ser usado con el teclado
Además el orden de tabulación ha de ser lógico y el foco visible.
Puedes navegar incluso cuando javascript está desactivado

Preferencias de los usuarios

El menú admite diferentes tamaños de texto y fuentes
Es decir, el usuario puede cambiar el tamaño de texto o las fuentes, mediante las opciones de personalización de su navegador o el sistema operativo, y el menú debe admitirlo y visualizarse correctamente.
El menú admite zoom