Desarrollo de la UI
Para el desarrollo de la UI nos basamos en la literatura científica y en lo que ésta dice para diseñar una interfaz accesible. Nos gustaría destacar que, aunque existen numerosos artículos que tratan este tema, muy pocos (dos o tres) realizan propuestas visualmente de cómo debería ser implementada una interfaz de usuario.
Selección de colores
Para escoger los colores de la aplicación se ha tenido en cuenta el contraste recomendado (Yu et al., 2022) y se ha escogido como color principal #0000FF y como color de fondo el blanco #FFFFFF. Según la Web de Accesibilidad WebAIM el contraste que existe entre estos dos colores es de 8.59:1 (https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF) y es apto para:
- Texto Normal: WCAG AA y WCAG AAA.
- Texto con Negrita: WCAG AA y WCAG AAA.
- Objetos gráficos y elementos visuales para interfaces de usuario: WCAG AA.
Diseño de botones
Los botones que se usan en la aplicación tienen el ancho y la altura recomendada (Phiriyapokanon, 2011), tienen una etiqueta que indica la acción que se realiza y guardan un amplio espacio entre ellos para que se pueda pulsar cubriendo toda la yema del dedo. Además, cuando es pulsado cambia de color y emite un sonido.
Diseño del menú principal
El menú principal siempre es visible y se mantiene fijo en todas las pantallas (A Guide to Interface Design for Older Adults | Adchitects Blog, n.d.). Para cambiar de funcionalidad basta con pulsar el botón deseado.
Menú de navegación
La navegación respeta la sencillez recomendada (A Guide to Interface Design for Older Adults | Adchitects Blog, n.d.). La funcionalidad seleccionada siempre se carga en la misma posición.
Pantalla de inicio
Nada más abrir la aplicación se muestra un logo de la aplicación en el centro y en la parte derecha se encuentra el menú principal que permite acceder a cada una de las funcionalidades. Además, tiene un botón ayuda que explica cada funcionalidad.
Diseño de la Galería de Fotos
Esta funcionalidad muestra una galería de imágenes. Al ser pulsado muestra la primera foto. Las acciones que se pueden realizar aquí son:
- Visualizar más fotografías pulsando sobre el botón siguiente. Cuando llegue a la última fotografía el botón siguiente se deshabilita.
- Visualizar las fotografías vistas previamente pulsando sobre el botón anterior. Cuando llegue a la primera fotografía el botón anterior se deshabilita.
Diseño de Galería de Vídeos
Esta funcionalidad muestra una galería de vídeos. Al ser pulsado carga el primer vídeo, pero no se reproduce. Las acciones que se pueden realizar aquí son:
- Visualizar más vídeos pulsando sobre el botón siguiente. Cuando llegue al último vídeo el botón siguiente se deshabilita.
- Visualizar vídeos vistos previamente pulsando sobre el botón anterior. Cuando llegue al primer vídeo el botón anterior se deshabilita.
- Ver el vídeo. Esto se realiza pulsando sobre el botón reproducir. Cuando el vídeo se está reproduciendo el botón ‘Reproducir’ se cambia por el botón ‘Pausar’.
- Pausar el vídeo. Esto se realiza pulsando sobre el botón pausar. Cuando el vídeo está pausado sólo aparece el botón ‘Reproducir’.
Diseño de la galería de música y audios
La funcionalidad de música y audios visualmente son la misma y sólo se distingue por el contenido que cargan. ‘Música’ carga canciones y ‘Audios’ carga mensajes de voz. Esta funcionalidad muestra una galería de canciones o audios. Al ser pulsado carga el primer elemento, pero no se reproduce. Las acciones que se pueden realizar aquí son:
- Escuchar más canciones o audios pulsando sobre el botón siguiente. Cuando llegue al último elemento el botón siguiente se deshabilita.
- Escuchar canciones o audios escuchados previamente pulsando sobre el botón anterior. Cuando llegue al primer elemento el botón anterior se deshabilita.
- Escuchar la canción o audio. Esto se realiza pulsando sobre el botón reproducir. Cuando la canción o audio se está reproduciendo el botón ‘Reproducir’ se cambia por el botón ‘Pausar’.
- Pausar la canción o audio. Esto se realiza pulsando sobre el botón pausar. Cuando la canción o audio está pausado sólo aparece el botón ‘Reproducir’.
Diseño de la ayuda
El usuario cuenta con un botón de ayuda que le indica para qué sirve cada uno de los botones que se encuentran en la pantalla.
Diseño de la pantalla de errores
Cuando se produce un error la aplicación muestra una pantalla indicando el tipo de error que se ha producido y un botón que permite volver a realizar la acción que lanzó el error. Además, el usuario también tiene la posibilidad de realizar otra acción seleccionando una de las funcionalidades disponibles en el menú principal.
