Les splash screens ou l’expérience de l’attente sur mobile

Au lancement de ses applications, l'utilisateur est soumis au splash screen : il s'agit d'un écran de démarrage qui apparait entre l'utilisateur et la page d’accueil de son application.

Généralement habillé à la charte graphique de l'application, il se compose de deux éléments : un fond de couleur et un logo, permettant ainsi d'identifier clairement la marque.

Cependant, sa fonction principale n'est nullement un objectif de communication : il s'agit de masquer le temps de chargement de l'application, et cela représente un défi pour le designer d'interface.

jedessine flipboardApplications Flipboard, Jedessine et Nike Pro Training Boom.

Applications Flipboard, Jedessine et Nike Pro Training Boom

Patience, patience, …

Ainsi l'attente à l'ouverture peut s'avérer plus ou moins longue (en cause : le réseau et le poids de l'application) et c'est bien là, la principale problématique pour les utilisateurs, car l’expérience mobile est avant tout une expérience de l’attente, et ils ne peuvent rien faire d’autre que patienter pendant que le contenu se charge.

Malheureusement les utilisateurs sont très volatiles, d’autant qu’ils ont le choix : ils peuvent décider d’utiliser un service concurrent, ou d’abandonner ce qu’ils étaient en train de faire si le chargement est trop long.

Plus d’un quart des utilisateurs disent qu’ils iront chez la concurrence (28 %) ou n’auront pas confiance dans le site web (27 %) si ce dernier se charge trop lentement (SOASTA 2013 Website and Mobile App Report).

 

Mais ne soyons pas défaitiste !

Si les designers d'interfaces ne peuvent pas faire grand-chose sur le temps d’attente, ils peuvent en optimiser la perception et ainsi rendre, les splash screens plus acceptables et l'application, rapide à lancer et prête à l'emploi.

La solution est donc, de travailler sur cette perception du temps, d'autant plus qu'il y a une grande différence entre le temps d’attente réel et le temps d’attente perçu par l'utilisateur (ex. : une minute réelle dans les transports peut équivaloir à trois minutes d'attente perçus pour l’usager).

 

Ces cas qui renforcent l'attente perçue

1, 2, 3 … SOLEIL !

Un cas de moins en moins répandu, mais cependant pas rare : le splash screen figé. Il donnera la triste sensation à l'utilisateur que rien ne se passe et que le système peut être bloqué.

Il faut donc, au minimum que ça bouge ! Un simple indicateur de chargement animé (idéalement doublé d'un libéllé qui donne de l'information précise) permet ainsi de rassurer l'utilisateur et de prendre moins de risques de le perdre.

20min

Applications 20 minutes et Quizz Run.

Applications 20 minutes et Quizz Run.

FILS DE PUB

Certaines applications proposent un interstitiel publicitaire en lieu et place du splash screen. Problème : cet écran va renforcer la sensation d’attente et s’apparenter à la classique page de pub TV, et risque d’être un point de fuite non négligeable.

D'autres applications proposent aussi un interstitiel publicitaire mais en plus du splash screen. Mauvaise pioche pour les utilisateurs : cette conjugaison les distrait de leur but, leur présente une étape supplémentaire et risque de provoquer un agacement, si la fréquence d'utilisation de l'application est élevée.

Idéalement, il ne faudrait ni l'un ni l'autre, mais les modèles économiques des applications étant ce qu'ils sont, on restera pragmatique, et on recommandera donc de fusionner ces deux étapes en un seul écran, plus convenable pour l’utilisateur. Voire de faire en sorte que l'interstitiel publicitaire se présente dans un format plus réduit (ex. : pop-in), cela permettra à l'utilisateur de distinguer l'écran d'accueil et ainsi de se projeter dans l'application.

parions

Application Parions sport : écran d'attente + écran publicitaire.

Application Parions sport : écran d'attente + écran publicitaire.

 

Attendre agréablement

Puisque l’objectif est de modifier la perception du temps d’attente, certaines applications ont été très inspirées pour donner l’impression à l’utilisateur d’avancer dans son parcours.

Y'A UN OS…

L’idée, c'est d’avoir recours à ce que l’on nomme des squelettes d’écran.

Ils auront pour fonction de simuler l'entrée dans l'application en affichant certains de ces éléments.

Voici la méthode : le premier écran est le squelette, il est affiché pendant le chargement de l’application. Le second est l’application réelle mais la grande ressemblance entre les deux, donne à l’utilisateur l’impression que l'application est prête à l'emploi.

7min

Squelette d'écran sur l'application The 7 Minute Workout.

Squelette d'écran sur l'application The 7 Minute Workout.

DOUBLE IMPACT

Encore plus efficace, on peut utiliser la même technique pour afficher progressivement les éléments de l'application et ainsi donner, à l'utilisateur la sensation d’avancer : on parle alors de squelette progressif.

Effectivement, en affichant tout ce que l’on peut au fur et à mesure du chargement, on limite à la fois le temps d’attente perçu et le temps d’attente réel.

Et ce procédé n’est pas adapté seulement aux contenus mais également aux fonctionnalités et d'autre part, c’est un principe qui est valable à la fois pour le chargement de l’application et pour celui de tous les écrans.

IMG_3469

IMG_3470

Squelette progressif sur l'application Facebook.

Squelette progressif sur l'application Facebook.

 

Au final, que retenir ?

  • Les moments d’attente constituent une très grande part de l’expérience mobile vécue par les utilisateurs.
  • Le designer d'interface ne peut pas faire grand-chose sur le temps d’attente réel, mais il peut en optimiser la perception.
  • L’attente semble plus longue avant l'ouverture de l'application : limitez les splash screens, surtout pour les usages très récurrents.
  • Parce que les utilisateurs sont susceptibles de basculer entre les applications fréquemment, vous devriez réduire le temps de lancement à un minimum, et concevoir une image de lancement qui minimise l'expérience plutôt que d'attirer l'attention à elle.
  • La publicité en interstitiel renforce l’attente perçue. Évitez-la si vous avez déjà un splash screen, sinon limitez sa durée d’affichage et restreignez son apparition.
  • L’attente semble moins longue quand elle est meublée : animez l’écran sans concentrer l’attention sur le fait que l’on attend, et donnez de l’information précise sur « à quoi sert l’attente ».
  • Vous pouvez simuler l’entrée dans l'application en utilisant des squelettes d’écran.
  • Chargez ce que vous pouvez au fur et à mesure.

Et pour finir, on se quitte avec les recommandations d'Apple.

Éviter les splash screens afin de limiter au maximum le temps de chargement, car les utilisateurs changent fréquemment d’application. Le guide de conception Apple préconise qu’elle soit calquée sur le premier écran de l’application, afin de diminuer le temps de chargement perçu :

Si vous pensez qu’en suivant ces recommandations, vous obtiendrez une image de lancement ordinaire et ennuyeuse, vous avez raison. Rappelez-vous que l’écran de lancement n’est pas dédié à la promotion de l’expression artistique, mais tout simplement à renforcer la perception que votre application est rapide à charger et immédiatement prête à l’emploi.

SOURCES

  • Expérience utilisateur mobile d'Amélie Boucher
  • Ergonomie web illustrée d'Amélie Boucher
  • Wikipédia
  • iOS Human Interface Guidelines
  • Guidelines for splash screens Microsoft Dev Center

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.