Mit der Intuition ist es so eine Sache. Der Mensch profitiert oft von ihr, lässt sich aber auch immer wieder von ihr täuschen. Ein HMI so zu gestalten, dass es intuitiv bedienbar ist, scheint eines der erstre-benswertesten Ziele moderner Software-Entwicklung zu sein, er-spart es doch kostenaufwändige Schulungen, Fehlbedienungen und vieles mehr. Auf dem Weg dorthin unterliegen jedoch viele Software Engineers und sogar HMI Designer der Täuschung Ihrer eigenen In-tuition. Sie bedienen sich beispielsweise intuitiv bei der Nachbardis-ziplin des Corporate Design (CD) – denn dort existieren bereits seit Jahr und Tag Regelwerke zur Schaffung von Konsistenz in Markener-lebnissen: die Corporate Design Styleguides. Leider ist dies eine fal-sche Analogie. Die Regelwerk-Philosophie traditioneller CD Stylegui-des kann nicht so einfach auf moderne HMIs und deren Entwicklung übertragen werden.

1. 176
Competence Book - Digitale Transformation
Baustein ll - HMI Styleguides im Unternehmen etablieren
HMI Styleguides
im Unternehmen
etablieren
AUTOR: Thomas Immich, Mitbegründer und Geschäftsführer, Centigrade GmbH
Mit der Intuition ist es so eine Sache. Der Mensch profitiert oft von
ihr, lässt sich aber auch immer wieder von ihr täuschen. Ein HMI so
zu gestalten, dass es intuitiv bedienbar ist, scheint eines der erstre-
benswertesten Ziele moderner Software-Entwicklung zu sein, er-
spart es doch kostenaufwändige Schulungen, Fehlbedienungen und
vieles mehr. Auf dem Weg dorthin unterliegen jedoch viele Software
Engineers und sogar HMI Designer der Täuschung Ihrer eigenen In-
tuition. Sie bedienen sich beispielsweise intuitiv bei der Nachbardis-
ziplin des Corporate Design (CD) – denn dort existieren bereits seit
Jahr und Tag Regelwerke zur Schaffung von Konsistenz in Markener-
lebnissen: die Corporate Design Styleguides. Leider ist dies eine fal-
sche Analogie. Die Regelwerk-Philosophie traditioneller CD Stylegui-
des kann nicht so einfach auf moderne HMIs und deren Entwicklung
übertragen werden.

2. 177
Competence Book - Digitale Transformation
Baustein ll - HMI Styleguides im Unternehmen etablieren
Statisch ist statisch und bleibt statisch
CD Styleguides sind statische Dokumente, und mit den
darin enthaltenen Design-Richtlinien werden statische
Medien gestaltet. HMIs hingegen sind alles andere als sta-
tisch. Weder bleibt ein HMI Screen während der Bedienung
lange im gleichen Zustand noch kommt ein HMI Konzept
aufgrund sich ändernder Marktanforderungen lange ohne
Weiterentwicklungen oder Ergänzungen aus. Ein Entwick-
ler der einmal einige Zeilen Quellcode auf Basis einer ver-
alteten Richtlinie programmiert hat, um diese dann wieder
verwerfen zu müssen, wird dem Styleguide alsbald den
Rücken kehren.
Ästhetik ist nicht gleich Ergonomie
CD Styleguides beschreiben meist rein ästhetische Sach-
verhalte, aus denen sich leicht Richtlinien ableiten lassen.
Die korrekte Positionierung eines Firmenlogos oder die
geordnete Verwendung bestimmter vordefinierter CD
Farben, z.B. in Printmaterialien oder Messeständen, kann
also effektiv in ein Regelwerk gefasst werden. Die korrekte
Verwendung mannigfaltiger HMI Controls in diversesten
Anwendungskontexten für verschiedenste UI Technologi-
en, Endgeräte und Bildschirmgrößen dagegen ist eine ganz
andere Herausforderung. Und wichtig für den Gesamter-
folg des HMI ist nun einmal die Frage, ob es auch ergono-
misch, effizient und mit Freude benutzbar ist – also eine
insgesamt positive User Experience (UX) bietet. Hierüber
entscheiden oft viel subtilere Faktoren, die sich kaum in all-
gemeine, simple Regeln gießen lassen.
Das Ziel vor Augen – aber jeder ein anderes
Das größte und folgenschwerste Missverständnis bei der
intuitiven, aber falschen Analogie von CD Styleguide und
HMI Styleguide resultiert jedoch aus einem verborgenen
Zielkonflikt. Bei einem CD Styleguide ist das Ziel klar er-
kennbar und jeder kann sich damit identifizieren: Durch
Konsistenz im visuellen Auftritt erhöht sich die Wiederer-
kennbarkeit des Unternehmens. Bei einem HMI Styleguide
hingegen konfligieren die Ziele verschiedener Rollen.
Doch letztlich kommt in der Wirklichkeit meist keine ein-
zige der genannten Rollen auf ihre Kosten: Der Software
Entwickler kodiert schon zum wiederholten Male einen
ähnlichen, aber eben doch anderen HMI Code, der visuelle
Designer ärgert sich darüber, dass nicht einmal der basa-
le Grundstock von Icons konsistent verwendet wird, der
Produkt Manager hat das Gefühl, die Entwickler werden
nicht ausreichend unterstützt und der Interaktionsdesig-
ner ist unangenehm überrascht darüber, dass die Bedie-
ner berichten: „Das neue Interface ist zwar moderner und
aufgeräumter, aber es geht an den eigentlichen Arbeits-
abläufen vorbei.“.
Implementierungen
werden effizienter
und wartbarer!
Alle Masken werden
elegant und konsist-
ent umgesetzt!
Die Entwickler
müssen für gute
Ergebnisse weniger
fragen!
Das Interface wird
nutzerfreundlicher!
Abb. 1 In einem interdisziplinären Team driften die Erwartungen an einen HMI Styleguide oft auseinander. © Centigrade

3. 178
Competence Book - Digitale Transformation
Baustein ll - HMI Styleguides im Unternehmen etablieren
Teil des Ganzen
Wie so oft sind die Erwartungen der einzelnen Teammit-
glieder nicht unbedingt überhöht – sie richten sich nur an
den falschen Adressaten. Der HMI Styleguide ist nicht der
alleinige Heilsbringer und kann dies auch nicht sein. Er ist
wichtiger Bestandteil einer Reihe weiterer Komponenten
und Herangehensweisen, die korrekt ineinandergreifen
müssen, um seine Effektivität überhaupt zu ermöglichen.
Führende Maschinenbauer wie TRUMPF beispielsweise,
haben die Zeichen der Zeit erkannt und zusammen mit
Centigrade eine HMI Plattform entwickelt, die mehr ist als
nur eine Sammlung von Regelwerken. Sie wurde mit dem
Red Dot und dem iF Design Award ausgezeichnet.
Wenn schon formal, dann auch in Code
Grundsätzlich gilt: Je formaler die Regeln zur Gestaltung
eines HMIs ausgedrückt werden können, desto weniger
sollten sie in ein totes Dokument oder „halbtotes“ Wiki ge-
gossen werden.
Moderne Markupsprachen machen es heutzutage mög-
lich, Gestaltungsregeln zur korrekten Verwendung von
Farben, Icons, Größenverhältnissen und dynamischem
Layoutverhalten direkt im Quellcode auszudrücken. So
können mittels HTML, CSS, XAML, QML oder ähnlichen
Markupsprachen effektive Schablonen für wiederkehren-
de Design-Entwicklungs-Probleme geschaffen werden. Der
HMI Styleguide wird zur „lebendigen“ Spezifikation.
Abb. 2 Centigrade unterstützte TRUMPF bei der Entwicklung einer konzernweiten HMI Plattform. Die beiden Unternehmen wurden für Touchpoint mit dem Red Dot sowie iF Design Award ausgezeichnet.
© TRUMPF

