Schritt 1: Das Metro-Design

1. Die Siluette einer Metro-Style-App
Konsistente UX wird erreicht durch konsequente Anwendung des Metro-Styles.
Es gibt ein klares Raster, dass immer wieder Anwendung findet. Es gibt als Hilfestellung entsprechende Templates z. B. eine Grid-Applikation. Der Style ist durch entsprechende Anbindung vorhanden.

2. Content vor Rahmen.
Ein Software-Rahmen macht bei entsprechende großen Anwendungen Sinn, besonders bei klassischen Desktopsoftware-Anwendungen wie z. B. Photoshop. Metro-Style-Apps haben Raum zum Atmen und verschwenden keinen Raum für Software-Rahmen. Vergleicht man IE 9 und 10 reduziert sich der Rahmen des Browsers gegen 0.

3. Charms (Buttons) als Analogie zur Appbar
Die App soll nicht mit Buttons zugepflaster werden. Interaktion mit dem Content ist meistens hinreichend.

4. NUI und Gestensteuerung
Schaffen Sie natürliche Benutzerinterfaces, die man anfassen und begreifen kann.

5. Designing für Komfort
Man hat festgestellt, dass Dinge am Rand besser wahrgenommen werden als in der Mitte.

Schritte, um Design besser zu machen:
– Luft integrieren
– Alles weg, was kein echter Content ist.
– Charm als Appbar integrieren am Rand.
– Die Schönheit von Typografie wirken lassen.

Schritt 2: Schnell und flüssig

Es geht um hohe Performance und flüssige Bewegung. Da wir direkt mit dem Screen interagieren, ist es wichtig, flüssige und zügige Reaktionen zu haben. Die Kunst liegt in guter Performance und entsprechender Animation. Windows 8 unterstützt entsprechende Gesten und reagiert mit entsprechenden Animationen darauf. Slide und Drag ohne Warten. Eine andere interessante Geste, ist der optische Zoom, ein inhaltliches Hineinzoomen darstellt in sich vereint (nicht vergrößern, sondern rein- und rausbewegen).

Schritt 3: Touch-Verhalten als erstes Designen

Jeder PC der Zukunft wird touch gesteuert sein. Daher steht in der Designreihenfolgen nun erst das Interaktionsdesign in Bezug auf touch und dann das Screendesign.
Daher: Nutze die Template, die Tools und die Controls. Alles, was wir brauchen ist enthalten.
Schritt 3: Skallierung über verschiedenen Screengrößen hinweg. Snap and Scall beautyfull.
Wenn man sich an die Gesetze: Vektorgrafik, XAML, SVG und CSS hält.
Basis 100% = 1024*768
Widescreen 1366*768
SnapView = Je App muss den Snap-Status implementieren. Ein kleiner reduzierter Status, der am Rand ist.
PortraitView assiert beim Drehen des Tablets.

Schritt 4: Contract / Herstellen der richtigen Verbindungen.

Das bedeutet Interaktion mit anderen Applikationen. Die eine Applikation ruft eine andere App auf und nutzt deren Funktionen. Z. B. Malen und Versenden. Zwei Apps arbeiten zusammen. Gleichermaßen werden Dinge geteilt: Inhalte, Kontakte, Daten. Zum Beispiel ist die Suche überall integrierbar über die Charm-Bar.

Schritt 5: Invest in great Tile/Investition in große Interaktionsflächen

Ein Tile ist ähnlich zu Icon-Idee. Icons sind gestrige Ideen von App-Repräsentaten.
Tiles haben ein eigenleben. Sie werden mit einem kleinen Bild repräsentiert, sie haben aktuellste Infos, sie leben vom beinhalteten Content. Man kann Typo, Bilder, Pfad-Elemente integrieren.
Jeder Teil einer App kann als Tile „gepinnt“ werden auf die Startseite. Damit erhalt die Startseite höchste Aktualität.

Schritt 6: Feel connected and alive

Live-Tiles verbindet Menschen mit ihrem persönlichen Computer. Sie können klein und groß sein. Es sind für den Nutzer und ihre Bedürfnisse gedacht. Nicht für Werbung!!!
Notifications: Es geht um interessante Meldungen, die für den Nutzer da sind. Es geht nicht um Junk-und-Spam. Sie kommen momentbezogen und können schnell wieder entfernt werden. Notifikations sind nur sparsam zu nutzen. Das Update sollte ganz ziel genutzt werden.

Schritt 7: Speicherung im Zusammenhang mit der Cloud

Mit der Cloud wird es möglich, dass ich PC und Device-unabhängig werde. Die Stati und Settings werden in der Cloud festgehalten. Beispiel Spielstände, die nun gemerkt werden könnne und damit auch von anderen Rechnern angezeigt werden können.
– Roaming
– Explizites Sichern wird nicht mehr nötig, da sich die App die Stati merken.
– Windows merkt sich Settings und Stati

Schritt 8. Embrasse Metro Stlye

Video (Silverlight required):