Google Chrome: grupos de pestañas mejorados

Nov 27 2022
Estudio de caso: una evaluación de los grupos de pestañas de Chome (android) a través del principio de heurística y una solución para mejorar la experiencia del usuario. ÍNDICE 1] Cómo comenzó 2] Rediseño: ¿qué cambió? 3] Por qué elegir Google Chrome 4] Identificación del problema 5] Ideación 6] Wireframing 7] Creación de prototipos 8] Pruebas de usuario 9] Comentarios ¡CÓMO EMPEZÓ! He estado investigando y experimentando los principios de UX.

Estudio de caso: una evaluación de los grupos de pestañas de Chome (android) a través del principio de heurística y una solución para mejorar la experiencia del usuario.

ÍNDICE

1] Cómo empezó

2] Rediseño: ¿qué cambió?

3] ¿Por qué elegir Google Chrome?

4] Identificación del problema

5] Idear

6] Estructura alámbrica

7] Prototipos

8] Pruebas de usuario

9] Comentarios

¡CÓMO EMPEZÓ!

He estado investigando y experimentando los principios de UX. A mitad de camino, de alguna manera, terminé en un taller de tutoría de 2 semanas.

El taller mejoró mis fundamentos y me familiarizó con una perspectiva diferente de observación.

Nuestro mentor Anudeep lanzó un desafío de diseño de UX con un límite de tiempo de 48 horas. Y así es como puedo hacer un breve estudio de caso sobre Google Chrome para Android.

REDISEÑO: ¿QUÉ CAMBIÓ?

Hubo 2 cambios principales propuestos e implementados. Un cambio es visual y, por lo tanto, fácil de detectar, mientras que el otro cambio ocurre en la funcionalidad de elementos ya existentes y, por lo tanto, no es visible a simple vista.

1 ] Nombre de los grupos de pestañas

Rediseño 1

Aquí, seleccionamos un grupo de pestañas y agregamos una función de edición para nombrar los grupos de pestañas. Para simplificar, usamos el ícono de edición con el que los usuarios están familiarizados y lo combinamos con el estilo de diseño de íconos de Chrome.

Creamos una pantalla de solicitud emergente, que se podrá accionar cada vez que el usuario desee realizar cambios en el nombre.

2 ] Mover las pestañas

Rediseño 2

Aquí, el área marcada en rojo es el lugar donde la nueva opción para arrastrar está disponible y habilitada.

Esto se hace para ayudar al usuario a ordenar y organizar su pestaña de la forma que prefiera. Una vez organizado, ayudaría al usuario a ahorrar tiempo y ser eficiente.

3 ] Impacto en Usuarios y Negocios

Las pestañas y los grupos de pestañas son una alternativa rápida a los marcadores en Chrome Mobile. Y los cambios introducidos van a afectar positivamente tanto al Usuario como al Negocio.

✔USUARIOS:

Los cambios ayudan al usuario a ahorrar tiempo y esfuerzos. Les ayuda a administrar sus pestañas de manera más eficiente y fácil. Los grupos de nombres ayudan a identificar las pestañas más rápido y, por lo tanto, reducen el estrés mental que los usuarios habrían ganado al recordar cosas.

Con las pestañas de arrastre habilitadas, el usuario puede organizar las pestañas según sus necesidades y prioridades para ahorrar tiempo y esfuerzos.
También reduce los pasos que el usuario habría tomado en al menos 3.

✔Negocio:

Cuando el usuario no encuentra lo que necesita, se frustra y puede ir a otras aplicaciones (llamadas, mensajes, notas, mensajes instantáneos, etc.) para recuperar la información.

Esto puede resultar en la pérdida de TIEMPO DE PANTALLA .

El usuario también puede olvidar/posponer su tarea cuando navega por otras aplicaciones.

Esto puede reducir las MÉTRICAS DE RETENCIÓN.

Hacer que los procesos de los usuarios sean fáciles y eficientes les ayuda a ahorrar tiempo y esfuerzo y, por lo tanto, ayuda a aumentar la RETENCIÓN DEL USUARIO .

¿Por qué elegir Google Chrome?

Las elecciones hechas se basaron en más de una razón.

  • Para empezar, Chrome es una aplicación muy utilizada y, por lo tanto, tiene una gran audiencia. Cualquier mejora realizada puede ayudar a un gran número de usuarios.
  • En segundo lugar, dado que Chrome es ampliamente utilizado, encontrar personas para probar es relativamente fácil. Y así pueden dar respuestas detalladas, ayudándonos a diseñar mejores soluciones.
  • En tercer lugar, yo mismo estoy muy familiarizado con el producto. Y así me ayuda a evitar crear soluciones de diseño duplicadas.

La solución es tan buena como el problema.

Para identificar los problemas, utilizamos el principio 10 de Heurística y los probamos en el área especificada del producto.

Rediseño — Identificación de problemas

Problema (R1) identificado:

