Glanz: aiMOOC über GPT aiMOOC Action erstellt

2026-10-07T15:28:15Z

aiMOOC über GPT aiMOOC Action erstellt

Neue Seite

{{T}}
'''Bedienoberflächen und Anlagenvisualisierung – Mobile Bedienansichten barrierearm gestalten'''

{{BR}}
= 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.

[[Datei:Worker interacts with machine control panel in a manufacturing facility.jpg|500px|rahmenlos|center]]

{{#ev:youtube| https://www.youtube.com/watch?v=20SHvU2PKsM |500|center}}

{| class="wikitable"
! 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.
|}

{{BR}}
== 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.

[[Datei:Pump with tank pid de.svg|500px|rahmenlos|center]]

{| class="wikitable"
! 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.

{{BR}}
== 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.

{{BR}}
= 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.

[[Datei:Accessibility.svg|180px|rahmenlos|center]]

{{#ev:youtube| https://www.youtube.com/watch?v=Hui87z2Vx8o |500|center}}

{| class="wikitable"
! 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
|}

{{BR}}
== Basis-, Anwendungs- und Transferaufgabe 1 ==
{| class="wikitable"
! 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.
|}

{{BR}}
= 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.

[[Datei:Smartphone icon.svg|180px|rahmenlos|center]]

{{#ev:youtube| https://www.youtube.com/watch?v=CzfKB3PuuIY |500|center}}

'''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.

{{#ev:youtube| https://www.youtube.com/watch?v=93UgG72os8M |500|center}}

{{#ev:youtube| https://www.youtube.com/watch?v=7RHG_XiQ0ck |500|center}}

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.

{{BR}}
== Basis-, Anwendungs- und Transferaufgabe 2 ==
{| class="wikitable"
! 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.
|}

{{BR}}
= 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.

[[Datei:Control centre in Iru Thermal Power Plant.jpg|500px|rahmenlos|center]]

[[Datei:Control Room DSC0028.jpg|500px|rahmenlos|center]]

[[Datei:Waveforms.svg|500px|rahmenlos|center]]

{{BR}}
== Fiktiver Signalverlauf VAS-01 ==
{| class="wikitable"
! 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.

[[Datei:Ladder logic diagram.jpg|500px|rahmenlos|center]]

{{BR}}
== Interaktive Steuerungs- und Diagnoseaufgabe ==
<div class="lueckentext-quiz">

{| class="wikitable"
! 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.
|}
{{E}}
</div>

{{BR}}
== Basis-, Anwendungs- und Transferaufgabe 3 ==
{| class="wikitable"
! 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.
|}

{{BR}}
= 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.

{{#ev:youtube| https://www.youtube.com/watch?v=rbiI65Jcz5s |500|center}}

{| class="wikitable"
! 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?
|}

{{BR}}
== Basis-, Anwendungs- und Transferaufgabe 4 ==
{| class="wikitable"
! 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.
|}

{{BR}}
= Gestufte Hilfen zum Ausbildungsfall =
{| class="wikitable"
! 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?
|}

{{BR}}
= 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.

{| class="wikitable"
! Fachquelle
! Verwendung im Kurs
|-
| [https://www.w3.org/TR/WCAG22/ W3C WCAG 2.2]
| Kontrast, Farbe, Tastatur, Zielgröße, Ziehbewegung, Orientierung
|-
| [https://www.w3.org/TR/wcag2mobile-22/ W3C Guidance on Applying WCAG 2.2 to Mobile Applications]
| Übertragung der WCAG-Prinzipien auf mobile Bedienoberflächen
|-
| [https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_20/en_301549v030201a.pdf ETSI EN 301 549 V3.2.1]
| Barrierefreiheitsanforderungen an IKT
|-
| [https://www.iso.org/standard/75258.html ISO 9241-110:2020]
| Interaktionsprinzipien und Gebrauchstauglichkeit
|-
| [https://www.isa.org/standards-and-publications/isa-standards/isa-101-standards ISA-101]
| HMI-Kontext für Prozess- und Anlagenbedienung
|-
| [https://webstore.iec.ch/en/publication/65543 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.

{| class="wikitable"
! Medium
! Lizenz / Nutzungshinweis
! Quelle
|-
| Worker interacts with machine control panel in a manufacturing facility.jpg
| CC BY 2.0
| [https://commons.wikimedia.org/wiki/File:Worker_interacts_with_machine_control_panel_in_a_manufacturing_facility.jpg Wikimedia Commons]
|-
| Control centre in Iru Thermal Power Plant.jpg
| CC BY-SA 4.0
| [https://commons.wikimedia.org/wiki/File:Control_centre_in_Iru_Thermal_Power_Plant.jpg Wikimedia Commons]
|-
| Accessibility.svg
| CC BY-SA 4.0
| [https://commons.wikimedia.org/wiki/File:Accessibility.svg Wikimedia Commons]
|-
| Smartphone icon.svg
| CC BY-SA 3.0
| [https://commons.wikimedia.org/wiki/File:Smartphone_icon.svg Wikimedia Commons]
|-
| Control Room DSC0028.jpg
| CC BY-SA 4.0
| [https://commons.wikimedia.org/wiki/File:Control_Room_DSC0028.jpg Wikimedia Commons]
|-
| Pump with tank pid de.svg
| CC BY-SA 3.0
| [https://commons.wikimedia.org/wiki/File:Pump_with_tank_pid_de.svg Wikimedia Commons]
|-
| Ladder logic diagram.jpg
| CC BY-SA 4.0
| [https://commons.wikimedia.org/wiki/File:Ladder_logic_diagram.jpg Wikimedia Commons]
|-
| Waveforms.svg
| CC BY-SA 3.0
| [https://commons.wikimedia.org/wiki/File:Waveforms.svg Wikimedia Commons]
|-
| W3C WAI Videos
| Nutzung für Präsentationen und Training mit Quellenangabe nach W3C-Hinweisen
| [https://www.w3.org/WAI/about/using-wai-material/ W3C Permission to Use WAI Material]
|}

{{BR}}
= Interaktive Aufgaben =

{{BR}}
== Quiz: Teste Dein Wissen ==

{{MC}}
'''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)
{{E}}
<br>

{{MC}}
'''Wie sollte ein kritischer Zustand barriereärmer dargestellt werden?'''
(Text plus Symbol plus Farbe)
(!Nur rote Farbe)
(!Nur blinkende Farbe)
(!Nur ein Farbpaar)
{{E}}
<br>

{{MC}}
'''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)
{{E}}
<br>

{{MC}}
'''Welche Alternative passt zu einer nicht wesentlichen Ziehbewegung?'''
(Einzeltipp oder direkte Eingabe)
(!Nur schneller ziehen)
(!Nur länger drücken)
(!Nur quer wischen)
{{E}}
<br>

{{MC}}
'''Was zeigt ein sichtbarer Tastaturfokus?'''
(Das aktuell bedienbare Element)
(!Die Netzwerkadresse)
(!Die höchste Alarmpriorität)
(!Den letzten Messwert)
{{E}}
<br>

{{MC}}
'''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)
{{E}}
<br>

{{MC}}
'''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)
{{E}}
<br>

{{MC}}
'''Wie sollte die Bildschirmausrichtung behandelt werden?'''
(Nicht ohne wesentlichen Grund festlegen)
(!Immer nur Hochformat)
(!Immer nur Querformat)
(!Bei jeder Meldung wechseln)
{{E}}
<br>

{{MC}}
'''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)
{{E}}
<br>

{{MC}}
'''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)
{{E}}
<br>

{{BR}}
== Memory ==
<div class="memo-quiz">
{|
|-
| Kontrast || Lesbarkeit
|-
| Tastaturfokus || Aktuelle Bedienstelle
|-
| Statusmeldung || Rückmeldung
|-
| Signalqualität || Vertrauenswürdigkeit
|-
| Einzeltipp || Ziehalternative
|-
| Alarmpriorität || Dringlichkeit
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==
<div class="lueckentext-quiz">

{| class="wikitable"
! Ordne die richtigen Begriffe zu.
! Thema
|-
| '''Text und Symbol'''
| Redundante Zustandsanzeige
|-
| '''Tastaturfokus'''
| Alternative Bedienung
|-
| '''Signalqualität'''
| Diagnose
|-
| '''Einzeltipp'''
| Ziehalternative
|-
| '''Lokalsimulation'''
| Testumgebung

|}
{{E}}

<br>
</div>
<br />

{{BR}}
== Kreuzworträtsel ==
<div class="kreuzwort-quiz">
{|
|-
| 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?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==
<iframe> https://learningapps.org/index.php?s=Bedienoberflächen+und+Anlagenvisualisierung+Mobile+Bedienansichten+barrierearm+gestalten </iframe>

{{BR}}
== Lückentext ==
<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
Auf kleinen Displays verbessert ausreichender { Kontrast } die Lesbarkeit.
Ein Zustand darf nicht ausschließlich durch { Farbe } vermittelt werden.
Eine zusätzliche Eingabemöglichkeit kann die { Tastatur } sein.
Bei nicht wesentlichem Ziehen kann ein { Einzeltipp } als Alternative dienen.
Die aktuell bedienbare Stelle wird durch den sichtbaren { Fokus } erkennbar.
Bei der Diagnose muss neben dem Messwert auch die { Signalqualität } geprüft werden.
Die Übungen dieses Kurses laufen in einer lokalen { Simulation } mit fiktiven Daten.
Nach einer Eingabe braucht die Bedienperson eine eindeutige { Rückmeldung }.
</quiz>

<br>

{{BR}}
= Offene Aufgaben =

{{BR}}
=== 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.

{{BR}}
=== 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.

{{BR}}
=== 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.

{{:Offene Aufgabe - MOOC erstellen}}

{{BR}}
= 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.

<br>
<br>

{{BR}}
= 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.

<br>
<br>

{{BR}}
= OERs zum Thema =
<iframe> https://de.m.wikipedia.org/wiki/Benutzerschnittstelle </iframe>

Weiterführend: [[Digitale Barrierefreiheit]], [[Mensch-Maschine-Schnittstelle]], [[Prozessvisualisierung]], [[Usability]].

{{BR}}
= Verknüpfte Lernbereiche =
{| align=center
{{:D-Tab}}
'''[[Bedienoberfläche]]'''
# [[Mensch-Maschine-Schnittstelle]]
# [[Digitale Barrierefreiheit]]
# [[Anlagenvisualisierung]]
# [[Automatisierungstechnik]]
# [[Alarmmanagement]]
# [[Usability]]
|}

[[Kategorie:Informatik]]
[[Kategorie:Elektrotechnik]]
[[Kategorie:Automatisierungstechnik]]
[[Kategorie:Barrierefreiheit]]
[[Kategorie:Ausbildung]]
[[Kategorie:Mensch-Maschine-Schnittstelle]]
[[Kategorie:Prozessvisualisierung]]

{{BR}}
= aiMOOC-Projekte =
[[Kategorie:AI_MOOC]] [[Kategorie:GPT aiMOOC]]
{{MT}}

Bedienoberflächen und Anlagenvisualisierung – Mobile Bedienansichten barrierearm gestalten - Versionsgeschichte

Glanz: aiMOOC über GPT aiMOOC Action erstellt