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.