Empfehlungen zur Einhaltung von Designstandards

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

In dieser Anleitung werden Empfehlungen zum Festlegen von Designstandards, Konventionen und Best Practices für die Entwicklung von Benutzeroberflächen beschrieben, die das Benutzererlebnis und den Gesamterfolg der Anwendung verbessern. Abweichungen von Standards sollten sorgfältig abgewogen werden, um negative Auswirkungen auf das Benutzererlebnis und die Nutzbarkeit der Anwendung zu vermeiden.

Wichtige Designstrategien

Durch die Einhaltung von Designstandards lässt sich der Entscheidungsaufwand im Designprozess verringern, indem die wichtigen Aspekte des Designs identifiziert werden. Durch das Verständnis der Standards kann ein Team gezielter und effizienter gut gestaltete Benutzeroberflächen entwickeln. Dieser Ansatz führt zu schnelleren Entwicklungszyklen, verbesserter Benutzerfreundlichkeit und gesteigerter Benutzerzufriedenheit, was letztendlich zu einer höheren Produktivität und Effektivität interner Softwaresysteme führt.

Designprinzipien verstehen

Umfangreiche Forschungen zur menschlichen Wahrnehmung prägen unser Verständnis von visuellem Design und der Interaktion mit digitalen Produkten. Dieses Wissen liegt vielen Best Practices und Standards zugrunde und macht etwa 80 % des Endprodukts aus. Designprinzipien können die verbleibende kreative Lücke von 20 % schließen, die nicht durch Standards abgedeckt ist. Das Vorhandensein dieses Wissens verbessert das Verständnis des Entwicklungsteams für Designüberlegungen während der Planung und verringert die Abhängigkeit von Designressourcen bzw. verbessert die Zusammenarbeit mit diesen.

Gängigen Mustern und Metaphern folgen

Universelle Muster und Metaphern werden in digitalen Produkten weitgehend erkannt und erwartet. Die Einbindung dieser Muster kann bei Bedarf die Einarbeitung der Benutzenden und die langfristige Nutzung vereinfachen, Schulungs- und Supportkosten senken und möglicherweise den Bedarf an Aktualisierungen oder Neugestaltungen verringern. Diese Praktiken umfassen verschiedene Aspekte des Designs, darunter Layoutzusammenstellung, Navigationsstruktur, Informationshierarchie und Interaktionsdesign.

Das Einhalten standardmäßiger Symbolmetaphern und semantischer Farben ist von entscheidender Bedeutung. Symbole sollten etablierte visuelle Assoziationen verwenden, um Benutzenden die Funktionalität schnell und effektiv zu vermitteln. Ebenso liefern semantische Farben, wie etwa Rot für Fehler oder Grün für Erfolg, unmittelbares visuelles Feedback, das den Erwartungen und mentalen Modellen der Benutzenden entspricht. Das Befolgen dieser Konventionen trägt dazu bei, die kognitive Belastung zu reduzieren und die Benutzerfreundlichkeit zu verbessern, indem es ein Gefühl der Vertrautheit und des Komforts fördert.

Designsystem etablieren

Ein Designsystem ist eine Sammlung wiederverwendbarer funktionaler Bausteine, die zum Erstellen einer Benutzeroberfläche verwendet werden. Sie werden speziell für eine Organisation entwickelt, sodass jedes Element den etablierten Standards der Marke entspricht. Die vier Schlüsselkomponenten eines Designsystems sind Design-Token, Komponenten, Musterbibliotheken und Richtlinien.

Design-Token sind grundlegende visuelle Elemente einer Benutzeroberfläche, einschließlich Aspekten wie Farbe, Typografie und Abstand. Sie werden als Variablen in einem Standardformat ausgedrückt, was die Erstellung und Wartung einer Anwendung mithilfe des Designsystems erleichtert. Unabhängig vom konkreten Design vereinfachen Design-Token die Übersetzung des Designs in Code. Durch die Definition eines Tokens namens „primary-color“ mit einem bestimmten Wert können Entwickler beispielsweise das Design mithilfe des Tokens nahtlos integrieren, anstatt einen bestimmten Wert direkt in den Code einzubetten. Die Design-Token können an den Stilleitfaden einer Organisation angepasst und zentral verwaltet werden, um benutzerfreundliche Token zu erstellen.

