it-swarm.com.de

Sollten wir mit UI-Updates auf AJAX Anfragen) optimistisch oder pessimistisch sein?

Wir diskutieren in unserem Team, wie UI-Updates am besten gehandhabt werden können, nachdem ein Benutzer etwas getan hat, um eine AJAX - Anfrage an den Server zu verursachen.

Hier sind Optionen, die wir in Betracht ziehen:

  1. Aktualisieren Sie sofort die Benutzeroberfläche und fügen Sie das geänderte Element hinzu/aktualisieren/entfernen Sie es, obwohl wir noch keine erfolgreiche Antwort vom Server erhalten haben. Wir würden einen Fehlerdialog anzeigen, wenn die Anforderung AJAX fehlgeschlagen wäre).
  2. Ändern Sie das Objekt und zeigen Sie einen "Aktualisierungs" -Status an.
  3. Aktualisieren Sie die Benutzeroberfläche nur, wenn der Server tatsächlich eine erfolgreiche Antwort zurückgegeben hat.

In allen drei Fällen würden wir angeben, dass die Anwendung noch mit der Anforderung beschäftigt ist, während die Anforderung AJAX) noch verarbeitet wurde.

Vielleicht hängt dies von der Aktion ab, die ausgeführt wird, und wie wichtig sie ist. Wie wichtig ist es, mit diesen Ansätzen im Einklang zu stehen?

19
andyuk

Die Antwort von @Barfieldmvs ist wahrscheinlich der richtige Weg, um dies zu tun. Zeigen Sie einen "Aktualisierungs" -Status an, während der Ajax-Aufruf ausgeführt wird, und löschen Sie diesen, wenn eine erfolgreiche (oder fehlgeschlagene) Antwort vorliegt. Dies hat den Vorteil, dass für den Fall, dass der Ajax-Aufruf ohne Antwort stirbt, ein klarer Hinweis darauf vorliegt, dass etwas nicht stimmt, da der Status "Aktualisieren" normalerweise nur für kurze Zeit angezeigt wird.

Möglicherweise wichtiger ist, dass Sie den Benutzern den wahren Stand der Dinge zeigen. Das Setzen einer Anzeige auf "abgeschlossen", wenn dies nicht gefährlich ist, wird möglicherweise geschlossen und die zurückgegebene Fehlermeldung wird nie angezeigt. Pessimistisch zu sein, aber den unbekannten Zustand anzuzeigen, bedeutet, dass der Benutzer weiß, dass die Anfrage gesendet wurde, aber noch nicht abgeschlossen ist, obwohl er sie möglicherweise nicht in diesen Begriffen ausdrückt.

5

Bei der Arbeit hatten wir ein ähnliches Problem zu lösen. In unserem Fall war es jedoch etwas einfacher und wir hatten mehr Einschränkungen.

Kurz gesagt, wenn die Aktion erfolgreich war, hätten wir eine kleine Änderung in der Benutzeroberfläche vornehmen sollen. Wir wollten den Status nicht anzeigen und aktualisieren, da eine der Anforderungen darin bestand, viele Elemente schnell bearbeiten zu können.

Eine Idee war, sich für einen optimistischen Ansatz zu entscheiden und den Benutzer im Fehlerfall später zu benachrichtigen. Dies war jedoch nicht möglich, da einige Vorgänge möglicherweise vom Ergebnis des noch ausstehenden Vorgangs abhängen. Daher mussten wir die Benutzeroberfläche nur bei erfolgreicher Antwort aktualisieren und ein Inline-Ladesymbol für diesen bestimmten Bucket anzeigen, während die anderen Teile der Benutzeroberfläche verfügbar blieben, um Eingaben vom Benutzer zu empfangen.

Wenn es keine Abhängigkeiten gibt, ist es meiner Meinung nach in Ordnung, optimistisch vorzugehen, und im Falle eines Fehlers den Benutzer darauf hinzuweisen, was schief gelaufen ist und warum.

Wenn Sie jedoch Abhängigkeiten haben, ist dies wahrscheinlich keine gute Idee, aber versuchen Sie, das Problem auf die kleinste Komponente zu beschränken.

1
Davide

Ich würde gerne den optimistischen Ansatz sehen, aber das Ergebnis meiner Aktion sollte in einem Stil angezeigt werden, der angibt, dass es noch nicht bestätigt wurde (grauer Text, deaktivierte Schaltflächen usw.). Aktionen, die als Ergebnis der ausstehenden Aktion ausgeführt werden können (falls vorhanden), sollten deaktiviert werden, bis sie bestätigt werden.

Sobald Sie wissen, dass Sie Erfolg oder Misserfolg hatten, können Sie das temporäre Styling entfernen und zugehörige Schaltflächen oder Links aktivieren. Im Fehlerfall können Sie es vollständig entfernen und die Fehlermeldung anzeigen.

Es ist sicherlich einfacher, dem endgültigen Weg zu folgen, aber das Feedback ist nicht so unmittelbar.

1

Hängt davon ab, wie Ihre Benutzeroberfläche strukturiert ist. Wenn Sie eine optimistische Aktualisierung verwenden, bei der etwas von der Benutzeroberfläche verschwindet, nachdem der Benutzer auf Speichern geklickt hat, ohne dass die App weiß, ob es auf dem Server gespeichert wurde, kann dies zu einer fehlerhaften Benutzeroberfläche führen, wenn der Benutzer 10 Sekunden später weiterhin einen anderen Teil der Seite verwendet Ihre App meldet, dass das Speichern nicht erfolgreich war.

Seien Sie am besten ehrlich mit den Benutzern über den Status und versuchen Sie, einen lokalisierten Indikator auf der Seite zu berücksichtigen, dass etwas passiert. Auf diese Weise wird nicht verhindert, dass sie weiter an der Seite arbeiten, und der lokalisierte Bereich der Benutzeroberfläche kann umgekehrt werden, wenn das Speichern nicht erfolgt.

0
JoeTidee

Ich würde sagen, behalten Sie die Informationen lokal gespeichert und aktualisieren Sie die Seite mit dem neuen Inhalt. Falls auf der Serverseite etwas schief geht, benachrichtigen Sie sie und lassen Sie sie die gespeicherten lokalen Informationen so oft wie nötig erneut senden.

Und IMMER angeben, ob die Informationen noch vom Server empfangen oder verarbeitet werden müssen. Dies hält den Endbenutzer richtig informiert und nicht ahnungslos.

Auf diese Weise gibt die Benutzeroberfläche kein unangemessenes Feedback und kann den Verlust von vom Benutzer unterstellten Daten verhindern. Es gibt nichts Schlimmeres, als etwas auszufüllen und zu laden, weil ein Server es verloren hat oder die Netzwerke es unter einen Aktenschrank geworfen haben. (Haha)

Also um zu antworten: mach alle 3!

Sie sollten auf jeden Fall aktualisieren, wenn sich der Fortschritt ändert:

  1. speichern Sie die Informationen
  2. zeigen Sie den gespeicherten lokalen an
  3. An Server senden
  4. Fortschrittsbalken anzeigen (oder sich drehende Fortschrittsanzeige nicht zutreffend)
  5. Benachrichtigen Sie bei einem Fehler und fordern Sie die erneute Übermittlung an. Verstecke den Fortschritt nach Erfolg, benachrichtige ihn kurz und verstecke dann den Erfolg.
0