Seminar evon XAMControl – Visualisierung, Web und mobile Bedienung

Inhaltsübersicht

• Zielsetzung
• Zielgruppe und Vorkenntnisse
• Seminarinhalte
• Kapitel 1: Bedienkonzept und Informationsarchitektur
• Kapitel 2: Vektorgrafik und Prozessbilder
• Kapitel 3: AutomationControls in der HMI
• Kapitel 4: Bedienung und Interaktion
• Kapitel 5: HTML5-Webvisualisierung
• Kapitel 6: Rollen, Mehrsprachigkeit und Themes
• Kapitel 7: Usability-Test und Abnahme
• Lernziele
• Praxis- und Qualitätsnachweis

Zielsetzung

Gestaltung skalierbarer XAMControl-HMI-Lösungen mit XAML-basierten Vektorgrafiken, HTML5-Webvisualisierung, Navigation, Animation, Multitouch, Rollenansichten und mobiler Bedienung. Die zweitägige Durchführung schafft ausreichend Zeit für Grundlagen, vollständige Konfiguration, praktische Umsetzung und systematische Prüfung.

Zielgruppe und Vorkenntnisse

Zielgruppe: HMI-Entwickler, Systemintegratoren, UX-Verantwortliche und Inbetriebnehmer von XAMControl-Bedienlösungen.

Vorkenntnisse: XAMControl-Grundlagen; Kenntnisse von Anlagenprozessen und Bedienanforderungen.

Seminarinhalte

Kapitel 1: Bedienkonzept und Informationsarchitektur

Inhaltsverzeichnis des Kapitels: Nutzeraufgaben erfassen; Informationen priorisieren; Navigation entwerfen; Gestaltungsregeln festlegen.

Ableitung einer konsistenten Visualisierungsstruktur aus Aufgaben, Rollen und Anlagenhierarchie.

1. Schritt 1: Nutzeraufgaben erfassen – Überwachen, Bedienen, Diagnostizieren und Auswerten je Rolle unterscheiden. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
2. Schritt 2: Informationen priorisieren – Übersicht, Abweichung, Alarm, Detail und Wartung in sinnvolle Ebenen gliedern. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
3. Schritt 3: Navigation entwerfen – Standort-, Anlagen-, Prozess- und Aufgabenperspektive kombinieren. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
4. Schritt 4: Gestaltungsregeln festlegen – Farben, Symbole, Texte, Einheiten und Interaktionen projektweit standardisieren. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.

Kapitelübung: Die Konfiguration wird an einem repräsentativen Beispiel umgesetzt. Abweichungen werden über Livewerte, Zustände und Protokolle eingegrenzt; der freigegebene Stand wird dokumentiert.

Kapitel 2: Vektorgrafik und Prozessbilder

Inhaltsverzeichnis des Kapitels: Bildraster anlegen; XAML-Elemente einsetzen; Animationen binden; Skalierung prüfen.

Aufbau auflösungsunabhängiger HMI-Bilder mit wiederverwendbaren Elementen.

1. Schritt 1: Bildraster anlegen – Arbeitsbereich, Kopf-/Fußzone, Navigation und Detailflächen konsistent dimensionieren. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
2. Schritt 2: XAML-Elemente einsetzen – Vektorobjekte, Ebenen und Gruppen strukturiert verwenden. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
3. Schritt 3: Animationen binden – Farbe, Sichtbarkeit, Position und Text an eindeutige Zustände koppeln. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
4. Schritt 4: Skalierung prüfen – Zoom, Panning, Decluttering und unterschiedliche Bildschirmgrößen testen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.

Kapitelübung: Die Konfiguration wird an einem repräsentativen Beispiel umgesetzt. Abweichungen werden über Livewerte, Zustände und Protokolle eingegrenzt; der freigegebene Stand wird dokumentiert.

Kapitel 3: AutomationControls in der HMI

Inhaltsverzeichnis des Kapitels: ACC-Grafik platzieren; Instanz verbinden; Darstellungsvariante wählen; Zustände testen.

Nutzung objektgebundener Standardgrafiken für konsistente Bedienung.

1. Schritt 1: ACC-Grafik platzieren – Vorgefertigtes Element per Drag-and-drop in das Prozessbild übernehmen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
2. Schritt 2: Instanz verbinden – Grafik eindeutig mit dem zugehörigen Automatisierungsobjekt verknüpfen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
3. Schritt 3: Darstellungsvariante wählen – Übersicht, Detail, Kompakt- oder Diagnoseansicht passend einsetzen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
4. Schritt 4: Zustände testen – Betrieb, Hand, Alarm, Verriegelung, Kommunikationsfehler und Wartung darstellen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.

Kapitelübung: Die Konfiguration wird an einem repräsentativen Beispiel umgesetzt. Abweichungen werden über Livewerte, Zustände und Protokolle eingegrenzt; der freigegebene Stand wird dokumentiert.

Kapitel 4: Bedienung und Interaktion

Inhaltsverzeichnis des Kapitels: Bedienhandlungen gestalten; Fehleingaben verhindern; Multitouch berücksichtigen; Kontextinformationen ergänzen.

Sichere Umsetzung von Befehlen, Sollwerten und Dialogen.