Eine Komponente stellt eine diskrete, modulare Einheit einer Benutzeroberfläche dar. Sie dient als visuelles Element zum Zusammenstellen von App-Schnittstellen. Gut konzipierte Komponenten weisen zwei wesentliche Eigenschaften auf: Wiederverwendbarkeit und Modularität. Sie sollten so konzipiert sein, dass die visuelle Konsistenz über mehrere Anwendungen innerhalb des Ökosystems einer Marke hinweg gewährleistet bleibt, sodass das Design nicht jedes Mal neu erstellt werden muss. Eine einzelne Komponente sollte nahtlos in mehreren Kontexten einsetzbar sein.

Power Apps bietet einen umfassenden Satz grundlegender universeller Komponenten wie Schaltflächen, Dropdownlisten und mehrere zusammengesetzte Komponenten wie die moderne Tabelle. Verwenden Sie diese Steuerelemente so weit wie möglich für grundlegende Anforderungen und ziehen Sie dann die Erstellung zusammengesetzter Komponenten in Betracht, wo Lücken für wiederholbare Benutzeroberflächenmuster bestehen.

Zusammengesetzte Komponenten sollten vielseitig genug sein, um unverändert oder mit geringfügigen Variationen (über Parameter) in verschiedenen App-Kontexten verwendet zu werden, ohne dass Änderungen erforderlich sind. Einige Beispiele von benutzerdefinierten Komponenten sind:

• Eine Kopf- oder Fußzeile mit Unternehmenslogo
• Eine bildschirmgroße Ressourcenseitenkomponente, mit der Benutzende Feedback geben und IT-Hilfe erhalten können
• Universelle Inhalte wie Copyright-Hinweise oder Links

Eine Musterbibliothek bietet Erstellenden eine Reihe vordefinierter Entwurfsmuster, die sie als Ausgangspunkt für die Gestaltung von Benutzeroberflächen verwenden können. Diese Muster dienen als standardisierte Lösungen für gängige Designherausforderungen. Das Hauptziel einer Musterbibliothek besteht darin, eine zentrale Sammlung gut ausgearbeiteter Muster anzubieten, die die Erstellung konsistenter und effektiver Benutzeroberflächen ermöglichen. Musterbibliotheken ermöglichen Entwickelnden die Verwendung eines bestimmten Musters und die Einhaltung etablierter Nutzungsrichtlinien. Auf diese Weise wird die Kohärenz und Effizienz des Designs der Benutzeroberfläche sichergestellt.

Richtlinien bieten Projektteams Regeln und Best Practices für den effektiven Einsatz von Komponenten und visuellen Stilen. Im Gegensatz zu Stilrichtlinien, bei denen die Ästhetik im Mittelpunkt steht, definieren Designsystemrichtlinien das funktionale Verhalten von Komponenten und die Erwartungen an die Benutzerinteraktion. Wenn ein Designsystem beispielsweise einen Design-Token-Satz für die Referenzierung von Farben bereitstellt, sollten die Richtlinien klarstellen, wann diese Farben zu verwenden sind und wie Entwickelnde auf die entsprechende Farbe in Power Apps zugreifen können. Für Komponenten sollte eine Dokumentation zur korrekten Verwendung, zu den Eingabe- und Ausgabeparametern und zu erwartenden Zustandsänderungen der Komponente vorhanden sein.

Bei zentralisierten Designsystem-Bemühungen können außerdem universelle Medienressourcen wie Unternehmenslogos und andere Designressourcen in einem Repository gehostet werden, um eine weitreichende, schnelle Entwicklung zu ermöglichen.

Die Fluent-UI von Microsoft ist ein Beispiel für ein weit verbreitetes Open-Source-Designsystem. Es kann eine wirksame Referenz für viele Designentscheidungen in Power Apps sein, weil alle modernen Steuerelemente die Komponenten des Fluent-(2-)Designsystems verwenden. Designsysteme wie Fluent UI sind das Ergebnis eines erheblichen Forschungs- und Entwicklungsaufwands für die Erstellung von Komponenten, um sicherzustellen, dass sie den Bedürfnissen der Benutzer entsprechen. Sie sind außerdem so konzipiert, dass sie allgegenwärtig sind und problemlos über verschiedene digitale Produkte und Plattformen hinweg verwendet werden können. Jede Komponente verfügt über spezifische Richtlinien, um sicherzustellen, dass die Anwendung mit der beabsichtigten Erfahrung übereinstimmt. Nutzen Sie das forschungsgestützte Wissen durch die Überprüfung der Anleitung für Fluent 2.

