Informations- & Navigationsarchitektur

Information- & Navigationsarchitektur

Informationen und Komponenten der Benutzerschnittstelle müssen für die Benutzer in einer für sie wahrnehmbaren Weise darstellbar sein.

ISO 9241-171

Information- & Navigationsarchitektur

Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur

Wenn die Reihenfolge, in der Inhalte präsentiert werden, sich auf deren Bedeutung auswirkt, kann die korrekte Leseabfolge durch Software bestimmt werden. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur

Anweisungen, die für das Verständnis und die Bedienung von Inhalt bereitgestellt werden, stützen sich nicht nur auf sensorische Eigenschaften von Komponenten wie Form, Größe, visuelle Position, Ausrichtung oder Ton. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur Farbe & Kontrast Allgemeines

Machen Sie es Benutzern leichter, Inhalt zu sehen und zu hören einschließlich der Trennung von Vorder- und Hintergrund.

WCAG 2.1

Information- & Navigationsarchitektur Navigation

Sorgen Sie dafür, dass alle Funktionalitäten per Tastatur zugänglich sind.

WCAG 2.1

Information- & Navigationsarchitektur

Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist, außer wenn die zugrunde liegende Funktion Eingaben verlangt, die vom Pfad der Bewegung des Benutzers und nicht nur von den Endpunkten abhängig sind. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur

Wenn der Tastaturfokus durch eine Tastaturschnittstelle auf einen Bestandteil der Seite bewegt werden kann, dann kann der Fokus von diesem Bestandteil weg bewegt werden, indem man nur die Tastaturschnittstelle benutzt; wenn man dazu mehr als nicht modifizierte Pfeil- oder Tabulatortasten oder andere übliche Ausstiegsmethoden benutzen muss, dann wird der Benutzer über die Methode zum Bewegen des Fokus informiert. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur Allgemeines

Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist. (Stufe AAA)

WCAG 2.1

Information- & Navigationsarchitektur Allgemeines

Ausreichend Zeit: Geben Sie den Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen.

WCAG 2.1

Information- & Navigationsarchitektur

Für jede zeitliche Begrenzung, die vom Inhalt festgelegt wird, gilt mindestens eines der Folgenden (Level A):

  • Abschalten: Der Benutzer kann die zeitliche Begrenzung abschalten, bevor er darauf trifft
  • Anpassen: Der Benutzer darf die zeitliche Begrenzung anpassen, bevor er darauf trifft, und zwar so weitreichend, dass es sich um die mindestens zehnfache Zeit der Standardeinstellung handelt
  • Ausweiten: Der Benutzer wird gewarnt, bevor die Zeit abläuft und bekommt mindestens 20 Sekunden Zeit, um die zeitliche Begrenzung mit einer einfachen Handlung auszuweiten
  • zeitliche Begrenzung mindestens 10 mal ausweiten oder Echtzeit-Ausnahme: Die zeitliche Begrenzung ist ein erforderlicher Bestandteil eines Echtzeit-Ereignisses (zum Beispiel einer Auktion) und es gibt keine Alternative zur zeitlichen Begrenzung
  • Unentbehrliche Ausnahme: Die zeitliche Begrenzung ist unentbehrlich und eine Ausweitung dieser würde die Handlung ungültig machen
  • 20 Stunden-Ausnahme: Die zeitliche Begrenzung beträgt mehr als 20 Stunden.

WCAG 2.1

Information- & Navigationsarchitektur Navigation Header & Footer

Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden.

WCAG 2.1

Information- & Navigationsarchitektur

Es gibt einen Mechanismus, um Inhaltsblöcke zu umgehen, die auf verschiedenen Webseiten wiederholt werden. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur Header & Footer Überschriften & Label

Webseiten haben einen Titel, der Thema oder Zweck beschreibt. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur Header & Footer

Es gibt mehr als eine Methode, um eine Webseite innerhalb eines Satzes von Webseiten zu finden, außer die Webseite ist das Ergebnis oder ein Schritt innerhalb eines Prozesses. (Level AA)

WCAG 2.1

Information- & Navigationsarchitektur

Es gibt Informationen zu der Position des Benutzers innerhalb eines Satzes von Webseiten.

WCAG 2.1

Information- & Navigationsarchitektur Allgemeines

Erleichtern Sie den Benutzern die Bedienung der Funktionalität durch verschiedene Eingaben über die Tastatur hinaus

WCAG 2.1

Information- & Navigationsarchitektur

