{"id":1462,"date":"2010-10-31T21:20:00","date_gmt":"2010-10-31T19:20:00","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=1462"},"modified":"2021-02-04T09:40:04","modified_gmt":"2021-02-04T08:40:04","slug":"user-interface-guidelines-fur-mobile-geraete-fluch-oder-segen","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/user-interface-guidelines-fur-mobile-geraete-fluch-oder-segen\/","title":{"rendered":"User Interface Guidelines f\u00fcr mobile Ger\u00e4te: Fluch oder Segen?"},"content":{"rendered":"<p>Das konsistente Erscheinungsbild eines Unternehmens wird durch die Umsetzung von Corporate Design Guidelines gesichert. Nach dem gleichen Prinzip funktionieren User Interface Guidelines (UI Guidelines). Sie bilden die Regelwerke zur Gestaltung von Softwareoberfl\u00e4chen: sowohl die visuelle Darstellung als auch Interaktionsaspekte sind hier festgelegt. F\u00fcr die auf dem jeweiligen Betriebssystem laufenden Applikationen soll auf diese Weise ein grundlegendes Qualit\u00e4tsniveau gesichert und dem Szenario eines \u201eAnwendungszoos\u201c entgegengewirkt werden.<br \/>\n<!--more--><\/p>\n<p>Betrachtet man die verschiedenen Plattformen f\u00fcr mobile Ger\u00e4te (z.B. iOS f\u00fcr iPhone und iPad, Android oder Windows Phone 7) im Hinblick auf die vielf\u00e4ltigen Eingabem\u00f6glichkeiten, wird schnell klar, dass auch hier bestimmte Rahmenbedingungen f\u00fcr die visuelle Gestaltung und Interaktionsgrunds\u00e4tze einzuhalten sind, um eine intuitive Bedienung zu sichern. Applikationen, die auf dem Ger\u00e4t installiert werden und somit eine Vielzahl von Sensoren (z.B. Beschleunigungssensoren) und andere Hardware Features (z.B. GPS oder kabellose Schnittstellen) nutzbar machen, bieten dem Benutzer eine nahezu unbegrenzte Funktions- und Interaktionsvielfalt mit universellen Einsatzm\u00f6glichkeiten. Daher muss durch die Beachtung grundlegender Style-Vorgaben gesichert werden, dass die Bedienungslogik der Plattform nicht verw\u00e4ssert.<\/p>\n<p>Bei der Wahl einer Plattform existiert f\u00fcr den Anwender allerdings auch ein nicht zu untersch\u00e4tzender Lifestyle-Aspekt. Ma\u00dfgeblich verantwortlich f\u00fcr den Kult ist weniger die Hardware selbst, sondern vielmehr das User Interface (UI): Der Style ist mitentscheidend f\u00fcr den Erfolg der ganzen Plattform; er vermittelt \u201eJoy-of-Use\u201c \u2013 oder eben nicht. Ein koh\u00e4renter Style kann, wenn auf einem System neben dem Betriebssystem auch noch eine Vielzahl von Applikationen ganz unterschiedlicher Hersteller laufen, aber nur gesichert werden, wenn sich alle Beteiligten an bestimmte Style-Vorgaben halten.<\/p>\n<p>Auf dem Desktop sind UI Guidelines ein seit langem etabliertes Werkzeug. Aber was sind die wesentlichen Merkmale von UI Guidelines im mobilen Kontext? Welche besonderen Aspekte sind hier zu beachten?<\/p>\n<h3>Beispiele f\u00fcr User Interface Guidelines<\/h3>\n<p>Beispiele f\u00fcr UI Guidelines im mobilen Kontext sind im Internet frei verf\u00fcgbar und f\u00fcr jedermann einzusehen. Die wichtigsten sind hier aufgelistet:<\/p>\n<ul>\n<li><strong>iPhone:<\/strong> <a href=\"http:\/\/developer.apple.com\/library\/ios\/#documentation\/UserExperience\/Conceptual\/MobileHIG\/Introduction\/Introduction.html\">http:\/\/developer.apple.com\/&#8230;<\/a><\/li>\n<li><strong>Android:<\/strong> <a href=\"http:\/\/developer.android.com\/guide\/practices\/ui_guidelines\/index.html\">http:\/\/developer.android.com\/&#8230;<\/a><\/li>\n<li><strong>Blackberry:<\/strong> <a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/ff967556(v=vs.105).aspx\">https:\/\/msdn.microsoft.com\/<\/a><\/li>\n<li><strong>Symbian:<\/strong> <a href=\"http:\/\/developer.symbian.org\/wiki\/index.php\/User_Interface\">http:\/\/developer.symbian.org\/&#8230;<\/a><\/li>\n<li><strong>Windows Phone 7:<\/strong> <a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/ff967556(v=vs.105).aspx\">https:\/\/msdn.microsoft.com\/<\/a><\/li>\n<\/ul>\n<p>Die inhaltliche Tiefe der verschiedenen UI Guidelines variiert stark: w\u00e4hrend beispielsweise Android sich inhaltlich eher knapp und technisch h\u00e4lt, ist es Microsoft auch wichtig, die Philosophie des Produktes zu transportieren; bis hin zum verwendeten Sprachjargon bei Status- oder Fehlermeldungen ist man hier sehr akribisch: das Windows Phone 7 ist \u201efreundlich, unbeschwert und einf\u00fchlsam\u201c. Auch Apple legt gesteigerten Wert darauf, dass man das Gesamtkonzept hinter iOS nachvollziehen kann, bevor mit der Programmierarbeit begonnen wird.<\/p>\n<p>UI Guidelines haben teils unterschiedliche Zielgruppen: w\u00e4hrend Android sich sprachlich und inhaltlich klar an Anwendungs-Entwickler richtet, sprechen Apple und Microsoft eher den Interaktions- bzw. User Experience Designer an.<\/p>\n<h3>Nutzen von User Interface Guidelines<\/h3>\n<p>Prinzipiell ist das verfolgte Ziel der UI Guidelines begr\u00fc\u00dfenswert: durch ein einheitliches Look &amp; Feel kann der Benutzer aus seinen Erfahrungen mit dem Ger\u00e4t lernen und Interaktions-Szenarien auf andere Anwendungen \u00fcbertragen: Bedienelemente \u00e4hneln sich, Abl\u00e4ufe k\u00f6nnen analogisiert werden und erlernte Gesten k\u00f6nnen in anderen Apps im gleichen Kontext verwendet werden. Besonders hervorzuheben ist auch die Vereinheitlichung von Animationen, welche auf dem kleinen Handydisplay nicht nur als Lifestyle-Element zum Einsatz kommen, sondern einen ganz realen Nutzen haben. Sie helfen zum Beispiel bei der Orientierung in hierarchischen Menus. Zu guter Letzt steigt auch die Wertigkeit des Produktes, wenn ein gleichf\u00f6rmiges und schl\u00fcssiges Gesamtkonzept besteht und alles den gleichen Schliff oder den ber\u00fchmten \u201eroten Faden\u201c besitzt.<\/p>\n<p>Kontr\u00e4r zur Idee von UI Guidelines verh\u00e4lt sich allerdings das Bestreben der Softwareschmieden nach Individualit\u00e4t. Sie w\u00fcnschen oftmals weniger die \u201eEinheitsoptik\u201c, sondern m\u00f6chten mit ihrem Produkt etwas einzigartiges und herausragendes schaffen, um sich so auch von Mitbewerbern abheben zu k\u00f6nnen.<\/p>\n<h3>User Interface Guidelines und Kreativit\u00e4t \u2013 ein Widerspruch?<\/h3>\n<p>Nat\u00fcrlich kann es sch\u00f6n und abwechslungsreich sein, eine kreativ gestaltete Anwendung zu explorieren. Generell ist aber bei der Einf\u00fchrung von neuen Elementen oder Interaktionsformen Vorsicht geboten. Betrachtet man beispielsweise das Thema Gesten, wird der Nutzer sehr schnell frustriert sein, wenn seine (vielleicht sogar unbewusst) erlernten Fingerbewegungen (siehe auch <a href=\"http:\/\/en.wikipedia.org\/wiki\/Muscle_memory\">\u201eMuscle Memory\u201c<\/a>), pl\u00f6tzlich nicht mehr funktionieren, oder sogar einen anderen Effekt als erwartet haben. So k\u00f6nnte es f\u00fcr Nutzer vermutlich verwirrend sein, wenn beispielsweise die Pinch-Geste (siehe auch \u201e<a href=\"http:\/\/www.centigrade.de\/de\/blog\/die-rueckkehr-des-pie-menues\/\">Die R\u00fcckkehr des Pie Men\u00fcs<\/a>\u201c) nicht mehr mit der Zoom-Aktion verkn\u00fcpft w\u00e4re.<\/p>\n<p>Wie k\u00f6nnen also Style-Vorgaben gemacht werden ohne kreative Freir\u00e4ume zu sehr einzuschr\u00e4nken?<\/p>\n<p>Wichtig ist es, dem Benutzer stets m\u00f6glichst allgemein bekannte Elemente (\u201eLandmarks\u201c) zu bieten, damit er sich in der neuen Umgebung zurechtfindet und die M\u00f6glichkeit von Fehlinterpretationen minimiert wird. Das Prinzip der Wiedererkennbarkeit \u00fcber viele verschiedene Kulturen und Sprachen hinweg greift auch Microsoft beim Windows Phone 7 auf: mit dessen UI Design Konzept namens \u201eMetro\u201c werden piktogrammartige Darstellungen mit einfacher Typographie und undekorierter Formensprache wie bei Schildern in Metropolen pr\u00e4feriert (beispielsweise auf Flugh\u00e4fen, Bahnh\u00f6fen und \u00f6ffentlichen Geb\u00e4uden). Somit ist festgelegt, in welche Richtung das Design des UI gehen soll, ohne dabei allzu konkrete Regeln festzulegen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1507\" title=\"Ankara Airport Piktogramme\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ankara-airport-signs.jpg\" alt=\"Ankara Airport Piktogramme\" width=\"440\" height=\"266\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ankara-airport-signs.jpg 440w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/ankara-airport-signs-300x181.jpg 300w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/p>\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td style=\"padding-right: 7px;\"><a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/2.0\/\" rel=\"license\"><img decoding=\"async\" style=\"border-width: 0;\" src=\"https:\/\/i.creativecommons.org\/l\/by-sa\/2.0\/88x31.png\" alt=\"Creative Commons Lizenzvertrag\" \/><\/a><\/td>\n<td class=\"small\">Dieses Werk bzw. Inhalt ist lizenziert unter der <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/2.0\/\" rel=\"license\">Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 2.0 US-amerikanisch (nicht portiert) License<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>UI Guidelines sind also h\u00e4ufig mit bestimmten Restriktionen verbunden, sollen aber nicht Kreativit\u00e4t generell verbieten. Vielmehr geben sie den Rahmen vor, innerhalb dessen sich Kreativit\u00e4t entfalten kann und soll.<\/p>\n<p>Erw\u00e4hnenswert ist es, dass beispielsweise beim Windows Phone 7 die Sparte Games explizit von derartigen Beschr\u00e4nkungen ausgeschlossen ist und als etwas eigenst\u00e4ndiges angesehen wird. Hier sind experimentelle Interaktionsformen erlaubt und sogar gew\u00fcnscht.<\/p>\n<h3>Beachtung der User Interface Guidelines<\/h3>\n<p>UI Guidelines m\u00fcssen gelesen, verstanden und umgesetzt werden. Nat\u00fcrlich trifft ein knapp gehaltenes Dokument beim Leser auf gr\u00f6\u00dfere Akzeptanz als eine un\u00fcberschaubare Regel- und Gebote-Sammlung. Ob UI Guidelines beachtet werden ist aber auch davon abh\u00e4ngig, ob es sich bei einem Software-Projekt um eine reine \u201eOne-Man-Show\u201c handelt, oder ob ein mehrk\u00f6pfiges Team sich die Aufgabengebiete teilt und sich somit jeder auf einen einzelnen Bereich fokussieren kann. Hier bew\u00e4hrt sich die Zusammenarbeit von Interaktions-Designer und Anwendungs-Entwickler, da der Interaktions-Designer besonders f\u00fcr die Thematik sensibilisiert ist. Auch Produktmanagement und Qualit\u00e4tssicherung sollten mit den Stylevorgaben vertraut sein, um das Produkt diesbez\u00fcglich pr\u00fcfen und bewerten zu k\u00f6nnen.<\/p>\n<h3>Alternative M\u00f6glichkeiten zur Sicherung eines einheitlichen Styles<\/h3>\n<p>Eine gute Basis zur \u201eautomatischen\u201c Beachtung fundamentaler Interaktionskonzepte bietet das Software Development Kit (SDK): da dieses vom Entwickler ben\u00f6tigt wird, um f\u00fcr die jeweilige Plattform programmieren zu k\u00f6nnen, macht es Sinn, die wichtigsten Grundregeln in diese Software-Bibliotheken zu integrieren. Somit verletzt man selbst bei v\u00f6lliger Unkenntnis von UI Guidelines nicht gewisse zentrale Gebote. Beispielsweise k\u00f6nnen fertige Animationen als wiederverwendbare Softwareartefakte auf bequemem Weg zur Verf\u00fcgung gestellt werden. Dies motiviert den Entwickler, diese auch zu benutzen. Das Entwicklungsteam \u00fcberlegt sich zweimal, ob es das Rad neu erfinden und viel Aufwand in eine neue Idee stecken m\u00f6chte, \u201enur\u201c um kreativ werden zu k\u00f6nnen, oder ob es effizient die bestehenden Mittel zum Einsatz bringt.<\/p>\n<p>Microsoft stellt mit seinem SDK <a href=\"http:\/\/web.archive.org\/web\/20120306094011\/http:\/\/www.microsoft.com\/expression\/windowsphone\/\">\u201eExpression Blend 4 for Windows Phone\u201c<\/a> beispielsweise die beiden UI Elemente \u201ePanorama\u201c und \u201ePivot\u201c zur Verf\u00fcgung: sie bilden bei seitenorientierten Anwendungen die Basis zur Navigation durch komplexe Listen. Interaktionsverhalten und Animationen, wie beispielsweise der Parallax-Effekt, sind bereits stilecht integriert und k\u00f6nnen direkt verwendet werden. Die Komponenten sind grafisch nicht abgeschlossen oder unver\u00e4nderbar, sondern bieten Raum f\u00fcr visuelle Anpassungen und Abwandlungen.<\/p>\n<p>Haben Entwickler oder User Experience Designer allerdings f\u00fcr einen besonderen Anwendungsfall eine spezielle Visualisierung vor Augen, muss es auch m\u00f6glich sein, eigene Ideen umzusetzen. So bleibt gew\u00e4hrleistet, dass im Bedarfsfall auch ungew\u00f6hnliche Bedienkonzepte entstehen k\u00f6nnen, die vor allem bei Spielen den bereits erw\u00e4hnten Wunsch nach neuen Interaktionsformen befriedigen. Allerdings sollte jede Abweichung vom Regelfall auch mittels eines unabh\u00e4ngigen Usability Tests validiert werden, da sonst nicht abgesch\u00e4tzt werden kann, ob die neue Interaktionsform sich dem Benutzer erschlie\u00dft.<\/p>\n<p>Die Integration mancher Normen in das SDK ist kein vollst\u00e4ndiger Ersatz f\u00fcr UI Guidelines, bildet aber eine hilfreiche Erg\u00e4nzung auf dem Weg zur konsistenten App. Oftmals sind die Vorgaben mit anschaulichen \u201elebenden\u201c Beispielen auch leichter und angenehmer zu vermitteln als in Form eines \u201etoten\u201c Dokumentes.<\/p>\n<h3>Fazit<\/h3>\n<p>F\u00fcr das Entstehen von Applikationen mit konsistentem Look &amp; Feel ist es eine gute Grundlage, UI Guidelines zu haben. User Experience-Designer etwa bekommen damit eine Orientierung f\u00fcr ihre konzeptionelle und visuelle Arbeit an die Hand.<\/p>\n<p>Das gilt nat\u00fcrlich f\u00fcr Desktop Anwendungen genauso wie f\u00fcr mobile Anwendungen. Jedoch ist die Rolle von UI Guidelines im mobilen Kontext noch wichtiger, da mobile Endger\u00e4te vielseitigere Interaktionsm\u00f6glichkeiten wie z.B. Touch-Bedienung erm\u00f6glichen. Auch dem Kontrastverh\u00e4ltnis muss hier besondere Aufmerksamkeit geschenkt werden, so dass eine gute Erkenn- und Lesbarkeit auch unter ung\u00fcnstigen Lichtverh\u00e4ltnissen gew\u00e4hrleistet ist.<\/p>\n<p>Weiter erleichtert werden kann die Einf\u00fchrung konsistenter Interface-Konzepte durch die Verf\u00fcgbarkeit entsprechender Regeln in Form von vorgefertigten Software-Grundbausteinen und -Templates, damit das Entwicklungsteam diese sofort produktiv einsetzen kann. Auf diese Weise k\u00f6nnen UI Guidelines schlank gehalten und die Entwicklung neuer Apps durch Kombination der beiden Ansatzpunkte (UIG und vorgefertigte Software-Bausteine) vereinfacht werden.<\/p>\n<p>Zu hinterfragen ist jedoch immer, ob die aufgezeigten Regeln auch f\u00fcr den eigenen Anwendungsfall zutreffen, oder ob eine eigene L\u00f6sung zu bevorzugen ist. Sollten \u201ekreative Freir\u00e4ume\u201c genutzt werden, ist es besonders notwendig, die daraus resultierenden Konzepte mit Nutzern zu evaluieren.<\/p>\n<p>Letztlich betrifft das Lesen, Verstehen und Anwenden von UI Guidelines nicht nur Entwickler und Interaktions-Designer, sondern auch Produktmanagement und Qualit\u00e4tssicherung. Entsprechend schwierig kann sich die unternehmensweite Einf\u00fchrung von User Interface Guidelines gestalten. Jedoch ist dies eine Herausforderung, der zu stellen sich lohnt.<\/p>\n<div class=\"small\">Alle in diesem Artikel verwendeten Markennamen und Bezeichnungen sind eingetragene Warenzeichen und Marken der jeweiligen Eigent\u00fcmer und dienen nur der Beschreibung.<\/div>\n","protected":false},"author":19,"featured_media":0,"template":"","tags":[78,81,138],"class_list":["post-1462","blog","type-blog","status-publish","hentry","tag-iphone-de","tag-mobile-de","tag-windows-phone-de"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1462","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\/19"}],"version-history":[{"count":2,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1462\/revisions"}],"predecessor-version":[{"id":11993,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1462\/revisions\/11993"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=1462"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=1462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}