Que faut-il afficher en attendant la fin d'un processus (4-5 secondes)?
Nous avons réalisé que dans certains cas, l'utilisateur peut attendre jusqu'à 4 ou 5 secondes (selon la connexion) pour que son formulaire (ou une action) soit traité. Le formulaire consiste à obtenir des données d'autres serveurs (facebook) et à les fusionner avec nos propres données, puis à les soumettre à notre serveur. Donc, pendant que tout cela se passe, il y aura un temps mort.
Notre réaction initiale a été de simplement utiliser un spinner pour indiquer que quelque chose se produit. Ensuite, nous avons décidé de faire fondre les choses et d'apparaître comme une sorte de "vitesse" fausse. Ensuite, nous avons pensé que nous pourrions manquer une occasion de présenter des informations vraiment cool ou de ravir l'utilisateur.
Existe-t-il une approche standard pour ce cas d'utilisation spécifique ou un spinner est-il la méthode appropriée à adopter?
J'aime les barres de progression avec copie échelonnée.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Il y a quelques bonnes idées ici pour ce qu'il faut afficher pendant cette période de 4 à 5 secondes. Mais cette période n'a pas du tout à exister. La seule chose que vous devez vraiment traiter immédiatement est l'information qui va être affichée lors du prochain chargement de la page. Tout le reste peut être déchargé dans un processus d'arrière-plan. Cette approche éliminerait le besoin de divertir (ou d'agacer) l'utilisateur pendant que votre système fonctionne.
Les bibliothèques de modèles sont idéales pour découvrir comment les autres pensent des problèmes et présenter leurs solutions. Ils n'auront pas toujours de résultats, mais ce sera plus efficace que de demander des exemples sur un site de questions et réponses UX.
Une recherche rapide sur Dribbble:
http://dribbble.com/tags/loading
Voici un exemple de résultat pour Flight Tracker: http://dribbble.com/shots/334949-Flight-Tracker-for-iPad
UI Parade a quelques barres de progression intéressantes:
http://www.uiparade.com/skill-type/progress-bars/
En dehors de cela, vous pouvez peut-être vous inspirer des pages de démarrage: http://www.Android-app-patterns.com/category/splash-pages
Le meilleur écran de chargement que j'ai jamais vu (depuis un jeu) a présenté à l'utilisateur un jeu de tir d'arcade Galaga pour compenser les temps de chargement de 50 à 120 secondes. Les conseils de dialogue d'aide/fonctionnalité aléatoires qui alternent à l'écran à des points% spécifiques sont plus courants (comme lors des installations Windows).
Pour moi personnellement, je ne m'embêterais pas avec cela pour des temps de chargement inférieurs à 4-5 secondes. Dans la plupart des cas, un utilisateur qui passe 5 minutes à remplir un formulaire ne sera pas frustré par quelques secondes de publication. J'inclurais cependant un message confirmant le succès du processus.
La conception éventuelle de votre barre de progression ou de votre spinner dépendra de votre site, mais comme vous avez une idée qu'il faut environ 4 à 5 secondes pour que le traitement ait lieu, vous devez appeler cela depuis pour que les utilisateurs soient informés de la durée ils devront attendre.
Alternativement, vous pouvez envisager d'incorporer une animation intéressante comme la façon dont http://Tweet.grader.com pendant le traitement de l'historique d'une poignée Twitter, comme indiqué ci-dessous:
Je recommande de consulter cet article "T il UX de AJAX charge animations " car il donne quelques entrées sur ce que différents types d'animations véhiculent et où ils peuvent être utilisés
Un progresbar est toujours un bon choix!
Mais une barre de progression n'est pas nécessairement une barre de progression.
ne étude a montré que (ref) les utilisateurs ont connu des barres progressives qui ont augmenté la vitesse de pulsation vers la fin plus rapidement que les linéaires.
Une autre façon de rendre votre barre de progression plus rapide pour les utilisateurs est d'augmenter le nombre de pulsations dont elle dispose. La même étude a révélé que "la barre de progression avec l'augmentation des pulsations était plus susceptible d'être perçue comme ayant une durée plus courte" 1 . L'augmentation des pulsations ressemble beaucoup aux battements par mesure d'une chanson. Plus il y a de battements par mesure, plus le tempo est élevé et plus le morceau est joué rapidement.
Cependant, l'étude se termine par:
En ce qui concerne l'expérience utilisateur, la perception est tout. Si votre application est plus rapide pour les utilisateurs, c'est peut-être le cas.
En d'autres termes, pas de bonne réponse! Les utilisateurs sont pour la plupart, "formés" pour répondre à une barre de progression comme une étape d'attente. L'utilisation du type à accélération pulsée est l'OMI le meilleur choix.
Lien vers l'étude (PDF):
http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
Vous voyez parfois un message sur les sites de commerce électronique pendant le traitement d'une transaction. Cela peut inclure des instructions pour ne pas appuyer ou recharger le navigateur, ce qui peut également être utile dans votre cas.
Vous pouvez également afficher un spinner ou une indication de progrès.
Je pense que c'est une bonne idée d'utiliser ce temps d'attente pour mettre en avant quelque chose, le logo (minimaliste et simplement) ou un avantage concurrentiel du produit.
Je pense que cela n'a de sens que d'afficher une barre de progression si vous pouvez efficacement quantifier correctement la "progression". S'il s'agit d'un délai variable, je ne pense pas que demander à l'utilisateur de regarder une barre de progression en attendant que la progression soit reflétée est une bonne expérience utilisateur. D'un autre côté, avoir un sablier ou une toupie n'est pas exactement non plus convivial.
J'aime la façon dont les jeux informatiques présenteront des conseils ou des faits pendant leur chargement, mais cela ne fonctionne pas nécessairement bien avec tous les types de logiciels.