it-swarm.com.de

Subtiler und verständlicher Hinweis auf AJAX Seitenfragment wird gerade geladen? (Keine Gifs!)

Ich arbeite mit einem selbst entwickelten CMS und habe kürzlich die gesamte Sache "aktualisiert", um Javascript/AJAX/XHR zu verwenden, um jedes Laden von Seiten und Senden von Formularen ohne Ausnahmen zu handhaben. So weit, ist es gut.

Alle Links laden ein Seitenfragment in den "Haupt" -Inhaltsbereich oder manchmal in einen Nebenbereich, der den vorhandenen Inhalt ersetzt.

Ich suche nach einer subtilen Möglichkeit, dem Benutzer zu zeigen, dass eine Anfrage aussteht.

  1. Zuerst habe ich das Typische getan: Setzen Sie einen großen Kreis in den Inhaltsbereich, während wir darauf warten, dass der neue Inhalt geladen wird. Ich hasse das: Es ist klobig, klebrig, hässlich und die Tatsache, dass es den Inhaltsbereich übernimmt vorher der Inhalt ist fertig, nervt mich wirklich; Dies bedeutet auch, dass Sie das Laden nicht abbrechen können, indem Sie auf einen anderen Link im Inhaltsbereich klicken (da dieser durch die Animation ersetzt wurde). Ich kann der Ladeanimation "Klicken zum Abbrechen" hinzufügen, möchte diese Technik aber dennoch vermeiden.

  2. Eine Idee, die ich hatte, war, eine kleine feste Statusleiste am unteren Rand der Seite hinzuzufügen und etwas Ähnliches anzuzeigen, wie es in der Statusleiste eines Browsers angezeigt wird (Verbinden, Laden, Fertig usw.). Ich persönlich mag dies als Entwickler, aber ich glaube nicht, dass meine Benutzer es verstehen oder gar bemerken werden. Außerdem nimmt es Platz in Anspruch und muss wahrscheinlich eine geschriebene Sprache verwenden, um den Status zu vermitteln. Ich könnte so etwas wie ein "Bremslicht" mit rot (verbinden) grün (bereit) und gelb (Laden) Verwenden =, aber ich mag diese Idee im Allgemeinen nicht sehr, teile nur das, was ich in Betracht gezogen habe.

  3. Meine andere Idee war das Hinzufügen und Entfernen einer CSS-Klasse zu dem Link, auf den geklickt wurde, während die zugehörige Anforderung ausstand. Wenn Sie also auf einen Link klicken, leuchtet dieser auf oder so, während der Inhalt geladen wird, und kehrt danach zum Normalzustand zurück. Ich mag das, weil es dazu führt, dass visuell viel weniger "Action" stattfindet als bei # 1.

Was wäre ein guter Weg, um das Aussehen der Links mit Technik 3 zu ändern, so dass es offensichtlich ist, dass gerade geladen wird. Ich dachte über einen animierten Hintergrund nach. Ich habe überlegt, die Deckkraft des Links zu verringern. Für Debug-Zwecke füge ich nur einen roten Hintergrund oder eine rote Textfarbe hinzu und es macht den Job (es fühlt sich an, als ob etwas los ist), aber natürlich sieht es schrecklich aus. Ich verwende auch den Cursortyp progress für den Link, der definitiv hilft.

Zweitens, was sind einige andere Lösungen dafür, die der Benutzer klar verstehen wird, ohne den Inhaltsbereich mit sich drehenden Kreisen, pulsierenden Quadraten und anderen klebrigen .gif-Lösungen zu entführen?

5
Wesley Murch

GIFs sind im Allgemeinen eine großartige Lösung. Die Bewegung zeigt, dass der Browser immer noch tuckert und nicht aufgegeben hat. Dies geschieht mit einer sinnvoll unterstützten Datei mit geringer Bandbreite. Das Rad ist eines der universelleren, gelehrten Symbole.

3
KemanoThief