4. 179
Competence Book - Digitale Transformation
Baustein ll - HMI Styleguides im Unternehmen etablieren
Mit Bedacht angegangen, eine gute Idee: das HMI Kit
Geht man einen Schritt weiter, so können HMI Komponen-
ten inkl. Eingabeverhalten, Navigationsverhalten, Animati-
onsverhalten und Visualisierung in sich geschlossen entwi-
ckelt und in Form einer zentralen Bibliothek zur Verfügung
gestellt werden – ein unternehmensweiter Baukasten also,
den man „HMI Kit“ nennen könnte. Diese Investition ist
durchaus sinnvoll, muss jedoch mit Bedacht angegangen
werden.
Die richtige Reihenfolge
Es empfiehlt sich als ersten Schritt, alle wichtigen Nut-
zungsszenarien möglichst detailliert zu kartographieren,
spätere Projektergebnisse kontinuierlich anhand dieser
Nutzungsszenarien zu gruppieren und mittels Usability-
und Integrations-Tests zu validieren, statt einmal initial auf
rein logische Einheiten wie „Farben“, „Layout“ und „Cont-
rols“ zu bauen.
Erst der Rahmen, dann die Wände
Möchte man bei der Entwicklung eines HMI Styleguides
kein Risiko eingehen, so empfiehlt es sich paradoxerweise,
die Verwendung des Begriffs „HMI Styleguide“ möglichst
lange hinauszuzögern. Es müssen vorher viel grundlegen-
dere Weichen gestellt werden, die man in ihrer Summe als
„Corporate UX Framework“ bezeichnen könnte – die Etab-
lierung eines allgemeinen abteilungsübergreifenden Rah-
menwerkes also, welches UX zum strategischen Unterneh-
mensziel erklärt und entsprechend konsequent integriert.
Jenseits der Naivität: UX Management
Wer ernsthaft plant, ein HMI Regelwerk unternehmensweit
oder über Produktgrenzen hinweg zu etablieren, muss in
seinem Organigramm frühzeitig die abteilungsübergrei-
fende Rolle des „UX Managers“ installieren, in dessen Ver-
antwortung ein verbindlicher Design-Abnahme Prozess
definiert und überwacht wird. Problematisch ist nämlich
wie so oft, dass verschiedene Abteilungen auch verschie-
dene Perspektiven auf die Notwendigkeit guter UX haben.
Spur und Überholspur
Natürlich kann man eine uneinige Interessenlage nicht von
heute auf morgen angleichen. Auf der einen Seite besteht
das nachvollziehbare Problem, dass eine Feature-getrie-
bene Abteilung frühe Ergebnisse erwartet, um bei ihrem
marktgetriebenen Voranschreiten nicht blockiert zu sein.
Umgekehrt steht das frühe Corporate UX Framework mit-
samt HMI Kit und HMI Styleguide vor dem Problem, dass
ein Konzept zunächst an verschiedenen Nutzungsszenari-
en verschiedener Abteilungen ordentlich erprobt und vali-
diert werden muss, bevor es unternehmensweit eingesetzt
werden kann.
Das Referenzieren unfertiger HMI Kit Komponenten im An-
wendungscode stellt zu diesem frühen Zeitpunkt also ein
hohes Risiko dar, weshalb Abteilungen letztlich doch ihre
eigenen HMI Komponenten implementieren (die aber lei-
der keinen Gestaltungsrichtlinien folgen, wie in Abbildung
3 gezeigt). Primärer Wunsch dieser Entwicklungsabteilun-
gen ist es, unabhängig von der Entwicklungsgeschwindig-
keit des HMI Kit Teams zu sein (siehe Abbildung 1).
„Möchte man bei der Entwicklung eines HMI Styleguides kein Risiko eingehen,
so empfiehlt es sich paradoxerweise, die Verwendung des Begriffs
„HMI Styleguide“ möglichst lange hinauszuzögern. Es müssen vorher
viel grundlegendere Weichen gestellt werden [...].“

