{"id":960,"date":"2010-08-31T16:48:28","date_gmt":"2010-08-31T14:48:28","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=960"},"modified":"2017-02-23T16:02:16","modified_gmt":"2017-02-23T15:02:16","slug":"pie-menu-design-studie","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/pie-menu-design-studie\/","title":{"rendered":"Windows Phone 7 Pie Men\u00fc Design Studie"},"content":{"rendered":"

In einem vorhergehenden Blogartikel<\/a> haben wir uns mit der Verwendung von Pie Men\u00fcs f\u00fcr Touchscreen Anwendungen besch\u00e4ftigt und eingehend erl\u00e4utert, welche Vor- und Nachteile diese Interaktionsform mit sich bringt. Im Folgenden stellen wir eine Designstudie vor, die den Einsatz eines Pie Men\u00fcs im Touchscreen-Bereich illustriert.
\n<\/p>\n

Kontakte (ver-)kn\u00fcpfen<\/h3>\n

Unsere Designstudie zeigt, wie schnell und einfach das Ausw\u00e4hlen von Kontakten bei einem Mobiltelefon mit Touchscreen sein kann, wenn man ein Pie Men\u00fc verwendet. Zielplattform f\u00fcr die Designstudie ist Silverlight f\u00fcr Windows Phone 7, da uns die Verwendung von Expression Blend das schnelle Prototypen von anspruchsvollen Animationen und Touch-Interaktionen erlaubt.<\/p>\n

Das Men\u00fc und jedes Untermen\u00fc davon ist wieder ein neues Pie Men\u00fc. User fahren mit dem Finger \u00fcber die einzelnen Eintr\u00e4ge, um zum gew\u00fcnschten Endergebnis zu kommen, wobei eine Art Interaktionspfad oder Geste entsteht.Je \u00f6fter ein bestimmter Eintrag gesucht wird, desto vertrauter wird den Anwendern der entsprechende Pfad \u2013 sie erlernen auf diese Weise eine Geste, die sie immer wieder zum gew\u00fcnschten Eintrag f\u00fchrt. Mit der Zeit m\u00fcssen sie nicht einmal mehr nachdenken, um einen Kontakteintrag zu finden, sondern beschreiben einfach die verinnerlichte Geste mit dem Finger. Dieses Interaktionsprinzip ist nat\u00fcrlich auch f\u00fcr andere Szenarien denkbar und eignet sich am besten f\u00fcr Gliederungen, bei denen es nicht mehr als f\u00fcnf Eintr\u00e4ge je Gliederungsebene gibt.<\/p>\n

Alles ist im Fluss<\/h3>\n

Ein weiterer wichtiger Aspekt der Designstudie ist die Verwendung von Animationen. In einem \u00e4lteren Blogartikel<\/a> 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 (\u201eJoy of Use\u201c) vergr\u00f6\u00dfert werden. Gerade bei Lifestyle-Produkten wie Mobiltelefonen ist Joy of Use ein wichtiges Verkaufsargument und kann \u00fcber Erfolg oder Misserfolg entscheiden.<\/p>\n

Zus\u00e4tzlich k\u00f6nnen Animationen unerfahrenen Nutzern helfen, eine Funktionalit\u00e4t besser zu verstehen. Bei Pie Men\u00fcs ist jedoch darauf zu achten, dass Animationen vergleichsweise schnell ablaufen m\u00fcssen, um eine flie\u00dfende Auswahl einzelner Eintr\u00e4ge und Untereintr\u00e4ge \u2013 und somit die Verwendung von Gesten \u2013 zu erm\u00f6glichen anstatt die Anwender bei der Interaktion zu bremsen. Dies ist essenziell f\u00fcr das Design von Natural User Interfaces (NUIs).<\/p>\n

In unserem Beispiel-Video werden die Men\u00fcpunkte immer erst nach kurzen \u201eDenkpausen\u201c ausgew\u00e4hlt. So w\u00fcrde 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\u00e4nkt sich dementsprechend auf klare geometrische Formen und typographische Elemente. F\u00fcr 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<\/a> zu werfen.<\/p>\n

Funktionsweise<\/h3>\n

Hier wird die Funktionsweise noch einmal Schritt f\u00fcr Schritt erkl\u00e4rt. 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\u00fcs angezeigt, welches die M\u00f6glichkeit er\u00f6ffnet, zwischen Freunden, Familie und Arbeitskollegen auszuw\u00e4hlen.<\/p>\n

\"Design \"Design<\/p>\n

Durch \u201eSliden\u201c des Daumens auf die entsprechende Men\u00fc-Option, \u00f6ffnet sich die n\u00e4chste Men\u00fc-Ebene. Im Beispiel navigiert der Benutzer zu \u201eFamily\u201c.<\/p>\n

\"Design<\/p>\n

In der n\u00e4chsten Ebene kann der Benutzer einen Kontakt der Gruppe \u201eFamily\u201c w\u00e4hlen. In diesem Fall werden \u201eKatie\u201c, \u201eParents\u201c und \u201ePeter\u201c angeboten. Im Beispiel rutscht der Daumen auf \u201eKatie\u201c.<\/p>\n

\"Design<\/p>\n

Hierdurch \u00f6ffnet sich die dritte und letzte Men\u00fc-Ebene in der man die Kontakt-Aktion ausw\u00e4hlen kann, die man f\u00fcr die ausgew\u00e4hlte Person ausf\u00fchren m\u00f6chte: mailen, anrufen oder chatten. Durch Abheben des Daumens wird die ausgew\u00e4hlte Funktion ausgef\u00fchrt (in diesem Fall \u201eCall\u201c).<\/p>\n

\"Design<\/p>\n

Jede Men\u00fc-Option kann \u00fcber eine eindeutige Geste ausgew\u00e4hlt werden. Die Geste f\u00fcr das Beispiel sieht wie folgt aus:<\/p>\n

\"Design<\/p>\n

Die gesamte Animation:
\n
\n
\nDas Konzept des Pie Men\u00fcs erm\u00f6glicht eine sehr schnelle und intuitive Bedienung sowohl f\u00fcr Novizen als auch f\u00fcr Expertennutzer \u2013 es sollte daher als wichtiges Element beim Gestalten von Natural User Interfaces in Erw\u00e4gung gezogen werden.<\/p>\n

Ziel der vorgestellten Designstudie war es, eine M\u00f6glichkeit zu skizzieren, wie ein Pie Men\u00fc die Effizienz der Touchscreen-Interaktion steigern kann, indem Gesten zum Einsatz kommen. Zur Umsetzung der Designideen f\u00fcr einen konkreten Einsatzkontext m\u00fcssten nun die dargestellten \u00dcberlegungen ausdetailliert werden, bspw. hinsichtlich des Umgangs mit den physikalischen Bildschirmgrenzen oder den Auswirkungen der Variabilit\u00e4t von Men\u00fc-Items (bspw. bei neuen Kontakten). Auch bei Einbeziehung derartiger Aspekte und Constraints ist zu erwarten, dass Pie Men\u00fcs einen wesentlichen Beitrag zur Verbesserung der Interaktionseffizienz im Speziellen und der User Experience im Allgemeinen leisten k\u00f6nnen.<\/p>\n

\nExpression, Expression Blend und Windows sind Marken oder eingetragene Marken
\nder Microsoft Corporation in den USA und\/oder anderen L\u00e4ndern.\n<\/div>\n","protected":false},"author":14,"featured_media":0,"template":"","tags":[91,90,138],"class_list":["post-960","blog","type-blog","status-publish","hentry","tag-blend-de","tag-silverlight-de","tag-windows-phone-de"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/14"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/960\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=960"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}