Designfallstudie: Von der Website zur Windows-Runtime-App

Für das Designen von Websites gibt es seit Jahrzehnten allgemeine Methoden. Mit Windows 8 können Designer und Entwickler vertraute Webtechnologien wie HTML5, Cascading Stylesheets, Level 3, (CSS3) und JavaScript nutzen, um Windows Store-Apps zu erstellen. Im Folgenden erfahren Sie, wie Sie die Funktionen einer Website verfügbar machen, um eine tolle Windows Store-App zu erstellen. Es wird gezeigt, wie Sie mit den Features der Windows 8-Plattform den Wert und Nutzen der App steigern, die Personalisierung ermöglichen und attraktivere Umgebungen bereitstellen.

Unser Ziel ist es, Designern und Entwicklern zu helfen, ihre Websites in Windows Store-Apps zu verwandeln.

Weitere Informationen zu den Umsatzchancen, die Windows 8 bietet, finden Sie unter Verkaufen von Apps. Weitere Informationen zu den Features, die zum Erstellen von Windows Store-Apps verwendet werden, finden Sie im Windows 8-Produkthandbuch für Entwickler.

Diesen Artikel herunterladen: Sie können diesen Artikel unter Offlineversion des Artikels herunterladen.

Die Food Truck-Website und -App

Grundlage dieses Artikels ist eine Food Truck-Website, auf der Benutzer nach Food Trucks in ihrer Gegend suchen, sich über Neuigkeiten informieren und Benutzerrezensionen für Food Trucks abgeben können. In der folgenden designorientierten Fallstudie untersuchen wir Möglichkeiten, die Kernfunktionalität der Website umzuwandeln und auf eine Windows Store-App auszuweiten.

Unser Ziel bei der Migration zu einer Windows Store-App bestand darin, die besten Features der Website herauszustreichen und gleichzeitig die Parität mit der Kernfunktionalität der Website aufrechtzuerhalten. Wir sind zu dem Schluss gekommen, dass die Windows Store-App am besten dazu geeignet ist, Benutzern die Suche nach Trucks in ihrer Nähe zu ermöglichen. Die nächste Abbildung zeigt die Anatomie der UI der Food Truck-Website. Hier sehen Sie, wie die einzelnen UI-Komponenten in das Microsoft-Design übertragen werden.

1. Layout und Navigation
2. Befehle und Aktionen
3. Verträge: Suchen, Teilen und Einstellungen
4. Fingereingabe
5. Skalierung und Ansichten
6. Benachrichtigungen

Layout und Navigation

Konzentration auf den Inhalt, nicht auf das Chrom

Die meisten Websites verwenden etablierte Layoutmuster. Das Design der Homepage enthält eine UI für die Unterstützung der Navigation (Kopf und Fuß), Hilfsprogrammkomponenten (Anmeldung, Suche) und Zugriff auf weitere Inhalte (Blog und News). Dies sind allgemeine Elemente von Websites, sie lenken die Benutzer jedoch vom Wesentlichen ab: der Suche nach einem Food Truck in ihrer Nähe. Beim Design der Windows Store-App haben wir einen großen Teil dieser UI und dieser Inhalte entfernt, da sie nicht in direktem Zusammenhang mit dem Hauptfeature der App standen.

Website:

• Die Website hat ein allgemeines Layoutmuster mit zwei Spalten: Hauptinhalt auf der linken Seite und andere Inhalte auf der rechten Seite.
• Der Schwerpunkt der Website, Food Trucks, belegt nur etwa ein Drittel des Bildschirms.

Windows Store-App:

Die gesamte Fläche der Angebotsseite ist dem gewidmet, was diese App am besten kann: einen Food Truck in der Nähe suchen.

Beispiel: Hervorheben von Inhalt auf der Website-Homepage und auf der Startseite der Windows Store-App.

