Gestalten der Windows Store-Benutzererfahrung

Gestalten der Windows Store-Benutzererfahrung

Rate This
  • Comments 0

Bei einigen Veranstaltungen in jüngster Zeit hatten wir die Gelegenheit, verschiedene Aspekte des Stores vorzuführen – zum Beispiel bei unserer //build/-Konferenz, im Rahmen der Store Preview-Veranstaltung und gerade letzte Woche noch bei der CES. Wir denken, es ist eine gute Idee, an dieser Stelle die komplette Store-Benutzererfahrung in Bezug auf das Durchstöbern und Durchsuchen des Katalogs sowie das Aktualisieren von Apps und das App-Roaming in Windows 8 etwas näher zu erläutern. Jonathan Wang, ein Programm-Manager für unser Store-Clientteam, beschreibt die Elemente des Stores sowie unsere Überlegungen hinsichtlich des Designs.

-- Antoine


Bei der Konzeption des Windows Stores ließen wir uns von einigen Designzielen und -prinzipien leiten, die die endgültige Benutzeroberfläche und Funktionalität maßgeblich prägten. Der entscheidende Grundgedanke bei unserem Store-Design war die Möglichkeit, Apps schnell und problemlos finden und erwerben zu können. Auch wenn dies zunächst ein naheliegendes Ziel bei einem Katalog oder Marktplatz zu sein scheint, ist es in der Tat eine ziemliche Herausforderung, wenn die Größe und Vielfalt des Katalogs so schnell zunimmt, wie wir das auch im Falle des Windows Stores erwarten.

In diesem Beitrag gebe ich Ihnen einen Überblick über die wichtigsten Bestandteile der Store-Anatomie: die Startseite, Seiten mit redaktionellen Themen, datengenerierte Listen, App-Auflistungsseiten sowie Suchen, Durchsuchen, Installieren und Aktualisieren. Ich werde näher auf den Zusammenhang zwischen diesen Benutzeroberflächen und wie wir anhand der Designsprache im Windows-Metro-Stil unser Ziel einer effizienten App-Suche umgesetzt haben.

Store-Anatomiediagramm mit Store-Startseite, die Verknüpfungen zu den Seiten mit dem redaktionellen Thema, der App-Beschreibung und der Kategorie enthält. Die Seite mit dem redaktionellen Thema und die Kategorieseite verweisen ebenfalls auf die Seite mit der App-Beschreibung. Anatomie des Windows Stores

Eine Startseite mit optimalen Entdeckungsmöglichkeiten

Im vorherigen Blogeintrag wurde erwähnt, dass einer unserer Grundgedanken bei der Gestaltung des Stores dessen Eignung zum Stöbern, zum Entdecken war. Windows 8 wurde mit der Vorgabe entwickelt, dass Inhalte im Vordergrund stehen und möglichst wenig „Zierrat“ davon ablenken sollte. Die Store-Startseite ist einfach und klar aufgebaut und richtet den Fokus auf die Apps, sodass der Besucher schnell deren Persönlichkeit erkennt und was sie als Marke auszeichnet.

Store/Kurzinfos-Kategorie mit Evernote-, Cut the Rope-, eBay- und Paintplay-Apps sowie redaktionellen Inhalten zu App-Empfehlungen; Spiele-Kategorie enthält redaktionelle Inhalte zu Spieleempfehlungen plus 2 weitere Spiele-Apps
Windows Store-Startseite

Auf der Store-Startseite werden ständig neue spannende Inhalte veröffentlicht. Aufgrund der häufig wechselnden Angebote können Kunden im Store immer etwas Interessantes entdecken und haben deshalb stets einen Anreiz für einen Besuch. Die Startseite integriert Themeninhalte mit Navigationsinhalten (wie Kategorien und Listen mit angebotenen Apps). Die Forschungsergebnisse unserer Testlabore und Einzelbefragungen von Kunden haben ergeben, dass Benutzer eher einfach in den heutigen App-Stores nach dem suchen, was Sie benötigen. Die meisten anderen Möglichkeiten der Suche oder des Stöberns interessieren sie nicht. Deshalb haben wir eine Startseite entwickelt, die unsere Themeninhalte, datengesteuerten Listen und Kategorienauflistungen auf einer einzigen kohärenten und packenden Benutzeroberfläche integriert.

