Empfehlungen zur Optimierung des Layouts

Gilt für diese Empfehlung bezüglich der Checkliste für die Well-Architected Erfahrungsoptimierung in Power Platform:

In dieser Anleitung werden Empfehlungen zum Entwurf von Bildschirmlayouts beschrieben, in denen leicht navigiert werden kann und die sich nahtlos an verschiedene Geräte anpassen. Dieser Ansatz stellt sicher, dass die Benutzer unabhängig vom verwendeten Gerät ein konsistentes und optimale Anzeigeerfahrung haben.

Definitionen

Wichtige Designstrategien

Dynamische Layouts bieten eine flexible und effiziente Benutzererfahrung bei unterschiedlichen Fenstergrößen. Sie passen sich an, indem sie Inhalte skalieren, Elemente neu anordnen und Text und Bilder selektiv anzeigen. Verantwortungsvolle Layouts erfüllen die Anforderungen der Benutzer unabhängig von ihrer Bildschirmgröße.

Bestimmen Sie einen konsistenten App-Rahmen

Der Anwendungsrahmen besteht aus einer Reihe von Steuerelementen, die durchgehend auf jedem Bildschirm verfügbar sind. Er besteht aus drei Hauptunterkomponenten: einer Kopfzeile, einer Navigation und einem Inhaltsbereich. Einfache Apps haben die Flexibilität, die Header-Komponente zu verwenden, während anspruchsvollere Apps häufig die Seitennavigation verwenden, um mehrere Seiten zu ermöglichen. Unterkomponenten sind anpassbar. Sie können beispielsweise eine globale Suche in der Kopfzeile integrieren oder Elemente in der Seitennavigation entsprechend den Anforderungen Ihrer App gruppieren.

Die drei Hauptunterkomponenten des App-Rahmens sind:

1. Die Kopfzeile ist eine Kernkomponente, die Teil jeder internen Anwendung sein soll. Sie besteht aus Unterkomponenten, die Benutzern Zugriff auf systemweite Funktionen gewähren, ihnen bei der Orientierung in der Benutzeroberfläche helfen und für Konsistenz in allen Erfahrungen sorgen. Sie wird oben im App-Rahmen angezeigt und sollte auf allen Seiten der App bestehen bleiben. Sie kann optional globale Befehle Suche, Einstellungen, Benachrichtigungen, Feedback, Profil oder Hilfe hosten. Der Name der App sollte immer angezeigt werden und idealerweise auch als anklickbarer Link zur Start- oder Landingpage dienen. Die Kopfzeile sollte reagieren können und Befehle sollten in die Überlaufsteuerung in Ansichtsfenstern mit 600 Pixeln oder weniger verschoben werden. Die Breite der Sucheingabe ist bei 1023 Pixeln und darunter ebenfalls reaktionsfähig.

2. Die Navigation ist ein System aus Steuerelementen, die zusammenarbeiten, um Benutzenden die Suche nach Informationen und die Durchführung von Aufgaben zu erleichtern. Sie hilft Benutzern, von Abschnitt zu Abschnitt einer Anwendung zu wechseln. Sie ist hierarchisch keiner Seite und keinem Abschnitt zugeordnet, sondern steht über allen anderen Inhalten. Sie ist immer vorhanden und kann in einen reduzierten Zustand (auch als Schienenzustand bezeichnet) minimiert werden, um zusätzlichen Platz für Seiteninhalte freizugeben. Bei kleineren Fenstergrößen kann sie in ein Flyout-Menü minimiert werden. Zu den gebräuchlichsten Navigationsformen gehören die Top-Navigation und die Seitennavigation. Verwenden Sie nicht beides gleichzeitig.

