Wie man UX mit AJAX fährt
Mit der mobilen Internetnutzung, die Desktop-basiertes Surfen im Web vereinfacht, ist es wichtiger denn je, dass Webseiten mit einem Schwerpunkt auf schnellen Seitenaufrufen und flüssigen Reaktionen auf Benutzereingaben erstellt werden.
Eine wichtige Technologie, die wir dafür verwenden, ist AJAX, kurz für "Asynchronous JavaScript & XML". Mit AJAX können Sie Teile einer einzelnen Webseite aktualisieren, ohne das DOM (die HTML-Architektur der Seite) ständig zu löschen Laden von Seiten und Erstellen einer schnelleren Reaktion auf Benutzereingaben Das Erstellen von Websites auf einem 100% AJAX-Framework ist eine Technik, die neue Möglichkeiten aufzeigt, was in der Webentwicklung erreichbar ist.
Wir haben vor fast zehn Jahren mit dem Bau von Websites als 100% AJAX begonnen und seither viel darüber gelernt, wie man es effektiv einsetzt, um die Benutzererfahrung zu verbessern. In diesem Artikel werden wir einige der spezifischen Vorteile und einige Einschränkungen dieser Technik untersuchen.
Schnelle Benutzerreaktion
Ein Schlüsselelement eines effektiven UX ist eine schnelle Reaktion auf Benutzereingaben. Bei einer Standardwebsite warten Benutzer jedoch darauf, dass Interaktionen stattfinden, wenn Anforderungen über HTTP (oder HTTPS) an den Server gestellt werden, was zu einer vollständigen Seitenauslastung führt für jede Änderung. Dieser Vorgang erfolgt mit jedem Mausklick, um eine neue Seite, ein größeres Bild oder weitere Informationen anzufordern. Das DOM wird komplett ausgeworfen und in Ihren Browser geladen - dies ist oft ein verschwenderischer Prozess beim Laden von Seiten auf der gleichen Website, da sie in der Regel ähnliche Inhalte haben.
Kayaks Suche wird von AJAX unterstützt und liefert Vorschläge, sobald Sie mit der Eingabe beginnen.
Ein großer Vorteil von AJAX ist der stetige Informationsfluss, der durch das Laden und Entladen des DOMs nicht beeinträchtigt wird. Dies ermöglicht eine bessere Kontrolle über das Erlebnis und die Aufmerksamkeit des Besuchers. Mit AJAX können Webanwendungen Daten asynchron zum und vom Server senden, ohne die Anzeige der vorhandenen Seite zu beeinträchtigen.
Der Hauptunterschied zwischen einer Standard-AJAX-Implementierung und einer zu 100% von AJAX erstellten Website besteht darin, dass das Basis-DOM beim ersten Besuch der Website geladen wird, normalerweise auf der Startseite. Alles andere, was passiert, ist einfach eine Manipulation dieser primären Last.
Ein prominentes Beispiel für die Flexibilität von AJAX ist Google Maps. Wenn Sie in der Vogelperspektive oder in der Straßenansicht durch eine Stadt zoomen, navigieren, navigieren, werden Informationen nahtlos und kontinuierlich zur sofortigen Verwendung bereitgestellt. Beim Wechseln zwischen Seiten oder beim Aktualisieren von Inhalten in einer Webanwendung ermöglicht AJAX eine kontextabhängige Reaktion auf Benutzereingaben, z. B. die Aktualisierung der Formularausgabe in Echtzeit ohne Neuladen der Seite, das Wechseln von Kontextanimationen zwischen Seiten oder das Laden eines Details Aussicht.
Bei der Gestaltung von Seiten mit einer großen Menge an Inhalten verwenden wir das unendliche Scrolling-Muster von AJAX, das nicht nur Browser-Bandbreite spart, indem es nur die für das UX relevanten Informationen anzeigt, sondern auch die Benutzerfriktion reduziert. Auf unserer eigenen Firma Nachrichtenseite Beispielsweise werden mehr Artikel geladen, wenn Sie nach unten scrollen, wodurch die Verwendung von Seiten entfällt und stattdessen mehr Informationen auf den Bildschirm geladen werden, wenn der Leser dies benötigt. Dieser reibungslose Prozess des Ladens und Entladens von mehr Inhalten auf Abruf ermöglicht es unseren Besuchern, genau so viele Nachrichten zu erhalten, wie sie wollen, ohne ihre Absicht zu behindern.
Nahtlose UX
Die Kontrolle darüber, wie eine Website Inhalte lädt, bietet eine einzigartige Gelegenheit, Seitenübergänge, Ladeanimationen und visuelle Hinweise zu gestalten, die dem Benutzer helfen, die Hierarchie der Website zu verstehen. Dies ist auch eine Chance für Kreativität mit dem Branding des Unternehmens.
Eine Website mit einem 100% AJAX-Framework (da keine vollständige Seite geladen wird) liefert keine Rückmeldung über das Laden des Fortschritts im Browserfenster, was zu Verwirrung führen kann, wenn ein Besucher längere Zeit ohne Antwort warten muss. Hier kommen benutzerdefinierte Ladestatusanzeigen zum Einsatz, die anzeigen, dass während der Wartezeit Fortschritte gemacht wurden.
Estes Park Medizinisches Zentrum in Colorado verwendet einen personalisierten AJAX-Lader, um die Farbe und die Marke ihrer Organisation beizubehalten sowie die Funktionalität eines Ladesymbols zu vermitteln.
Auf der Zillow Website wird die Liste der Details ständig aktualisiert, ohne dass der Aktualisierungs-Button des Browsers verwendet wird, so dass die Mieter jederzeit Zugang zu aktuellen Informationen haben.
Kleine Ergänzungen wie diese sind prägnant für ein unvergessliches Erlebnis für Ihre Besucher und werden durch den Einsatz von AJAX ermöglicht.
Kontrolle über den URL-Pfad mithilfe des HTML5-Verlaufs
Ohne individuelle Seitenladevorgänge wird eine Site durch eine einzelne URL definiert, was zu Problemen bei schlecht erstellten AJAX-Sites führt, wenn Benutzer versuchen, ein Lesezeichen zu setzen, oder mit den Vorwärts- und Rückwärts-Schaltflächen ihres Browsers navigieren. Da der Suchmaschinen-Crawler von Google in der Vergangenheit kein JavaScript gelesen hatte, gab es Bedenken, wie gut AJAX-gestützte Websites in den organischen Suchergebnissen von Google abgerufen werden könnten.
Diese beiden Bedingungen werden gelöst, indem Sie die Kontrolle über den URL-Pfad mit Hilfe der HTML5-Verlaufs-API .
Jede Seite einer 100% AJAX-Site und ihre alternativen Ansichten werden als eigene Anfrage betrachtet. Beim Navigieren durch eine AJAX-Site wird die URL im Browser aktualisiert, um eine eindeutige Adresse für den aktuellen Anzeigestatus bereitzustellen. Darüber hinaus können wir Ereignisse nach Verlaufswechseln abhören, um die Zurück-Schaltfläche des Browsers zu unterstützen und den vorherigen Anzeigestatus zurückzugeben. Jede dieser eindeutigen URLs wird vollständig von Google indiziert. Dies bedeutet, dass dieser Ansatz vollständig kompatibel und hilfreich für SEO ist.
Amazonas A9 Der Suchdienst ist abhängig von AJAX, um umfangreiche Datenmengen abzurufen, ohne den Suchverlauf des Benutzers zu verlieren.
Abschließend
Wie Sie sehen können, ist AJAX ein wesentlicher Bestandteil der modernen Webentwicklung und ersetzt eine Reihe von minderwertigen Technologien, die eine schlechte Benutzererfahrung bieten. Ohne AJAX musste der gesamte Seiteninhalt für fast jede einzelne Benutzerinteraktion vollständig neu geladen werden, auch wenn sich nur ein Teil der Informationen geändert hatte. Diese Geschwindigkeit hat den Server zusätzlich belastet und eine übermäßige Bandbreite verbraucht.
Indem wir uns auf ein 100% AJAX-Framework stützen, können wir Websites erstellen, die auf die Bedürfnisse von Kunden zugeschnitten sind, eine barrierefreie Navigation bereitstellen, die von Site-Besuchern mit einem Lesezeichen versehen werden kann, und diese Funktion auf einer viel höheren Ebene.