Mejores prácticas de UX: cómo diseñar capturas de pantalla de aplicaciones escaneables

Rediseño de las capturas de pantalla de la App Store de HeyDoctor

Vamos a jugar un juego. Elija una aplicación en su teléfono que realmente le guste. Usted es el creador de esta aplicación y busca recaudar dinero de inversores. Tiene un minuto para presentar su aplicación a los VC. El dinero está en juego, pero solo si puedes convencerlos en 60 segundos. ¿Cómo lo haces? ¿Describe lo que hace la aplicación? ¿Dices cómo la aplicación es única en comparación con sus competidores? ¿Muestra lo buena que es la experiencia del usuario?

Un usuario de la App Store tarda una media de 7 segundos en decidir si quiere descargar su aplicación o no. Un estudio de investigación sobre decisiones de descarga que involucró a 25,000 visitantes y 10,000 instalaciones calificó las capturas de pantalla como la segunda razón más importante para instalar, y la calificación ocupó el primer lugar.

Descubrimos que el tiempo promedio que las personas pasan en una ficha de Play Store es de 7 segundos. El hecho es que la gran mayoría de las personas abandonan la página incluso antes. Los usuarios comprometidos permanecen un poco más, pero todos siguen el mismo proceso: verifique el ícono, vea las dos primeras capturas de pantalla y escanee la primera línea de la descripción de la aplicación - Peter Fodor, Por qué 7 segundos pueden hacer o deshacer su aplicación móvil

Las capturas de pantalla son un espejo de las historias de usuario de su aplicación y reflejan su experiencia de usuario. Estudié las 100 mejores aplicaciones y sus capturas de pantalla utilizando los datos recopilados por la buena gente de Incipia. Estaré haciendo referencia a hallazgos clave de múltiples estudios aquí.

Aplicación enfocada: HeyDoctor

HeyDoctor es una aplicación que permite a los usuarios obtener recetas médicas en línea sin la necesidad de visitar a un médico de atención primaria. HeyDoctor puede recetar y surtir recetas de medicamentos que van desde anticonceptivos, crecimiento del cabello hasta tratamientos para infecciones del tracto urinario, informes de laboratorio y más. También puede recibir tratamiento para casos de atención primaria como el tratamiento del acné, las infecciones urinarias, el tratamiento del herpes labial y más. La aplicación móvil de HeyDoctor ha sido bien recibida en la App Store con 122 reseñas calificándola con 4.7 estrellas.

Rediseñaremos las capturas de pantalla de HeyDoctor y aprenderemos sobre capturas de pantalla escaneables.

Descargo de responsabilidad

Tenga en cuenta que no trabajo en HeyDoctor y las opiniones expresadas en este estudio de caso son estrictamente mías. A diferencia de los diseñadores, gerentes de producto y todos los responsables de tomar decisiones clave relacionadas con el diseño que trabajan en HeyDoctor, yo no tengo acceso a análisis en su base de usuarios y es posible que no esté viendo la imagen completa. Las decisiones de diseño pueden basarse en objetivos comerciales, priorización de recursos o limitaciones técnicas. Por lo tanto, cualquier estudio de caso no solicitado no es exhaustivo, y ciertamente no estoy sugiriendo que HeyDoctor abandone sus capturas de pantalla actuales y adopte mi rediseño.

El diseño actual

Vamos a trabajar en la aplicación iOS de HeyDoctor. Así es como se ven las capturas de pantalla existentes:

Sigue la configuración estándar de título y subtítulo que hace un buen trabajo al explicar las historias de usuario de la aplicación. No estamos interesados ​​en rediseñar la marca o la interfaz de usuario, por lo que intentaremos mantenerlos consistentes en nuestro rediseño.

Historias del usuario

Antes de profundizar y comenzar a realizar cambios visuales, debemos saber para qué instalan los usuarios HeyDoctor y qué buscan cuando descubren esta aplicación.

  1. Obtenga recetas y resurtidos. Los usuarios buscan encontrar una manera fácil de obtener sus recetas y reabastecimientos en línea sin la necesidad de visitar a un médico.
  2. Obtenga tratamiento para la enfermedad. Los usuarios están buscando cómo obtener tratamiento para su enfermedad en línea.
  3. Habla con un médico de atención primaria. Los usuarios quieren hablar con un médico, pero probablemente no puedan visitar a uno en este momento debido a limitaciones de tiempo, financieras o de transporte.
  4. Haga todo esto sin involucrar ningún papeleo de seguro. Los usuarios no quieren involucrar a su seguro médico porque no tienen uno o su copago es demasiado alto.

