Construyendo la pantalla de presentación perfecta

Probablemente te estés preguntando: “¿Qué tan difícil puede ser crear la pantalla de presentación perfecta?” Y probablemente tengas razón al pensar que estamos hablando de una pantalla que será visible durante sólo un par de segundos (si es así). Y una pantalla que parece mostrarle un logotipo al usuario antes de desaparecer. Entonces seguramente no puede ser tan complicado.

Equivocado.

La pantalla de presentación perfecta esconde algunos funcionalidades clave que su aplicación debería tener, tanto desde la perspectiva de la experiencia del usuario como de la funcionalidad. Si bien es posible que no veas esas funcionalidades en acción, están escondidas debajo de la superficie en la mayoría de las pantallas de presentación que ves en tu móvil. Saber cuáles son esas funcionalidades significa que puede diseñar una pantalla de presentación que se adapte a varios escenarios diferentes de una manera elegante y eficiente.

Desde una perspectiva de diseño, la pantalla de presentación prepara el escenario para el resto de la aplicación, invitando a los usuarios a salir de las aplicaciones frías y estériles que usan a diario y sumergiéndolos en su visión durante los siguientes 3 o 4 minutos. Tienes su atención. Haga esto bien y sus usuarios ingresarán con grandes expectativas y anticipación. Hágalo mal y abandonarán su aplicación antes de que usted tenga la oportunidad de quitarles algunos análisis clave.

Empecemos…

La pantalla de presentación nació del requisito de que las aplicaciones pasaran unos segundos configurándose antes de que el usuario pudiera moverse. No importa qué tan rápido se inicie su aplicación, casi siempre hay algunas pequeñas tareas que el sistema operativo o el código de su propia aplicación deben realizar antes de que el usuario pueda comenzar a tocar botones y navegar por las pantallas.

Tal vez su aplicación necesite cargar algunos datos básicos para que la primera pantalla tenga algún contenido para que el usuario lo vea. Tal vez su usuario necesite autenticarse nuevamente porque no ha usado la aplicación por un tiempo. Quizás sea necesario cargar algunas imágenes clave desde el servidor antes de que aparezca la primera pantalla. Sea lo que sea, la pantalla de presentación es un lugar perfecto para hacer esto (bueno… la mayor parte del tiempo).

Verso manteniéndolo súper simple

Hay mucho debate sobre la necesidad de una pantalla de presentación hoy en día, ya que los sistemas operativos han avanzado y las aplicaciones pueden iniciarse casi instantáneamente, pero las pantallas de presentación todavía están presentes en casi todas las aplicaciones principales y ofrecen una gran oportunidad para que hagamos algo de preparación. -Trabajar antes de que se muestre la pantalla principal.

Antes de comenzar a analizar cómo hacer que esta pantalla sea lo mejor posible, debemos considerar algunas limitaciones. En primer lugar, la pantalla de presentación debe ser rápido. ¿Qué tan rápido? Lo más rápido posible, pero nunca más de 2 o 3 segundos. Cualquier usuario que utilice su aplicación con regularidad se frustrará rápidamente si tiene que sentarse y esperar a que se abra una aplicación durante más de unos segundos. ¿Y por qué querrías hacerlos esperar de todos modos? ¿Seguramente los quieres adentro, tocando botones, comprando productos y conectándose con otros? Entonces, cualquiera que sea tu estrategia de pantalla de presentación, asegúrate de que, si infringe la regla de los 3 segundos, se te ocurra una nueva estrategia.

También tenga en cuenta que si su aplicación se utiliza con regularidad (es decir, sus usuarios abren la aplicación al menos una vez al día), debe reducir esto a la regla de 1 segundo, o incluso intentar eliminar por completo la necesidad de una pantalla de presentación. . Imagina tener que ver una pantalla de presentación de Whatsapp de 3 segundos cada vez que quieres enviar un mensaje a un amigo, o una pantalla de presentación de Tinder de 3 segundos cada vez que obtienes una coincidencia (lo cual, con suerte, es bastante frecuente 😉). En estos casos, puede omitir el inicio por completo e ir directamente al contenido: cargar todo lo que necesite desde la pantalla principal y mostrar cualquier error o problema una vez cargado.

