Weboberflächen für die
Industrieautomation
Worauf Sie bei der Umsetzung von eigenen HMIs auf Basis
von Webtechnologie achten sollten
Fred Fischer, Matthias Kolmer, Achim Schreck
Version 1.0.3
Juli 2014
GTI-control mbH, D-97828 Marktheidenfeld, Düsseldorfer Str. 1c, www.GTI.de
Whitepaper
2 Whitepaper - Weboberflächen für die Industrieautomation
Ziel dieses Whitepapers
Moderne Benutzeroberflächen, wie wir sie von Smartphones und
Tablets kennen, erlauben spielend einfach die Nutzung komplexer
Funktionen. Sie funktionieren auf jedem Gerät, weil sie
betriebssystemunabhängig realisiert wurden, und zeigen auf, wohin
die Software der Zukunft geht: Cloudcomputing.
Die allgemeine Verfügbarkeit der Technologie, ergänzt um ein immer
breiter werdendes Angebot an kostenfreien und scheinbar sehr
leistungsfähigen Bibliotheken und Lösungsmustern suggeriert eine
einfache und kostengünstige Möglichkeit eigene Lösungen schnell
umzusetzen.
Doch aufgepasst: Die Tücken stecken im Detail und speziell
aufwendige und umfangreiche Lösungen müssen mit sehr viel
konzeptioneller Vorarbeit und tragfähigen Mustern umgesetzt
werden.
Dieses Whitepaper beleuchtet die Veränderungen am Markt und die
daraus resultierenden Anforderungen nach webfähigen Lösungen.
Anschließend wird - nach einem Überblick über die
unterschiedlichen Aspekte der Webtechnologie – aufgezeigt, worauf
bei einer eigenen Entwicklung geachtet werden muss.
Inhalt
Seite 3 - Motivation für Weboberflächen
Seite 5 - Industrie 4.0 braucht Webtechnologie
Seite 6 - Internationale Normen
Seite 7 - Zwei verschiedene Lösungsansätze
Seite 8 - Was steckt hinter HTML5?
Seite 9 - Dynamische Oberflächen
Seite 10 - Responsive Design
Seite 11 - Worauf ist bei einer Eigenentwicklung zu achten?
Seite 12 - Usability - Voraussetzung für gute Oberflächen
Seite 14 - PROCON-WEB als fertige Lösung
Seite 15 - Über GTI-control
3 Whitepaper - Weboberflächen für die Industrieautomation
Motivation für Weboberflächen [Achim Schreck]
Mobilgeräte erobern die Welt Im privaten Bereich sind sie bereits zur
Selbstverständlichkeit für die schnelle
Nutzung einer breiten Palette an
Software und des Internets geworden:
Smartphones und Tablets. Auch im
industriellen Bereich halten sie Einzug
und sollen bereits in 2014 in 30% der
produzierenden Unternehmen eingesetzt
werden.
Die in der Grafik dargestellte Entwicklung
der Stückzahlen für Smart Connected
Devices1
verdeutlicht deren Rolle als ein
bevorzugtes Gerät für die Nutzung von
Software. Dies wird auch im industriellen
Umfeld seine Auswirkung haben: Zur
Flexibilisierung von Produktionsabläufen
werden Smartphones und Tablets die
heute noch vorherrschende Landschaft
stationärer PCs ergänzen und teilweise
auch ablösen.
Dabei steigt die Leistungsfähigkeit der
Geräte auf ein Niveau, wie es vor ein paar
Jahren nur sehr performanten PCs
vorbehalten war. Daraus resultiert auch
die Voraussetzung für die Nutzung
hochdynamischer Oberflächen.
1 Siehe IDC’s Worldwide Smart Connected
Devices Tracker Forecast Data, 30.5.2013
4 Whitepaper - Weboberflächen für die Industrieautomation
Paradigmenwechsel Mit dem Hinzukommen neuer Betriebs-
systeme und dem schwindenden Einfluss
von Microsoft auf die Softwareplatt-
formen ist ein Paradigmenwechsel einge-
treten: Einer microsoft-basierenden Soft-
ware steht nicht automatisch der größte
Teil des Marktes offen!
Webtechnologie ist plattform-
unabhängig APPs können heute nicht platt-
formunabhängig realisiert werden. Des-
halb ist eine Webanwendung die einzig
durchgängige Lösung für eine Nutzung
über klassische PCs und den mobilen
Plattformen. Alle Plattformen habe eine
gemeinsame Eigenschaft: einen Browser
für die Nutzung des Internets.
Internationale Normung Webanwendungen setzen nicht auf einer
firmenspezifischen Technologie auf, son-
dern auf einer Normierung über unab-
hängigen Komitees. Dies schützt vor
negativem Einfluss firmenpolitischer Inte-
ressen. Im Kapitel 3 wird dies nochmals
ausführlich dargelegt.
Entwicklungsfokus Alle großen Softwareanbieter stecken
sehr große Anstrengungen in die Weiter-
entwicklung der Browser und übertreffen
sich permanent gegenseitig in der ständig
steigenden Leistungsfähigkeit der jeweils
neusten Version (siehe 2. Browserkrieg)2.
Dabei werden heute die von der
Hardwareplattform gegebenen Möglich-
2 http://de.wikipedia.org/wiki/Browserkrieg
keiten optimal ausgeschöpft und so
außergewöhnliche Ergebnisse erzielt.
Dieser enorme Entwicklungsschub für
Webtechnologie zeigt nicht nur die
Bedeutung, die weltweit operierende
Softwareunternehmen wie Microsoft,
Google, Apple und Co. diesem Thema
zuordnen, sondern auch die Investi-
tionssicherheit für Lösungen, die darauf
aufsetzen.
Browser als Grafikengine Das Rendern von Oberflächen über einen
Browser kann direkt mit der Nutzung
einer standardisierten sehr leistungs-
fähigen Grafikengine verglichen werden
(siehe Browservergleichstest)3. Dabei
können mit einfachen Mitteln Dynami-
sierungen und Animationen4 realisiert
werden. Dies reduziert die erforderlichen
Entwicklungsaufwendungen.
3 http://artikel.softonic.de/welcher-browser-ist-
schneller-ie-11-firefox-22-chrome-28-und-opera-15-
im-benchmark-vergleich 4 Aus Browsertest:
http://peacekeeper.futuremark.com/run.action
5 Whitepaper - Weboberflächen für die Industrieautomation
Industrie 4.0 braucht
Webtechnologie [Achim Schreck]
Industrie 4.0 – Die Zukunft Industrie 4.0 sieht eine intelligente Fabrik,
bei der Menschen und Maschinen eng
miteinander kommunizieren und da-
durch eine erheblich gesteigerte Produk-
tivität erreichen. Dabei sollen die Mög-
lichkeiten der Webtechnologie und die
gesteigerten Möglichkeiten kleiner und
intelligenter Geräte (das Internet der
Dinge5) verstärkt genutzt werden.
Cyber Physical Systems Als CPS sollen intelligente Subsysteme
z.B. für Sensoren und Aktoren mit
umfangreicher eigener Intelligenz per
Webtechnologie in komplexe Systeme
eingebunden werden. Dies ist heute
einfacher denn je: Für wenig Geld sind
Plattformen verfügbar, die Webunter-
stützung mitbringen und für umfang-
5 Siehe ‚The Internet of things‘ Hammersmith
group research report, 2/2010
reiche Verarbeitung und Speicherung von
Daten geeignet sind6.
Maschine als Cloud-
anwendung Die Maschinen-HMI, als Webanwendung
umgesetzt, stellt eine lokale Cloud dar, in
die sich alle Nutzergruppen mit ihrem
Bediengerät einwählen können, um für
ihre spezifische Aufgabe eine Unter-
stützung durch die HMI zu erfahren.
Die Bereitstellung von Auftragsstatus,
Qualitäts- oder Wartungsinformation ist
hilfreich für die Flexibilisierung des Pro-
duktionsprozesses und erhöht damit die
Produktivität. Das einfache Einbinden von
Benutzeroberflächen in und von vor- und
nachgelagerten Maschine oder in die
organisatorische Ebene schafft Möglich-
keiten für eine horizontale oder vertikale
Integration. 6 Beispiel Raspberry PI:
http://www.raspberrypi.org/
Touchpanel
6 Whitepaper - Weboberflächen für die Industrieautomation
Internationale Normen [Achim Schreck]
Was ist Webtechnologie? Bevor wir uns die Normierungen der
Webstandards anschauen wollen wir erst
festhalten was heute unter Web-
technologie verstanden wird:
Oberflächen: HTML, CSS
Kommunikation: http, AJAX
Daten: XML, DOM, DHTML
Sicherheit: XSS
Programmierung: JavaScript
Dies sind die heute am meisten
verwendeten Technologien und Voraus-
setzung für moderne Webanwendungen
(siehe Kapitel 5).
W3C Bereits 1994 wurde mit dem World Wide
Web Consortium ein unabhängiges
Gremium für die Standardisierung von
Webtechnologien gegründet. Unter den
etwa 400 Mitgliedern sind alle großen
Softwareanbieter vertreten7. Die vom
W3C erarbeiteten Standards stellen keine
Normen, sondern Empfehlungen dar, die
allerdings teilweise als internationale
Normen (Beispiel ISO) zugrunde gelegt
wurden.
HTML5 Die fünfte Überarbeitung der Hypertext
Markup Language ist eigentlich noch in
der Entwicklungsphase allerdings welt-
weit bereits Grundlage für moderne Web-
anwendungen und daher von aktuellen
Standardbrowsern durchgängig unter-
stützt.
7http://www.w3.org/Consortium/Member/List
#xW
Zahlreiche Erweiterungen ermöglichen die
Wiedergabe von Audio- oder Video-
aufzeichnungen und leistungsfähige 2D-
und 3D-Grafiken – ohne dass hierfür
spezifische PlugIns installiert werden
müssen. Die nunmehr letzte Fassung soll
noch in 2014 verabschiedet werden8.
CSS3 Um eine Trennung von Inhalten einer
Weboberfläche zu deren Darstellung zu
ermöglichen wurden Cascading Style
Sheets konzipiert. Dies erleichtert es
angepasste Oberflächen für unter-
schiedliche Geräte zu realisieren (siehe
Kapitel 7)9.
JavaScript Diese Scriptsprache ist Voraussetzung für
die schnelle Reaktion auf Benutzer-
interaktionen innerhalb eines Browsers.
JS ist heute so leistungsfähig, dass kom-
plexe Anwendungen umgesetzt werden
können. JavaScript ist als ECMA-262
international genormt10
und erfährt über
eine Vielzahl von Entwicklertools
umfangreiche Unterstützung.
8 http://www.w3.org/TR/html5/
9 http://www.w3.org/TR/CSS/
10 http://www.ecma-
international.org/publications/standards/Ecm
a-262.htm
7 Whitepaper - Weboberflächen für die Industrieautomation
Zwei verschiedene Lösungsansätze [Matthias Kolmer]
Client
WebServer
Aktion
ASP, PHP, Java, ...
Client
WebService
Datenanforderung Daten
Runtime (JavaScript)
Serverorientierte Lösung Clientorientierte Lösung
Serverorientierte Weban-
wendungen Bei einem serverseitigen Lösungsansatz
erfolgt die Aufbereitung der Webseiten
weitgehend im Server. Zur Aktualisierung
von Webseiten werden daher häufig
Postbacks verwendet. Dies führt zu einer
Verzögerung beim Bedienen der
Software.
Clientseitige
Webanwendungen Die Reaktion auf und die Verarbeitung
von Daten werden so weit wie möglich im
Client durchgeführt und dazu parallel
(asynchron) die Übertragungen von
Nettodaten zum Server durchgeführt.
Lastverteilung Durch die Generierung aller Oberflächen
direkt im Client kann auf Serverseite auf
aufwendige Webserver-Technologie wie
ASP, PHP oder Java verzichtet werden.
Deshalb sind moderne Weban-
wendungen solche, die sehr viele
Leistungen clientseitig (über JavaScript)
abwickeln.
Ermöglicht wird dies durch die extrem
leistungsfähigen Clienthosts. Die meisten
Smartphones verfügen heute über 2 bis 4
Rechenkerne sowie einer leistungs-
fähigen Grafikeinheit.
Dies hat den entscheidenden Vorteil,
dass günstige und leistungsschwächere
Server eingesetzt werden können. Die
einzige Voraussetzung ist ein lauffähiger
WebServer, der die HTML, CSS, JavaScript
und Bilddateien einmal pro Session
ausliefert.
Lediglich für die Kommunikation werden
kleine Pakete mit dem Server ausge-
tauscht, was auch die Last verringert und
die Anforderungen an die Bandbreite
reduziert.
Gesteigerte UX Bei einer clientseitigen Technologie kann
komplett auf sogenannte Postbacks
verzichtet werden wodurch die
Oberfläche wesentlich schneller auf die
Interaktion des Benutzers reagiert. Dies
führt zu einer erheblich gesteigerten User
Experience.
Durch asynchrone Kommunikation (AJAX)
bleibt die GUI immer bedienbar und
reaktiv.
Verbunden mit Multitouch- / Touchgesten
sowie Drag & Drop kommt echtes „APP-
Feeling“ auf.
8 Whitepaper - Weboberflächen für die Industrieautomation
Was steckt hinter HTML5? [Matthias Kolmer]
HTML5 – Das Web wird
erwachsen Durch die Entwicklung von HTML5 macht
die Webtechnologie einen großen Schritt
nach vorn. Plugin orientierte Lösungen,
wie Flash und Silverlight, gehören
zukünftig der Vergangenheit an11
.
Beispielsweise können Medien wie Audio
und Video nun direkt vom Browser
abgespielt werden. Als weitere wichtige
neue Technologie, gerade im HMI-
Bereich, wurde Canvas als Alternative zu
SVG zum Zeichnen eingeführt.
CSS3 – Oberflächen mit Stil
Eng mit HTML5 ist die Webtechnologie
CSS3 verbunden. Mit Cascading Style
Sheets (CSS) können Elemente von HTML
selektiert und gestylt werden. Neben
einfacheren Stylemöglichkeiten wie das
11
http://www.heise.de/developer/meldung/Plaudereien-ueber-das-Windows-8-geschuldete-Ende-von-Silverlight-und-WPF-1672346.html
Festlegen einer Hintergrundfarbe oder
das Positionieren von Elementen wurde
CSS3 um komplexere Module erweitert.
Hier sind vor allem die Transitions
(Statusübergänge) sowie die Animationen
hervorzuheben.
Beim Entwurf von CSS3 war ein Ziel des
W3C die Stylemöglichkeiten für mobile
Endgeräte, wie Smartphones und Tablets,
zu optimieren. Durch Media Queries
können die Eigenschaften des aktuellen
Gerätes abgefragt und bei der
Darstellung berücksichtigt werden (siehe
Kapitel 7).
JavaScript Die Definition einer einheitlichen
Programmiersprache für Weban-
wendungen hat es ermöglicht Intelligenz
in den Client zu bringen. In Kombination
mit AJAX sind damit schnelle Reaktionen
auf Benutzerinteraktionen und damit
auch hochdynamische Oberflächen
möglich.
9 Whitepaper - Weboberflächen für die Industrieautomation
Dynamische Oberflächen [Matthias Kolmer]
Tablets und Smartphones
setzen neue Maßstäbe in der
Bedienung Mit der Präsentation des ersten iPhones
auf der Macworld Conference & Expo in
San Francisco am 9.1.2007 wurde ein
neuer Gerätetypus mit einer bis dahin
noch nicht erreichten Usability für eine
rein per Touch zu bedienenden Benutzer-
oberfläche vorgestellt. Dies setzte neue
Maßstäbe und wird seit dem zunehmend
von anderen Anbietern übernommen
und überarbeitet. Heute ist bei einem
Bestand von weit über 1 Mrd. Smart-
phones der Standard für moderne GUIs
gesetzt. Dies hat auch die Messlatte für
Benutzeroberflächen im Automatisie-
rungsbereich deutlich erhöht.
Moderner Bildwechsel Vor allem bei modernen Geräten wie
Smartphones ist es wichtig die Bedienung
der Software auf Touch auszulegen.
Anstelle einer klassischen Navigation
kann ein Bildwechsel per Wischgeste
durchgeführt werden.
Bildinhalte bei Bedarf Oberflächen werden immer komplexer.
Für den Anwender ist es deshalb wichtig,
diese nicht mit Informationen zu
überfrachten. Per Fingerwisch, können
weitere Inhalte erst dann in den
sichtbaren Bereich gezogen werden,
wenn diese relevant werden.
Animierter Bildaufbau Durch einen animierten Bildaufbau kann
der Anwender besser nachvollziehen,
was gerade an der Oberfläche passiert.
Statusübergänge
(Transitions) Als optisches Highlight in der Oberfläche
dienen Statusübergänge. Neben der
Position können Farbe, Rotation, Größe
und Sichtbarkeit animiert verändert
werden. Im richtigen Maß eingesetzt wird
die GUI durch diese Technologie extrem
aufgewertet.
Dynamische Screens Klassische HMIs kennen nur das harte
Umschalten zwischen vielen ganzseitigen
Darstellungen, in die gerade mal noch
Dialoge eingeblendet werden können.
Mit Webtechnologie erschließt sich die
Welt gesplitteter und strukturierter
Screens, die als Ganzes oder in Teilen
gescrollt werden können. Damit sind
Erweiterungen von Parametertafeln kein
Problem mehr, weil das Formular einfach
erweitert werden kann.
Skalierbarkeit Auf Basis HTML5 können alle Darstellungen
beliebig – und vor allem auch verlustfrei -
skaliert werden. Dies erlaubt einfache
gerätespezifische Anpassungen und
entkoppelt von einer konkreten Auflösung
Pos A Pos B5s
1s
1s
1s
1s
10 Whitepaper - Weboberflächen für die Industrieautomation
Responsive Design [Matthias Kolmer]
Unterschiedliche Plattformen Responsive Design ist eine der
wichtigsten Anforderungen an zukunfts-
orientierten HMIs, um unterschiedlichste
Plattformen abzudecken (siehe Kapitel 1).
Eine moderne HMI kann sich heute nicht
mehr nur auf eine Auflösung oder
Displaygröße festlegen. Teilaspekte der
HMI müssen dem Anwender auf
Smartphones oder Tablets zur Verfügung
gestellt werden. Hier bietet eine Web-HMI
die optimale Voraussetzung mit einer
einheitlichen Technologie über alle
Plattformen.
Geräteinformationen Von allen Geräten, die sich auf eine Web
HMI aufschalten, können unter-
schiedlichste Geräteinformationen abge-
fragt werden. Dies ermöglicht eine
optimierte Darstellung, abhängig von
Größe, Auflösung oder Ausrichtung des
aktuellen Endgerätes.
Trennung von Inhalt und
Layout HTML und CSS ermöglicht eine strikte
Trennung von Inhalt und Layout. Durch
geringfügige Veränderung der CSS-
Eigenschaften eines HTML-Elements kann
im Sinne von Responsive Webdesign auf
die Gegebenheiten des Gerätes reagiert
werden. So können großflächige
Anzeigen mehr Container zur Aufnahme
zusätzlicher Informationen gegenüber
der reduzierten Smartphone-Variante
bekommen.
Herausforderung
Projektierbarkeit Die Herausforderung für Responsive
Design liegt in der einfachen
Projektierbarkeit für den Gestalter der
Oberfläche. Dieser sollte ohne Kenntnisse
von CSS3 und HTML5 die unterschied-
lichen Layouts und Zuordnungen von
Inhalten zusammenstellen können.
Rollenspezifische Inhalte Neben der technischen Anpassung der
Oberflächen an das jeweilige Gerät muss
auch eine Möglichkeit gefunden werden
die Oberfläche inhaltlich an die Rolle des
Nutzers anzupassen. So sollte der
Produktionsleiter auf sein Smartphone
Infos über Aufträge oder Kennzahlen
bekommen und nicht die gleichen Infos
wie der Werker an der Maschine. Hierfür
sind Anmeldefunktionen und Rollen-
zuordnungen notwendig
11 Whitepaper - Weboberflächen für die Industrieautomation
Worauf ist bei einer
Eigenentwicklung zu achten? [Matthias Kolmer]
Konzepte einer Web-HMI Die obige Grafik zeigt in vereinfachter
Form den möglichen Aufbau einer mo-
dernen WEB-HMI. Der WebBrowser nutzt
zwei Kommunikationskanäle zum Server.
Über den ersten werden die Konfigura-
tion (HTML) sowie die Laufzeitumgebung
(JavaScript) vom WebServer geladen. Der
zweite Kommunikationskanal zum Server
wird von der Laufzeitumgebung für den
asynchronen Datenaustausch (AJAX Re-
quest im JSON Format) mit dem Service
genutzt.
JavaScript – Fluch und Segen JavaScript ist die Programmiersprache
des WebBrowsers. Mit JavaScript können
Oberflächen Elemente selektiert und
dynamisch verändert werden. Werden
nun sämtliche Oberflächen direkt im
Client über JavaScript generiert, hat dies
den entscheidenden Vorteil, dass die
Anwendung wesentlich flüssiger reagiert.
Mit dem Server werden lediglich die
Daten ausgetauscht.
JavaScript hat jedoch eine schwache
Typisierung und wird nicht kompiliert.
Dementsprechend wichtig ist es, den
Quellcode sauber zu strukturieren und
wartbar zu halten. Den Komfort einer
Softwareplattform wie Microsoft .NET
sucht man bei JavaScript vergeblich.
Erprobte Konzepte Um gut wartbare sowie stabile JavaScript-
Anwendungen zu realisieren ist es not-
wendig auf die Technologie angepasste
Lösungsmuster zu entwickeln. Die Erwei-
terungsfähigkeit sollte zudem durch ein
PlugIn-Konzept erreicht werden, das
Schnittstellen für die Integration neuer
Controls anbietet.
Achtung vor Bibliotheken Im Internet kursieren unzählige JavaScript
Code Schnipsel und Bibliotheken. Hier ist
besondere Vorsicht geboten, da diese
häufig nicht für eine industrielle
Anwendung geeignet sind. Bei
klassischen Webseiten sind beispiels-
weise MemoryLeaks häufig zu vernach-
lässigen - nicht jedoch bei einer 24/7
Web-HMI!
12 Whitepaper - Weboberflächen für die Industrieautomation
Usability - Voraussetzung für gute
Oberflächen [Fred Fischer]
Ein MUSS für gute Ober-
flächen Komplexe technische Systeme, wie sie
heute Maschinen darstellen, können
durch das meist nur angelernte Personal
nur dann ausreichend sicher bedient
werden, wenn die Oberfläche nach
Usability-Gesichtspunkten konzeptioniert
wurde.
Diese Erkenntnis führte bereits 2006 zur
internationalen Norm EN ISO 924112
, in
der Richtlinien für die Mensch-Computer-
Interaktion festgehalten wurden.
Nutzerfreundliche
Oberflächen Um nutzerfreundliche Oberflächen zu
erhalten, müssen in einer ersten
Nutzeranalyse alle Nutzerrollen, deren
Aufgaben und die Arbeitsumgebung
analysiert werden. Eine methodische und
qualitative Untersuchung des Nutzer-
kontextes ist ausschlaggebend, um eine
nutzerfreundliche und intuitivführende
HMI zu garantieren.
12
http://de.wikipedia.org/wiki/EN_ISO_9241 (oder Bezug über den Beuth-Verlag, Berlin)
Mit einer ausführlichen Nutzeranalyse
und den bekannten gestalterischen
Mitteln, wie die der Constrains13
,
eindeutigen Affordancen14
und klarem
Feedback, können erwartungskonforme
und intuitiv nutzbare Schnittstellen
konstruiert werden.
Eine einheitliche Gestaltung der Bedien-
elemente mit klarer Darstellung des
Status gehört zur Steigerung der
Akzeptanz. Ebenso dient eine gelungene
Sichtbarkeit des Systemzustandes zur
Bildung von mentalen Modellen und
verringert somit Fehlereingaben.15
Schnell und effizient Einen bedeutenden Aspekt nimmt die
aufgabenorientierte Herangehensweise
ein. Denn die HMI versteht sich lediglich
als Mittel zum Zweck. Der Nutzer möchte
schnell und effizient sein Ziel erreichen.
Schnelle Erlernbarkeit durch aufgaben-
orientiertes Vorgehen, sowie eine
deutliche strukturierte Navigation sind
wesentliche Elemente für ein benutzer-
freundliches User-Interface.
13
vgl. Norman, 2002, S. 60 ff 14
vgl. Norman, 2002 15
vgl. Preim & Dachselt, 2010, S. 137f., vgl. Norman, 2002).
13 Whitepaper - Weboberflächen für die Industrieautomation
Denn, im Wesentlichen ist eine HMI
nichts anderes als ein großer Pool an
Funktionen und Informationen. Die
Herausforderung besteht darin, mit Hilfe
einer klaren Struktur, die Informationen
und Funktionen in klaren Einheiten zu
präsentieren und diese ohne hohen
kognitiven Aufwand zugänglich zu
machen.
Es stellt sich also die Frage, WELCHE
Informationen/Funktionen werden
WANN, WIE und WO von WEM benötig?
InformationsDESIGN Oft wird eine Oberfläche nur aufgrund
des „Designs“ bewertet, für gut oder
schlecht empfunden. Das Design ist
Grundlage für das heute verwendete
„User-Experience“. Das ästhetische
Empfinden, wird durch gestalterische
Stielmittel und entsprechenden
Animationen hervorgehoben.
Das Design, sprich, welche Farben,
welche Effekte wann und wie eingesetzt
werden, ist lediglich der Gipfel, nicht
jedoch der Berg an sich. Wesentliche
Grundelemente werden durch das
Informationsdesign geliefert. Es werden
die Eckpfeiler für Gruppierungen in
Chunks16 geliefert. Die Bildung von einer
klaren und konsistenten Grundlinie bildet
die Grundlage für ein gelungenes
ästhetisch anmutendes Design. Demnach
ist Design mehr als nur Farbe, Stil und die
nach außen gerichtete Anmutung.
Es kann wie folgt festgehalten werden:
Die Informationsverarbeitung entschei-
det, WO und WAS gelesen wird. Das
„Design“ entscheidet, WIE etwas gelesen,
gesehen werden soll.
Design ist nicht gleich Design Eine Oberfläche, die schnell Akzeptanz
beim Nutzer erzeugt, wird stark vom
Design geprägt. Dazu gehört auch das
Herausarbeiten eines eigenständigen und
zum Unternehmen passenden Stils.
Aktuelle Trends sind dem unterzuordnen.
Die passende Größe von Bedienelemen-
ten und Anzeigen, sowie guter Kontrast
und eindeutige Lesbarkeit unter kri-
tischen Umgebungsbedingungen, sind für
die Stilfindung wichtiger, als die beding-
ungslose Übernahme eines Corporate
Designs.
16
Vgl. Miller, 1991
14 Whitepaper - Weboberflächen für die Industrieautomation
PROCON-WEB als fertige Lösung [Achim Schreck]
HMIs als Tool Der Entwicklungsaufwand einer leistungs-
fähigen und projektierbaren Benutzer-
oberfläche auf Webtechnologie ist
erheblich und liegt für viele
Unternehmen außerhalb des amortisier-
baren finanziellen Rahmens. Die GTI-
control bietet dafür einen Baukasten für
die Umsetzung spezifischer Lösungen an.
Damit sind die Risiken einer
Eigenentwicklung erheblich reduziert und
eine frühere Verfügbarkeit gegeben.
Umfangreiche Funktionalität PROCON-WEB bietet eine herausragende
Funktionalität – nicht nur bezüglich der
Oberfläche, auch in Hinblick auf
Benutzerverwaltung/Rechte
Datalogging
Datenverwaltung (Rezepte,
Aufträge, Wartungszyklen, …)
Reporting
Online-Hilfe
Sprachumschaltung
u.v.a.m.
Der modulare Aufbau erlaubt es darüber
hinaus eigene PlugIns für die Benutzer-
oberfläche, als auch spezialisierte Server-
komponenten einzubinden.
Portierbare Lösung Für die Serverkomponenten liegen –
neben dem vollen Umfang eines SCADA-
Systems für Windows – Komponenten für
die Portierung auf beliebige Betriebs-
systeme vor. Eine besonders kompakte
und leicht übertragbare Form ist für
Codesys-Systeme vorhanden, die eine
HMI direkt auf Embedded Controllern
ermöglichen.
Basis für Sonderlösungen Der modulare Aufbau und die einfache
Portierbarkeit der Serverkomponenten
stellt die ideale Basis für
kundenspezifische Sonderlösungen dar.
Diese können mit wenig Aufwand erstellt
und auch in Eigenregie durch unsere
Kunden erzeugt werden.
Unser Know-how als
Starthilfe Das Umfangreiche Know-how der GTI-
control in HMI-systemen und in
moderner Webtechnologie ist der Garant
für eine leistungsfähige und zukunfts-
orientierte Eigenentwicklung – ohne
große Risiken. Sprechen Sie mit uns!
15 Whitepaper - Weboberflächen für die Industrieautomation
Über GTI-control [Achim Schreck]
HMI-Pionier Die GTI zählt zu den Pionieren von HMI-
und SCADA-Systemen. Mit PROCON-WEB
die dritte Generation an HMI-Lösungen
realisiert, die vom einfachen HMI-System
bis zur komplexen Leittechnik skaliert
werden kann. Alleinstellungsmerkmale
sind Responsive Design, zentrale
Stylebarkeit von Controls und die
einfache Projektierungsmöglichkeit für
Anwendungsvarianten.
HMI-Konzepte Seit über fünf Jahren setzen wir Konzepte
für komplexe Benutzeroberflächen um.
Dabei analysieren unsere Usability-
Experten und entwickeln zukunfts-
orientierte Konzepte für herausragende
User-Interfaces mit markantem Design.
Kompetenz in
Softwareentwickung Wir sind langjähriger Microsoft-certified
Partner und machen seit unserer
Gründung Softwareentwicklungen im Em-
bedded Bereich. Unser Know-how liegt
dabei nicht nur bei Benutzeroberflächen,
sondern auch in der Umsetzung
echtzeitfähiger Lösungen oder komplexer
Datenbankanwendungen.
Zuhause in der
Industrieautomation Unsere Kunden kommen aus dem
Bereich des Maschinen- und Anlagenbaus
oder sind Hersteller von Auto-
matisierungsgeräten, nicht nur für die
Industrie. Unser Engagement im VDMA
zeugt von unseren Branchenkenntnissen.
Fred Fischer
Dipl. Kommunikationspsychologe (FH), Usability Engineer
Der Autor ist Mediengestalter und hat in Görlitz das Studium der
Kommunikationspsychologie, mit dem Schwerpunkt Mensch-
Maschine- Kommunikation/ Informationsverarbeitung absolviert.
Achim Schreck
Dipl.-Ing. (FH), M. Eng., Geschäftsführer
Der Autor hat Elektrotechnik und Software Engineering
studiert, ist seit 30 Jahren in der Branche tätig und beschäftigt
sich seit 25 Jahren mit dem Thema HMI und SCADA.
Matthias Kolmer
Dipl.-Inf. (FH), Softwareentwickler
Der Autor hat Informatik in Würzburg studiert, ist seit fünf
Jahren bei der GTI und im Bereich der Web-HMI tätig. Er
zeichnet sich dort verantwortlich für die Technologie- und
Grundlagenentwicklung.