Erstellen von Apps im Metro-Stil, die sich aus der Masse hervorheben

Entwicklerblog für Windows 8-Apps

Ein Einblick in die Entwicklung von Apps im Metro-Stil – präsentiert vom Windows 8-Entwicklerteam

Erstellen von Apps im Metro-Stil, die sich aus der Masse hervorheben

Rate This
  • Comments 1

Wenn Sie Ihre App im Store einreichen, gibt es sicherlich weitere Apps in derselben Kategorie, die um die Aufmerksamkeit der Benutzer konkurrieren. Es ist wichtig, dass Sie die Differenzierungsmerkmale Ihrer Angebote deutlich hervorheben und sich auf die wichtigsten Anwendungsbereiche Ihrer App konzentrieren, um Ihre App im Metro-Stil erfolgreich von der Masse abzuheben.

Windows 8 stellt eine Reihe von Entwurfsmustern, Steuerelementen sowie in die Plattform integrierten Funktionen, wie beispielsweise Verträge, zur Verfügung, die Sie dabei unterstützen. Hier sind einige Beispiele: das Steuerelement App-Leiste lenkt die Aufmerksamkeit der Benutzer auf die Inhalte und erhöht die Übersichtlichkeit; der Touch Guidance-Leitfaden für Fingereingaben schreibt einheitlich unterstützte Gesten vor, wie beispielsweise das Streifen über den unteren Bildschirmrand zum Aufrufen der App-Leiste, damit Benutzer Ihre App souverän und intuitiv verwenden können, ohne zuvor neue Schnittstellen erlernen zu müssen; der Freigabe-Vertrag ist für die Zusammenarbeit von Apps verantwortlich, um Benutzern möglichst viele Inhalte bereitzustellen.

Dieser Beitrag unterscheidet sich von anderen Beiträgen. Heute sprechen wir nicht über Codierungsmuster, sondern über Entwurfsmuster, die Sie im Planungsprozess verwenden können. Ich stelle die Beispiel-App „Food with friends“ vor und beginne mit der Frage, die für das Hervorheben aus der Masse von zentraler Bedeutung ist: „Was sind die Stärken meiner App in der entsprechenden Kategorie?“. Danach werde ich einige praktische Schritte zur Entwicklung von App-Struktur und -Layout erläutern, um wichtige Szenarien und Differenzierungsmerkmale hervorzuheben. In den kommenden Monaten werden weitere Beiträge zu diesem Thema veröffentlicht. In diesen Beiträgen wird die App „Food with friends“ ebenso als Beispiel dienen. Wir werden daran Vorteile sowie unterschiedliche Aspekte der Windows 8-Plattform erläutern, damit Sie lebendige, kunstfertige, schnelle und flüssige Apps erstellen können.

Los geht's!

Beispiel: Food with friends

Nehmen wir an, dass wir eine App zur Restaurantsuche erstellen. Sehen wir uns den Entwurfsprozess der App etwas genauer an.

1. Identifizieren der Differenzierungsmerkmale

Identifizieren wir zunächst das Besondere, das uns von anderen Konkurrenten im Bereich Restaurant und Gastronomie unterscheidet:

Die Stärke meiner App in dieser Kategorie ist die Suche nach einem Restaurant, in das der Benutzer mit seinen Freunden heute Abend essen gehen kann.

Die App konzentriert sich zum einen auf den Benutzer und dessen Freunde und zum anderen auf ein gemeinsames Essen am heutigen Abend. Es steht also im Vordergrund, dass sich Freunde auf einen Ort zum Essen einigen, und dass Vorlieben von Freunden gesammelt werden, um sie in die Entscheidung des Benutzers miteinzubeziehen. Diese Gewichtung hebt unsere App von anderen Apps derselben Kategorie ab, die einfach nur eine Liste mit Restaurants in der Nähe bereitstellen.