5. 180
Competence Book - Digitale Transformation
Baustein ll - HMI Styleguides im Unternehmen etablieren
HMI KIT TEAM
Ziel: Implementierung eines
Suchkonzeptes für Listen.
Erster Zwischenstand:
reine Liste.
Zweiter Zwischenstand:
Suchfeld über Liste.
Dritter Zwischenstand:
Suchfeld um Filterleiste ergänzt.
Team ist zufrieden, da HMI Control
wie konzipiert funktioniert.
Team ist zufrieden, da Maske schnell
wie intendiert funktioniert.
Team ist frustriert, da Maske
nachträglich “gebrochen” wurde.
Suchfeld-Vorlage wird per Referenz in
Maske eingebunden.
Ziel: Implementierung einer neuer
Maske mit Suchfunktion.
Ziel: Implementierung einer filterbaren
Konfigurationsliste.
ANWENDERTEAM 1 ANWENDERTEAM 2
Eigentlich nicht benötigte Filterleiste
überlappt Maskenbereich.
ZEIT
Suchfeld inkl. FIlterleiste wird per
Referenz in Maske eingebunden.
SZENARIO 1: HMI KIT NUTZUNG PER REFERENZ AUF VORLAGE
Abb 3: Werden HMI Kit Vorlagen referenziert, besteht das Risiko, dass diese bei Änderung bestehende Masken nachträglich „brechen“. © Centigrade
Evolution begünstigt Entwicklung – wieder mal
Dieses Dilemma kann nur durch eine evolutionäre und kon-
tinuierliche Vorgehensweise aufgelöst werden. Um Evolu-
tionsmechanismen erfolgreich wirken zu lassen, empfeh-
len wir, jeder User Story eine global eindeutige ID („GUID“)
zuzuweisen. Diese GUID tauchen ab diesem Zeitpunkt in
allen Assets auf, die um das unfertige Konzept herum ent-
wickelt werden (z.B. Gestaltungsregel, Photoshop Screen
oder Markup). In einem entsprechenden Asset Manage-
ment System kann dann jederzeit eine einheitliche Sicht
der Regelwerke auf die entsprechende Nutzeranforderung
zusammengestellt werden.
Ein GUID-basiertes Asset Management für WPF existiert
z.B. mit dem frei verfügbaren XamlBoard von Centigrade.
Fertige Gestaltungsregel-Assets existieren ebenfalls be-
reits in zahlreichen Ausprägungen und können entspre-
chend ins Gesamtbild integriert werden – genannt seien
hier z.B. die iOS Human Interface Guidelines oder Google
Material Design Guidelines.

6. 181
Competence Book - Digitale Transformation
Baustein ll - HMI Styleguides im Unternehmen etablieren
HMI KIT TEAM
Ziel: Implementierung eines
Suchkonzeptes für Listen.
Erster Zwischenstand:
reine Liste.
Zweiter Zwischenstand:
Suchfeld über Liste.
Dritter Zwischenstand:
Suchfeld wird um Filterleiste ergänzt.
Team ist frustriert, da ähnliche
Nutzeranforderung in Form
verschiedener Lösungen existiert.
Team ist zufrieden, da Maske wie
intendiert funktioniert.
Team ist zufrieden, da Maske wie
intendiert funktioniert und Deadline
gehalten wurde.
Suchlisten-Quellcode wird in Maske
kopiert, da die Zeit drängt.
Ziel: Implementierung einer neuen
Maske mit Such- und Filterfunktion.
Ziel: Implementierung einer filterbaren
Konfigurationsliste.
ANWENDERTEAM 1 ANWENDERTEAM 2
Im Suchlisten-Quellcode wird ein
eigener Filter eingebaut, leider jedoch
unterhalb der Liste positioniert.
ZEIT
Quellcode wird von Kopie kopiert,
Filterleiste jedoch über Suchfeld
positioniert.
SZENARIO 2: HMI KIT NUTZUNG PER “TOTER” CODE-KOPIE
+
+
RELEASE
Abb. 4 Wird statt zu referenzieren, „toter“ Code kopiert, besteht umgekehrt die Gefahr, dass keine einheitliche und konsistente Gestaltungslinie existiert. © Centigrade
Unfertig ist nicht gleich unantastbar
Besitzt jede User Story eine GUID, ist es auch nicht tra-
gisch, wenn eine HMI Kit Komponente noch nicht fertig
oder noch ungetestet ist. Die Anwendungsentwickler ko-
pieren dann den noch unfertigen HMI Kit Code inkl. GUID
– „taggen“ somit ihr Konzept – und bauen diesen im eige-
nen Tempo mit ihren eigenen Lösungsverschlägen in ih-
rer eigenen Infrastruktur um oder aus. In regelmäßigen
Abständen wird dann durch eine Code-Differenz-Analyse
zu Tage gefördert, welche Abteilung welche User Story
mit welchem Konzept gelöst hat und durch die bis dahin
ggf. fertiggestellte Lösung des HMI Kit Teams ersetzt oder
konsolidiert. Umgekehrt können auch die Lösungsansät-
ze des Anwendungsentwickler-Teams in das HMI Kit ein-
fließen und helfen, dieses so für andere Abteilungen zu
verbessern.

