Was wir oben beschrieben haben, ist eine Abfolge von Schritten, die linear bis zu einem Punkt (Projektdetails) verl\u00e4uft und sich dann in zwei Teilschritte aufteilt, die jeweils \u00fcber eigene zus\u00e4tzliche Schritte verf\u00fcgen. Wenn wir uns bestehende Anwendungen ansehen, werden wir mehrere L\u00f6sungen f\u00fcr die Implementierung eines solchen Szenarios finden.<\/p>\n
Bei einem seitenbasierten Ansatz w\u00fcrden wir Komponenten f\u00fcr jeden Schritt erstellen und sie nacheinander anzeigen, basierend auf der Auswahl des Benutzers<\/span>. Wir w\u00fcrden also zun\u00e4chst eine Liste von Projekten haben, vielleicht unter Verwendung einer Tabellenansicht, um so viele Details wie m\u00f6glich f\u00fcr jeden Datensatz anzuzeigen, mit \u00fcblicher Sortierung und Filterung. Wenn der Benutzer dann das gew\u00fcnschte Projekt ausw\u00e4hlt, ersetzen wir die Liste durch eine Reihe von Detailinformationen zu diesem Projekt. Einige Links werden f\u00fcr den Zugriff auf die Liste der zugeh\u00f6rigen 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\u00fcr entweder Aufgaben oder Dokumente verwenden werden. Eine weitere Auswahl eines Elements aus der neuen Liste zeigt dessen Details an, eine Option, die f\u00fcr die Dokumente m\u00f6glicherweise nicht ben\u00f6tigt wird, wenn alle Informationen in die Liste selbst eingepasst werden k\u00f6nnen. Der letzte Schritt w\u00e4re die Anzeige einiger Formulare zum Erstellen oder Bearbeiten von Aufgaben oder zum Hochladen von Dokumenten, oft in einem modalen Dialogfeld. W\u00e4hrend dieser Ansatz eine einfache Navigation durch die Anwendung erm\u00f6glicht, ist die Gesamterfahrung der Benutzer unterdurchschnittlich, da sie durch eine Menge von Seiten hin und her gehen m\u00fcssen, um ihre Ziele zu erreichen.<\/p>\n Eine zweite L\u00f6sung basiert auf einer einfachen Designregel: Man sollte immer eine Liste von Datens\u00e4tzen und die Details des ausgew\u00e4hlten Elements aus dieser Liste gleichzeitig in einem geteilten Bildschirmlayout anzeigen<\/span>. Die Bildschirmfl\u00e4che 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\u00fcrden das gleiche Muster verwenden, wobei die Liste der Aufgaben paarweise mit den Details der ausgew\u00e4hlten Aufgabe angezeigt wird, w\u00e4hrend die Liste der Dokumente direkt mit dem Upload-Formular gepaart werden kann. Um so konsistent wie m\u00f6glich zu sein, kann das Formular zum Erstellen\/Bearbeiten einer Aufgabe vor\u00fcbergehend die Aufgabendetailkomponente auf der rechten Seite des Bildschirms ersetzen, so dass ein modaler Dialog nicht erforderlich w\u00e4re. Diese L\u00f6sung bietet eine effizientere Art der Interaktion mit der Anwendung und wird h\u00e4ufig in Webanwendungen verwendet.<\/p>\n Eine dritte m\u00f6gliche L\u00f6sung w\u00fcrde versuchen, alle Projektdetails und zugeh\u00f6rigen Daten auf einer einzigen \u201eSeite\u201c anzuzeigen, w\u00e4hrend die Liste der Projekte weiterhin ihren eigenen Vollbildschirm haben kann<\/span>. So sehen die Benutzer in einem mehrfach geteilten Layout alle Projektdetails, sowie die Liste der zugeh\u00f6rigen Aufgaben und die Details einer ausgew\u00e4hlten Aufgabe, die Liste der zugeh\u00f6rigen 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\u00fcr die Benutzer, die w\u00e4hlen k\u00f6nnen, was sie sehen und was sie in Bezug auf das ausgew\u00e4hlte Projekt tun wollen, ohne jemals die \u201eSeite\u201c zu verlassen. Auf der anderen Seite besteht die Gefahr, dass sie auf einem derart \u00fcberf\u00fcllten 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.<\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=“on“ _builder_version=“4.4.6″ custom_margin=“||||false|false“ custom_padding=“6vh||||false|false“ border_color_left=“rgba(0,0,0,0)“][et_pb_column type=“4_4″ _builder_version=“4.4.1″][et_pb_text _builder_version=“4.7.7″ text_font=“||||||||“ text_font_size=“1.1em“ text_line_height=“1.6em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“1.5em“ header_2_line_height=“0.9em“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″] Single-Page-Anwendungen (SPA) sind der Standard f\u00fcr die Implementierung von Benutzeroberfl\u00e4chen f\u00fcr Webanwendungen. Wir besprechen verschiedene L\u00f6sungen.<\/p>\n","protected":false},"author":15,"featured_media":6950,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[79,33],"tags":[],"class_list":["post-7001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-einblicke","category-insights"],"yoast_head":"\nUm die Komplexit\u00e4t zu erh\u00f6hen …<\/h2>\nWie wir sehen, kann jede der oben genannten L\u00f6sungen eine brauchbare Schnittstelle f\u00fcr 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\u00e4tze m\u00fcssen wir jedoch einige Faktoren ber\u00fccksichtigen, die in einem realen Szenario sehr relevant sind.\n\nErstens k\u00f6nnen die Datenstruktur und die Beziehungen zwischen Entit\u00e4ten<\/span> viel komplexer sein als oben beschrieben und sie k\u00f6nnen sich auch im Laufe der Zeit \u00e4ndern. Erweitern wir also das Szenario um einige weitere Anforderungen. Zum Beispiel k\u00f6nnen wir feststellen, dass einige der Projektdokumente direkt mit seinen Aufgaben verkn\u00fcpft 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\u00fcr das \u00fcbergeordnete Projekt erscheinen. Oder die Benutzer sollen in der Lage sein, Aufgaben zu erstellen und ein Dokument anzuh\u00e4ngen (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\u00e4ge, die an das gleiche Projekt gebunden sind, Auftr\u00e4ge, 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\u00e4ndig aktualisiert werden m\u00fcssen? Was ist, wenn diese Benutzer unterschiedliche Rollen f\u00fcr das Projekt und\/oder die Kundenauftr\u00e4ge haben sollen? Was ist, wenn einige Dokumente nicht nur aktualisiert, sondern auf der Grundlage einiger bereitgestellter Vorlagen erstellt werden sollen? Die Liste der \u00c4nderungen kann endlos fortgesetzt werden und es kann sein, dass wir nach einer Weile pl\u00f6tzlich feststellen, dass eine gut implementierte Schnittstellenl\u00f6sung nicht mehr f\u00fcr die neuen Anforderungen geeignet ist. Ja, normalerweise kann eine Schnittstelle, die um Datentypen herum organisiert ist (L\u00f6sung 2), jede Komplexit\u00e4t leicht bew\u00e4ltigen, aber wie? Indem man die Last, die Beziehungen zu verstehen und die relevanten Daten zu finden, auf den Benutzer selbst \u00fcbertr\u00e4gt. Und das wird niemals gut funktionieren.\n\nDann gibt es noch das typische menschliche Verhalten<\/span>, das ber\u00fccksichtigt werden muss. Manchmal k\u00f6nnen die Benutzer den Fokus auf das verlieren, was sie gerade tun. Sie k\u00f6nnen vor\u00fcbergehend durch Ereignisse au\u00dferhalb des Bildschirms abgelenkt werden, z. B. durch einen Telefonanruf oder ein Meeting. Au\u00dferdem wird die Art und Weise, wie sie die Anwendung nutzen, stark von ihrer F\u00e4higkeit beeinflusst, sich zu organisieren. Sie k\u00f6nnen mit dem Ausf\u00fcllen eines Formulars beginnen und dabei feststellen, dass sie in einem anderen Teil der Anwendung nach zus\u00e4tzlichen Informationen suchen m\u00fcssen. Oder sie erinnern sich daran, dass ein anderer Schritt schon vorher h\u00e4tte erledigt werden m\u00fcssen. Anstatt sie mit all diesen Situationen alleine fertig werden zu lassen, sollte eine gute Benutzeroberfl\u00e4che immer versuchen, die Benutzer so gut wie m\u00f6glich bei der \u00dcberwindung von Hindernissen zu unterst\u00fctzen, Fehler zu vermeiden oder zu beheben, w\u00e4hrend sie sich auf die Hauptaufgaben konzentrieren, die ausgef\u00fchrt werden sollen.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=“on“ _builder_version=“4.4.6″ custom_margin=“||||false|false“ custom_padding=“6vh||||false|false“ border_color_left=“rgba(0,0,0,0)“][et_pb_column type=“4_4″ _builder_version=“4.4.1″][et_pb_text _builder_version=“4.7.7″ text_font=“||||||||“ text_font_size=“1.1em“ text_line_height=“1.6em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“1.5em“ header_2_line_height=“0.9em“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″]
… und um die Komplexit\u00e4t zu bew\u00e4ltigen<\/h2>\nLassen Sie uns eine andere L\u00f6sung f\u00fcr die Benutzeroberfl\u00e4che vorstellen, die zwar noch beweisen muss, aber recht effektiv zu sein scheint, wenn es darum geht, eine konsistente Benutzererfahrung in gro\u00dfen Gesch\u00e4ftsanwendungen zu gew\u00e4hrleisten. Diese L\u00f6sung mit dem Namen \u201eFlow-Interface\u201c wurde haupts\u00e4chlich mit dem Ziel entwickelt, eine effektive Navigation durch die verschiedenen Abschnitte und Unterabschnitte einer komplexen Oberfl\u00e4che zu erm\u00f6glichen, 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\u00f6rte die Begrenzung der Anzahl von Server-Lookups durch eine sorgf\u00e4ltige Choreografie des Benutzerverhaltens um die wichtigsten Anwendungsf\u00e4lle herum sowie eine effiziente Nutzung der gro\u00dfen Bildschirmfl\u00e4che.\n\n(Hinweis: Wir werden hier nicht auf g\u00e4ngige Oberfl\u00e4chenelemente wie eine Kopfzeile oder eine Seitenleiste\/ein Men\u00fc eingehen, da diese Komponenten in den meisten Anwendungen eher obligatorisch sind und normalerweise so implementiert werden, dass sie m\u00f6glichst wenig Platz auf dem Bildschirm einnehmen).\n\nDas Flow-Interface-Konzept nutzt einige der besten Eigenschaften der zuvor beschriebenen L\u00f6sungen und l\u00f6st gleichzeitig einige ihrer Hauptprobleme. Da die zweite L\u00f6sung 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\u00e4hlten 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\u00fcr die Detailkomponente k\u00f6nnen wir optional w\u00e4hlen, de Informationen in Abschnitte zu gruppieren und jedes Datenelement in einem visuell unterscheidbaren Label-\/Wert-Paar anzuzeigen. Die Idee ist, das Layout f\u00fcr die Komponenten desselben Typs konsistent zu halten, aber ansonsten k\u00f6nnen wir jedes geeignete Layout innerhalb einer Komponente verwenden.[\/et_pb_text][et_pb_image src=“\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-single-page-UI-02-flow-interface.jpg“ alt=“Berg Software – single-page UI – 02 flow interface“ title_text=“Berg Software – single-page UI – 02 flow interface“ align=“center“ _builder_version=“4.7.7″ _module_preset=“default“ custom_padding=“20px||20px||false|false“][\/et_pb_image][et_pb_text _builder_version=“4.7.7″ text_font=“||||||||“ text_font_size=“1.1em“ text_line_height=“1.6em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“1.5em“ header_2_line_height=“0.9em“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″]Jetzt werden die Benutzer die Liste der zugeh\u00f6rigen Aufgaben f\u00fcr das ausgew\u00e4hlte Projekt \u00f6ffnen wollen, indem sie auf die entsprechende Schaltfl\u00e4che in der Komponente Projektdetails klicken. Dazu schieben sie die beiden vorhandenen Komponenten nach links (unter die Seitenleiste, falls vorhanden), ohne eine von ihnen aus dem DOM zu entfernen, und machen Platz f\u00fcr die neue Komponente: die Aufgabenliste. Am Ende haben wir dann zwei sichtbare Komponenten: die Projektdetails und die Aufgabenliste. Wir werden auch eine variable Navigationsleiste implementieren, die mit der Reihenfolge der Komponenten (dem Fluss) synchronisiert ist, wobei jede Komponente einen Link haben wird. In diesem Zustand zeigt die Navigation drei Links an, und durch Anklicken des ersten Links, der der ersten urspr\u00fcnglich sichtbaren Komponente entspricht, schieben wir den Fluss nach rechts und bringen die Projektliste wieder ins Blickfeld. Wir k\u00f6nnen auch einige Pfeile f\u00fcr die Navigation nach links und rechts zwischen den Komponenten bereitstellen, ebenso wie Tastatur\u00e4quivalente. [\/et_pb_text][et_pb_image src=“\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-single-page-UI-02-flow-interface-B.jpg“ alt=“Berg Software – single-page UI – 02 flow interface B“ title_text=“Berg Software – single-page UI – 02 flow interface B“ align=“center“ _builder_version=“4.7.7″ _module_preset=“default“ custom_padding=“20px||20px||false|false“][\/et_pb_image][et_pb_text _builder_version=“4.7.7″ text_font=“||||||||“ text_font_size=“1.1em“ text_line_height=“1.6em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“1.5em“ header_2_line_height=“0.9em“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″]Die gleichen Regeln gelten f\u00fcr die Ausf\u00fchrung der n\u00e4chsten Schritte. Die Aufgabendetailkomponente wird als vierter Schritt im Ablauf ge\u00f6ffnet, rechts neben der Aufgabenliste, so dass der Benutzer sowohl die Liste als auch die Details gleichzeitig sieht. F\u00fcr das Aufgabenbearbeitungsformular werden wir jedoch eine neue Regel hinzuf\u00fcgen. Wenn der Benutzer auf die Schaltfl\u00e4che \u201eBearbeiten\u201c klickt, nimmt die Formularkomponente den Platz der Aufgabendetails im Fluss ein, anstatt sich als neue Komponente zu \u00f6ffnen. Das ist in Ordnung, weil wir alle Informationen \u00fcber die Aufgabe im Formular beibehalten werden, so dass die Details nicht mehr auf dem Bildschirm angezeigt werden m\u00fcssen. Wenn die Benutzer anschlie\u00dfend die \u00c4nderungen speichern, nimmt die aktualisierte Aufgabendetailkomponente wieder ihren Platz im Ablauf ein, und das Formular wird entfernt. \n\nWir k\u00f6nnen den Fluss leicht weiter ausbauen mit einer Liste von Dokumenten, die mit der aktuellen Aufgabe in Verbindung stehen. Das w\u00e4re die gleiche Komponente, die f\u00fcr Projektdokumente verwendet wird, aber bereits gefiltert, um nur die anzuzeigen, die mit der Aufgabe verbunden sind. Ein Formular zum Hochladen von Dokumenten kann folgen und so weiter. Aber was passiert, wenn die Benutzer zur ersten Komponente im Ablauf, der Projektliste, zur\u00fcckgehen und ein anderes Projekt ausw\u00e4hlen? Wir zeigen die neuen Projektdetails als zweite Komponente an, aber wir entfernen auch alle folgenden Komponenten aus dem Fluss, da sie m\u00f6glicherweise Daten enthalten, die nicht mit dem ausgew\u00e4hlten Projekt in Verbindung stehen. Es ist ein logischer Schritt, und die Benutzer werden ihn sofort verstehen. \n\nWir haben also bisher drei Hauptmethoden, um Komponenten in einem Ablauf zu verwalten: Hinzuf\u00fcgen einer neuen Komponente (immer auf der rechten Seite, als n\u00e4chster Schritt im Ablauf), Entfernen einer Komponente (zusammen mit allen nachfolgenden Komponenten von diesem Punkt an) und Ersetzen einer Komponente durch eine andere (w\u00e4hrend wiederum die n\u00e4chsten Komponenten entfernt werden, falls vorhanden). Diese Methoden erm\u00f6glichen es dem Benutzer, verschiedene Sequenzen von Aktivit\u00e4ten zu verwalten, indem er bei jedem Schritt ausw\u00e4hlt, was er als n\u00e4chstes sehen m\u00f6chte. Au\u00dferdem bedeutet die gleichzeitige Anzeige von zwei Ablaufspalten (aber nicht dieselben festen Paare wie in L\u00f6sung 3), dass die Benutzer immer Zugriff sowohl auf die Daten, die sie sehen oder \u00e4ndern wollen (die Komponente auf der rechten Seite), als auch auf ihren Kontext (die Komponente auf der linken Seite) haben. \n\nWas wir am Ende erhalten, ist eine dynamische Benutzeroberfl\u00e4che, die sich an verschiedene Szenarien anpassen kann, w\u00e4hrend ein einziges Navigationskonzept verwendet wird. Nat\u00fcrlich wirft das gleichzeitige Vorhandensein vieler Komponenten (auf oder au\u00dferhalb des Bildschirms) einige Probleme in Bezug auf die Leistung oder die Aktualit\u00e4t der Informationen auf, so dass ein allgemeiner Kommunikationsmechanismus erforderlich ist, um sicherzustellen, dass die \u00c4nderungen, die an einer bestimmten Komponente vorgenommen werden, auf eine andere \u00fcbertragen werden. Auf einer eher technischen Ebene bedeutet dies die Implementierung einer L\u00f6sung f\u00fcr das Senden von Daten und Befehlen zwischen Komponenten basierend auf ihrer ID, ihrem Typ oder ihrer aktuellen Position im Ablauf. Dar\u00fcber hinaus kann die Schnittstelle dem Benutzer die M\u00f6glichkeit geben, einige Aktionen wie das Aktualisieren oder Schlie\u00dfen einer Komponente manuell auszuf\u00fchren.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=“on“ _builder_version=“4.4.6″ custom_margin=“||||false|false“ custom_padding=“6vh||||false|false“ border_color_left=“rgba(0,0,0,0)“][et_pb_column type=“4_4″ _builder_version=“4.4.1″][et_pb_text _builder_version=“4.7.7″ text_font=“||||||||“ text_font_size=“1.1em“ text_line_height=“1.6em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“1.5em“ header_2_line_height=“0.9em“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″]
Multitasking<\/h2>\nDas 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 \u201eMulti-Flow\u201c werden k\u00f6nnte. Wie der Name schon sagt, kann die Benutzeroberfl\u00e4che mehrere Flows gleichzeitig bereitstellen, die in Registerkarten getrennt sind, so dass der Benutzer jeweils einen in die Ansicht holen kann.\n\nNat\u00fcrlich erh\u00f6ht die Verwaltung mehrerer Registerkarten den Grad der Komplexit\u00e4t aus Sicht der Implementierung, aber die Vorteile, mehr Flows aktiv zu haben, erweitert die M\u00f6glichkeiten des Benutzers erheblich. Sie werden in der Lage sein, parallele Threads zu \u00f6ffnen, um an mehreren Aufgaben gleichzeitig zu arbeiten, eine sehr wichtige F\u00e4higkeit, die in den meisten Webanwendungen fehlt (wird normalerweise durch das \u00d6ffnen einer beliebigen Anzahl von zus\u00e4tzlichen Browser-Tabs erreicht). Die Idee selbst ist nicht exklusiv f\u00fcr 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\u00f6st wurden. Das Multi-Flow-Konzept kann diese Erfahrungen einfach nutzen und die besten L\u00f6sungen f\u00fcr eine gute Integration von Hauptmen\u00fc, Multi-Flow-Tabs und flowbezogenen Navigationselementen implementieren.[\/et_pb_text][et_pb_image src=“\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-single-page-UI-02-flow-interface-C.jpg“ alt=“Berg Software – single-page UI – 02 flow interface C“ title_text=“Berg Software – single-page UI – 02 flow interface C“ align=“center“ _builder_version=“4.7.7″ _module_preset=“default“ custom_padding=“20px||20px||false|false“][\/et_pb_image][et_pb_text _builder_version=“4.7.7″ text_font=“||||||||“ text_font_size=“1.1em“ text_line_height=“1.6em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“1.5em“ header_2_line_height=“0.9em“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″]Das gleichzeitige \u00d6ffnen vieler Flows ist zwar keine sehr produktive Art, das Konzept zu nutzen, aber das Hinzuf\u00fcgen einiger Regeln f\u00fcr die Erstellung der Flows sorgt f\u00fcr die notwendige Ordnung und erh\u00f6ht das Verst\u00e4ndnis des Benutzers f\u00fcr die zugrunde liegende Datenstruktur. Eine gute Praxis ist es, die Registerkarten mit der Navigationsleiste zu verkn\u00fcpfen. Das bedeutet, dass jede Hauptoption im Men\u00fc automatisch die zugeh\u00f6rige Komponente in ihrem eigenen Ablauf \u00f6ffnet. Wenn dieser Ablauf bereits ge\u00f6ffnet ist, wird er zur\u00fcckgesetzt, indem die bestehende Abfolge von Komponenten geschlossen und eine neue gestartet wird. Das bedeutet, dass die Benutzer in einem realen Szenario nur das Hauptmen\u00fc erreichen, um die Abschnitte zu \u201eaktivieren\u201c, mit denen sie im Multi-Flow arbeiten m\u00fcssen. Sobald sie das getan haben, k\u00f6nnen sie einfach \u00fcber Registerkarten zwischen ihnen wechseln. Und noch etwas: Eine bestimmte Komponente sollte nicht auf einen einzigen Fluss beschr\u00e4nkt sein, so dass wir sehr wohl die gleiche Liste von Dokumenten mehr als einmal in verschiedenen Flows ge\u00f6ffnet haben k\u00f6nnen, gefiltert, um den spezifischen Satz von Dokumenten anzuzeigen, der dort ben\u00f6tigt wird. \n\nAuf technischer Ebene m\u00fcssen wir m\u00f6glicherweise mehrere Funktionalit\u00e4ten implementieren, um ein gutes Benutzererlebnis zu gew\u00e4hrleisten. Abgesehen von der Multi-Flow-Verwaltung ben\u00f6tigen wir z. B. ein cleveres Routing, damit eine bestimmte URL die Anwendung mit einem bereits aktiven Flow \u00f6ffnet. Dadurch wird sichergestellt, dass Links von externen Apps, wie z. B. einem E-Mail-Client, zu einer bestimmten Oberfl\u00e4chenkonfiguration f\u00fchren k\u00f6nnen. Wir k\u00f6nnen auch eine bestimmte Abfolge von Komponenten speichern und sie bei einer anderen Sitzung wiederherstellen. Oder wir lassen den Benutzer einige Komponenten (z. B. eine bestimmte Projekt-Detailansicht) als Favoriten markieren und ein Widget auf der Startseite oder dem Dashboard anzeigen, von wo aus er sie mit einem Klick in ihrem urspr\u00fcnglichen Kontext\/Flow \u00f6ffnen kann. Auf dieser F\u00e4higkeit, Kontexte (Ablaufsequenzen) zu speichern und nicht nur Links zu bestimmten Seiten, lassen sich viele Funktionen aufbauen.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=“on“ _builder_version=“4.4.6″ custom_margin=“||||false|false“ custom_padding=“6vh||||false|false“ border_color_left=“rgba(0,0,0,0)“][et_pb_column type=“4_4″ _builder_version=“4.4.1″][et_pb_text _builder_version=“4.7.7″ text_font=“||||||||“ text_font_size=“1.1em“ text_line_height=“1.6em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“1.5em“ header_2_line_height=“0.9em“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″]
Hinweise zu responsiven Layouts<\/h2>\nEine komplexe Schnittstelle l\u00e4sst sich nicht so einfach an einen kleinen Bildschirm, wie den eines mobilen Ger\u00e4ts, anpassen. Die oben beschriebene Flow-Schnittstelle kann jedoch recht gut auf einem mobilen Ger\u00e4t 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\u00fcssen wir nur einige Touch-Gesten \u00fcbernehmen, wie z. B. das Streichen nach rechts und links zwischen den ge\u00f6ffneten Komponenten, um ein Erlebnis zu erhalten, das einer nativen mobilen App recht nahe kommt. Dar\u00fcber hinaus kann die Flow-Navigationsleiste in ein Dropdown-Men\u00fc umgewandelt und die Multi-Flow-Tab-Leiste darauf beschr\u00e4nkt werden, nur Symbole des zugeh\u00f6rigen Datentyps anzuzeigen (vielleicht wie die in der Seitenleiste). Die Anforderungen an die Reaktionsf\u00e4higkeit sind also kein Hindernis f\u00fcr diese Schnittstelle. [\/et_pb_text][et_pb_image src=“\/\/cdn.berg-software.com\/wp-content\/uploads\/Berg-Software-single-page-UI-02-flow-interface-D.jpg“ alt=“Berg Software – single-page UI – 02 flow interface D“ title_text=“Berg Software – single-page UI – 02 flow interface D“ align=“center“ _builder_version=“4.7.7″ _module_preset=“default“ custom_padding=“20px||20px||false|false“][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=“on“ _builder_version=“4.4.6″ custom_margin=“||||false|false“ custom_padding=“6vh||||false|false“ border_color_left=“rgba(0,0,0,0)“][et_pb_column type=“4_4″ _builder_version=“4.4.1″][et_pb_text _builder_version=“4.7.7″ text_font=“||||||||“ text_font_size=“1.1em“ text_line_height=“1.6em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“1.5em“ header_2_line_height=“0.9em“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″]
Fazit<\/h2>\nWas wir hier vorgestellt haben, sind nur einige der M\u00f6glichkeiten dieses Konzepts. Man kann sich viele weitere M\u00f6glichkeiten ausdenken, um seine Flexibilit\u00e4t in verschiedenen Benutzerszenarien zu nutzen. Nat\u00fcrlich gibt es einige Nachteile, die mit der Implementierung einer solchen Schnittstelle verbunden sind. Auf der einen Seite gibt es eine inh\u00e4rente Komplexit\u00e4t, die verwaltet werden muss, vor allem in Bezug auf die Kommunikation zwischen verschiedenen Schnittstellenkomponenten, die gleichzeitig auf oder au\u00dferhalb des Bildschirms ge\u00f6ffnet sind. Das bedeutet, dass es sich f\u00fcr eine kleine Anwendung oder f\u00fcr eine Anwendung, die Navigationspfade mit begrenzter Tiefe verwendet, m\u00f6glicherweise nicht lohnt, sie zu implementieren. Au\u00dferdem gibt es eine gewisse Lernkurve f\u00fcr den durchschnittlichen Benutzer, der zumindest f\u00fcr den ersten Tag seiner Reise mit gut platzierten Anweisungen und Meldungen unterst\u00fctzt werden muss. Und schlie\u00dflich kann die Schnittstelle, abh\u00e4ngig von der tats\u00e4chlichen Implementierung, eine mittlere bis schwere Belastung f\u00fcr den Browser darstellen (kann eine betr\u00e4chtliche Menge an Arbeitsspeicher ben\u00f6tigen, um zu laufen). Es ist immer noch eine gute Option, vielleicht die beste f\u00fcr einige Datenstrukturen und Benutzerszenarien, um eine effektive Single-Page-Anwendung zu bauen, mit der die Benutzer gerne jeden Tag arbeiten. [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=“1″ _builder_version=“4.4.1″ custom_padding=“|||0px||“ locked=“off“][et_pb_row use_custom_gutter=“on“ gutter_width=“3″ admin_label=“\uff3f“ _builder_version=“4.4.6″ custom_margin=“||||false|false“ custom_padding=“4vh||8vh||false|false“ border_color_left=“rgba(0,0,0,0)“][et_pb_column type=“4_4″ _builder_version=“4.4.6″][et_pb_text _builder_version=“4.7.7″ text_font=“|300|||||||“ text_font_size=“1.12em“ text_line_height=“1.55em“ quote_font=“|700|||||||“ quote_text_align=“left“ quote_font_size=“16px“ header_2_text_color=“#ff6317″ header_2_font_size=“30px“ header_3_font_size=“23px“ header_4_font=“||||||||“ header_4_font_size=“16px“ header_4_line_height=“1.5em“ header_5_font_size=“14px“ custom_margin=“||||false|false“ custom_padding=“||||false|false“ border_color_left=“#ff6317″]
\uff3f<\/h2>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=“1″ _builder_version=“3.22″ background_color=“#eeeeee“ custom_padding=“50px||50px||false|false“ border_color_top=“#ff6317″ global_module=“1642″][et_pb_row column_structure=“1_3,1_3,1_3″ _builder_version=“4.4.1″ custom_padding=“0px|||||“ locked=“off“][et_pb_column type=“1_3″ _builder_version=“4.4.1″][et_pb_social_media_follow _builder_version=“4.4.4″ text_orientation=“left“][et_pb_social_media_follow_network social_network=“linkedin“ url=“https:\/\/www.linkedin.com\/company\/berg-computers-srl\/“ _builder_version=“4.4.4″ background_color=“#007bb6″ follow_button=“off“ url_new_window=“on“]linkedin[\/et_pb_social_media_follow_network] [et_pb_social_media_follow_network social_network=“twitter“ url=“https:\/\/twitter.com\/berg_software“ _builder_version=“4.4.4″ background_color=“#00aced“ follow_button=“off“ url_new_window=“on“]twitter[\/et_pb_social_media_follow_network] [et_pb_social_media_follow_network social_network=“facebook“ url=“https:\/\/www.facebook.com\/bergCOMPUTERS“ _builder_version=“4.4.4″ background_color=“#3b5998″ follow_button=“off“ url_new_window=“on“]facebook[\/et_pb_social_media_follow_network] [et_pb_social_media_follow_network social_network=“instagram“ url=“https:\/\/www.instagram.com\/berg_software\/“ _builder_version=“4.4.4″ background_color=“#ea2c59″ follow_button=“off“ url_new_window=“on“]instagram[\/et_pb_social_media_follow_network][\/et_pb_social_media_follow][\/et_pb_column][et_pb_column type=“1_3″ _builder_version=“4.4.1″][et_pb_post_nav in_same_term=“on“ show_next=“off“ _builder_version=“4.4.1″ title_text_color=“#ff6317″ custom_padding=“|25px|||false|false“][\/et_pb_post_nav][\/et_pb_column][et_pb_column type=“1_3″ _builder_version=“4.4.1″][et_pb_post_nav in_same_term=“on“ show_prev=“off“ _builder_version=“4.4.1″ title_text_color=“#ff6317″ custom_padding=“|||25px|false|false“][\/et_pb_post_nav][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=“1″ admin_label=“CONTACT“ _builder_version=“4.4.1″ background_color=“#d2d2d2″ custom_padding=“75px||75px||false|false“ global_module=“1544″][et_pb_row column_structure=“1_4,3_4″ admin_label=“Service Section Title“ _builder_version=“4.4.1″ custom_padding=“||25px||false|false“ animation_direction=“top“ locked=“off“][et_pb_column type=“1_4″ _builder_version=“3.25″ custom_padding=“|||“ custom_padding__hover=“|||“][\/et_pb_column][et_pb_column type=“3_4″ _builder_version=“3.25″ custom_padding=“|||“ custom_padding__hover=“|||“][et_pb_text _builder_version=“4.4.1″ text_font=“|300|||||||“ text_text_color=“#ffffff“ text_line_height=“1.1em“ header_5_font=“|600|||||||“ header_5_text_color=“#ffffff“ header_5_font_size=“14px“ header_5_line_height=“1.5em“ custom_margin=“||||false|false“]29 Jahre im Gesch\u00e4ft | 2700 Software-Projekte | 760 Kunden | 24 L\u00e4nder<\/p>\n
Wir verwandeln Ideen in Software. Wie lautet Ihre Idee?<\/h5>[\/et_pb_text][et_pb_text admin_label=“Title“ _builder_version=“4.4.6″ header_text_align=“center“ header_2_font=“|300|||||||“ header_2_text_align=“left“ header_2_text_color=“#ff6317″ header_2_font_size=“50px“ header_2_line_height=“0.9em“ custom_margin=“||||false|false“ custom_padding=“25px||25px||false|false“]
Kontakt aufnehmen<\/h2>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=“1_4,3_4″ _builder_version=“4.4.4″][et_pb_column type=“1_4″ _builder_version=“4.4.4″][\/et_pb_column][et_pb_column type=“3_4″ _builder_version=“4.4.4″][et_pb_contact_form email=“contact@bergsoftprod.wpengine.com“ custom_message=“WEBFORM MESSAGE||et_pb_line_break_holder||\uff3f||et_pb_line_break_holder||FROM: %%Name%%||et_pb_line_break_holder||EMAIL: %%Email%%||et_pb_line_break_holder||PHONE NUMBER: %%Phone_number%%||et_pb_line_break_holder||COMPANY: %%Company_name%%||et_pb_line_break_holder||TERMS & CONDITIONS: %%Terms_and_Conditions%%||et_pb_line_break_holder||DATA PRIVACY POLICY: %%Data_Privacy_Policy%%||et_pb_line_break_holder||\uff3f||et_pb_line_break_holder||MESSAGE:||et_pb_line_break_holder||%%Message%%“ success_message=“Thank you for reaching out! Your message was sent. We will get back to you right away.“ _builder_version=“4.4.4″ form_field_background_color=“#d2d2d2″ form_field_text_color=“#ffffff“ form_field_focus_background_color=“#ffffff“ form_field_focus_text_color=“#000000″ title_level=“h2″ title_font=“|300|||||||“ title_text_color=“#ff6317″ title_font_size=“30px“ form_field_line_height=“1.5em“ custom_button=“on“ button_text_size=“14px“ button_text_color=“#ffffff“ button_bg_color=“#ff6317″ button_border_width=“0px“ button_border_radius=“0px“ button_icon=“%%3%%“ button_on_hover=“off“ border_color_all=“#ffffff“ border_width_bottom=“1px“][et_pb_contact_field field_id=“Name“ field_title=“Name *“ fullwidth_field=“on“ _builder_version=“4.4.4″ form_field_background_color=“#d2d2d2″ form_field_text_color=“#ffffff“ form_field_focus_background_color=“#ffffff“ form_field_focus_text_color=“#000000″ border_width_bottom=“1px“ button_text_size__hover_enabled=“off“ button_one_text_size__hover_enabled=“off“ button_two_text_size__hover_enabled=“off“ button_text_color__hover_enabled=“off“ button_one_text_color__hover_enabled=“off“ button_two_text_color__hover_enabled=“off“ button_border_width__hover_enabled=“off“ button_one_border_width__hover_enabled=“off“ button_two_border_width__hover_enabled=“off“ button_border_color__hover_enabled=“off“ button_one_border_color__hover_enabled=“off“ button_two_border_color__hover_enabled=“off“ button_border_radius__hover_enabled=“off“ button_one_border_radius__hover_enabled=“off“ button_two_border_radius__hover_enabled=“off“ button_letter_spacing__hover_enabled=“off“ button_one_letter_spacing__hover_enabled=“off“ button_two_letter_spacing__hover_enabled=“off“ button_bg_color__hover_enabled=“off“ button_one_bg_color__hover_enabled=“off“ button_two_bg_color__hover_enabled=“off“][\/et_pb_contact_field][et_pb_contact_field field_id=“Email“ field_title=“E-Mail-Adresse *“ field_type=“email“ fullwidth_field=“on“ _builder_version=“4.4.4″ button_text_size__hover_enabled=“off“ button_one_text_size__hover_enabled=“off“ button_two_text_size__hover_enabled=“off“ button_text_color__hover_enabled=“off“ button_one_text_color__hover_enabled=“off“ button_two_text_color__hover_enabled=“off“ button_border_width__hover_enabled=“off“ button_one_border_width__hover_enabled=“off“ button_two_border_width__hover_enabled=“off“ button_border_color__hover_enabled=“off“ button_one_border_color__hover_enabled=“off“ button_two_border_color__hover_enabled=“off“ button_border_radius__hover_enabled=“off“ button_one_border_radius__hover_enabled=“off“ button_two_border_radius__hover_enabled=“off“ button_letter_spacing__hover_enabled=“off“ button_one_letter_spacing__hover_enabled=“off“ button_two_letter_spacing__hover_enabled=“off“ button_bg_color__hover_enabled=“off“ button_one_bg_color__hover_enabled=“off“ button_two_bg_color__hover_enabled=“off“][\/et_pb_contact_field][et_pb_contact_field field_id=“Phone_number“ field_title=“Telefonnummer“ required_mark=“off“ fullwidth_field=“on“ _builder_version=“4.4.4″][\/et_pb_contact_field][et_pb_contact_field field_id=“Company_name“ field_title=“Name des Unternehmens“ fullwidth_field=“on“ _builder_version=“4.4.4″][\/et_pb_contact_field][et_pb_contact_field field_id=“Message“ field_title=“Nachricht *“ field_type=“text“ fullwidth_field=“on“ _builder_version=“4.4.4″ form_field_background_color=“#d2d2d2″ form_field_focus_background_color=“#ffffff“ form_field_focus_text_color=“#000000″ border_width_bottom=“1px“ button_text_size__hover_enabled=“off“ button_one_text_size__hover_enabled=“off“ button_two_text_size__hover_enabled=“off“ button_text_color__hover_enabled=“off“ button_one_text_color__hover_enabled=“off“ button_two_text_color__hover_enabled=“off“ button_border_width__hover_enabled=“off“ button_one_border_width__hover_enabled=“off“ button_two_border_width__hover_enabled=“off“ button_border_color__hover_enabled=“off“ button_one_border_color__hover_enabled=“off“ button_two_border_color__hover_enabled=“off“ button_border_radius__hover_enabled=“off“ button_one_border_radius__hover_enabled=“off“ button_two_border_radius__hover_enabled=“off“ button_letter_spacing__hover_enabled=“off“ button_one_letter_spacing__hover_enabled=“off“ button_two_letter_spacing__hover_enabled=“off“ button_bg_color__hover_enabled=“off“ button_one_bg_color__hover_enabled=“off“ button_two_bg_color__hover_enabled=“off“][\/et_pb_contact_field][et_pb_contact_field field_id=“Terms_and_Conditions“ field_title=“ “ field_type=“checkbox“ checkbox_options=“%91{%22value%22:%22Ich habe die AGB gelesen und akzeptiert%22,%22checked%22:0,%22dragID%22:-1}%93″ fullwidth_field=“on“ _builder_version=“4.4.4″][\/et_pb_contact_field][et_pb_contact_field field_id=“Data_Privacy_Policy“ field_title=“ “ field_type=“checkbox“ checkbox_options=“%91{%22value%22:%22Ich habe die Datenschutzrichtlinie gelesen und akzeptiert%22,%22checked%22:0,%22dragID%22:-1}%93″ fullwidth_field=“on“ _builder_version=“4.4.4″][\/et_pb_contact_field][\/et_pb_contact_form][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"