Die Druckversion wird nicht mehr unterstützt und kann Darstellungsfehler aufweisen. Bitte aktualisiere deine Browser-Lesezeichen und verwende stattdessen die Standard-Druckfunktion des Browsers.

aiMOOC

Bedienoberflächen und Anlagenvisualisierung – Mobile Bedienansichten barrierearm gestalten

QR-Code

Bedienoberflächen und Anlagenvisualisierung – Mobile Bedienansichten barrierearm gestalten

Einleitung

Mobile Bedienansichten müssen auf kleinen Displays schnell lesbar, eindeutig und alternativ bedienbar sein. In diesem Kurs übst Du das an einer vollständig fiktiven virtuellen Anlage. Du arbeitest nur lokal oder in einer ausdrücklich autorisierten Testumgebung. Es werden keine Produktivanlagen, fremden Netze, Zugangsdaten oder Kundendaten verwendet.

Kursziel	Nach dem Kurs kannst Du …
Lesbarkeit	Kontrast, Schrift, Zielgrößen und Informationsdichte für mobile Ansichten beurteilen.
Alternative Bedienung	Bedienwege über Touch hinaus planen, z. B. Tastatur, Schaltersteuerung oder Spracheingabe, soweit die Testumgebung dies unterstützt.
Diagnose	Status, Alarm, Signalqualität und Signalverläufe gemeinsam auswerten.
Sicher üben	Änderungen ausschließlich in einer lokalen oder ausdrücklich freigegebenen Simulation mit fiktiven Daten testen.

Ausbildungsfall: Virtuelle Anlage VAS-01

Du bist Auszubildende oder Auszubildender in der Automatisierungstechnik. Für die virtuelle Ausbildungsanlage VAS-01 soll eine mobile Bedienansicht entstehen. Sie zeigt einen Tank, eine Pumpe, ein Ventil, einen Förderer, einen Füllstandssensor und Meldungen. Alle Kennzeichen und Messwerte sind fiktiv.

Fiktives Betriebsmittel	Funktion in VAS-01
T-101	Tank
P-101	Pumpe
V-101	Ventil
L-101	Füllstandssensor
M-101	Förderantrieb
S-101	Lichtschranke

Sicherheitsgrenze: Die Übung bildet Bedienlogik nur didaktisch ab. Sie ersetzt weder eine Gefährdungsbeurteilung noch funktionale Sicherheit oder betriebliche Freigaben. Reale Schalthandlungen werden nicht durchgeführt.

Lernpfad in kurzen Einheiten

Lesbarkeit: Informationen auch auf kleinen Displays sicher erkennen.
Alternative Bedienung: Funktionen ohne zwingendes Ziehen oder reine Touch-Gesten erreichbar machen.
Anlagenvisualisierung: Zustände, Alarme und Signalverläufe eindeutig darstellen.
Diagnose: Messwert, Signalqualität und Anlagenzustand gemeinsam bewerten.
Usability-Test: Entwurf in einer lokalen, fiktiven Testumgebung prüfen.

Lerneinheit 1: Lesbarkeit auf kleinen Displays

Mobile Ansichten brauchen eine klare visuelle Hierarchie. Nach WCAG 2.2 gilt für normalen Text in der Regel ein Kontrast von mindestens 4,5:1, für großen Text mindestens 3:1. Bedeutungsvolle grafische Bedienelemente und Zustände benötigen in der Regel mindestens 3:1 Kontrast zu angrenzenden Farben. Farbe darf nicht das einzige Merkmal für Bedeutung sein.

Gute mobile Darstellung	Vermeiden
Text + Symbol + Farbe	Nur Rot/Grün
Einheit direkt am Messwert	Einheit nur in Legende
Kurze, eindeutige Meldung	Abkürzungen ohne Erklärung
Priorisierte Kernwerte	Alle Prozesswerte gleichzeitig

Basis-, Anwendungs- und Transferaufgabe 1