Die gemeinsame Nutzung zur Vermeidung doppelter Implementierungen steigert nicht nur die Produktionseffizienz, sondern stellt auch sicher, dass die Erfahrungen im Laufe der Zeit kohärent bleiben. Beiträge zu gemeinsam genutzten Elementen tragen dazu bei, die Erfahrungen aktuell zu halten und das Fachwissen der gesamten Organisation widerzuspiegeln. Derzeit stellt die Kohärenz eine Herausforderung dar, da Komponenten, Systeme, Prozesse und Kultur oft nicht geteilt werden, die Kohärenz nicht fördern und Beiträge erschweren.

Durchführen von Designüberprüfungen

Der Zugriff auf Ressourcen zur Gestaltung der Benutzererfahrung ist von entscheidender Bedeutung, um sicherzustellen, dass eine App die etablierten UI/UX-Standards erfüllt. Zentralisierte Teams sollten sich mit den grundlegenden Designstandards und Best Practices vertraut machen. Während Designer sich in der Regel mit dem Benutzererlebnis auskennen, können auch Projektmanagende vom Erlernen dieser Fähigkeiten profitieren, um einen effektiven Beitrag zum Team zu leisten.

Verwendung designbezogener App-Metadaten validieren

Die wirksamste Art, ein Erlebnis wahrzunehmen, besteht darin, es physisch zu durchleben. Sie können Power Apps-App-Metadaten jedoch auch programmgesteuert lesen. Dies kann unter anderem durch die Überprüfung erreicht werden, ob das richtige Design auf die App angewendet wurde, oder die Verifizierung, ob in älteren Steuerelementen auf Design-Token-Werte verwiesen wird. Wenn beispielsweise bestimmte Textelemente bestimmte Design-Token verwenden müssen, könnte der Name der Textkomponente einem bestimmten Wert entsprechen und die Eigenschaften der Komponente sollten dann einer bestimmten Design-Token-Zuordnung entsprechen.

Bewerten Sie die Anzahl der Elemente, die ein bestimmter Komponententyp sind und bestimmte Kriterien erfüllen, im Vergleich zu denen, die dies nicht tun. Betrachten Sie beispielsweise Textkomponenten, die entweder falsch oder richtig benannt sind, aber die Richtlinien für Eigenschaftswerte nicht einhalten. Um ein responsives Layout zu erzwingen, könnten bestimmte Layout-Container bestimmten Namenskonventionen und Eigenschaftswerten (wie etwa LayoutWrap) zugeordnet werden.

Erfüllen Sie Barrierefreiheitsstandards, um die Benutzerbasis zu vergrößern

Durch die Einbeziehung integrativer Designprinzipien wird sichergestellt, dass die Produkte einem vielfältigen Publikum gerecht werden, einschließlich Personen aller Fähigkeitsstufen. Beim inklusiven Design geht es darum, potenzielle Barrieren für Benutzende aller Fähigkeitsstufen zu identifizieren, um Produkte zu entwickeln, die Herausforderungen vor der endgültigen Implementierung bewältigen. Es ist wichtig, die funktionalen Aspekte, die zu Interaktionsbarrieren führen können, zu verstehen und zu diskutieren, um sie effektiv zu überwinden.

Methoden zum Zugriff auf Inhalte

Benutzende greifen auf verschiedene Weise auf digitale Inhalte zu. Zusätzlich zur Maus- und Zeigereingabe können sie auch Tastatur und Hilfstechnologien wie Bildschirm- und Brailleleser, Lupen, Untertitel, Spracherkennung und Einstellungen für hohen Kontrast verwenden, die alle das Erlebnis an die Bedürfnisse des Benutzers anpassen.

Hilfstools

