Wie mit sieben Prinzipien die User Experience verbessert werden kann

Mysterium JavaScript im UI
Kommentare

JavaScript hat sich in den vergangenen Jahren zu einem unentbehrlichen Tool für Frontend-Entwickler entwickelt und bietet ihnen zahlreiche Einsatzmöglichkeiten, um das User Interface zu kontrollieren und so die User Experience zu verbessern. Dennoch stellt sich vielen Entwicklern die Frage, welche Rolle JavaScript im UI eigentlich genau spielt. Guillermo Rauch ist dem nachgegangen und hat sieben Prinzipien entwickelt, bei denen einerseits die Kontrolle des UIs mit JavaScript, andererseits aber vor allem die Performance von Rich-Web-Applikationen im Vordergrund steht.

Die sieben Prinzipien von Rich-Web-Applikationen

JavaScript findet seinen Einsatz in vielen Bereichen im Web, dennoch bleibt die Rolle, die es dort spielt, für viele Entwickler ein Mysterium. Wie sieht die Nutzung von JavaScript nun also aus Sicht der User Experience aus?

Guillermo Rauchs Antwort darauf ist vor allem, die Latenzzeit während der Interaktion des Users mit einer Website zu minimieren. Dafür sieht er sieben Prinzipien als essentiell an, um mit JavaScript das UI zu kontrollieren und so die User Experience zu verbessern:

1. Auf Servern gerenderte Seiten sind nicht optional

Was häufig vergessen wird, ist dass das Internet eine theoretische Geschwindigkeitsgrenze hat und selbst wenn die Bandbreite des Nutzers verbessert wird, die Latenzzeit weiter bestehen bleibt. Darum ist es wenig ratsam, darauf zu verzichten, Server-Rendered-Apps oder Single-Page-Apps aufzugeben, da so nicht die bestmögliche User Experience erreicht wird.

Stattdessen muss die Anzahl der zur Anzeige von Informationen nötigen Roundtrips verringert werden. Gerade angesichts der zunehmenden Anzahl von Single-Page-Applikationen ist das wichtig, da sie meist besonders viele Roundtrips benötigen, bis Informationen dargestellt werden – während der Nutzer vor einer blanken Seite ohne sichtbares Feedback sitzt.

2. Direkt auf den User Input reagieren

Ein besonders großer Vorteil von JavaScript ist, dass sich damit die Netzwerk-Latenzzeit überspielen lässt und so eine schnellere Performance suggeriert wird. Im Idealfall sollten so keine „Laden“-Nachrichten oder Progress-Bars mehr nötig sein, weil JavaScript zum Beispiel den Datei-Input beim Upload von Bildern verbessert oder ein Klicken auf einen Link oder Button eine sofortige Reaktion der Website auslöst – ohne überhaupt auf das Netzwerk zuzugreifen. So ist es möglich, dem User eine höhere Geschwindigkeit und Reaktionsfähigkeit der Seite vorzutäuschen, auch wenn sich tatsächlich nichts auf der Seite tut.

3. Auf Datenänderungen reagieren

Bisher wird eine Datenänderungen nur durch einen Refresh der Seite ausgelöst und nur HTML-„Schnappschüsse“ der Daten angezeigt – ein Vorgang, der in Zeiten in denen Nutzer Real-Time-Feedback erwarten langsam aber sicher überholt ist. Wenn sich auf dem Server Daten ändern, sollten diese Änderungen direkt an den User weitergegeben werden, ohne dass er die Seite neu lädt. So kann auch die Performance der Seite verbessert werden.

4. Den Datenaustausch mit dem Server kontrollieren

Was passiert aber, wenn dem Nutzer eine Fehlermeldung ausgegeben oder die Verbindung unterbrochen wird? JavaScript bietet die Möglichkeit, einen Verbindungsstatus anzuzeigen und bei einer Trennung vom Server die Daten im Arbeitsspeicher oder local Storage zu speichern. Dadurch kann immer noch versucht werden, die Daten im Hintergrund zu synchronisieren, auch wenn die App nicht geöffnet ist.

5. History verbessern

Mit JavaScript lässt sich die History kontrollieren und man kann entscheiden, wie die vorige Seite gecached wird. Das bietet einige Vorteile, da nicht mehr jede Änderung des Status von einer Änderung der URL abhängt. So können vorige Seiten schneller gerendert werden, weil das Speichern im eigenen Cache für schnelleres Feedback sorgt.

6. Code-Updates pushen

Bei traditionellen Websites löst ein Refresh sowohl das Neuladen der Daten, als auch des Codes aus. Immer mehr Websites verzichten darauf, auch ein Code-Update zu pushen, wenn ein Daten-Update stattfindet. Allerdings ist das meist nicht ausreichend für eine gute Seiten-Performance.

Stattdessen gibt es die Möglichkeit, mit Hot-Code-Reloading nur bestimmte Module auszutauschen und ihren Code erneut auszuführen, wobei etwa das Rendern zum DOM hilft.

7. Das Verhalten vorhersagen

Mit JavaScript-Applikationen kann der mögliche User-Input vorhergesagt werden und so im Idealfall für eine negative Latenzzeit gesorgt werden. Dafür gibt es verschiedene Methoden; die am häufigsten umgesetzte Vorgehensweise fragt etwa beim Server nach den Daten des User-Inputs, bevor überhaupt eine Aktion durchgeführt wird.

Es zeigt sich also, dass JavaScript neue Möglichkeiten bietet, für die bestmögliche User Experience beim Besuch einer Website zu sorgen, ohne dabei auf die Vorteile langbestehender Technologien verzichten zu müssen. Stattdessen können Websites so noch dynamischer gestaltet und gleichzeitig ihre Performance deutlich verbessert werden.

Aufmacherbild: sherlock holmes silhouette in studio on white background von Shutterstock / Urheberrecht: ostill

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -