{"id":7254,"date":"2016-10-31T10:00:25","date_gmt":"2016-10-31T09:00:25","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/de\/?p=7254"},"modified":"2017-08-18T19:20:39","modified_gmt":"2017-08-18T17:20:39","slug":"hmi-styleguides-im-unternehmen-etablieren-teil-1","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/hmi-styleguides-im-unternehmen-etablieren-teil-1\/","title":{"rendered":"HMI Styleguides im Unternehmen etablieren \u2013 Teil 1"},"content":{"rendered":"<p>Mit der Intuition ist es so eine Sache. Der Mensch profitiert oft von ihr, l\u00e4sst sich aber auch immer wieder von ihr t\u00e4uschen. Ein HMI so zu gestalten, dass es intuitiv bedienbar ist, scheint eines der erstrebenswertesten Ziele moderner Software-Entwicklung zu sein, erspart es doch kostenaufw\u00e4ndige Schulungen, Fehlbedienungen und vieles mehr.<\/p>\n<p>Auf dem Weg dorthin unterliegen jedoch viele Software Engineers und sogar HMI Designer der T\u00e4uschung Ihrer eigenen Intuition. Sie sagen sich (noch korrekterweise): \u201eEin HMI Design muss konsistent und \u00e4sthetisch aufgebaut sein, damit Bediener aus bereits erlernten Mustern auch in neuen Nutzungskontexten profitieren k\u00f6nnen. K\u00f6nnen sie eine Maschine bedienen, k\u00f6nnen sie dann praktisch jede Maschinen bedienen.\u201c Manche schlussfolgern jedoch falsch weiter: \u201eWer Konsistenz im HMI Design schaffen m\u00f6chte, tut gut daran, sich bei der Nachbardisziplin des Corporate Design zu bedienen \u2013 denn dort existieren bereits seit Jahr und Tag Regelwerke zur Schaffung von Konsistenz in Markenerlebnissen: die Corporate Design (CD) Styleguides.\u201c<\/p>\n<p>Leider ist dies eine falsche Analogie: genauso wie es in den Anfangsjahren des Fernsehens eine schlechte Idee war, die Tagesnachrichten in gleicher Manier wie im Radio einfach vorzulesen oder erste Internetseiten wie Zeitungsartikel mit jeder Menge Flie\u00dftext in Serifenschrift zu gestalten, ist dies zwar intuitiv (weil bereits bekannt), aber trotzdem falsch. Die Regelwerk-Philosophie traditioneller CD Styleguides kann nicht so einfach auf moderne HMIs und deren Entwicklung \u00fcbertragen werden.<\/p>\n<div id=\"attachment_7260\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/amazon1994undAppleCom1997QuelleArchiveOrg.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7260\" class=\"wp-image-7260\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/amazon1994undAppleCom1997QuelleArchiveOrg-300x167.jpg\" alt=\"Screenshot Amazon 1994 und AppleCom 1997 Zeitungsmetapher im Web\" width=\"600\" height=\"333\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/amazon1994undAppleCom1997QuelleArchiveOrg-300x167.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/amazon1994undAppleCom1997QuelleArchiveOrg-768x427.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/amazon1994undAppleCom1997QuelleArchiveOrg-1024x569.jpg 1024w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/amazon1994undAppleCom1997QuelleArchiveOrg.jpg 1600w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-7260\" class=\"wp-caption-text\">Sogar Amazon und Apple irrten damals, als sie glaubten es sei eine gute Idee, das aus dem Medium \u201eZeitung\u201c erlernte Gestaltungswissen 1:1 auf das neue Medium \u201eInternet\u201c zu \u00fcbertragen.<\/p><\/div>\n<p><!--more--><\/p>\n<h3>Statisch ist statisch und bleibt statisch<\/h3>\n<p>CD Styleguides sind statische Dokumente, und mit den darin enthaltenen Design-Richtlinien werden statische Medien gestaltet. HMIs hingegen sind alles andere als statisch. Weder bleibt ein HMI Screen w\u00e4hrend der Bedienung lange im gleichen Zustand noch kommt ein HMI Konzept aufgrund sich \u00e4ndernder Marktanforderungen lange ohne Weiterentwicklungen oder Erg\u00e4nzungen aus. Das bereits bei CD Styleguides existierende, jedoch in dieser Dom\u00e4ne weniger kritische Problem des \u201eBereits-\u00dcberholt-Seins\u201c potenziert sich hier. Ein Entwickler der einmal einige Zeilen Quellcode auf Basis einer veralteten Richtlinie programmiert hat, um diese dann wieder verwerfen zu m\u00fcssen, wird dem Styleguide alsbald den R\u00fccken kehren. Zudem kann der Versuch, komplexe, dynamische Sachverhalte in einem statischen Dokument zu beschreiben in einer ausladenden Sintflut von Prosa enden, die Gefahr l\u00e4uft, niemals wirklich gelesen oder gar angewendet zu werden.<\/p>\n<div id=\"attachment_7261\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/CI_Example.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7261\" class=\"wp-image-7261\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/CI_Example-300x176.png\" alt=\"CD Styleguide Example\" width=\"600\" height=\"353\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/CI_Example-300x176.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/CI_Example-768x451.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/CI_Example-1024x602.png 1024w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/CI_Example.png 1200w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-7261\" class=\"wp-caption-text\">Ein typischer CD Styleguide ist im Kern ein Dokument von visuellen Gestaltern f\u00fcr visuelle Gestalter.<\/p><\/div>\n<h3>\u00c4sthetik ist nicht gleich Ergonomie<\/h3>\n<p>CD Styleguides beschreiben meist rein \u00e4sthetische Sachverhalte, 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\u00e4nden, kann also effektiv in ein Regelwerk gefasst werden. Die korrekte Verwendung mannigfaltiger HMI Controls in diversesten Anwendungskontexten f\u00fcr verschiedenste UI Technologien, Endger\u00e4te und Bildschirmgr\u00f6\u00dfen dagegen ist eine ganz andere Herausforderung. Leider reicht es auch nicht, wenn das resultierende HMI \u201enur\u201c \u00e4sthetisch erfolgreich ist, also alle HMI Elemente harmonisch auf dem Bildschirm platziert wurden. Viel wichtiger f\u00fcr den Gesamterfolg des HMI ist die Frage, ob es auch ergonomisch, effizient und fehlerfrei benutzbar ist \u2013 also eine insgesamt positive User Experience (UX) bietet. Hier\u00fcber entscheiden oft viel subtilere Faktoren, die sich kaum in allgemeine, simple Regeln gie\u00dfen lassen.<\/p>\n<div id=\"attachment_7264\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/VennDiagram.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7264\" class=\"wp-image-7264\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/VennDiagram-300x167.png\" alt=\"Diagramm Schnittmengen Interaction Design, Visual Design und Design Engineering: UX\" width=\"600\" height=\"333\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/VennDiagram-300x167.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/VennDiagram-768x427.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/VennDiagram-1024x569.png 1024w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/VennDiagram.png 1355w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-7264\" class=\"wp-caption-text\">Gute User Experience ist immer ein Resultat des Zusammenspiels verschiedener Disziplinen \u2013 es geht auch aber nicht alleine um \u00c4sthetik.<\/p><\/div>\n<h3>Gestaltung ohne Hintergrund<\/h3>\n<p>Die Hauptnutzer eines CD Styleguides sind Designer oder Mediengestalter \u2013 ein Regelwerk von Gestaltern f\u00fcr Gestalter also. Die verwendete Sprache und Terminologie wird somit unter seinesgleichen verstanden. Die Hauptnutzer eines HMI Styleguides hingegen sind Software Engineers. Diese haben in den allermeisten F\u00e4llen keinerlei Gestaltungshintergrund und messen Design oft einen geringen Stellenwert bei. Ein Software Engineer zieht daher auch keinen Gewinn daraus, wenn ihm eine Design Richtlinie in Form opulenter Prosa erl\u00e4utert wird. Aber auch eine etwas visuellere, formalere Spezifikation des Designs als Photoshop- oder Illustrator-Datei ist nur von begrenztem Nutzen, besitzen die meisten Engineers oft weder entsprechende Software-Lizenzen noch die Ausbildung, um die notwendigen Informationen effektiv herauslesen zu k\u00f6nnen. Software Engineers m\u00fcssen von HMI Styleguides somit grunds\u00e4tzlich anders abgeholt werden.<\/p>\n<div id=\"attachment_7262\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ConfusingVisualDesign.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7262\" class=\"wp-image-7262\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ConfusingVisualDesign-300x167.png\" alt=\"Verwirrende Design-Spezifikationen f\u00fcr Entwickler\" width=\"600\" height=\"334\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ConfusingVisualDesign-300x167.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ConfusingVisualDesign-768x427.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ConfusingVisualDesign-1024x569.png 1024w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ConfusingVisualDesign.png 1200w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-7262\" class=\"wp-caption-text\">Nicht jede Design-Spezifikation erschlie\u00dft sich dem Entwickler direkt.<\/p><\/div>\n<h3>Das Ziel vor Augen \u2013 aber jeder ein anderes<\/h3>\n<p>Das gr\u00f6\u00dfte und folgenschwerste Missverst\u00e4ndnis bei der intuitiven, aber falschen Analogie von CD Styleguide und HMI Styleguide resultiert aber aus einem verborgenen Zielkonflikt. Bei einem CD Styleguide ist das Ziel klar erkennbar und jeder kann sich damit identifizieren: durch Konsistenz im visuellen Auftritt erh\u00f6ht sich die Wiedererkennbarkeit des Unternehmens. Bei einem HMI Styleguide ist das Ziel vordergr\u00fcndig sehr \u00e4hnlich \u2013 bohrt man jedoch tiefer, ist es in Wirklichkeit ein anderes. Schlimmer noch: es handelt sich nicht um ein, sondern gleich um mehrere Ziele, die von Rolle zu Rolle im Entwicklungsteam variieren und teilweise konfligieren.<\/p>\n<p>Der Software Engineer hat bei der Entwicklung eines HMI Styleguides vor allem die Hoffnung, dass seine Implementierung effizienter und wartbarer wird. Denn wenn f\u00fcr gleiche Probleme auch gleiche Bausteine verwendet werden k\u00f6nnen, produziert man keine unn\u00f6tige Code-Dopplung.\u00a0Der (visuelle) Designer erwartet von einem HMI Styleguide, dass hierdurch alle Masken elegant, konsistent und \u00e4sthetisch daherkommen und kein vordergr\u00fcndig sichtbarer Qualit\u00e4tsunterschied gegen\u00fcber den eigens gestalteten Masken existiert. Der Interaktionsdesigner erwartet zus\u00e4tzlich, dass diese Masken auch auf den zweiten Blick noch ergonomisch sind.\u00a0Der Produkt Manager erwartet von dem HMI Styleguide, dass sein Entwicklerteam trotz m\u00f6glichst weniger Design-R\u00fcckfragen benutzerfreundliche Masken eigenst\u00e4ndig implementieren kann.<\/p>\n<p>Doch letztlich kommt in der Wirklichkeit meist keine einzige der genannten Rollen auf ihre Kosten: Der Software Entwickler kodiert schon zum wiederholten Male \u00e4hnlichen, aber eben doch anderen HMI Code, der visuelle Designer \u00e4rgert sich dar\u00fcber, dass nicht einmal der basale Grundstock von Icons konsistent verwendet wird, der Produkt Manager hat das Gef\u00fchl, die Entwickler werden nicht ausreichend unterst\u00fctzt und der Interaktionsdesigner ist unangenehm \u00fcberrascht dar\u00fcber, dass die Bediener berichten: \u201eDas neue Interface ist zwar moderner und aufger\u00e4umter, aber es geht an den eigentlichen Arbeitsabl\u00e4ufen vorbei.\u201c.<\/p>\n<div id=\"attachment_7263\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Erwartungen.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7263\" class=\"wp-image-7263\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Erwartungen-300x167.png\" alt=\"Interdisziplin\u00e4re Teams: Auseinanderdriftende Erwartungen\" width=\"600\" height=\"333\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Erwartungen-300x167.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Erwartungen-768x427.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Erwartungen-1024x569.png 1024w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Erwartungen.png 1335w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-7263\" class=\"wp-caption-text\">In einem interdisziplin\u00e4ren Team driften die Erwartungen an einen HMI Styleguide oft auseinander.<\/p><\/div>\n<h3>Teil des Ganzen<\/h3>\n<p>Doch warum ist das so? Wie kann das intuitiv so richtig und wichtig klingende Konzept des HMI Styleguides in der Praxis oft zu so m\u00e4\u00dfigen Ergebnissen f\u00fchren? Warum bleiben resultierende HMIs trotz Regelwerken oft unter ihren M\u00f6glichkeiten und was kann man dagegen tun?<\/p>\n<p>Wie so oft sind die Erwartungen der einzelnen Stakeholder nicht unbedingt \u00fcberh\u00f6ht \u2013 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, die korrekt ineinandergreifen m\u00fcssen, um seine Effektivit\u00e4t \u00fcberhaupt zu erm\u00f6glichen.<\/p>\n<p>Um bei der Gestaltung von HMIs erfolgreich zu sein, bedarf es etwas, dass man \u201eCorporate UX Framework\u201c nennen k\u00f6nnte. Dieses (zum Teil auch nicht-technische) Rahmenwerk beinhaltet zum einen den HMI Styleguide selbst, zum anderen aber auch eine Reihe von Prozessen und Technologien, die den Software Entwicklungsalltag aus der User Experience Perspektive effektiv erg\u00e4nzen.<\/p>\n<p>Im <a href=\"http:\/\/www.centigrade.de\/de\/blog\/hmi-styleguides-im-unternehmen-etablieren-teil-2\/\">zweiten Teil dieses Artikels<\/a> beschreibe ich, wie man mit einer Kombination aus HMI Styleguide, HMI Kit, Asset-Management, Design-Abnahme und evolution\u00e4ren Ans\u00e4tzen Schritt f\u00fcr Schritt zu einem gut gestalteten HMI kommt. Es wird erl\u00e4utert, wann und in welcher Reihenfolge die einzelnen Bausteine zum Tragen kommen und wie sie erfolgreich in einen agilen Software-Entwicklungsprozess integriert werden k\u00f6nnen.<\/p>\n<p>Falls Sie Interesse daran haben sollten, sich in einem Projekt von uns unterst\u00fctzen zu lassen, werfen Sie auch gerne einen Blick auf unsere entsprechenden Services Seiten:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.centigrade.de\/de\/leistungen\/ux-strategy\">UX Strategy<\/a><\/li>\n<li><a href=\"http:\/\/www.centigrade.de\/de\/leistungen\/usability\">Anwenderzufriedenheit direkt ab Werk: Usability<\/a><\/li>\n<li><a href=\"http:\/\/www.centigrade.de\/de\/leistungen\/design\">\u00c4sthetik trifft Architektur: Design<\/a><\/li>\n<li><a href=\"http:\/\/www.centigrade.de\/de\/leistungen\/engineering\">Architektur trifft \u00c4sthetik: Engineering<\/a><\/li>\n<\/ul>\n<div class=\"trademark\">Alle Marken oder eingetragenen Marken, die auf dieser Website verwendet werden, sind Eigentum der jeweiligen Besitzer und werden nur zu beschreibenden Zwecken verwendet.<\/div>\n","protected":false},"author":5,"featured_media":0,"template":"","tags":[104,83,102,73,577],"class_list":["post-7254","blog","type-blog","status-publish","hentry","tag-dokumentation","tag-kommunikation","tag-user-interface-design-de","tag-user-interface-entwicklung","tag-ux-de-1"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/7254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/7254\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=7254"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=7254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}