Die Aussage über die „Stärke“ hilft dem Benutzer, eine Kaufentscheidung zugunsten dieser und keiner anderen App derselben Kategorie zu treffen. Bei Entscheidungen bezüglich Design oder der Verwendung von Features und Plattformfunktionen kommen wir noch häufiger auf das Thema Stärken der App zu sprechen.

Nennen wir diese App also Food with friends.

2. Auswählen der richtigen Szenarien

Lassen Sie uns nun wichtige Szenarien identifizieren, die die Stärken unserer App hervorheben. Beim Brainstorming und der Szenarienauswahl gibt es wahrscheinlich viele interessante Szenarien, die wir unterstützen könnten (wie beispielsweise die Anzeige des Nährwerts einzelner Gerichte). Um jedoch das einzigartige, differenzierte und erstklassige Versprechen unseres Angebots einzuhalten, müssen wir alle Szenarien ausschlagen, die nicht in unser Konzept passen. Im Folgenden sind die wichtigen Szenarien aufgeführt, die unsere App einzigartig macht:

  • Restaurants finden, in denen ich essen möchte
  • Restaurants finden, in denen meine Freunde essen möchten
  • Das Abendessen mit Freunden für heute Abend planen

Wir sollten zunächst darüber nachdenken, warum Personen die App verwenden möchten, und erst danach die Features in Betracht ziehen, die uns diesem Ziel näher bringen. Jedes unserer Szenarien umfasst eine Reihe an Features. Erst wenn wir die wichtigen Szenarien kennen, können wir über die Features nachdenken, die diese Szenarien ermöglichen. Im nächsten Beitrag beschäftigen wir uns noch intensiver mit Featureauswahl und -entwürfen, hier nur einige Beispiele:

  • Restaurants finden, in denen ich essen möchte:
    • Durchsuchen einer Karte oder Liste nach Restaurants
    • Suchen nach Name oder Stichwort
    • Filtern/Sortieren nach Kategorie, Preis und Bewertung
    • Hinzufügen/Entfernen von Restaurants zu/von der Wunschliste

3. Erstellen der Startseite

Die Startseite ist das Tor zu jeder App im Metro-Stil. Hier können Sie dem Benutzer die Stärken Ihrer App vermitteln. Beim Öffnen der App möchte der Benutzer sofort die wichtigen Szenarien Ihrer App erkennen sowie deren Funktionsweise verstehen. Ist die Startseite gut, öffnet der Benutzer die App regelmäßig, um neue und aktuelle Inhalte anzuzeigen. Außerdem regt eine gute Startseite den Benutzer an, die App zu durchstöbern und sich mit ihr zu beschäftigen. Sie ist ein zentraler Bestandteil, steht im Mittelpunkt und zeigt die Stärken der App.

Es ist wichtig, das Layout zu optimieren, damit Benutzern die Inhalte und Funktionen auf einfache Weise zur Verfügung stehen. Typischerweise navigieren Benutzer in Apps oder im Internet zunächst auf die Startseite, die den Standardbereich einer App anzeigt. Danach wählt der Benutzer selbst aus, von einer Navigations-Leiste oder einem Inhaltsverzeichnis zu einem bestimmten Bereich zu wechseln. Hier findet sich häufig das Problem, dass für eine weitere Erkundung nicht genügend Anreize vorhanden sind. Damit Personen sich entscheiden, auf eine Registerkarte zu klicken und zu einem neuen Bereich zu navigieren, müssen sie sich sicher sein, dass sie dort interessante oder hilfreiche Informationen finden. Wenn es also keine interessanten Bereiche gibt, wechseln sie zu einer anderen App. Beispielsweise verwendet die folgende Newsreader-App ein auf Registerkarten basierendes Design, in dem Personen in einem Bereich starten, sich dann aber bewusst zum Wechsel in andere Bereiche entscheiden müssen, die nur noch mit Namen versehen sind. Der Benutzer weiß nicht, ob diese vier anderen Bereiche interessant sind, bis er dorthin navigiert:

