Die Blogs der ATE-Experten

User-Interface-Design von Universal-Apps

29. Juni 2015 von Torsten Schneyer

Als Universal-Apps bezeichnet Microsoft Apps, die so geschrieben und designed sind, dass sie auf unterschiedlichen Geräten laufen und  über den Windows Store vertrieben werden. Sie haben einen einzigen, gemeinsamen Code und passen sich an allerhand Zielplattformen an. Dazu gehören neben den üblichen Desktop-PCs und Smartphones auch Tablet-PCs und sogenannte „Phablets“, also Smartphones mit überdimensioniertem Bildschirm. Darüber hinaus sollen Universal-Apps außerdem auf Wohnzimmergeräten wie der Xbox und diversen Smart-TVs sowie auf sogenannten IOT-Devices (Sensoren und Kleingeräte aus der Industrie mit keinem oder nur sehr kleinem Bildschirm) laufen.

Diese Universal-Apps müssen freilich nicht nur programmiert, sondern auch mit einem ansprechenden Design und einer nutzerfreundlichen Bedienoberfläche ausgestattet werden. Dies stellt Designer vor neue Herausforderungen, eröffnet ihnen aber auch ein ganzes Feld an neuen Möglichkeiten

Befreit vom Diktat der Auflösung

Beim klassischen Responsive-Design, z.B. für Websites, muss der Designer alle Zielauflösungen kennen, auf denen das Endprodukt wirken soll und die verschiedenen Versionen jeweils auf diese Zielauflösungen hin optimieren. Bei Universal-Apps hingegen gibt es aufgrund der vielen Zielplattformen derart viele in Frage kommende Auflösungen, dass jeder Designer überfordert wäre. Also befreit Microsoft die Designer einerseits vom Diktat der Zielauflösung, andererseits sollen sich die Apps natürlich trotzdem „responsive“ verhalten. Dies löst Microsoft mit dem Einschub einer weiteren Design-Ebene, den sogenannten „Effektiven Pixeln“. Die Universal-App wird nicht mehr für einzelne Auflösungen, sondern für sogenannte Größenklassen entworfen.

Größenklassen sind virtuelle Auflösungen, die völlig unabhängig von den späteren realen Auflösungen zu betrachten sind, sie arbeiten mit „effektiven Pixeln“, mit denen der Designer seine Layouts entwirft. Effektive Pixel beziehen die Auflösung und die Bildschirm-Größe (DPI) mit ein. Man arbeitet also mit einer virtuellen Auflösung, die auf allen Geräten innerhalbe einer Größenklasse eine ungefähr gleiche Darstellungsgröße garantiert. Windows 10 wiederum skaliert diese Layouts dann jeweils dynamisch und in Laufzeit auf die eigentliche Zielauflösung des Gerätes. Der Designer kann die tatsächliche Pixeldichte des Zielgerätes während des kreativen Prozesses komplett ignorieren, zumal das Flat-Design von Windows inzwischen sowieso größtenteils mit klaren Farben, Vektorgrafiken und Typographie arbeitet. Lediglich Bitmaps sollten für hochauflösende Plattformen in entsprechend guter Qualität vorliegen.

Effektive Pixel

Skalierung einer Schrift auf verschiedene Anzeigen durch effektive Pixel. Quelle: Microsoft.

 Capabilities und Geräteklassen

Bisher hat man das Layout und die Funktionen einer App vor Allem an die Geräteklasse (z.B. Phone, Tablet, PC) angepasst. Ein Handy hat einen kleinen Bildschirm und wird per Touch bedient, ein PC hat einen großen Bildschirm und wird per Maus und Tastatur gesteuert.

Die Unterscheidung in Geräteklassen ist heute nicht mehr zeitgemäß. Zum einen ist der Übergang zwischen Phone und Tablet fließend (und führt sogar zu Zwittern wie den erwähnten Phablets), zum andern gibt es flexible Geräte, die  sich als Tablet und Notebook nutzen lassen (z.B. Microsofts Surface).

