blog.atwork.at

news and know-how about microsoft, technology, cloud and more.

Touch Me! Die Grundlagen der neuen Windows 8 Oberfläche "Metro" im Überblick

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!

win8_touch

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.

win8_touch_primary_hand_a

Dem gegenüber steht das Halten des Slate mit beiden Händen und Navigation mit den beiden Daumen.

win8_touch_primary_hand_b

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:

win8_touch_thumbs_heatmap_app

Auch bei Sliding (und Drag & Drop) sind einige Dinge zu beachten: Ein Benutzer zieht beispielsweise keine "gerade" Linie (z.B. beim Wechseln von Bildern).

win8_touch_move

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:

win8_touch_interactions

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.

win8_touch_demo_4_swipe_from_edge

Mit den Gesten können viele Aktionen in der neuen Oberfläche erfolgen, zum Beispiel auch Selektieren.

win8_touch_demo_2

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!

win8_touch_demo_3_dragndrop

Drag & Drop versteht sich da schon von selbst...

Tiles verhalten sich übrigens wie Buttons. Bei längerem Anklicken (und Halten) folgt ein Tooltip.

win8_touch_demo_5_tooltip

Dieser verschwindet sofort wieder wenn das Element bewegt oder losgelassen wird.

Auch das Vergrößern und Verkleinern erfolgt intuitiv.

win8_touch_demo_6_zoom

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.

win8_touch_demo_7_semantic_zoom

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:

  1. Verwende Controls zur Darstellung des Inhalts - das System kümmert sich darum.
  2. 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?

win8_touch_tile_size

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. Zwinkerndes Smiley

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.

win8_touch_demo_8_mouse

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!



Loading