Das geht App!

Die wichtigsten Features einer Windows 8 App
Kommentare

Die neue Oberfläche von Windows 8 bringt zahlreiche neue Designelemente mit sich, die auch von ihren eigenen Windows-8-Apps genutzt werden können. Dieser Artikel soll eine Übersicht über die typischen Merkmale einer Windows-8-App geben, die eigentliche jede App implementieren sollte.

Was sind typische Merkmale für Windows-8-Apps? Zum einen gibt es das neue Oberflächendesign, das mehr ist als nur reine Kachelisierung der Oberfläche. Das Design steht auch für neue Bedienkonzepte, die dem Benutzer von Touch, Maus und Tastatur eine einfache Steuerung und Navigation der Apps erlaubt. Anwendungen sollen in erster Linie für Touch designt werden. Maus und Tastatur funktionieren mit diesem Design allerdings auch sehr gut. Schnell und flüssig soll sich die App anfühlen, der Benutzer möchte immer eine reagierende Anwendung haben. Das Andocken einer App an den Fensterrand und das Skalieren auf unterschiedlich großen Geräten gehört zum guten Ton. Das Verwenden von Systemfunktionen oder der Features der Systemleiste am Rand erlaubt es, die App aus anderen Apps heraus zu verwenden. Die Live-Kacheln (Live Tiles) gehören natürlich zur absoluten Pflicht einer jeden App. Die Cloud ist überall und kann auch in eigenen Apps kinderleicht angesprochen werden.

Das neue UI

Die wichtigste Regel für Apps der neuen Oberfläche ist: „Der Inhalt ist wichtiger als das Drumherum!“ Der Benutzer soll die Anwendung basierend auf dem Inhalt steuern und durch die Gestaltung der Inhalte die App erkennen. Man soll sich auf die Inhalte fokussieren können und nicht erst lernen müssen, wie die Anwendung eigentlich bedient wird. In der neuen Oberfläche sieht man immer nur eine App in der Vollbildansicht und kann sich auf diese fokussieren. Eine kleine Ausnahme ist die SnapView-Ansicht, in der man eine zweite App in kleinerer Darstellung am Rande sehen kann. Dadurch wird die Ablenkung durch andere Anwendungen vermieden und der Benutzer konzentriert sich auf die eine aktuelle Aufgabe.

Layout

Der Inhalt möchte einfach und großzügig dargestellt werden. Das Auge sollte diesen Inhalt einfach erfassen und fokussieren können. Um dies zu erreichen, sollte man möglichst auf alle überflüssigen Layout-Elemente, wie z. B. Trennlinien, Steuerelemente, Farbverläufe etc. verzichten. Inhalte können durch großzügige Leerräume voneinander getrennt werden. Inhalte können durch gute visuelle Elemente (Symbole oder Texte) dargestellt werden und müssen nicht immer mit grafischen Spielereien überladen sein, wie Farbverläufe, 3-D- und Schatteneffekte. Ein überladenes UI, bei dem gerade mal 20 Prozent der Oberfläche die eigentliche Information darstellen und der Rest für die Steuerung, Navigation und Dekoration zuständig ist, entspricht nicht den Designprinzipien. Abbildung 1 zeigt ein einfaches UI. Die App zeigt nur Informationen mit einem unterstützenden Hintergrundbild. Die Steuerung erscheint nur auf Wunsch.

Features Windows 8 App

Es ist generell sehr einfach ein komplexes UI zu designen. Richtig anspruchsvoll hingegen ist es, ein UI zu erschaffen, das leicht und reduziert wirkt und dennoch alle Funktionen anbietet, die notwendig sind.

Schriftarten und Texte

Schriftarten, Größen und Farben sollten mit Bedacht gewählt werden. Mit ihrer Hilfe können Inhalte leicht strukturiert und hierarchisch dargestellt werden. Durch bestimmte Kombinationen lässt sich die Bedeutung einer Information oft gut betonen und die Wichtigkeit hervorheben, z. B.: dick, rot und groß bedeutet wichtig, negativer Wert, Reaktion ist erforderlich.

