Jensen Harris (Director of Program Management User Experience, Microsoft) hat in seinem Vortrag die Erfolgsfaktoren aus UX-Sicht für erfolgreiche Metro-Style Apps vorgestellt.

Windows reimagined, apps reimagined.

Metro-Style Design

Der Kern des Metro-Style ist, dass sich die Bedienoberflächen deutlich mehr auf den Inhalt und den Anwendungsfall fokussieren als bisher, auf schmückendes Beiwerk verzichten und wenig genutzte Funktionen in den Hintergrund stellen. Die neuen Metro-Style Anwendungen sollen auf das Wesentliche reduziert sein. Die dadurch entstehenden Freiräume und das Gefühl von Einfachheit sind ein wesentliches Merkmal der neuen Designsprache. Die neue Designsprache bietet darüber hinaus mehr Spielraum für Ästhetik und Schönheit, die es zu Nutzen gilt. Um dies für Entwickler so einfach wie möglich zu gestalten, gibt es für Apps vordefinierte Gestaltungsraster, die in Form von Templates für die gängigen Programmiersprachen genutzt werden können.


Metro-Style Template

Sehenswert ist u.a. der Abschnitt des Vortrages in dem Jensen Harris zeigt, wie er am Beispiel eines RSS-Readers gestalterisch von einer klassischen Windows-Applikation zu einer Metro-Style App kommt:


Step 1: RSS Reader classic

Step 2: RSS Reader better style

Step 3: RSS Reader reduced

Step 4: RSS Reader Metro-Style

Fast and fluid

Bei Metro-Style Apps wird die Bedienung über Touch vor die Bedienung mit Tastatur und Maus gestellt – Touch-First Ansatz. Um diesen Ansatz zu unterstützen wird Windows 8 neue Touch-Gesten und -Interaktionen, wie z.B. Semantic Zoom, mitbringen. Jensen Harris empfahl bei der Oberflächengestaltung nicht einfach mausorientierte Oberflächen touchfähig zu machen, sondern die Möglichkeiten von Multitouch auszuschöpfen. Weiterhin empfiehlt er keine getrennten User Interfaces für die Interaktion mit Maus und Finger zu entwickeln. Aus seiner Sicht sollten Metro-Style Anwendungen für Touch optimiert und die Interaktion mit der Maus nachgelagert betrachtet werden.

A screen without touch is a broken screen in a few years.

Microsoft geht offensichtlich davon aus, dass sich Touchscreens in Zukunft durchsetzen werden und der Maus das Dasein streitig machen werden. Durch die Zunahme von Touch steigen natürlich auch die Anforderungen hinsichtlich Performance und Reaktionsgeschwindigkeiten. Die Erfahrung hat gezeigt, dass Anwender bei Touchinteraktionen Wartezeiten noch weniger akzeptieren als bei Mausinteraktionen. Ein Grund dafür ist, dass Touch-User Interfaces, die nicht schnell genug reagieren eher für abgestürzt gehalten werden. Es fehlt ein Indikator wie ein reagierender Mauszeiger, der ein Feedback dazu gibt, ob der Computer noch läuft oder nicht.
Weiterhin hat Jensen Harris die Notwendigkeit von Animationen in Metro-Style Apps thematisiert. Animationen sollen eingesetzt werden um Übergänge besser zu kommunizieren und dem Anwender mehr Orientierung zu geben. Durch Animationen soll die Anwendung auch emotionaler werden. Als Unterstützung für Entwickler wird es eine Animation Library geben.

Snap and scale beautifully

Metro-Style Apps sollen darauf ausgerichtet werden, dass sie auf allen PCs – vom kleinen Tablet-PC bis hin zum großen Bildschirm – funktionieren. Dabei sollen sowohl querformatige als auch hochformatige Monitore unterstützt werden. Die neue Controls, sowohl die HTML- als auch die XAML-basierten, werden die dafür notwendige Skalierung der Bedienoberflächen besser unterstützen als bisher. Beispielsweise können Icons oder Grafiken zukünftig in 3 Größen hinterlegt werden, die je nach Skalierung dann automatisch vom Betriebssystem angezeigt werden. Die Minimum-Auflösung für Metro-Style beträgt übrigens 1024×768.


