UI-Richtlinien: Android / Chrome OS für Einsteiger

In Interface Design, User Experience Posted

Wer mit der Entwicklung einer eigenen Applikation liebäugelt, sieht sich stets mit der gleichen Problematik konfrontiert. Jedes Betriebssystem wartet mit unterschiedlichen Anforderungen zur praktischen Umsetzung auf. Anwendungen, die beispielsweise über Android laufen sollen, unterliegen festgelegten UI-Gestaltungsrichtlinien. Diese sollten während der Entwicklung bestenfalls erfüllt werden, um eine reibungslose User Experience zu ermöglichen. Android und das ebenfalls von Google entwickelte Pendant Chrome OS weisen zahlreiche Schnittstellen auf, sodass beide Betriebssysteme in einem Atemzug unter die Lupe genommen werden können.

Das Ziel hinter diesen Guidelines ist relativ einfach zu durchschauen. Sämtliche Anwendungen, die unter dem Namen Android oder Chrome OS laufen, sollten in Sachen Bedienbarkeit natürlich keine versteckten Hindernisse aufweisen. Customizing, also die Anpassung der App an die individuellen Wünsche und Bedürfnisse der Kunden, steht somit im Vordergrund. Die einwandfreie Funktionalität und eine möglichst simple Nutzerführung bilden dabei das Kernelement einer optimierten Usability und ermöglichen, dass das Produkt für alle Nutzer*innen immer und überall zugänglich ist.

Grundlegende UI-Gestaltungsrichtlinien

Um die Entwicklung einer Applikation gemäß den Anforderungen von Android beziehungsweise Chrome OS zu vereinfachen, eröffnen zahlreiche Plattformen wie beispielsweise Material Design Zugang zu ebensolchen UI-Gestaltungsrichtlinien. Darüber hinaus leistet die eigens entwickelte Designsprache Hilfestellung, wenn es um die praktische Umsetzung der Anwendung geht. Zu Beginn empfiehlt sich jedoch zunächst ein Blick auf die groben Gestaltungsprinzipien zur Entwicklung einer App zu werfen, die nicht nur funktional ist, sondern auch den ästhetischen Ansprüchen der User entgegenkommt.

1. Metaphorische Materialität

Das Grundprinzip hinter der metaphorischen Gestaltung von Objekten ist sehr viel einfacher, als es der Name vielleicht vermuten lässt. Im Grunde genommen geht es nämlich um das Design verschiedener Anwendungselemente in Anlehnung an real existierende Materialien. Ein kurzes Beispiel: in unserer realen Welt wirft zwangsläufig alles einen Schatten. Folglich sollten Elemente einer Anwendung ebenso mit solch einem Schatten versehen werden. Dieser verschönert nicht nur das optische Erscheinungsbild des Interfaces, sondern bestimmt auch die Beziehung der einzelnen Elemente zueinander.

2. Visuelle Erlebnisse durch Bilder, Illustrationen und Animationen

Ein Design im Sinne des Minimalismus sollte natürlich möglichst reduziert in knalligen Effekten sein. Bilder und Illustrationen sind hingegen stets ein willkommenes Instrument, das Interface Design durch eindrucksstarke Visualisierungen zu bereichern. Möglichst kleine Zwischenräume fördern dabei die Übersichtlichkeit des Contents. Die Hinzunahme von Animationen unterstützt hingegen die Navigation, indem die Aufmerksamkeit der User gezielt geführt wird.

3. Dezente Farben

Eine weitere Stufe zum Aufbau einer Hierarchie der einzelnen Bedienelemente bildet die gezielte Farbwahl. Das Branding sollte dabei auf lediglich einem Farbton basieren, welcher sich wie ein roter Faden durch das komplette Corporate Design des Produkts zieht. Relevante Elemente entsprechen bestenfalls diesem Farbton und vereinfachen parallel dazu die Orientierung innerhalb der Benutzeroberfläche. Grelle und knallige Elemente sollten hingegen nur dezent Anwendung finden.

4. Grundlinienraster zur Navigation

