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.
Um die Komplexität zu erhöhen …
Wie wir sehen, kann jede der oben genannten Lösungen eine brauchbare Schnittstelle für das Beispielszenario bereitstellen, jedoch mit unterschiedlichem Grad an Effizienz beim Erreichen der Benutzerziele oder bei der Handhabung der Kommunikation mit dem Server. Bei der Beurteilung der Vor- und Nachteile der einzelnen Ansätze müssen wir jedoch einige Faktoren berücksichtigen, die in einem realen Szenario sehr relevant sind. Erstens können die Datenstruktur und die Beziehungen zwischen Entitäten viel komplexer sein als oben beschrieben und sie können sich auch im Laufe der Zeit ändern. Erweitern wir also das Szenario um einige weitere Anforderungen. Zum Beispiel können wir feststellen, dass einige der Projektdokumente direkt mit seinen Aufgaben verknüpft sind. Die Benutzer sollten in der Lage sein, beim Erstellen oder Bearbeiten einer Aufgabe Dokumente hochzuladen, und diese Dokumente sollten auch in der Liste der Dokumente für das übergeordnete Projekt erscheinen. Oder die Benutzer sollen in der Lage sein, Aufgaben zu erstellen und ein Dokument anzuhängen (darauf zu verweisen), das bereits in der Dokumentenliste des Projekts vorhanden ist. Was ist, wenn wir einen anderen Datentyp in den Mix werfen, z. B. einige Kundenaufträge, die an das gleiche Projekt gebunden sind, Aufträge, die auch Beziehungen zu seinen Dokumenten und/oder Aufgaben haben? Was ist, wenn das Projekt mit einer bestimmten Liste von Benutzern (einem Team) verbunden ist, die ständig aktualisiert werden müssen? Was ist, wenn diese Benutzer unterschiedliche Rollen für das Projekt und/oder die Kundenaufträge haben sollen? Was ist, wenn einige Dokumente nicht nur aktualisiert, sondern auf der Grundlage einiger bereitgestellter Vorlagen erstellt werden sollen? Die Liste der Änderungen kann endlos fortgesetzt werden und es kann sein, dass wir nach einer Weile plötzlich feststellen, dass eine gut implementierte Schnittstellenlösung nicht mehr für die neuen Anforderungen geeignet ist. Ja, normalerweise kann eine Schnittstelle, die um Datentypen herum organisiert ist (Lösung 2), jede Komplexität leicht bewältigen, aber wie? Indem man die Last, die Beziehungen zu verstehen und die relevanten Daten zu finden, auf den Benutzer selbst überträgt. Und das wird niemals gut funktionieren. Dann gibt es noch das typische menschliche Verhalten, das berücksichtigt werden muss. Manchmal können die Benutzer den Fokus auf das verlieren, was sie gerade tun. Sie können vorübergehend durch Ereignisse außerhalb des Bildschirms abgelenkt werden, z. B. durch einen Telefonanruf oder ein Meeting. Außerdem wird die Art und Weise, wie sie die Anwendung nutzen, stark von ihrer Fähigkeit beeinflusst, sich zu organisieren. Sie können mit dem Ausfüllen eines Formulars beginnen und dabei feststellen, dass sie in einem anderen Teil der Anwendung nach zusätzlichen Informationen suchen müssen. Oder sie erinnern sich daran, dass ein anderer Schritt schon vorher hätte erledigt werden müssen. Anstatt sie mit all diesen Situationen alleine fertig werden zu lassen, sollte eine gute Benutzeroberfläche immer versuchen, die Benutzer so gut wie möglich bei der Überwindung von Hindernissen zu unterstützen, Fehler zu vermeiden oder zu beheben, während sie sich auf die Hauptaufgaben konzentrieren, die ausgeführt werden sollen.… und um die Komplexität zu bewältigen
Lassen Sie uns eine andere Lösung für die Benutzeroberfläche vorstellen, die zwar noch beweisen muss, aber recht effektiv zu sein scheint, wenn es darum geht, eine konsistente Benutzererfahrung in großen Geschäftsanwendungen zu gewährleisten. Diese Lösung mit dem Namen „Flow-Interface“ wurde hauptsächlich mit dem Ziel entwickelt, eine effektive Navigation durch die verschiedenen Abschnitte und Unterabschnitte einer komplexen Oberfläche zu ermöglichen, wobei ein besonderes Augenmerk auf hierarchische Datenstrukturen gelegt wurde, bei denen Baumansichten, die offensichtliche Wahl, von alternativen Navigationsmethoden begleitet werden. Zu den weiteren Zielen gehörte die Begrenzung der Anzahl von Server-Lookups durch eine sorgfältige Choreografie des Benutzerverhaltens um die wichtigsten Anwendungsfälle herum sowie eine effiziente Nutzung der großen Bildschirmfläche. (Hinweis: Wir werden hier nicht auf gängige Oberflächenelemente wie eine Kopfzeile oder eine Seitenleiste/ein Menü eingehen, da diese Komponenten in den meisten Anwendungen eher obligatorisch sind und normalerweise so implementiert werden, dass sie möglichst wenig Platz auf dem Bildschirm einnehmen). Das Flow-Interface-Konzept nutzt einige der besten Eigenschaften der zuvor beschriebenen Lösungen und löst gleichzeitig einige ihrer Hauptprobleme. Da die zweite Lösung den Platz auf dem Bildschirm gut ausnutzt, ohne zu viele Daten in ein einziges Layout zu packen, werden wir dort beginnen. Wir werden den Bildschirm in zwei Spalten aufteilen und die Liste der Projekte auf der linken Seite und die Details eines ausgewählten Projekts auf der rechten Seite anzeigen. Die Liste kann einen permanenten oder versteckten Filter sowie einige Sortieroptionen haben und wird ein Minimum an relevanten Informationen zu jedem Projekt in einem benutzerdefinierten Block anzeigen (keine Tabellenansicht). Für die Detailkomponente können wir optional wählen, de Informationen in Abschnitte zu gruppieren und jedes Datenelement in einem visuell unterscheidbaren Label-/Wert-Paar anzuzeigen. Die Idee ist, das Layout für die Komponenten desselben Typs konsistent zu halten, aber ansonsten können wir jedes geeignete Layout innerhalb einer Komponente verwenden.