Zu den gängigen Hilfsmitteln gehören:

• Tastatur: Menschen mit Sehbehinderungen interagieren mit Websites und Apps mithilfe von Sprachausgabesoftware, die Inhalte und Steuerelemente mithilfe von Text-to-Speech-Technologie laut vorliest und die Tastatur als alternative Eingabeoption zur Interaktion mit Zeigen und Klicken mit einer Standardmaus verwendet. Neben der Unterstützung der grundlegenden Tastaturbefehle bieten Sprachausgabeprogramme auch einen komplexen Satz an Tastaturbefehlen. Diese Befehle bieten Benutzenden einen leistungsstarken zusätzlichen Satz an Tools für eine effizientere Interaktion mit Benutzeroberflächen.

• Screenreader: Screenreader wandeln digitalen Text in synthetisierte Sprache und Braille-Ausgabe um. Sie ermöglichen es Benutzenden, Inhalte zu hören und mit der Tastatur zu navigieren. Mithilfe dieser Technologie können nicht sehende oder sehbehinderte Menschen Informationstechnologie mit der gleichen Unabhängigkeit und Privatsphäre nutzen wie jeder andere Benutzende. Sprachausgabeprogramme werden auch von Personen mit kognitiven oder Lernbehinderungen sowie von Benutzenden verwendet, die Audioinhalte einfach Text vorziehen. Diese Tools gehen über die Webnutzung hinaus und unterstützen die Navigation in Dokumenten, Tabellen und Betriebssystemen.

• Berührung: Touch-Ziele richten sich vor allem an Menschen mit motorischen Verzögerungen, die möglicherweise Probleme beim Tippen auf den Bildschirm haben. Genauer gesagt ist die Touch-Funktion darauf ausgelegt, Menschen dabei zu helfen, die Menge an Fehleingaben durch unbeabsichtigte (oder nicht registrierte) Berührungen zu begrenzen.

• Dynamische Inhalte: Landmark-Rollen oder ARIA-Bezeichnungen bieten unmittelbare Vorteile für die Benutzenden von Sprachausgabeprogrammen. Es gibt acht Rollen, die jeweils einen Inhaltsblock darstellen, der häufig auf Webseiten vorkommt. Um sie zu verwenden, fügen Sie das entsprechende Rollenattribut zu einem geeigneten Container in Ihrem HTML hinzu, damit Benutzende des Sprachausgabeprogramms schnell zu diesem Abschnitt der Seite navigieren können.

Visuelle Stile

Um inklusive Produkte für Benutzende mit unterschiedlichen Sehfähigkeiten zu erstellen, ist es wichtig, visuelle Stile wie Farbe, Kontrast und Textgröße zu berücksichtigen. Dabei muss ein ausreichender Kontrast zwischen Text und Hintergrund sichergestellt werden, einschließlich Text auf Bildern, Symbolen und Schaltflächen, um die Lesbarkeit für Benutzende mit geringer Kontrastempfindlichkeit oder Farbenblindheit zu verbessern. Kontrastreiche Inhalte verbessern die Lesbarkeit bei unterschiedlichen Lichtverhältnissen und kommen so allen Benutzenden zugute.

Standardtext sollte zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen. Für größere Texte, interaktive Komponenten und Datenvisualisierungen ist ein Mindestkontrastverhältnis von 3:1 zur Hintergrundfarbe erforderlich. Statusanzeigen sollten semantische Farben, Typen und Bilder effektiv nutzen, um Informationen zu vermitteln und sicherzustellen, dass Inhalte von allen Benutzern wahrgenommen werden können. Erwägen Sie die Unterstützung einer Farbpalette mit hohem Kontrast, welche die Farbpalette für die Anzeige von Inhalten mit einem Kontrastverhältnis von mindestens 7:1 normalisiert und so Sichtbarkeit und Klarheit gewährleistet. Das Anbieten eines dunklen Modus kann die Lesbarkeit erheblich verbessern und die Augenbelastung verringern.

Typografie

