HIG – Human Interface Guidelines

27. Februar 2014 von Markus Mächler Veröffentlicht unter Know-how/Tipps&Tricks, Mobile Solutions, Web Applications Verschlagwortet mit , , , , , , , , , ,

Richtlinien zur Gestaltung von Benutzeroberflächen?
Richtig. Hersteller wie Apple oder Microsoft haben diverse Guidelines für das Entwickeln von Produkten für ihre Plattformen. Für Webentwickler mag dies vorerst befremdend klingen. Es ist ja gerade die Freiheit bezüglich der Gestaltung und der Inhalte, die das Web zu dem macht, was es ist.

Warum also das Ganze?
Frameworks wie z.B. PhoneGap verwandeln mit Web-Technologien erstellte Applikationen in native Apps. Der Benutzer erwartet von einer App ein Verhalten, welches über ein Responsive Design hinaus geht. Die Guidelines helfen dabei das gesamte Look & Feel eines Betriebssystems einheitlich zu gestalten. Ziel dabei ist die User Experience zu verbessern indem das GUI intuitiv, lernbar und konsistent ist. Bei Apple kann ein Verstoss gegen diese Richtlinien durchaus ein Grund sein, warum eine App nicht im Store zugelassen wird.

Was wird in den HIGs behandelt?
Die Human Interface Guidelines beschäftigen sich mit Themen zu Layout, Interaktivität & Feedback, Farbe & Typographie, Icons & Grafiken und Navigation. Dabei sind viele Dinge gut gemeinte Empfehlungen, die die meisten Entwickler sowieso intuitiv richtig machen. Kaum einer würde auf die Idee kommen zehn verschiedene Schriftarten zu verwenden oder gelben Text vor einen orangen Hintergrund zu platzieren.

Was muss ich wissen? Wo sind die Unterschiede in den Guidelines?
Wichtig ist das Bewusstsein, dass es solche Guidelines gibt. Sie können gute Rezepte enthalten um beispielsweise Inhalte zu strukturieren. Es gibt aber auch einige markante Unterschiede zwischen den Plattformen. Ob diese allerdings zu beachten sind, hängt vom jeweiligen Projekt ab.
Einer der grössten Unterschiede betrifft die Navigation. Es beginnt bereits dabei, dass es bei Android Geräten eine fixe Leiste mit Navigationspunkten (z.B. Zurück ) gibt. Das macht es unnötig zusätzlich einen solchen Button in der Applikation zu haben. Des weiteren werden bei Apple Geräten Tabs gewöhnlich am unteren Bildschirmrand platziert und Benutzeraktionen am oberen Rand. Bei Android Geräten ist das Ganze umgekehrt. Die folgenden Bilder zeigen sehr schön diese kleinen, aber entscheidenden Unterschiede.

Android vs. iOS

v.l.n.r. Facebook Android, Facebook iOS, Untappd Android, Untappd iOS
Urheber: www.facebook.com, www.untappd.com

Muss ich also trotz PhoneGap mehrere Oberflächen gestalten?
Nein. Für besonders komplexe Applikationen mit einem sehr spezifischen oder sehr grossen Zielpublikum (vgl. Facebook) kann sich die Mühe durchaus lohnen. Man muss allerdings keine Angst davor haben, dass eine Applikation nicht in den App-Store kommt, wenn sie sich wie eine App anfühlt. Es geht nicht darum alle Guidelines zu berücksichtigen, es geht darum das Look and Feel einer App zu haben und nicht das einer mobilen Webseite. Es gibt einige Beispiele, von mit PhoneGap erstellten Apps, die nicht alle Richtlinien beachten und trotzdem im App-Store erhältlich sind.

[Guidelines] Apple, Android, Microsoft [/Guidelines]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.