Empfehlungen für die Optimierung der Benutzerwahrnehmung und der Ästhetik
Gilt für diese Empfehlung bezüglich der Checkliste für die Well-Architected Erfahrungsoptimierung in Power Platform:
| XO:07 | Wenden Sie klassische Designprinzipien auf visuelle Elemente wie Farbschemata, Typografie und Layout an. Bemühen Sie sich um eine fokussierte, ausgewogene und intuitive visuelle Hierarchie, die die Aufmerksamkeit der Benutzer auf wichtige Elemente und Aktionen lenkt. |
|---|
Dieser Leitfaden enthält Empfehlungen für universelle Muster für visuelles Design, die sich auf die Benutzerwahrnehmung auswirken und die Zufriedenheit mit einer Anwendung und deren Akzeptanz erheblich beeinflussen können. Visuelle Elemente dienen als grundlegende Bausteine zur Schaffung von Erlebnissen. Visuelle Prinzipien, die der natürlichen menschlichen Wahrnehmung und Verarbeitung von Informationen entsprechen, bieten strukturierte Methoden zur Auswahl und Anordnung visueller Elemente für die Erstellung einer effektiven und ansprechenden Anwendung.
Wichtige Designstrategien
Umfangreiche Untersuchungen zur menschlichen Wahrnehmung von visuellem Design zeigen, dass Benutzer visuelle Elemente nicht isoliert betrachten. Stattdessen nehmen sie sie im Verhältnis zu anderen Elementen und dem Kontext wahr, in dem sie auftreten. Diese Beziehungen beeinflussen die Benutzerwahrnehmung, lenken die Aufmerksamkeit auf bestimmte Bereiche, wecken Emotionen, fördern das Verständnis, verbessern die Ästhetik und stärken die Markenidentität. Durch eine sorgfältige Auswahl und Anordnung visueller Elemente können ansprechende, einprägsame und effektive Benutzererlebnisse geschaffen werden, die bei der Zielgruppe Anklang finden.
Ästhetik-Verwendbarkeit-Effekt
Der Ästhetik-Verwendbarkeit-Effekt bezeichnet die Tendenz, attraktive Produkte als besser verwendbar zu betrachten. Innerhalb von etwa 50 Millisekunden bilden sich Benutzer eine erste Meinung über eine Anwendung. Dieser erste Eindruck wird von verschiedenen Faktoren beeinflusst, darunter Aufbau, Farben, Abstand, Symmetrie, Textmenge und Schriftart. Ein positiver erster Eindruck kann die allgemeine Benutzerzufriedenheit erhöhen. Untersuchungen zeigen, dass Benutzer kleinere Probleme in der Verwendbarkeit eher verzeihen, wenn ihnen die Benutzeroberfläche optisch ansprechend erscheint. Darüber hinaus kann die Designqualität als Indikator für Glaubwürdigkeit dienen.
Balance und Gleichgewicht
Die visuelle Balance beschreibt ein Gefühl von Gleichgewicht und Harmonie in der visuellen Wahrnehmung. Sie hilft Benutzern, visuelle Informationen effizienter zu verarbeiten und zu organisieren, indem sie die kognitive Belastung reduziert. Ausgewogene Kompositionen werden im Allgemeinen als angenehmer und leichter verständlich empfunden, sodass Benutzer ihre Aufmerksamkeit besser fokussieren und visuelle Reize leichter verarbeiten können. Dieser kognitive Aspekt der visuellen Balance unterstreicht ihre Bedeutung für die Erleichterung einer klaren Kommunikation und die Verbesserung des gesamten Benutzererlebnisses.
Eine Komposition ist ausgewogen, wenn alle Elemente im optischen Gleichgewicht sind. Die mathematische Zuordnung bedarf oft einer Anpassung. Einige der Elemente, die sich auf die visuelle Gewichtung auswirken, sind Größe, Farbe, Dichte und Weißraum.
Größe: Größere Elemente haben in der Regel mehr visuelles Gewicht als kleinere. Um ein Gleichgewicht zu erreichen, können größere Elemente ausgeglichen werden, indem sie mit kleineren Elementen gruppiert werden oder ihre Platzierung innerhalb des Layouts angepasst wird.
Farbe: Helle oder intensive Farben können mehr Aufmerksamkeit erregen und schwerer wirken als gedämpfte oder neutrale Farben. Beim Ausbalancieren von Farben geht es darum, diese gleichmäßig auf der Benutzeroberfläche zu verteilen oder Komplementärfarben zu verwenden, um eine visuelle Harmonie zu erzeugen.
Dichte: Die Dichte von Elementen gibt an, wie dicht sie in einem bestimmten Raum gepackt sind. Beim Ausbalancieren der Dichte muss sichergestellt werden, dass die Elemente gleichmäßig in der Benutzeroberfläche verteilt sind, um Überfüllung oder spärliche Bereiche zu vermeiden.
Leerraum: Leerraum wird auch als negativer Raum bezeichnet und bezieht sich auf die leeren Bereiche zwischen Elementen. Leerraum sorgt für visuellen Freiraum und kann die Komposition durch Hervorhebung und Betonung bestimmter Elemente ins Gleichgewicht bringen.
Eine ausgewogene Komposition ist die Summe visueller Kräfte zwischen den Elementen.
Das Ausbalancieren des Layouts ist eine der schwierigsten Aufgaben, da es nicht einfach gemessen werden kann.
Color
Farbtöne, Farbnuancen, Schattierungen und Töne können Bedeutung vermitteln, Emotionen hervorrufen und ästhetisch ansprechend sein. Farbe spielt eine entscheidende Rolle bei der Lenkung der Aufmerksamkeit des Benutzers, beim Aufbau einer Hierarchie, bei der Übermittlung von Informationen und bei der Verbesserung der Benutzerfreundlichkeit. Es gibt mehrere Gründe, warum ein durchdachtes Farbdesign in einer Benutzeroberfläche die Benutzer so beeinflussen kann, wie Sie es wünschen:
Aufmerksamkeit und Wahrnehmung. Bestimmte Farben fallen stärker auf als andere, sodass Designer die Aufmerksamkeit des Betrachters auf bestimmte Elemente lenken können. Farbkontraste können die Lesbarkeit verbessern und zwischen verschiedenen Komponenten unterscheiden, wodurch eine schnelle Verarbeitung von Informationen erleichtert wird.
Emotionale Reaktion. Farben wecken psychologische Assoziationen, die Emotionen und Stimmungen hervorrufen. Warme Farben wie Rot und Orange könneen ein Gefühl von Energie und Aufregung erzeugen, während kühle Farben wie Blau und Grün Ruhe und Gelassenheit ausstrahlen können. Sie können gewünschte Reaktionen hervorrufen, um Benutzer in die Richtung der beabsichtigten Erfahrung zu beeinflussen.
Markenidentität. Die einheitliche Verwendung von Farben in allen Markenmaterialien trägt zum Aufbau einer starken visuellen Identität bei und fördert die Wiedererkennung der Marke. Benutzer assoziieren bestimmte Farben oft mit bestimmten Marken und verknüpfen die Erfahrungen mit Markentreue und -vertrauen.
Visuelle Hierarchie. Mit Farbe können Sie eine visuelle Hierarchie erstellen und Informationen organisieren. Weisen Sie Elementen je nach Wichtigkeit oder Kategorie unterschiedliche Farben zu, um eine klare Hierarchie zu schaffen und die Navigation und das Verständnis zu erleichtern.
Nähe
Näher beieinander platzierte Elemente scheinen stärker miteinander verbunden zu sein. Achten Sie beim Anordnen von Elementen darauf, dass es einen spürbaren Unterschied im Abstand zwischen Elementen gibt, die eng miteinander verwandt sind, und solchen, die nicht verwandt sind.
Dieses Gestaltungsprinzip geht davon aus, dass die räumliche Distanz zwischen visuellen Elementen Einfluss darauf hat, wie sie im Geiste wahrgenommen und organisiert werden, und unterstreicht die Bedeutung des Prinzips für die effiziente Verarbeitung und das Verständnis visueller Reize.
Gruppieren Sie miteinander verbundene Elemente, die funktional ähnlich sind oder zur selben hierarchischen Kategorie gehören. Beispielsweise sollten Schaltflächen, die ähnliche Aktionen oder Optionen in einem Dropdown-Menü ausführen, nahe beieinander gruppiert werden, um ihre Zusammengehörigkeit deutlich zu machen. In einer Navigationsleiste suggerieren eng beieinander liegende Menüelemente einen zusammenhängenden Satz von Optionen, während ein größerer Abstand zwischen den Menükategorien diese optisch voneinander abgrenzt. Formularelemente, die miteinander in Verbindung stehen, sollten gruppiert werden, z. B. Adressfelder in einem Abschnitt namens „Adresse“.
Verbessern Sie die Lesbarkeit textlastiger Benutzeroberflächen, indem Sie den Abstand zwischen Absätzen, Sätzen und Wörtern anpassen. Ein geringerer Absatzabstand deutet auf einen logischen Zusammenhang oder eine Weiterführung des Gedankens hin, während ein größerer Abstand einen Übergang oder einen inhaltlichen Bruch markiert. Diese Technik fördert das effiziente Verständnis von Textinformationen.
Stellen Sie sicher, dass es einen deutlichen Unterschied im Abstand zwischen verwandten und nicht verwandten Elementen gibt, um Verwirrung zu vermeiden. Mithilfe einer Abstandsrampe können Sie stets den passenden Abstand ermitteln, der je nach Elementgröße erforderlich ist.
Der Kreis auf der linken Seite steht in einem engeren Zusammenhang zum Dreieck als der andere Kreis.
Der Abstand zwischen den Absätzen ist kleiner als der Abstand zwischen den Abschnitten.
Kontinuität
Elemente, die auf einer Linie oder einer Kurve angeordnet sind, werden als verwandter wahrgenommen als Elemente, die sich nicht auf einer Linie oder Kurve befinden.
Ordnen Sie Oberflächenelemente wie Navigationsmenüs oder Schritte in einem Prozess entlang einer Linie oder Kurve an, um eine Abfolge oder Progression anzudeuten. Dieses Layout hilft Benutzern, die Beziehung zwischen Elementen wahrzunehmen und den logischen Informations- oder Aktionsflow zu verstehen.
Platzieren Sie zusammengehörige Elemente wie Kontrollkästchen, Optionsfelder oder Elemente in einer Liste mit Aufzählungspunkten entlang einer Linie, um sie optisch zu gruppieren. Diese Anordnung suggeriert den Benutzern, dass diese Elemente einen gemeinsamen Zweck haben oder zur selben Kategorie gehören, was die Navigation und das Verständnis erleichtert. Wenn ähnlich aussehende Elemente weiter nach innen eingerückt werden, korreliert die Position des Elements mit einer niedrigeren Platzierung in der visuellen Hierarchie.
Verwenden Sie Linien oder Kurven, um die Aufmerksamkeit der Benutzer zu lenken und visuelle Pfade durch die Benutzeroberfläche zu erstellen. Ein Pfeil kann beispielsweise den Blick des Benutzers entlang eines bestimmten Pfads von einem Inhaltsabschnitt zu einem anderen lenken und so eine Verbindung oder einen Fortschritt anzeigen. Mithilfe dieser Technik können Benutzer intuitiver durch die Benutzeroberfläche navigieren und diese besser erkunden.
Ordnen Sie wichtige Elemente der Benutzeroberfläche, z. B. Call-to-Action-Schaltflächen oder wichtige Informationen, entlang auffälliger Linien an, um die Aufmerksamkeit der Benutzenden zu erregen und Fokuspunkte zu schaffen. So wird das Muster Fluent-Meldungsleiste häufig als auffällige, ausgewogene Meldung im gesamten Inhaltsbereich angezeigt, wobei die Meldung auf der linken Seite steht und die Call-to-Action-Schaltflächen auf der rechten Seite. Diese Layout-Strategie hebt diese Elemente hervor und betont ihre Bedeutung, wodurch die Wahrscheinlichkeit einer Interaktion erhöht wird.
Die Kurven/Linien werden von uns stärker wahrgenommen als die Farbe.
Assistenten setzen Kontinuität ein, um Benutzern zu zeigen, dass die Schritte miteinander verbunden sind, ohne sie mit zu vielen Informationen zu überfordern.
Schließung
Das menschliche Gehirn neigt dazu, vollständige Formen zu sehen und ein einzelnes vertrautes Muster statt Einzelobjekten zu erkennen, selbst wenn einige Informationen fehlen.
Sorgen Sie für die visuelle Konsistenz der Designelemente, wie etwa Formen, Farben und Größen, damit Benutzende die zu erwartenden Muster erkennen können, auch wenn diese in unterschiedlichen Kontexten präsentiert werden.
Verwenden Sie einfache und vertraute Symbole, die es Benutzern ermöglichen, fehlende Informationen auf der Grundlage ihrer bisherigen Erfahrungen zu ergänzen. So wird ein Lupensymbol in der Regel mit einer Suchfunktion assoziiert, auch ohne begleitenden Text.
Präsentieren Sie den Benutzenden Informationen schrittweise, als schrittweise Offenlegung. Ermöglichen Sie den Benutzenden, fehlende Details bei der Interaktion mit der Benutzeroberfläche zu ergänzen. So vermeiden Sie, dass sie mit zu vielen Informationen überfordert werden, und fördern das Erkunden der Seite.
Erstellen Sie zusammenhängende visuelle Muster, die Benutzer dazu anregen, Objekte als Ganzes wahrzunehmen. So kann das Gruppieren verwandter Elemente den Benutzern dabei helfen, deren Beziehung und Zweck zu verstehen. Ordnen Sie Elemente visuell konsistent an und verwenden Sie dabei Gestaltungsprinzipien, um eine Segmentierung anzuzeigen. Nutzen Sie den Platz effektiv, um ein Gefühl der Geschlossenheit um die Oberflächenelemente herum zu erzeugen.
Verwenden Sie Animationen und Übergänge, um die Aufmerksamkeit der Benutzer zu lenken und Änderungen im Status der Oberfläche zu vermitteln. Reibungslose Übergänge zwischen verschiedenen Status oder Bildschirmen können Benutzern helfen, die Beziehung zwischen Elementen zu verstehen und fehlende Informationen zu ergänzen. Mehrere in Power Apps verfügbare moderne Steuerelemente zeigen grundsätzlich Animationen an.
Es wird ein Quadrat wahrgenommen, bevor die vier unvollständigen Kreise erkannt werden.
Die Animation von einer Karte zu einem Modal hilft, die Lücke zwischen den beiden zu schließen und sie miteinander in Beziehung zu setzen.
Mittelpunkt
Ein Fokuspunkt ist ein Designelement, das die Aufmerksamkeit des Betrachters sofort auf sich zieht. Idealerweise sollte ein Design eine Abfolge von Fokuspunkten aufweisen, normalerweise zwischen einem und drei, die so angeordnet sind, dass sie den Benutzenden gezielt durch den Inhalt führen.
Gestalten Sie die Benutzeroberfläche mit einer klaren Informationshierarchie, in der die wichtigsten Inhalte oder Aktionen als Fokuspunkte hervorgehoben werden. Verwenden Sie visuelle Hinweise wie Größe, Farbe, Kontrast und Positionierung, um diese Elemente hervorzuheben. Präsentieren Sie Informationen schrittweise, beginnend mit den wichtigsten Fokuspunkten. Mithilfe dieser Technik können Benutzer schnell die relevantesten Inhalte oder Aktionen identifizieren und werden in einer logischen Reihenfolge durch die Benutzeroberfläche geführt.
Platzieren Sie die wichtigsten Call-to-Action-Schaltflächen prominent auf der Benutzeroberfläche, sodass sie die stärksten Fokuspunkte bilden. Diese Schaltflächen sollten sich optisch von anderen Elementen abheben und strategisch platziert sein, um Benutzer zu gewünschten Aktionen wie einem Kauf oder einer Anmeldung zu führen. In der Fluent Designsprache wird empfohlen, für diese Elemente die Markenthemenfarbe zu verwenden.
Setzen Sie Kontraste wirkungsvoll ein, um Fokuspunkte zu schaffen. Elemente, die durch Unterschiede in Farbe, Helligkeit, Größe oder Typografie auffallen, ziehen auf natürliche Weise die Aufmerksamkeit des Benutzers auf sich. Der Kontrast hellerer Oberflächen mit dunkleren Text- oder Markenelementen schafft einen markanteren Fokuspunkt.
Verwenden Sie Leerraum, um Fokuspunkte hervorzuheben, indem Sie sie visuell von den umgebenden Elementen trennen. Diese Technik hilft dabei, Ablenkungen zu vermeiden, und ermöglicht es den Benutzern, sich auf die wichtigsten Inhalte oder Aktionen zu konzentrieren. Benutzeroberflächenelemente mit mehr Abstand um sie herum ziehen mehr Aufmerksamkeit auf sich und werden tendenziell als wichtiger wahrgenommen als Elemente mit weniger Abstand.
Sorgen Sie für eine einheitliche Verwendung von Fokuspunkten in der gesamten Benutzeroberfläche, um ein einheitliches Benutzererlebnis zu gewährleisten. Durch die Festlegung eines Musters von Fokuspunkten lenken Sie die Erwartungen der Benutzer hinsichtlich der Hierarchie, die sie verstehen müssen, um in der Benutzeroberfläche zu navigieren, und helfen ihnen, wichtige Informationen oder Aktionen auf verschiedenen Bildschirmen oder Seiten zu finden.
Bedenken Sie, dass es wichtig ist, die Balance zu wahren und die Benutzer nicht mit zu vielen konkurrierenden Fokuspunkten zu überfordern.
Der Blick wird zuerst auf das blaue Quadrat gelenkt.
Elemente wie Call-to-Action-Schaltflächen können zu Fokuspunkten gemacht werden, um sicherzustellen, dass Benutzende sie wahrnehmen.
Ähnlichkeit
Ähnlich aussehende Objekte werden häufig als Gruppe oder Muster wahrgenommen, sodass Benutzer erwarten, dass sie über die gleiche Funktionalität verfügen.
Stellen Sie sicher, dass Oberflächenelemente mit ähnlichen Funktionen einen einheitlichen visuellen Stil aufweisen. Schaltflächen, die ähnliche oder gleich gewichtete Aktionen ausführen, sollten beispielsweise dieselbe Farbe, Form und Größe haben, um den Benutzern die gemeinsame Funktionalität anzuzeigen. Stellen Sie umgekehrt sicher, dass Elemente, die sich in ihrer Funktionalität erheblich unterscheiden, klar unterscheidbar sind. Beide Techniken verhindern Verwirrung und Frustration, indem sie klare visuelle Hinweise geben.
Verwenden Sie eine einheitliche Ikonografie und Symbole, um ähnliche Aktionen oder Funktionen in der gesamten Benutzeroberfläche darzustellen. Benutzer neigen dazu, vertraute Symbole aufgrund ihrer Erfahrungen mit bestimmten Funktionen zu assoziieren. Um diese Erwartungen zu erfüllen, verwenden Sie allgemein anerkannte Symbolmetaphern. Sorgen Sie für eine einheitliche Symbolgestaltung, indem Sie Symbole aus demselben Satz verwenden, beispielsweise aus der Fluent-Benutzeroberfläche-Ikonografiebibliothek.
Verwenden Sie Farbcodierungen, um Ähnlichkeiten zwischen Elementen oder Kategorien hervorzuheben. Wenn Sie beispielsweise die gleiche Farbe verwenden, um zusammengehörige Elemente in einer Liste hervorzuheben, oder ähnliche Datenpunkte in einem Diagramm gruppieren, verbessert dies die visuelle Kohärenz und hilft Benutzern beim Erkennen von Mustern.
Behalten Sie die Einheitlichkeit in Typografie und Textstil für Elemente bei, die ähnlichen Zwecken dienen. Einheitliche Schriftarten, -größen und -formatierungen tragen zu einer stimmigen Bildsprache bei und erleichtern den Benutzern das Erkennen zusammengehöriger Inhalte oder Aktionen.
Geben Sie konsistentes interaktives Feedback für ähnliche Aktionen über die gesamte Benutzeroberfläche hinweg. Unabhängig davon, ob Benutzende mit der Maus über eine Schaltfläche fahren oder auf einen Link klicken, sollten sie mit einheitlichen Reaktionen rechnen, um die Verbindung zwischen visueller Ähnlichkeit und funktionaler Gleichwertigkeit zu verstärken. Auch wenn die Plattform die meisten interaktiven Verhaltensweisen, wie Farbwerte bei Mauszeigerbewegung und Drücken, von sich aus bereitstellt, sollten Sie dieses Designprinzip im Hinterkopf behalten, wenn Sie Komponentenelemente von Grund auf neu erstellen oder Feedbackstatus manuell implementieren.
Stellen Sie sicher, dass visuelle Ähnlichkeiten durch andere Hinweise wie Textbeschriftungen oder Audio-Feedback ergänzt werden, um Benutzern mit unterschiedlichen Bedürfnissen und Vorlieben gerecht zu werden. Die effektive Kommunikation der Funktionalität über mehrere sensorische Modalitäten erhöht die Benutzerfreundlichkeit und Inklusion.
Die Elemente sind nach Form und Farbe gruppiert, nicht nach Anordnung (Spalten und Zeilen).
Wenn eine Karte in einem Dashboard als Seitenbereich geöffnet wird, erwarten Benutzer, dass alle auf diese Weise geöffnet werden.
Figur und Grund
Der Mensch nimmt Elemente instinktiv entweder als „Figur“ (was im Vordergrund steht) oder als „Grund“ (was in den Hintergrund tritt) wahr. Der Kontext beeinflusst also die Wahrnehmung, und es ist wichtig, eine ausreichende Abgrenzung sicherzustellen, um wichtige Elemente vom Hintergrund abzuheben. Weißraum (Negativraum) erhöht das Verständnis von Inhalten.
Verwenden Sie Kontraste in Farbe, Größe oder visuellem Stil, um eine klare Beziehung zwischen Figur und Grund herzustellen. Wichtige Elemente sollten sich deutlich vom Hintergrund abheben, damit sie leicht erkennbar sind und die Aufmerksamkeit des Benutzers effektiv lenken. Oberflächen mit helleren Farben und stärker kontrastierenden visuellen Elementen vor dem Hintergrund fallen stärker auf. Dieser Ansatz reduziert die visuelle Unordnung und hilft Benutzern, wichtige Informationen zu erkennen. Sorgen Sie für ausreichend Kontrast zwischen Vordergrund- und Hintergrundelementen, um die Lesbarkeit für Benutzer mit Sehbehinderungen zu verbessern und ihnen so den Zugriff und das Verständnis von Inhalten zu erleichtern.
Durch die Beibehaltung der Konsistenz bei der Platzierung und Gestaltung der Oberflächenelemente wird die Figur-Grund-Beziehung verstärkt und den Benutzern das Verständnis der Oberflächenstruktur erleichtert. Die konsistente Verwendung von Designmustern und visuellen Hinweisen stellt sicher, dass Benutzer auf verschiedenen Bildschirmen und in verschiedenen Kontexten schnell zwischen Vordergrund- und Hintergrundelementen unterscheiden können. Inkonsistenzen im Design können die mentalen Modelle der Benutzer stören und ihre Fähigkeit beeinträchtigen, effizient durch die Benutzeroberfläche zu navigieren.
Niedriger Kontrast und minimaler Leerraum sorgen dafür, dass die weißen Vierecke als Teil des Hintergrunds wahrgenommen werden.
Ein Seitenbild muss in den Hintergrund treten, damit sich die Nutzer auf wichtige Inhalte konzentrieren können.
Gruppierung
Elemente werden tendenziell als Gruppen wahrgenommen, wenn sie sich eine Fläche mit klar definierten Grenzen teilen.
Durch die Gruppierung verwandter Elemente in visuellen Containern wie Kästen, Karten oder Rändern werden diese für den Benutzer leichter als zusammenhängende Einheiten wahrgenommen. Dieser Ansatz organisiert Inhalte und Funktionen visuell und erleichtert so die Identifizierung und Verarbeitung von Informationen. Klare Gruppierungen tragen dazu bei, eine überladene Benutzeroberfläche zu vermeiden und Verwirrung oder Ineffizienz zu reduzieren. Die Gruppierung ist auch dann effektiv, wenn Nähe keine Option ist. Beispielsweise wird eine Nachrichtenleiste, die sich über mehrere Steuerelemente auf einem Bildschirm erstreckt, aufgrund ihrer Rahmen und Hintergrundfarbe als zusammengehörige Einheit wahrgenommen.
Die Beibehaltung eines konsistenten visuellen Stils für gruppierte Elemente stärkt deren Verbindung und verbessert die Benutzerfreundlichkeit. Die Verwendung ähnlicher Farben, Schriftarten oder Symbole für diese Elemente unterstreicht, dass sie zur selben Kategorie oder Funktion gehören. Inkonsistenzen in der visuellen Darstellung können die wahrgenommene Gruppierung schwächen und dazu führen, dass Benutzer Beziehungen zwischen Elementen übersehen oder deren Bedeutung oder Zweck falsch interpretieren.
Durch das Hinzufügen eines Rahmens um ein Element oder eine Gruppe von Elementen wird eine Trennung zu umgebenden Elementen geschaffen.
Die Unterteilung von Inhalten in Abschnitte hilft den Benutzern dabei zu verstehen, dass sich das Thema ändert.
Signale vs. Rauschen
Visuelle Hinweise wie Linien, Kontrast und Abstände werden verwendet, um Benutzenden zu signalisieren, dass etwas wichtig ist. Zu viele Signale oder Signale, die unwichtige Informationen hervorheben, werden jedoch schnell zum Rauschen.
Verwenden Sie Fokuspunktprinzipien, wie fettgedruckten Text, kontrastierende Farben oder Symbole, um Benutzenden wichtige Informationen oder Aktionen zu signalisieren. Verwenden Sie beispielsweise eine helle Farbe für wichtige Schaltflächen oder Überschriften, um sie hervorzuheben.
Überlegen Sie genau, was Sie hervorheben, um die Benutzer nicht mit zu vielen Informationen zu überfordern. Signalisieren Sie nur Elemente, die für die Aufgabe oder das Ziel des Benutzers wirklich wichtig sind. Zu viele Signale können Verwirrung stiften und es den Benutzern erschweren, Prioritäten zu setzen. Identifizieren Sie die Informationen, die für den Benutzer am wichtigsten sind, und heben Sie sie angemessen hervor. Normalerweise wird empfohlen, nur eine Call-to-Action-Schaltfläche pro Seite einzufügen. Heben Sie in Formularen erforderliche Felder hervor, um die Aufmerksamkeit des Benutzers zu lenken. Dadurch wird verhindert, dass sich Benutzer in unnötigen Details verlieren, und es hilft ihnen, sich auf das Wesentliche zu konzentrieren.
Stellen Sie sicher, dass die Signale auf der gesamten Benutzeroberfläche einer konsistenten visuellen Sprache folgen, an der sich die Benutzenden orientieren können und die ihnen hilft, Muster zu erkennen und die Bedeutung verschiedener Signale intuitiv zu verstehen.
Passen Sie Signale an den spezifischen Kontext und die Bedürfnisse des Benutzers an. Wenn Benutzer beispielsweise eine Benutzeroberfläche mit bestimmten Aufgaben überfliegen, signalisieren Sie kritische Status und ausführbare Elemente deutlich, um ihre Aufmerksamkeit zu erregen. Kontextsignale helfen Benutzern, relevante Informationen schnell zu finden, ohne durch irrelevante Details abgelenkt zu werden.
Signale helfen bei der Leitung der Benutzenden durch die Inhalte und vermitteln, was wichtig ist.
Visuelles Rauschen sorgt für Verwirrung und hat den gegenteiligen Effekt von Signalen.
Umsetzung in Power Platform
Verwenden Sie in Canvas-Apps Layoutcontainer, um verwandte Elemente zu gruppieren. Idealerweise sollten Sie alle Seitenelemente in Containern organisieren. Außerdem können Layoutcontainer durch Anpassen der Lückeneigenschaft untergeordnete Container effizient trennen.
In modellgesteuerten App-Formularen können Abschnitte verwendet werden, um verwandte Felder oder Elemente zu gruppieren.
Implementieren Sie Konsistenz in gemeinsamen visuellen Elementen mit wiederverwendbaren benutzerdefinierten Komponenten.
In Canvas-Apps verfügen moderne Steuerelemente über eine integrierte Signalisierung in ihrem Design. Insbesondere die Schaltflächen- und Badge-Steuerelemente bieten Optionen in ihren Stileigenschaften und sind daher wirksame Signale. Halten Sie sich für jede Komponente an die bewährten Methoden, und wenden Sie die Signalisierung selektiv an, um eine optimale Kommunikation sicherzustellen.
Verwandte Informationen
- Grundsätze der Gruppierung
- Gestaltpsychologie
- Ästhetik-Verwendbarkeit-Effekt
- Abstandsrampe des Fluent-Benutzeroberfläche-Designsystems