Die Navigation ist leicht und konsistent mit der Windows 8-Benutzeroberfläche im Metro-Stil, sodass sich Windows 8-Benutzer schnell und einfach im Store zurecht finden. Im oberen Bereich des Bildschirms werden Store-Kategorien angezeigt. Dabei werden in jeder Kategorie faszinierende Apps präsentiert. Zum Durchsuchen muss der Kunde einfach den Bildschirm nach links oder rechts verschieben – mit nur einer Fingerbewegung kann er neue interessante Apps aus allen Kategorien und die gesamte Bandbreite des Stores erkunden. Wenn sich Kunden die Apps einer bestimmten Kategorie ansehen möchten, müssen sie lediglich einmal auf den Namen der Kategorie tippen.

Lange horizontale Ansicht des Stores mit Kategorien: Kurzinfos, Spiele, Unterhaltung, Fotos, Musik & Videos, Bücher & Referenzen, News & Wetter, Lifestyle Führen Sie einen horizontalen Bildlauf durch, um weitere Kategorien anzuzeigen (klicken, um ein größeres Bild anzuzeigen).

In vielen der neuen Store-Kategorien wird eine Reihe Apps präsentiert, deren inhaltliche Auswahl sich nach einer Vielzahl von Faktoren richtet, einschließlich der Tatsache, ob diese besonders gut auf die Plattform passen oder besonders gut die Designprinzipien des Metro-Stils zum Ausdruck bringen. Wenn mehrere Apps durch ein bestimmtes thematisches Element verknüpft sind, erstellen wir eine spezielle „Themenseite“, auf die auf der Startseite verwiesen wird, um diese Apps vorzustellen. Die Kunden können außerdem Listen mit den beliebtesten Apps sowie mit den Apps, die wir für die qualitativ besten halten, anzeigen. Wir präsentieren Apps von aufstrebenden, talentierten Entwicklern, aber auch von Entwicklern, die bereits ein beachtliches Portfolio an ausgezeichneten Apps vorweisen können. Und schließlich geben wir App-Empfehlungen auf Grundlage des bisherigen Kaufverlaufs des Kunden.

Um ein Gefühl für unsere Kategorien und einen besseren Einblick in die in unserem Store erhältlichen Typen von Apps zu bekommen, können Sie durch Zusammendrücken der Finger herauszoomen und die ganze Bandbreite an Kategorien anzeigen bzw. durch Antippen eine bestimmte Kategorie öffnen. Auch auf dem Startbildschirm können Sie mit dieser Fingerbewegung navigieren. Wir nennen diese Bewegung „semantischen Zoom“, da Sie durch Zoomen (Vergrößern oder Verkleinern) steuern können, welche Informationen auf der Seite angezeigt werden. In der herausgezoomten Ansicht des Stores werden alle App-Kategorien auf einmal präsentiert, sodass die Kunden effizient navigieren können, auch wenn der Katalog umfangreich ist und viele verschiedene Kategorien aufweist. Das Design gewährleistet auch bei einer zunehmender Erweiterung des Katalogs und der Kategorien stets eine effiziente Navigation. Wir haben die Startseite mithilfe eines normalen ListView-Steuerelements erstellt, in Kombination mit dem semantischen Zoomsteuerelement, das Entwicklern zur Verfügung steht, die Apps im Metro-Stil mithilfe von HTML und JavaScript entwickeln.

Bild der Store-Startseite, einschließlich Kurzinfos, Spiele, Unterhaltung, Fotos und Musik & Videos Herauszoomen, um weitere Kategorien anzuzeigen

Bei einer großen Anzahl von Kategorien wird die flache Navigationsstruktur des Stores durch Zoomen deutlich übersichtlicher – eines der Kernarchitekturelemente des Designs der Benutzeroberfläche im Metro-Stil von Windows 8.

Suchen und Stöbern im Store

Die Suchfunktion ist mittlerweile eine unglaublich wichtige Komponente der Benutzeroberfläche und momentan eine der gebräuchlichsten Methoden eines Kunden, in Online-Stores nach Dingen zu stöbern, die er kaufen möchte. Im Windows Store ist der Vertrag für "Suche" implementiert, durch den Sie in der App suchen können, die Sie gerade nutzen. Dazu müssen Sie nur auf das Suchelement tippen. Dies erleichtert die Suche nach neuen Apps, wenn die Store-App bereits geöffnet ist. Außerdem haben wir auch die Suche im Store erleichtert, ohne dass dieser gerade geöffnet sein muss.