Eine klare Typografie ist fester Bestandteil des neuen Designs. Man sollte es aber nicht mit der Anzahl unterschiedlicher Größen übertreiben. Microsoft empfiehlt maximal 4 verschiedene Größen zu verwenden, die proportional zueinander sind und die die Informationshierarchie betonen. Das Verwenden unterschiedlicher Schriftarten ist hingegen überhaupt nicht gewünscht, geschweige denn schön. Microsoft verwendet für seine Apps überwiegend die hauseigene Schriftart Segoe. Andere Schriftarten sind allerdings durchaus gestattet und oft auch Bestandteil von Corporate Identities. Abbildung 2 zeigt die einfache Schriftart in vier Abstufungen zur Betonung der Informationshierarchie.

Typografie 
Den ganzen Bildschirm nutzen

Der Inhalt sollte den ganzen Bildschirm verwenden (Edge2Edge). Bei großen Datenmengen, die nicht auf einen Bildschirm passen, ist es hilfreich sich via Verschieben durch die Inhalte bewegen zu können. Das Verschieben sollte allerdings immer nur in einer Achse möglich sein, dadurch wird eine gewisse Stabilität erreicht. Dabei sollte man immer die Ergonomie im Auge behalten. Das Verschieben sollte immer auf der längeren Achse der App gemacht werden. Horizontal in der Landscape-Ansicht und vertikal für angedockte Apps.

Als wir noch den Fensterrahmen hatten, hat dieser Rahmen mit der Überschrift der Anwendung seine Identität gegeben. Heute ist es so, dass der Inhalt und das Layout die App einmalig und wiedererkennbar machen soll. Daher sollte man versuchen, durch geschickte, einfache und innovative Darstellung eine Identität seiner App zu erzeugen, die sie wiedererkennbar und eindeutig macht, z. B. durch unterstützende Hintergrundbilder oder gute gebrandete Informationen.

Interaktionen

Auf aktuellen Oberflächen gibt es häufig sehr viele Steuerelemente, die für die Steuerung der App gedacht sind, z. B. Symbolleisten, Menüleisten, Buttons, Rollbalken. Die neuen Windows-8-Apps sollen eher über den Inhalt und kontextabhängig gesteuert werden. Je weniger direkt auf der Oberfläche zu sehen ist, desto besser. Buttons sollen erst bei Bedarf oder auf besonderen Wunsch angezeigt werden. Diverse Kommandos, wie z. B. das Navigieren auf einen bestimmten Artikel, gehen direkt über den eigentlichen Content. Man tippt auf das Bild in der Liste und kommt so zur Detailansicht. Dafür benötigt man nicht extra noch einen Button auf dem Bild.

Möchte man komplexere Dinge mit dem Bild machen, selektiert man es mit der Wischgestik oder mit der rechten Maustaste, und dann erscheint die Anwendungsleiste mit Funktionen, die genau auf die aktuelle Selektion passen.

Wischt man ohne Selektion von oben oder unten, kommen allgemeine Funktionen zu der App. Eine Empfehlung seitens Microsoft ist es, in die untere Anwendungsleiste auf die linke Seite die kontextspezifischen Funktionen zu hinterlegen und auf der rechten Seite die unspezifischen Funktionen, die nichts mit der aktuellen Selektion zu tun haben. Die obere Anwendungsleiste sollte nach Möglichkeit für die Navigation durch die App verwendet zu werden. Bei den ApplicationBars erscheint die Anwendungsleiste unten nur bei Bedarf nach Auswahl eines oder mehrerer Elemente.

Nachdem man Funktionen aufgerufen hat, können die nächsten Schritte vielleicht in einem Flyout angezeigt werden. Flyouts sind Elemente, die beliebige Inhalte in Form eines kleinen Fensters darstellen können. Klickt man außerhalb dieses Flyouts irgendwo hin, verschwindet es wieder ohne eine Aktion durchzuführen. Nur innerhalb des Flyouts getätigte Aktionen werden auch wirklich angewendet. Sie eignen sich gut für Dialoge, in denen etwas eingegeben oder bestätigt werden muss.

