Deambule menos, llegue más rápido a su archivo multimedia deseado en WhatsApp

Nov 28 2022

Mejorar la experiencia del usuario de la búsqueda de archivos multimedia de WhatsApp en "información de contacto" para reducir la duración total de la sesión de búsqueda de un archivo multimedia en particular, lo que resulta en una mayor eficiencia, más control y libertad para el usuario. Recientemente participé en un desafío de diseño que condujo a la creación de este estudio de caso.

Recientemente participé en un desafío de diseño que condujo a la creación de este estudio de caso. Entonces, antes de sumergirse en mi estudio de caso, busquemos un poco de contexto ⬇️

Cómo comencé con el UX Design Challenge

Entonces, mi viaje comenzó asistiendo al taller UX Kickstarter de 2 semanas de Anudeep, donde aprendí sobre los principios de diseño de UX, heurísticas, creación de UI en Figma, creación de prototipos animados y el impacto comercial del diseño de UX.

Todo lo que aprendí fue de una manera que no es un libro de texto. Con una poción mágica de sentido común inducido por la curiosidad, comencé a mirar productos cotidianos, ya sean físicos o digitales, con una mentalidad curiosa o se puede decir que se abrió mi tercer ojo, que es el "ojo del diseñador".

Con esta mentalidad curiosa, entramos en una sesión con Anudeep donde nos informaron sobre el desafío del diseño de UX. Al ser mi primera participación en un desafío de diseño, estaba súper emocionada y un poco nerviosa al mismo tiempo. Tuvimos 2 días para terminar el desafío, pero supongo que la emoción de completarlo dentro de un estricto límite de tiempo fue una gran experiencia de aprendizaje para aprender a diseñar teniendo en cuenta las restricciones.

➡️ Mi rediseño final de la experiencia de búsqueda de archivos multimedia de WhatsApp, que es parte de la pantalla de información de contacto que incluye la opción de medios, enlaces y documentos

Aquí hay una comparación de la pantalla original y el Rediseño. Le explicaré cómo llegué a la solución en la última parte del estudio de caso.

Figura 1.1 Pantalla original

Fig 1.2 Pantalla rediseñada (antes de la prueba de usabilidad)

Fig. 1.3 Pantalla rediseñada (después de las pruebas de usabilidad)

Hablemos de la solución y cómo ayuda a los usuarios

En la solución final,

Agregué diferentes pestañas de medios como Fotos, Videos, Audio, GIF y Pegatinas. Ahora, cada vez que alguien necesita buscar un archivo multimedia en particular, digamos videos, puede cambiar instantáneamente a la pestaña de videos y encontrar todos los videos de ese mes en particular, que desea compartir con alguien o guardar en su dispositivo. Esto ayuda a los usuarios a ahorrar mucho tiempo que, de lo contrario, se habría dedicado a buscar archivos multimedia donde se mezclaron diferentes tipos de archivos multimedia.

Además de eso, también les di a los usuarios la flexibilidad y el control para mostrar u ocultar una pestaña de medios en particular que desean ver. Hay dos opciones de filtro, una es para cada mes específico, donde uno puede mostrar u ocultar las pestañas de medios por mes y la otra opción es filtrar las pestañas de medios en general para todos los meses, lo que el usuario prefiera.

También agregué una opción para acceder a los archivos multimedia de los que aún no se ha realizado una copia de seguridad para que esos archivos sin copia de seguridad no se mezclen con los que están respaldados. Como el usuario puede terminar haciendo clic en los archivos sin copia de seguridad solo para descubrir que no pueden abrir/interactuar con los medios. Por lo tanto, estos archivos sin copia de seguridad estarán disponibles en una pantalla diferente. Teniendo así en cuenta la heurística de prevención de errores para los usuarios.

¿Cómo ayuda la solución al negocio?

La solución ayuda a ahorrar mucho tiempo a los usuarios, lo que a su vez les ayuda a realizar tareas más rápido, reduciendo así la duración de la sesión de los usuarios y las interrupciones en la búsqueda.

Aquí hay un prototipo de Figma para lo mismo:

Ahora hablemos de cuál fue el proceso para llegar a las decisiones finales de diseño

La razón por la que elegí WhatsApp y este flujo en particular

Fuente: Pinterest