Alle Funktionen, die Mehrpunkt- oder Pfad-basierte Gesten zur Bedienung verwenden, können mit einem einzigen Zeiger ohne Pfad-basierte Geste bedient werden, es sei denn, eine Mehrpunkt- oder Pfad-basierte Geste ist unerlässlich. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur

Für Funktionen, die mit einem einzigen Zeiger bedient werden können, trifft mindestens eine der folgenden Aussagen zu:

  • Kein Down-Event: Das Abwärts-Ereignis des Zeigers wird nicht zur Ausführung eines Teils der Funktion verwendet
  • Abbrechen oder Rückgängig machen: Die Fertigstellung der Funktion ist ein aktuelles Ereignis, und es steht ein Mechanismus zur Verfügung, um die Funktion vor der Fertigstellung abzubrechen oder die Funktion nach der Fertigstellung rückgängig zu machen
  • Umkehrung nach oben: Das Aufwärts-Ereignis macht jedes Ergebnis des vorhergehenden Abwärts-Ereignisses rückgängig
  • Unverzichtbar: Die Vervollständigung der Funktion auf dem Down-Event ist von wesentlicher Bedeutung.

WCAG 2.1

Information- & Navigationsarchitektur

Funktionen, die durch Bewegung des Geräts oder des Benutzers bedient werden können, können auch durch Komponenten der Benutzerschnittstelle bedient werden, und das Reagieren auf die Bewegung kann deaktiviert werden, um eine versehentliche Betätigung zu verhindern, außer in bestimmten Fällen (Level A):

  • Unterstützte Schnittstelle: Die Bewegung wird verwendet, um die Funktionalität über eine barrierefreie Schnittstelle zu bedienen
  • Unverzichtbar: Der Antrag ist wesentlich für die Funktion und würde die Aktivität ungültig machen.

WCAG 2.1

Information- & Navigationsarchitektur Allgemeines

Verständlich - Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.

WCAG 2.1

Information- & Navigationsarchitektur Schrift & Text

Lesbar: Machen Sie Inhalt lesbar und verständlich.

WCAG 2.1

Information- & Navigationsarchitektur

Vorhersehbar: Sorgen Sie dafür, dass Webseiten vorhersehbar aussehen und funktionieren.

WCAG 2.1

Information- & Navigationsarchitektur Allgemeines

Die Änderung der Einstellung irgendeines Bestandteils der Benutzerschnittstelle führt nicht automatisch zur Änderung des Kontextes, außer der Benutzer wurde vor Benutzung des Bestandteils auf das Verhalten hingewiesen. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur Navigation

Navigationsmechanismen, die auf mehreren Webseiten innerhalb eines Satzes von Webseiten wiederholt werden, treten jedes Mal, wenn sie wiederholt werden, in der gleichen relativen Reihenfolge auf, außer eine Änderung wird durch den Benutzer ausgelöst. (Level AA)

WCAG 2.1

Information- & Navigationsarchitektur Allgemeines

Bestandteile mit der gleichen Funktionalität innerhalb eines Satzes von Webseiten werden konsistent erkannt. (Level AA)

WCAG 2.1

Information- & Navigationsarchitektur

Änderungen des Kontextes werden nur durch Benutzeranfrage ausgelöst oder es gibt einen Mechanismus, um solche Änderungen abzuschalten. (Level AAA)

WCAG 2.1

Information- & Navigationsarchitektur Allgemeines

Robust - Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.

WCAG 2.1

Information- & Navigationsarchitektur Allgemeines

Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken.

WCAG 2.1

Information- & Navigationsarchitektur Überschriften & Label Listen, Tabellen & Akkordeons

Inhalte sind durch Absätze und Überschriften logisch zu strukturieren. Aufzählungen mit mehr als drei Punkten sind durch Listen zu gliedern.

BITV 2.0

Information- & Navigationsarchitektur

Wichtige Inhalte sind voranzustellen.

BITV 2.0

Information- & Navigationsarchitektur Allgemeines

Namen und Beschriftungen für Benutzungsschnittstellen-Elemente

ISO 9241-171

Information- & Navigationsarchitektur Allgemeines

Die Software muss jedem Benutzungsschnittstellen-Element einen Namen zuordnen, der zu dessen Erkennung dient, es sei denn, ein solcher Name wäre redundant.

ISO 9241-171

Information- & Navigationsarchitektur Allgemeines