Deshalb stehen bei Windows-10-Universal-Apps nicht die Geräteklassen, sondern deren Fähigkeiten (Capabilites) im Vordergrund. Das Layout und die Bedienbarkeit der App richten sich nach den „Effektiven Pixeln“ und den vorhandenen Eingabemethoden. Das hat u.a. den Vorteil, dass eine App sich auch zur Laufzeit an Veränderungen anpassen kann. Wird z.B. das Fenster auf dem PC verkleinert kann die App sich daran anpassen und ein kompakteres Layout wählen, das auch für die Darstellung auf kleinem Screen Verwendung findet. Trennt man die Tastatur von seinem Surface Tablet ab, kann die App darauf sofort reagieren und eine Layout wählen, das besser zur Touch-Bedienung  passt. Unter Windows 10 passt sich sogar der Desktop des Betriebssystems entsprechend an. Microsoft nennt diese Eigenschaft „Continuum“.

Das geht soweit, dass sich am Windows-10-Handy eine Tastatur und Maus per Bluetooth anschließen lassen und die Apps damit bedient werden können. Das scheint auf den ersten Blick unsinnig, wenn aber das Handy zusätzlich an einen Monitor oder Fernseher angeschlossen wird, kann man dann mit der App wie auf einem PC arbeiten. Microsoft hat dies bereits mit seiner Office16 Universal-App demonstriert.

Obwohl die Capabilites bei Universal Apps im Vordergrund stehen, kann es aber auch Sinn machen, die Geräteklasse zu berücksichtigen. Z.B. kann die dargestellte Information von den „Effektiven Pixeln“ abhängen, so dass in einem kleinen Fenster auf dem PC dieselben Informationen wie auf einem kleinem Handy-Bildschirm angezeigt werden. Am PC ist man es gewohnt, dass die Menüs am oberen Fensterrand platziert sind. Beim Handy sollte das Menü aber am unteren Rand zu finden sein, damit es leicht mit dem Daumen zu erreichen ist. So kann die Platzierung des Menüs u.U. von der Geräteklasse abhängen.

Universelle Bausteine

Möchte man als Designer das erste Mal eine Universal-App entwerfen, ist man schier erschlagen von den Möglichkeiten. Hier gilt es, Ordnung ins Konzept bringen und erst einmal nach dem Prinzip „weniger ist mehr“ arbeiten. Die UWP („Universal Windows Platform“) gibt uns eine große Anzahl an Tools in die Hand, mit denen wir schnell zu einer App kommen, die wirklich universal ist.

  • „Universal Controls“ sind fertige Bedienelemente die garantiert auf allen Geräten funktionieren, sich an die jeweilige Bedienungsumgebung (Maus, Touch ect.) anpassen und schnell in jede App eingebaut werden können.  Zurzeit gibt es davon 32 Stück, von einfachen Buttons und Checkboxen bis zu komplizierten Kartenansichten und Kalendern.
  • „Universal Styles“ sind Stile, die auf allen Geräten Lesbarkeit und Darstellungsklarheit garantieren, z.B. durch starke Kontraste, die Verwendung der Segoe-UI-Fontfamilie oder der Unterstützung von gerätespezifischen Hell-Dunkelprofilen, z.B. bei Smartphones
  • „Universelle Vorlagen“ sind Sammlungen von fertigen Adobe-Illustrator- und Powerpoint-Dateien, welche als Design-Templates verwendet werden können. Sie enthalten Baukästen aus Layouts und Steuerelementen, mit denen sich in der ersten Entwurfsphase schnell Mockups und Reinzeichnungen erstellen lassen.

buttons

 

Helle und dunkle Variante des Universal Styles anhand eines Buttons. Quelle: Microsoft.

 Navigationskonzepte