3. Der Inhaltsbereich enthält den Fokus des Bildschirms. Die Größe des Browserfensters beeinflusst den Inhaltsrahmen und den im Hauptinhaltsbereich verfügbaren Platz. Dieser Rahmen passt sich basierend auf dem Haltepunkt und dem entsprechenden Reaktionsverhalten jeder Komponente an. Weitere Informationen finden Sie unter Eine Haltepunktmatrix erstellen.

   Der Inhaltsbereich kann optional mehrere Unterbereiche enthalten, die für eine konsistente Platzierung der Elemente zur Verfügung stehen, beispielsweise einen Seitenkopf, Inline-Seitenbereiche oder Bedienfelder, die den Inhalt überlagern.

Das Festhalten an einer konsistenten Designsprache mit Farbschemata, Typografie und Layoutstruktur hilft Benutzern, verschiedene Elemente schnell zu identifizieren und mit ihnen zu interagieren, ohne dass es zu Verwirrung kommt. Je konsistenter ein App-Rahmenmuster in allen internen Geschäftsanwendungen verwendet wird, desto stärker wird die Erinnerung oder das mentale Modell des Benutzers. Durch die Ausrichtung an Industriestandards oder gängigen Plattformmustern wird dieser Effekt noch verstärkt.

Nachdem der App-Frame festgelegt wurde, befindet sich das Layout jedes Bildschirms innerhalb des Inhaltsbereichs des App-Frames.

Inhaltsbereich mit Bedacht verwenden

Benutzer wünschen sich eine nahtlose Erfahrung, bei der Informationen leicht zugänglich, Texte leicht lesbar und die Ästhetik die Benutzerfreundlichkeit verbessert statt beeinträchtigt. Priorisieren Sie die anfängliche Sichtbarkeit wichtiger Informationen, stellen Sie die Lesbarkeit über alle Spalten hinweg sicher und harmonisieren Sie Designelemente für eine ansprechende Ästhetik.

Stellen Sie sicher, dass wichtige Informationen beim Öffnen des Bildschirms sofort sichtbar sind, ohne dass Sie scrollen müssen. Priorisieren Sie die Anzeige wichtiger Informationen wie Navigationsoptionen, wichtiger Inhalte und umsetzbarer Elemente oben auf dem Bildschirm. Es ist eine ständige Herausforderung, ein Gleichgewicht zwischen der Anzeige einer ausreichenden Anzahl von Elementen und der Bereitstellung detaillierter Informationen zu jedem Element zu finden. Obwohl es verlockend sein kann, alle möglichen Informationen gleich in der ersten Ansicht bereitzustellen, besteht die Gefahr, dass zu viele Informationen den Benutzer überfordern und die Bedeutung wichtiger Elemente abschwächen. Erwägen Sie den Einsatz prägnanter Zusammenfassungen oder Vorschauen, die einen Einblick in ausführlichere Inhalte bieten und die Benutzer dazu anregen, tiefer in die Materie einzutauchen. Dashboards sind für diesen Zweck optimiert, um große Datenmengen zu visualisieren.

Integrieren Sie mehrere Spalten, Abschnitte oder Gruppierungen, um Inhalte logisch zu organisieren und den Platz zu maximieren. Achten Sie penibel auf die Spaltenbreite und stellen Sie sicher, dass der Text ohne übermäßige Belastung lesbar bleibt. Vermeiden Sie zu schmale Spalten, die den Benutzer zum ständigen horizontalen Scrollen zwingen und so den Interaktionsfluss stören. Umgekehrt können übermäßig breite Spalten die Lesbarkeit beeinträchtigen, sodass Benutzer den Zeilen über längere Distanzen folgen müssen. Streben Sie ein Gleichgewicht an, das bequemes Lesen ermöglicht und gleichzeitig den verfügbaren Platz effizient nutzt.

Passen Sie die Größe und Position visueller Elemente entsprechend an, um eine optisch ansprechende und ausgewogene Benutzeroberfläche zu erstellen. Richten Sie Beschriftungen an den entsprechenden Bildern oder Titeln aus, achten Sie auf einen einheitlichen Abstand zwischen den Elementen und halten Sie sich an eine Hierarchie basierend auf den Benutzeranforderungen. Entfernen Sie unnötige Verzierungen und verteilen Sie die Pixel mit Bedacht auf die wichtigsten Elemente. Priorisieren und betonen Sie Inhalte und Navigationselemente, insbesondere bei navigationsintensiven Apps oder Homepages, und vermeiden Sie überflüssige Verzierungen, die die Benutzerfreundlichkeit beeinträchtigen.

