Herausforderungen und Möglichkeiten bei der Entwicklung von Metro Style Apps

How-to become fast and fluid
Kommentare

Das Ende des Standard-PCs scheint nahe: Die Einführung von Smartphones und Tablets beschreibt seit Jahren einen Generationenwechsel. Mit Windows 8 geht nun auch Microsoft verstärkt in Richtung Multitouch. Was bedeutet dieser Wandel für Entwickler? Müssen wir einige Klassennamen neu lernen oder wird alles anders? Leider beides. Zum einen sorgt die WinRT für Neuerungen, gleichzeitig bringen Touch-Oberflächen zahlreiche neue Herausforderungen, für die wir unser Denken teilweise fundamental ändern müssen.

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 seit Kurzem beginnt sich ein Wandel abzuzeichnen: Smartphones und Tablets zeigen uns, dass der Computer der Zukunft möglicherweise nicht mehr als solcher erkennbar ist. Statt von „grafischen Benutzeroberflächen“ (GUI) wird plötzlich von „natürlichen Benutzeroberflächen“ (NUI) gesprochen. Maus und Tastatur gehören der Vergangenheit an, Multitouch und Gestenerkennung sollen für eine intuitivere Bedienung sorgen. Das Ende von Doppelklicken, Strg-Taste und Kontextmenü ist eingeläutet, und Microsoft springt nach ersten Gehversuchen (Microsoft Surface, Windows Phone 7) nun auch mit seiner Cashcow auf den Zug auf: Windows 8 goes Multitouch.

Metro Style Apps

„Metro Style App“ ist die Bezeichnung für Apps unter Windows 8. Namensgeber ist das bereits aus früheren Produkten (z. B. Windows Phone 7) bekannte Metro-Design von Microsoft: eine klare, moderne Darstellung mit einem starken Fokus auf den darzustellenden Inhalt. Metro Style Apps sind für Touch-Bedienung optimiert, können aber auch mit Maus, Tastatur und Stylus bedient werden. Sie basieren auf der Windows Runtime (WinRT) und können mit C#/VB, C++ und XAML oder JavaScript und HTML5 erstellt werden. Ein in Windows 8 integrierter Store ermöglicht die einfache Verteilung und Lizensierung.

WinRT

Die Windows Runtime ist eine neue, unter Windows 8 eingeführte Runtime, die als Laufzeitumgebung für Metro Style Apps dient. Teile der .NET-Klassenbibliothek wurden nativ (d. h. unmanaged) in den Windows Kernel integriert und stehen sowohl C#/VB-Entwicklern als auch C++- und JavaScript-Entwicklern zur Verfügung.

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 [1]. 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. Microsoft stellt uns bei der Entwicklung von Metro Style Apps zahlreiche neue Möglichkeiten zur Verfügung, die wichtigsten Konzepte werden hier vorgestellt.

Experimentieren

Wie beginnt ein klassischer Entwickler mit der Entwicklung seiner ersten Metro Style App? Visual Studio starten, NEUES PROJEKT auswählen, eine leere Projektmappe erstellen (wozu sind wir Entwickler geworden, wir lassen uns doch keinen Code von einer Vorlage generieren), im XAML-Code einen Button hinzufügen und in die Code-behind-Datei wechseln: MessageBox…Wo ist die MessageBox? Die schon aus Windows-Forms-Zeiten bekannte (und in der WPF geänderte) MessageBox-Klasse existiert in der WinRT nicht mehr. Zu Recht: Derartige modale Dialoge sind so ziemlich das Gegenteil des oft gehörten „fast and fluid“-Slogans. Versuchen Sie aus gewohnten Mustern auszubrechen und nicht reflexartig an die MessageBox-Klasse zu denken, wenn Sie mit Ihrem Benutzer kommunizieren möchten. Falls Sie jetzt verzweifelt nach einem Ersatz suchen, werden Sie aber in der MessageDialog-Klasse fündig – Benutzung auf eigene Gefahr. Experimentieren Sie mit den neuen Möglichkeiten!