Falls ein Benutzungsschnittstellen-Element eine visuelle Darstellung hat und nicht zu den Standardkomponenten der Benutzungsschnittstelle gehört, sollte die Software den Benutzern (entweder standardmäßig oder auf Anforderung des Benutzers) ihren Namen anzeigen.

ISO 9241-171

Information- & Navigationsarchitektur

Die von der Software bereitgestellten Beschriftungen von Benutzungsschnittstellen-Elementen sollten in Bezug auf die zugehörigen Elemente in gleich bleibender Weise auf dem Bildschirm angeordnet werden

ISO 9241-171

Information- & Navigationsarchitektur

Die Software sollte einen Mechanismus zur Verfügung stellen, der es Benutzern ermöglicht, die visuelle und interaktive Erscheinung der Schnittstelle zu individualisieren; dazu gehört auch die Änderung oder das Verbergen von Befehlsschaltflächen.

ISO 9241-171

Information- & Navigationsarchitektur

Die Software sollte es den Benutzern ermöglichen, Profile ihrer bevorzugten Benutzereinstellungen einschließlich ein- und ausgabebezogener Einstellungen zu erstellen, zu speichern, zu bearbeiten und wieder aufzurufen, ohne irgendeinen Neustart ausführen zu müssen, der eine Änderung von Status oder Daten verursachen würde.

ISO 9241-171

Information- & Navigationsarchitektur

Die Software sollte es den Benutzern ermöglichen, ihre bevorzugten Benutzereinstellungen leicht auf ein kompatibles System zu übertragen.

ISO 9241-171

Information- & Navigationsarchitektur Navigation

Das Navigieren durch lange Listen und Menüs erleichtern: Die Software sollte Tastaturmechanismen zur Verfügung stellen, die das Navigieren innerhalb von Menüs und Listen erleichtern.

ISO 9241-171

Information- & Navigationsarchitektur

Wenn eine große Anzahl von lenkbaren Steuerungselementen vorhanden ist, sollten die Steuerungselemente gruppiert werden, um die Navigation zu erleichtern.

ISO 9241-171

Information- & Navigationsarchitektur Navigation

Die Steuerungselemente sollten so angeordnet werden, dass sich der Benutzer beim Navigieren mit der Tastatur in einer seiner Arbeitsaufgabe angemessenen Reihenfolge bewegen kann

ISO 9241-171

Information- & Navigationsarchitektur

Einen Modus für die Darstellung von visuellen Informationen zur Verfügung stellen, der für Benutzer mit geringer Sehschärfe gebrauchstauglich ist: Die Software sollte mindestens einen Modus für die Darstellung von visuellen Informationen zur Verfügung stellen, der für Benutzer mit einer korrigierten Sehschärfe zwischen 20/70 und 20/200 gebrauchstauglich ist und keine Ausgabe im Audioformat erfordert.

ISO 9241-171

Information- & Navigationsarchitektur

Falls der virtuelle Bildschirm (z. B. der Desktop) größer ist als die sichtbare Anzeige, sodass sich ein Teil der Informationen außerhalb des angezeigten Bereichs befindet, muss die Plattformsoftware einen Mechanismus zur Verfügung stellen, mit dessen Hilfe von der Tastatur aus auf diese Informationen zugegriffen werden kann.

ISO 9241-171

Information- & Navigationsarchitektur Navigation

Die Software muss es Benutzern ermöglichen, die Tastatur oder sonstige nicht zu den Zeigern gehörende Eingabeeinrichtungen zu benutzen, um den Tastaturfokus auf ein beliebiges der zum gegebenen Zeitpunkt aktiven Fenster zu richten, sofern dieses den Tastaturfokus erhalten darf.

ISO 9241-171

Information- & Navigationsarchitektur

Die Software sollte die taktile Ausgabe nicht als die einzige Art der Informationsübermittlung oder der Anzeige einer Aktion verwenden.

ISO 9241-171

Information- & Navigationsarchitektur Fehlermeldungen, Hilfe & Hinweise

Die Software sollte wohlbekannte (aus dem täglichen Leben vertraute) taktile Muster verwenden, um taktile Meldungen darzustellen.

ISO 9241-171

Information- & Navigationsarchitektur

Die Software sollte es den Benutzern erlauben, die Parameter der taktilen Ausgabe so anzupassen, dass Unannehmlichkeiten, Schmerz oder Verletzung vermieden werden.

ISO 9241-171

Information- & Navigationsarchitektur