¿Por qué crees que los hoteles y las grandes empresas gastan tanto dinero en sus grandes e impresionantes entradas? Porque en el momento en que cruzas esa puerta, sabes que estás en un lugar de calidad. Lo mismo se aplica a las aplicaciones. En el momento en que un usuario toca su ícono en la pantalla de inicio, es transportado a su mundo. Esta es tu oportunidad de impresionar. Para mostrarles a esos usuarios que su aplicación está hermosa y cuidadosamente diseñada y que disfrutarán cada segundo en su espacio.

Entonces, ¿cómo debería verse una pantalla de presentación? Mantenga el diseño simple, atrevido, y visual. En esos preciosos 3 segundos (o menos), su usuario no tiene tiempo para digerir múltiples piezas de información (y no debería tener que hacerlo), así que concéntrese en presentar la aplicación por primera vez de una manera visualmente atractiva.

Las pantallas de presentación más simples mostrarán un fondo sólido o degradado con el ícono de la aplicación y el título desapareciendo. Vaya un paso más allá y anime el ícono de su aplicación para brindar una sensación real de calidad; solo recuerde mantener la animación enfocada y simple, y definitivamente no rompa la regla de los 3 segundos. ¿Trabajar con socios o patrocinadores? Ahora es un buen momento para presentarlos (pero recuerda que no es la información más interesante para los usuarios, por lo que podrías considerar guardarla en otro lugar de la aplicación). Lo que sea que decidas, mantenlo simple. Este no es el momento de obligar a sus usuarios a concentrarse; simplemente introdúzcalos suavemente en la experiencia que ha creado para ellos, mientras promueve la calidad de su aplicación perfectamente diseñada.

Uber lo mantuvo simple, pero con una animación muy agradable para sumergirte en la experiencia de la aplicación.

Nota rápida sobre las animaciones: no te lo tomes demasiado en serio. Algunos diseñadores tienen la costumbre de exagerar y diseñar una animación que cuenta una gran historia, lo cual es genial si el ícono de tu aplicación tiene una historia que contar. Pero recuerda, aparte de la primera vez que el usuario vea esto, no importará qué historia cuentes. Así que mantenlo simple, y si realmente quieres volverte loco, pide a tus desarrolladores que lo programen para que solo muestre la animación compleja la primera vez que un usuario abre la aplicación, con una alternativa más simple y liviana para sesiones posteriores.

https://dribbble.com/sammedve lo mata con esta animación de presentación, pero puede que sea demasiado larga para cada sesión

Pregúntele a cualquier desarrollador de aplicaciones y le dará una lista de 100 cosas que quieren hacer en el código mientras se carga la pantalla de presentación. Pero el truco aquí es centrar ese corto período de tiempo en el mínimo absoluto necesitas para que la siguiente pantalla que aparezca tenga suficiente contenido para ofrecer una transición perfecta. Como diseñador de UX, tu responsabilidad es que la experiencia del usuario sea primordial, y ahora mismo, en esta primera pantalla de la aplicación, si te equivocas con esa experiencia, puedes sabotear todo tu arduo trabajo en el resto de la aplicación. Así que charle con sus desarrolladores y encuentre una manera de mantener esa lista de 100 cosas reducida a solo 3 o 4 llamadas clave al servidor.

En la mayoría de los casos, esto significará autenticando a su usuario si habían iniciado sesión previamente y cargaron la cantidad básica de datos que la aplicación necesita para funcionar con fluidez. Quizás su primera pantalla muestre algunos de sus productos en oferta; si ese es el caso, puede cargar esos productos (y quizás sus imágenes) ahora para que aparezcan inmediatamente en la siguiente pantalla y el usuario no vea una pantalla. lleno de imágenes de marcador de posición durante unos segundos. Quizás tu aplicación tenga una bandeja de entrada de mensajes, en cuyo caso tendrás que averiguar si tienen mensajes nuevos (pero eso no significa que tengas que cargar las conversaciones reales, lo que podría llevar mucho más tiempo). Sea lo que sea, discuta con los desarrolladores cuál es la cantidad más pequeña de datos que su aplicación necesita cargar para que comience a funcionar de inmediato y hágalo aquí mismo, en la pantalla de inicio. Cualquier otra cosa debe hacerse más tarde, una vez que el usuario ingrese a la aplicación principal.

