Was ist Optimistic UI?

Optimistic UI kann verwirrend sein. Viele Menschen sehen die Webleistung als eine rein technische Angelegenheit. Ingenieure bringen die Server an ihre Grenzen. Entwickler tun alles, um APIs zu erstellen, die innerhalb eines Wimpernschlags Antworten liefern. Sie optimieren Bilder und verwenden die neuesten Technologien. Oft reicht das aber nicht aus, denn den Nutzern ist es egal, wie viel Arbeit Sie in die Serverinfrastruktur gesteckt haben oder wie stark Sie die Bilder komprimieren. Letztendlich geht es bei der Leistung nicht nur um die Technologie, sondern auch darum, wie reibungslos das Nutzererlebnis ist.

Hier kommt Optimistic UI ins Spiel. Dadurch wird Ihre App noch schneller ausgeführt. Zumindest werden die Nutzer das so sehen. Optimistic UI ist ein Zaubertrick – und wie bei einem echten Zaubertrick muss man ein bisschen schummeln.

Optimistisch zu sein bedeutet, hoffnungsvoll und zuversichtlich in die Zukunft zu blicken. Im Grunde genommen ist Optimistic UI genau das. Um dies zu erklären, schauen wir uns an, wie traditionelle UIs funktionieren. Der Einfachheit halber werden wir uns auf den bekannten „Gefällt mir“-Button konzentrieren. Optimistic UI kann jedoch in vielen verschiedenen Fällen eingesetzt werden, etwa bei Messenger-Apps oder beim Hinzufügen von Artikeln zu einem Warenkorb. Mit Sicherheit könnte auch Ihr Produkt davon profitieren.

Der alte Weg (ohne Optimistic UI)

Wenn Sie sich noch an Websites mit Gästebüchern, Besucherzählern und einer Menge auffälliger GIFs erinnern, werden Sie wahrscheinlich mit diesem Muster vertraut sein:

1. Sie klicken auf eine Schaltfläche.
2. Die API-Anfrage wird gesendet.
3. Sie warten auf die Antwort.
4. Die Seite wird aktualisiert, um die Änderungen anzuzeigen.

Das sieht folgendermaßen aus:

Wir haben schnell gemerkt, dass das keine gute Benutzererfahrung ist. Das Problem ist, dass es keinen Hinweis darauf gibt, dass im Hintergrund etwas passiert. Nutzer warten nicht gerne. Noch weniger mögen sie, wenn auf ihre Aktion keine Reaktion folgt. Also haben wir uns eine Lösung ausgedacht, um die Reise etwas zu erleichtern.

Der bessere Weg (immer noch kein Optimistic UI)

Wir, die Entwickler, wollten den Nutzern mitteilen, dass wir mit der Bearbeitung ihrer Anfrage beginnen, sobald sie auf eine Schaltfläche geklickt haben. Im Hintergrund passiert etwas, und wir bitten um ein wenig Geduld.

So haben wir das Ganze verbessert:

1. Sie klicken auf eine Schaltfläche.
2. Die Schaltfläche geht in einen Ladezustand.
3. Die API-Anfrage wird gesendet.
4. Sie warten auf die Antwort (aber Sie wissen zumindest, dass etwas passiert).
5. Die Seite wird aktualisiert, um die Änderungen anzuzeigen.

Jetzt sehen die Nutzer eine unmittelbare Reaktion auf ihren Mausklick. Es gibt ein hübsches Ladesymbol, damit sie wissen, dass wir ihre Anfrage bearbeiten, während sie warten. Jetzt sollten sie doch glücklich sein, oder? Leider nicht wirklich, denn sie wollen immer noch nicht warten.

Der optimistische Weg (mit Optimistic UI)

Laut dem RAIL-Modell empfinden Nutzer eine Reaktionszeit auf ihre Aktionen zwischen 0 und 100 ms als unmittelbar. Eine längere Wartezeit unterbricht die Verbindung zwischen Aktion und Reaktion. Laut dieser Umfrage beträgt die durchschnittliche Server-Antwortzeit jedoch 538 ms (Daten vom Oktober 2021). Das zeigt zweierlei: Wir sind ungeduldig und die Server sind noch nicht so weit, dieses Problem zu lösen. An dieser Stelle rettet uns Optimistic UI!

