Diseño app delivery: parte 2 (diseño)

¡Hola de nuevo!

En el anterior post (parte 1) analizamos cinco aplicaciones de tipo delivery para hoy comenzar a diseñar un mapa de navegación con toda la funcionalidad que necesitaría el diseño de una app para delivery. Ya vimos los puntos en común, todo lo que más mola de cada una y además, vamos a aplicar los trucos de UX que comentamos también en este post.

Volvamos a mencionar los puntos en común de todas ellas y las conclusiones que obtuvimos para no olvidar ningún detalle sobre el diseño app tipo delivery.

 

Qué tienen en común las apps de delivery

• En cuanto al contenido del diseño app, todas tienen listado de restaurantes, búsqueda, mi perfil y dónde / cuándo recibiré mi pedido.
• Tienen apartado de mi carrito que te permite ver tus pedidos con la posibilidad de añadir más platos o eliminarlos.
• En los listados de restaurantes, siempre nos encontramos el nombre, tipo de comida, rango de precio y solo alguno de ellos info de tipo dirección, distancia, pedido mínimo y ofertas.
• En cuanto a la UI, vemos que utilizan colores vivos. Predominan los azules, verdes y rojos.
• En las cabeceras todos ellos muestran imagen de la comida del restaurante.
• Las categorías de los platos se resaltan con headlines y todos excepto uno (Glovo) no tienen imágenes de cada uno de los platos que ofrecen, sólo la descripción en texto. Esto obligaría a los clientes a realizar fotografías profesionales de cada uno de los platos.
• Utilizan imágenes de calidad (fotógrafo profesional) en listados y cabeceras.
• Emplean tipografías de palo seco en sus logos y tipos sencillas o del sistema para dentro de la app.

 

Conclusiones del estudio para poner en práctica

✔ Las apps con mejor experiencia de usuario son las que utilizan tabbar como Uber Eats y Just eat. De esta manera el diseño app contempla el listado de contenido en un tab, mis pedidos en otro y perfil en otro diferente. La navegación sería más sencilla y lineal que si fuese en menú lateral (que tienes que ir retrocediendo para cambiar de sección).

✔ Los colores más atractivos son los colores vivos.

✔ Por supuesto, necesario el filtrado de contenido para los restaurantes.

✔El diseño app tipo delivery que más agradan visualmente son aquellos que utilizan fondos blancos como Deliveroo, Just eat y Uber eats y con grandes imágenes profesionales.

✔ Iconos sencillos acompañando los literales refuerzan el contenido y ayudan al usuario. El tipo de cliente es bastante variado (según el restaurante, diríamos 18-45 años).

✔ Poder añadir una nota, hacer favorito un restaurante desde el listado y autocompletado + sugerencias en las búsquedas mejoran la UX .

✔ Es bastante atractivo y útil la función de seguimiento de tu pedido a tiempo real como en Uber Eats.

✔ Algo que rompe un poco la monotonía de los listados, son los scrolls horizontales (por ejemplo con los restaurantes destacados).

✔Los restaurantes con descuentos en el listado destacan sobre el resto de restaurantes.

 

---

Vamos a diseñar la estructura de la app de delivery

Con todos estos puntos hemos diseñado la estructura de la app, hemos definido su navegabilidad aplicando los trucos para una buena experiencia de usuario y también, por último, aplicado un diseño de interfaz super molón para que sea atractiva para el usuario.

En realidad, al igual que hemos podido realizar el diseño app para ofrecer servicio a domicilio de muchos restaurantes (nivel 2, ej. Deliveroo), también es posible escalarla para una cadena o un sólo restaurante (nivel 3, ej. Telepizza), e incluso para el nivel 1, todo tipo de servicios a domicilio, (ej. Glovo).

En este post, sólo nos centraremos en el diseño app tipo delivery nivel 2 (servicio a domicilio de muchos restaurantes asociados). En primer lugar, veremos su funcionalidad mostrando partes del mapa de navegabilidad de la app (si necesitas ver el mapa por completo no dudes en contactar con nosotros). Y luego veremos la UI aplicada en unas cuantas pantallas modelo.

Antes de comenzar, habría que comentar que se ha decidido realizar el diseño app como si para una aplicación iOS se tratase. Si fuese un diseño app para iOS y Android, lo aconsejable es hacer los wireframes de una manera que se pudiese aplicar a las dos plataformas, con elemento smás genéricos para que ambos equipos de desarrollo pudiesen leer el flujo sin dificultad.

 