1. Schritt 1: Bedienhandlungen gestalten – Schalten, Stellen, Quittieren und Parametrieren mit eindeutiger Rückmeldung versehen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
2. Schritt 2: Fehleingaben verhindern – Wertebereiche, Bestätigung und rollenbezogene Sperren anwenden. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
3. Schritt 3: Multitouch berücksichtigen – Touch-Ziele, Gesten und Abstände für stationäre und mobile Nutzung optimieren. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
4. Schritt 4: Kontextinformationen ergänzen – Trend, Alarmhistorie, Dokument und Hilfe direkt am Objekt verfügbar machen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.

Kapitelübung: Die Konfiguration wird an einem repräsentativen Beispiel umgesetzt. Abweichungen werden über Livewerte, Zustände und Protokolle eingegrenzt; der freigegebene Stand wird dokumentiert.

Kapitel 5: HTML5-Webvisualisierung

Inhaltsverzeichnis des Kapitels: Webansichten auswählen; Responsive Verhalten prüfen; Performance optimieren; Sitzungsverhalten testen.

Bereitstellung browserbasierter Bedienung mit konsistentem Funktionsumfang.

1. Schritt 1: Webansichten auswählen – Geeignete Bilder, Navigation und Funktionen für den Browserbetrieb festlegen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
2. Schritt 2: Responsive Verhalten prüfen – Darstellung auf Desktop, Tablet und Smartphone kontrollieren. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
3. Schritt 3: Performance optimieren – Bildkomplexität, Aktualisierungsrate und Datenmenge angemessen begrenzen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
4. Schritt 4: Sitzungsverhalten testen – Anmeldung, Abmeldung, Unterbrechung und Wiederverbindung verifizieren. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.

Kapitelübung: Die Konfiguration wird an einem repräsentativen Beispiel umgesetzt. Abweichungen werden über Livewerte, Zustände und Protokolle eingegrenzt; der freigegebene Stand wird dokumentiert.

Kapitel 6: Rollen, Mehrsprachigkeit und Themes

Inhaltsverzeichnis des Kapitels: Rollenansichten konfigurieren; Texte zentralisieren; Sprachen prüfen; Themes anwenden.

Anpassung der Oberfläche an Nutzergruppen und Einsatzkontexte.

1. Schritt 1: Rollenansichten konfigurieren – Sichtbare Anlagen, Funktionen und Bedienrechte je Gruppe begrenzen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
2. Schritt 2: Texte zentralisieren – Bezeichnungen, Meldungen und Hilfetexte übersetzbar pflegen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
3. Schritt 3: Sprachen prüfen – Online-Umschaltung, Textlängen und Sonderzeichen in allen Ansichten testen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
4. Schritt 4: Themes anwenden – Kontrast, Corporate Design und Umgebungsbedingungen ohne Funktionsverlust abbilden. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.

Kapitelübung: Die Konfiguration wird an einem repräsentativen Beispiel umgesetzt. Abweichungen werden über Livewerte, Zustände und Protokolle eingegrenzt; der freigegebene Stand wird dokumentiert.

Kapitel 7: Usability-Test und Abnahme

Inhaltsverzeichnis des Kapitels: Aufgabenszenarien definieren; Bedienwege messen; Darstellung korrigieren; Freigabe dokumentieren.

Validierung der Bedienlösung anhand realistischer Aufgaben.

1. Schritt 1: Aufgabenszenarien definieren – Normalbedienung, Alarmreaktion, Diagnose und mobile Nutzung abdecken. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
2. Schritt 2: Bedienwege messen – Schritte, Suchaufwand, Rückmeldungen und Fehlerrisiken beobachten. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
3. Schritt 3: Darstellung korrigieren – Unklare Symbole, überladene Bilder und inkonsistente Zustände bereinigen. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.
4. Schritt 4: Freigabe dokumentieren – Gestaltungsstandard, Rollenprüfung, Geräteprüfung und offene Punkte festhalten. Der Arbeitsschritt wird anhand eines definierten Ausgangszustands durchgeführt, im System kontrolliert und mit einem nachvollziehbaren Prüfkriterium abgeschlossen.

Kapitelübung: Die Konfiguration wird an einem repräsentativen Beispiel umgesetzt. Abweichungen werden über Livewerte, Zustände und Protokolle eingegrenzt; der freigegebene Stand wird dokumentiert.

Lernziele

• Ein rollen- und aufgabenorientiertes HMI-Konzept entwickeln.
• Skalierbare XAML-Prozessbilder mit konsistenten Animationen erstellen.
• ACC-Grafiken sicher mit Automatisierungsinstanzen verbinden.
• Bedienhandlungen verständlich und fehlertolerant gestalten.
• HTML5-Web- und mobile Ansichten performant umsetzen.
• Mehrsprachigkeit, Themes und Rollenansichten prüfen.
• Die Visualisierung mit realistischen Nutzungsszenarien abnehmen.

Praxis- und Qualitätsnachweis

Die praktische Arbeit folgt einer einheitlichen Abfolge: Anforderung klären, Systemstruktur vorbereiten, Funktion konfigurieren, definierte Normal- und Fehlerfälle prüfen, Abweichungen korrigieren und den geprüften Konfigurationsstand sichern. Der Nachweis umfasst eine kurze Funktionsdemonstration, eine ausgefüllte Prüfliste und die nachvollziehbare Begründung zentraler Parameterentscheidungen.