App-Entwicklung ist oft ein langer und komplexer Prozess. Die Entwicklung des App-Designs und die Gestaltung des User Interfaces verlaufen parallel dazu und sind eine ganz eigene Herausforderung für Entwickler:Innen und Designer:Innen. Die Human Interface Guidelines (HIG) von Apple und das Material Design (MD) von Google sind dabei eine erste Hilfestellung. Sie unterstützen Developer dabei, das User Interface (UI) zu optimieren. Was HIG und Material Design überhaupt umfassen und warum sie so wichtig sind, haben wir zusammen mit allen relevanten Informationen zum Thema UI Analyse in diesem Beitrag gebündelt, damit Ihr Euren Nutzer:Innen die beste Experience bieten könnt.
Apples Human Interface Guidelines kurz vorgestellt
Das sind die drei Säulen, die Apple für die UI in seinem HIG für iOS Systeme grundlegend festlegt:
- Klarheit: Die Schrift ist in allen Größen immer gut lesbar, Symbole sind präzise, und das Design ist insgesamt funktional.
- Fügsamkeit: Bewegungen sind flüssig und Inhalte füllen normalerweise den gesamten Bildschirm aus.
- Tiefe: Eindeutige visuelle Ebenen kommunizieren die Hierarchie der Inhalte, und Übergänge verleihen ein Gefühl von infiniter Tiefe.
Auf diesen drei Hauptthemen bauen dann Apples Designprinzipien auf:
- Ästhetische Integrität bedeutet, dass Form und Erscheinung einer App stets der Funktion folgen. So sollten Produktivitätsapps wie Kalender oder Zeiterfassungsapps also in ihrer formalen Gestaltung aufs Wesentliche beschränkt sein, einfache Kontrollelemente und keine ablenkenden Grafiken oder ähnliches aufweisen. Für Gameapps kann hingegen das Gegenteil der Fall sein – der Usecase definiert die Erscheinung.
- Konsistenz bedeutet, dass sich eine App bekannter und vom User gelernter Elemente, Grafiken und Interaktionen bedienen sollte.
- Direkte Manipulation bezeichnet die Richtlinie, dass es auf jede Aktion ein direktes Feedback gibt. Einfachstes Beispiel ist das Kippen des Screens und der Wechsel von Hoch- zu Querformat.
- Feedback beinhaltet Signale, die User über die Nutzung der App informieren. Dazu gehören aufleuchtende Icons, Lade- und Fortschrittsbalken oder das rote Aufleuchten, Einrahmen von Formularfeldern oder das Zentrieren des Bildschirms auf diese.
- Apple nutzt Metaphern, um Interaktionen greifbar zu machen, denn Benutzer:Innen lernen schneller, wenn virtuelle Objekte und Aktionen etwas Bekanntes aus dem Alltag widerspiegeln – egal, ob sie aus der realen oder virtuellen Welt stammen. Das klassische Beispiel hierfür: Das Streichen über den Bildschirm erinnert an das Durchblättern einer Zeitung und ist damit eine intuitive Handlung.
- Nutzerkontrolle meint die Balance zwischen Sicherheit, Hilfestellung und den Wünschen des Users: Das einfachste Beispiel sind Autokorrekturen bei Texteingaben. Wenn Nutzer:Innen etwas falsch tippen oder eigene Wortkreationen verwenden wollen, sollten sie das tun können, ohne dass die Korrektur diese Wörter ständig automatisch korrigiert – außerdem sollte die Möglichkeit bestehen, dass die Wörter ins Wörterbuch eingefügt werden können, damit sie später auch zur Verfügung stehen.
Googles Material Design kurz vorgestellt
Material Design ist die visuelle Open-Source-Designsprache von Google und basiert maßgeblich auf materialartigen Komponenten wie Flächen, Objekten und Icons. Erst im Jahr 2014 entwickelt, befindet sich dieses Projekt stets in der Weiterentwicklung.
Googles Designprinzipien ähneln in manchen Punkten denen von Apple, sind in anderen Aspekten jedoch sehr anders. Google fordert das sogenannte Flat Design, inspiriert von Strukturen und Texturen der realen Welt. Elemente sollen sich beispielsweise wie Papier verhalten, wie Glas oder Metall Licht und Schatten spiegeln und so eine natürlich anmutende, virtuelle Welt erzeugen. Google hat dafür unter anderem seine eigene Typographie entwickelt und legt größeren Wert auf aktivierende Animationen als Apple.
Warum gibt es diese Guidelines?
Google und Apple wollen mit diesen Richtlinien zum einen sicherstellen, dass alle Apps, die in ihre Stores aufgenommen werden, hinreichende Qualitätsstandards erfüllen. Zum anderen geht es darum Konsistenz zu schaffen: Designrichtlinien sind bedeutsam, weil sie ein einheitliches Erscheinungsbild definieren und eine nahtlose Integration in das entsprechende Betriebssystem ermöglichen. Beide Unternehmen haben ein Interesse daran, mit dem bestmöglichen UI Design die bestmöglich User Experience zu bieten. Diesen Anspruch teilen sie sich mit uns Appentwickler:Innen, -designer:Innen und -tester:Innen.
Warum ist die Umsetzung dieser Vorgaben so wichtig?
Es kann manchmal schwierig sein, bei allen iOS- und Android-Vorschriften auf dem Laufenden zu bleiben, doch ist es wichtig, die Standards zu verstehen und zu erfüllen. Eine App erfüllt dann ihren Zweck am besten, wenn sie ihre Aufgaben effizient erledigt. Das schafft sie durch ein einfaches Oberflächendesign, intuitive Interaktionsmöglichkeiten und eine klare Sprache.
Entwickler:Innen haben das Ziel, durch einen konsistenten „Look & Feel“ ein Gefühl von Vertrautheit zu schaffen. So erlernen Nutzer:Innen die Benutzung einer App schneller, was dazu führt, dass sie gern und häufiger auf diese App zurückgreifen. Wenn Eure App Elemente nutzt, die die Zielgruppe schon kennt, kommt es zu weniger Verwirrung, Nutzungsschwierigkeiten und einer niedrigeren Lernkurve.
Es gibt starke Konkurrenz in den App Stores und zahlreiche Apps, die die gleiche Aufgabe erfüllen. Nutzer:Innen fühlen sich schnell frustriert, wenn die Bedienung einer App an einer klobigen Nutzeroberfläche scheitert. Daher ist ein benutzerfreundliches UI von absolutem Vorteil, wenn Ihr Eure App im Markt differenzieren und vor die Konkurrenz stellen wollt.
Fazit: Wie wir Developer beim UI-Design unterstützen
Manche der oben genannten Richtlinien erscheinen Euch vielleicht als selbstverständlich, doch als Entwickler:In braucht Ihr auch eine Außenperspektive, um potenzielle Probleme wahrzunehmen. Unser DESIGNLab analysiert das UI Eurer App auf Grundlage der HIG und MD. Wir haben beide Richtlinien ausführlich ausgewertet und zu jeder Vorgabe von Apple und Google einen Best Practice App Screen in Sketch designt. In unserem interaktiven Testbericht stellen wir diese App Screens den Ergebnissen Eurer App-Analyse gegenüber und machen klare Vorschläge zur Optimierung Eurer App.
Vereinbart gern einen Termin mit uns, um mehr über unsere Analysedienstleistungen zu erfahren.