Ejercicio de rediseño de Amazon Checkout —Parte I: Navegación

Tenga en cuenta: este es un ejercicio. Su propósito no es crear soluciones comerciales, sino practicar su creación en un entorno simulado. El poder de adivinar se aplica para formar objetivos comerciales y métricas.

Encontrará enlaces a los prototipos y otras partes del ejercicio (una vez que se publiquen) al final de este artículo.

La meta

Amazon está haciendo un gran trabajo procesando millones de pedidos por día, pero siempre hay margen de mejora: mayores tasas de satisfacción del cliente, ventas exitosas, conversiones a suscripciones pagas, etc.

En este ejercicio, intentaremos dividir el proceso de pago en experiencias más pequeñas y ver si podemos mejorarlas una por una, comenzando con la navegación.

Lo dado

El pago en Amazon es un proceso de varios pasos. Esto es lo que atraviesa un usuario no registrado para realizar un pedido:

Flujo de pago de usuario no registrado en Amazon.com

A pesar de no conocer ninguno de los indicadores de rendimiento reales para este flujo de trabajo, podemos detectar el problema más obvio aquí: la interfaz de usuario parece carecer de coherencia:

  • La mayoría de las pantallas tienen un diseño y estilo únicos, por lo que tendrá que estudiar cada pantalla antes de poder comenzar a interactuar con confianza.
  • Las pantallas tienen un contexto diferente: la vista del carrito de compras (1) es parte de la IU general, pero el resto de las pantallas se tratan con un encabezado especial, que representa los pasos para completar.
  • Navegar a través del proceso de pago es un camino unidireccional: la mayoría de las veces no puede volver a los pasos anteriores. El encabezado indica su progreso, pero no funciona bien: está atascado en Envío y pago para tres pantallas diferentes (3–5), luego las Opciones de regalo se omiten en la mayoría de los casos de uso.

El proceso de pago es complejo (por una razón) con muchos más problemas de UX, y le recomiendo que lo revise usted mismo y vea cómo otros lo hacen. Experimentar la solución vale más que mil imágenes.

Por ahora, nuestra tarea es mejorar la navegación, y es hora de trabajar con el lápiz.

Dibujar

Doodling es una gran herramienta para la exploración del diseño de UI. De manera similar a la lluvia de ideas, intercambia calidad y detalles por la libertad y la velocidad de generar soluciones. Y si me preguntas, la libertad junto con la velocidad son lo más importante para la primera iteración.

Productos de garabatos: feos, caóticos y perspicaces.

Un par de horas más tarde, miles de ideas se reducen a cualquiera de los dos enfoques en navegación:

El primero es centrado en el pago. Significa que básicamente comenzamos con lo que actualmente es la última pantalla del proceso de pago: Resumen. Para editar la información, un usuario debe abrir las vistas respectivas (como envío y pago).

El segundo está basado en pasos. Es muy similar al diseño actual que tiene Amazon, pero con algunas excepciones: el carrito de compras es parte del flujo de trabajo de pago general y también queremos permitir que los usuarios naveguen libremente por los pasos del proceso.

Ahora que tenemos bocetos para dos puntos de partida, podemos pasar al siguiente nivel de exploración de diseño. No, no maquetas, por supuesto.

Prototipos

En lugar de dibujar maquetas en Sketch o Figma solo para agregar un poco más de detalle a nuestros garabatos dibujados a mano, usaremos vue.js para comenzar a crear diseños accionables de inmediato.

Los prototipos tendrán incorporado el Prototype Manager para cambiar rápidamente entre las versiones que implementamos y las iteraciones por las que pasamos:

Gerente de prototipo

Diseño centrado en el pago

La idea aquí es hacer que la página final de Checkout sea un punto de partida y que todas las demás vistas (editables) sean sus elementos secundarios:

Mostrar el carrito de compras como parte de la pantalla compleja no es una buena idea para aquellos que solo quieren ver lo que hay allí o tal vez eliminar algunos artículos. Por lo tanto, tiene sentido establecer una pantalla de carrito de compras editable como punto de entrada para el proceso, aunque no sea la vista principal.

