Designfallstudie: Vom iPad zur Windows-Runtime-App

Applies to Windows and Windows Phone

iOS ist eine beliebte Plattform für das Erstellen von Apps, die mittels Fingereingabe viel Spaß und Abwechslung bieten. Mit der Einführung von Windows 8 steht Designern und Entwicklern eine neue Plattform zur Umsetzung ihrer kreativen Ideen zur Verfügung.

Mit dieser Fallstudie möchten wir Designern und Entwicklern, die mit iOS bereits vertraut sind, zeigen, wie sie ihre Apps mit den Designprinzipien für Windows Store-Apps neu konzipieren können. Wir zeigen Ihnen, wie Sie gebräuchliche Benutzeroberflächenmuster, die Sie vom iPad kennen, in Windows Store-Apps für Windows 8 umsetzen können. Dabei kommen uns die Erfahrungen zugute, die wir beim Erstellen der gleichen App für das iPad und für Windows 8 gemacht haben. Anhand gängiger Design- und Entwicklungsszenarien zeigen wir Ihnen, wie Sie die Windows 8-Plattform optimal nutzen und die Designprinzipien für Windows Store-Apps in Ihren Entwurf integrieren.

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 App

Bei der von uns entwickelten App handelt es sich um ein verbundenes Fotojournal, in dem Benutzer ihre Fotos und Videos online über eine Zeitachsenansicht anzeigen und verwalten können.

Die Windows Store-Fotojournal-App.

Die App wurde zunächst für das iPad konzipiert. Die nächste Abbildung zeigt den Aufbau der iPad-App. Schauen wir uns jetzt an, wie sich die einzelnen Komponenten in die Microsoft-Designsprache übertragen lassen.

Die Fotojournal-App für das iPad.

1. Layout und Navigation
2. Befehle und Aktionen
3. Verträge: Suche, Freigabe und andere
4. Fingereingabe
5. Ausrichtung und Ansichten
6. Benachrichtigungen

Layout und Navigation

Konzentrieren Sie sich auf Content, nicht auf Chrome.

Die Fotojournal-App sollte ideal geeignet sein, um Fotos eines Benutzers und die letzten sozialen Aktivitäten zu diesen Fotos zu zeigen. Beim Erstellen der Windows Store-App ging es uns zunächst darum, alle Elemente der Benutzeroberfläche zu entfernen, die für die zentralen Funktionen der App keine unmittelbare Bedeutung haben. So können beispielsweise die obere Navigationsleiste, die Steuerelemente für die Paginierung und die untere Steuerleiste entfernt werden. Im nächsten Abschnitt geht es darum, wie Benutzer mithilfe der App-Leiste nach Bedarf Chrome aufrufen können.

Benutzeroberflächenelemente in der iPad-App.Benutzeroberflächenelemente in der Windows Store-App.

iPad-App

A. Obere Navigationsleiste
B. App-Inhalt
C. Paginierungs-UI
D. Untere Registerkartenleiste

Windows Store-App

B. App-Inhalt und -Logo

 

Beispiel: Zeitskalaansicht auf der Startseite

Bei beiden Apps sind die Fotos auf der Startseite nach Monaten organisiert, doch werden die Monate unterschiedlich dargestellt. In der iPad-Version des Fotojournals ist die Seite so optimiert, dass alle zwölf Monate eines Jahres jeweils durch einen Fotostapel dargestellt werden. Bei der Gestaltung der Startseite für die Windows Store-App entschieden wir uns, mehr Bilder und soziale Inhalte auf die oberste Ebene zu bringen, um Benutzern mehr Kontext zu bieten. Wir entfernten die Bildrahmen und verwendet stattdessen Leerraum, um die Fotos, um die es in der App geht, visuell stärker in den Vordergrund zu rücken.

Monatsansicht in der iPad-App.Monatsansicht in der Windows Store-App.

iPad: Jeder Monat wird durch gestapelte Fotos dargestellt, wobei jeweils nur ein Foto zu sehen ist.

Windows Store-App: Jeder Monat wird durch mehrere Fotos, ihre Titel und die Anzahl von Kommentaren zu den Fotos dargestellt. Auf der Startseite können Benutzer weitere hervorgehobene Inhalte für einen Monat sehen.

 