Niveau	Aufgabe in VAS-01	Begründetes Feedback
Basis	Formuliere „Rot = Fehler“ so um, dass die Meldung ohne Farbwahrnehmung verständlich bleibt.	Gut ist z. B. „FEHLER – L-101 Signal ungültig“ mit eindeutigem Symbol. Die Bedeutung bleibt erhalten, wenn Farbe nicht wahrgenommen wird.
Anwendung	Prüfe eine fiktive Smartphone-Ansicht bei 200 % Textvergrößerung. Welche zwei Informationen müssen sichtbar bleiben?	Messwert mit Einheit und Zustandsmeldung haben Vorrang. Sie tragen direkt zur Beurteilung des Anlagenzustands bei.
Transfer	Begründe, welche drei Informationen Du auf einer Startansicht zeigst und welche Du in eine Detailansicht verschiebst.	Eine gute Lösung priorisiert Handlungsrelevanz statt Informationsmenge. So sinkt die visuelle Last auf kleinen Displays.

Lerneinheit 2: Zielgrößen und alternative Bedienung

WCAG 2.2 nennt für Zeigerziele im Kriterium 2.5.8 grundsätzlich mindestens 24 × 24 CSS-Pixel oder eine zulässige Alternative über ausreichenden Abstand bzw. eine Ausnahme. Für industrielle Bedienansichten kann eine deutlich größere Zielgröße sinnvoll sein. Entscheidend ist: häufige und wichtige Funktionen müssen sicher auswählbar bleiben.

Alternative Bedienwege: Eine Funktion sollte nicht ausschließlich von einer komplexen Touch-Geste abhängen. Tastaturbedienung, Schaltersteuerung oder Spracheingabe können je nach System zusätzliche Zugänge schaffen. Ein sichtbarer Fokus zeigt, welches Element gerade aktiv ist.

Bei einer Funktion, die Ziehen verlangt, fordert WCAG 2.2 eine Bedienalternative mit einem einzelnen Zeiger ohne Ziehbewegung, sofern Ziehen nicht wesentlich ist. Für VAS-01 bedeutet das: Ein Sollwert kann zusätzlich über klar beschriftete Plus-/Minus-Schaltflächen oder eine direkte, validierte Eingabe verändert werden.

Basis-, Anwendungs- und Transferaufgabe 2

Niveau	Aufgabe in VAS-01	Begründetes Feedback
Basis	Nenne eine Alternative zu einer reinen Wisch- oder Ziehbedienung.	Einzeltipp-Schaltflächen oder eine direkte Eingabe reduzieren motorische Anforderungen und bieten einen zweiten Bedienweg.
Anwendung	Ordne fünf fiktive Bedienelemente per Tabulator an und prüfe, ob der Fokus sichtbar und logisch wandert.	Eine nachvollziehbare Reihenfolge unterstützt Tastatur- und Schalterbedienung. Unsichtbarer Fokus macht die aktuelle Bedienstelle unklar.
Transfer	Entwirf für „Pumpe in Simulation anfordern“ zwei Bedienwege und eine eindeutige Rückmeldung.	Zwei Bedienwege erhöhen Zugänglichkeit. Eine sichtbare Statusrückmeldung verhindert, dass Eingabe und Anlagenzustand verwechselt werden.

Lerneinheit 3: Zustände, Alarme und Signalverläufe

Eine gute Anlagenvisualisierung unterscheidet Befehl, Zustand, Warnung, Störung und Signalqualität. Alarmmanagement und HMI-Gestaltung sind Sicherheits- und Usability-Themen; Barrierearmut ergänzt diese, ersetzt sie aber nicht.

Fiktiver Signalverlauf VAS-01

Zeit	L-101 Füllstand	Signalqualität	P-101	Meldung
00:00	42 %	gültig	AUS	Bereit
00:10	49 %	gültig	EIN	Füllen
00:20	56 %	gültig	EIN	Füllen
00:30	56 %	ungültig	AUS	Sensorprüfung
00:40	57 %	ungültig	AUS	Quittierung erst nach Klärung