Flujo de navegación (UX):

Es importante mostrar el flujo de la navegación de la app por orden, como si se abriese por primera vez, enseñar todas las opciones y procesos que se pudiesen realizar, los errores que pudiésemos encontrarnos, etc.

1- Primero comentaremos cómo está estructurado el contenido de la app. Utilizaremos tabbar con 4 pestañas:

• Home
• Buscar
• Pedidos
• Cuenta

✔ Ya vimos que el diseño app con mejor experiencia de usuario es el que utiliza tabbar (como Uber Eats y Just Eat) porque la navegación sería más sencilla y lineal que si fuese en Menú lateral (que tienes que ir retrocediendo para cambiar de sección).

2- La primera pantalla al abrir la app es la splash. Mostraremos solamente el logotipo pero también se puede elaborar un poco más y hacer alguna animación mientras se cargan los datos o mostrar algún texto de bienvenida o eslogan de la aplicación. Ten en cuenta que ambos ejemplos no son nativos y por lo tanto encarecería su coste por dificultad en desarrollo. Además si la aplicación tiene función multilingüe hay que traducirlo a cada idioma que se necesite.

 

3- A continuación hemos decidido introducir un tutorial (opcional) para ayudar al usuario con su funcionamiento y preguntar por la localización para mostrar el contenido disponible cerca de él (aunque luego vamos a dar opción de cambiarlo por si desea otro lugar que no sea en el que está).

Si el usuario no quisiese dar el consentimiento de geolocalización, le daríamos la opción de introducir manualmente la dirección de entrega.

 

4- De este modo, inmediatamente mostraríamos el contenido (listado de restaurantes) con unos filtros por defecto: «Cuándo» = ahora y «Dónde» = lugar indicado (ya sea la geolocalización o la dirección introducida). Estos selectores son editables.

 

✔ Como podéis ver, vamos a dejar al usuario indagar por la app sin obligarle a registrarse. Dejaremos que haga el pedido y cuando esté todo listo y quiera pagar, le pediremos los datos necesarios. Es menos intrusivo, mejora la experiencia al usuario y además tendremos menos bajas porque ya habrán realizado el pedido y no querrán perder toda la tarea realizada y volver a pedir en otra app.

Ahora bien, ya hemos dicho que podemos introducir el lugar por geolocalización o manualmente y para el «cuándo», damos la posibilidad de elegir entre «ahora» o «programar para más tarde». Necesitaremos en el diseño app también un sort by para mostrar el contenido de la manera que el usuario le interese, por ejemplo: los más solicitados, favoritos, con ofertas, abiertos ahora, etc.

En este listado veremos sólo lo esencial de cada restaurante: nombre, fotografía, tipo de comida, valoración y promociones.

 

5- Si pulsamos en uno de ellos accederemos a su detalle. Aquí la información es más completa. Debajo de la info nos encontraremos inmediatamente con la carta del restaurante.

Para seleccionar platos, aplicaremos algo que nos gustó en la aplicación de Glovo y Deliveroo:

✔ Poder seleccionar platos desde el listado directamente, apreciar que el plato está ya escogido y la posibilidad de editarlo en el mismo. Cada celda tienen un botón de añadir «+» que al pulsarlo te dice la cantidad según tantas veces lo pulses. Además, una vez seleccionado el plato, también aparece el botón de restar/eliminar ¨-¨ (restar si tienes más de uno y eliminar si sólo tienes uno).

En la parte inferior de la pantalla se muestra el resumen de los platos que estamos seleccionando en la carta, tanto el número de unidades como el precio y el acceso a la pantalla de pedidos. Además, también aplicaremos una idea buena recogida en la aplicación de Uber eats:

✔ Al hacer scroll, las categorías de los platos se mostrarán en la parte superior (pantalla segmentada con scroll horizontal) para hacer más fácil la búsqueda del plato. Ayuda al usuario a buscar un plato entre las categorías sin hacer un scroll largo.

 

6- En la pantalla de Mi pedido recordamos al usuario el nombre del restaurante (porque en la app hay muchos de ellos), mostramos Dónde y Cuándo, el listado de platos y por último varias acciones secundarias como «Introducir un código promocional», «Añadir notas», «Alérgenos» etc.

