web-dev-qa-db-fra.com

Affichage "en cours" dans une application complète AJAX lorsque nous ne savons pas où le nouveau contenu sera placé

Je crée une application Web entièrement AJAX activée. Cliquer sur un lien chargera la page à partir du serveur et un javascript délicat déterminera quelles parties de la page devront être remplacées. Il se fanera ensuite sortir les anciennes parties et se fondre dans les nouvelles parties.

Cela fonctionne bien, mais ce qui précède ne peut se produire qu'après réception du contenu du serveur, de sorte que les éléments suivants ne peuvent pas être utilisés:

  • Masquer ou estomper le contenu à remplacer.
  • Afficher le throbber à l'endroit où le nouveau contenu doit être placé.

Je recherche une zone générique pour placer une pulsation ou une indication d'état pour permettre à l'utilisateur de savoir que la page est en cours de chargement. L'indicateur doit permettre à l'utilisateur de savoir que quelque chose se passe, mais doit également être subtil et ne pas gêner.

Dans les applications de bureau, cela est souvent indiqué en remplaçant le curseur de la souris par un curseur occupé. Mais dans une application Web, je ne pense pas que cela fonctionnerait bien: lorsque je vois un curseur occupé, cela m'indique que la page s'est écrasée et que l'onglet devrait être redémarré.

Existe-t-il un moyen subtil et élégant de montrer à l'utilisateur que nous chargeons certaines données du serveur sans avoir à masquer/masquer les parties de la page qui seront remplacées?

4
F21

Un modèle que j'ai vu (par exemple: Google mail) consiste à utiliser une bannière déroulante pour cela - un panneau qui glisse vers le bas depuis le haut du milieu de la fenêtre d'affichage (pas la page) avec un "Loading..." message.

L'animation attire l'attention de l'utilisateur et le fait qu'il s'agisse d'une superposition renforce le fait que vous ne savez pas ce qui va changer sur cette page.

Vous pouvez également utiliser l'approche Twitter/Stack Overflow où vous retardez le redessin jusqu'à ce que l'utilisateur clique. "There are _ 2 _ new responses. _ Click here _ to show them."

3
Alex Feinman

Une façon de procéder consiste à faire ressortir l'élément cliqué. Vous pouvez peut-être placer une indication ou un marqueur à côté de l'élément sur lequel vous avez cliqué pour indiquer que l'utilisateur a démarré un processus et ne doit pas cliquer sur d'autres liens ou boutons pendant ce processus.

Cependant, l'utilisateur devrait pouvoir continuer à lire sur cette page. Donc, pour mettre davantage l'accent sur votre problème, essayez d'abord de savoir si l'action de clic signifie "envoyez-moi à la page suivante" ou "je suis curieux de savoir ce que fait ce bouton". Ensuite, vous pouvez conclure si votre message d'état peut s'estomper sur tout l'écran ou s'il ne devrait mettre qu'une sorte de marqueur à côté du bouton.

0
Matthijs Mali