Halten Sie die Navigationshierarchie flach

Für das Design der Windows Store-App verwendeten wir ein hierarchisches Navigationsmuster. Beim Überarbeiten der App gestalteten wir die Navigationshierarchie flacher. Dadurch sind mehr Inhalte über den Hub-Bildschirm der App zugänglich, und der Navigationsbedarf ist geringer.

Beispiel: Entfernen der unteren Registerkartenleiste

Ansichtszustände in der iPad-App.Kommentaransicht in der iPad-App.

iPad-App

A. Fotoansicht
B. Kommentaransicht

Die untere Registerkartenleiste mit zwei Pivots (Fotos und Kommentaren) ist stets auf dem Bildschirm sichtbar. Benutzer können die eine oder die andere Ansicht anzeigen.

Ansichtszustände in der Windows Store-App.

Windows Store-App

  • Wir haben Kommentar und Fotos in einer Ansicht kombiniert, um auf Registerkarten in der Benutzeroberfläche verzichten zu können.
  • Das Hub-Design der Startseite zeigt die wichtigsten Inhalte der einzelnen Abschnitte.
  • Benutzer können die vollständige Kommentarliste anzeigen, indem sie auf den Gruppenkopf Recent Comments (Aktuelle Kommentare) tippen.

 

Verwenden Sie die direkte Manipulation zum Navigieren

Durch die direkte Manipulation können Benutzer mit Inhalten interagieren und auf intuitive Weise zu verschiedenen Bereichen navigieren. Beim Design der Windows Store-App haben wir überall dort, wo es möglich war, die direkte Manipulation verwendet. Integrierte Steuerelemente wie der semantische Zoom machen die Navigation für Benutzer effizienter.

Navigation in der iPad-App.

Navigation in der iPad-App.

Navigieren in der Windows Store-App.

Verwendung des semantischen Zooms für die Auswahl von Datengruppen.

iPad-App

Tippen Sie auf dem Startbildschirm auf der oberen Navigationsleiste auf die Schaltfläche Years, um ein Popover aufzurufen und ein Jahr auszuwählen.

Windows Store-App

Führen Sie auf der Startseite zwei Finger zusammen, um die Ansicht zu verkleinern und alle Monate und Jahre anzuzeigen. Auf diese Weise können Benutzer schnell zu einem beliebigen Monat in einem beliebigen Jahr springen. Darüber hinaus können Benutzer in einer Übersicht sehen, für welche Monate Fotos vorliegen und für welche nicht (siehe blassroter Hintergrund). Benutzer können allein durch Manipulieren des Inhalts navigieren, ohne Chrome verwenden oder zu einer anderen Seite navigieren zu müssen.

 

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.

Befehle und Aktionen

Kontextaktionen bleiben in der App-Leiste

Auch bei der Überarbeitung von Kontextaktionen oder -befehlen in der App haben wir den Ansatz "Content vor Chrome" verfolgt und dafür gesorgt, dass alle Kontextaktionen über die App-Leiste verfügbar sind. Häufig genutzte Befehle befinden sich am rechten und linken Rand und sind somit leicht mit der Hand zu erreichen. Auf diese Weise ist 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 die Benutzer mit den Interaktionen der App-Leiste vertraut sind, wird so die Bedienerfreundlichkeit Ihrer App verbessert, und das gesamte System wirkt stimmig.

Beispiel: Löschen von Fotos

Löschen von Fotos in der iPad-App.Löschen von Fotos in der Windows Store-App.

iPad-App

  • App-Befehle werden oben auf dem Bildschirm angezeigt, wenn Benutzer den Auswahlmodus eingeben.

Windows Store-App

A. Die App-Leiste ist standardmäßig ausgeblendet, um Benutzern ein immersives Erlebnis zu bieten. Benutzer können von oben oder unten auf dem Bildschirm über die App-Leiste streifen und diese öffnen.
B. Wählt ein Benutzer Objekte auf der Seite aus, werden kontextspezifische Aktionen für die ausgewählten Elemente auf der Leiste angezeigt. Je nachdem, ob Objekte ausgewählt sind und wo sich der Benutzer in der App gerade befindet, wechseln die Aktionen. Standardbefehle werden im Allgemeinen auf der rechten Seite der App-Leiste platziert. Weniger gängige Befehle sollten auf der linken Seite der App-Leiste platziert werden.

 