Spendieren

Bei vielen Benutzeroberflächen hat man den Eindruck, als lägen die Quadratmeterpreise noch über den begehrtesten Flächen in Monaco. Jeder verfügbare Pixel wird ausgenutzt; nur keinen Platz verschwenden. Besser einen Text unverständlich abkürzen, um noch eine Checkbox am Bildschirm unterzubringen, als eine freie Fläche übrig zu lassen.

Die gute Nachricht: Metro Style Apps bieten aufgrund der Vollbildansicht noch mehr Platz. Die schlechte: Sie sollen genau das Gegenteil darstellen. Großzügigkeit ist angesagt, lassen Sie Ihrem Inhalt „Raum zum Atmen“. Nur die wichtigsten Schaltflächen (z. B. Start/Stopp bei Musik-Playern) werden immer angezeigt, alle anderen Steuerelemente sollen sich im Hintergrund halten. Die Bühne steht alleine dem Inhalt zur Verfügung. Die ApplicationBar bietet genau die richtigen Möglichkeiten dafür: Wird mit dem Finger vom oberen oder unteren Rand in Richtung Bildschirm gestrichen oder mit der rechten Maustaste geklickt, wird dieser Balken für zusätzliche applikationsspezifische Steuerelemente eingeblendet. Sobald der Benutzer den Inhalt berührt, bekommt dieser wieder die volle Aufmerksamkeit. Sollten Sie in Ihrer Anwendung viele Einstellungen zu verwalten haben, können Sie diese über das „Settings“-Icon des Betriebssystems anbieten (es erscheint, wenn mit dem Finger vom rechten Rand in Richtung Bildschirm gestrichen wird). In dieser SettingsPane können Sie ein eigenes UserControl darstellen und so weiteren Platz für die Anwendung gewinnen.

Präsentieren

Achten Sie auch auf die Verwendung weniger, einheitlicher Schriftstile (Standard in Windows 8: Segoe Light UI), und betrachten Sie einmal bewusst das Design der mitgelieferten Apps. Sie werden erkennen, dass sich der Anwendungstitel immer an derselben Stelle befindet; der Inhalt an einer (gedachten) Linie mit der Überschrift ausgerichtet ist. Überlegen Sie, ob diese Vorgaben nicht auch gut für Ihre Anwendung geeignet wären. Die Vollbildansicht gibt uns zwar alle Freiheiten (keine fixen Designelemente wie Titelleisten, Symbolleisten etc.), es kristallisiert sich aber trotzdem ein Quasistandard heraus, wie wesentliche Bereiche der Anwendung gestaltet werden sollten.

Animationen sind ein wichtiges Mittel, um dem zweiten Teil von „fast and fluid“ gerecht zu werden: Elemente, die mit einem Effekt „von irgendwo“ erscheinen und „irgendwohin“ entschwinden sind für Anwender natürlicher, als Elemente, die einfach ein- und ausgeblendet werden. Viele Animationen bekommen Sie geschenkt, wenn Sie die Standardsteuerelemente verwenden. Fürchten Sie sich (vor allem zu Beginn) auch nicht vor der Verwendung von Projektvorlagen. Ihre Anwendung erhält damit vom ersten Moment an das angestrebte Metro-Style-Design (Schriftart, -größe und -position, einen Zurück-Button etc.). Sie profitieren auch von einer Grundstruktur mit vorkonfigurierten Steuerelementen, die Ihnen das Erlernen der Technologie erleichtern wird.

Reduzieren

