Windows Phone 7 UI Design Guide - Das wichtigste als Checkliste

Diese Checkliste hat mir beim entwickeln erster Apps für Windows Phons 7 geholfen und soll nun auch anderen Entwickler/innen helfen, die sich mit der kommenden mobilen Plattform von Microsoft beschäftigen. Sie besteht aus einzelnen Punkten, die zu beachten sind, wenn man für das neue Metro-Design Programme schreibt. Sie ist nicht abschliessend und erhebt keinen Anspruch auf Vollständigkeit, aber ich habe mich bemüht, alle wichtigen Punkte aufzuführen. Die Liste basiert grösstenteils auf dem Windows Phons 7 UI Design and Interaction Guide 2.0 (Englisch), ist also wie dieser noch bis auf weiteres vorläufig und wird, sobald neue Leitlinien von Microsoft veröffentlicht werden, auch wieder aktualisiert werden.

Auf jeden Fall empfehlenswert sind auch die Design Templates von Microsoft. Sie helfen enorm beim Entwickeln neuer Software. Auch empfehle ich die Verwendung von Microsoft Expression Blend 4. Nach einer vergleichsweise kurzen Eingewöhnungsphase geht das Gestalten von UIs damit derart leicht von der Hand, dass man ich mich ernsthaft fragte, wie ich ohne Blend überhaupt je effizient programmieren konnte.

Windows Phone 7 fusst auf drei Leitmotive:
Personal, Relevant, Connected. Das heisst für uns als Sotwareschmied/innen, zu überlegen, was die Endkundschaft beim täglichen Arbeiten und Leben unterstützt (personal), was sie wirklich interessiert an dem Ort wo sie gerade sind (relevant) und wie sie mit ihren Daten, Bildern, Freunden und was auch immer sie sonst noch möchten, verbunden sein können (connected). Nicht jedes Schlagwort ist in jeder Applikation bedient, ganz klar, aber die drei Worte helfen doch ganz gut, sich ein Bild davon zu machen, wie Windows Phons 7 gedacht ist und wie das eigene Programm da hinein passt.
Zu Metro wurde schon viel geschrieben. Wichtig sind hier denke ich die Leitmotive: Metro will saubere, klare und einfache Linienführungen, fokussiert auf Inhalt und nicht auf Effekte. Hardwarebeschleunigte Animationen findet man nur, wo diese angebracht scheinen, Gesten wie auf Windows 7 Desktop-PCs und automatisch aktualisierte, personalisierte Ansichten nach dem Vorbild des Microsoft Zune HD sollen die User Experience abrunden. Die Hardware und Software soll nahtlos ineinander greifen und so den User/innen eine bestmögliche Nutzungserfahrung bieten. So weit die Theorie.
Für uns heisst das, auf Schnörkel und ausgefallene Menüführungen zu verzichten. Weniger ist mehr und auch das ist noch zu viel. Die neuen Controls die das Silverlight-Framework für Windows Phons 7 in der CTP bietet, zeigen, was Metro aus macht. Es soll jeweils klar ersichtliche werden, was welche Schaltfläche tut und wo welche Information zu erwarten ist.
Hardwaretasten dürfen nicht zum navigieren oder steuern benutzt werden.
Vollbild verboten. Naja, nicht ganz. Aber wenn es kein Spiel ist und mit dem XNA-Framework erstellt wurde, soll keine Applikation die Status Bar oben oder die Application Bar unten verdecken. Die Status Bar kann versteckt werden, aber man soll doch besser zwei mal über die Notwendigkeit nachdenken.
Die Application Bar soll die maximal fünf Icons enthalten, de für die wichtigsten Aktionen im Programm benutzt werden.
Text anstelle von Icons in der Application Bar ist nicht erlaubt, nur als Zusatz im Application Bar Menu.
Die Application Bar Icons müssen die Systemfarbe benutzen und so durch das Metro Theme auch verändert werden können.
Application Bar Icons sollen simpel und einfach gehalten sein und genau das ausdrücken, was sie tun. Ist eine Funktion nicht mit einem Icon beschreibbar, sollte man sie besser im Application Bar Menu unterbringen und als Text beschreiben.
Es gibt 64 vor-definierte Application Bar Icons. Nimm eines davon bevor du eigene zeichnest.
Anhang 36545
OK oder positive Aktionen müssen links, Abbrechen oder negative Aktionen rechts zu finden sein.
Text-Buttons dürfen nicht mehr als zwei Wörter enthalten. Sie sind klar ersichtlich und möglichst mit Verben zu besetzen.
Die neue Standardschriftart ist Segoe und integraler Bestandteil von Metro. Andere Schriften sollten nur sehr spärlich eingesetzt werden.
75 Pixel Platz hin zum Bildschirmrand, wo der Power-Knopf ist (geräteabhängig) ist für Programme vorgeschrieben, die während eines Telefonanrufs auch benutzt werden können sollen.
Toast-Benachrichtigungen müssen standartmässig deaktiviert sein. Sie sind für persönlich relevante, zeitkritische Informationen gedacht und primär bei peer-zu-peer Kommunikation (IM, E-Mails etc) zu verwenden. Die User/innen müssen selbst entscheiden, ob sie diese Benachrichtigungen erhalten wollen.
Programme, die Datenverkehr verursachen, müssen eine Option bieten, dies zu deaktivieren.
Aktionen, die länger dauern, sollten Fortschrittsanzeigen beinhalten
Aktionen, die nicht rückgängig gemacht werden können, müssen immer bestätigt werden.
Landscape-Modus muss unterstütz werden, und zwar in beide Richtungen.
Eigene Animationen beim drehen in den Landscape- oder Portrait-Modus sind nicht erlaubt.
Seitentitel sind nicht zwingend erforderlich. Wenn vorhanden, dürfen sie nicht gescrollt werden.
Die Farbe Weiss ist spärlich einzusetzen, da sie auf OLED-Bildschirmen viel Strom verbraucht.
Rahmendicke darf nicht hartkodiert sein.
Farben von Controls dürfen nicht hartkodiert sein.
Schriftgrösse, Art, Farbe und Name dürfen nicht hartkodiert sein.
Eigene Controls sollen sich an den Metro-Design-Vorlagen orientieren.
Checkboxen sollten keinen "teilweise"-Status besitzen.
Hyperlinks dürfen nur zum Navigieren benutzt werden.
Jedes berührbare Element muss bequem per Finger bedient werden können. Sie dürfen nicht kleiner als 9x9 mm oder 34x34 Pixel sein.
Es muss mindestens 2 mm oder 8 Pixel Abstand zwischen zwei berührteren Controls und 3.5 mm zum Bildschirmrand.gelassen werden.
Die berührbare Fläche muss mindestens 7x7 mm oder 26x26 Pixel sein.
Je häufiger ein Control berührt werden soll, desto grösser sollte es sein.
Für Panorama-Ansichten wird eine Vorlage zur Verfügung gestellt werden. Generell sollen sie aber nicht mehr als fünf Seiten umfassen, ein Hintergrundbild zwischen 480x800 und 1024x800 Pixel enthalten und ab vier Seiten im Format 16:9 gehalten werden.
Panorama-Titel müssen sich über mehrere Seiten erstrecken und dürfen nicht animiert sein.
Vertikales Scrollen in einem Panorama ist akzeptabel, solange es sich innerhalb der jeweiligen Abschnitten befindet. (T-förmig, keine Verzweigungen)
Pivots werden ebenfalls mit einer Vorlage versorgt werden. Sie sollten sparsam eingesetzt werden und dürfen nur zum anzeigen von Daten benutzt werden, nicht generell für Programmfunktionen.
Pivots dürfen nicht verschachtelt werden.
Thumbnails sollten vergrösserte Ausschnitte zeigen und nur wenn notwendig mit maximal zwei Zeilen Text erläutert werden.
Horizontale Schieberegler sind vertikalen vorzuziehen.
Fortschrittsleisten (Progress Bar) sind optional, aber zu empfehlen wenn eine Aktion länger dauert (z.B. Downloads)
Radio-Buttons sollten einzeilige Beschreibungen enthalten.
Programmeinstellungen müssen im Programm selbst implementiert werden. Sie können nicht ausgegliedert werden. Die Kopfzeile muss immer
Einstellungen
Programmname
lauten.
Es gibt nur folgende Gesten auf dem Touch-Screen:

Tippen
Doppelt Tippen
Schieben
Schnipsen
Berühren und Halten
Pinch und Streich

Sie dürfen keine Shortcuts für Aktionen sein sondern müssen immer die gleiche Aktion bewirken.
Die Sprache der Texte im Programm soll einfach, korrekt und allgemein verständlich sein. Fachausdrücke sind zu vermeiden wo immer möglich.
komplet klein geschrieben sein müssen:
seitentitel
listentitel
listengruppen-titel
buttons oder wörter, die als Button fungieren
listenitems
beispieltexte in Suchfeldern
links innerhalb eines Textes
Gross beginnen müssen:
Checkboxen
Radiobuttons
Fortschrittsbalken (Progress Bar)
Status- und Benachrichtigungstexte
Schalter
Komplett GROSS geschrieben werden müssen:
PROGRAMMTITEL
DATUM
UHRZEIT
AM und PM
Das Ampersand (&) darf nur bei Uhrzeiten und Daten benutzt werden (z.B. 27.8.2010 & 15:00).
… darf für länger dauernde Aktionen (z.B. Download starten…) benutzt werden. Es soll nicht auf Buttons oder in Kopfzeilen auftauchen.
Punkt, Fragezeichen und Ausrufezeichen dürfen nicht in der Titelzeile (ausser bei Fehlermeldungen oder Dialogboxen) oder auf Buttons benutzt werden.
Frageformulierungen sollten wenn möglich vermieden werden.
Klammern sollten vermieden werden und sind nur zur Erklärung von Abkürzungen einzusetzen.

Nehmt also diese Liste, druckt sie vielleicht sogar aus, und prüft anhand dieser, ob die Punkte in eurem Programm erfüllt sind oder ob ihr noch etwas nachbessern könntet.