Evaluación de usabilidad de la app infomedusa (I)
I parte de la evaluación heurística de la aplicación “Infomedusa”
El objetivo es realizar un análisis heurístico de la aplicación “Infomedusa”, una plataforma de información y alertas sobre medusas en zonas costeras.
🔹¿Por qué infomedusa?
El reto era analizar, en 48 horas, una aplicación instalada en mi móvil. A pesar de que no es muy popular, personalmente fue bastante útil durante mis días de playa. Cuántas veces hemos ido al mar, sobre todo los que vivimos lejos, y al llegar ¡sorpresa!, viento, medusas, un mal día… Cuando descubrí esta aplicación, me resultó de gran ayuda poder verificar el estado de la playa y la costa antes de emprender mi viaje. Al haberla utilizado me permitió evaluarla de manera más completa.
Framework
A continuación enumero los pasos a seguir en la evaluación de la app.
Índice
✅ Qué es Infomedusa
✅ Análisis de la app
✅ Resumen
✅ Propuesta de mejora
✅ Prototipo
✅ Conclusiones
Proceso
🔵 Qué es Infomedusa
Infomedusa es la alicación móvil, desarrollada tanto en iOS como en Android, que nos ofrece información actualizada de las medusas en las playas.
Avisa a los ciudadanos de la presencia de estos invertebrados, además de la cantidad, variedad y peligrosidad, para poder evitar las molestas picaduras.
Es una app de tipo colaborativa, donde los propios usuarios pueden reportar el estado de las playas.
👌 Proporciona información a los bañistas:
- Listado de playas
- Información de cada una de ellas
- Mensajes
- Concurso de fotografía
- Mapas
- Información sobre medusas
- Tratamiento
- Consultas con expertos
- Normativa uso de playas
👀 Análisis de la app
🟥 Rojo (gravedad alta)
🟨 Amarillo (gravedad media)
🟥 Onboarding
▪️ Ayuda al usuario: la información en la primera pantalla (onboarding) es fugaz y desaparece rápidamente, lo que dificulta la comprensión. Debería ser más accesible y permanecer el tiempo suficiente para que el usuario la lea.
🟥 Cabecera página de inicio
▪️ Mostrar el estado del sistema: el buscador no proporciona retroalimentación cuando se introduce un término incorrecto. Debería informar al usuario sobre posibles errores en la búsqueda.
▪️ Consistencia y estándares: los iconos en la cabecera, específicamente el buscador y la medusa, no siguen un patrón de tamaño uniforme, lo que puede generar confusión. Es importante mantener una consistencia en el diseño. El cambio de icono al hacer clic en la medusa para filtrar y ordenar elementos no es intuitivo. Debería seguir estándares de diseño de interfaces para facilitar su comprensión por parte del usuario.
🟨 Contenido de la página de inicio
▪️ Hablar el lenguaje del usuario: el uso de onomatopeyas, en este contexto, puede generar confusión y hacer pensar que hay un error. Es importante utilizar lenguaje claro y comprensible para el usuario.
▪️ Estética y minimalismo: los textos deberían estar justificados a la izquierda en lugar de centrados para mejorar la legibilidad y la estética. El logo en la parte inferior es demasiado grande y no parece estar integrado adecuadamente en el diseño general de la página. Debe ser redimensionado y ubicado de manera más coherente con el resto de la interfaz.
✅ Recomendación
- Diseñar un onboarding explicativo que guíe al usuario en la aplicación, utilizando elementos visuales que refuercen el mensaje.
- Priorizar como pantalla de inicio el registro o el inicio de sesión de la app.
- Definir una cabecera más consistente con iconos que sean identificables con las funciones que representan, además de un un tamaño uniforme y una alineación adecuada para estos iconos en la cabecera, lo que ayudará a mejorar la apariencia general de la interfaz.
🟥 Registro
▪️ Ayuda al usuario: la aplicación no proporciona una confirmación visual o una ventana modal después de completar el registro para indicar al usuario que se ha realizado correctamente. Esta retroalimentación es esencial para que los usuarios tengan la certeza de que han completado la acción con éxito.
▪️ Consistencia y estándares: la inconsistencia en el uso del color rojo para los campos de entrada puede ser confusa para los usuarios. El color rojo a menudo se asocia con errores o problemas, por lo que su uso en campos de entrada debería ser coherente con un mensaje de error claro en lugar de indicar que se pueden escribir. Esto mejoraría la claridad y la consistencia visual.
▪️ Reconocer mejor que recordar: la falta de una opción para registrarse utilizando una cuenta de Google podría dificultar el proceso de registro para algunos usuarios. Permitir el registro con cuentas de terceros, como Google o Facebook, puede facilitar el proceso y mejorar la experiencia de usuario.
▪️ Prevenir errores: los campos de entrada no ofrecen retroalimentación inmediata cuando se introduce una dirección de correo electrónico de forma incorrecta.
✅ Recomendación
- Verificar la acción por parte del usuario mediante modals.
- Utilizar input de forma consistente; iconos y textos de ayuda al usuario.
- Permtir el inicio de sesión mediante Google
🟥 Menú
▪️ Consistencia y estándares:
☑️ Ubicación del menú: el menú hamburguesa debería estar ubicado en el lado derecho de la cabecera. La ubicación puede variar según las convenciones de diseño, pero es importante seguir una ubicación estándar que los usuarios reconozcan fácilmente.
☑️ Inconsistencia en los iconos: los iconos utilizados en el menú no siguen un estilo visual uniforme.
☑️ Tamaño no proporcional: la falta de proporcionalidad en los tamaños de los iconos del menú puede dificultar la legibilidad y la estética general de la interfaz.
☑️ Cohesión estética: la falta de cohesión estética puede afectar negativamente la apariencia general de la aplicación y la percepción de calidad por parte de los usuarios. Es importante definir y mantener una paleta de colores, fuentes y estilos visuales coherentes en toda la interfaz.
☑️ Uso del color en los eventos de botones: es importante para proporcionar retroalimentación visual a los usuarios cuando interactúan con elementos del menú.
▪️ Estética y minimalismo: la publicidad es muy intrusiva y molesta para el buen uso de la app
✅ Recomendación
- Reubicar el menú hamburguesa en el lado derecho de la cabecera si es la convención de diseño elegida para la aplicación.
- Diseñar iconos coherentes en términos de estilo visual y tamaño para el menú. Esto puede incluir el uso de una biblioteca de iconos con un diseño uniforme.
- Asegurarse de que los tamaños de los iconos sean proporcionales y se ajusten al contexto de uso.
- Trabajar en la cohesión estética de la aplicación mediante la definición y el seguimiento de pautas de diseño claras.
- Utilizar el color de manera efectiva para resaltar eventos de botones y proporcionar una respuesta visual clara a las interacciones del usuario.
🟥 Medusas y especies invasoras
▪️ Consistencia y estándares:
☑️ Calidad de las imágenes: las imágenes pixeladas y de baja calidad afectan negativamente la apariencia de la página y pueden dificultar la identificación de las medusas y especies invasoras.
☑️ Falta de márgenes: La falta de márgenes o espacios en blanco entre elementos puede hacer que el contenido se vea desorganizado.
☑️ Legibilidad de los textos: Los textos ilegibles son un problema importante, ya que dificultan la comprensión de la información sobre las medusas y especies invasoras.
☑️ Problemas de carga de las imágenes: la falta de carga de algunas fotos es un problema técnico que puede afectar gravemente la experiencia del usuario.
✅ Recomendación
- Reemplazar las imágenes pixeladas o de baja calidad con versiones de alta resolución y calidad.
- Agregar márgenes adecuados entre los elementos para organizar el contenido de manera efectiva. Utilizar la regla del 8.
- Mejorar la legibilidad de los textos mediante el contraste de color entre el texto y el fondo, y seleccionar fuentes legibles para asegurar que los usuarios con discapacidades visuales o de lectura puedan acceder a la información de manera efectiva.
- Resolver los problemas técnicos relacionados con la carga de imágenes para garantizar que todas las fotos se muestren correctamente.
🟥 Pantalla buscador de playas
▪️ Consistencia y estándares:
☑️ Inconsistencia en el espaciado y los márgenes: puede hacer que la página se vea desorganizada y difícil de leer.
☑️ Legibilidad del texto sobre el degradado: El texto que se superpone a un degradado puede ser difícil de leer.
☑️ El uso de la misma fotografía: puede resultar monótono y poco atractivo. Se debe proporcionar imágenes diferentes y relevantes para cada playa.
▪️ Estética y minimalismo:
☑️ Falta de una jerarquía visual: pueden dificultar la comprensión y la navegación.
▪️ Hablar el lenguaje del usuario:
☑️ Filtro por distancia no es claro: la opción de filtrar por distancia carece de claridad en cuanto a su objetivo. Debería especificarse a qué se refiere la distancia, como la distancia a la playa más cercana o algún otro punto de referencia.
✅ Recomendación
- Establecer pautas de diseño consistentes en términos de espaciado y márgenes.
- Asegurar la legibilidad del texto, especialmente en fondos degradados.
- Variar las imágenes utilizadas para evitar la repetición.
- Aplicar principios de color y jerarquía visual para guiar a los usuarios de manera efectiva.
- Cards más funcionales y minimalistas.
🟥 Pantalla mensajes
▪️ Hablar el lenguaje del usuario:
☑️ Pantalla poco intuitiva: la pantalla de mensajes presenta una falta de claridad en la comunicación con los usuarios. El icono en la parte derecha que parece una advertencia puede generar confusión sobre su función real. Los usuarios pueden esperar una función diferente a la que proporciona. Es importante utilizar iconos y elementos visuales que sean comprensibles y reflejende forma clara la acción que realizarán.
☑️ Acceso para escribir díficil de encontrar: La dificultad para encontrar el acceso para escribir mensajes indica un problema de usabilidad. El acceso a esta función debería ser más prominente y fácil de localizar para que los usuarios.
▪️ Estética y minimalismo:
☑️ Ruído visual: la presencia de “demasiado ruido visual” en la pantalla de mensajes sugiere que hay una sobrecarga de elementos visuales o información que puede distraer o confundir a los usuarios.
✅ Recomendación
- Utilizar iconos y elementos visuales que sean más representativos de la acción real que realizarán los usuarios, en lugar de iconos que puedan inducir a confusiones.
- Hacer que el acceso para escribir mensajes sea más prominente y fácil de encontrar en la interfaz.
- Simplificar la interfaz eliminando elementos innecesarios y reduciendo el ruido visual para mejorar la estética y la usabilidad general.
🔵 Resumen del análisis ¿Qué hemos visto?
Hemos analizado algunas pantallas de la app para valorar de forma global el impacto en cuanto a funcionalidad y uso.
- Onboarding e inicio
- Registro
- Menú
- Medusas y especies invasoras
- Playas
- Mensajes
✅ Fortalezas
- Información actualizada de estado de playas: lo que permite planificar las visitas de manera efectiva y obtener una experiencia más satisfactoria.
- Una fortaleza significativa de la aplicación es su capacidad para involucrar a la comunidad en la notificación de avistamientos de medusas en el litoral español. Esto crea un valioso sistema de retroalimentación en tiempo real que enriquece la información disponible.
- La aplicación fomenta la colaboración activa de la comunidad mejorando la utilidad de Infomedusa como recurso confiable para usuarios y turistas.
❌ Debilidades
- El diseño de la aplicación carece de consistencia y claridad en la definición de los iconos utilizados. Esta falta de cohesión visual puede resultar en una experiencia confusa para el usuario.
- La legibilidad de los elementos en la aplicación necesita mejorarse. Los textos y elementos visuales deben ser más legibles para garantizar que la información sea fácilmente accesible para todos los usuarios.
- Presencia de secciones que no aportan valor o utilidad a la aplicación. Estas secciones innecesarias pueden sobrecargar la interfaz y confundir a los usuarios.
- La navegación en la aplicación podría mejorarse significativamente. Un diseño más atractivo y minimalista facilitaría la búsqueda de información y la interacción con la aplicación.
- Exceso de ruido visual que distrae y dificulta la comprensión de la interfaz. Esto puede desviar la atención de los usuarios y disminuir la eficacia de la aplicación.
✔️ Recomendaciones:
- Rediseñar la interfaz para lograr una mayor cohesión y consistencia en toda la aplicación. Esto incluye el uso de elementos visuales y de diseño consistentes en todas las pantallas.
- Implementar la opción de inicio de sesión con una cuenta de Google para brindar a los usuarios una alternativa segura para acceder a la aplicación sin la necesidad de crear una cuenta nueva.
- Revisar la jerarquía visual de los elementos en la aplicación para que la información importante sea más prominente y fácil de encontrar.
- Identificar y corregir errores de navegación.
- Rediseñar los campos de texto para que proporcionen más información y ayuden al usuario a comprender mejor qué información deben ingresar. Esto puede incluir etiquetas claras y ejemplos.
- Revisión completa del diseño visual de toda la aplicación para asegurarse de que sea atractivo, profesional y fácil de usar. Esto puede incluir mejoras en la tipografía, el color y el diseño de iconos.
Si quieres ver la propuesta de mejora de la aplicación, haz clic en este enlace.