En la parte inferior de la pantalla tenemos un bloque sticky que nos informa del «Subtotal», los «Gastos de envío» (si los tuviese), «Descuento por fidelización» (si lo tuviese), el «Total» y el acceso para «Finalizar pedido».

En cuanto a los platos, las celdas utilizadas son casi las mismas que en la parte de la carta. Pero hemos retirado la descripción y añadido el botón de Añadir Comentario. Este botón mejora la experiencia de usuario en le caso de que quiera aclarar algún dato como añadir extras o quitar algún ingrediente, punto de la carne, etc.

 

7- A la hora de finalizar el pedido vemos en el mapa lo siguiente: ¿Está el usuario registrado?

• Obviamente, si es la primera vez que abre la app, no, pero lo dibujamos para mostrar cómo sería si el usuario ya ha utilizado la aplicación anteriormente y estuviese la sesión abierta (ya logueado). Si no está registrado, nos lleva a login (con el forgot password y registro)
• Si lo está, nos lleva a la pantalla de finalizar pedido con los datos de dirección de envío y método de pago para revisar y aceptar si está correctamente. Estos campos, por supuesto, deben ser editables.

✔ Añadir una celda en la dirección de reparto para poner un apodo o nombre hace que el usuario pueda nombrar varias direcciones y así reconocerlas más fácilmente sin tener que recordar las direcciones. Por ejemplo «casa», «trabajo», «casa Ana», etc.

 

8- Login y Registro. Ahora, una vez que el usuario ha seleccionado todos los plato para el pedido, es cuando le vamos a pedir que inicie sesión o se registre si es la primera vez.

Como ya he comentado anteriormente, tener en cuenta en el diseño app que en un mapa de flujo hay que mostrar al menos una vez el comportamiento de un error local, de servidor y también una validación de una tarea importante.

 

9- Buscar restaurante. Como veis, también aplicamos lo que nos gustó de la app Deliveroo:

✔ Tab de búsqueda con los tipos de comida + autocompletado y búsquedas realizadas anteriormente. Esto mejora muchísimo la experiencia de usuario a la hora de realizar una búsqueda.

 

10- En la pestaña de Pedidos mostraremos todos los casos que nos podríamos encontrar:

• Si no hay ningún pedido realizado, mostrando un placeholder.
• Listado con sólo pedidos antiguos
• Listado de antiguos más el que tenemos en curso.

Estarán ordenado de más recientes (arriba) a más antiguos.

• En los pedidos antiguos, nos interesa mostrar la imagen del tipo de comida,el nombre del restaurante, fecha y resumen del pedido.
• El pedido en curso tiene un trackeo a tiempo real de tu pedido como en Uber Eats. Vemos en el mapa el punto de partida (restaurante), el destino (domicilio) y por dónde va el rider. Además, debajo he mostrado el progreso con steps y los minutos aproximados para recibir tu pedido. En la misma card, incluiremos Detalle del pedido, Info sobre el rider y Ayuda o Contacto por si hubiera algún problema.

Los detalles de pedido antiguo y pedido en curso son exactamente igual pero el antiguo tiene un botón par «Volver a realizar el pedido» de nuevo.

 

11- Y por último, el tab de Cuenta. El contenido de esta vista variará según si el usuario está logueado o no.

• Si está logueado veremos el saludo inicial personalizado (con su nombre) y todos los datos que puede editar para realizar su pedido como: «Datos personales», «Restaurantes favoritos», «Métodos de pago», «Direcciones de reparto», «Código de fidelización», etc. A continuación las secciones sobre la app: «Ayuda» o tutorial, «Valóranos», «Términos y condiciones», «Contacto», etc. Y por último también la opción de «Cerrar sesión».
• Si no está logueado, el saludo de bienvenida es genérico, a continuación el acceso a «Iniciar sesión» o registrarte y después las secciones comunes sobre la app que hemos comentado anteriormente.

Estas secciones las agruparemos para ordenar la información y que sea más fácil y usable a la hora de encontrar la sección deseada.

 

Bien, una vez que hemos desarrollado los mapas de flujo de las apps, lo suyo sería comprobar que todo funciona correctamente y que no se nos olvida ningún dato importante. Para ello, lo mejor sería exportar las pantallas y hacer un prototipo para poder navegar sobre ello y ver su flujo natural desde un móvil.

 

Aplicamos el diseño a la interfaz