Wie schon bei Windows 8 setzt Microsoft auch bei Windows 10 nicht nur auf die Ästhetik des Flat-Designs, sondern auch auf eine möglichst puristische, intuitive und eher Seiten-basierte Navigation zwischen den einzelnen Segmenten einer App.
Hierbei ist der Designer angehalten, möglichst viele Features auf Systemebene, wie z.B. den „Zurück“-Button, zu verwenden, aber es stehen ihm zum Aufbau einer sinnvollen Navigationsstruktur natürlich viele weitere, auch komplexe, Grundbausteine zur Verfügung.
Hierarchische Navigationselemente wie der Metro-typische „Hub“ oder eine klassische Master-Detail-Ansicht sind ebenso schnell im Screendesign-Tool (Blend) „zusammengeklickt“ wie peer-to-peer-Lösungen wie z.B. eine Panoramaansicht aus mehreren, hintereinander scrollenden und „snappenden“ Seiten.

navconcepts

 

Schematische Darstellung von Navigationskonzepten. Links: Navigations-Hierarchie, Rechts: Zurück-Funktionalität auf Desktop-Geräten. Quelle: Microsoft.

Der Designer sollte sich darüber im Klaren sein, dass es sehr wahrscheinlich keine Navigationsstruktur gibt, die auf allen Geräten gleich gut funktioniert und er für verschiedene Plattformen u.U. auch verschiedene Arten der Navigation innerhalb derselben App vorsehen muss.
Die Navigationsstruktur kann also auch von der Geräteklasse abhängen.

Reaktives Design

Der letzte Schritt für den Kreativen auf dem Weg zur Universal-App ist die Beschäftigung mit reaktiven Designtechniken. Welche Möglichkeiten hat der Designer, um seine App an die Bildschirmgröße, Auflösung und Eingabegeräte anzupassen?

Das Design der App muss adaptiv sein. Die offensichtlichste Anpassung ist die des Layouts zur effektiven Ausnutzung des Bildbereichs und zur schnellen Navigation. Möglichkeiten hierzu gibt es viele: angefangen bei einem Ändern der Position, Ändern der Größe und dem Neuanordnen des Layouts über das Ein-und Ausblenden von Elementen bis hin zum Ersetzen ganzer Designs oder sogar zum völligen Anpassen der kompletten Design-Architektur. Eine Kombination dieser Techniken ermöglicht Apps, die sich überall optimal darstellen.

geraete

Unterschiedliche Layouts (Phone und Tablet) des gleichen reaktiven Designs. Quelle: Microsoft.

 

Wie bereits erwähnt muss auch die Eingabeseite der App berücksichtigt werden: Die App Smartphone-Besitzer steuern ihre App gerne mit dem Daumen über den unteren Bildschirmrand, Desktop-User sind es gewohnt, dass sich die Navigation grundsätzlich oben befindet, Stifte, Finger und Mäuse müssen erkannt und integriert werden usw.

Schlussendlich kann der Designer auch noch berücksichtigen, dass es Geräte gibt, welche über besondere Fähigkeiten (Capabilities) verfügen und diese verwenden. So besitzen mobile Geräte oft über Kameras, GPS- und Neigungssensoren.

Wie bereits in meinem ersten Windows-10-Artikel „Windows 10 – Ein neuer Anlauf“ beschrieben, funktioniert die Anpassung des reaktiven Design im Detail dann über sogenannte „adaptive Trigger“. Diese sind Schaltstellen, die bei der Änderung bestimmter Parameter (z.B. eine Vergrößerung der Fensterbreite auf dem Desktop oder dem Drehen des Phones ins Hochformat) einzelne Controls dazu veranlassen, ihr Layout zu verändern. Dies geschieht über die dem Designer bereits bekannten „Visual Status“, welche er z.B. mit der Blend-Software vergleichsweise intuitiv definieren kann.

 

In meinem nächsten Windows 10 Blog-Artikel werde ich anhand einer einfachen Beispiel-App ein Vorgehensmodell vorstellen, das sich zu Planung und Konzeption adaptiver Windows 10 Apps eignet.

Share it:

Weitere Einträge zu den Themen: , , , , , , ,

Einen Kommentar abgeben (Sie müssen dazu registriert und angemeldet sein!)

Bitte beachte: Die Kommentare werden moderiert. Dies kann zu Verzögerungen bei Deinem Kommentar führen. Es besteht kein Grund den Kommentar erneut abzuschicken.