Verträge

Verwenden des Vertrags für "Suche" zur Bereitstellung einer zentralen Suchfunktion

Anstatt für die Sucheingabe eine Oberfläche als festen Bestandteil der App-Canvas zu erstellen, haben wir einen Vertrag für "Suche" implementiert. Benutzer können die Suche durchgängig über die Charms aufrufen, und die Ergebnisse lassen sich in der App auf eine Weise darstellen, die dem jeweiligen Inhalt gerecht wird. Durch Verwenden des Vertrags für "Suche" können Benutzer den Charm "Suche" überall im System aufrufen, um nach Inhalt in Apps zu suchen, die den Vertrag unterstützen.

Beispiel: Suchen nach einem Foto in der Fotojournal-App

Suchvorgang in der iPad-App.Der Vertrag für "Suche" in der Windows Store-App.

iPad-App

  • Die Suche ist innerhalb der App auf dem Startbildschirm verfügbar.
  • Gibt ein Benutzer einen Suchbegriff ein, werden die Ergebnisse nach und nach angezeigt, und der Benutzer kann ein Ergebnis auswählen.

Windows Store-App

  • Der Benutzer öffnet die Charmleiste und greift auf den Charm "Suche" zu. Die Fotojournal-App ist standardmäßig ausgewählt, da sich der Benutzer aktuell in der App befindet.
  • Sobald der Benutzer mit der Eingabe beginnt, liefert die App Suchvorschläge. Auf diese Weise kann der Benutzer sofort erkennen, welche Begriffe zu Suchergebnissen führen. Sobald der Benutzer die Abfrage gesendet hat, kann er in der Ansicht der Suchergebnisse das gewünschte Ergebnis auswählen.

 

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

Dieses Beispiel zeigt die Suche nach einem bestimmten Begriff in verschiedenen Apps über die Auswahl einer neuen App im Suchbereich. Dank dieser Funktion können Benutzer jederzeit in den verschiedensten Apps nach beliebigen Inhalten suchen.

Suche außerhalb der Fotojournal-App.

Windows Store-App

Ein Besucher sucht in der App Tweet@Rama nach dem Begriff "Barcelona" und möchte im Fotojournal Fotos aus Barcelona betrachten. Das Fotojournal ist jetzt Anbieter für die Suchergebnisse. Die App wird automatisch gestartet und zeigt die Suchergebnisse an. Der Benutzer muss die Fotojournal-App nicht erst starten, um dann die Suche durchzuführen.

 

Verwenden Sie den Vertrag für "Suche" in verschiedenen Apps, um mehr Ziele und Menschen zu erreichen, die Ihnen wichtig sind

Die Integration sozialer Netzwerke ist zentraler Bestandteil der meisten Apps. Beim Entwerfen von iPad-Apps entscheiden meist die Designer und Entwickler, welche sozialen Netzwerke die App unterstützt (z. B. Twitter oder Facebook). Die Entwickler müssen diese Dienste dann einzeln integrieren oder eines der verfügbaren Frameworks verwenden. Kommt es auf Seiten dieser Freigabedienste zu API-Änderungen, müssen Entwickler ihren Code für den Freigabedienst entsprechend aktualisieren.

Für die Übertragung der Freigabefunktion in die Windows Store-App haben wir den Vertrag für "Freigabe" des Systems verwendet. Dieser Vertrag vereinfacht Design und Entwicklung, da nicht zu jedem Dienst, den der Benutzer möglicherweise verwenden möchte, eine Verbindung hergestellt werden muss. Benutzer können ihre Inhalte nicht nur in sozialen Netzwerken, sondern auch in anderen Diensten speichern – z. B. in Notizen-Apps wie Notespace oder EverNote. Ein wenig Code reicht, um unsere App mit allen Windows Store-Apps zu verbinden, die den Vertrag für "Freigabe" implementiert haben. Es ist nicht erforderlich, sich mit mit API-Änderungen bei externen Websites sozialer Netzwerke oder Webdiensten herumzuschlagen. Benutzer können ihre Inhalte stets durchgängig von einem Ort aus freigeben, indem sie den Freigabebereich über die Charms öffnen.

Beispiel: Freigeben eines Fotos in der Fotojournal-App für eine andere App

Freigeben eines Fotos in der iPad-App.

iPad-App

Um auf dem iPad ein Foto aus der Fotojournal-App freizugeben, tippt der Benutzer zunächst auf der oberen Navigationsleiste auf die Aktionsschaltfläche, um sich dann für die Freigabe auf Facebook zu entscheiden. Der Entwickler muss zusätzliche Arbeit leisten und weitere Freigabeschaltflächen hinzufügen, wenn er später weitere soziale Netzwerkdienste hinzufügen möchte.

Der Workflow für die Freigabe in der Windows Store-App
Auswählen eines Freigabeziels in der Windows Store-App

Windows Store-App

  • Benutzer können Optionen für die Freigabe stets an einem Ort finden, unabhängig davon, welche App sie gerade verwenden.
  • Alle installierten Apps, die als Freigabeziel angegeben sind, werden in der App-Liste im Freigabebereich angezeigt. So sind Socialite, Tweet@Rama, Notespace, PaintPlay alle als Freigabeziele aufgeführt.
  • Benutzer können viele verschiedene Arten von Inhalt teilen. Sie können beispielsweise Links oder Fotos freigeben oder Infos in einer App für Notizen speichern.
  • Die am häufigsten verwendeten Freigabeziele werden oben in der Liste angezeigt, damit Benutzer diese Aufgaben schneller durchführen können.

 

Wir haben unsere Fotojournal-App jedoch nicht nur als Freigabequelle, sondern auch als Freigabeziel entworfen. Benutzer können Fotos aus anderen Apps mühelos an ihre Fotodatenströme im Fotojournal senden. Diese Verbindung wird ebenfalls durch den Vertrag für "Freigabe" ermöglicht. Weitere Infos dazu, welche Apps besonders gute Freigabeziele abgeben, finden Sie unter Richtlinien und Prüfliste zum Freigeben von Inhalten.

Beispiel: Freigeben von Fotos aus einer anderen App für die Fotojournal-App – Freigabeziel (nur in Windows Store-Apps verfügbar)

In diesem Beispiel betrachtet ein Benutzer in einer anderen Foto-App Fotos von einer Mexikoreise. Er möchte die Fotos aus dem Album an die eigene Sammlung in der Fotojournal-App freigeben, um die Fotos einfacher in einer Zeitachsenansicht anzeigen zu können. Der Benutzer öffnet den Freigabebereich, sieht, dass die Fotojournal-App in der Liste der Freigabeziele aufgeführt ist und startet dann den Freigabeworkflow.

Freigeben von Fotos aus einer anderen App an die Fotojournal-App.

 

Verwenden der Dateiauswahl für den Zugriff auf Dateien an verschiedenen Speicherorten

Über das Vollbildschirm-Dialogfeld Dateiauswahl können Benutzer auf Dateien und Ordner zugreifen, die sich auf dem lokalen PC, verbundenen Speichergeräten oder in einer Heimnetzgruppe befinden. Darüber hinaus bietet es Zugriff auf Elemente aus Apps, die am Vertrag für "Dateiauswahl" teilnehmen.

Beispiel: Hochladen eines Fotos aus dem lokalen Dateisystem

Zugriff auf Fotos aus dem Dateisystem und sozialen Netzwerken in der iPad-App.

iPad-App

Die iPad-App unterstützt den Zugriff auf Fotos in der lokalen Fotobibliothek und einer Reihe von sozialen Netzwerkdiensten.

Zugriff auf die Dateiauswahl-UI in der Windows Store-App.

Windows Store-App

A. Der Benutzer tippt auf der App-Leiste auf die Schaltfläche Upload, und die Dateiauswahl-UI 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.
B. Beim Tippen auf die Überschrift Dateien wird dem Benutzer ein Flyout aller verfügbaren Dateispeicherorte angezeigt, und er kann zu einem Dateiordner navigieren.
C. Der Benutzer wählt mehrere Fotos aus dem Ordner aus, und unten links wird eine Liste mit Miniaturansichten der ausgewählten Bildern angezeigt.

 

Beispiel: Verwenden eines Foto aus der Fotojournal-App in einer anderen App (nur in Windows Store-Apps verfügbar)

Schließlich machen wir uns ein exklusives Feature für Windows Store-Apps zunutze und fügen Unterstützung für die Auswahl von Fotoinhalten aus dem Fotojournal in einer anderen App hinzu. Dadurch muss der Benutzer Fotos aus dem Fotojournal nicht erst ins lokale Dateisystem herunterladen, um sie dann wieder in eine andere App hochzuladen. Das Fotojournal implementiert den Vertrag für "Dateiauswahl", sodass es vom System als Dateispeicherort erkannt wird.

Verwenden von Inhalten aus dem Fotojournal in einer anderen App.

Windows Store-App

Ein Benutzer befindet sich auf der Seite mit den PC-Einstellungen und tippt auf "Durchsuchen", um sein Foto für das Konto anzupassen. Da das Fotojournal den Vertrag für "Dateiauswahl" implementiert, kann der Benutzer sehen, dass die App für den Zugriff im Dateiverzeichnis zur Verfügung steht. Der Benutzer kann dann ein in seiner Fotojournalauflistung gespeichertes Foto auswählen.

 

Fingereingabe

Streifen vom Rand für App- und Systembefehle

Mit Windows 8 können Benutzer vom Rand aus streifen, um so auf Befehle zuzugreifen und zwischen verschiedenen Apps zu navigieren.

  • App-Befehle werden durch Streifen vom unteren oder oberen Rand des Bildschirms aus aufgerufen. Die App-Leiste sollte stets verwendet werden, um App-Befehle anzuzeigen.
  • Durch eine Streifbewegung vom rechten Bildschirmrand werden die Charms mit den Systembefehlen eingeblendet.
  • Durch das Streifen vom linken Rand aus wechseln Sie zu den zuletzt verwendeten Apps.
  • Durch das Streifen vom oberen Rand zum unteren Rand des Bildschirms werden Befehle zum Andocken oder Schließen angezeigt.

Beispiel: Zugreifen auf die App-Leiste und die Charms in einer Windows Store-App

Zugreifen auf die App-Leiste in der Windows Store-App.Zugreifen auf die Charms in der Windows Store-App.

Durch das Streifen vom unteren oder oberen Rand des Bildschirms aus werden die App-Befehle angezeigt.

Durch das Streifen vom rechten Rand des Bildschirms aus werden die Charms mit Systembefehlen wie "Suche", "Freigabe", "Verbinden", "Einstellungen" und "Start" aufgerufen.

 

Ziehen Sie quer, um Objekte auszuwählen

In Windows 8 können Benutzer den Finger über kurze Distanz im rechten Winkel zur Verschiebungsrichtung ziehen, um ein Objekt in einer Liste oder einem Raster auszuwählen. Bei der Auswahl von Objekten wird automatisch die App-Leiste mit relevanten Befehlen angezeigt.

Beispiel: Auswählen mehrerer Fotos zum Löschen

Auswählen mehrerer Fotos in der iPad-App.Auswählen mehrerer Windows Store-App.

iPad-App

  • Benutzer geben einen bestimmten Bearbeitungsmodus ein, um die Auswahl- und andere Bearbeitungsaktionen durchzuführen. Dies liegt daran, dass das Tippen primären Aktionen wie Starten vorbehalten ist.
  • Benutzer beenden den Bearbeitungsmodus, sobald sie fertig sind.

Windows Store-App

  • Benutzer streifen über das Objekt, um es auszuwählen. Die angezeigte App-Leiste enthält automatisch alle kontextrelevanten Befehle.
  • Benutzer können Tipp- und Streifaktionen für ein Objekt ausführen, ohne dazu in einen anderen Modus und wieder zurück wechseln zu müssen.
  • Diese Geste lässt sich rückgängig machen, was die Auswahl in Windowsw 8-Apps wesentlich effizienter macht.

 

Zusammendrücken und Aufziehen für den semantischen Zoom

Zusammendrücken und Aufziehen werden in der Regel in iPad-Apps wie auch in Windows Store-Apps für Größenänderungen verwendet – in Windows 8 ermöglichen die Bewegungen es jedoch auch, mithilfe des semantischen Zooms an den Anfang, das Ende oder einen beliebigen Punkt innerhalb des Inhalts zu springen. Mithilfe des semantischen Zooms können Benutzer die Ansicht verkleinern, um Daten in zusammenhängenden Gruppen zu sehen, und schneller wieder eintauchen. Anstatt Navigationsmöglichkeiten zum Studieren langer Listen mit Inhalt bereitzustellen, verwenden Sie für diese Art der Interaktion möglichst den semantischen Zoom. Natürlich kann Zusammendrücken und Aufziehen bei der Anzeige eines Fotos im Vollbildmodus als optischer Zoom verwendet werden.

Beispiel: Semantischer Zoom auf der Startseite und einer Spokeseite mit Monatsansicht

Verwenden des semantischen Zooms in der Windows Store-App.

Windows Store-App

A. Mithilfe des semantischen Zooms auf der Startseite können Benutzer schnell zu einem bestimmten Monat eines beliebigen Jahres springen.
B. Über den semantischen Zoom auf einer Speichenseite mit einer Monatsansicht können Benutzer zu einem bestimmten Tag springen. Außerdem können sie einer Infografik entnehmen, wie viele Fotos aus diesem Jahr verfügbar sind.

 

Orientierung und Bildschirmgröße

Anpassungsfähiges Layout designen

Eine iPad-App besitzt eine feste Bildschirmgröße und -auflösung mit zwei Ausrichtungen, die es für Designer zu berücksichtigen gilt. Windows 8 unterstützt verschiedene Formfaktoren, von tragbaren Tablets bis zu All-in-One-Desktops. Mit dem Ergebnis, dass Ihnen zusätzliche Bildschirmfläche zur Verfügung steht, um Benutzern mehr Inhalte zu präsentieren. Bei der Überarbeitung der Fotojournal-App stellten wir uns vor, wie die App in zwei Geräteausrichtungen aussehen würde, und berücksichtigten dabei unterschiedliche Bildschirmauflösungen und Gerätegrößen. Mit dem Rasterlayout lässt sich das Design mühelos für Bildschirme mit Hochformat und mit hoher Auflösung skalieren. Steht mehr vertikale Fläche zur Verfügung, heben wir beispielsweise für jeden Monat mehr Fotos hervor.

Beispiel: Startseitendesign im Querformat, Hochformat und Format für große Bildschirme (nur Windows Store-Apps)

Die iPad-App im Querformat- und Hochformatmodus.

iPad-App

Im Quer- und im Hochformat wird derselbe Inhalt angezeigt. Der Inhalt wird dynamisch in die Hochformatausrichtung umgebrochen.

Die Windows Store-App in verschiedenen Ansichtsmodi und Auflösungen.

Windows Store-App

Die App nutzt die Fläche, die im Hochformat und bei größeren Bildschirmen zur Verfügung steht und zeigt in den einzelnen Abschnitten auf der Hub-Seite mehr Inhalt an. Ähnlich wie beim Erstellen von Bildern für ein iOS Retina Display erstellten wir mehrere Bilder für verschiedene Windows-Skalierungsprozentsätze – 100 %, 140 % und 180 %. Diese Bilder werden auf HD-Tablets automatisch geladen.

 

Verwenden Sie schmale Breiten, um Ihre Benutzer zu fesseln.

Mit Windows 8 können Benutzer mehrere Aktivitäten gleichzeitig durchführen, indem Sie im Bildschirm mehrere Apps nebeneinander öffnen. Eine App für eine gute Funktionalität bei schmaler Breite zu konzipieren, ist eine tolle Methode, um die Verweildauer der App auf dem Bildschirm zu erhöhen und Benutzer über einen längeren Zeitraum zu fesseln. Benutzer können die Größe der App einfach ändern, indem sie die Trennlinie zwischen zwei Apps verschieben. Deshalb ist es wichtig, dass der Kontext bei Größenänderungen beibehalten wird. Wir möchten verhindern, dass Benutzer durch Größenänderungen den Status ihrer App verlieren.

Weitere Informationen über Größenänderungen erhalten Sie in den Richtlinien für Fenstergrößen und die Skalierung auf unterschiedliche Bildschirme und in den Richtlinien für die Größenänderung von Fenstern für hohe und schmale Layouts.