¿Capturas de pantalla o miniaturas?

Los tamaños de pantalla han crecido en un 72% desde que se lanzó el iPhone original con la pantalla de 3,5 pulgadas. El tamaño de pantalla promedio de los teléfonos inteligentes vendidos en los EE. UU. En 2018 es de 5.5 pulgadas. Las pantallas son más grandes que nunca y los diseñadores de productos están en constante evolución para aprovechar este espacio adicional disponible. Uno pensaría que las pantallas más grandes atraerían a los diseñadores a poner más títulos de texto en las capturas de pantalla. Pero lo que estamos observando es todo lo contrario.

Constantemente observamos que menos del 4% de los usuarios que buscan una aplicación amplían las capturas de pantalla de retrato y solo el 2% de las capturas de pantalla de paisaje ampliadas. Para los jugadores, es incluso menor a solo 0.5%. Probablemente esto se deba a que la jugabilidad suele ser lo suficientemente clara incluso en las miniaturas —Peter Fodor

Menos del 4% de las personas que visitan la página de su aplicación tocan sus capturas de pantalla.

Los diseñadores han comenzado a prestar atención a esta métrica con muchas aplicaciones que tratan sus capturas de pantalla como miniaturas para mirar en lugar de algo para aprovechar. Se podría esperar que los usuarios en 2016 toquen la captura de pantalla para leer el texto en ella. Pero con el nuevo diseño de la tienda de aplicaciones y las pantallas más grandes, los usuarios ya no están tocando sus capturas de pantalla.

Veamos algunos rediseños de capturas de pantalla de 2016 a 2018. Observe cómo casi todas tienen menos palabras y fuentes más grandes.

El número mágico 2

78 de las 100 aplicaciones principales tienen cinco capturas de pantalla, 13 aplicaciones tienen cuatro capturas de pantalla, 6 aplicaciones tienen tres capturas de pantalla y 3 solo tienen dos. Como desarrollador, pensaría en elegir cinco capturas de pantalla porque más contenido es mejor, ¿verdad? Incorrecto.

Solo el 9% de los usuarios pasan de las dos primeras capturas de pantalla. Las capturas de pantalla de paisaje funcionan peor al 5%. Esto hace que sea imperativo atraer al usuario en las dos primeras capturas de pantalla. Dígales a sus usuarios lo que hace su aplicación en la primera pantalla y amplíelo en las capturas de pantalla correspondientes.

Los resultados de nuestra investigación dejan en claro que TIENES que explicar el beneficio principal de tu aplicación en las dos primeras capturas de pantalla (iOS10, Google Play) o tres (iOS11) si estás usando imágenes verticales. Si realmente desea utilizar una imagen de paisaje, solo tiene una: Peter Fodor

Examinemos las dos primeras capturas de pantalla de algunas aplicaciones populares.

Elementos de la interfaz de usuario destacados

Los usuarios que miran sus capturas de pantalla están tratando de evaluar las funcionalidades de su aplicación. Los subtítulos de texto les ayudan a comprender el contexto detrás de las pantallas. Los diseñadores se lo están facilitando aún más a los usuarios al resaltar los elementos de la interfaz de usuario que la leyenda de texto intenta explicar.

Veamos algunos ejemplos.

Aprendizajes

  1. Explique la historia de usuario más importante de su aplicación en las dos primeras capturas de pantalla. Solo el 9% de los usuarios que acceden a la lista de aplicaciones pasarán de las dos primeras capturas de pantalla.
  2. Aumente el tamaño de la fuente y reduzca el texto. Con pantallas más grandes, los usuarios se están condicionando para escanear y mirar la captura de pantalla en lugar de tocarla y leer. Menos del 4% de los usuarios tocarán tus capturas de pantalla para leerlas.
  3. Resalte los elementos de la interfaz de usuario que representan leyendas de texto. Facilita el escaneo de las capturas de pantalla y mejora la capacidad de visualización de las capturas de pantalla.

Ahora que sabemos un poco sobre cómo hacer que las capturas de pantalla sean más legibles, comencemos a aplicar nuestros hallazgos clave a las capturas de pantalla de HeyDoctor.

Paso 1: actualice el iPhone a las generaciones más nuevas