Sowohl die Website als auch die Windows Store-App zeigen auf ihren Hauptseiten einzeln hervorgehobene Food Trucks und Kategorien. Aufgrund der begrenzten Fläche auf der Website wird jede Food Truck-Kategorie durch ein einziges Bild dargestellt. Beim Design der Startseite für die Windows Store-App haben wir uns dafür entschieden, mehr Infos zu den Food Trucks auf der obersten Ebene anzuzeigen, um den Benutzern mehr Kontext zu geben und die Benutzeroberfläche attraktiver zu gestalten.

Website: Jede Food Truck-Kategorie wird durch ein einziges Bild dargestellt. Benutzer müssen zu einer anderen Seite wechseln, um mehr Trucks in der jeweiligen Kategorie anzuzeigen, und dann einen Truck auswählen, um Details zu sehen.	Windows Store-App: Jede Kategorie wird durch eine Gruppe von Bildern dargestellt, sodass die Benutzer schnell herausfinden können, welche Trucks aus einer bestimmten Kategorie sich in ihrer Nähe befinden. Benutzer können über die Startseite direkt zu einem Truck wechseln.

 

Informationen zum Auswählen des besten Navigationsmusters für Ihre App finden Sie unter Navigationsmuster.

Sehen Sie das flache Navigationsmuster in unserer Serie App-Features von A bis Z in Aktion.

Verwenden direkter Änderung zum Navigieren

Auf der Website wiederholen sich die Navigationselemente auf der oberen Navigationsleiste und im Fuß. Die Navigationselemente sind permanent und immer sichtbar. Wir haben die Navigationselemente in der Windows Store-App so entworfen, dass sie zwar direkt in den Inhalt integriert sind, aber erst angezeigt werden, wenn Benutzer sie benötigen.

Beispiel: Navigieren zu einem bestimmten Truck auf der Website und in der Windows Store-App.

Website: A. Ein Benutzer navigiert zu einer separaten Kategorieseite auf der Website, um alle Truck-Kategorien anzuzeigen. B. Der Benutzer wählt eine Kategorie aus (z. B. "Barbecue food trucks") und öffnet sie. C. Schließlich kann der Benutzer in der ausgewählten Kategorie einen Truck auswählen.

Windows Store-App: A. Die Startseite enthält eine Hub-Seite, die aus Inhaltsgruppen besteht: "Featured Trucks", "Near Me" und eine Kategorieansicht. B. Benutzer können den Inhalt durch Fingereingabe in eine beliebige Richtung verschieben, um direkt auf der Startseite verschiedene Food Truck-Kategorien anzuzeigen. C. Da in jedem Hub mehrere Trucks aus der Kategorie hervorgehoben werden, können Benutzer auf einen Truck tippen, um direkt zur Seite dieses Trucks zu wechseln. Sie können auch auf den Text des Kategoriegruppenkopfs (z. B. "Asian") tippen, um zu einer Kategorieseite zu wechseln.

 

Befehle und Aktionen

Beibehalten von Befehlen und Aktionen auf der App-Leiste

Websites verwenden häufig Ad-hoc-Befehle, die als Benutzeraktionen parallel zum Inhalt angezeigt werden. So hat beispielsweise auf unserer Website jede Food Truck-Seite einen Link, über den Benutzer Fotos eines bestimmten Trucks hochladen können. Diese kontextbezogenen Aktionen werden auf jeder einzelnen Truck-Seite wiederholt.

Gemäß dem Ansatz "Inhalt ist wichtiger als Spielereien" für das Design von Windows Store-Apps haben wir alle Kontextaktionen auf der App-Leiste, einem allgemeinen Steuerelement des Systems, platziert. Darüber hinaus befinden sich häufig verwendete Befehle in Randnähe und sind daher leichter erreichbar. Mithilfe dieser Designgrundsätze wird die Designoberfläche der App nicht mit Steuerelementen übersät, und Benutzer können unabhängig davon, wo sie sich gerade befinden, von oben oder unten auf dem Bildschirm über die App-Leiste streifen, um relevante Aktionen anzuzeigen. Alle Windows Store-Apps können die App-Leiste für ihre Befehle verwenden. Da den Benutzern die Interaktionen mit der App-Leiste vertraut werden, erhöht sich dadurch auch die Benutzerfreundlichkeit der App, und das gesamte System macht einen stimmigeren Eindruck.