Una vez comprobado con el prototipo que no falta ninguna funcionalidad, continuaríamos aplicando diseño a la interfaz.

Como vais a poder ver ahora, hemos aplicado los rasgos interesantes de UI que encontramos en el diseño app tipo delivery analizadas en el anterior post. Para mostrar el diseño, normalmente se escogen aquellas pantallas modelo que mostrasen todos los elementos que podría tener la aplicación. De esta manera, nos ahorramos hacer las numerosas pantallas que tiene todo el mapa, no es necesario. Nosotros ahora sólo mostraremos unas cuantas:

1. Splash.
2. Listado de restaurantes.
3. Detalle de restaurante.
4. Detalle de restaurante con scroll y algunos platos seleccionados.
5. Mi pedido.
6. Pantalla de registro vacía.
7. Pantalla de registro completa.

1- Splash

Adjunto la splash para mostrar los colores escogido de la marca y el logo.

Éstos están dentro de los puntos en común y conclusiones que recogimos en el análisis previo:

✔ Utilizan colores vivos, predominan los azules, verdes y rojos.

✔ Todos utilizan tipografías de palo seco en sus logos

Hemos utilizado un degradado en tonos verdes azulados y un logotipo con fuente redonda y sin remates. El color diríamos que está entre Glovo y Uber eats.

 

 

 

 

 

 

 

 

2- Listado de restaurantes

Para la cabecera hemos utilizado el verde más oscuro del degradado mostrado en la pantalla anterior. Con este verde contrasta más el texto en blanco que con el resto.

• Hemos incluido el logotipo en la navbar y debajo el filtrado de Dónde y cuándo. Vais a ver en toda la app que los botones, cards, iconos e imágenes tienen los bordes bastantes redondeados. Seremos consistentes y lo aplicaremos en todos los elementos.
• Los fondos son blancos, los iconos de stroke con algo de detalle y las cards bastante sencillas y ordenadas.
• Comenzamos con los restaurantes destacados con scroll horizontal diferenciándolos del resto de restaurantes que están en vertical y más grandes.
• La info de los restaurantes destacados es más simple que los restaurantes que vienen a continuación. Éstos llevan además rating, rango de precios, y la promoción la bajamos con el resto de info.
• De Uber eats anotamos la idea de poder hacer un restaurante favorito desde el listado y lo aplicamos.
• Arriba a la derecha vemos el botón de ordenar.
• El resultado, es una pantalla bastante limpia, con buenos márgenes, imágenes de calidad y buena jerarquía de información.

 

 

3- Detalle de restaurante

• Si prestamos atención en la cabecera, veremos que es la misma estructura que el resumen del listado de restaurantes + descripción y tiempo aproximado de entrega. Esto de repetir estructuras es bueno por dos motivos: el usuario no percibe tanto cambio y asocia mejor el contenido de donde viene y segundo, es más fácil para desarrollarlo.
• La navbar es transparente y los iconos de atrás, compartir y favoritos son blancos pero con shadows para que haga contraste y no se pierda con la imagen.
• La promoción de esta manera destaca y lo hace más llamativa.
• El listado de platos es muy parecido al wireframe. Tan sólo se han ajustado un poco los tamaños y colores de los textos y botones de añadir. Como veréis, hay un ejemplo de cada en las celdas: Plato sin descripción, con dos líneas y con tres.
• Las líneas de los headlines y de las celdas son diferentes. Las primeras son más gruesas y llegan hasta el final y las segundas más finas y deja espacio a los botones de añadir para que respiren.
• En cuanto a la jerarquía de información en la celda va de la siguiente manera: Primero el título del plato (grande, negra y gruesa), el precio (tamaño mediano y negro) y descripción (pequeño y gris)

 

 

 

 

4- Listado de restaurante con scroll y platos seleccionados

Esta pantalla es la misma que la anterior pero haciendo scroll y habiendo seleccionado algunos platos.

• Las categorías de la carta, una vez hecho el scroll se suben a la parte superior de la pantalla como si de un segmented se tratase (con scroll horizontal). Este segmented es ligeramente más oscuro que la navbar blanca.
• Los iconos han pasado de blanco al color verde primario.
• Como veis, los elementos verdes son los pulsables, el atrás, favoritos, añadir, restar, ver mi pedido…
• Se muestra también aquí una celda con dos líneas de título.
• El resumen de platos lo hemos hecho sticky en la parte inferior con el número de platos y el precio ligeramente transparente para que el texto del botón destaque ante esto.

 

 

 

 

 