Multitasking
Das Flow-Konzept mag bei der Beschreibung kompliziert erscheinen, hat sich aber bereits in realen Anwendungen als sehr effektiv erwiesen und ist so einfach zu erlernen, dass es sogar noch erweitert und zu einem „Multi-Flow“ werden könnte. Wie der Name schon sagt, kann die Benutzeroberfläche mehrere Flows gleichzeitig bereitstellen, die in Registerkarten getrennt sind, so dass der Benutzer jeweils einen in die Ansicht holen kann. Natürlich erhöht die Verwaltung mehrerer Registerkarten den Grad der Komplexität aus Sicht der Implementierung, aber die Vorteile, mehr Flows aktiv zu haben, erweitert die Möglichkeiten des Benutzers erheblich. Sie werden in der Lage sein, parallele Threads zu öffnen, um an mehreren Aufgaben gleichzeitig zu arbeiten, eine sehr wichtige Fähigkeit, die in den meisten Webanwendungen fehlt (wird normalerweise durch das Öffnen einer beliebigen Anzahl von zusätzlichen Browser-Tabs erreicht). Die Idee selbst ist nicht exklusiv für Browser, da viele Desktop-Anwendungen (und einige webbasierte) sie nutzen und die meisten Probleme der Benutzerfreundlichkeit, die mit der Anzeige einer variablen Anzahl von Tabs verbunden sind, bereits gelöst wurden. Das Multi-Flow-Konzept kann diese Erfahrungen einfach nutzen und die besten Lösungen für eine gute Integration von Hauptmenü, Multi-Flow-Tabs und flowbezogenen Navigationselementen implementieren.
Hinweise zu responsiven Layouts
Eine komplexe Schnittstelle lässt sich nicht so einfach an einen kleinen Bildschirm, wie den eines mobilen Geräts, anpassen. Die oben beschriebene Flow-Schnittstelle kann jedoch recht gut auf einem mobilen Gerät gehandhabt werden, wenn wir ein paar wichtige Funktionen implementieren. Die wichtigste davon ist die Umstellung des aktiven Flows auf eine einzelne Spalte, was bedeutet, dass jeweils nur eine Komponente sichtbar ist. Wenn das innere Layout der einzelnen Komponenten selbst responsive ist, müssen wir nur einige Touch-Gesten übernehmen, wie z. B. das Streichen nach rechts und links zwischen den geöffneten Komponenten, um ein Erlebnis zu erhalten, das einer nativen mobilen App recht nahe kommt. Darüber hinaus kann die Flow-Navigationsleiste in ein Dropdown-Menü umgewandelt und die Multi-Flow-Tab-Leiste darauf beschränkt werden, nur Symbole des zugehörigen Datentyps anzuzeigen (vielleicht wie die in der Seitenleiste). Die Anforderungen an die Reaktionsfähigkeit sind also kein Hindernis für diese Schnittstelle.