Beispiel: Hochladen eines Food Truck-Fotos auf die Website und in die Windows Store-App

Website: Ad-hoc-Befehle. Die Benutzeraktionen werden parallel zum Inhalt angezeigt.	Windows Store-App: Die App-Leiste ist standardmäßig ausgeblendet, um den Benutzern einen immersiven Eindruck zu vermitteln. Benutzer können vom unteren oder oberen Bildschirmrand streifen, um auf Kontextaktionen zuzugreifen. Die Aktionen ändern sich abhängig davon, wo sich die Benutzer in der App befinden oder welcher Inhalt ausgewählt ist.

 

Verträge

Die Food Truck-Website orientiert sich an allgemeinen Websitekonventionen für globale Aktionen wie Suchen und Anmelden. Diese Aktionen sind dauerhaft an der rechten oberen Ecke der Website verankert. Beim Entwerfen der Windows Store-App war unsere Benutzeroberfläche für diese globalen Aktionen nicht enthalten. Stattdessen haben wir integrierte Systemfunktionen verwendet, beispielsweise den Vertrag für "Suche", den Freigabe-Vertrag und den Vertrag für "Einstellungen". Da diese UI-Komponenten nicht immer auf dem Bildschirm angezeigt werden, wirkt die App-Canvas aufgeräumter und lässt mehr Platz für Inhalte.

Verwenden des Vertrags für "Suche" zum Zentralisieren der Suchfunktion

Wie die meisten Websites hat die Food Truck-Website auf jeder Seite ein Suchfeld, und als Suchbereich ist nur die Website festgelegt. Dies bedeutet, dass Benutzer vor der Suche zur Food Truck-Website wechseln müssen.

Beim Entwerfen der Suchabfrage in der Windows Store-App haben wir den Suchvertrag verwendet, sodass Benutzer nach einem guten Truck suchen können, ohne zunächst die App öffnen zu müssen. Der Charm "Suche" ermöglicht den Zugriff auf die Suchfunktionalität, die Benutzer überall im System aufrufen können.

Beispiel: Suchen nach einem Food Truck mithilfe der Website und der Windows Store-App

Website:

• Das Suchfeld ist auf der Website immer sichtbar.
• Wenn Suchergebnisse angezeigt werden, ist das gesamte Websitechrom noch vorhanden.
• Benutzer müssen immer erst zur Website wechseln, bevor sie eine Suche nach einem Food Truck ausführen.

Windows Store-App:

• Benutzer können überall in der App eine Suche ausführen, indem sie über den Rand streifen, um die Charms anzuzeigen und "Suche" auszuwählen. Sie können auch ein In-App-Suchfeld zur Verfügung stellen, das in der App-Leiste oder im App-Canvas angezeigt wird.
• Die Food Truck-App ist standardmäßig ausgewählt, da sich der Benutzer gerade in der App befindet. Wenn der Benutzer etwas einzugeben beginnt, stellt die App im Suchbereich Suchvorschläge bereit. Auf diese Weise können Benutzer schnell sehen, welche Begriffe zu Ergebnissen führen. Wenn die Benutzer die Abfrage gesendet haben (z. B. "Barbecue Truck"), zeigt die App eine Suchergebnisansicht an.
• Die Suchergebnisansicht ist aufgeräumt und nur für Suchergebnisse vorgesehen. Unnötiges Chrom ist nicht enthalten. Wenn Sie ein Suchfeld hinzufügen, können Sie das Verhalten der Suchabfrage umfassend steuern.

Beispiel: Suchen nach einem Food Truck außerhalb der App (nur in Windows Store-Apps verfügbar).