Die Menschen nutzen die Zugänglichkeitsfunktionen von Apple, wie z. B. reduzierte Transparenz, VoiceOver und größere Textgröße, um die Art und Weise, wie sie mit ihren Geräten interagieren, so zu personalisieren, wie es für sie am besten funktioniert. Eine barrierefreie App unterstützt solche Personalisierungen durch ihr Design und bietet jedem eine großartige Benutzererfahrung, unabhängig von seinen Fähigkeiten oder der Art und Weise, wie er seine Geräte nutzt.

Apple Inc.

Information- & Navigationsarchitektur

Beginnen Sie damit, Ihre App so zu gestalten, dass sie inklusiv und für jeden zugänglich ist, indem Sie die Hauptkategorien von Beeinträchtigungen und die Zugänglichkeitsmerkmale, die ihnen entgegenwirken, überprüfen.

Apple Inc.

Information- & Navigationsarchitektur Allgemeines

Menschen mit körperlichen und motorischen Herausforderungen können Schwierigkeiten haben, ihre Geräte zu halten oder zu manipulieren. Apple stellt mehrere Unterkünfte zur Verfügung, damit Menschen ihre Geräte ohne die Notwendigkeit einer feinmotorischen Steuerung nutzen können: Switch Control integriert adaptive Geräte mit iPhone, iPad, Mac und Apple TV/ Siri hilft Menschen, Apps und Geräte mit ihrer Stimme zu steuern/ Assistive Touch erleichtert die Ausführung von Standardgesten

ISO 9241-171

Information- & Navigationsarchitektur

Design mit Blick auf Barrierefreiheit: Bei der Zugänglichkeit geht es nicht nur darum, Informationen für Nutzer mit Behinderungen zugänglich zu machen - es geht darum, Informationen für jeden zugänglich zu machen, unabhängig von seinen Fähigkeiten oder seiner Situation. Wenn Sie Ihre Anwendung unter dem Gesichtspunkt der Barrierefreiheit entwerfen, müssen Sie der Einfachheit und Wahrnehmbarkeit Vorrang einräumen und jede Design-Entscheidung prüfen, um sicherzustellen, dass sie keine Benutzer ausschließt, die unterschiedliche Fähigkeiten haben oder auf unterschiedliche Weise mit ihren Geräten interagieren.

Apple Inc.

Information- & Navigationsarchitektur

Einfachheit - Ermöglichung vertrauter, konsistenter Interaktionen, die komplexe Aufgaben einfach und unkompliziert durchführbar machen.

ISO 9241-171

Information- & Navigationsarchitektur Allgemeines

Wahrnehmbarkeit - Sicherstellen, dass alle Inhalte wahrgenommen werden können, unabhängig davon, ob die Menschen Sehen, Hören oder Tasten verwenden.

Apple Inc.

Information- & Navigationsarchitektur Allgemeines

Setzen Sie die Gesten der Plattform nicht außer Kraft. Es wird erwartet, dass Systemgesten, wie z. B. das Herunterschwenken, um Notification Center oder die in den Systemeinstellungen verfügbaren MacOS-Trackpad-Gesten anzuzeigen, unabhängig von der verwendeten Anwendung funktionieren.

Apple Inc.

Information- & Navigationsarchitektur Navigation

Sie bevorzugen vereinfachte Gesten für die Interaktion. Komplexe Gesten wie Mehrfingergesten, langes Drücken oder wiederholtes Drücken von Tasten können für viele Menschen eine Herausforderung darstellen. Die Verwendung möglichst einfacher Gesten verbessert das Erlebnis für alle, die mit Ihrer Anwendung interagieren.

Apple Inc.

Information- & Navigationsarchitektur

Bieten Sie alternative Möglichkeiten, gestenbasierte Aktionen durchzuführen. Fügen Sie eine Option für Personen ein, die eine bestimmte Geste möglicherweise nicht ausführen können. Wenn z.B. durch Streichen eine Zeile in einer Tabelle gelöscht wird, sollten Sie den Personen auch eine alternative Möglichkeit zum Löschen von Elementen durch einen Bearbeitungsmodus oder durch das Angebot einer Schaltfläche Löschen in einer Elementdetailansicht bieten.

Apple Inc.

Information- & Navigationsarchitektur

Stellen Sie sicher, dass alle Benutzer wichtige Aktionen in Ihrer Anwendung ausführen können, auch wenn sie 3D Touch oder Force Touch nicht verwenden können.

Apple Inc.