Diagnosehinweis: Ab 00:30 ist der angezeigte Messwert nicht verlässlich, weil die Signalqualität „ungültig“ ist. In der Simulation darfst Du deshalb nicht allein aus dem Zahlenwert auf den realen Füllstand schließen.

Interaktive Steuerungs- und Diagnoseaufgabe

Entscheidung	Passende Begründung
Signalqualität zuerst prüfen	Ein plausibel aussehender Messwert kann bei ungültiger Qualität unzuverlässig sein.
Statusmeldung lesen	Sie erklärt, warum die Simulation den Pumpenzustand geändert hat.
Ursache vor Quittierung klären	Quittieren bestätigt eine Meldung, beseitigt aber nicht automatisch ihre Ursache.
Nur Simulation bedienen	Der Lernauftrag erlaubt keine Eingriffe in reale Anlagen.
Rückmeldung kontrollieren	Ein Bedienbefehl ist nicht dasselbe wie der bestätigte Anlagenzustand.

Basis-, Anwendungs- und Transferaufgabe 3

Niveau	Aufgabe in VAS-01	Begründetes Feedback
Basis	Markiere im Signalverlauf den ersten Zeitpunkt mit ungültiger Signalqualität.	00:30 ist der Wendepunkt. Ab dort muss der Zahlenwert als unsicher behandelt werden.
Anwendung	Erkläre, warum „P-101 AUS“ und „L-101 56 %“ zusammen noch keine eindeutige Fehlerursache liefern.	Ein Zustand zeigt nur, was gerade gemeldet wird. Für eine Diagnose brauchst Du zusätzlich Qualität, Verlauf und Kontext.
Transfer	Gestalte eine mobile Diagnosekarte, die Messwert, Qualität, Zeitstempel und Meldung gemeinsam zeigt.	Die vier Informationen machen Unsicherheit sichtbar und verhindern, dass ein einzelner Wert überinterpretiert wird.

Lerneinheit 4: Mobile Prüfung in der lokalen Testumgebung

Die Testumgebung enthält nur fiktive Daten und eine virtuelle Anlage. Prüfe den Entwurf mit mehreren Eingabe- und Wahrnehmungswegen. Eine mobile Ansicht darf die Orientierung nicht ohne wesentlichen Grund auf Hoch- oder Querformat festlegen.

Prüfschritt	Beobachtung
Text vergrößern	Bleiben Werte, Einheiten und Meldungen lesbar?
Hoch- und Querformat	Bleibt die Kernfunktion erreichbar?
Tastatur	Sind alle vorgesehenen Funktionen erreichbar und ist der Fokus sichtbar?
Touch	Sind Ziele groß genug und nicht unnötig dicht?
Ohne Farbe	Bleiben Zustände durch Text oder Symbole unterscheidbar?
Ziehbewegung vermeiden	Gibt es einen Einzeltipp- oder Eingabeweg?
Signalfehler simulieren	Werden Qualität und Unsicherheit eindeutig angezeigt?

Basis-, Anwendungs- und Transferaufgabe 4

Niveau	Aufgabe in VAS-01	Begründetes Feedback
Basis	Teste die Startansicht einmal nur mit Tastatur.	So erkennst Du früh, ob Funktionen ungewollt nur per Touch erreichbar sind.
Anwendung	Simuliere lokal eine ungültige Sensorqualität und beobachte Meldung, Fokus und Rückmeldung.	Der Test verbindet Diagnose mit Bedienbarkeit. Gute Gestaltung macht sowohl den Fehler als auch den nächsten sicheren Schritt sichtbar.
Transfer	Vergleiche zwei Entwürfe: einer zeigt zehn gleichgewichtete Werte, der andere drei Kernwerte und eine Detailnavigation. Begründe Deine Wahl.	Für ein kleines Display ist die priorisierte Ansicht meist robuster, sofern Details verlustfrei erreichbar bleiben.

Gestufte Hilfen zum Ausbildungsfall

