Windows-8-Apps für C#-Entwickler - Design-Guidelines, Anleitungen, Best Practices

2 Modern UI: Wie Anwendungen der Zukunft aussehen

Computer haben vieles verändert. Und sind dabei selbst optisch beinahe unverändert geblieben. Eines der Urmodelle, der Xerox Alto aus dem Jahr 1973, ähnelt unserem Standard-PC noch immer: ein Monitor zur Anzeige, eine Maus zur Steuerung des Cursors und eine Tastatur zur Texteingabe.

Erst in den letzten Jahren beginnt sich ein Wandel abzuzeichnen: Smartphones und Tablets zeigen uns, dass der Computer der Zukunft möglicherweise nicht mehr als solcher erkennbar sein wird. Statt von „Grafischen Benutzeroberflächen“ (GUI) wird plötzlich von „Natürlichen Benutzeroberflächen“ (NUI) gesprochen. Maus und Tastatur gehören der Vergangenheit an, Multi-touch und Gestenerkennung sollen für eine intuitivere Bedienung sorgen. Das Ende von Doppelklicken, STRG-Taste und Kontextmenü ist eingeläutet – und Microsoft sprang nach ersten Gehversuchen (Windows Phone) auch mit seiner Cashcow auf den Zug auf: Windows goes Multitouch.

Was bedeutet dieser Wandel für uns Entwickler? Neben technischen Neuigkeiten bringen Touch-Oberflächen zahlreiche neue Herausforderungen, für die wir unser Denken teilweise fundamental ändern müssen.

Bei der „Übersetzung“ von Anforderungen in eine klassische Windows-Benutzeroberfläche werden viele Entscheidungen aus Gewohnheit (der Entwickler oder der Benutzer?) getroffen. Ein Dialog je Aktion, ein Textfeld je Eingabe, eine Messagebox je Meldung, ein Menü am oberen Rand – und wenn der Platz zu klein wird: eine Bildlaufleiste (vgl. Alan Cooper, 2003). Doch beim Erstellen von intuitiven Benutzeroberflächen werden wir Entwickler oft von unserer eigenen Intuition verlassen. Selbst bei einfachsten Anforderungen sind wir nun herausgefordert, wieder intensiv über die bestmögliche Repräsentation nachzudenken.

2.1 Designprinzipien

Microsoft stellt uns User Experience Guidelines zur Verfügung, um mit der neuen Welt vertraut zu werden. Darin enthalten sind nicht nur grundlegende Ideen, wie Apps grafisch gestaltet sein sollten, sondern auch Hinweise zur Interaktion mit Touch. Die wichtigsten Inhalte werden in den folgenden Abschnitten zusammengefasst.

Hinweis: Die User Experience Guidelines von Microsoft finden Sie kostenlos unter http://go.microsoft.com/fwlink/p/?linkid=258743, vor allem das zum Download angebotene PDF ist lesenswert.

2.1.1 Stolz auf das Handwerk

Die meisten Entwickler wurden eher für Algorithmen und Datenstrukturen ausgebildet als für Usability und Design. Insofern ist die Gestaltung von Benutzeroberflächen leider oft eine eher lieblose Aneinanderreihung von Steuerelementen als eine wohlüberlegte Anordnung.

Wie ein Komponist, der mit dem gespitzten Bleistift vor dem weißen Notenblatt sitzt und überlegt, wie er sein Werk gestaltet, sitzen wir vor einem weißen Bildschirm – und wissen nichts mit unserer Freiheit anzufangen. Aber (um bei der Kunstmetapher zu bleiben): Die Liebe zum Detail in jedem einzelnen Takt, die Zeit und Energie, die in – vielleicht nicht einmal bemerkte – Phrasierungen gesteckt wird, die kompromisslose Beachtung der Musiker und Zuhörer – das alles sorgt für den Unterschied zwischen lieblos aneinandergereihten Noten und einer die Jahrhunderte überdauernden Symphonie.

Bevor es zu pathetisch wird: Natürlich gibt es in jedem Projekt Einschränkungen durch Zeit und Geld, die es nicht erlauben, mehrere Tage in Stille vor einem weißen Bildschirm zu verharren, bevor die erste Textbox platziert wird. Aber versuchen Sie einmal, Softwareentwicklung auch als Kunsthandwerk zu verstehen – und sorgen Sie dafür, dass Sie stolz auf Ihre Werke sein können. Nicht nur auf die technische Brillanz, sondern auch auf die optische: Design ist vom Luxusgut zum K.O.-Kriterium geworden.

Design ist aber nur eine Komponente, die zur User Experience beiträgt. „Special effects alone do not make a movie; the narrative is also essential“ (Alan Cooper, 2003, Seite XXX). Es genügt nicht, nur hübsche Oberflächen zu bauen, die Anwendung muss selbstverständlich sicher und zuverlässig funktionieren und für die Zielgruppe bedienbar sein.

2.1.2 Fast and fluid

Als Windows 8 auf der ersten Microsoft-BUILD-Konferenz im September 2011 vorgestellt wurde, kam man an den Worten „fast and fluid“ nicht vorbei. Anwendungen sollen schnell und flüssig auf Eingaben des Benutzers reagieren – so neu ist das nicht, oder doch?

Die Anforderung gibt es natürlich schon lange, kaum ein Pflichtenheft kommt ohne die schwammige Formulierung „die Software muss in angemessener Zeit auf Benutzereingaben reagieren“ aus. Aber was ist „angemessen“?