Beispiel: Startseite bei schmaler Breite

Die Windows Store-App bei schmaler Breite

Windows Store-App

  • Wenn die Breite der Startseite reduziert wird, kann der Benutzer trotzdem noch dieselben Inhalte anzeigen.
  • Im hohen, schmalen Layout schwenkt der Benutzer vertikal, um mehr Inhalt zu sehen, da es angenehmer ist, entlang der langen Seite 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 Sie Kacheln für dauerhafte und dynamische Updates

Seit iOS 5 gibt es eine Mitteilungszentrale, in der neue Benachrichtigungen schnell oben auf dem Bildschirm eingeblendet werden und Benutzer von oben streifen können, um alle Nachrichten in der Zentrale anzuzeigen. Darüber hinaus können App-Symbole im iOS Springboard mit Zahlensignalen versehen wurden, als Hinweis dafür, dass neue Nachrichten vorliegen. Die Kacheln auf der Windows 8-Startseite vereinen beide Funktionen – die numerischer Signale auf App-Symbolen und die der Mitteilungszentrale auf einem iPad. Benutzer können von einem Ort aus Apps starten und Benachrichtigungen lesen. Zudem steht Designern für die Windows Store-App-Kacheln eine große Auswahl an Vorlagen in drei unterschiedlichen Größen und mit einem breiten Layout zur Verfügung, während die Benachrichtigungen in iOS ein festes Format haben.

Beispiel: Benachrichtigungen auf der Startseite

A Fotojournal-Benachrichtigung auf dem iPad Springboard.Fotojournal-Kachel und Benachrichtigung auf der Startseite.

iPad

A. App-Symbol mit numerischem Signal auf dem iPad Springboard.

B. Mitteilungszentrale mit Fotojournal-Benachrichtigung.

Windows 8

C. Kachel auf der Startseite mit numerischem Signal und Benachrichtigungen. Es stehen viele Kachelvorlagen zur Verfügung.

 

Verwenden Sie Popups für vorübergehend angezeigte Benachrichtigungen

Über Popupbenachrichtigungen können Sie Benutzer in Echtzeit über Ereignisse informieren. 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. Im Allgemeinen sollten Sie Benutzern bei der ersten Ausführung der App die Möglichkeit geben, sich für Benachrichtigungen zu entscheiden. Zeigen Sie gegebenenfalls die letzten Popupbenachrichtigungen an, wenn sie noch relevant sind. Popups sind vergleichbar mit den vorübergehenden Warnhinweisen in iOS, die als Banner oben auf dem Bildschirm angezeigt werden. Designer können jedoch aus einer Sammlung von Popupvorlagen wählen, um ihren Benachrichtigungen mehr Nachdruck zu verleihen.

Beispiel: Die Fotojournal-App benachrichtigt Benutzer, wenn sie einen Kommentar von einem Verwandten empfangen.

Eine Popupbenachrichtigung auf der Startseite.

Der Benutzer hat den Empfang von Popupbenachrichtigungen eingestellt, sobald ein Familienmitglied Fotos in der App kommentiert hat.

 

Über die Autoren

Bart Claeys, Ratio Interactive.

Bart Claeys ist Lead User Experience Designer bei Ratio Interactive und auf die Bereiche UI/UX für Web- und mobile Apps spezialisiert. Zuvor war er als Interactive Art Director für Saatchi & Saatchi in Brüssel tätig und hat dort interaktive Kampagnen für Toyota, Sony und andere internationale Marken konzipiert. Bart hat einen Master in Produktentwicklung und an internationalen Schulungen für Markenmanagement teilgenommen. Er ist Gründer von Creativeskills.be, der führenden Jobbörse für Kreative in Belgien. 2006 Bart erhielt Bart die Auszeichnung „Du bist Flanderns Zukunft“, einen von der flämischen Regierung gestifteten Preis zur Förderung unternehmerischen Handelns.

Qixing Zheng, Microsoft Corporation.

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 die Microsoft-Designsprache 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.

 

Verwandte Themen

Neuerstellen von iOS-App-Designs in Windows 8
Ressourcen für iOS-Entwickler

 

 

Anzeigen:
© 2014 Microsoft