Information- & Navigationsarchitektur

Benachrichtigen Sie VoiceOver, wenn sich Inhalt oder Layout auf dem Bildschirm ändern. Eine unerwartete Änderung des Inhalts oder Layouts kann für VoiceOver-Benutzer sehr verwirrend sein, da sie bedeutet, dass ihre mentale Abbildung des Bildschirms nicht mehr genau ist. Es ist von entscheidender Bedeutung, Änderungen auf dem Bildschirm zu melden, damit VoiceOver und andere unterstützende Technologien den Menschen helfen können, ihr Verständnis des Bildschirms zu aktualisieren.

Apple Inc.

Information- & Navigationsarchitektur Leichte Sprache Schhnittstellen-Elemente allgemein

Inhalt - Texte, Bilder, Audio und Video liefern die Informationen, die die Leute von Ihrer Anwendung erwarten. Sie können dazu beitragen, Ihre Inhalte für jeden zugänglich zu machen, indem Sie sich um eine einfache Ausdrucksweise bemühen und alternative Versionen der Informationen zur Verfügung stellen.

Apple Inc.

Information- & Navigationsarchitektur

Wenn die Navigation einfach ist, verstehen die Benutzer, wo sie sich in Ihrer App befinden und was wichtig ist. Um hervorzuheben, welche Informationen wichtig sind, sorgen mehrere visuelle und textliche Hinweise wie Farbe, Form, Text und Bewegung für Klarheit.

Google

Information- & Navigationsarchitektur Navigation

Helfen Sie Benutzern bei der Navigation, indem Sie klare Layouts mit eindeutigen Handlungsaufforderungen entwerfen.

Google

Information- & Navigationsarchitektur Schhnittstellen-Elemente allgemein Allgemeines

Jede hinzugefügte Schaltfläche, jedes Bild und jede hinzugefügte Textzeile erhöht die Komplexität einer UI. Damit sie trotzdem verstanden wird, erreichen Sie durch: Deutlich sichtbare Elemente, Ausreichender Kontrast und Größe, eine klare Hierarchie der Wichtigkeit, wichtige Informationen, die auf einen Blick erkennbar sind.

Google

Information- & Navigationsarchitektur

Platzieren Sie wichtige Aktionen am oberen oder unteren Rand des Bildschirms (erreichbar über Tastaturkürzel), Verwandte Elemente einer ähnlichen Hierarchie nebeneinander stellen.

Google

Information- & Navigationsarchitektur

Durch die Platzierung wichtiger Aktionen am oberen Rand des Bildschirms wird ihnen in der Hierarchie mehr Bedeutung beigemessen.

Google

Information- & Navigationsarchitektur

Visuelle Hierarchie: Damit der Bildschirmleser den Inhalt in der beabsichtigten Reihenfolge auslesen kann, ist es wichtig, dass die Designer mit den Entwicklern zusammenarbeiten - sowohl um den HTML-Code in der richtigen Reihenfolge zu schreiben, als auch um zu verstehen, wie der Bildschirmleser die Designs interpretiert. Während CSS das Layout und das Erscheinungsbild einer Seite bestimmt, stützen sich Screenreader auf die Top-Down-Struktur von HTML auf jeder Plattform (Handy oder Web). Diese Struktur erstellt eine Karte, der der Screenreader beim Lesen des Inhalts folgen kann.

Google

Information- & Navigationsarchitektur

Der Eingabefokus, der der Reihenfolge des visuellen Layouts folgt, fließt normalerweise vom oberen zum unteren Bildschirmrand. Er kann vom wichtigsten bis zum unwichtigsten Element durchlaufen. Überlegen Sie, wie Sie Ihre Fokuspunkte und Bewegungen bestimmen können: Die Reihenfolge, in der die Elemente den Fokus erhalten/ Die Art und Weise/ in der Elemente gruppiert werden/ Wo sich der Fokus verschiebt, wenn das fokussierte Element verschwindet/ Die Schwerpunkte können durch eine Kombination aus visuellen Indikatoren und Zugänglichkeitstext ausgedrückt werden.

Google

Information- & Navigationsarchitektur Allgemeines

Zeiger-Zielmarken sind ähnlich wie Berührungs-Zielmarken, gelten aber für die Verwendung von bewegungserfassenden Zeigegeräten wie einer Maus oder einem Stift. Ziehen Sie in Erwägung, Zeigerzielgeräte mit mindestens 44 x 44 dp herzustellen.

Google