Como mencioné anteriormente en el taller de UX, desarrollé el hábito de mirar cada producto, ya sea físico o digital, desde el punto de vista de un diseñador y comprender los "por qué" del diseño se convirtió en mi segunda naturaleza. El libro de trabajo sobre el aprendizaje del diseño existente fue de gran ayuda en esto, ya que cada producto se analizó desde la perspectiva del sentido común.

Mientras usaba WhatsApp para compartir contenido multimedia desde la información de contacto de un chat, me di cuenta de que el flujo de búsqueda es un poco tedioso, especialmente cuando se busca un archivo multimedia específico que podría ser un video, un GIF o un archivo de audio.

Sabía que tenía que haber una manera de reducir los esfuerzos necesarios para buscar un archivo multimedia. Otra cosa que tuve en cuenta fue que, ya sea cualquier producto, famoso o nuevo, siempre hay margen de mejora porque a medida que el producto evoluciona, también lo hacen el diseño y las necesidades del usuario.

Otra razón para elegir WhatsApp como mi aplicación para el desafío fue su amplia base de usuarios de más de 2 mil millones de usuarios activos mensuales. Los productos que tienen una base de usuarios tan amplia significan que incluso un solo cambio en una característica del producto podría tener un gran impacto en los usuarios y en el negocio.

Hablando de negocios, UX tiene un gran impacto en las empresas y estos impactos se pueden medir a través de muchas métricas comerciales . Si se mejora el flujo de búsqueda de WhatsApp, podría resultar en la reducción de la duración de la sesión y los abandonos durante la búsqueda del usuario y podría ayudar a la empresa de una manera muy impactante.

¿Cómo entendí las áreas de mejora en WhatsApp?

Aprender y comprender las 10 heurísticas del diseño me ayudó mucho a identificar los problemas en mi flujo de búsqueda existente. Con la ayuda de algo de sentido común y evaluación heurística, pude detectar algunos problemas que podrían resolverse para el flujo de búsqueda.

Figura 2 Problemas identificados

Durante la evaluación heurística, se me ocurrieron preguntas como:

¿Por qué los archivos están segregados como Medios, Enlaces y Documentos?
Flexibilidad y eficiencia de uso: la segregación de archivos en medios, enlaces y documentos ayuda a los usuarios a buscar rápidamente el archivo que desean guardar o compartir con alguien.

Flexibilidad y eficiencia de uso : mostrar los archivos de medios por meses ayuda a los usuarios a encontrar rápidamente los medios específicos de un mes en particular en el que se compartieron.
Reconocimiento en lugar de recuperación : debido a la segregación mensual de los archivos multimedia, los usuarios pueden reconocer rápidamente qué tan antiguo o nuevo es el archivo en lugar de tratar de recordar cuánto tiempo atrás se compartió el archivo multimedia, lo que a su vez ayuda a reducir la carga cognitiva de el usuario.

¿Cómo encontrará el usuario el archivo multimedia específico para reducir el tiempo de búsqueda para el usuario?

Es difícil para el usuario buscar un tipo de archivo multimedia específico que podría ser un video, un gif, un audio o una etiqueta. A menudo, los usuarios pueden necesitar desplazarse mucho para encontrar un tipo de archivo multimedia específico cuando intentan compartir el archivo con alguien o guardarlo en sus propios dispositivos.
Heurística- Flexibilidad y Eficiencia de uso

Es difícil para el usuario identificar qué archivos no están respaldados, ya que los archivos respaldados y no respaldados están presentes en la galería y, por lo tanto, están mezclados.
Prevención heurística de errores

De los problemas identificados durante la evaluación heurística, se me ocurrieron 2 ideas y opté por la que tenía más alcance para resolver el problema.

Figura 2.1 Ideación

Idea 1 : tenga fotos, videos, Gif, pegatinas y audio como opciones de pestañas para segregarlos y hacer que la búsqueda del tipo de medio sea más flexible al compartir con alguien o guardarlo en su dispositivo, también agregue una sección en la parte superior para no respaldado archivos para identificación y prevención de errores.

Idea 2 : además de la idea 1, también tenga un filtro de pestañas para ver solo las pestañas de medios deseadas a la vez, por ejemplo, el usuario que quiere ver solo las pestañas de audio y video puede seleccionar las pestañas de audio y video del filtro para rápidamente encontrar esos archivos.

Seguí adelante con la idea 2, ya que le brinda al usuario la flexibilidad y la eficiencia para buscar rápidamente el archivo multimedia de una gran colección de archivos de la galería, así como el control y la libertad del usuario para filtrar qué tipo de archivo multimedia desea el usuario. ver en su pantalla en el momento dado.