Las capturas de pantalla de HeyDoctor utilizan la generación anterior de iPhones. Si bien no es un factor decisivo, me gustan mis iPhones como mis aplicaciones. Actualizado y en fleek (lo siento).

Paso 2: reduce el texto y hazlo más legible

Intentaremos hacer que los subtítulos sean un poco más legibles indicando las historias de los usuarios en un formato conciso. También eliminaremos los subtítulos y las descripciones para dar cabida a los títulos más grandes.

La tercera captura de pantalla muestra la página de configuración de la aplicación, mientras que su título habla de cómo la aplicación no requiere una póliza de seguro. Reemplazémoslo con una pantalla más relevante. Lo reemplazaré con la primera pantalla que verá cuando intente obtener una receta en la aplicación, lo que implica indirectamente que no necesita un seguro para comenzar.

Paso 3: resalte los elementos relevantes de la interfaz de usuario

Como aprendimos anteriormente, resaltar los elementos relevantes de la interfaz de usuario que hacen referencia a los subtítulos los hace más fáciles de ver y leer. También ayuda al usuario a escanear la captura de pantalla más fácilmente.

Interfaz de usuario de chat

Veamos cómo destaca Tinder su interfaz de usuario de chat:

Utiliza inteligentemente imágenes de perfil y burbujas de chat con elementos de marca como colores para imitar su interfaz de usuario de chat real.

Intentemos hacer algo similar:

Insertemos este activo en la captura de pantalla:

Intenté integrar la marca de HeyDoctor en las burbujas de chat. No sentí la necesidad de incluir fotos de perfil porque los médicos con los que hablas en la aplicación no tienen una foto de perfil.

Cartas y sombra paralela

Echemos un vistazo a cómo Uber destaca sus elementos de interfaz de usuario.

Me encanta esta forma mínima de resaltar elementos de la interfaz de usuario con tarjetas y sombras. Usaremos este estilo para enfatizar algunos elementos en nuestras capturas de pantalla.

Decidí cambiar los subtítulos debajo del teléfono para que el usuario vea el elemento de la interfaz de usuario resaltado antes de leer el título.

Paso 4: cambios cosméticos

Hemos realizado varios cambios en nuestras capturas de pantalla para optimizar la capacidad de escaneo. Ahora hagamos que se vea mejor. Un buen diseño visual puede ser un atractivo increíble para los usuarios y no debe ignorarse al rediseñar las capturas de pantalla.

Agregar pantallas de perspectiva

Las pantallas isométricas se ven modernas y pulidas. Puede ver teléfonos isométricos en casi todas partes, desde los comerciales de productos perfectamente renderizados de Apple hasta maquetas altamente pulidas en Dribble (¡es una locura pensar que Dribble se inició originalmente como un sitio web para compartir prototipos de diseño WIP de bajo nivel!)

Puse a nuestra disposición un par de perspectivas de las pantallas.

Elegiré la primera maqueta en perspectiva y la dividiré en dos capturas de pantalla porque solo tenemos 3 capturas de pantalla en este momento y podemos agregar hasta 5 en la App Store.

Agregué una leyenda a la primera página: "Su médico personal". Fácil de leer, resume lo que hace la aplicación y es conciso.

Cambiar gradiente de fondo

El contraste entre el fondo y el primer plano es demasiado duro para mí en este momento. Cambiémoslo a un tono más claro de azul.

Realizaremos un degradado con los nuevos colores que elijamos.

Veamos cómo se ve esto en nuestras capturas de pantalla.

Voy a agregar algunas crestas justo debajo del texto para que actúe como un diferenciador entre el texto y el teléfono.

Pude obtener un vector isométrico genial de la web. Usémoslo para hacer la última captura de pantalla.

Diseños finales

antes de

Después

Conclusión

Con todo, hicimos poco más de cuatro pequeños ajustes iterativos. Pero el resultado final son capturas de pantalla que son fáciles de ver y se sienten modernas. Además, ninguno de estos ajustes requirió una habilidad artística innata. El estudio de algunas aplicaciones en la App Store nos ayudó a saber qué problemas buscar.

¡Gracias por leer! Este fue un proyecto de fin de semana divertido para mí y disfruté escribiendo sobre él aquí. Con suerte, esta publicación le dio una idea del estado de las capturas de pantalla en la tienda de aplicaciones. No dude en enviarnos sus comentarios o hacer cualquier pregunta que tenga en la sección de comentarios a continuación.