Algunas horas después, tenemos un prototipo que simula los pasos que deben seguir los usuarios nuevos con esta arquitectura de navegación:

Las pruebas iniciales y las observaciones revelan algunas cosas buenas sobre este enfoque:

  • El flujo principal para un usuario primerizo es el mismo que para un usuario registrado: Carrito de compras - Pagar (- opcionalmente Editar información de envío / pago). Este patrón es simple, en comparación con la navegación basada en pasos, que tiende a omitir silenciosamente algunos pasos en circunstancias particulares.
  • En cualquier momento, es fácil saber exactamente dónde se encuentra en el proceso, cómo llegó allí y hacia dónde lo llevarán los botones. Esta comodidad se logra mediante la eliminación de todos los misteriosos botones Continuar y Continuar, que a su vez es el resultado de alejarse del proceso lineal paso a paso. Aquí los usuarios tienen que elegir conscientemente ir a cada pantalla presionando el botón correspondiente.

Las cosas malas de este enfoque también se revelan rápidamente:

  • Debe elegir ingresar la información que falta usted mismo. A diferencia del diseño basado en pasos, que muestra todos los formularios necesarios uno por uno antes de permitirle continuar, aquí debe presionar Editar para todas las piezas faltantes.
  • La pantalla más ocupada se muestra desde el principio. No hay forma de alejarse de la vista Resumen que debe mostrar toda la información para que se sienta cómodo haciendo clic en Realizar pedido. Pero tenerlo como el hogar del proceso puede abrumar al usuario.

Aquí puede probar el prototipo usted mismo: Prototipo A.1. No se moleste en ingresar algunos datos en Envío y pago, solo presionar "Guardar" hará el truco por ahora.

Diseño basado en pasos

Esta arquitectura es muy similar a navegar con pestañas, pero en lugar de pestañas tenemos pasos, y la mayoría de ellos revelan formularios que debe completar para continuar. Este patrón debería ser familiar para cualquiera que haya tenido la suerte de instalar un software empaquetado con el Asistente de instalación.

Durante las primeras iteraciones del proceso de creación de prototipos, resulta obvio que la tabla de contenido también puede servir como resumen de navegación e información. Asi que, por que no intentarlo:

Cosas buenas que encontramos aquí:

  • El proceso es claramente progresivo: una pantalla a la vez, seguida inmediatamente por otra. Solo ve un botón de acción a la vez, por lo que es poco probable que alguna vez se pregunte qué hacer a continuación.
  • Pudimos convertir la tabla de contenido en una parte aún más útil de la interfaz de usuario que ahora también sirve para navegación y resumen de pedidos. Mostrar a los usuarios los resultados de sus esfuerzos generalmente mejora la comprensión general del proceso.

Cosas malas sobre este enfoque:

  • El flujo varía para diferentes casos de uso. Los usuarios primerizos siguen todos los pasos, mientras que los usuarios registrados pasarán al último paso. Y mucha gente probablemente experimentará ambos casos.
  • Los usuarios registrados comienzan con una pantalla bastante ocupada, como en nuestro primer enfoque. Aunque en este caso es casi inevitable ya que no hay información que completar, lo que significa que no hay pasos para mostrar.

Aquí puede probar el prototipo usted mismo: Prototipo A.2

Conclusión

No hay un ganador claro entre los dos enfoques ya que ambos tienen sus fortalezas y debilidades únicas. Muchas correcciones vendrán en iteraciones posteriores. Definitivamente hay más pruebas de usuarios para hacer, pero eso también viene más tarde. La navegación es solo un poco de la experiencia más grande, que debería ser el verdadero tema de prueba.

Mientras tanto, puedes encontrar ambos prototipos aquí:

https://checkout-redesign-89a9e.firebaseapp.com/#/

Siga adelante y pruebe los prototipos (no olvide cambiar entre ellos utilizando el menú del Administrador de prototipos en la parte inferior derecha), y contácteme con sus sugerencias e ideas en Twitter.

No olvides suscribirte y te veré en la Parte II: Rediseño del carrito de compras.