Die Typografie spielt eine entscheidende Rolle bei der Gewährleistung der Lesbarkeit für Benutzende mit unterschiedlichen Anforderungen. Der Text muss groß genug sein und über ausreichend Abstand verfügen, um den unterschiedlichen Benutzeranforderungen gerecht zu werden. Benutzende sollten Einstellungen wie Ausrichtung und Zoomstufen anpassen können, wobei Anwendungen ihr Inhaltslayout entsprechend nahtlos anpassen. Eine gut eingestellte Typografie hilft nicht nur bei der Lesbarkeit, sondern erleichtert auch die Seitenorientierung und Navigation, was Menschen mit Sehbehinderung, kognitiven Behinderungen und Farbenblindheit sowie denjenigen, die auf Screenreader angewiesen sind, zugute kommt.

Überschriften sollten großen oder fett gedruckten Text enthalten, um ein schnelles Überfliegen und Verstehen zu ermöglichen, insbesondere für visuell orientierte Benutzer. Richtig eingesetzte Überschriftenelemente gewährleisten eine effiziente Navigation für alle Benutzenden. Zeilenbreite und -abstand wirken sich erheblich auf die Lesbarkeit aus. So belasten beispielsweise zu breite Zeilen die Augen, während zu kurze Zeilen den Rhythmus und das Verständnis stören. Streben Sie eine Zeilenlänge von 50 bis 70 Zeichen und eine Zeilenhöhe von 120 %% bis 145 %% der Schriftgröße an, um die Lesbarkeit zu verbessern.

Auf Mobilgeräten sollte die Textgröße ohne Beeinträchtigung von Inhalt oder Funktionalität um bis zu 200 %% veränderbar sein. Diese Flexibilität stellt sicher, dass Benutzende die Textgröße entsprechend ihren Vorlieben oder Anforderungen anpassen können, was die allgemeine Zugänglichkeit verbessert. Darüber hinaus sollten Benutzende die Möglichkeit haben, die Benutzeroberfläche zu vergrößern. Die Seitenlayouts sollten so gestaltet sein, dass der Inhalt bei Zoomstufen von bis zu 400 %% nahtlos und ohne horizontales Scrollen neu umbrochen wird. Indem sichergestellt wird, dass Inhalte unabhängig von der Bildschirmgröße des Geräts zugänglich und lesbar bleiben, wird zu einem benutzerfreundlicheren Erlebnis für alle Benutzenden beigetragen.

Bilder, Grafik und Bewegung

Bilder und Grafiken machen Inhalte für viele Menschen, insbesondere für Menschen mit kognitiven und Lernbehinderungen, angenehmer und leichter verständlich. Während Bilder sehbehinderten Menschen als Orientierungshilfe im Inhalt dienen können, kann eine übermäßige Verwendung auf Websites eine erhebliche Barriere für Benutzende darstellen.

Von barrierefreien Praktiken im Zusammenhang mit Medieninhalten profitieren Benutzende von Braille- und Sprachausgabeprogrammen, Benutzende, die mit deaktivierten Bildern im Internet surfen, um Bandbreite zu sparen, sowie Crawler von Suchmaschinen. Sie können auch Menschen mit Hörverlust oder kognitiven Behinderungen helfen.

Verwenden Sie alternativen Text, um visuelle Inhalte zugänglich zu machen. Alt-Attribute beschreiben visuelle Inhalte, beispielsweise Text, der beim Herunterladen von Bildern angezeigt wird. Passen Sie Alt-Text an den Kontext des Bilds an. Seien Sie präzise und informativ (verwenden Sie 150 bis 250 Zeichen). Denken Sie daran, Bilder, die Textinhalte duplizieren, als dekorativ zu markieren.

Interaktion

Bei der Interaktion kommt es am meisten auf die Barrierefreiheit an. Wenn ein Benutzender nicht reibungslos durch ein Produkt navigieren und Aufgaben erledigen kann, ist das Produkt nicht wirklich zugänglich. Effiziente Tastatur- und Touch-Interaktionen unterstützen Benutzende von Sprachausgabeprogrammen, Braille-Lesegeräten und diejenigen, die mit einer Tastatur navigieren. Typische Interaktionen sind u. a.:

• Navigation: Benutzende unterstützender Technologien navigieren auf einer Webseite mithilfe der Tabulatortaste, der Suchfunktion und, im Fall von Sprachausgabeprogrammen, mithilfe von Überschriften- und Linklisten. Sorgen Sie mit Orientierungspunkten, Überschriften und Tastenkombinationen, z. B. „Zum Hauptinhalt springen“, für eine effiziente Tastaturnavigation.