Buena pregunta y, por supuesto, puede suceder. No solo porque su aplicación podría tener que cargar una gran cantidad de datos, sino también porque incluso con datos mínimos el dispositivo puede tener una conectividad a Internet muy limitada e incluso una sola imagen podría tardar más de unos segundos en cargarse. En este caso, necesitarás usar un indicador de carga (una pequeña rueda giratoria o una barra de progreso) para mantener a tus usuarios informados de que la aplicación está haciendo algo.

Un truco increíble es mostrar solo el indicador de carga. después La animación de bienvenida ha terminado. De esa manera, normalmente el usuario nunca la verá, pero si la ve, sabrá que la aplicación todavía está funcionando y tendrá que esperar pacientemente mientras finaliza. Algunas aplicaciones repiten su animación de bienvenida, pero esto no informar al usuario que la aplicación necesita más tiempo, por lo que se quedará con la sensación de que estás perdiendo el tiempo con una animación repetida. Entonces, hagas lo que hagas, muestra el indicador de carga tan pronto como pases los 3 segundos.

En cuanto a cargar imágenes por adelantado, muchas aplicaciones no hacen esto en la pantalla de inicio. ¿Por qué no? Para contenido que probablemente sea diferente cada vez un usuario ingresa a una aplicación (como una aplicación de entrega de alimentos o un mercado en línea), significaría que la presentación siempre será “lenta” porque cada vez que abra la aplicación necesitará cargar nuevas imágenes. Compare eso con una aplicación que probablemente cambie sus productos con muy poca frecuencia (donde las imágenes se pueden almacenar en caché y, por lo tanto, solo de vez en cuando el splash debe soportar esa carga). En estos casos, es mejor que los usuarios accedan directamente al contenido y lo carguen justo delante de sus ojos para que el percibido El tiempo de carga se divide en 2. Es un equilibrio complicado lograrlo correctamente, así que asegúrese de prueba tus aplicaciones en una conexión lenta para tener una idea de cuánto tiempo dura cuando las personas usan su aplicación mientras están en movimiento.

Para contenido que cambia continuamente, puede ser mejor cargar imágenes después de que se haya completado el inicio.

Por supuesto, a veces puede ocurrir un error. Quizás su usuario no tenga conexión a Internet, pero necesita una conexión a Internet para autenticar al usuario. O tal vez su servidor no funciona o funciona muy lento. Si bien la mayoría de los errores en una aplicación se pueden manejar con una ventana emergente, presentar una ventana emergente en la pantalla de inicio será feo y frustrante para el usuario.

La mejor estrategia que puedes tener aquí es primero aislar solo errores críticos. Si una imagen tarda mucho en cargarse, no es necesario que retenga al usuario; puede ignorar este error e intentar volver a cargarla en la siguiente pantalla. Pero si la conexión a Internet no funciona y no puede autenticar a su usuario, realmente no puede permitir que el usuario avance más allá de esta pantalla. Entonces, en primer lugar, asegúrese de presentar un error solo si el problema es lo suficientemente crítico como para que no se le permita al usuario continuar usando la aplicación.

Imagine una aplicación que, justo después de que finaliza la animación de presentación, presenta una ventana emergente fea para informarle que no tiene conexión a Internet. Ni elegante ni sofisticado. En su lugar, ¿por qué no integrar el error en la pantalla de presentación (o incluso presentarlo como una pantalla completamente separada)? Casi siempre optamos por un mensaje de error en la propia pantalla de inicio, junto con un botón de actualización. En la mayoría de los casos, el problema será una simple falta de Internet, por lo que un botón de actualización (o una actualización automática cuando se restablece la conexión) es la mejor solución. Al mantener el error integrado en esta pantalla, mantiene una apariencia profesional dentro de la aplicación y, al mismo tiempo, solicita claramente al usuario que actúe con el botón de actualización.

La aplicación XConfessions muestra errores y solicitudes de actualización directamente en la pantalla de inicio para evitar ventanas emergentes

Un último truco para conseguir una pantalla de presentación perfecta es comprobar si el usuario está utilizando la versión correcta de la aplicación. Imagina que inicias tu aplicación (versión 1.0) y en algún momento…