Neben der Suche in Apps können Benutzer außerhalb der App eine Suche ausführen, indem sie die Food Truck-App als Suchziel auswählen. In diesem Beispiel hier sucht der Benutzer über die Startseite nach "Barbecue Truck". Der Benutzer tippt in der App-Liste im Suchbereich auf die Food Truck-App. Daraufhin wird die App geöffnet und die Suchabfrage abgeschlossen. Da die Food Truck-App für die Suche in der Nähe befindlicher Food Trucks optimiert ist, kann der Benutzer mit einer Tippbewegung eine Suche ausführen und Barbecue Trucks in seinem Gebiet finden.

Verwenden des Freigabe-Vertrags, um mehr Ziele und Ihnen wichtige Personen zu erreichen

Auf der Food Truck-Website können Benutzer Infos zu einem bestimmten Food Truck über E-Mail, Facebook oder Twitter teilen. Die Optionen zum Teilen werden häufig an vielen Stellen auf einer Website in der Nähe der Inhalte, die geteilt werden können, verfügbar gemacht.

Szenarien für Teilen kommen in unserer Windows Store-App dank des Freigabe-Vertrags besonders gut zur Geltung. Da wir den in das System integrierten Charm "Teilen" verwenden, benötigen wir keine Schaltflächen für "Teilen", die überall in der App angezeigt werden. Benutzer finden die Optionen zum Teilen unabhängig von der verwendeten App immer an der gleichen Stelle. Die Änderung vereinfacht sowohl das Design als auch die Entwicklung, da es nicht mehr nötig ist, mit jedem Dienst, den Benutzer möglicherweise verwenden möchten, eine Verbindung herzustellen. Nach der Integration unserer App in "Teilen" ist die App mit allen Windows-Apps verbunden, für die der Freigabe-Vertrag implementiert ist. Sie müssen sich nicht mit API-Änderungen im Zusammenhang mit externen Webdiensten befassen.

Beispiel: Teilen eines Food Truck-Fotos

Website: Jeder Freigabedienst hat eine eigene Schaltfläche. Überall auf der Website finden sich Schaltflächen zum Teilen.	Windows Store-App: Einheitliche Position für alle Optionen zum Teilen in allen Windows Store-Apps. Benutzer können "Teilen" überall in der App aufrufen. Wenn Benutzer einen Freigabedienst auswählen, kann die Ziel-App den UI-Bereich und das Branding anpassen.

 

Beispiel: Genaues Betrachten des Bereichs "Teilen"

Windows Store-App:

• Alle als Ziel für Teilen implementierten Apps werden in der App-Liste im Bereich "Teilen" angezeigt. Beispiele: Socialite, Tweet@Rama oder Mail.
• Benutzer können viele verschiedene von einer App unterstützte Inhaltstypen teilen. Beispielsweise können Benutzer Links und Fotos teilen oder gegebenenfalls die Informationen in einer Notiz-App speichern.
• Häufig verwendete Ziele für Teilen werden oben angezeigt, damit Benutzer den Workflow für Teilen schnell abschließen können.

Verwenden des Bereichs "Einstellungen"

Die Food Truck-Website enthält eine Reihe von Hilfsprogrammfunktionen, beispielsweise "About us", "Sign-in", "Contact info" und "Newsletters". Diese Funktionen nehmen gemäß den allgemeinen Mustern für Webdesign bestimmte Bildschirmbereiche ein, damit sie von den Benutzern leicht gefunden werden können. Allerdings sind sie über verschiedene Bereiche der Website verstreut. Konfigurations- und Verwaltungsaufgaben sind nicht Schwerpunkt der Windows Store-App. Wenn Sie den Vertrag für "Einstellungen" mit seinem einheitlichen Einstiegspunkt verwenden, müssen sich Benutzer nicht merken, wo sich diese App-Verwaltungsfunktionen befinden, und können die Funktionen bei Bedarf zuverlässig aufrufen.

Beispiel: Festlegen von Optionen auf der Website und in der Windows Store-App