Windows 8 Anwendung in Snapped und normalem Zustand

Alle Metro-Style Apps müssen einen sogenannten Snapped State unterstützen. Dieser Zustand kommt zum Einsatz, wenn Anwendungen neben eine Hauptanwendung gepinnt werden. Dies unterstützt nach Ansicht von Jensen Harris den Punkt, dass moderne Anwender gern mehrere Dinge parallel machen. Durch diesen Zustand kann man in der Anwendung arbeiten, die den Hauptteil des Screens belegt, und eine andere Anwendung im Auge behalten, die an den Rand gepinnt ist.

Use the right Contracts

Als Contracts werden Verbindungen zwischen Metro-Style Apps bezeichnet, die vom Betriebssystem angeboten werden. Dies werden dem Anwender teilweise über die sogenannten Charms zugänglich gemacht. Die Charms sind ein Teil der zentralen Betriebssystemsnavigation und werden auf der rechten Seite des Bildschirms angezeigt.


Windows 8 Charms

Aktuell sind Funktionen wie „Teilen“, „Suche“ und „Auswahl“ verfügbar. Sie ergänzen die anwendungsspezifischen Funktionen und bringen diese an eine zentrale und feste Stelle für jede Applikation.

Invest in a great Tile

Besonderes Augenmerk legte Jensen Harris auf die Tiles. Tiles sind dabei keine neue Variante von Icons zum Start einer Anwendung.

Icons are yesterdays way of representing apps.

Sie sind lebendig, erzeugen eine emotionale Verbindung zur Anwendung und bieten relevante Informationen. Sie sind nicht nur der Einstieg in eine Anwendung, sondern eine Art Erweiterung der Applikation über die relevante Informationen auf der Startseite von Windows 8 angezeigt werden können. Das Konzept geht dabei soweit, dass Anwender bestimmte Informationen aus einer Anwendung auf die Startseite pinnen können. Tiles können Text und Bilder beinhalten.


Tiles der Wetter-App von Win 8

Feel connected and alive

Metro-Style Apps sollen sich nicht statisch sondern lebendig anfühlen. Metro-Style Apps werden zwar nur ausgeführt, wenn sie tatsächlich angezeigt werden. Sie sollen sich aber immer so anfühlen, als ob sie ausgeführt werden – auch wenn sie tatsächlich gerade suspended sind oder gar nicht ausgeführt werden.

It’s not a static screens full of icons.

Dabei spielt die Startseite mit ihren Tiles eine wichtige Rolle. Tiles stellen eine „lebendige“ Brücke zwischen Nutzer und Anwendung dar. Sie zeigen dynamisch aktuelle Informationen oder Meldungen aus einer Anwendung an.

Roam to the cloud

Einstellungen und Zustände, wie z.B. Spielstände oder die Stelle eines Artikel, der zuletzt gelesen wurde, können unter Windows 8 mittels Windows Live synchronisiert werden, sodass der Anwender auf jedem Gerät auf diese zugreifen kann. Dafür erhält jede Applikation Speicherplatz in der Microsoft Cloud.

Embrace Metro principles

Bei der Entwicklung und Gestaltung von Metro-Style Apps sollten die folgenden Designprinzipien berücksichtigt werden:

* Pride in craftsmanship
* Be fast and fluid
* Authentically digital
* Do more with less
* Win as one

Eine genauere Erläuterung der Designprinzipien findet ihr im Beitrag von Samuel Moreau zum Thema Designing Metro style: principles and personality.

Siehe auch

Video zum Vortrag
build windows

Kategorien: Dies und Das

Ulf Schubert

Ulf ist Experte für Design Management, User Experience und Design Thinking. Aktuell ist er als Head of UX bei DATEV für die User Experience der DATEV Produkte verantwortlich. Davor hat er mit seiner Agentur openeyes bzw. später bei SirValUse Unternehmen, wie z.B. eBay, Microsoft, OTTO, Axel Springer und MINI, zu User Experience, Innovation und Design beraten. Er engagiert sich über Bitkom und German UPA für besseres Digital Design in Deutschland. Er teilt seine Erfahrungen über Vorträge auf Konferenzen und Trainings. Er ist einer der Gründer und Organisatoren des UX Stammtisch Franken.