Die Windows 8 Touch Oberfläche ("Metro") bietet völlig neue Möglichkeiten der Bedienung. Sobald man die grundlegenden Gesten erlernt hat, können diese systemweit verwendet werden - wenn die App es unterstützt! Hierzu empfehle ich dieses Video von der Build Windows Conference - hier werden die wichtigsten Grundlagen der "Touch Language" von Metro gezeigt:
Designing Metro style apps that are touch-optimized (APP-391T)
Als kurze Zusammenfassung habe ich hier einige der Möglichkeiten der neuen Touch Oberfläche beschrieben. Dieser Überblick soll auch Anwendern und Entwicklern helfen, die sich selbst noch nicht mit der Developer Preview Version von Windows 8 befasst haben.
Viele Erfahrungen des Entwicklungsteams stammen von Microsoft Surface und einer Vielzahl von Forschungen.
Sehen wir uns die Grundlagen von Metro an!
In diesem Beispiel funktioniert das Vergrößern des linken Fensters per Ziehen, obwohl sich der Berührungspunkt nicht exakt auf der rechten unteren Fenster-Ecke befindet (siehe rechtes Fenster mit vergrößertem Bildausschnitt und dem roten Abstand zur Fensterecke). Das System versteht also wirklich, was der Benutzer "meint".
Wichtig ist auch, wie Benutzer einen Tablet PC benutzen: Dieser wird oft mit einer Hand gehalten - oft unterstützt von einem Bein, oder auf einen Tisch gelegt. Der Benutzer halt also seine "primäre" Hand zur vollen Steuerung.
Dem gegenüber steht das Halten des Slate mit beiden Händen und Navigation mit den beiden Daumen.
Die "Heatmap" zeigt jene Bildschirmbereiche, die per Daumen bequem zu erreichen sind - eine Touch-Anwendung sollte das berücksichtigen. So zum Beispiel in dieser App - die wichtigsten Elemente sind erreichbar:
Auch bei Sliding (und Drag & Drop) sind einige Dinge zu beachten: Ein Benutzer zieht beispielsweise keine "gerade" Linie (z.B. beim Wechseln von Bildern).
Und: Das Ziehen sollte auch gleich das Objekt "mitnehmen" - nur so ergibt sich eine flüssige, logische Bedienung: "direct manipulation".
Die Reaktion muss "fluid" sein - WinRT sei Dank! Wichtig ist auch, dass alle Gesten "einfach und intuitiv" sein müssen.
Die Erkenntnisse des Entwicklungsteams haben folgendes "command set" für Windows 8 Touch ergeben:
Die "Touch Language" von Windows 8 besteht aus sieben Gesten.
Eine für mich ganz neue Geste war beispielsweise das Ziehen vom Rand in den Bildschirm um z.B. die App Bar od. das System UI (charms) anzuzeigen: Swipe from edge.
Mit den Gesten können viele Aktionen in der neuen Oberfläche erfolgen, zum Beispiel auch Selektieren.
Sobald ein Benutzer die Geste kennt, kann er sie überall verwenden - am Startscreen und natürlich in eigenen Apps. Im Bild oben (ein Newsreader) werden mehrere Tiles (hier: Artikel) durch Swiping (kurzes nach unten Ziehen) in der rechten oberen Ecke selektiert - und die App Bar erscheint und bietet Methoden zum Bearbeiten der selektierten Objekte. Eine coole Sache.
Wie kann Swipe verwendet werden? Simpel: Durch Verwenden der List und Grid Controls!
Drag & Drop versteht sich da schon von selbst...
Tiles verhalten sich übrigens wie Buttons. Bei längerem Anklicken (und Halten) folgt ein Tooltip.
Dieser verschwindet sofort wieder wenn das Element bewegt oder losgelassen wird.
Auch das Vergrößern und Verkleinern erfolgt intuitiv.
Zooming ist eine weitere wichtige Geste - mit zwei Fingern wird die Oberfläche oder ein Element verkleinert oder vergrößert. Mit "semantic view" kann die Darstellung von gezoomtem Inhalt auch komplett angepasst werden. So zeigt die Apps-Liste dann keine Symbole, sondern eine Gruppierung nach Namen. Clever.
Wie verwendet man das? Mit dem semantic view control! Das Control ist im System eingebaut - der Entwickler entscheidet über die optimale Darstellung seines Inhaltes.
Um eine App "fluid" und somit attraktiv zu machen gelten für Developer diese Regeln:
- Verwende Controls zur Darstellung des Inhalts - das System kümmert sich darum.
- Beachte, dass alle interaktiven Elemente visuelles Feedback auf den Touch zeigen.
Zum Abschluss noch eine Empfehlung an App-Designer und Software-Developer:
Wie groß sollen Touch-Elemente sein?
Die Antwort: 9mm, besser 11mm.
Bei 9mm liegt die Fehlerquote bei nur mehr 1 Fehler bei 100 Versuchen. Bei 11mm Größe bei 1 Fehler von 1000 Versuchen. Damit kann man leben.
Zwischen interaktiven Elementen sollten übrigens min. 2mm Abstand (padding) sein - dann trifft man auch das richtige Element.
Noch ein Wort zur Verwendung der Maus: Das funktioniert natürlich nach wie vor.
Das System zeigt dann zum Beispiel beim Bewegen der Maus eine Scrollbar. Elemente können mit Rechtsklick markiert werden. Als Entwickler braucht man sich darum nicht zu kümmern!
Mit Metro gibt es also keine (gewohnten) Fenster und keine Icons mehr. Stattdessen neue, interaktive Apps.
Tipp: Video Designing Metro style apps.. ansehen!
Viel Spaß mit Metro und den neuen, coolen Apps mit Touch!