7. 182
Competence Book - Digitale Transformation
Baustein ll - HMI Styleguides im Unternehmen etablieren
Abb. 5 Auflösung des Dilemmas durch „Concept Tagging“ – einzelne User Stories und deren zugehörige Code Fragmente werden über GUIDs verbunden, so dass eine spätere Rückverfolgung und Konsolidierung
möglich ist. © Centigrade
HMI KIT TEAM
Ziel: Implementierung eines
Suchkonzeptes für Listen.
Erster Zwischenstand:
reine Liste inkl.“Concept Tag” als
GUID.
Zweiter Zwischenstand:
Suchfeld über Liste.
Dritter Zwischenstand:
Suchfeld wird um Filterleiste ergänzt.
Team ist zufrieden, da für ähnliche
Nutzeranforderungen eine einzige
Lösungen existiert.
Team ist zufrieden, da Maske wie
intendiert funktioniert.
Team ist zufrieden, da Maske wie
intendiert funktioniert und Deadline
gehalten wurde.
Suchlisten-Quellcode wird inkl.
“Concept Tag” in Maske kopiert, da die
Zeit drängt.
Ziel: Implementierung einer neuen
Maske mit Such- und Filterfunktion.
Ziel: Implementierung einer filterbaren
Konfigurationsliste.
ANWENDERTEAM 1 ANWENDERTEAM 2
Im Suchlisten-Quellcode wird ein
eigener Filter eingebaut, jedoch
unterhalb der Liste positioniert.
RELEASE
ZEIT
Quellcode wird von Kopie inkl.
“Concept Tag” kopiert, Filterleiste über
dem Suchfeldes positioniert.
Quellcodes werden bei Gelegenheit konsolidiert, so
dass eine gemeinsame Basis entsteht.
STRATEGIE 3: HMI KIT NUTZUNG PER CODE-KOPIE MIT “CONCEPT TAGGING”
+
+
ID
ID
ID
ID
ID
ID
ID
Fazit
Der HMI Styleguide ist nur eine Komponente innerhalb ei-
nes größeren Rahmenwerkes, dem Corporate UX Frame-
work, um zu einer konsistenten HMI Linie zu gelangen. „Top-
Down“ kontrolliert und abgenommen, aber „Bottom-Up“
vorangetrieben, werden Nutzeranforderungen kontinu-
ierlich gesammelt und daraus abgeleitete User Stories mit
einer eindeutigen ID ausgestattet. Gestaltungsregeln, bei-
spielhafte Code-Schablonen oder sogar gebrauchsfertige
HMI Kit Komponenten können dann evolutionär verbessert
und über diese ID jederzeit miteinander in Bezug gesetzt
und konsolidiert werden. In dieser Kombination erläutern
Sie dann dem Entwickler, in welcher Nutzungssituation er
welche HMI Assets wie kombinieren muss, damit in der Fol-
ge ein intuitives und konsistent gestaltetes HMI entsteht.