Ich habe darüber nachgedacht, einfach einen dünnen Rand zu pulsieren (nicht zu blinken) m den Inhaltsbereich, der aktualisiert wird - ohne den alten Inhalt zu entfernen, bis er fertig ist (vielleicht aber leicht gedimmt) -, um anzuzeigen, dass es sich um den Bereich handelt Neue Inhalte zu erhalten ... ist sinnvoller, wenn der Bereich bereits sichtbare Ränder verwendet.

Anstatt zu pulsieren, fallen mir einige andere Animationen ein, wie ein Impuls, der dem Rand um den Inhalt folgt, und so weiter ...

Ich mag auch 3, indem ich das angeklickte Link-/Schaltflächenelement deaktiviere oder visuell ändere, um sofortiges Feedback zu erhalten, obwohl ich nicht sicher bin, wie ich das Klicken auf einen Link zufriedenstellend genug gestalten soll.

Ich würde Grenzen wahrscheinlich mit einem GIF animieren - nicht, dass sie wie die klebrige Variante aussehen würden, aber leider.

3
Oskar Duveborn

Einige Lösungen: 1. Pulsierendes Licht, ein kleiner Kreis, der die Farbe des Geschehens pulsiert (rot, gelb, grün verschwindet dann)

  1. Eine kleine Ladeleiste füllt sich, dann kommt der Inhalt herein.

  2. 3 Punkte (...) in einer Animationsschleife von 2 oder 1 Sekunde

  3. Das angezeigte Symbol "Platzhalter" bewegt sich erst, wenn der Inhalt geladen ist, und wird dann ausgeblendet.

  4. Legen Sie den Bereich in der Seiten-Benutzeroberfläche für den Status fest (wie bereits erwähnt). Mit dem Text des zu ladenden Objekts (z. B. Link1-Beispiel) und einer Statusleiste.

2
jonshariat

In der Tat ist Ihr Zweck, es den Benutzern zu zeigen, also gehen Sie mit dem, was sie mögen und verstehen. Wenn Sie keine Gifs möchten, ist es kein Problem, das Laden zu schreiben. kann eine gute Lösung sein.

1
Hafiz

Sie haben erwähnt, dass Sie es nicht mögen, wie der Spinner den Inhaltsbereich "übernimmt" und andere Interaktionen mit dem vorhandenen Inhalt verhindert, bis der neue Inhalt angezeigt wird. Ich würde vorschlagen (zumindest in Fällen, in denen das vertikale Layout erweiterbar ist), irgendwo im Inhaltsbereich ein kurzes UI-Element hinzuzufügen, das den Aktivitätsindikator anzeigt, aber den vorhandenen Inhalt nicht überlagert oder verdeckt.

Wenn der Inhaltsbereich eine feste Höhe hat, können Sie ihn über dem Inhalt z-indizieren, aber klein genug sein, damit das Anzeigen/Interagieren mit dem alten Inhalt nicht beeinträchtigt wird. Wenn der Inhaltsbereich scrollbar ist, möchten Sie ihn möglicherweise "klebrig" machen (Position: für HTML/CSS festgelegt), damit der Benutzer weiß, was über seine Aktion getan wird, selbst wenn er nach unten scrollt (oder die Ladeaktion initiiert, wenn er bereits gescrollt hat) Nieder).

0
jinglesthula

Einige Websites (insbesondere YouTube, obwohl ich es auf anderen gesehen habe) animieren eine dünne Linie über dem oberen Rand des Browserfensters und ahmen im Grunde den Fortschrittsbalken eines Browsers nach. Abhängig davon, wie viel von der Seite Sie neu laden möchten, möchten Sie dies möglicherweise nur in dem Bereich tun, der ersetzt wird, oder über das gesamte Fenster (wahrscheinlich wird der animierte Fortschrittsbalken oben im Browser-Ansichtsfenster angezeigt, sodass er sogar sichtbar ist wenn die Seite nach unten gescrollt wird). (Wenn Sie den größten Teil des Seiteninhalts ersetzen, möchten Sie wahrscheinlich auch nach dem Laden an den Anfang der Seite springen, damit sie eher wie ein normales Laden neuer Seiten aussieht.)

Dies ist ein bekanntes Muster mit vielen Javascript-Lösungen für die Implementierung:

0
TRiG