[ header = Die wichtigsten Features einer Windows 8 App – Teil 2 ]

Navigation

Die Navigation durch eine Anwendung sollte über die dargestellten Informationen gehen. Diese Informationen sollten auch im Fokus der App stehen. Spezielle Navigationen, z. B. zur Startseite oder in einen anderen Bereich der App, sollten über die obere Anwendungsleiste geschehen. Damit unterscheidet sich eine Windows-8- App deutlich von Webseiten. Diese zeigen immer alle Links zu anderen Inhalten direkt an.

Es gibt zwei grundsätzliche Navigationsmuster in Windows-8-Apps. Diese kann man als Grundlage für die eigene App verwenden. Man muss sich nicht für eine einzelne entscheiden. Abbildung 3 veranschaulicht die Navigation. Hierarchische Navigation eignet sich sehr gut für strukturierte Informationen oder Anwendungsfunktionen, z. B. Nachrichten-Apps. Die flache Navigation hingegen eher für dokumentengetriebene Apps, wie z. B. den Browser, der diverse Webseiten anzeigt.

Navigation 
Semantischer Zoom

Das semantische Zoomen ist ein schneller, flüssiger Weg, um sich schnell in großen Listen zu bewegen. Einerseits sieht man alle Elemente, die es gibt. Anderseits kann man diese Elemente „zusammenpressen“ und sieht dann nur noch die Gruppen. Durch Antippen einer Gruppe springt man wieder in die Detailansicht. Die Gruppierungsansicht kann dabei völlig frei gestaltet werden. Dadurch kann man in der Gruppenansicht auch viele Informationen, z. B. Größe der Gruppe, Status etc. darstellen, die der Gruppe noch mehr Informationsgehalt gibt.

Schnell und flüssig

Apps müssen sich schnell und flüssig anfühlen. Der Benutzer erwartet zum einen, dass Anwendungen nahezu in Echtzeit auf Eingaben durch Touch reagieren. Muss ein Benutzer auf das UI warten, wird er schnell unzufrieden.

Animationen

Animationen sind ebenfalls Kernbestandteil der neuen Oberfläche. Bewegungen sind mehr als nur eine visuelle Verzierung. Sie bieten zusätzliche Informationen und helfen dem Benutzer dabei zu verstehen, was gerade passiert. Alles im System kommt von irgendwoher und geht irgendwohin. Stellen Sie sich mal das UI ohne Animationen vor.

Die Animationsbibliothek bietet ein Set von Animationen für diverse App-Szenarien an. Beispielsweise für das Hereinfliegen von neuen Informationen oder das Drücken von Elementen. Allerdings werden Sie keine wilden Flip-, Rotations- oder Spinaround-Animationen finden. Animationen sollen lediglich sanft das unterstreichen, was gerade in der App passiert. Allerdings darf man durchaus selber seine eigenen Animationen erstellen. Verwendet man die Standardanimationen, dann verwendet man etwas, was der Benutzer bereits aus anderen Apps oder Windows selbst her kennt.

Fast alle mitgelieferten Steuerelemente haben bereits Animationen integriert, wie z. B. die Anwendungsleisten oder das GridView. Allerdings kann man auch selber auf alle Steuerelemente Animationen aus der Animationsbibliothek anwenden.

Touch first

Beim Designen der Oberfläche sollte man konsequent daran denken, für Touch zu entwickeln. Das bedeutet, dass man die verfügbaren Gesten verwenden sollte und auch das Layout für Touch optimiert. Zusätzlich sollte man sich auch die Anordnung der Steuerelemente genauestens überlegen und die ergonomischen Gegebenheiten der Touch-Bedienung bedenken. Hält man ein Tablet in der Hand, so sind die Hände meistens links und rechts vom Display. Elemente am Rand sind leichter zu treffen als Elemente in der Mitte.