Registerkartenbasiertes Design einer Startseite

Wenn Sie stattdessen die App als Hub erstellen und die Schwenkfunktion hinzufügen, müssen Benutzer keine schwierigen Entscheidungen treffen, sondern sie sehen einfach, warum Inhalte oder Funktionen der App für sie interessant sind.

Hubbasiertes Design einer Startseite

Wenn wir die App so darstellen, dass Sie mit einfachen Mitteln entdeckt werden kann, geben wir Benutzern einen Grund zum Verweilen. Wir zeigen die Stärken unserer App in vollem Umfang.

Lassen Sie uns nun ein einfaches Hublayout mithilfe der Grid-Projektvorlage von Visual Studio erstellen (XAML, HTML). Auf der Startseite (groupedItemsPage) befinden sich Bereiche mit dazugehörigen Elementen:

Startseite der Grid-Projektvorlage von Visual Studio

Wir möchten, dass auf dieser Seite die Aussage über die Stärken unserer App deutlich erkennbar ist: Die Stärke meiner App in dieser Kategorie ist die Suche nach einem Restaurant, in das der Benutzer mit seinen Freunden heute Abend essen gehen kann. Zunächst muss jeder Bereich unseres Hubs eines der drei wichtigen Szenarien repräsentieren.Jedeswichtige Szenario muss vertreten sein (natürlich können sich mehrere Bereiche auf ein Szenario beziehen):

1. Heute Abend

Hier liegt die Aufmerksamkeit der Abendessenplanung mit Freunden auf heute Abend

2. Wunschliste von Freunden

Hier liegt die Aufmerksamkeit auf der Suche nach Restaurants, in denen meine Freunde essen möchten

3. Meine Wunschliste

Hier liegt die Aufmerksamkeit auf der Suche nach Restaurants, in denen ich essen möchte

4. Alle Restaurants

Hier liegt ebenso die Aufmerksamkeit auf der Suche nach Restaurants, in denen ich essen möchte

Hub mit Bereichen für „Heute Abend“, „Wunschliste von Freunden“, „Meine Wunschliste“, „Alle Restaurants“


Die Anordnung der Bereiche ist strategisch wichtig. An erster Stelle steht der Bereich „Heute Abend“. Es ist der wichtigste Bereich für das aktuelle Geschehen und ändert sich beim Öffnen der App mit hoher Wahrscheinlichkeit. Informationen über den heutigen Abend eignen sich gut für Live-Kacheln, denn Sie sind aktuell, persönlich und relevant. Wenn Personen auf Live-Kacheln der App-Startseite aktuelle Informationen des heutigen Abends sehen können, bedeutet diese Anordnung ebenso, dass nach dem Öffnen der App die Inhalte der Live-Kachel direkt auf der Hub-Seite angezeigt werden. Sie sollten Benutzer für das Öffnen von Apps „belohnen“, indem Sie neue und wichtige Informationen bereitstellen. Weitere Informationen über Live-Kacheln finden Sie im Beitrag Erstellen einer benutzerfreundlichen Kachel von Kevin Michael Woley.

Danach fügen wir die „Wunschliste von Freunden“ und „Meine Wunschliste“ hinzu. Es gibt zwei Gründe für diese Reihenfolge:

  • Das Interesse unserer App „Food with friends“ liegt auf „meinen Freunden“. Es ist das Differenzierungsmerkmal von „Food with friends“ und unterscheidet diese App von allen anderen.
  • Wie im Bereich „Heute Abend“ sind häufige Änderungen zu erwarten, da andere ihre Wunschlisten angeben oder aktualisieren können, wenn der Benutzer die App gerade nicht verwendet. Außerdem enthält dieser Bereich Informationen, die der Benutzer noch nicht kennt. Die eigene Wunschliste kennt der Benutzer und ist somit weniger interessant für ihn.