Ansicht der Wetter-App, mit Suchfenster rechts und „sudoku“ als aktuellem Suchbegriff für den Store.Suchen nach Apps von überall aus in Windows

Wenn Ihnen plötzlich eine bestimmte App in den Sinn kommt, während Sie gerade im Internet surfen oder eine andere App verwenden, müssen Sie nur auf das Suchelement tippen, Ihren Suchbegriff eingeben und den Store auswählen, um die Suchergebnisse für Ihre Anfrage anzuzeigen.

Sie nutzen die gleiche Benutzeroberfläche zum Suchen, während Sie im Store sind, damit Sie die gleichen Funktionen auf konsistente Art und Weise verwenden können.

Store-Homepage mit Suchfenster rechts und „intern apps“ als Suchbegriff für den Store
Verwenden der Suche im Store

Sobald Sie mit der Eingabe beginnen, werden Ihnen sofort Textvorschläge im Suchfenster angezeigt. Dies ist für viele eine nützliche Hilfefunktion, ist aber besonders bei Verwendung einer Bildschirmtastatur eine sinnvolle Sache. Ist einer der Textvorschläge eine App, erscheint diese als „Empfehlung“. Wenn Sie darauf tippen, werden Sie direkt zur App-Auflistungsseite weitergeleitet, ohne vorher zur Seite mit den Sucherergebnissen wechseln zu müssen. So gelangt der Kunde in möglichst wenigen Schritten zur App-Auflistungsseite. Selbst in der Suchempfehlung sorgt das Markensymbol der App für einen sofortigen Wiedererkennungseffekt.

Wenn Sie nicht gerade eine bestimmte App im Sinn haben und eine eher allgemeinere Suchanfrage eingeben, werden Sie zur Seite mit den Suchergebnissen weitergeleitet.

Ergebnisse für "intern apps" zeigen 10 Apps an Seite mit den Suchergebnissen

Von dieser Seite aus können Sie durch die Ergebnisse blättern. Diese sind zunächst nach Relevanz geordnet. Sie können diese auch nach anderen Attributen wie Preis, höchste durchschnittliche Benutzerbewertung und Veröffentlichungsdatum sortieren. Um die Zahl der Ergebnisse zu reduzieren, können Sie diese nach Kategorie oder Preis filtern.

Wir verwenden das gleiche Designmodell für unsere Kategorieansicht. Auch hier wird die Benutzererfahrung auf die übersichtlichsten, effektivsten Konzepte beschränkt, um so das Stöbern und Suchen zu erleichtern . Tippen Sie auf eine Kategorieüberschrift auf der Startseite, um eine der Kategorieseiten aufzurufen. In dieser Ansicht können Sie gemütlich durch das gesamte Angebot des Katalogs stöbern. Wir haben die Kategorieseite so konzipiert, dass sie der Suchergebnisseite sehr ähnelt, d. h., sie bietet die gleichen umfangreichen Filter- und Sortieroptionen. Und wie auf der Startseite und der Benutzeroberfläche der Suchfunktion ist auch hier die Navigation innerhalb der Kategorien sehr, sehr einfach. Es gibt keine Seiten, Sie zeigen weitere Apps einfach per Bildlauf an.

Spiele-Kategorie, mit 28 Apps, sowie Filter: Alle Preise, Kostenlos, Kostenlos und Testversion sowie Kostenpflichtig.
Kategorieseite

App-Auflistungsseiten

Die App-Listen sind der Ort, an dem Kunden alles das erfahren, was sie über eine App wissen müssen (und an dem die Entwickler erklären können, was ihre App auszeichnet und für den Kunden unverzichtbar macht).