Sobald der Benutzer ein Element auf der Oberfläche berührt oder ein Element loslässt, sollte man sofort visuelles Feedback geben. Aktionen auf der Oberfläche sollten einfach durch ähnliche oder gleiche Gesten rückgängig gemacht werden können.

Man sollte auch etwas über das einfache Antippen (engl. Tap) von Elementen hinausdenken. Drehen und Schieben sind ebenfalls sehr einfache Mittel, um die Oberfläche zu bedienen oder die Wischgestik zum Selektieren und Deselektieren von Elementen. Aktionen können dem Finger auf dem Display folgen, wie z. B. beim Verschieben von Kacheln auf dem Startbildschirm. Damit dies zuverlässig funktioniert, sollte man höchstens auf einer Achse das Verschieben ermöglichen.

Andocken und Skalieren

Gute Apps passen sich der aktuellen Bildschirmeigenschaft an. Die Minimalauflösung einer Windows-8-App liegt bei 1024 x 768 Pixel, nach oben hin gibt es theoretisch keine Grenze. Das Feature, das man eine App links oder rechts andocken kann, ist erst ab einer Auflösung von mindestens 1366 x 768 möglich. Eine Anwendung kann im Vollbildmodus, im angedockten Modus und im Portrait-Modus dargestellt werden. Diese Zustände müssen von jedem Entwickler beachtet werden. Macht es bei einer App keinen Sinn einen Snap-Modus anzubieten, wie z. B. Spiele, dann sollte man den Benutzer mittels eines aussagekräftigen Textes im angedockten Modus darüber informieren. Abbildung 4 zeigt die Snap-Ansicht. Die Snap-Ansicht ist immer 320 px groß und ist genauso bedienbar, wie Apps in der Vollansicht. Man kann dort auch die Anwendungsleiste darstellen. Allerdings sollte man dort eher eine reduzierte Darstellung seiner Daten verwenden, die der kleineren Fläche Rechnung trägt. Das bedeutet im konkreten Fall, dass man nur vertikal scrollen soll, weil die horizontale Achse in diesem Moment die kürzere ist. Das Umschalten zwischen diesen Ansichten bekommt die App mit und kann durch ein- und ausblenden, bzw. durch verschiedene ViewStates in C#/XAML oder Media Queries in CSS3 darauf reagieren.

Die verschiedenen Ansichten einer App 
Skalieren

PCs haben sehr unterschiedliche Bildschirmgrößen und -auflösungen. Windows-8-Apps müssen nicht explizit für jede mögliche Größen-/Auflösungskombination angepasst werden. Wenn man mit Fluid Layouts oder fixen Layouts arbeitet, kann man auf Techniken setzen, die Apps in allen Auflösungen gut aussehen und vor allem bedienbar werden lassen.

Bei Fluid Layouts sollte man beispielsweise das HTML-Grid-Layout oder in XAML das ListView-Steuerelement verwenden, um alle Vorteile der verschiedenen Bildschirmauflösungen zu nutzen. Diese Steuerelemente wachsen mit und ordnen sich automatisch so an, wie man es erwartet. Bei fixen Layouts, z. B. bei Spielen, möchte man den Inhalt einfach nur hochskalieren und nicht, dass der Inhalt anders umgebrochen wird. Dann bieten sich so genannte fixed Layouts an.

Der Visual-Studio-Simulator und das Gerätefenster in Blend und Visual Studio erlauben es, diese verschiedenen Bildschirmgrößen und das Verhalten der Oberfläche zu testen.

Windows 8 bietet eine automatische Skalierung basierend auf der Auflösung an. Um möglichst gute Darstellungen von Grafiken in unterschiedlichen Auflösungen zu erhalten, sollte man entweder skalierbare Vektorgrafiken verwenden oder zumindest drei Bilder in 100 Prozent, 140 Prozent und 180 Prozent Skalierung vorbereiten. Diese Notwendigkeit entsteht, wenn die Pixeldichte größer wird. Dann werden Elemente auf dem Bildschirm kleiner. Dadurch wird die Treffergenauigkeit von Touch-Eingaben geringer und die Lesbarkeit leidet. Durch Skalierung behalten Touch-Elemente ihre Größe, bekommen allerdings eine bessere Auflösung. Abbildung 5 und 6 verdeutlichen, wie bei gleichbleibender Größe und höherer Pixeldichte Elemente auf dem Bildschirm kleiner und schlechter „touchbar“ werden.

