.png)
EZFill es un servicio móvil de entrega de combustible de rápido crecimiento que mantiene funcionando tanto a las flotas de viajes como a las comerciales sin tener que tomarse un descanso del día para ir a una gasolinera.
Si bien ya tenían un sitio web y un dispositivo móvil para sus miembros, se dieron cuenta de que necesitaban para mejorar su producto y ofrecer una experiencia de usuario mucho mejor para su público objetivo.
1. Investigación, análisis y comparación del producto actual basado en las 10 reglas heurísticas de usabilidad de Jakob Nielsen sobre uso de Internet con la competencia.
2. Aplicar Evaluación heurística para determinar si la aplicación actual satisface las necesidades expresadas por el cliente en lo que respecta a las necesidades del usuario.
3. Presentación de los hallazgos y un recomendación formal para comunicar el mejor curso de acción.
EZFill ha pedido a nuestro equipo que haga un análisis general de la aplicación y ofrecer recomendaciones para mejorar la usabilidad y la accesibilidad.
Diseñador de UX de más de 2 semanas en un equipo de más de 4 personas en Figma
Nuestro equipo trabajó con el usuario del cliente en mente a través de lo que su sistema de aplicaciones anterior parecía y carecía, para identificar todas las funciones esenciales que necesitarían implementar en su sistema actual.
El equipo evaluó a los diferentes competidores en función de varios factores clave, como diseño, fortalezas y debilidades, accesibilidad y autenticidad como base para nuestras recomendaciones. Nuestro objetivo era comprender las prácticas y patrones estándar entre los competidores para implementar buenas prácticas en nuestro diseño o incluso dar más detalles sobre eso.
.png)
En equipo, evaluamos el producto en secciones, desde las pantallas de incorporación hasta las de ayuda. Hemos utilizado Las 10 heurísticas de usabilidad de Jakob Nielsen como regla general para hacerlo. No solo señalamos los principales problemas encontrados, sino que también ofrecimos las mejores prácticas para cada uno de ellos.
Es muy difícil para una sola persona analizar un proyecto completo y encontrar todos los problemas de usabilidad. Por eso, cada uno de nosotros exploramos la aplicación de forma individual y luego compartimos nuestros hallazgos para asegurarnos de que diferentes personas vieran diferentes problemas de usabilidad. Comenzamos con una revisión de evaluación heurística general y, más tarde, la dividimos en implementaciones esenciales que habría que realizar.
Las pantallas «Splash» e «Onboarding» fallaron requisitos de contraste de color, y el tamaño del subtexto era demasiado pequeño para mostrarlo en dispositivos móviles, lo que entra dentro de la regla #8 Diseño estético y minimalista. Además, el símbolo de la marca no se mostraba como en otras pantallas.
Seleccione diferentes tonalidades de color para pasar la accesibilidad, aumente el tamaño de la fuente del subtexto y añada o elimine símbolos de marca comercial para que sean coherentes en toda la aplicación. Una buena práctica para los dispositivos móviles es tener un tamaño de fuente de 16 píxeles.
1. Siguiendo el principio de familiaridad, la primera pantalla es inesperada para la mayoría de las aplicaciones, lo que maximiza la carga cognitiva que tendrá que soportar el usuario para pasar al siguiente paso.
2. El contraste de color del botón de llamada a la acción (CTA) no cumple con los requisitos de contraste de color. Además, también es necesario cambiar el botón «Usar ubicación actual» para mejorar la legibilidad.
3. Texto del encabezado principal «¿Dónde necesita que le entreguen el combustible? «debe estar alineado a la izquierda.
4. El estilo y la ubicación de el mensaje de error varía de una pantalla a otra. Por ejemplo, en la pantalla «Número de celda», la notificación aparece debajo del campo de entrada, el color rojo es mucho más claro y se usa una exclamación en lugar de la «x» que se usa aquí.
5. Según las reglas #4 y #8, el botón «Crear cuenta» de la CTA es naranja a pesar de tener los campos de entrada vacíos. En otras partes de la aplicación, el color naranja significa que el usuario puede continuar con el siguiente paso.
1. Utilizando la regla #4 Consistencia y estándares, rreorganizar el orden de las pantallas presentadas o modifique el título para ayudar a los usuarios a entender el objetivo de la aplicación de comprobar la disponibilidad en su ubicación.
2. Elegir un color gris más oscuro para contrastar con el texto blanco y facilitar la lectura.
3. Alinear el título a la izquierda mejoraría el diseño estético y de accesibilidad de la pantalla.
4. Como el mensaje de error cubre el título de la página, sería mejor para colocar los mensajes de error debajo de los campos de entrada de forma coherente. La mejor práctica sería elegir una combinación de colores que supere la accesibilidad.
5. En su lugar, el botón debería estar gris mientras haya campos vacíos. Una vez que los usuarios hayan introducido la información suficiente para crear su cuenta, el botón debería cambiar a naranja, lo que significa que el usuario puede pasar al siguiente paso.
1. Como se mostró en la pantalla anterior, el botón naranja no cumple con los requisitos de accesibilidad. Además, según la regla #8, es posible que la etiqueta numérica no sea necesaria hasta que se añada un vehículo aPara preservar el diseño minimalista.
2. Dependiendo de la longitud del texto o la oración, la columna quedará demasiado apretada. Por lo tanto, la tabla será estrecho y mal distribuido entre la organización en general.
1. Suponiendo que un usuario nuevo verá esta pantalla, eliminar el valor numérico adicional (0) se recomienda.
2. Para tener una mesa organizada, debe haber suficiente espacio entre las columnas del lado izquierdo y del lado derecho. Para ahorrar espacio, considera usar «gal» o «GL», que a menudo se usan para abreviar la palabra galón después del #8 del diseño.
1. El botón de estas pantallas es naranja cuando el campo de entrada está vacío. El texto no está alineado a la izquierda como se mencionó anteriormente. Además, la aplicación solicitó un número de teléfono, por lo que se les notificará cuando el servicio pase al área de usuarios. Sin embargo, ya se ha preguntado en pantallas anteriores.
2. Con otros formularios a lo largo de la experiencia de usuario, este tipo de lista (botones individualizados) no aparece.
1. Botón debe aparecer en gris hasta que el usuario haya rellenado todos los campos de texto de entrada y alinear los textos a la izquierda. La coherencia es esencial para demostrar profesionalismo y un flujo de usuarios coherente en toda la aplicación. Por lo tanto, si ya se solicitó el número de teléfono, no debería haber una segunda solicitud.
2. Para mantener la coherencia con el resto de la aplicación, una alternativa sería para convertir los botones en una lista desplegable y combínelo con la página «¿Dónde necesita que le entreguen el combustible?» para eliminar los espacios en blanco innecesarios. Esta regla, #1 sobre la visibilidad del estado del sistema, ayuda a mantener al usuario informado sobre lo que está sucediendo mediante la retroalimentación adecuada.
1. La mesa de hogar/trabajo puede causar confusión lo que hace que el usuario proyecte la idea de que habrá un menú diferente para cada opción del botón de alternancia.
2. El mensaje en el que se notifica al usuario que aún no tiene ningún pedido impide la acción requerida. Si bien el mensaje anima al usuario a ver el botón de abajo, un botón de llamada a la acción (CTA) eliminaría un paso.
1. Para minimizar la confusión sobre la descripción general de la cuenta, sería útil colocar la tabla de la casa y la del trabajo en la lista desplegable con la opción «Tu dirección».
2. El «Consigue tu primer EZFill» debería ser un botón de CTA para minimizar el tiempo dedicado a la pantalla y determinar qué acción completar. Esto proporcionaría la flexibilidad y la eficiencia de uso según la regla #7
1. Las pantallas de notificación y billetera muestran diferentes diseños de listas en toda la aplicación. Algunas están divididas por líneas, mientras que otras no están segmentadas.
2. Si solo hay un método de pago, editar el título puede aclarar qué introducir. Esto correspondería a la regla #2 Emparejamiento entre el sistema y el mundo real.
1. Como se mencionó anteriormente, coherencia en toda la aplicación traduce un diseño profesional y cohesivo.
2. Los títulos claros pueden ayudar a los usuarios a entender qué introducir evite cualquier confusión.
1. El botón «+» de añadir vehículo no es extremadamente visible ni intuitivo. Para ayudar a los usuarios a navegar y añadir coches, el botón debe estar situado en el botón de la izquierda y evita que los usuarios tengan que estirar el dedo para llegar a la parte superior. La ubicación y el énfasis que se le da al logotipo pueden dar la impresión de que es un botón cuando no lo es.
2. El botón Continuar en la parte inferior de la pantalla tiene la misma función que el botón naranja: ambos llevan a los usuarios a la página «Combustible». Esto hace la opción continuar es redundante.
3. Contraste de color entre el gris mostrado con el fondo blanco no supera la accesibilidad. Los usuarios pueden tener dificultades para leer y esto puede causar molestias.
4. «Eliminar vehículo» y «Guardar actualizaciones» los botones son inconsistentes como un pergamino, y uno permanece inmóvil.
5. La información y los iconos no son extremadamente claro para el usuario, que no cumple con la regla #10 Ayuda y documentación porque requiere que el usuario tenga una explicación adicional.
1. Eliminar el logotipo y alinear el encabezado a la izquierda o agregar una acción al logotipo crearía componentes más organizados y significativos para ayudar a los usuarios a navegar por la aplicación según la regla #7.
2. El botón Continuar se puede eliminar o rediseñar para llevar al usuario a una página diferente.
3. Las mejores prácticas para esta pantalla serían seleccionar tonalidades de gris diferentes o más oscuras para facilitar la accesibilidad.
4. Coloca el botón «Eliminar vehículo» debajo del botón «Guardar actualizaciones». El uso más sustancial del naranja implica una acción primaria, mientras que el contorno naranja implica una acción secundaria. Consistente con los diseños típicos, el botón de acción/ más importante debe aparecer primero.
5. El uso de la «x» aquí implica la opción de borrar. Considera reutilizar la «x» como atajo para eliminarla e intercambiar su posición con el icono de edición. También puedes eliminar la «x» e incluir un signo de exclamación naranja junto con el texto «No se encontró cobertura para el auto».
1. La cantidad excesiva de texto hace el diseño parece condensado y, por lo tanto, se debe agregar un espacio en blanco adicional entre todos los elementos.
2. Para aprovechar mejor el espacio disponible en la pantalla, el título podría cambiarse por una versión más corta y debería ser alineado a la izquierda para facilitar la lectura.
3. El texto de esta ventana emergente plantea al usuario dos preguntas: si quiere confirmar y si quiere continuar. Aunque ambos son sinónimos en este caso, es mejor centrarse en una pregunta sencilla para evitar confundir al usuario.
1. Reformule el mensaje intentar transmitir o eliminar cualquier texto o información innecesarios necesarios para que el usuario dé un paso.
2. Las alternativas podrían ser «localizar el vehículo» o «confirmar la dirección».
3. Los usuarios pueden cometer errores de vez en cuando. Por lo tanto, dándoles una confirmación adicional con una redacción precisa en áreas clave de flujo puede ahorrarles un error en el futuro. Considera eliminar la pregunta de la parte inferior y cambiar de «Sí» a la acción «Confirmar».
1. La opción de la barra de búsqueda podría ser beneficiosa para los usuarios que buscan encontrar una pregunta específica en lugar de desplazarse por toda la pantalla hacia arriba y hacia abajo.
2. El color gris del cuerpo del texto no supera los requisitos de contraste.
3. Las preguntas frecuentes y los términos del servicio abren una nueva pantalla dentro de la aplicación EZFill, mientras que la Política de privacidad se abre en un navegador web.
1. Siga las opciones de acordeón para los usuarios estándares de la industria y son fáciles de usar, como se indica en la regla #4.
2. Se puede cambiar un color y un tamaño de texto más oscuros aPara seguir las mejores prácticas de accesibilidad.
3. Se debe aplicar coherencia en todas las opciones y muestran profesionalismo y un diseño cohesivo en general.
Con la información más que suficiente recopilada por el equipo, estuvimos listos para la propuesta tras unas cuantas rondas de evaluación exhaustivas más adelante. Al señalar las áreas de mejora, nuestro cliente pudo determinar qué mejora sería mejor para su producto y ofrecería una experiencia de usuario excepcional.
Si bien nuestro cliente no tenía requisitos rigurosos para el análisis de la aplicación, mi equipo y yo pudimos comparar minuciosamente los productos de la competencia para aplicar prácticas comunes utilizando las 10 reglas heurísticas de usabilidad de Jakob Nielsen y señalar las principales áreas de mejora.
La principal conclusión de este proyecto es, sin duda, «mantenga una mente abierta y esté dispuesto a repetir». El proceso de diseño cambia constantemente y debe cumplir con las expectativas de los usuarios.
El equipo de EZFill aplicó algunos de los conceptos señalados en nuestra revisión, proporcionando una experiencia agradable para sus usuarios.