Benutzer in der Web- und Windows-Welt würden eine Software noch als halbwegs schnell bewerten, wenn innerhalb von ein bis zwei Sekunden eine Reaktion erfolgt. Unter dieser Zeit würde kaum jemand nervös werden und ein zweites Mal klicken, weil die Anwendung offenbar nicht reagiert.

Vergessen Sie derartige Antwortzeiten bei Touch-Oberflächen, Millisekunden sind die Sekunden von damals. Beobachten Sie sich selbst, wenn Sie mit Ihrem Smartphone oder Tablet interagieren: Wenn nicht sofort eine sichtbare Reaktion auf Ihre Eingabe erfolgt, lösen die meisten Benutzer noch in der ersten Sekunde ein bis zwei weitere Male die gewünschte Aktion aus – im Glauben, die erste Berührung sei nicht erkannt worden oder die Anwendung sei abgestürzt.

Das bringt neue Herausforderungen für uns Entwickler, es gibt bisher nicht viele .NET-Anwendungen, die diese Antwortzeiten einhalten – auch, weil es nicht leicht war, asynchron zu programmieren. Schnell war man in einem Dschungel von Callback-Methoden gefangen, die Lesbarkeit des Codes litt massiv. Mit der Einführung der Schlüsselwörter async und await wurde asynchrone Programmierung deutlich erleichtert, die frühere Ausrede gilt nicht mehr. Bei der Entwicklung von Windows-Store-Apps ist man sogar an vielen Stellen gezwungen, asynchron zu arbeiten: Jede Methode, die potenziell mehr als 50 Millisekunden dauern könnte, wird nur mehr als asynchrone Variante angeboten.

Bei komplexeren Systemen mit Datenbankzugriffen wird es oft nicht möglich sein, dem Benutzer in dieser kurzen Zeit gleich Ergebnisse zu präsentieren – das ist aber auch gar nicht unbedingt notwendig. Präziser heißt es in den Guidelines „[…] and (be) ready for the next interaction“. Das bedeutet: zeigen Sie dem Benutzer, dass Sie die Berührung erkannt haben (zum Beispiel durch eine kurze Animation) und dass Sie fleißig an der Aufgabe arbeiten. Daneben sollten Sie ihm eine Möglichkeit bieten, sich während dieser Wartezeit anders zu entscheiden: entweder durch einen Abbruch oder durch einen Wechsel zu einer anderen Aktion. Wir sind es aus dem Internet nicht anders gewohnt: Lädt eine Seite länger, können wir den Browser bitten, den Ladevorgang zu stoppen – oder wir tippen einfach eine andere Adresse ein und brechen den Ladevorgang damit implizit ab.

2.1.3 Authentisch digital

Mit dem Design von Benutzeroberflächen verhält es sich wie mit der Mode: Alle Jahre ändert sich das Empfinden, was modern und angesagt ist, und ein Kenner sieht auf den ersten Blick, aus welchem Jahrzehnt eine Anwendung stammt. In der Windows-Welt waren meist Betriebssystemversionen der Startschuss für einen Wandel des Designs: von Windows 3.11 über Windows 95, Windows XP und Windows Vista. Sobald dann auch die Office-Produkte entsprechend gestaltet waren, sah man einer Anwendung plötzlich an, wenn sie „alt“ war. Der XP-Stil war eben nur zu seiner Zeit modern.

In den letzten Jahren war es schick, sich Anregungen aus der realen Welt zu holen: Elemente werfen Schlagschatten, größere Farbflächen werden als Farbverlauf dargestellt, Hintergründe imitieren Materialien (Metall, Holz), und wie bei Wasser- oder Glasflächen findet sich auch in Software die eine oder andere Spiegelung wieder.

Windows 8 läutet wieder eine neue Modeepoche ein und besinnt zur Einfachheit, Klarheit und Authentizität: „Be authentically digital“. Apps sind Pixel am Bildschirm, sind Pixel am Bildschirm, sind Pixel am Bildschirm. Und Pixel am Bildschirm werfen keine Schatten, Pixel am Bildschirm spiegeln sich auch nirgends. Software soll nicht mehr vorgeben, etwas Reales zu sein, sondern sein, was es ist: eben „authentisch digital“.

Was heißt das konkret?

• Keine Schatteneffekte
• Keine Farbverläufe
• Keine Ränder rund um Bilder oder Kacheln, stattdessen großzügigen Abstand zur Trennung von Bereichen
• Typografie zur Kennzeichnung von Überschriften, Fließtexten, Bildunterschriften etc.
• Lebhafte, kräftige Farben

Böse Zungen könnten behaupten, der neue Microsoft-Look ist einfach das Gegenteil der Apple-Gestaltungsrichtlinien. Stimmt. Aber so ist Mode eben – und mit iOS 7 wurden einige dieser Punkte auch in das Apple-Design übernommen.

Vielleicht ist diese Erkenntnis die wichtigste für alle Entwickler, die eigentlich nicht viel mit der App-Welt anzufangen wissen und weiterhin Web- oder Desktopanwendungen entwickeln werden: Unsere Produkte werden sehr bald sehr alt aussehen, wenn wir uns nicht mit den neuen Designrichtlinien beschäftigen.

2.1.4 Weniger ist mehr

Die neue Combobox wird einfach dort eingefügt, wo gerade noch genügend Platz ist – im Zweifelsfall muss eben ein Text missverständlich abgekürzt werden, damit die Bildschirmfläche möglichst optimal genutzt wird. Nur nichts verschwenden. Kennen Sie diese...