Zuletzt steht der Bereich „Alle Restaurants“. Wir erwarten, dass Benutzer diesen Bereich nur verwenden, wenn sie die eigene Wunschliste verwalten möchten. Denn entsprechend unserer Aussage über die Stärke der App möchten unsere Benutzer eine Entscheidung treffen, wohin sie heute Abend gehen möchten. Demnach sehen sie sich bereits vorhandene Wunschlisten an sowie aktuelle Vorschläge für heute Abend. Der Bereich „Alle Restaurants“ am Ende der Auflistung ist ein schöner Zusatz für die Benutzer und soll zugleich verdeutlichen, dass Sie die Anzahl der Bereiche unbegrenzt erweitern können, ohne dass andere Inhalte darunter leiden. Vielleicht haben Sie auch Bedenken, dass „Alle Restaurants“ zu weit entfernt liegen, aber keine Sorge. Semantischer Zoom ist für das schnelle Navigieren durch eine Liste genau richtig.

4. Gestalten der Bereiche

Der zentrale Punkt bei der Gestaltung eines Bereichs ist dessen Optimierung für das dazugehörige Szenario. Das Raster der Kacheln des gesamten Hubs muss nicht einheitlich sein! Hier können Sie Ihre ganze Kreativität ausleben, die Unterschiede zu anderen Apps demonstrieren und die Stärken Ihrer App hervorheben. Zudem müssen nicht alle Elemente eines Bereichs auf der Startseite angezeigt werden, der Benutzer könnte sich dadurch leicht überwältigt fühlen. Wir möchten stattdessen nur eine ausgewählte Anzahl an Elementen zeigen, die einerseits wichtig und zudem aktuell sind. Zum Beispiel zeigen wir in der Wunschliste von Freunden nur die besten Freunde sowie unter „Meine Wunschliste“ nur die zuletzt hinzugefügten Restaurants an.

Im ersten Bereich „Heute Abend“ geht es darum, zusammen mit Freunden zu entscheiden, an welchem Ort heute Abend gegessen wird. Weil dazu alle Beteiligten beitragen möchten, ist die beste Lösung eine Diskussion:

Startseite mit Bereich „Heute Abend“, der Unterhaltungen über Pläne zum Abendessen mit Freunden anzeigt

Der Bereich „Wunschliste von Freunden“ verrät mir alles über meine Freunde und ihre Wünsche, in diesem Bereich dreht sich alles um die Menschen!

Startseite mit Bereich „Wunschliste von Freunden“ mit mehreren Restaurantlisten von Freunden

Im Bereich „Meine Wunschliste“ stehen für mich interessante Restaurants im Mittelpunkt, es geht also um Restaurants:

Startseite mit Bereich „Meine Wunschliste“ und meiner Restaurantliste

Zuletzt umfasst „Alle Restaurants“ eine gigantische Sammlung an Restaurants. Hier präsentieren wir beliebte Restaurants sowie solche, die für unsere Benutzer von Interesse sind und präsentieren Kategorien für einfaches Browsen. Jetzt ist alles an seinem Platz, und wir können uns die vollständige Hub-Startseite der App ansehen:

Startseite mit Bereich „Alle Restaurants“ einschließlich Restaurantliste

Ein wichtiger Teil zur Differenzierung ist, die Stärken Ihres Produkt deutlich zu kennzeichnen. Dieses Thema verdient einen eigenen Beitrag, der später veröffentlicht wird. Dort beschäftigen wir uns intensiv mit Layout und Gestaltung, geben Tipps und verraten Techniken, mit denen Sie Ihr Produkt aufpolieren und gleichzeitig das Aussehen an die Plattform anpassen können, für die Sie es erstellt haben. Sehen wir uns heute nur ein einfaches Beispiel an:

„Food with friends“-Startseite einschließlich produkttypischen Farben und Hintergrundbild

