Wie letzte Woche versprochen geht es weiter mit dem ein- oder anderen Tipp zum Thema „User Experience“ (kurz UX)! Diese Woche möchte ich auf den Unterschied zwischen HTTP und Ajax-Requests in Web-Applikationen oder Webseiten eingehen. Diese können theoretisch in allen Bereichen zum Einsatz kommen.

Was ist mit „bessere User Experience“ gemeint?

Stellt euch eine Web-Applikation vor – z.B. euer Online E-Mail-Postfach. Früher war es überwiegend der Fall das beim öffnen einer E-Mail ein komplett frischer HTTP-Request abgeschickt wurde, der euch dann die Mail (und alles drum herum) geladen hat. Oder die Pager in der Google Suche vor einiger Zeit: Für jede weitere Seite wurde das komplette Fenster neu geladen.
Heutzutage passieren solche Aktionen in „echtzeit“ via Ajax-Requests…

Was ist daran besser?

In den meisten Fällen ist das nachladen von Content via Ajax-Request die bessere Alternative: durch das dynamische Nachladen von Inhalten wird der Benutzer nicht unnötig in seinem Fluss gestört. Außerdem eröffnet diese Technik ganz neue Interaktionsmöglichkeiten. Stellt euch vor, jede geöffnete Mail oder Suchanfrage würde die komplette Seite neu laden (inklusive aller CSS und Javascript Dateien, wenn nicht sauber gecached wird). Das wäre doch eher unschön, oder?

Welche technischen Vorteile bringt es mir?

Folgende Vorteile sprechen (meiner Meinung nach) dafür:

  • Es müssen keine Assets (CSS, Javascript, Grafiken) erneut geladen werden.
  • Saubere trennung von Logik, da wir nicht alle Komponenten der Webseite neu laden müssen, sondern nur spezifische Inhalte, somit…
  • Ideal für die implementation eines MVC und/oder REST Frameworks!
  • Kürzere Ladezeiten und weniger Auslastung für den Server.

Und Nachteile?

Natürlich gibt es auch den ein- oder anderen Nachteil, die man jedoch fast vernachlässigen kann 😉

  • Die Adresse stimmt ggf. nicht mehr mit dem Content überein. Das passiert schnell, wenn ihr eine reine Ajax-Navigation einbaut ohne die URL zu ändern (Tipp: HTML5 History API anschauen).
  • Je nach Routing Logik oder Framework ist es mit erheblichen Mehraufwand verbunden Punkt 1 auszubessern.
  • Es muss mehr Arbeit in das Frontend gesteckt werden: dutzende Events und Nachlade-Container plus das dazugehörige Javascript.

Pro-Tipp

HTML5 hat einen tollen Helfer mitgebracht, der es euch ermöglicht einen HTTP-Request (oder auch „redirect“) zu simulieren – Stichwort history.pushState(). Aber diesem Thema werde ich demnächst einen eigenen Eintrag widmen 🙂

Mir hilft es immer kleine „Demo“-Seiten zu erstellen und das neu-gelernte exemplarisch anzuwenden… Wie schaut es bei euch aus? Habt ihr Erfahrungen oder Best practices wie man Ajax-intensive Seiten sauber umsetzt und wie man die Übersicht behält? Ich würde mich über Kommentare und Erfahrungsberichte freuen!

Bis dahin wünsche ich euch eine angenehme Woche und hoffe euch auch nächste Woche wieder hier begrüßen zu dürfen!

One comment on “Tipps für bessere User Experience (UX) – Teil 2

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.