• Hyperlinks: Die Benutzerfreundlichkeit und Zugänglichkeit von Hyperlinks kann verbessert werden, indem sie auch außerhalb ihres Kontextes klar, präzise und aussagekräftig gestaltet werden. Sorgen Sie für ausreichend Farbkontrast und heben Sie sich optisch von anderen Inhalten ab.

• Tabellen: Es reicht nicht aus, sich allein auf visuelle Hinweise zu verlassen, um eine barrierefreie Tabelle zu erstellen. Strukturelle Markierungen ermöglichen Hilfstechnologien das Erkennen von Überschriften und Datenzellen.

• Formulare: Eingabefelder, die für verschiedene Webinteraktionen verwendet werden, werfen häufig Bedenken hinsichtlich der Barrierefreiheit für Personen auf, die Screenreader oder Tastaturen verwenden.

• Fokus: Die Sichtbarkeit des Fokus hilft Benutzern, die sich beim Navigieren auf der Seite auf die Tastatur verlassen, indem das Element, mit dem sie als nächstes interagieren, visuell angezeigt wird. Manchmal muss der Fokus programmgesteuert verschoben oder auf einen bestimmten Bereich beschränkt werden, um das Erlebnis zu optimieren.

• Statusänderungen: Geben Sie Text für alle Statusänderungen und Ankündigungen an. Das Kommunizieren von Fehlerzuständen und das Führen von Benutzern durch die Fehlerbehebung, z. B. bei fehlenden Informationen oder einem Systemproblem, ist von entscheidender Bedeutung.

Umsetzung in Power Platform

Moderne Steuerelemente sind sowohl für Canvas-Apps als auch für modellgesteuerte Apps verfügbar.

Canvas-Apps unterstützen moderne Designs, sodass Sie für alle Steuerelemente in der App eine einheitliche Markenpalette implementieren können. Modellgesteuerte Apps unterstützen Designs zum Ändern grundlegender Markenelemente wie App-Kopfzeilenfarben, Links und einiger Formularsymbole.

Wiederverwendbare, lösungsbewusste Komponenten sind in mehreren Formen für verschiedene App-Typen verfügbar. Benutzerdefinierte Canvas-Komponenten können in Canvas-Apps oder benutzerdefinierten Seiten verwendet werden und werden mit wenig Code erstellt. Das Power Apps component framework kann verwendet werden, um Codekomponenten für Canvas-Apps, modellgesteuerte Apps und Power Pages zu implementieren.

Canvas-Apps unterstützen barrierefreie Eigenschaften, die bestimmten Hilfstechnologiefunktionen zugeordnet sind. Verwenden Sie In-Studio-Tools, um die Einhaltung der Barrierefreiheitsrichtlinien zu überprüfen.

Während modellgesteuerte Apps ohne Konfiguration barrierefrei sind, stellen Sie sicher, dass alle der App hinzugefügten Webressourcen barrierefrei sind. Eingebettete Canvas-Umgebungen, einschließlich benutzerdefinierter Seiten, müssen manuell konfiguriert werden, um die Barrierefreiheitsstandards zu erfüllen.

Modellgesteuerte Apps bieten integrierte Standard-Tastaturkürzel zum Navigieren in Formularen und Ansichten.

Canvas-Apps erfordern Codekomponenten zum Aktivieren von Tastaturkürzeln, die mit den Tastaturkürzeln des Ersteller-Kits konfiguriert werden können.

Verwandte Informationen

• Entwerfen und Erstellen barrierefreier Canvas-Apps in Power Apps
• Barrierefreiheitsbeschränkungen in Canvas-Apps
• Power Apps Whitepaper zu den Richtlinien zur Barrierefreiheit der Canvas-App
• Sprachausgabe in modellgesteuerten Apps verwenden
• Richtlinien für barrierefreie Webinhalte (WCAG) – Standard
• Microsoft – inklusives Design
• Leitfaden zur Barrierefreiheit der Fluent-UI

Umgebungsoptimierungsprüfliste