5. Darstellen der weiteren App-Bereiche

Nach der Gestaltung der Startseite ist die Gestaltung der weiteren App-Bereiche kinderleicht.

Nicht alle Bereiche auf der Hub-Startseite waren vollständig, daher benötigen wir Seiten, die ausschließlich die Inhalte der einzelnen Bereiche anzeigen. „groupDetailPage“ in der Grid-Vorlage von Visual Studio wurde zu diesem Zweck entwickelt. Wir passen das Layout der ListView dieser Seite dem Inhaltstyp an.

Wunschliste von Freunden:

Seite „Wunschliste von Freunden“ mit vollständiger Freundesliste einschließlich Lieblingsrestaurants

Meine Wunschliste:

Seite „Meine Wunschliste“ mit vollständiger Liste meiner Lieblingsrestaurants

Alle Restaurants:

Vollständige Liste aller Restaurants gruppiert nach Art der Küche

Das Hub konzentriert sich auf zwei wichtige Komponenten: Restaurants und Menschen. Wir benötigen demnach zwei Varianten der Seite „Elementdetails“ (itemDetailPage in der Grid-Projektvorlage), die Informationen anzeigen, wenn Benutzer darauf tippen oder klicken:

Die Seite einer Freundin mit Profilinformationen, Wunschliste und Rezensionen

Die Seite eines Restaurants mit Öffnungszeiten, Standort, Kontaktinformationen, Fotos und Rezensionen anderer Benutzer

Beim Gestalten jeder einzelnen Seite ist es wichtig, sich weiterhin Gedanken über die Stärken dieser Seite zu machen und wie die Seite dazu beiträgt, Ihre App in dieser Aussage zu unterstützen.

6. Navigieren der Benutzeroberfläche

Nun haben wir die unterschiedlichen Seiten erstellt, jetzt müssen wir dem Benutzer nur noch die Möglichkeit bieten, sich durch unsere App zu bewegen. Die Navigation der Benutzeroberfläche zählt wohl nicht zu den Stärken einer App. Wir können vorhandene und allgemein bekannte Navigationsmuster anwenden, damit Benutzer schnell zu App-Inhalten und Funktionen navigieren können. In diesem Beispiel verwenden wir die Grid-Projektvorlage mit hierarchischem System. Wenn Sie auf eine Kachel tippen, wird die Detailseite des Elements angezeigt. Das Tippen auf eine Hub-Bereichsüberschrift führt zum entsprechenden Bereich. Wenn Sie zurück tippen, wird die vorangegangene Seite aufgerufen (und nicht die übergeordnete Seite). Vieles hiervon ist in der Grid-Projektvorlage integriert. Wir werden uns in einem weiteren Beitrag intensiver mit der Implementierung sowie mit Tipps für eine erweiterte In-App-Navigation beschäftigen.

Ein Screenshot mit der Hierarchie der App-Inhalte

Zusammenfassung

Der erste und wichtigste Schritt zum Erstellen einer großartigen App im Metro-Stil ist, die Stärken Ihrer App in Bezug auf andere Apps dieser Kategorie herauszufinden bzw. zu definieren, damit diese sich von der Masse hervorhebt. Wie wir gesehen haben, ist die Identifikation und Konzentration auf die Differenzierungsmerkmale wichtig für viele grundlegenden Entscheidungen, die sie bezüglich Struktur, Startseite, Seitenlayout und Navigation treffen. Wir werden in künftigen Beiträgen darauf aufbauen und Ihnen zeigen, wie Sie die Windows 8-Plattform verwenden, um Ihre App zum Spitzenreiter seiner Kategorie machen. Einen Überblick über einige Ressourcen, die in diesem Beitrag besprochen werden, finden Sie unter http://design.windows.com.

– Bonny Lau, Senior Program Manager, Windows

  • Loading...
Leave a Comment
  • Please add 4 and 7 and type the answer here:
  • Post