Die Steuerung mittels Gesten wird meist im selben Atemzug mit intuitiven Benutzeroberflächen genannt. Doch wie viele intuitive Gesten kennen Sie? Verschieben, scrollen, verkleinern, vergrößern … und? Welche Geste wenden Sie an, um die Hilfe aufzurufen? Wie möchten Sie in einem Browser zurück zur letzten Seite wechseln, wie zur Startseite? Das Problem an Gesten ist, dass man weder deren Funktion, noch deren Vorhandensein sieht. Haben Sie gerade ein Déjà-vu?

Zu den Anfängen des Internets waren Hyperlinks blau und unterstrichen. Dann kamen Imagemaps, und plötzlich konnte jeder Teil jedes Bildes mit einer Aktion hinterlegt werden [2]. Plötzlich lag es in der Verantwortung des Designers, von diesen Möglichkeiten nur begrenzt Gebrauch zu machen. Genauso verhält es sich bei Multitouch-Anwendungen. Es gibt nur wenige, wesentliche Gesten, die tatsächlich intuitiv sind. Wenn Sie die Standardsteuerelemente für Metro Style Apps verwenden, stehen diese bereits automatisch zur Verfügung. Zusätzliche „frei erdachte“ Gesten sind nur dann sinnvoll, wenn Sie mit sehr routinierten Benutzern rechnen, die viel Zeit mit Ihrer App verbringen werden. Im Zweifelsfall müssen diese Benutzer auch bereit sein, ein Hilfedokument zu lesen, um die Benutzung zu erlernen. Und um fast and fluid zu bleiben: Verzichten Sie auf Gesten, bei denen der Benutzer auf das Eintreten eines Ereignisses warten muss. Der Internet Explorer geht im Moment leider mit schlechtem Beispiel voran, denn um einen Link in einer neuen Registerkarte zu öffnen, müssen Sie tippen und warten.

Orientieren

Selbst wenn es manche Monitore seit einiger Zeit können: Wie oft haben Sie jemanden gesehen, der seinen Bildschirm im Hochformat aufgestellt hat? Das Problem unterschiedlicher Auflösungen war uns als Entwickler schon längst bekannt, sobald unsere Anwendungen auf mobilen, leicht drehbaren Geräten laufen, müssen wir aber mit neuen Szenarien umgehen lernen. Windows 8 soll ein Betriebssystem für verschiedenste Geräte und verschiedenste Größen werden. Um Ihren Benutzern eine ansprechende, hochauflösende Visualisierung zu bieten, können Sie entweder auf vektorbasierte Bilder (SVG für JavaScript oder XAML für C#/VB/C++) setzen oder ihre Bitmaps in drei verschiedenen Größen zur Verfügung stellen: 100 Prozent für die kleinsten Auflösungen (1024 x 768 Pixel ist die Mindestauflösung für Metro Style Apps), 140 Prozent für Full-HD-Auflösungen oder 180 Prozent für Auflösungen bis 2560 x 1440 Pixel (nähere Informationen dazu siehe [3]). Mit diesen drei Größen kommen Sie für einige Zeit aus – Fernseher mit der letztgenannten Auflösung sind eher noch Zukunftsmusik.

Darüber hinaus können Sie entweder eine eigene Porträtansicht (Hochformat) anbieten oder auf das Standardverhalten der Steuerelemente setzen (das in vielen Fällen auch recht passabel funktioniert). Eine Pflicht für jede Metro Style App ist aber die Implementierung einer so genannten Snap View. Auf diese schmälere Ansicht wird vom Betriebssystem umgeschaltet, sobald die App am linken oder rechten Rand des Bildschirms angedockt wird [4] und das bedeutet, Sie können die Snap View leer lassen, aber Sie können sie nicht ignorieren. Sorgen Sie für eine ansprechende Visualisierung, wie sie beispielhaft in Abbildung 1 zu sehen ist.

Abb. 1: Die Stocks App in der Vollbildansicht (Hintergrund) und als Snap View (Vordergrund)
Abb. 1: Die Stocks App in der Vollbildansicht (Hintergrund) und als Snap View (Vordergrund)
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -