Entwerfen der UX von Hilo

Entwerfen der UX von Hilo (Windows Store-Apps mit C++ und XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Aus: Umfassende Entwicklung einer Windows Store-App mit C++ und XAML: Hilo

Leitfaden-Logo

Vorherige Seite | Nächste Seite

Im Dokument Planen von Windows Store-Apps werden Richtlinien für den Entwurf empfohlen. Hier erläutern wir das Entwerfen der UX für die Hilo-C++-Beispiel-App und die Windows 8-Features, die wir als Teil der App verwenden. Es empfiehlt sich, vor dem Lesen dieses Dokuments den UX-Richtlinien für Windows Store Apps zu lesen.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

Anweisungen zu dem heruntergeladenen Code finden Sie unter Erste Schritte mit Hilo.

Die Planung erfolgte iterativ. Wir führten ein Brainstorming zu der gewünschten Benutzererfahrung durch, legten die Ergebnisse UX-Designern und Kunden vor und berücksichtigten ihr Feedback in unserer Planung. Während des gesamten Entwicklungsprozesses hielten wir regelmäßig Rücksprache mit unseren Beratern, um sicherzustellen, dass wir nicht von unseren ursprünglichen Zielen abkamen. Beispielsweise erhielten wir frühzeitig Feedback, um die Verwendung von C++ AMP (C++ Accelerated Massive Parallelism) in Hilo zu zeigen. Wir verfügten bereits über Code, der einen Cartooneffect auf ein Bild anwendet, daher fügten wir dieses Feature hinzu. (Weitere Informationen finden Sie unter Asynchrone Programmierung.)

Um unser Gesamtziel, das Veranschaulichen der Entwicklung einer Windows Store-App mit den neuesten Technologien, zu erreichen, fügten wir nur Features hinzu, mit denen wir spezifische Aspekte beim Erstellen von Windows Store-Apps zeigen konnten. Beispielsweise wird die App auf einer Hubseite statt direkt auf der Abbildbrowserseite gestartet. Wir erwogen, der Hubseite zusätzliche Abschnitte hinzuzufügen, auf denen Bilder auf unterschiedliche Weise angezeigt werden können (z. B. die markierten Favoriten). Wir fanden jedoch, dass dies von den Kernfeatures der App ablenken würde. Wir entwarfen Hilo so, dass Sie die Funktionen der App erweitern können.

Sie erfahren Folgendes:

  • Wie wir die besonderen Stärken der App mit der App-Steuerung verknüpft haben.
  • Wie Storyboards und Prototypen den Entwurf erleichtern.
  • Welche Windows 8-Features beim Planen der App erwogen werden sollten.

Betrifft

  • Windows-Runtime für Windows 8
  • XAML

Festlegen der UX-Ziele

Hilo ist eine Foto-App, daher wollten wir Funktionen auswählen, die es Benutzern ermöglichen, ihre Erinnerungen nachzuerleben.

Brainstorming zur Benutzererfahrung

Unser erster Schritt war ein Brainstorming zu den Aspekten einer Foto-App, die für eine hervorragende UX unbedingt erforderlich sind, um den gesamten Entwurf an diesen Features auszurichten. Hier sind einige der im Brainstorming genannten Features:

  • Durchsuchen von Fotos
  • Drehen und Zuschneiden von Fotos
  • Reduzierung von roten Augen und weitere Bildbearbeitungsfunktionen
  • Markieren von Fotos mit Tags und Kategorisieren von Fotos
  • Synchronisieren von Fotos zwischen Geräten
  • Erstellen einer Fotocollage
  • Erstellen einer Diaschau
  • Teilen von Fotos im Web

Was sind die besonderen Stärken von Hilo?

In Planen von Windows Store-Apps wird empfohlen, die besonderen Stärken der App zu definieren und diese Definition als Richtschnur für die UX-Planung zu verwenden. Dies ist unsere Definition der besonderen Stärken von Hilo:

Hilo hilft Menschen, ihre Erinnerungen nachzuerleben.

Es gibt viele Funktionen, die wir Hilo hätten hinzufügen können. Wir fanden jedoch, dass die Funktionen zum Durchsuchen, Anzeigen, Drehen und Zuschneiden von Fotos die Grundlagen zum Erstellen einer einfachen und doch vollständigen Foto-App am besten veranschaulichen. Wir konzentrierten uns auf diejenigen Funktionen, die kennzeichnend für eine Windows Store-App sind.

Bei nüchterner Betrachtung ist das eigentliche Ziel von Hilo nicht die Bereitstellung einer hervorragenden Foto-App, sondern das Veranschaulichen der wichtigsten Komponenten und Methoden, die eine hervorragende App ausmachen. Wir verwendeten jedoch unsere Definition der besonderen Stärken als Richtschnur für die Abstriche am Entwurf, die wir beim Erstellen der App vornahmen. Wir richteten unsere Aufmerksamkeit auf das Benutzerszenario und nicht auf einzelne Features, daher konnten wir uns besser auf die den Benutzern gebotenen Möglichkeiten statt auf die Funktionen der App konzentrieren.

[Oben]

Die Festlegung der App-Steuerung

Die App-Steuerung ist mit der Definition der besonderen Stärken verknüpft. Die App-Steuerung definiert, wie der Benutzer mit der App interagiert, um Aufgaben auszuführen. Windows Store-Apps sollten intuitiv zu verwenden sein und minimale Interaktionen erfordern. Für diesen Schritt verwendeten wir zwei allgemeine Verfahren: das Erstellen von Storyboards und Modellen.

Ein storyboard definiert die Steuerung einer App. Storyboards beschreiben das gewünschte Verhalten der App und nicht die Details der Benutzeroberfläche. Mit Storyboards lässt sich die Kluft zwischen dem Konzept der App und ihrer Implementierung leichter schließen, und sie sind i. d. R. schneller und kostengünstiger zu erstellen als ein Prototyp der App. Für Hilo waren Storyboards von entscheidender Bedeutung beim Definieren einer UX, die dem Benutzer eine natürliche Abfolge von Aktionen bietet. Dieses Verfahren stammt aus der Filmbranche und wird zunehmend für den UX-Entwurf eingesetzt.

Dies ist das Storyboard.

Ein Storyboard der Hilo-UX
Hinweis  Beim Erstellen des Storyboards erkannten wir, dass wir eine größere Übereinstimmung mit unserer Definition der besonderen Stärken erzielen, wenn die Bilder nach Monat statt in Ordnern gruppiert werden. Erinnerungen werden normalerweise mit bestimmten Zeitpunkten statt mit Ordnern auf einem Computer in Verbindung gebracht.
 

Ein Modell veranschaulicht ebenfalls die Steuerung der UX, weist jedoch eine größere Ähnlichkeit mit dem Aussehen des Endprodukts auf. Wir erstellten Modelle auf Grundlage unserer Storyboards und legten sie unseren Beratern vor, um Feedback zu erhalten. Die Modelle vermittelten außerdem jedem Entwickler einen Eindruck vom gewünschten Aussehen der App.

Dies ist ein Prototyp der Bildansichtsseite.

Ein Prototyp der UX zum Durchsuchen von Bildern
Tipp  Sie können während der Planung auch kleine Prototypen für eine Machbarkeitsprüfung erstellen. Ein Prototyp ist eine kleine App, die entweder nur die Steuerung der Benutzeroberfläche oder minimale Funktionen veranschaulicht. Sie können beispielsweise einen Prototyp erstellen, der nur die Navigation und Befehle enthält, jedoch keine Funktionen bereitstellt. Mit der Erstellung von Prototypen können Sie die UX per Software realisieren und so die von Ihnen entworfene Steuerung auf Geräten wie z. B. Tablets überprüfen. Sie können auch Prototypen erstellen, die Hauptaspekte der App veranschaulichen. So haben wir beispielsweise einen Prototyp erstellt, der ein Foto lädt und das Zuschneiden des Fotos per Fingereingabe oder mit der Maus ermöglicht. Mit Prototypen können Sie risikofrei Möglichkeiten erkunden, bevor Sie Änderungen an der Hauptcodebasis vornehmen. Zwar können Sie in der Planungsphase der App Prototypen erstellen, versuchen Sie jedoch, sich nicht zu sehr auf das Schreiben von Code zu konzentrieren. Entwerfen Sie die gewünschte UX, und implementieren Sie dann diesen Entwurf, wenn er fertig ist
 

[Oben]

Bestimmen der zu verwendenden Windows 8-Features

Kreativität ist zwar unerlässlich, die Benutzererfahrung muss jedoch mit anderen Windows Store-Apps konform sein. Wenn Sie dies beachten, lässt sich Ihre App intuitiv verwenden. Wir erkundeten in den MSDN-Codebeispielen für Entwickler sowie durch Gespräche mit anderen Entwicklern und die Erstellung von Prototypen die von der Windows-Plattform bereitgestellten Features. Durch Brainstorming versuchten wir die optimalen Plattformfeatures für die Steuerung der App zu bestimmen und einigten uns auf die folgenden Features:

Unterstützung unterschiedlicher Ansichten und Formfaktoren  Windows Store-Apps werden auf unterschiedlichen Geräten mit unterschiedlichen Ausrichtungen ausgeführt. Hilo sollte überall ausgeführt werden können, von einem kleinen Tabletgerät mit Quer- oder Hochformat bis zu einem großen Bildschirm. Das XAML-Grid-Steuerelement kann an unterschiedliche Displays (Bildschirmgrößen und Pixeldichte) und Ausrichtungen angepasst werden, da es die entsprechende Anzahl von Elementen auf Grundlage der verfügbaren Bildschirmfläche anzeigt und immer die gleichen Interaktionsprinzipien befolgt. Wir legten im Entwurf jeder Hilo-Seite fest, dass sie die Zustände "angedockt" und "gefüllt" unterstützt.

Kacheln  Eine lebendig und attraktiv wirkende App bietet eine hohe Benutzerbindung. Wir wählten die Live-Kachel als wichtige Komponente, damit Benutzern die App stets als lebendig und individuell angepasst erscheint.

Tipp  Popupbenachrichtigungen und sekundäre Kacheln sind ebenfalls hervorragende Methoden, das Interesse der Benutzer wach zu halten und eine hohe Benutzerbindung zu erreichen. In Hilo werden zwar keine Popupbenachrichtigungen und sekundären Kacheln verwendet, in Richtlinien und Prüfliste für sekundäre Kacheln und Richtlinien und Prüfliste für Popupbenachrichtigungen erhalten Sie jedoch weitere Informationen über diese Features.
 

Für Fingereingabe optimierte UI  Die Fingereingabe ist nicht lediglich eine Alternative zur Verwendung der Maus, da sie eine persönliche Verbindung zwischen dem Benutzer und der App herstellen kann. Wir wollten die Fingereingabe zu einem hervorragenden Teil der App machen. Beispielsweise können Benutzer per Fingereingabe ihre Fotos auf besonders einfache Weise zuschneiden und drehen. Wir erkannten außerdem, dass Benutzer mit semantischem Zoom besonders einfach in einer einzelnen Ansicht in einer großen Gruppe von Bildern navigieren können. Wenn Sie auf der Abbildbrowserseite die Ansicht verkleinern, ändert sich die Ansicht in eine kalenderbasierte Ansicht. Benutzer können dann schnell ihre Fotosammlung durchsuchen. Weitere Informationen zu unserer Implementierung der Features für die Fingereingabe finden Sie unter Verwenden der Fingereingabe.

[Oben]

Weitere mögliche Features

Die folgenden Features werden zwar in Hilo nicht verwendet, Sie können sie jedoch in Ihre Planung einbeziehen:

Verträge für Apps  In Verträgen wird festgelegt, wie die App mit anderen Apps und mit Windows interagiert. Beispielsweise ermöglicht der Freigabe-Vertrag Benutzern das Freigeben unterschiedlicher Elemente, z. B. Text, Bilder oder andere Medien, für Dienste und soziale Netzwerke. Weitere Informationen finden Sie unter App-Verträge und Erweiterungen.

Animationen  Animationen können die App interessanter machen oder visuelle Hinweise bieten. Weitere Informationen finden Sie unter Erzielen flüssiger Animationen.

[Oben]

Entscheiden, wie die App vermarktet werden soll

Obwohl wir die App Hilo nicht im Windows Store verkaufen, überlegten wir, wie sich mit der App am besten Geld verdienen lässt. Wir erkannten, dass erheblich mehr Kunden die App mit ihren hervorragenden Features nutzen können, wenn die App weltweit einsetzbar ist – unabhängig davon, ob Kunden die App bezahlen, bevor sie sie verwenden können, ob es eine Testversion gibt oder ob die App Anzeigen enthält. Für eine weltweit einsetzbare App müssen nicht nur lokalisierte Zeichenfolgen unterstützt werden, sondern es muss auch berücksichtigt werden, wie Software von Kunden aus unterschiedlichen Kulturen genutzt wird. (Beispielsweise die Richtung, in der die Kunden Text lesen.) Die weltweite Einsetzbarkeit wird in diesem Handbuch unter Vorbereiten der App für den weltweiten Markt ausführlicher erläutert.

Weitere Informationen zum kommerziellen Vermarkten Ihrer App finden Sie unter Planen der Monetarisierung.

[Oben]

Erzielen eines guten ersten Eindrucks

Beim Rückblick auf unsere Definition der besonderen Stärken – Hilo hilft Menschen, ihre Erinnerungen nachzuerleben – erkannten wir, dass das Verbinden der persönlichen Fotos der Benutzer mit der App ausschlaggebend dafür ist, dass Benutzer mit der App ihre Erinnerungen nacherleben können.

Als erster zu behandelnder und zu planender Bereich kamen uns eine dynamische Live-Kachel und Kachelbenachrichtigungen in den Sinn. Die Live-Kachel sollte mit zufällig ausgewählten neueren Bildern aktualisiert werden, damit die App einen guten Eindruck hinterlässt, wenn sie vom Benutzer geschlossen wird.

Der Begrüßungsbildschirm ist wichtig, da er den Charakter der App illustriert. Der Begrüßungsbildschirm soll zwar möglichst kurz angezeigt werden, jedoch dem Benutzer einen nachhaltigen Eindruck vom Erscheinungsbild der App vermitteln. Wir wählten für den Begrüßungsbildschirm ein Bild aus, das zum Branding von Hilo passt und sich gut in die gesamte UX einfügt.

Hinweis  Bildressourcen, einschließlich des Hilo-Logos, sind Platzhalter und nur zu Übungszwecken gedacht. Sie können nicht als Markenzeichen oder für andere kommerzielle Zwecke genutzt werden.
 

Wir wählten eine Hubseite als Startseite aus, da sie sofort den Hauptzweck der App, das Durchsuchen und Anzeigen von Fotos, erkennen lässt. Da die erste Benutzererfahrung einen großartigen Eindruck hinterlässt, erkunden die Benutzer garantiert die restlichen Funktionen der App.

[Oben]

Erstellen von Prototypen und Überprüfen des Entwurfs

Um unsere Planung zu verdichten und mit der tatsächlichen Entwicklung fortfahren zu können, legten wir Kunden unsere Drahtmodelle und Prototypen vor. Wir überprüften außerdem unsere Planung anhand des Index der Richtlinien für die UX für Windows Store-Apps, um sicherzustellen, dass wir die offiziellen Richtlinien einhalten. Diese frühzeitige Überprüfung hat es uns erspart, später zu viele Änderungen am Kernentwurf vornehmen zu müssen. Selbstverständlich kommt es während des Entwickelns der App vor, dass der Entwurf neu durchdacht werden muss. Jedoch empfiehlt es sich, zu einem frühen Zeitpunkt den Entwurf nach gründlicher Überprüfung festzulegen, damit Sie die nächste hervorragende App entwickeln können.

[Oben]

 

 

Anzeigen:
© 2017 Microsoft