[Cut the Rope/Store > Games > Puzzle / ***** Average rating (1023)] (Cut the Rope/Store > Spiele > Rätsel/***** Durchschnittliche Bewertung (1023))/1,49 USD/Schaltflächen: [Buy / Try / Image] (Kaufen/Testen/Bild) und Beschreibung der App
Auf der App-Auflistungsseite wird die App als Marke ins rechte Licht gerückt

Um zu gewährleisten, dass die App ansprechend präsentiert wird, werden auf der App-Auflistungsseite die visuellen Elemente aus dem App-Paket verwendet, damit die App in Farbe und Logo als Marke gekennzeichnet ist. Zusätzlich zur App-Beschreibung und Liste der Features können Sie auch die durchschnittliche Benutzerbewertung und von Benutzern eingesendete Besprechungen in Bezug auf die Qualität der App bzw. deren Eignung für bestimmte Zwecke nutzen. Sie können durch Screenshots blättern, die mithilfe des FlipView Object-Steuerelements implementiert wurden, das Entwicklern ebenfalls zur Verfügung steht. Screenshots werden besonders auffällig platziert, da bei vielen Benutzern das visuelle Element am aussagekräftigsten ist, wenn es darum geht, die App zu erfassen. Die App-Auflistung zeigt Ihnen auch die Alterseinstufung sowie eine Liste der erforderlichen App-Berechtigungen an, z. b. Zugriff auf einen Ortungssensor oder Ihre Dokumentbibliothek.

Desktop-Apps, die unsere Desktop App Certification erhalten, können ebenfalls über App-Auflistungsseiten verfüge. Diese sind über den Store durch Suchern und Blättern aufrufbar und enthalten eine Verknüpfung zur Website des App-Entwicklers, damit Kunden die App dort erwerben können.

Contoso/App vom Entwickler erwerben/Zur Website des Entwicklers wechseln (Link) / Übersicht über App
Desktop-App-Auflistungsseite

Installieren von Apps

Das Installieren von Apps für Windows 8 ist einfach, schnell und zuverlässig.

Wenn Sie sich beim Windows Store angemeldet haben, müssen Sie nur einmal auf die App-Auflistungsseite tippen und schon können Sie kostenlose Apps und Testversionen herunterladen. So einfach ist das. Bei kostenpflichtigen Apps werden Sie zur Eingabe Ihres Kennworts aufgefordert, um den Kauf zu bestätigen. Wenn Sie nicht bei jedem Einkauf Ihr Kennwort eingeben möchten, können Sie diesen Sicherheitsschritt in einer entsprechenden Einstellung deaktivieren. Kunden mit Kindern werden diese kleine Barriere, die vor versehentlichen Käufen schützt, aber sicher zu schätzen wissen.

Da wir das Entdecken und Finden neuer Apps unbedingt so leicht wie möglich machen möchten, haben wir uns bewusst dafür entschieden, dass der Kunde nach dem Start der Installation einer App keine Unterbrechung in Kauf nehmen muss, die er als ablenkend oder störend empfindet. Wir sind der Meinung, der Kunde sollte nicht auf eine Statusleiste starren und die Sekunden bis zum Ende eines Vorgangs mitzählen müssen. Auf der App-Auflistungsseite für die gerade erworbene App zu verweilen bedeutet ebenfalls, dass Sie in dieser Zeit nichts tun können und abwarten müssen. Deshalb kehren Sie im Windows Store nun sofort nach Beginn der Installation automatisch zur vorher angezeigten Seite zurück, damit Sie Ihre Entdeckungstour fortsetzen können; in vielen Fällen ist diese vorher angezeigte Seite die Startseite oder eine Kategorieseite oder eine andere Liste mit tollen Apps, die Sie ausprobieren können. Unser Forschungslabor hat bestätigt, dass dies der Wunsch des Kunden ist: er möchte nach dem Erwerb einer App ohne große Unterbrechung weiterstöbern und suchen.

Anhand einer Statusanzeige können Sie weiterhin sehen, wie weit eine Installation fortgeschritten ist. Außerdem wird die Kachel für die App, die Sie gerade installieren, zum Startbildschirm hinzugefügt. Und wenn Sie unbedingt wissen möchten, wo im Installationsvorgang Sie gerade sind, können Sie auf die Statusanzeige tippen, um Informationen dazu anzuzeigen.

Installationsdetailsseite mit Liste von vier Apps, für die jeweils eine Statusleiste und „Herunterladen...“ angezeigt wird
Anzeige der Apps, die gerade installiert werden

Nach Abschluss der Installation werden Sie davon benachrichtigt, dass die App jetzt verwendet werden kann. Durch Tippen auf diese Benachrichtigung wird die App gestartet. Sie ist also sofort und ohne weitere Benutzeraktionen einsatzbereit. Die neue App-Kachel wird immer am Ende des Startbildschirms angezeigt. Von dort können Sie sie problemlos an eine andere Stelle verschieben. Wie die Apps auf Ihrem Startbildschirm angeordnet sind, ist ganz allein Ihre Entscheidung.

Aktualisieren von Apps

Auch das Aktualisieren von Apps haben wir so eingerichtet, dass es ein einfacher und verlässlicher Vorgang ist. Einmal am Tag wird überprüft, ob für eine der installierten Apps ein Update bereitsteht. Die Kachel für den Store zeigt dann die Anzahl der verfügbaren Updates an, damit Sie deutlich sehen, dass Sie im Store etwas finden werden, wenn Sie nachsehen.

Auf der Seite mit den Updates müssen Sie dann nur auf eine Schaltfläche tippen, um all Ihre Apps zu aktualisieren. Es werden automatisch alle Updates ausgewählt. Wir möchten den Kunden dabei unterstützen, die für seine Apps verfügbaren Updates gleich nach deren Bereitstellung durch den Entwickler abzurufen.

App-Updates/8-Updates verfügbar Ihre App-Updates lassen sich schnell und einfach installieren

Updates werden sehr schnell installiert – wir laden diese Updates gelegentlich im Hintergrund herunter (ohne sie zu installieren), wenn der Computer im Leerlauf ist und gewährleistet ist, dass Sie sich nicht in einem mobilen Breitbandnetzwerk befinden, bei dem für die Nutzung von Daten Gebühren anfallen. Wenn Sie nicht möchten, dass Updates automatisch heruntergeladen werden, können Sie dies in den Store-Einstellungen deaktivieren. Nach dem Start des Aktualisierungsvorgangs kehren Sie automatisch zur vorherigen Seite im Store zurück, damit Sie Ihre weiter neue, interessante Inhalten suchen und durchstöbern können, solange die Updates installiert werden.

Verwendung von Apps auf mehreren Computern

Da viele Kunden inzwischen mehr als einen PC besitzen und ihre Apps natürlich gerne auch allen Geräten nutzen möchten, haben wir die Möglichkeit eingerichtet, eine App auf insgesamt bis zu fünf Windows 8-PCs nutzen zu können. Bei jeder Installation einer App auf einem neuen Gerät wird dieses zur Liste der Geräte hinzugefügt, auf denen die App ausgeführt werden darf. Beim sechsten Gerät werden Sie dazu aufgefordert, eines Ihrer Geräte aus der Liste zu entfernen, damit auf dem aktuellen Gerät Apps installiert werden können.

Anzeige Ihrer Apps/9 Apps Sehen Sie all Ihre Apps, und installieren Sie diese erneut

Sie haben außerdem die Möglichkeit, schnell nach den Apps zu filtern, die auf einem bestimmten Gerät installiert sind. Dadurch können Sie die Apps, die auf einem Gerät genutzt werden, problemlos auf Ihren anderen Geräten installieren. Wenn für diese Apps Roaming implementiert ist und Sie über ein verbundenen Konto verfügen (wenn Sie bei Windows 8 mit einer Windows Live ID angemeldet sind), werden sogar die Einstellungen und der Status der einzelnen Apps ebenfalls über mehrere Geräte hinweg beibehalten.

Die richtige Balance

Bei der Konzeption des Windows Stores haben wir versucht, die richtige Balance zu finden zwischen einem Design, das für die Suche nach Apps optimiert ist, bei der eher spontan durch aufbereitete Inhalte gestöbert wird, und einem, bei dem die Kunden zielgerichtet nach Apps suchen und diese schnell finden möchten. Wir bemühen uns sehr, den Kunden für eine App einzunehmen, indem wir diese durch Symbole und Farben als „Marke“ in der App-Auflistung und den Apps selbst hervorheben. Das Entdecken, Installieren und Aktualisieren von Apps ist so konzipiert, dass es vom Kunden als einfach und schnell empfunden wird. Da das Entdecken von Apps, das Stöbern durch das App-Angebot nun dem Kunden um ein Vielfaches einfacher gemacht wird, halten wir den neuen Windows Store für die bislang größte Chance für Entwickler, ihre Apps zu präsentieren.

Jonathan J. Wang


Laden Sie dieses Video herunter, und spielen Sie es in einem geeigneten Media-Player ab:
MP4 in hoher Qualität | MP4 in niedriger Qualität

  • Loading...
Leave a Comment
  • Please add 5 and 6 and type the answer here:
  • Post