Hilfestufe	Leitfrage
Hilfe 1 – Wahrnehmen	Welche Information verschwindet, wenn Du Farbe oder feine Unterschiede nicht sicher erkennst?
Hilfe 2 – Bedienen	Kann dieselbe Funktion ohne Ziehen und ohne präzise Touch-Geste erreicht werden?
Hilfe 3 – Diagnostizieren	Stimmen Messwert, Signalqualität, Zeitstempel und Anlagenzustand logisch zusammen?
Hilfe 4 – Absichern	Bleibt jede Übung vollständig in der lokalen oder ausdrücklich autorisierten Testumgebung mit fiktiven Daten?

Quellencheck und Medienrechte

Die folgenden fachlichen Quellen wurden für den Kurs herangezogen. WCAG ist eine Richtlinie für Web-Barrierefreiheit; W3C erläutert zusätzlich ihre Anwendung auf mobile Web- und App-Szenarien. EN 301 549 behandelt Barrierefreiheitsanforderungen an IKT. ISO 9241-110 beschreibt Interaktionsprinzipien. ISA-101 und IEC 62682 geben fachlichen Kontext für industrielle HMI- bzw. Alarmgestaltung.

Fachquelle	Verwendung im Kurs
W3C WCAG 2.2	Kontrast, Farbe, Tastatur, Zielgröße, Ziehbewegung, Orientierung
W3C Guidance on Applying WCAG 2.2 to Mobile Applications	Übertragung der WCAG-Prinzipien auf mobile Bedienoberflächen
ETSI EN 301 549 V3.2.1	Barrierefreiheitsanforderungen an IKT
ISO 9241-110:2020	Interaktionsprinzipien und Gebrauchstauglichkeit
ISA-101	HMI-Kontext für Prozess- und Anlagenbedienung
IEC 62682:2022	Alarmmanagement im Prozessumfeld

Medienrechte: Die eingebetteten Commons-Dateien wurden auf ihren Dateibeschreibungsseiten geprüft. Die W3C-WAI-Videos sind Originalmaterial des W3C; W3C erlaubt ihre Nutzung in Präsentationen und Schulungen unter den angegebenen Nutzungsbedingungen und mit Quellenangabe.

Medium	Lizenz / Nutzungshinweis	Quelle
Worker interacts with machine control panel in a manufacturing facility.jpg	CC BY 2.0	Wikimedia Commons
Control centre in Iru Thermal Power Plant.jpg	CC BY-SA 4.0	Wikimedia Commons
Accessibility.svg	CC BY-SA 4.0	Wikimedia Commons
Smartphone icon.svg	CC BY-SA 3.0	Wikimedia Commons
Control Room DSC0028.jpg	CC BY-SA 4.0	Wikimedia Commons
Pump with tank pid de.svg	CC BY-SA 3.0	Wikimedia Commons
Ladder logic diagram.jpg	CC BY-SA 4.0	Wikimedia Commons
Waveforms.svg	CC BY-SA 3.0	Wikimedia Commons
W3C WAI Videos	Nutzung für Präsentationen und Training mit Quellenangabe nach W3C-Hinweisen	W3C Permission to Use WAI Material

Interaktive Aufgaben

Quiz: Teste Dein Wissen

Welcher Mindestkontrast gilt nach WCAG 2.2 in der Regel für normalen Text? (4,5 zu 1) (!2 zu 1) (!3 zu 1) (!10 zu 1)

Wie sollte ein kritischer Zustand barriereärmer dargestellt werden? (Text plus Symbol plus Farbe) (!Nur rote Farbe) (!Nur blinkende Farbe) (!Nur ein Farbpaar)

Welche Mindestzielgröße nennt WCAG 2.2 im Kriterium Target Size Minimum grundsätzlich? (24 mal 24 CSS-Pixel) (!8 mal 8 CSS-Pixel) (!12 mal 12 CSS-Pixel) (!16 mal 16 CSS-Pixel)

Welche Alternative passt zu einer nicht wesentlichen Ziehbewegung? (Einzeltipp oder direkte Eingabe) (!Nur schneller ziehen) (!Nur länger drücken) (!Nur quer wischen)