Website:

• Hilfsprogrammfunktionen wie "Sign-in", "About Us", "Contact" und "Newsletter" befinden sich in verschiedenen Bereichen der Website.

Windows Store-App:

A. Die Einstellungsoptionen befinden sich alle zentral im Bereich "Einstellungen".

B. Benutzer können sich von überall in der App anmelden, ohne den aktuellen Kontext zu verlassen.

C. Über die Benachrichtigungseinstellung können Benutzer angeben, welche Art von Benachrichtigungen sie erhalten möchten. Dies ersetzt den Websitenewsletter und liefert Benutzern aktuelle Infos über die App.

Verwenden der Dateiauswahl zum Zugreifen über verschiedene Stellen

Die Food Truck-Website regt Benutzer dazu an, Fotos von Trucks in ihrer Gegend hochzuladen. Diese Funktionalität kann in einer Windows Store-App mithilfe einer Dateiauswahl leicht repliziert werden. Bei der Dateiauswahl handelt es sich um ein Vollbild-Dialogfeld, über das Benutzer auf Dateien und Ordner auf dem lokalen PC, verbundenen Speichergeräten oder anderen über eine Heimnetzgruppe verbundenen Computern zugreifen können. Außerdem können Benutzer über Apps, die am Vertrag für "Dateiauswahl" teilnehmen, auf Elemente zugreifen.

Beispiel: Hochladen eines Food Truck-Fotos aus dem lokalen Dateisystem

Windows Store-App:

• Der Benutzer tippt auf der App-Leiste auf die Schaltfläche "Upload", und die UI der Dateiauswahl wird geöffnet. Dabei handelt es sich um eine einheitliche Benutzeroberfläche, die Benutzern immer dann angezeigt wird, wenn sie auf Dateien zugreifen möchten.
• Wenn der Benutzer auf die Überschrift "Dateien" tippt, wird ein Flyout mit allen verfügbaren Dateispeicherorten angezeigt, und der Benutzer navigiert zu einem Dateiordner.
• Der Benutzer wählt mehrere Fotos aus dem Ordner aus. Daraufhin wird links unten eine Liste mit Miniaturansichten der ausgewählten Fotos angezeigt.

Fingereingabe

Verwenden von horizontalem Verschieben für ein horizontales Layout

Die Food Truck-Website und die Windows Store-App wurden unter Berücksichtigung der Interaktionsmethode und der Ergonomie für die Benutzer entworfen. Die Website wurde in erster Linie für Mausinteraktionen entworfen, das heißt, der Inhalt der einzelnen Seiten ist vertikal angeordnet, und die Benutzer können mit der Maus schnell und einfach einen Bildlauf zum gewünschten Inhalt durchführen. Das Design der Windows Store-App ist für die Fingereingabe optimiert und verwendet wie die meisten Desktop- und Laptop-PCs das Querformat. Durch das horizontale Layout wird die Bildschirmfläche optimal genutzt. Außerdem ist das horizontale Verschieben per Fingereingabe auf einem Gerät im Querformat für Benutzer komfortabler und natürlicher als das Durchführen eines vertikalen Bildlaufs.

Beispiel: Vergleich zwischen der Navigation in Inhalten auf der Website und auf der Startseite der Windows Store-App.

Querziehen zum Auswählen von Objekten

Eine allgemeine Konvention für Websites sieht vor, dass neben mehreren Objekten Kontrollkästchen verwendet werden, um auf die Mehrfachauswahl hinzuweisen. In Windows 8 können Benutzer schnell senkrecht zur Verschieberichtung über ein Objekt streifen, um das Objekt in einer Liste oder einem Raster auszuwählen. Wenn Objekte ausgewählt sind, kann die App-Leiste automatisch eingeblendet werden, um für das Elemente relevante Befehle anzuzeigen.

Beispiel: Auswählen mehrerer Food Trucks auf der Startseite zum Anheften auf der Startseite