Information- & Navigationsarchitektur Buttons & Links Schhnittstellen-Elemente allgemein Allgemeines

Touch Target Abstand: In den meisten Fällen fördern Berührungsziele, die durch 8dp Raum oder mehr getrennt sind, eine ausgewogene Informationsdichte und Benutzerfreundlichkeit.

Google

Information- & Navigationsarchitektur Schhnittstellen-Elemente allgemein Allgemeines

Gruppierung von Items - Verwandte Items können zur Verbesserung der Lesbarkeit nahe beieinander gruppiert werden.

Google

Information- & Navigationsarchitektur

Fügen Sie gezielte Keywords ein.

Google

Information- & Navigationsarchitektur Navigation

Benutzer können Ihre Anwendung mithilfe von Sound navigieren, wenn Sie beschreibende Labels zu UI-Elementen hinzufügen. Bei der Verwendung eines Screenreaders (wie TalkBack) und der Navigation durch Berührungsexploration werden Beschriftungen laut ausgesprochen, wenn Benutzer Oberflächenelemente auf dem Bildschirm berühren. Die Verwendung von Screenreadern kann schwierig sein: Ton über einen Screenreader abgespielt wird, z. B. Hintergrundmusik, die automatisch abgespielt wird (Sie können Steuerelemente bereitstellen, mit denen Benutzer diese Töne anhalten oder stoppen können)/ zusätzliche Töne zu nativen Elementen hinzugefügt werden (Screenreader können native Elemente korrekt interpretieren)

Google

Information- & Navigationsarchitektur
Schlechtes UI, mit falscher Anordnung der wichtigen UI Elemente.

Falsch: Wenn wichtige Aktionen in andere Inhalte eingebettet sind, kann es unklar sein welche die wichtigen Elemente auf der Seite sind.

Google

Information- & Navigationsarchitektur
Korrektes UI, mit richtiger Anordnung der wichtigen UI Elemente.

Information- & Navigationsarchitektur
Links im Bild ist eine Korrekte Anordnung des UI. Im rechten Bild ist die Hierarchie falsch angelegt.

Damit der Bildschirmleser den Inhalt in der beabsichtigten Reihenfolge auslesen kann, ist es wichtig, dass die Designer mit den Entwicklern zusammenarbeiten - sowohl um den HTML-Code in der richtigen Reihenfolge zu schreiben, als auch um zu verstehen, wie der Bildschirmleser die Designs interpretiert.

Links-Korrekt: Das Bild spiegelt die visuelle Hierarchie wider, indem es den Inhalt von oben links (Schritt 1) nach oben rechts (Schritt 2), von unten links (Schritt 3) nach unten rechts (Schritt 4) liest.

Rechts-Falsch: Während einige Benutzer Bilder in der visuellen Reihenfolge des Bildschirms von oben links (Schritt 1) nach oben rechts (Schritt 2), von unten links (Schritt 3) nach unten rechts (Schritt 4) betrachten, verbalisieren Bildschirmleseprogramme den Inhalt standardmäßig in der Reihenfolge von oben nach unten.

Google

Information- & Navigationsarchitektur
Auf den Bild sieht man ein UI, auf dem die Interface Elemente mit Fokusnummern versehen waren, Entsprechend ihrer Bedeutung und Reihenfolge.

Der Eingabefokus, der der Reihenfolge des visuellen Layouts folgt, fließt normalerweise vom oberen zum unteren Bildschirmrand. Er kann vom wichtigsten bis zum unwichtigsten Element durchlaufen. Überlegen Sie, wie Sie Ihre Fokuspunkte und Bewegungen bestimmen können. Die schwarzen Kreise zeigen die Reihenfolge an, in der die Bildschirmelemente den Fokus erhalten könnten.

Google

Information- & Navigationsarchitektur Buttons & Links
Links sieht man das UI mit korrekter Anordnung von Wert und Schieberegler. Links im Bild ist der Wert zum passenden Schieberegler zu weit entfernt.

Links-Korrekt: Der Schiebereglerwert befindet sich in unmittelbarer Nähe des Schiebereglers.

Rechts-Falsch: Die Werte und die Schieberegel sind zu weit auseinander. Bei gewissen Bildschirmgrößen, könnte der Zusammenhang verloren gehen.

Google

* Die angegebenen Preise sind Endpreise. Aufgrund der Kleinunternehmerregelung gemäß § 19 UStG erfolgt kein Ausweis von Umsatzsteuer.