Was zeigt ein sichtbarer Tastaturfokus? (Das aktuell bedienbare Element) (!Die Netzwerkadresse) (!Die höchste Alarmpriorität) (!Den letzten Messwert)

Welche Aussage zu Farbe ist für barrierearme Bedienansichten richtig? (Farbe darf nicht die einzige Informationsträgerin sein) (!Rot und Grün reichen immer aus) (!Farbe ersetzt Beschriftungen) (!Farbe ersetzt Symbole)

Was bedeutet eine ungültige Signalqualität im Ausbildungsfall? (Der Messwert darf nicht allein als verlässlich behandelt werden) (!Der Messwert ist automatisch exakt) (!Die Pumpe muss real gestartet werden) (!Der Alarm darf ignoriert werden)

Wie sollte die Bildschirmausrichtung behandelt werden? (Nicht ohne wesentlichen Grund festlegen) (!Immer nur Hochformat) (!Immer nur Querformat) (!Bei jeder Meldung wechseln)

Warum wird ein Bedienbefehl von der Zustandsrückmeldung getrennt? (Weil eine Eingabe noch keinen bestätigten Anlagenzustand beweist) (!Weil Rückmeldungen nur dekorativ sind) (!Weil Befehle keine Beschriftung brauchen) (!Weil Zustände nur durch Farbe gezeigt werden)

Welche Umgebung ist für die Übungen dieses Kurses vorgesehen? (Eine lokale oder ausdrücklich autorisierte Testumgebung mit fiktiven Daten) (!Eine fremde Produktionsanlage) (!Ein unbekanntes Firmennetz) (!Ein Kundensystem ohne Freigabe)

Memory

Kontrast	Lesbarkeit
Tastaturfokus	Aktuelle Bedienstelle
Statusmeldung	Rückmeldung
Signalqualität	Vertrauenswürdigkeit
Einzeltipp	Ziehalternative
Alarmpriorität	Dringlichkeit

Drag and Drop

Ordne die richtigen Begriffe zu.	Thema
Text und Symbol	Redundante Zustandsanzeige
Tastaturfokus	Alternative Bedienung
Signalqualität	Diagnose
Einzeltipp	Ziehalternative
Lokalsimulation	Testumgebung

Kreuzworträtsel

Kontrast	Welcher Begriff beschreibt den Helligkeitsunterschied zwischen Text und Hintergrund?
Tastatur	Welches Eingabemittel ermöglicht Bedienung ohne Touch?
Fokus	Wie heißt die sichtbare Markierung der aktuell bedienbaren Stelle?
Alarm	Wie heißt eine Meldung, die besondere Aufmerksamkeit erfordert?
Signal	Wie heißt ein übertragener Prozesswert oder Zustand allgemein?
Diagnose	Wie heißt das systematische Ermitteln einer Fehlerursache?

LearningApps

Lückentext

Auf kleinen Displays verbessert ausreichender

die Lesbarkeit.

Ein Zustand darf nicht ausschließlich durch

vermittelt werden.

Eine zusätzliche Eingabemöglichkeit kann die

sein.

Bei nicht wesentlichem Ziehen kann ein

als Alternative dienen.

Die aktuell bedienbare Stelle wird durch den sichtbaren

erkennbar.

Bei der Diagnose muss neben dem Messwert auch die

geprüft werden.

Die Übungen dieses Kurses laufen in einer lokalen

mit fiktiven Daten.

Nach einer Eingabe braucht die Bedienperson eine eindeutige

.

Offene Aufgaben

Leicht

Statusanzeige: Gestalte drei fiktive Zustände jeweils mit Text, Symbol und Farbe statt nur mit einer Farbe.
Lesbarkeit: Vergleiche zwei selbst gezeichnete Smartphone-Ansichten und markiere die besser lesbare Informationshierarchie.
Bedienelement: Entwirf vier gut unterscheidbare Schaltflächen für VAS-01 und begründe Beschriftung und Abstand.
Signalqualität: Formuliere aus „56 %“ eine Anzeige, die zusätzlich Qualität und Zeitstempel sichtbar macht.