5- Mi pedido

Para esta pantalla en realidad se han realizado varias versiones del encabezado, todas ellas bastante válidas:

En la versión 1 se hizo una cabecera con la imagen del restaurante y el texto de Nombre, Dónde y Cuándo encima. El problema es que no es muy legible y además hemos tenido que utilizar el recurso de oscurecer la imagen y nos ensucia un poco la pantalla.

En la segunda, se optó por un diseño sencillo, se agruparon los datos con headlines en Dónde/Cuándo y los platos seleccionados. Esta vista así, en realidad funciona muy bien, es clara, sencilla y legible, pero quizá todo sea muy plano y demasiado blanco. Por ese motivo se decidió meter una imagen en el fondo y así crear la versión definitiva que tenemos a la izquierda.

• Nombre del restaurante en la navbar.
• Fondo de la imagen del restaurante sin oscurecer en el fondo.
• Cuándo y Dónde en forma de card por encima de la imagen.
• Agrupación de los platos seleccionados con un headline.
• A continuación, la celda de Subtotal resalta para terminar la lista de los platos.
• Celdas con acciones secundarias después del subtotal.
• Precios en caja agrisada sticky en la parte inferior con el botón de finalizar pedido.

6- Pantalla de registro vacía

Este tipo de pantallas, formularios como el registro y login, muestran cómo serían las celdas vacías y completas. Por ello, a continuación tenemos la misma pantalla con el formulario completo.

• Tenemos el logotipo en el encabezado.
• Vemos que es una pantalla push por el motivo de que venimos de la pantalla de login.
• Las celdas tienen el texto clarito porque es un placeholder.
• Tenemos el GDPR con un checkbox sin marcar como dice la nueva ley.
• El botón de Registrarme lo encontramos inactivo hasta que completemos todo el formulario correctamente y aceptemos los términos y condiciones.

 

 

 

 

 

 

7- Pantalla de registro completa

Aquí veis el formulario completo y los términos y condiciones aceptados.

• El texto introducido ya es negro.
• Los iconos permanecen grises para dar relevancia a la información introducida.
• Si decidiésemos no poner iconos, en las celdas habría que meter el título permanente, así el usuario no pierde la pista de qué es lo que tiene que introducir en esa casilla. Es otro consejo para una mejor UX.
• Términos y Condiciones está subrayado porque nos lleva a otra vista.
• El botón ya está activo. Este color verde lo empleamos en todos los botones clickables de la app.

 

 

 

 

 

 

 

 

 

 

Conclusiones

• En la parte de UX hemos mostrado cómo es el flujo de la app desde la primera vez que se abre hasta la realización exitosa de un pedido. También los ejemplos de errores que nos podríamos encontrar (local y de servidor). Comentar que esto ha sido un resumen para poder mostrarlo en un post pero en realidad es mucho más extenso, nos quedaría algunas funcionalidades secundarias por profundizar como las pantallas de Ayuda, Valóranos, Legal, etc.
• Volver a recalcar que, una vez realizada la navegación de una app, habría que comprobar con el equipo y cliente y además se recomienda exportar las pantallas y realizar su prototipo. De esta manera comprobamos el flujo natural y se corrigen errores antes de continuar con la UI.
• Para la realización del diseño de interfaz, en el diseño app se aconseja realizarlo en las pantallas modelo que decidamos. Éstas son las que contienen todos los elementos gráficos que pudiesen encontrar los desarrolladores en la app. No es necesario diseñar cada una de las vistas que aparecen en estos mapas.
• Para tener en cuenta la UI en el diseño app, lo mejor es ser sencillo, limpio, ordenado y utilizar los elementos más nativos posibles para evitar complicaciones en desarrollo. Sí que es posible dar un toque de distinción al diseño app aunque se utilicen elementos nativos como hemos visto. No es necesario recargar las pantallas, la simpleza mejora la experiencia de usuario ¡menos es más!

 

Si estás leyendo este post porque te interesa para aplicarlo a un proyecto y el diseño app, así que no olvides echar un ojo a éste otro que habla sobre cómo es el trabajo del diseñador UX/UI dentro de un equipo cuando diseña una aplicación móvil para un cliente.

Muchas gracias y ¡espero que os haya gustado!