La idea seleccionada también creará un gran impacto comercial al reducir la duración de la sesión y los abandonos durante la búsqueda.

Trayendo pensamientos en papel

Necesitaba visualizar cómo se verían mis ideas en la interfaz y, por lo tanto, continué esbozando prototipos en papel para comprender mejor mis ideas.

Fig. 2.2 Prototipos de papel

Me sentí muy emocionado de dar vida a mis ideas con la ayuda de la creación de prototipos en papel, como se ve en la imagen de arriba, creé pestañas de medios separadas y agregué filtros mensuales para ocultar/mostrar pestañas de medios, además de dar la opción de acceder sin respaldo. archivos multimedia al usuario.

¡Usar la aplicación marvel para crear prototipos fue divertido y cuando jugué con el prototipo, la sensación fue increíble a medida que mis ideas se traducían de mi mente a las pantallas!

Haciendo mi prototipo lo más real posible (Prototipos de Alta Fidelidad)

Aprender sobre la interfaz de usuario y comprender cómo funciona una interfaz ayudó enormemente a seguir adelante con la creación de prototipos de alta fidelidad en Figma. Habilidades como la creación de prototipos animados, el espaciado y el tamaño resultaron útiles al diseñar las interfaces. Los complementos también fueron un gran ahorro de tiempo durante el proceso de diseño de la interfaz de usuario.

Fig. 2.3 Prototipos de alta fidelidad

Durante el rediseño de la interfaz de usuario, agregué opciones de pestañas de archivos multimedia, como Fotos, Videos, Audio, Gifs y Pegatinas.
Se agregó un ícono de filtro para ocultar/mostrar pestañas de medios por mes.
Se agregó un todavía al ícono de copia de seguridad para brindar a los usuarios una opción para acceder a los archivos que aún no se han respaldado.
El uso de complementos como Unsplash para imágenes de archivo y símbolos de diseño de materiales para íconos fue un gran ahorro de tiempo.

Validando si mis soluciones funcionarán con la ayuda de pruebas de usabilidad ✅

Ahora que he completado mis diseños según los problemas identificados durante la evaluación heurística.

Probé el diseño con los usuarios para asegurarme de que funcionan y mejorar lo que no funciona.

Como WhatsApp es una aplicación muy conocida y casi todo el mundo la usa,
acudí a 3 personas al azar en un gimnasio para hacer las pruebas de usabilidad.
En las pruebas de usabilidad, fui a los usuarios y les pedí que hicieran las tareas para comprender si mi diseño es comprensible para los usuarios y si los usuarios pueden usarlo. Si creen que la función los ayudaría personalmente si se implementara en la aplicación real y les pidiera sus sugerencias, si las hubiera.

Tarea asignada a los usuarios —

1) Ir a medios, enlaces y documentos desde la pantalla de información de contacto
2) ¿Puedes buscar un tipo de archivo multimedia en particular
? 3) ¿Puedes filtrar y ver el tipo de archivo multimedia que deseas ver
? 4) ¿Puedes buscar el lugar? donde se pueden ver los archivos que aún no se han respaldado

Puntos de observación —

1) ¿Puede el usuario comprender la segregación de los tipos de archivos multimedia?
2) ¿Puede el usuario navegar y buscar el tipo de archivo multimedia deseado?
3) ¿El usuario puede filtrar un tipo de medio en particular?
4) ¿El usuario ya puede acceder a los archivos a la opción de copia de seguridad?
5) ¿Comprender si el usuario puede comprender si los usuarios reconocen rápidamente el icono de copia de seguridad?

Perspectivas y comentarios de las pruebas de usabilidad-

El usuario podría navegar fácilmente de una pestaña de archivo multimedia a otra
El usuario encontró la función muy intuitiva de usar.
El usuario encontró la opción de filtros útil y fácil de usar.
A los usuarios les gustó la opción que aún no se ha respaldado.

Comentarios y observaciones de los usuarios durante las pruebas de usabilidad

Durante las pruebas de usabilidad, descubrí que los usuarios encontraron muy útiles todas las características incorporadas en el prototipo, sin embargo, uno de los usuarios sugirió agregar también una opción para filtrar las pestañas de medios que son para ocultar o mostrar los tipos de archivos de medios, no solo mes a mes. pero en general también eso es a un solo click poder ver solo fotos o solo gifs o videos o stickers de todos los meses.