Pixeldichte 1 
Pixeldichte 2 
[ header = Die wichtigsten Features einer Windows 8 App – Teil 3 ]
Verwenden der Verträge

Verträge in Windows 8 sind Schnittstellen zu Systemfunktionen und anderen Apps. Jede App kann diese Verträge implementieren und damit seine Funktionen auch anderen Apps über die Systemleiste zur Verfügung stellen. So kann man aus fast allen Apps heraus Texte und Bilder selektieren, diese über die Teilen-Funktion an diverse andere Apps übergeben, wie z. B. der Mail-App. Dadurch entfällt z. B. der Aufwand, selber eine Mail-Logik implementieren zu müssen. Visual Studio bring dazu bereits Vorlagen mit, die einfach der eigenen App hinzugefügt werden müssen.

Suche

Die Suche befindet sich in Windows-8-Apps immer in der rechten Systemleiste. Jede App darf sich dort integrieren. Dadurch gibt es für die App einen zusätzlichen Einstiegspunkt in die App.

Teilen

Jede App kann Informationen mit anderen Apps teilen, ohne diese Apps zu kennen. Dazu gibt die App nur bekannt, welchen Datentyp sie gerne teilen möchte, z. B. Bild und Text. Damit wird sie zur Quelle von Daten. Jeder App kann auch sagen, dass sie bestimmte Informationen annehmen kann. Damit wird sie dann zum Ziel von Informationen. Die eingebaute Kamera-App teilt beispielsweise das aktuelle Foto. Die Mail-App wiederum kann Fotos und Texte aufnehmen, um diese an Freunde zu versenden.

Erweitern des Dateiauswahl-Dialogs

Über so genannte FilePickerExtensions lässt sich der Dialog zum Auswählen von Dateien erweitern. Bisher war man gewohnt, seine Dateien aus der Bibliothek oder von einem Laufwerk laden zu können. In Windows 8 ist es jetzt auch möglich Daten aus anderen Apps laden zu können. Abbildung 7 zeigt, dass Dateien nicht nur vom lokalen Rechner geladen werden können, sondern auch Daten die andere Apps, wie z. B. die SkyDrive-App, bereitstellen.

FilePickerExtension 
Einstellungen

Der Umgang mit Programmeinstellungen wird in Windows 8 vereinheitlicht. Der Benutzer soll immer wissen, dass er über die Systemleiste am rechten Rand auf die Einstellungen der App und das System zugreifen kann (Abb. 8).

Aufruf der Einstellungen für die Wetter-App 
Live-Kacheln

Live Tiles sind die Eingangstüren zu Apps. Sie bieten weit mehr Möglichkeiten als die klassischen Symbole. Sie sind im Prinzip eine Erweiterung der eigentlichen App. Sie können, ohne dass dabei die App immer laufen muss, Informationen anzeigen.

Hinzu kommt, dass man zusätzliche Live-Kacheln für eine App erzeugen lassen kann, die spezielle Informationen aus der App anzeigen können. Die mitgelieferte Wetter-App kann beispielsweise die Wetterinformationen aus diversen Städten gleichzeitig auf dem Startbildschirm bringen (Abb. 9). Live-Kacheln können hervorragend dazu genutzt werden, den Benutzer in die App zu locken. Dazu sollte man aktuellen, personalisierten Inhalt darstellen, der den Benutzer dazu animiert, die App zu starten. Innerhalb der Live-Kacheln kann man kleine nummerische Kennzeichen darstellen, um zu zeigen, dass eine bestimmte Anzahl neuer Informationen verfügbar ist. Eine Live-Kachel kann bis zu fünf verschiedene rotierende Inhalte darstellen, z. B. die letzten fünf Nachrichtenmeldungen.