Um Elemente einheitlich anzuordnen, kann ein zugrunde liegendes Raster hilfreich sein. Das gewählte Rasterverhalten sollte in allen Inhaltsbereichen des Bildschirms in der App konsistent sein und kann auch auf Komponentenebene, z. B. Karten oder Seitenbereiche, angewendet werden. Der in Webanwendungen am häufigsten verwendete Rastertyp ist das Spaltenraster. Für die Implementierung reaktionsfähiger Bildschirme wird ein fließendes (oder gestrecktes) Rasterverhalten empfohlen.

Etablierte Layouts und Gruppierungsmuster verwenden

Verwenden Sie allgemein anerkannte Strukturen und Anordnungen zum Organisieren von Inhalten und Elementen innerhalb einer Benutzeroberfläche. Diese Layouts und Muster wurden im Laufe der Zeit verfeinert und haben sich als effektiv erwiesen, sodass sie für Benutzer vertraut und intuitiv sind und sich gleichzeitig leicht adaptive Muster implementieren lassen. Sobald die Kernszenarien und -elemente identifiziert sind, ordnen Sie sie jeweils einem etablierten Layout zu, das die beste Interaktion bietet. Priorisieren Sie Inhalte und Funktionen, die für die Aufgabenerledigung wichtig sind. Entscheiden Sie, welche Elemente auf dem Bildschirm immer sichtbar und zugänglich sein sollen und welche ausgeblendet oder über andere Menüs oder Aktionen aufgerufen werden können.

Die folgende Liste ist zwar nicht vollständig, beschreibt aber etablierte Layouts, die üblicherweise für Geschäfts- oder Produktivitätsanwendungen verwendet werden. Alle können innerhalb des Hauptinhaltsbereichs platziert werden.

Startbildschirm

Der Startbildschirm dient als Einstiegspunkt in eine Anwendung und bietet Benutzenden einen Überblick über die Angebote oder Funktionen der App. Es zielt in der Regel darauf ab, die Aufmerksamkeit der Besucher zu erregen und zu einer bestimmten Aktion zu ermutigen, z. B. eine erstmalige Aufgabe zu erledigen oder weitere Inhalte zu erkunden. Er enthält häufig „Hero“-Bilder und übersichtliche Navigationsoptionen.

Es eignet sich ideal zur Begrüßung von Benutzern, schnellen Zugriff auf wichtige Funktionen, Navigationsoptionen oder Handlungsaufforderungen zu bieten und den Ton für die App-Erfahrung anzugeben. Um Benutzer effektiv anzuleiten, legen Sie Wert auf Klarheit, Einfachheit und intuitive Navigation.

Übersicht

Ein Dashboard ist ein zentraler Hub innerhalb einer Anwendung, der Benutzern einen umfassenden Überblick über relevante Daten oder Informationen bietet. Es besteht häufig aus anpassbaren Widgets oder Modulen, mit denen Benutzer bestimmte Kennzahlen überwachen oder Aktionen ausführen können.

Dashboards eignen sich für Anwendungen mit komplexen Datensätzen oder vielschichtigen Funktionen und ermöglichen es Benutzern, auf einen Blick den Fortschritt zu verfolgen, Trends zu analysieren und fundierte Entscheidungen zu treffen. Sie sind besonders nützlich in Analyseplattformen, Projektmanagement-Tools und Finanzmanagement-Apps.

Form

Ein Formular ist ein strukturiertes Layout, das die Dateneingabe durch Benutzer erleichtert und in der Regel aus Feldern zur Eingabe verschiedener Arten von Informationen wie Text, Zahlen, Datumsangaben und Auswahlmöglichkeiten besteht. Formulare sind für die Erfassung von Benutzereingaben, die Verarbeitung von Transaktionen und die Erleichterung der Interaktion innerhalb von Anwendungen von entscheidender Bedeutung.

Sie werden häufig in Registrierungsabläufen, Checkout-Prozessen, Dateneingabeaufgaben und allen Szenarien eingesetzt, die Benutzereingaben oder Feedback erfordern.

Entitäts-/Profilansicht

In der Entitäts- oder Profilansicht werden detaillierte Informationen zu einer bestimmten Entität angezeigt, z. B. zu einem Benutzerprofil, einer Produktliste oder einem Inhaltselement. Es enthält in der Regel beschreibenden Text, Multimediaelemente und relevante Aktionen oder Interaktionen.

Sie eignen sich gut für die Anzeige detaillierter Informationen zu Elementen innerhalb einer Anwendung. Sie bieten Benutzern tiefgehende Einblicke, erleichtern die Entscheidungsfindung und unterstützen die Interaktion mit bestimmten Entitäten wie Benutzerprofilen in Social-Networking-Apps oder Produktlisten auf E-Commerce-Plattformen.

Die Seite „Liste“

Eine Liste oder Tabelle zeigt eine Sammlung von Elementen oder Entitäten in einem strukturierten Format an, das häufig in einem linearen oder Rasterlayout dargestellt wird. Es enthält in der Regel kurze Zusammenfassungen oder Vorschauen der einzelnen Elemente sowie Navigationssteuerelemente zum Durchsuchen oder Filtern.

Listenseiten eignen sich gut für die Darstellung großer Inhalts- oder Datenmengen in einem übersichtlichen Format, sodass Benutzer effizient scannen, suchen und navigieren können. Wenn Aktionen für bestimmte Zeilen aktiviert sind, sollte der Vorgang klar sein. Listenseiten werden häufig in Content-Management-Systemen, Verzeichnislisten, Suchergebnissen und Newsfeeds verwendet.

Mini-Übersicht (geteilter Bildschirm)

Eine Mini-Überprüfung oder ein geteilter Bildschirm teilt die Benutzeroberfläche in zwei unterschiedliche Abschnitte auf, wobei auf der linken Seite eine Liste und auf der rechten Seite eine Elementansicht angezeigt wird. Die Liste enthält in der Regel eine Sammlung von Elementen, während die Elementansicht detaillierte Informationen über das ausgewählte Element in der Liste bereitstellt.

Dieses Layout ist besonders effektiv in Szenarien, in denen Benutzer schnell durch eine Liste von Elementen blättern und gleichzeitig detaillierte Informationen zu jedem Element anzeigen müssen, beispielsweise beim Ausführen von Massenvorgängen. Produktkataloge, Dokumentenverwaltungssysteme, E-Mail- oder Kommunikationsclients und Tools zur Aufgabenverwaltung (z. B. Azure Dev Ops-Abfrageanzeige) sind Szenarien, die normalerweise diesem Muster entsprechen.

Assistent

Ein Assistent führt Benutzer durch eine Reihe sequenzieller Schritte oder Aufgaben, in der Regel linear, um einen komplexen Prozess abzuschließen oder ein bestimmtes Ziel zu erreichen. Er enthält häufig Fortschrittsanzeigen, Eingabeaufforderungen und Validierungsprüfungen. Assistenten sind hilfreich, um komplexe Prozesse zu vereinfachen, die kognitive Überlastung zu verringern und Benutzer durch unbekannte Aufgaben oder Arbeitsabläufe zu führen. Sie werden häufig in Onboarding-Flows, Einrichtungsprozessen, mehrstufigen Formularen und aufgabenbasierten Interaktionen wie der Konfiguration komplexer Einstellungen oder Transaktionen verwendet.

Passen Sie das Standardlayout an Ihre spezifischen Anforderungen an und erweitern Sie es. Dieser Vorgang kann das Hinzufügen oder Entfernen von Elementen, das Anpassen der Größe und Positionierung von Elementen sowie das Anpassen von Stilen zur Anpassung an die Markenidentität oder visuelle Designrichtlinien umfassen. Experimentieren Sie mit verschiedenen Konfigurationen und Variationen des Standardlayouts, um die effektivste Anordnung für Inhalte und die allgemeine Benutzererfahrung zu ermittlen.

Design-Layouts für alle Geräte

Layouts sind die Gesamtheit festgelegter Regeln und einer gezielten Organisation des Inhalts. Der Schlüssel liegt darin, Ihre Inhalte in durchdachte Strukturen zu bringen. Damit sie jedoch über Plattformen und Bildschirmgrößen hinweg in einer klaren Hierarchie fließen, bedarf es einer Skalierungslogik. Sowohl das adaptive als auch das responsive Design können diese Herausforderung individuell bewältigen. In manchen Fällen ist ein Mix aus adaptivem und responsivem Design die richtige Wahl.

Dynamisches Design verwendet nur ein Layout, bei dem der Inhalt fließend ist und sich an wechselnde Formatgrößen anpassen kann. Bei dieser Entwurfstechnik werden Medienabfragen verwendet, um die Eigenschaften eines bestimmten Geräts zu prüfen und den Inhalt entsprechend darzustellen. Mit dynamischem Design können Sie eine Funktion einmal erstellen und dafür sorgen, dass sie auf allen Bildschirmgrößen effektiv funktioniert.

Ein adaptives Layout ändert sich vollständig, je nachdem, in welchem ​​Format es präsentiert wird. Adaptives Design verfügt über mehrere feste Layoutgrößen und veranlasst den Browser, basierend auf dem verfügbaren Platz ein bestimmtes Layout zu laden. Mit adaptivem Design erstellte Websites verwenden Medienabfragen, um Haltepunkte zu erkennen, ähnlich wie beim dynamischen Design. Sie verwenden außerdem zusätzliche Markierungen basierend auf den Funktionen des Geräts. Dieser Vorgang wird als „progressive Verbesserung“ bezeichnet.

Neupositionierung

Ändern Sie die Position des Seitenelements.

Halten Sie Ihren Inhalt übersichtlich, lesbar und ausgewogen, indem Sie die Komposition mit zunehmender Fenstergröße optimieren. Sie können beispielsweise vertikal gestapelte Elemente in einem mobilen Ansichtsfenster in größeren Ansichtsfenstern horizontal neu positionieren. Diese Änderung folgt einer natürlichen Lesereihenfolge von links nach rechts, sorgt für Ausgewogenheit im Design und behält den visuellen Fokus auf die Schlüsselelemente auf der Seite bei.

Größe ändern

Passen Sie die Größe und Ränder der Seitenelemente an.

Passen Sie die Größe der Seitenelemente an, um eineumfassende Benutzererfahrung zu erzielen, indem Sie oben im Fenster mehr Inhalt anzeigen und so die Notwendigkeit des vertikalen Scrollens verringern. Passen Sie die Seitenränder an, um dem Layout Leerraum und Ausgewogenheit hinzuzufügen. Dadurch kann der Inhalt atmen und die visuelle Attraktivität des Designs wird verbessert. Eine „Hero“-Komponente kann sich beispielsweise auf die gesamte Breite des Fensters ausdehnen, um mehr vom Hintergrundbild anzuzeigen. Der Inhalt unter dem Bild kann erweitert werden, verwendet jedoch andere Ränder, um Abwechslung in das Layout zu bringen und die visuelle Hierarchie zu definieren.

Dynamischer Umbruch

Optimieren Sie den Flow der Seitenelemente.

Passen Sie die Seitenelemente so an, dass sie unter Berücksichtigung der Fenstergröße und -ausrichtung vollständig angezeigt werden, indem Sie den Inhalt neu anordnen. Beispielsweise kann eine einzelne Inhaltsspalte in einem kleineren Fenster in einem größeren Fenster dynamisch umgebrochen werden, um zwei Textspalten anzuzeigen. Mit dieser Technik können mehr Inhalte in dem Bereich angezeigt werden, der für den Benutzer auf den ersten Blick sichtbar ist.

Ein-/ausblenden

Optimieren Sie den Inhalt für die Fenstergröße und -ausrichtung.

Blenden Sie Seitenelemente ein oder aus, um den Inhalt an die Fenstergröße und -ausrichtung anzupassen. Diese dynamische Technik passt die Informationsmenge an den Anzeigekontext an. Beispielsweise zeigen Kategorien auf einem kleinen Bildschirm möglicherweise nur begrenzte Metadaten wie ein Bild, einen Titel und einen Link an, sodass andere Informationen sichtbar sind, die dem Benutzer die Konzentration erleichtern. Auf einem größeren Bildschirm können Kategorien zusätzliche Metadaten wie eine Person, ein Datum und eine Kurzbeschreibung anzeigen, während sie immer noch in das Ansichtsfenster passen.

Neue Architektur erstellen

Teilen Sie Seitenelemente und Inhalte auf oder reduzieren Sie sie, um den Fokus auf wichtige Informationen und Aktionen zu legen.

Dieser Ansatz ähnelt der Vorgehensweise der „schrittweisen Offenlegung“ in Ihrem Design, jedoch für unterschiedliche Fenstergrößen und -ausrichtungen. Durch Erweitern des Fensters kann beispielsweise neben den Details eine Liste von Elementen angezeigt werden. Durch diese visuelle Verknüpfung der Inhalte können Benutzer ganz einfach ein anderes Element auswählen. Auf einem kleineren Bildschirm liegt der Fokus weiterhin auf der Anzeige wichtiger Informationen.

Eine Haltepunktmatrix erstellen

Eine Haltepunktmatrix dient als grafische Darstellung des reaktionsfähigen oder adaptiven Verhaltens des Designs einer Anwendung bei unterschiedlichen Bildschirmgrößen und -ausrichtungen. Es stellt normalerweise ein strukturiertes Raster oder Layout dar, das die Reaktion des Designs an verschiedenen Haltepunkten detailliert beschreibt. Jedes Segment entspricht einer bestimmten Bildschirmbreite und bietet Einblicke in die Struktur, das Layout und die Funktionalität des Designs. Eine Haltepunktmatrix umfasst Überlegungen zu Bildschirmbreite, Ansichtsfensterausrichtung, Designelementen, Layoutstruktur, Inhaltspräsentation, Navigation, Medien und interaktiven Komponenten, um zu veranschaulichen, wie das Design einer Website oder App auf unterschiedliche Bildschirmgrößen und -ausrichtungen reagiert. Dieser Ansatz hilft nicht nur dabei, das Design jedes Bildschirms fertigzustellen, sondern erleichtert auch die Implementierung, wenn Änderungen der Eigenschaften wichtiger Komponenten explizit verfolgt und gut kommuniziert werden.

Umsetzung in Power Platform

Layouts modellgesteuerter App-Formulare werden mit Power Apps Studio konfiguriert. Der Formulardesigner ermöglicht es Erstellern, Elemente zu einer Rasterstruktur hinzuzufügen, wodurch Formularseiten von Natur aus reaktionsfähig sind. Eingebettete benutzerdefinierte Komponenten wie benutzerdefinierte Seiten, eingebettete Canvas-Komponenten und Power Apps Component Framework-Codekomponenten müssen in ihren Implementierungen ein dynamisches Verhalten integrieren. Beispielsweise müssen benutzerdefinierte Seiten ein dynamisches Verhalten auf die gleiche Weise wie eine reine Canvas-App implementieren, um ordnungsgemäß zu funktionieren.

Canvas-Apps erfordern eine explizite Konfiguration für jede Komponente, um dynamisches Verhalten zu implementieren und so mehr Kontrolle über die Erfahrung zu ermöglichen. Die Bildschirmgrößen werden in der App-Definition festgelegt, auf die verwiesen werden kann, um Position, Verhalten, Sichtbarkeit und andere relevante Eigenschaften zu bestimmen.

Verwandte Informationen

Fließendes Layout

Umgebungsoptimierungsprüfliste