Wenn Benutzer auf der Angebotsseite der App durch Streifen einen Truck auswählen, wird eine App-Leiste eingeblendet. Sie enthält den Befehl "Add to favorites", mit dem die ausgewählten Trucks als Lesezeichen gespeichert werden können. Da diese Bewegung umkehrbar ist, wird die Auswahl in Windows Store-Apps deutlich effizienter und motiviert die Benutzer zum Erkunden der App.

Zusammendrücken und Aufziehen für semantisches Zoomen

Mit den Zusammendrück- und Aufziehbewegungen können Benutzer schnell eine lange Inhaltsliste durchlaufen. Die Angebotsseite der Windows Store-App zeigt eine Reihe von Gruppen an, darunter "Featured", "Near me", "Asian", "Barbecue" und "Breakfast". Benutzer können durch Verschieben mehr Inhalt anzeigen oder mit dem semantischen Zoom schnell zu einem bestimmten Abschnitt springen. Wenn sie das Steuerelement für semantischen Zoomen verwenden, wird durch Zusammendrücken die aktuelle Ansicht verkleinert, sodass alle Abschnitte auf einen Blick zu sehen sind. Benutzer können dann schnell tippen, um über Anfang, Ende oder einen bestimmten Abschnitt der Liste zu springen. Die verkleinerte Ansicht kann darüber hinaus so gestaltet werden, dass interessante Inhalte innerhalb der einzelnen Abschnitte oder Metainformationen zu einem Abschnitt (beispielsweise die Anzahl der Trucks in den einzelnen Kategorien) angezeigt werden. Sie kann anstelle dauerhafter Navigationselemente auf der App-Canvas für die Navigation verwendet werden.

Beispiel: Springen zu einer bestimmten Truck-Kategorie mithilfe des semantischen Zooms

Website: Benutzer müssen zu einer separaten Seite navigieren, um alle Kategorien zu sehen.	Windows Store-App: Benutzer können auf der Startseite semantisches Zoomen verwenden, um schnell alle Kategorien zu sehen, ohne den Bildschirm zu verlassen. In der semantisch gezoomten Ansicht wird jede Food Truck-Kategorie durch ein einziges Bild dargestellt. Alle Kategorien sind über die Startseite verfügbar, ohne dass durch Verschieben die vollständige Liste angezeigt werden muss.

 

Skalierung und Anpassen der Größe

Entwerfen eines Layouts, das sich an verschiedene Ausrichtungen und Bildschirmgrößen anpasst

Wir haben das Layout der Food Truck-Website so gestaltet, dass es flexibel genug ist, um es auf verschiedene Geräte, Bildschirmgrößen, Auflösungen und Ausrichtungen zu skalieren. Ähnlich wie bei einem dynamischen Websitedesign herrscht bei PCs unter Windows 8 große Vielfalt: von kleinen, nur für die Toucheingabe vorgesehenen Tablets, bis hin zu größeren Laptops und Desktops. Wenn wir mit unserer App mehr Kunden erreichen möchten, müssen wir sie unbedingt so designen, dass sie auf den verschiedensten Geräten gut aussieht.

Sie können bei der Entwicklung von Windows Store-Apps viele Prinzipien des Websitedesigns anwenden. Integrierte Vorlagen und Steuerelemente erleichtern den Wechsel vom Querformat zum Hochformat und zurück. Wenn die Ausrichtung zum Hochformat wechselt, werden in jeder Kategorie mehr Trucks angezeigt. Entsprechend werden auch mehr Trucks in den einzelnen Kategorien angezeigt, um die zusätzliche Bildschirmfläche von Monitoren mit hoher Auflösung auszunutzen.

Beispiel: Food Truck-Website und Windows Store-App auf verschiedenen Geräten

Website:

• Das Layout der Food Truck-Website wird für verschiedene Bildschirmgrößen und Formfaktoren angepasst und neu umgebrochen.

Windows Store-App:

• Die Windows Store-App im Hochformatmodus, Querformatmodus und auf einem Bildschirm mit hoher Auflösung. Wir nutzen die zusätzliche Fläche, um mehr Inhalt anzuzeigen.

Verwenden Sie eine geringe Breite, um Ihre Benutzer zu fesseln

Unter Windows 8 können Benutzer mehrere Apps nebeneinander auf dem Bildschirm anordnen und gleichzeitig verwenden. Entwerfen Sie Ihre App so, dass sie mit einer geringen Breite gut arbeitet, um die Verweildauer der App auf dem Bildschirm zu erhöhen und Benutzer über einen längeren Zeitraum zu fesseln. Benutzer können die App-Größe einfach ändern, indem sie die Aufteilung zwischen zwei Apps bearbeiten. Deshalb ist es wichtig, dass der Kontext bei Größenänderungen beibehalten wird. Durch eine Größenänderung der App sollte nicht der App-Zustand verloren gehen.

Weitere Informationen für das anpassen von Größen finden Sie in Richtlinien für Fenstergrößen und das Skalieren auf Bildschirmen und Richtlinien zum Anpassen der Fenstergröße an hohe oder schmale Layouts.

Beispiel: Startseite der Windows Store-App in weiter und geringer Breite.

• Links: Die Food Truck-App in einer breiten Größe, die fast den gesamten Bildschirm in Anspruch nimmt. Benutzer können eine Wetter-App und die Food Truck-App nebeneinander verwenden.
• Rechts: Mit einer geringen Breite schwenkt der Benutzer vertikal, um mehr Inhalte zu sehen, da es bequemer ist, am langen Rand entlang zu schwenken. Dies ist anders als beim horizontalen Schwenken in der gefüllten Ansicht, die ebenfalls für das Schwenken entlang des langen Rands optimiert ist.

Benachrichtigungen

Verwenden von Kacheln für dauerhafte und dynamische Updates

Benutzer der Food Truck-Website können die Website aufrufen, um News und Blogs zu neuen Food Trucks in ihrer Gegend oder zu Food Trucks mit geändertem Standort zu lesen. Außerdem können Benutzer über die Website Food Truck-Ankündigungen auf Facebook und Twitter verfolgen. Hierzu müssen die Benutzer jedoch entweder die Website aufrufen, um Neuigkeiten zu sehen oder sich für Updates anmelden. Möglicherweise sehen die Benutzer manche Updates erst, wenn sie schon nicht mehr relevant sind.

Bei der Umwandlung dieser Funktion in eine Windows Store-App haben wir Kacheln und Popupbenachrichtigungen verwendet, um Benutzern topaktuelle und auf ihre Bedürfnisse abgestimmte Informationen bereitzustellen. Die auf der Startseite angezeigten Kacheln sind sozusagen der Eingang zur Windows Store-App. Sie sollen lebendig wirken und aktuelle, personalisierte Inhalte bereitstellen, die genau auf die Benutzer zugeschnitten sind, sodass sie die App mehr verwenden und davon profitieren. Diese Inhalte werden auch dann in der App angezeigt, wenn sie nicht ausgeführt wird.

Website:

• Der Abschnitt mit aktuellen News auf der Website zeigt den letzten Standort eines Trucks an.
• Der Blog auf der Website nennt neue Trucks und gibt Hinweise dazu, wann Food Trucks in einer bestimmten Gegend stehen.

Windows Store-App:

• Die Hauptkachel der Food Truck-App zeigt an, welche Food Trucks sich in der Nähe eines Benutzers befinden und wie lange der Truck an dieser Stelle stehen wird. Kacheln können aktualisiert werden, wenn die Food Truck-App nicht ausgeführt wird, sodass die Benutzer über die Startseite Updates erhalten können.
• Benutzer können ihre bevorzugten Trucks (z. B. Cheeseburger Truck) als Kachel der Startseite anheften, um aktuelle News zu diesem Truck zu erhalten. Dadurch haben die Benutzer umfangreiche Anpassungsmöglichkeiten im Einklang mit ihren Anforderungen. App-Designer haben die Wahl zwischen vielen verfügbaren Kachelvorlagen und -größen, die ihnen die Implementierung erleichtern sollen.

