Die Blogs der ATE-Experten

Aus Chrome wird Metro

5. Oktober 2011 von Torsten Schneyer

Metro Design heißt die neue Touch-Oberfläche von Microsoft und wird spätestens mit Windows 8 in aller Munde sein. Genaugenommen ist Metro die Bezeichnung für eine neue Design-Sprache, mit der Windows-Apps bald mit dem User kommunizieren werden. Eine Designsprache bedient sich wie jede Sprache einer Grammatik. In diesem Falle besteht diese Grammatik aus Design-Richtlinien, die uns sagen, wie eine Metro-App auszusehen und sich zu verhalten hat.
Klassische Fenster-UIs wie wir sie bisher von Windows kennen, fallen für die „Early Adopters“ unter den Designern neuerdings unter den Sammelbegriff „Chrome-Design“. Damit ist keineswegs der Google-Browser gemeint. Chrome-Design, das bedeutet: skalierbare, sich überlappende Fenster, Buttons mit 3D-Rand, Trenner, Aus- und Einbuchtungen, Lichter und Schatten, Gradienten und alles andere was irgendwie mit der optischen Simulation von Materialien zu tun hat. Chrome-Oberflächen sind Klicklandschaften, über denen Content verschüttet wurde.
Chrome-Design ist dafür gemacht, flexible, große Oberflächen mit möglichst viel Content und Funktionalität zu füllen. Komplexe, umfangreiche Programme aller Couleur von A wie After Effects bis Z wie Z-Brush (sicher hätte ich auch andere Beispiele nennen können, aber ich bin nunmal Grafiker!) sind (UI-mäßig betrachtet) eierlegende Wollmichsäue und erschlagen den User mit einer Unzahl von Controls. Ist dies bei solch mächtigen Anwendungen noch nachvollziehbar, stößt Chrome bei kleineren schlanken Clients, nehmen wir z.B. einen Messenger oder einen RSS-Reader, schnell an Usability-Grenzen. Hier kann Chrome-Design eher verwirren oder gar nerven.
Metro Design nimmt für sich in Anspruch, hier in eine Lücke vorzustoßen. Metro-Apps sind schlank, übersichtlich und vor allem schön. Drei der Design-Grundsätze von Metro sind für diesen Blogartikel von herausragender Bedeutung. Sie lauten:

  • Clean, Light, Open, Fast / Content, Not Chrome
    Metro-Apps sind schnell, übersichtlich, auf das Aller-Notwendigste reduziert und stellen den Content kompromisslos in den Vordergrund. Grafik ist schlank und puristisch.
  • Celebrate Typography
    Metro-Design feiert die Typo. Inspiriert vom „Swiss Design“ wird dem Textbild eine tragende Rolle zuerkannt.
  • Touch First!
    Metro-Apps sind zwar mit Maus und Keyboard nutzbar, aber im Hinblick auf die kommenden Tablet-PCs gnadenlos Touch-optimiert. Alles an einer Metro-App kann komfortabel auf dem Bildschirm bedient werden.

Mit Sicherheit wird uns Metro eine Flut neuer innovativer Apps bescheren. Doch was ist mit liebgewonnenen, alten Applikationen? Lässt sich eine bisher erfolgreich vermarktete Software als Metro-App umsetzen und wenn ja, was ist dabei zu beachten?
Einen kleinen Einblick bekam man auf der Build-Conference, auf der anhand eines RSS-Readers beispielhaft gezeigt wurde, wie aus einer typischen Chrome-Anwendung eine Metro-App wird.
Im ersten Bild sehen wir den RSS-Reader in seiner alten Windows-Variante. Ein dicker Header, ein Treeview, ein Contentfenster und allerhand Kleinkram. In dieser Phase –nennen wir sie „Schritt 0“- der grafischen Portierung wird die alte UI analysiert und das Metro-Potenzial ermittelt. Und so sieht er aus, unser Chrome-Client:

  • Schritt 1: Clean And Light!

    Aus dem Header werden alle Trenner, Zeilen und Gradienten entfernt und der Content mit einer einheitlichen Hintergrundfarbe hinterlegt. Das Gleiche gilt für alle Header-Blöcke, weg damit. Und siehe da: Wir vermissen den Kram gar nicht, haben ihn anscheinend nie gebraucht.

  • Schritt 2: Content, Not Chrome!

    Die Designer verlagern alle Funktionselemente in versteckte Menüs (dazu später mehr) und reduzieren die Darstellung auf den Content. Dann klopfen sie die verschachtelten Hierarchie-Ebenen flach und packen die verbleibende Kategorie-Struktur in den –nun frei gewordenen- Header. Die Footer-Navigation kann nun entfallen. Die UI ähnelt nun auf den ersten Blick ein wenig einer Website.

  • Schritt 3: Touch First!

    Wenn man die Funktionselemente aus dem Mainscreen verbannt, müssen sie natürlich woanders Platz finden, denn man will idealerweise die Features nicht zwangsläufig reduzieren. Hierfür gibt es die Swipe-Menüs, die durch eine lässige Streichgeste vom Rand in den Bildschirm aufgerufen werden können. Alle App-Spezifischen Tools kommen in die horizontale- und die globalen Funktionen in die vertikale Swipe-Bar.


  • Schritt 4: Celebrate Typography!

    Nun kommt eine weitere Metro-Trademark ins Spiel, die Schrift. Zuerst einmal wird die App in eine Vollbild-Ansicht transferiert, Fenster gibt es jetzt nicht mehr. Dann wird der Schrift die „Ordnungshoheit“ über den Content überlassen. Eine klare, ästhetische Typographie übernimmt nun die Funktion von Trennern und Gruppierern.

  • Schritt 5: Open And Fast!

    Nun bedient sich der Designer des Metro-Standard-Grids und der typischen Boxen-Templates. Die ersten vier Feeds einer Kategorie werden jeweils unter die passende Headline gruppiert und dadurch die flache Hierarchie weiter betont. Die Bilder wurden stark vergrößert, der Textcontent ist nach hinten in die zweite Navigationsebene verbannt und hat kleinen Text-Appetizern Platz gemacht. Die eigentlichen Content-Seiten darf man sich eventuell wie im Bild zuvor vorstellen. Eine plakative, monochrome Farbwahl für die Boxen (Hier ein zurückhaltendes Braun, dass aber gut zum Thema „Essen“ passt) und ein dezentes, weit angelegtes Hintergrundmuster runden den Metro-Look ab.

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.