Blog

Windows Phone 7 Pie Menü Design Studie

David Patrizi
David Patrizi
31. August 2010

In einem vorhergehenden Blogartikel haben wir uns mit der Verwendung von Pie Menüs für Touchscreen Anwendungen beschäftigt und eingehend erläutert, welche Vor- und Nachteile diese Interaktionsform mit sich bringt. Im Folgenden stellen wir eine Designstudie vor, die den Einsatz eines Pie Menüs im Touchscreen-Bereich illustriert.

Kontakte (ver-)knüpfen

Unsere Designstudie zeigt, wie schnell und einfach das Auswählen von Kontakten bei einem Mobiltelefon mit Touchscreen sein kann, wenn man ein Pie Menü verwendet. Zielplattform für die Designstudie ist Silverlight für Windows Phone 7, da uns die Verwendung von Expression Blend das schnelle Prototypen von anspruchsvollen Animationen und Touch-Interaktionen erlaubt.

Das Menü und jedes Untermenü davon ist wieder ein neues Pie Menü. User fahren mit dem Finger über die einzelnen Einträge, um zum gewünschten Endergebnis zu kommen, wobei eine Art Interaktionspfad oder Geste entsteht.Je öfter ein bestimmter Eintrag gesucht wird, desto vertrauter wird den Anwendern der entsprechende Pfad – sie erlernen auf diese Weise eine Geste, die sie immer wieder zum gewünschten Eintrag führt. Mit der Zeit müssen sie nicht einmal mehr nachdenken, um einen Kontakteintrag zu finden, sondern beschreiben einfach die verinnerlichte Geste mit dem Finger. Dieses Interaktionsprinzip ist natürlich auch für andere Szenarien denkbar und eignet sich am besten für Gliederungen, bei denen es nicht mehr als fünf Einträge je Gliederungsebene gibt.

Alles ist im Fluss

Ein weiterer wichtiger Aspekt der Designstudie ist die Verwendung von Animationen. In einem älteren Blogartikel haben wir eine Studie dargestellt, die einige Auswirkungen von Animationen auf die User Experience untersuchte. Unter anderem konnte durch den Einsatz von Animationen die Freude bei der Benutzung („Joy of Use“) vergrößert werden. Gerade bei Lifestyle-Produkten wie Mobiltelefonen ist Joy of Use ein wichtiges Verkaufsargument und kann über Erfolg oder Misserfolg entscheiden.

Zusätzlich können Animationen unerfahrenen Nutzern helfen, eine Funktionalität besser zu verstehen. Bei Pie Menüs ist jedoch darauf zu achten, dass Animationen vergleichsweise schnell ablaufen müssen, um eine fließende Auswahl einzelner Einträge und Untereinträge – und somit die Verwendung von Gesten – zu ermöglichen anstatt die Anwender bei der Interaktion zu bremsen. Dies ist essenziell für das Design von Natural User Interfaces (NUIs).

In unserem Beispiel-Video werden die Menüpunkte immer erst nach kurzen „Denkpausen“ ausgewählt. So würde es aussehen, wenn die User die Geste zur Auswahl des Eintrages noch nicht erlernt haben. Damit die Animation mit allen Details nachzuverfolgen ist, ist sie hier sowohl in normaler Geschwindigkeit als auch in Zeitlupe zu sehen. Der visuelle Stil ist stark an das Windows Phone 7 Design angelehnt und beschränkt sich dementsprechend auf klare geometrische Formen und typographische Elemente. Für mehr Informationen in dieser Richtung lohnt es sich definitiv, einen Blick in den sehr gut gemachten UI Design and Interaction Guide for Windows Phone 7 zu werfen.

Funktionsweise

Hier wird die Funktionsweise noch einmal Schritt für Schritt erklärt. Um eine Person aus seiner Favoritenliste zu kontaktieren, legt der Benutzer den Daumen auf das entsprechende Favoriten-Icon. Hierdurch wird die erste Ebene eines Auswahlmenüs angezeigt, welches die Möglichkeit eröffnet, zwischen Freunden, Familie und Arbeitskollegen auszuwählen.

Design Studie - Schritt 1 Design Studie - Schritt 2

Durch „Sliden“ des Daumens auf die entsprechende Menü-Option, öffnet sich die nächste Menü-Ebene. Im Beispiel navigiert der Benutzer zu „Family“.

Design Studie - Schritt 3

In der nächsten Ebene kann der Benutzer einen Kontakt der Gruppe „Family“ wählen. In diesem Fall werden „Katie“, „Parents“ und „Peter“ angeboten. Im Beispiel rutscht der Daumen auf „Katie“.

Design Studie - Schritt 4

Hierdurch öffnet sich die dritte und letzte Menü-Ebene in der man die Kontakt-Aktion auswählen kann, die man für die ausgewählte Person ausführen möchte: mailen, anrufen oder chatten. Durch Abheben des Daumens wird die ausgewählte Funktion ausgeführt (in diesem Fall „Call“).

Design Studie - Schritt 5

Jede Menü-Option kann über eine eindeutige Geste ausgewählt werden. Die Geste für das Beispiel sieht wie folgt aus:

Design Studie - Geste

Die gesamte Animation:


Das Konzept des Pie Menüs ermöglicht eine sehr schnelle und intuitive Bedienung sowohl für Novizen als auch für Expertennutzer – es sollte daher als wichtiges Element beim Gestalten von Natural User Interfaces in Erwägung gezogen werden.

Ziel der vorgestellten Designstudie war es, eine Möglichkeit zu skizzieren, wie ein Pie Menü die Effizienz der Touchscreen-Interaktion steigern kann, indem Gesten zum Einsatz kommen. Zur Umsetzung der Designideen für einen konkreten Einsatzkontext müssten nun die dargestellten Überlegungen ausdetailliert werden, bspw. hinsichtlich des Umgangs mit den physikalischen Bildschirmgrenzen oder den Auswirkungen der Variabilität von Menü-Items (bspw. bei neuen Kontakten). Auch bei Einbeziehung derartiger Aspekte und Constraints ist zu erwarten, dass Pie Menüs einen wesentlichen Beitrag zur Verbesserung der Interaktionseffizienz im Speziellen und der User Experience im Allgemeinen leisten können.

Expression, Expression Blend und Windows sind Marken oder eingetragene Marken
der Microsoft Corporation in den USA und/oder anderen Ländern.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Senior UX Manager
+49 681 959 3110

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.