Verwenden von Popups für vorübergehende und wichtige Benachrichtigungen

Neben Kachelbenachrichtigungen können Sie auch Popupbenachrichtigungen verwenden, um Benutzer über Echtzeitereignisse zu benachrichtigen. Anders als bei passiven Kachelupdates handelt es sich bei Popupbenachrichtigungen für Windows Store-Apps um wichtige Updates, bei denen Benutzer unterbrochen werden. Sie werden rechts oben auf dem Bildschirm angezeigt und können überall im System erscheinen. Generell sollten Sie Benutzern beim ersten Ausführen der App die Möglichkeit geben, sich für Benachrichtigungen zu entscheiden. Zeigen Sie gegebenenfalls die letzten Popupbenachrichtigungen an, wenn sie noch relevant sind.

Beispiel: Ein beliebter Food Truck des Benutzers hat seine Standorte geändert.

Der Benutzer hat sich im Bereich "Einstellungen" für den Empfang von Popupbenachrichtigungen entschieden, damit er informiert wird, wann sein bevorzugter Food Truck seinen Standort geändert hat.

Schlussfolgerung

Stellen Sie sich beim Erstellen einer Windows Store-App, die auf einer vorhandenen Website basiert, immer die Frage, was die App am besten kann. Wenn Sie die Antwort haben, optimieren Sie die Windows Store-App für dieses Szenario. Denken Sie immer daran, dass der Inhalt wichtiger ist als das Chrom: Verwenden Sie in das System integrierte Befehle wie "Teilen" ,"Suche" und "Einstellungen", um den Zugriff auf allgemeine Funktionalität über einen vertrauten und intuitiven Mechanismus zu ermöglichen. Blenden Sie Befehle aus, die bei Verwendung der App-Leiste und der Steuerelemente für semantisches Zoomen nicht benötigt werden. Nutzen Sie die Vorteile von Live-Kacheln und Benachrichtigungen, damit Benutzer auch dann von Ihrer App profitieren, wenn sie nicht ausgeführt wird. Wenn Sie sich an diese Empfehlungen halten, haben Sie am Ende eine ansprechende Windows Store-App, die die Benutzer begeistert und die Ihnen hilft, Ihr Geschäft auszubauen.

Über die Autoren

Nicholas Huttema ist Visual and Interaction Designer bei Plain Concepts. Er arbeitet gern mit neuen Ideen und aufgeräumten Benutzeroberflächen. Seine Ausbildung und Karriere begann er in Michigan, USA als Print Designer. Seitdem hat er im Rahmen seiner Tätigkeit bei verschiedenen Unternehmen in den Bereichen Los Angeles und Seattle Kenntnisse im UX Design erworben. Er hat unter anderem für Microsoft, Myspace, Amazon.com und Herman Miller als Designer gearbeitet. Seine Freizeit verbringt er gern im Freien mit Wandern, Camping und Snowboarding.

Qixing Zheng ist User Experience Program Manager bei Microsoft. Sie gehört dem Team an, das die Benutzeroberfläche von Windows 8 erstellt hat, und hat Designern das Microsoft-Design vermittelt. Sie hat es sich zur Aufgabe gemacht, anderen zu zeigen, wie sie die Benutzeroberfläche ihrer Apps mit den Technologien verbessern können, die sie tagtäglich verwenden. Bevor Qixing Zheng dem Windows-Team beitrat, arbeitete sie als erste UX-Beraterin bei Microsoft Canada, wo sie an Universitäten, bei Designcommunitys und bei Unternehmen über die UX-Investitionen von Microsoft sprach. Außerdem beschäftigte sie sich mit der Suche nach hervorragenden Designern und mit dem Sammeln von Designstorys aus der Community.