Sobald eine bestimmte Menge an Content auf dem eher begrenzten Raum eines Smartphones angeordnet werden muss, kommt es auf eine durchdachte Architektur der Anwendung an. Die von Google entwickelte Designsprache Material Design, auf die wir später noch einmal zurückkommen werden, setzt auf Grundlinienraster. Als grober Leitfaden zur Ausrichtung der einzelnen Elemente optimiert dieser nicht nur die visuelle Erscheinung einer App, sondern ebenso die Lesbarkeit der digitalen Inhalte.

5. Responsive Interaktion

Auch wenn der Begriff zunächst Fragen aufwerfen mag; die Übersetzung aus dem Englischem eröffnet den Nutzer*innen, worauf der Einsatz responsiver Interaktionen genau abzielt: die Entwicklung einer automatisierten Antwort der Maschine auf eine spezifische Aktion des Menschen. Der Touchscreen mobiler Endgeräte erweist sich hierbei als perfektes Ausgangsmaterial für digitale Experimente aller Art. Android und Chrome OS punkten dabei vor allem durch die Funktion des Touch-Feedbacks, also der direkten Reaktion des Smartphones auf die Interaktion des Users. Darüber hinaus vermittelt die Option, einzelne Elemente lediglich mit der Bewegung des Fingers zu Verschieben das Gefühl, Hand über die individuelle Gestaltung des Interfaces zu haben – ganz im Sinne des Customizing.

Essentielle Elemente der UI-Gestaltungsrichtlinien

Egal ob Tablet, Laptop oder Smartphone; die grundlegenden Elemente einer Applikation weisen stets die eine oder andere Überschneidung auf. Nichtsdestotrotz sprechen die verschiedenen Guidelines unterschiedliche Empfehlungen zur adäquaten Gestaltung einer Anwendung aus.

Bezüglich der Schaltflächen zählt bei Android und Chrome OS beispielsweise wieder einmal der Minimalismus. Entgegen realistischer Designs (wie dem etwas in die Jahre geratenen Skeuomorphism von Apple) sind Verläufe, starke Schattierungen oder gar glänzende Oberflächen ein absolutes Tabu. Relevante Schaltflächen sollten dezent aus dem Bildschirm hervortreten und das optisch Gefühl der Haptik vermitteln. Hintergrundelemente können jedoch stets an die Prinzipien des Flat Designs angelehnt werden.

Um wieder auf die Übersichtlichkeit des Interfaces zurückzukommen, empfehlen sich Listen- und Kachelansichten zur gezielten Koordinierung des Contents. Listen beinhalten dabei kurz und knackig übermittelte Textinhalte, während Kacheln sich besonders für Visuelles anbieten. Sollte dennoch das Objekt der Begierde innerhalb der Applikation nicht ausfindig gemacht werden können, erweist sich die In-App-Suche stets als hilfreiches Feature zur Optimierung der Nutzerfreundlichkeit. Mit entsprechendem Such-Widget versehen lässt sich diese kinderleicht in die App integrieren.

Zur Umsetzung der App für Android und Chrome OS

Statt sich der zu Beginn erwähnten Mammutaufgabe zu stellen und die Applikation gemäß der Guidelines für Android und Chrome OS komplett im Alleingang zu kreieren, schafft wieder einmal das Web mit einer quasi maßgeschneiderten Designsprache Abhilfe. Material Design definiert sämtliche Prozessschritte vom Reisbrett bis zur finalen Anwendung und vereinfacht die Entwicklung um ein Vielfaches. Die Basis bilden dabei minimalistische Gestaltungsansätze, wie beispielsweise aus dem Flat Design, in Kombination mit kleineren Animationen zur Erhöhung der Joy of Use. Die aufgelisteten Guidelines sind dabei primär auf die Gestaltung von Applikationen für Android ausgerichtet. Aufgrund zahlreicher Parallelen in der Funktionalität, eignen sich diese UI-Gestaltungsrichtlinien allerdings ebenso gut für das Betriebssystem Chrome OS. Eine Programmierung entsprechend der Bedürfnisse der User steigert dabei nicht nur Faktoren wie Nutzerfreundlichkeit und -interaktion, sondern stellt darüber hinaus die Funktionalität auf sämtlichen Endgeräten sicher.

• Apps mit Material Design ansprechend gestalten developer.android.com 2020
• Material Components for Android 1.2.0 Material Design am 08.04.2020