Schauen wir uns dieses Muster an:

1. Sie klicken auf eine Schaltfläche.
2. Die Seite wird sofort aktualisiert.

Das scheint wie ein Zaubertrick? Oder wie Betrug? Weil es so ist (aber nur ein bisschen). Wir aktualisieren die Benutzeroberfläche, weil wir zuversichtlich in die Zukunft blicken.

Tatsache ist, dass eine API in 99 % der Fälle eine erfolgreiche Antwort liefert. Im Beispiel des „Gefällt mir“-Buttons sollte die API nur dann einen Fehler zurückgeben, wenn es ein Problem mit dem Netzwerk oder dem Server gibt. In diesem Fall können wir den Benutzern einfach zeigen, dass etwas schiefgelaufen ist, oder die Änderungen rückgängig machen. Die große Mehrheit der Benutzer wird dies aber nicht erleben.

Bei der Verwendung von Optimistic UI wird die Seite sofort geändert, ohne auf die Antwort des Servers zu warten. Die Anfrage wird im Hintergrund weiter bearbeitet, aber der Benutzer muss davon nichts mitbekommen.

Fun Fact: Bei Facebook dauert die Anfrage hinter „Gefällt mir“ etwa 1,5 Sekunden. Stellen Sie sich vor, Sie müssten so lange warten, wenn Optimistic UI nicht implementiert wäre. In 1,5 Sekunden habe ich bereits 3 Beiträge weitergeblättert!

Wie geht es jetzt weiter?

Ein Benutzer, der nicht warten muss, ist ein zufriedener Benutzer. Mit Optimistic UI werden die Benutzer nicht genervt und die Wahrscheinlichkeit, dass sie eine Website verlassen, sinkt. Es scheint, als ob wir den Höhepunkt unserer Leistungsfähigkeit erreicht hätten. Aber halt, es gibt noch mehr!

Moderne JavaScript-Frameworks und Tools haben viele Verbesserungen gebracht. Aus Entwicklersicht haben sie die Implementierung von Optimistic UI wesentlich vereinfacht. React und Apollo gehören zu den am weitesten verbreiteten Tools. Schauen wir uns also an, wie sie uns in puncto Optimistic UI das Leben erleichtern können.

Mit Apollo können wir die Option „OptimisticResponse“ in der „Mutate“-Funktion verwenden. Dadurch können wir eine erwartete Antwort sofort anzeigen und dann die Benutzeroberfläche mit dem tatsächlichen Wert – welcher derselbe sein sollte – aktualisieren.

Hier ist ein kleines Beispiel aus der Apollo-Dokumentation :

// Mutation definition
const UPDATE_COMMENT = gql`
  mutation UpdateComment($commentId: ID!, $commentContent: String!) {
    updateComment(commentId: $commentId, content: $commentContent) {
      id
      __typename
      content
    }
  }
`;

// Component definition
function CommentPageWithData() {
  const [mutate] = useMutation(UPDATE_COMMENT);
  return (
    <Comment
      updateComment={({ commentId, commentContent }) =>
        mutate({
          variables: { commentId, commentContent },

          optimisticResponse: {
            updateComment: {
              id: commentId,
              __typename: "Comment",
              content: commentContent
            }
          }
        })
      }
    />
  );
}

Wie Sie sehen, muss die Implementierung von Optimistic UI keine langwierige Aufgabe sein.

Abschließende Worte

Optimistic UI ist eine große Verbesserung für die Benutzererfahrung. Der „Gefällt mir“-Button ist nicht die einzige Anwendungsmöglichkeit. Es kann an vielen Stellen eingesetzt werden, wo API-Antworten vorhersehbar sind. Vielleicht ist Ihnen beim Lesen dieses Beitrags sogar eine Idee gekommen, wo dieser Ansatz Ihrem Produkt helfen könnte.

• benutzererfahrung
• optimistic ui