Standard

Prototyping: Baue lokal einen Papier-, HTML- oder HMI-Mock-up der mobilen Startansicht mit ausschließlich fiktiven VAS-01-Daten.
Signalverlauf: Erstelle einen fiktiven Trend mit mindestens einem ungültigen Messabschnitt und beschreibe, wie die Unsicherheit angezeigt wird.
Tastaturbedienung: Führe in Deinem lokalen Prototyp einen vollständigen Bedienweg ohne Touch durch und dokumentiere Fokusreihenfolge und Rückmeldung.
Interview: Befrage eine Lehrkraft oder eine Ausbildungsfachkraft zu typischen Bedienbarrieren. Verwende keine Kunden-, Zugangsdaten oder Informationen aus Produktivsystemen.

Schwer

Responsive Design: Entwirf für VAS-01 eine Start- und Detailansicht für Hoch- und Querformat und begründe die Priorisierung der Informationen.
Testprotokoll: Entwickle ein Prüfprotokoll mit Kontrast, Zielgröße, Tastatur, Fokus, Ziehalternative, Orientierung und Diagnoseklarheit.
Alarmmanagement: Überarbeite eine fiktive Alarmansicht so, dass Priorität, Ursache, Zustand und Quittierung nachvollziehbar getrennt sind.
Erklärvideo: Produziere ein kurzes Lernvideo mit einer lokalen Simulation und fiktiven Daten, das eine barrierearme Diagnose erklärt. Zeige keine realen Anlagen, Zugangsdaten oder Kundendaten.

Lernkontrolle

Redundante Codierung: Eine mobile Ansicht zeigt „Störung“ ausschließlich durch Rot. Entwickle zwei alternative Darstellungen und begründe, welche Wahrnehmungsbarrieren sie reduzieren.
Alternative Eingabe: Eine Sollwertänderung funktioniert nur durch Ziehen eines kleinen Reglers. Entwirf einen zweiten Bedienweg und begründe ihn fachlich.
Diagnosestrategie: Ein Messwert bleibt konstant, während seine Signalqualität ungültig wird. Erkläre, welche Schlüsse noch zulässig sind und welche nicht.
Informationshierarchie: Ein Smartphone zeigt zwölf Prozesswerte gleichzeitig. Entscheide, welche Informationen auf die Startansicht gehören, und begründe Deine Priorisierung.
Orientierung: Beurteile einen Entwurf, der ausschließlich im Querformat funktioniert. Nenne Kriterien, mit denen Du entscheidest, ob die Einschränkung wesentlich ist.
Sicheres Testen: Eine Übung verlangt Zugriff auf eine reale Produktionsanlage. Formuliere eine sichere Alternative mit lokaler Simulation und fiktiven Daten und erkläre den Unterschied.

Lernnachweis

Für einen Lernnachweis solltest Du zeigen, dass Du nicht nur Regeln kennst, sondern sie auf einen fiktiven Bedienfall übertragen kannst.

Mobiler Prototyp: Start- und Detailansicht für VAS-01 mit klarer Informationshierarchie.
Barrierearme Darstellung: Zustände sind nicht nur über Farbe codiert; Text, Symbol und Kontrast sind nachvollziehbar gewählt.
Alternative Bedienung: Mindestens ein vollständiger Bedienweg funktioniert ohne Ziehbewegung und ist per Tastatur oder gleichwertiger Testalternative erreichbar.
Diagnose: Ein fiktiver Signalverlauf wird mit Messwert, Qualität, Zeitstempel und Meldung korrekt interpretiert.
Testdokumentation: Die Prüfung erfolgt ausschließlich lokal oder in ausdrücklich autorisierter Umgebung mit fiktiven Daten.
Begründung: Designentscheidungen werden mit WCAG-orientierten Kriterien und HMI-/Alarmkontext fachlich begründet.