Single-Page-Anwendungen: Alte und neue Lösungen für die Benutzeroberfläche/User Interface (UI)
Ein einfaches Benutzerszenario …
Beginnen wir mit einem recht häufigen Szenario: Die Benutzer möchten den Status eines bestimmten Projekts aus den Projekten, an denen ihr Team gerade arbeitet, aktualisieren. Sie öffnen die Liste der Projekte, filtern sie nach einigen Kriterien (z. B. Kundenname), um schnell das gesuchte Projekt zu finden, und klicken darauf, um dessen Details zu öffnen. Als Nächstes werden die Benutzer eine Liste von Aufgaben durchsehen, die sich auf das Projekt beziehen, die ihnen zugewiesenen Aufgaben finden, den Status einiger Aufgaben mit hoher Priorität ändern und dann eine neue Aufgabe für einen Mitarbeiter erstellen. Schließlich gehen sie zur Liste der Dateien, die sich auf dasselbe Projekt beziehen, und laden einige weitere Dokumente hoch.… und einige Schnittstellenlösungen
Was wir oben beschrieben haben, ist eine Abfolge von Schritten, die linear bis zu einem Punkt (Projektdetails) verläuft und sich dann in zwei Teilschritte aufteilt, die jeweils über eigene zusätzliche Schritte verfügen. Wenn wir uns bestehende Anwendungen ansehen, werden wir mehrere Lösungen für die Implementierung eines solchen Szenarios finden.
Bei einem seitenbasierten Ansatz würden wir Komponenten für jeden Schritt erstellen und sie nacheinander anzeigen, basierend auf der Auswahl des Benutzers. Wir würden also zunächst eine Liste von Projekten haben, vielleicht unter Verwendung einer Tabellenansicht, um so viele Details wie möglich für jeden Datensatz anzuzeigen, mit üblicher Sortierung und Filterung. Wenn der Benutzer dann das gewünschte Projekt auswählt, ersetzen wir die Liste durch eine Reihe von Detailinformationen zu diesem Projekt. Einige Links werden für den Zugriff auf die Liste der zugehörigen Aufgaben und Dokumente bereitgestellt. Ein Klick auf einen Link ersetzt die Projektdetails durch die nachfolgende Komponente, in der wir vielleicht den gleichen Ansatz der Tabellenansicht mit Sortierung und Filterung für entweder Aufgaben oder Dokumente verwenden werden. Eine weitere Auswahl eines Elements aus der neuen Liste zeigt dessen Details an, eine Option, die für die Dokumente möglicherweise nicht benötigt wird, wenn alle Informationen in die Liste selbst eingepasst werden können. Der letzte Schritt wäre die Anzeige einiger Formulare zum Erstellen oder Bearbeiten von Aufgaben oder zum Hochladen von Dokumenten, oft in einem modalen Dialogfeld. Während dieser Ansatz eine einfache Navigation durch die Anwendung ermöglicht, ist die Gesamterfahrung der Benutzer unterdurchschnittlich, da sie durch eine Menge von Seiten hin und her gehen müssen, um ihre Ziele zu erreichen.
Eine zweite Lösung basiert auf einer einfachen Designregel: Man sollte immer eine Liste von Datensätzen und die Details des ausgewählten Elements aus dieser Liste gleichzeitig in einem geteilten Bildschirmlayout anzeigen. Die Bildschirmfläche wird besser genutzt, mit dem (eher geringen) Nachteil, dass eine geringere Anzahl von Spalten in der Tabellenansicht angezeigt werden kann (sie kann jedoch durch eine reaktionsschnellere generische Liste ersetzt werden). Die nachfolgenden Listen würden das gleiche Muster verwenden, wobei die Liste der Aufgaben paarweise mit den Details der ausgewählten Aufgabe angezeigt wird, während die Liste der Dokumente direkt mit dem Upload-Formular gepaart werden kann. Um so konsistent wie möglich zu sein, kann das Formular zum Erstellen/Bearbeiten einer Aufgabe vorübergehend die Aufgabendetailkomponente auf der rechten Seite des Bildschirms ersetzen, so dass ein modaler Dialog nicht erforderlich wäre. Diese Lösung bietet eine effizientere Art der Interaktion mit der Anwendung und wird häufig in Webanwendungen verwendet.
Eine dritte mögliche Lösung würde versuchen, alle Projektdetails und zugehörigen Daten auf einer einzigen „Seite“ anzuzeigen, während die Liste der Projekte weiterhin ihren eigenen Vollbildschirm haben kann. So sehen die Benutzer in einem mehrfach geteilten Layout alle Projektdetails, sowie die Liste der zugehörigen Aufgaben und die Details einer ausgewählten Aufgabe, die Liste der zugehörigen Dokumente und, zu gegebener Zeit, das Formular zum Erstellen/Bearbeiten der Aufgabe oder das Formular zum Hochladen von Dokumenten. Alle Optionen liegen auf dem Tisch (Bildschirm) für die Benutzer, die wählen können, was sie sehen und was sie in Bezug auf das ausgewählte Projekt tun wollen, ohne jemals die „Seite“ zu verlassen. Auf der anderen Seite besteht die Gefahr, dass sie auf einem derart überfüllten Bildschirm die Konzentration verlieren und den Server durch das Laden vieler Daten belasten, die sie am Ende vielleicht gar nicht nutzen. Trotz einiger offensichtlicher Vorteile ist dies also nicht wirklich die effizienteste Implementierung.