Mientras revisa el contenido de una pestaña, lo encuentra útil y desea promocionarlo. La imposibilidad de controlar la disposición de las fichas dificulta el control y la libertad del usuario.

Principio heurístico : CONTROL Y LIBERTAD DEL USUARIO

Problema (R1) identificado:

Es un conocimiento común entre los usuarios de pantallas táctiles que presionamos y arrastramos prolongadamente para cambiar de posición. Lo mismo falta en los grupos de pestañas de Google, en el interior.

Principio heurístico: FLEXIBILIDAD Y EFICIENCIA DE USO

Problema (R1) identificado:

El usuario ahora está muy acostumbrado a las prácticas comunes, vienen naturalmente. Entonces, al implementar prácticas comunes (arrastrar) en elementos elegibles pero no recibir la respuesta deseada, el usuario se siente frustrado

Principio heurístico: COINCIDENCIA ENTRE EL SISTEMA Y EL MUNDO REAL

Problema (R2) identificado:

Cuando organice sus pestañas en grupos, le gustaría que se detectaran fácilmente cuando sea necesario. La incapacidad de crear/marcar grupos de pestañas para tener una identidad distintiva minimiza el control y la libertad del usuario.

Principio heurístico: CONTROL Y LIBERTAD DEL USUARIO

IDEAR

Aquí encontramos algunas soluciones para los problemas que hemos identificado. Clasificó y eliminó algunos con un método de prueba y error. Y elegir la mejor solución para nuestro problema.

Las restricciones fueron identificadas y definidas antes de identificar las soluciones, de acuerdo con la capacidad y disponibilidad de recursos.

Rediseño — Ideación

ARMARIO

Las ideas son solo sueños a menos que se actúe en consecuencia.

Aquí creamos prototipos de baja fidelidad basados ​​en las ideas que hemos imaginado.

Se trazó un camino adecuado para los nuevos cambios y se verificó su viabilidad para implementarse en el sistema de producto actual a través de varios bocetos.

Después de algunos intentos, se eligió la idea visualizada en la imagen de abajo como base para el siguiente paso.

Accede al Link del prototipo de baja fidelidad, PINCHA AQUÍ

Rediseño — Wireframing

PROTOTIPOS

En este paso, convertimos los wireframes de baja fidelidad en prototipos visualmente agradables y viables.

Cambios realizados

✏️Hemos agregado un ícono de edición para que el usuario pueda nombrar los grupos de pestañas en Chrome.

✏️Hemos agregado una pantalla emergente, en la que el usuario puede agregar/cambiar el nombre. Esta ventana emergente se mostrará cuando el botón Editar entre en acción

✏️Hemos agregado una opción de arrastrar a la barra de grupo de pestañas inferior

Accede al Link del prototipo de alta fidelidad, PINCHA AQUÍ

Rediseño — Creación de prototipos

PRUEBAS DE USUARIO

La parte más importante de un diseño es probarlo. La prueba muestra la respuesta de los usuarios y su interés por el producto, y también ayuda a identificar los problemas de los usuarios y corregirlos.

Un producto que no gusta a sus usuarios es una Mala Inversión.

Encontrar usuario

Es importante identificar a las personas adecuadas para probar su producto. Deben pertenecer al grupo de audiencia objetivo.

Dado que Google es utilizado por una gran cantidad de personas, no fue difícil encontrar usuarios para probar nuestro producto. Excluyendo los pocos "No me molestes", "No tengo tiempo", encontramos rápidamente al usuario y observamos el resultado.

Tarea para el usuario

⚡Editar el nombre de un Grupo de pestañas.
⚡Pídales que ingresen al grupo de pestañas y exploren cualquier pestaña.
⚡Cambia la posición de esa pestaña en el grupo, directamente desde la página en la que se encuentra el usuario.
⚡Tu opinión sobre los cambios.

Qué observar

Observe qué tan rápido el usuario encuentra la opción de edición y si encuentra algún problema al realizar las ediciones.
Observe qué elección hace el usuario cuando intenta cambiar la posición de la pestaña.
¿Encuentran el camino en un intento?
¿Se cayeron perdidos?

Rediseño- Notas de observación del usuario

Perspectivas

Siempre puedes aprender algo de Todos y de Todo.

No importa cuán popular o ampliamente utilizado sea un producto: siempre pregunte al usuario si usa el producto o si está familiarizado con el producto o no.

El usuario puede atascarse/encontrar problemas con elementos preexistentes que no ha rediseñado.

COMENTARIOS

Después de analizar los datos recopilados del usuario y las observaciones hechas por nosotros, llegamos a la conclusión de que no necesariamente se necesitan más cambios.

Cuando el usuario ya está muy claro y contento con el producto que hemos diseñado, cualquier cambio más forzado puede afectar negativamente al producto.

Sin embargo, todavía introdujimos un cambio menor en el producto. Agregamos "Zoom on Hover" a la barra inferior de la pestaña Grupo.

Rediseño — Pasar el cursor

Conéctate conmigo en Linkedin, HAZ CLIC AQUÍ