Sehr individuell anpassbare Inhalte für die Live-Kacheln 
Benachrichtigungen

Toast-Benachrichtigungen liefern Informationen, die kurz erscheinen und nach kurzer Zeit wieder von selbst verschwinden. Diese Benachrichtigungen können verwendet werden, um Informationen anzuzeigen, wenn die eigentliche App gerade nicht läuft oder sich im Hintergrund befindet. Es kann für Echtzeitinformationen verwendet werden, wie z. B. Instant-Messaging, Mail oder Anrufe. Diese Benachrichtigungen können angetippt werden. Durch das Antippen wird die App in den Vordergrund geholt, und zeigt möglichst direkt auf die weiterführenden Informationen bzw. Aktionen der ursprünglichen Benachrichtigung.

Benachrichtigungen sollten nicht für Fehlermeldungen oder Warnungen verwendet werden. Zusätzlich sollte man den Benutzer nicht mit zu vielen Benachrichtigungen stören, sondern gegebenenfalls Nachrichten in einer Benachrichtigung zusammenfassen. In Abbildung 10 sieht man, dass Benachrichtigungen am oberen rechten Bildschirmrand erscheinen können. Technisch gesehen verwenden Benachrichtigungen die gleiche Vorlagentechnik, die sehr vielseitige Darstellungen erlauben.

Notifications 
Verinnerlichen der Designprinzipien

Jeder Pixel zählt und ist es wert genauestens gestaltet zu werden. Details wie Schrift und Layout sind sehr wichtig und sollten mit Bedacht gestaltet werden.

Lieber weniger als mehr darstellen. Es ist nicht einfach, eine einfach wirkende App zu erstellen, dies bedeutet oft viel Designaufwand. Die Benutzer der App sollen sich auf den wesentlichen Inhalt der App fokussieren können und nicht von unnötigen Firlefanz abgelenkt werden. Je leichter eine Anwendung zu bedienen ist, desto besser nimmt der Benutzer die App an.

Schnell und flüssig soll alles wirken. Anwendungen, die mit Touch bedient werden, müssen schnell reagieren und dem Benutzer sofort Feedback geben. Dabei können leichte Animationen helfen, dem Benutzer zu zeigen, was gerade passiert.

Wir leben im digitalen Zeitalter. Das bedeutet, wir sind mit der Cloud verbunden und möchten diese auch über Geräte hinweg benutzen und auch von ihr Nachrichten erhalten.

Apps können mithilfe der Verträge miteinander kommunizieren und damit ganz neue Szenarien der Bedienung ermöglichen. Teilen und Suchen sie miteinander und nutzen sie Features anderer Apps.

Roam to the Cloud

Windows 8 kann aktiv mit der Cloud kommunizieren, wenn man das als Entwickler möchte. Die Cloud kann innerhalb eigener Apps dazu verwendet werden, Einstellungen und Zustand der App von einem Rechner zu speichern. Und diese Einstellungen dann auf anderen Rechnern des Benutzers anzuwenden. Diverseste Einstellungen in Windows und Windows-8-Apps können über die Cloud synchronisiert werden. So hat man mit seinem Account auf diversen Rechnern immer das gleiche Hintergrundbild und Browserfavoriten. Am besten eignet sich dieses Roaming für Benutzereinstellungen, Links und kleine Daten, wie z. B. eine kleine aktuelle Aufgabenliste oder die gerade zu schreibende E-Mail. Für größere Datenmengen ist dieser Mechanismus allerdings nicht vorgesehen und liegt derzeit bei 100 KB.

Zusammenfassung

Mit diesen Merkmalen hat man auch schon einen guten Überblick über das, was Windows 8 besonders macht. Verwendet man diese Apps sinnvoll in seiner eigenen App, hat man schon einen großen Schritt in Richtung Top-App getan.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -