{"id":777,"date":"2010-06-16T16:01:02","date_gmt":"2010-06-16T14:01:02","guid":{"rendered":"http:\/\/www.centigrade.de\/de\/blog\/?p=777"},"modified":"2017-05-05T09:25:20","modified_gmt":"2017-05-05T07:25:20","slug":"die-rueckkehr-des-pie-menues","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/die-rueckkehr-des-pie-menues\/","title":{"rendered":"Die R\u00fcckkehr des Pie Men\u00fcs"},"content":{"rendered":"<p>In den letzten Jahren haben sich sogenannte Natural User Interfaces (NUI) immer weiter verbreitet. Immer h\u00e4ufiger wird auf Maus oder Tastatur zugunsten der direkten Bedienung per Touch und Gesten verzichtet. Das Apple iPhone hat die Massen begeistert und nicht zuletzt dazu beigetragen, dass Systeme mit Touchscreen im privaten Bereich immer beliebter geworden sind. Zudem hat es die Gestensteuerung, die in Verbindung mit Multitouch-Ger\u00e4ten oft verwendet wird, auf spielerische Art und Weise den Usern n\u00e4her gebracht. Es gibt kaum noch einen Touchscreen Nutzer, der die Pinch-Geste, mit welcher auf dem iPhone Bilder verkleinert werden oder aus einer Ansicht heraus gezoomt wird, nicht kennt.\n<\/p>\n<p><!--more--><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/pinch.png\" alt=\"Pinch Geste\" \/><br \/>\n<strong>Pinch Geste<\/strong><\/p>\n<p>Der Trend bei konsumorientierter Software geht ganz klar in Richtung Natural User Interfaces. Dies l\u00e4sst sich ganz besonders in der Spieleindustrie beobachten: Aktionen werden bei der Nintendo Wii nicht mehr nur mit einem Knopfdruck ausgef\u00fchrt, sondern durch eine tats\u00e4chliche Bewegung des Controllers. Das Microsoft Project Natal setzt sogar komplett auf die Interaktion ohne Eingabeger\u00e4te  (Free-Form Gestural Interface).\n<\/p>\n<h2>Unterschiede in der Bedienung<\/h2>\n<p>Doch dieser Trend zwingt Entwickler und Interface Designer zum Umdenken. Bisher wurden Anwendungen f\u00fcr die Verwendung mit speziellen Eingabeger\u00e4ten wie etwa Maus und Tastatur entwickelt. Multitouch-Ger\u00e4te werden jedoch prim\u00e4r mit den H\u00e4nden und Fingern bedient, was andere M\u00f6glichkeiten zur Interaktion bietet. Dies bedeutet jedoch auch, dass existierende Anwendungen nicht einfach auf ein Touchscreen System \u00fcbernommen werden k\u00f6nnen, da die Finger als Eingabemedium ganz andere Eigenschaften haben als Maus, Tastatur oder Stift. Und gerade weil ein Touchscreen System viel mehr M\u00f6glichkeiten bietet, ist es in der Bedienung wesentlich impliziter.\n<\/p>\n<p>Die Maus hat zur Interaktion nur eine sehr begrenzte Anzahl von M\u00f6glichkeiten und die meisten Aktionen werden bereits durch ein Klicken mit der linken Taste ausgel\u00f6st. Bei einem Touchscreen hingegen hat der User, au\u00dfer dem Screen selbst, kein spezielles Eingabemedium und muss so eigenst\u00e4ndig herausfinden, wie er mit dem System kommunizieren kann. Dies kann erlernt werden, indem der Benutzer die Interaktionsm\u00f6glichkeiten sieht, nachliest oder aber exploriert.\n<\/p>\n<p>Das eigenst\u00e4ndige Entdecken eines Interface ist zun\u00e4chst positiv, da es den User dazu animiert sich selbstst\u00e4ndig mit der Anwendung zu besch\u00e4ftigen und diese spielerisch zu erlernen. Doch gerade aufgrund der vielen M\u00f6glichkeiten, die ein Multitouch-Ger\u00e4t bietet, ist es fraglich, dass ein Nutzer alle Optionen, vor allem die komplexeren, selbstst\u00e4ndig findet. Das wiederum stellt den User Interface Designer vor ein ganz neues Problem: Wie kann ein Interface f\u00fcr einen Touchscreen so gestaltet werden, dass der Benutzer die Gesten m\u00f6glichst ohne Hilfe und selbstst\u00e4ndig herausfindet?\n<\/p>\n<h2>Men\u00fcnavigation auf Multitouch-Ger\u00e4ten<\/h2>\n<p>Ein zentrales Thema, das hier angesprochen werden soll, ist die Men\u00fcnavigation auf einem Touchscreen. Herk\u00f6mmliche Computer greifen in den meisten F\u00e4llen auf ein lineares Men\u00fc (oft Pull-Down Men\u00fc genannt) zur\u00fcck. <\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/listmenu.png\" alt=\"Lineares Men\u00fc oder auch Pull-Down Men\u00fc\" \/><br \/>\n<strong>Lineares Men\u00fc oder auch Pull-Down Men\u00fc<\/strong>\n<\/p>\n<p>Die Navigation mit Hilfe der Maus in solch einem Men\u00fc funktioniert relativ gut, sobald der User mit der Funktionsweise vertraut ist. Auf Touchscreen Systemen hingegen ist ein lineares Men\u00fc alles andere als optimal. Mit einem Cursor ist es m\u00f6glich, relativ pr\u00e4zise zu einem Listeneintrag zu navigieren, die Finger jedoch haben eine viel gr\u00f6\u00dfere Kontaktfl\u00e4che als ein Mauszeiger. Ein Listenmen\u00fc f\u00fcr einen Touchscreen m\u00fcsste demnach wesentlich gr\u00f6\u00dfer ausfallen und w\u00fcrde daher auch mehr Platz in Anspruch nehmen. Auch die Navigation zu den einzelnen Eintr\u00e4gen ist mit der Maus, je nach eingestellter Sensitivit\u00e4t, kein Problem. Eine kleine Bewegung der Hand reicht oftmals und schon befindet sich der Cursor am anderen Ende des Bildschirms.\n<\/p>\n<p>Werden die Finger als Zeigeinstrument verwendet, ist die Bewegung, die hierf\u00fcr ausgef\u00fchrt werden muss, teilweise mehr als doppelt so gro\u00df. Es ist Benutzern nicht zuzumuten, dass sie f\u00fcr eine simple Men\u00fcnavigation die Hand \u00fcber den gesamten Bildschirm hinweg bewegen m\u00fcssen, da so bei l\u00e4ngerer Verwendung des Touchscreens die Arme schnell erm\u00fcden, vor allem da Displays tendenziell immer gr\u00f6\u00dfer werden. Hierbei tritt ein Nebeneffekt auf, der humoristisch auch &#8222;<a href=\"http:\/\/catb.org\/jargon\/html\/G\/gorilla-arm.html\">Gorilla Arm<\/a>&#8220; genannt wird: Muss ein User an einem senkrecht angebrachten Touchscreen arbeiten, werden seine Arme schnell schwer und die Arbeit m\u00fchsam und anstrengend. Zudem sieht der Nutzer w\u00e4hrend der Bedienung oftmals aus wie ein Gorilla und f\u00fchlt sich danach auch so. An dieser Stelle muss also umgedacht werden.\n<\/p>\n<h2>Das Pie Men\u00fc<\/h2>\n<p>Aufgrund der Entwicklung hin zu Touch Systemen und den Unzul\u00e4nglichkeiten von klassischen Men\u00fcs, ist es gut m\u00f6glich, dass ein Men\u00fc wieder ins Licht tritt, das sich trotz seiner zahlreichen Vorteile gegen\u00fcber dem linearen Men\u00fc, nie wirklich hat durchsetzen k\u00f6nnen: das Pie Men\u00fc.\n<\/p>\n<p>Schnellere Zugriffszeiten (siehe <a href=\"http:\/\/en.wikipedia.org\/wiki\/Fitts%27s_law\">Fitts\u2019 Law<\/a>), bessere Orientierung, da sich alle Elemente gleich weit weg vom Ausgangspunkt des Men\u00fcs befinden und Gestenunterst\u00fctzung, indem der Nutzer den Bewegungsablauf f\u00fcr die entsprechenden Aktionen w\u00e4hrend deren Durchf\u00fchrung erlernt und schlie\u00dflich auch blind durchf\u00fchren kann (\u201e<a href=\"http:\/\/en.wikipedia.org\/wiki\/Muscle_memory\">muscle memory<\/a>\u201c, siehe auch Kapitel: <a href=\"#submenus\">Untermen\u00fcs<\/a>), sind nur einige der Vorteile, die ein Pie Men\u00fc auf einem Computer, der mit Maus und Tastatur bedient wird, mit sich bringt.\n<\/p>\n<p>Doch auch das Pie Men\u00fc hat Nachteile: Aufgrund der Struktur ist, je nach Auslegung, nur eine bestimmte Anzahl an Men\u00fcfeldern m\u00f6glich, ohne dass die Felder so klein werden, dass sie nicht mehr ohne Probleme angesteuert werden k\u00f6nnen.\n<\/p>\n<h2>Pie Men\u00fcs nur f\u00fcr Videospiele?<\/h2>\n<p>Die Spieleindustrie hat die \u201eKuchenmen\u00fcs\u201c schon lange f\u00fcr sich entdeckt. Vor allem Spiele, bei denen es um Schnelligkeit geht, profitieren sehr davon. Nach h\u00e4ufiger Nutzung einer Aktion speichert das Gehirn die entsprechende Bewegung im motorischen Ged\u00e4chtnis ab. Der Nutzer kennt so die Position, zu der er die Maus bewegen muss, beziehungsweise die Geste, um die gew\u00fcnschte Aktion durchzuf\u00fchren.\n<\/p>\n<p>Es ist \u00e4hnlich wie beim Tippen auf einer Tastatur. Neulingen bereitet die F\u00fclle an Tasten noch Probleme, doch je h\u00e4ufiger die Tastatur verwendet wird, desto schneller k\u00f6nnen die gew\u00fcnschten Tasten erreicht werden und umso weniger Konzentration wird daf\u00fcr ben\u00f6tigt \u2013 das Gehirn kennt die Bewegung, um die gew\u00fcnschte Taste zu erreichen oftmals sogar so gut, dass blindes Tippen m\u00f6glich ist. Die Verwendung von Pie Men\u00fcs ist also, banal ausgedr\u00fcckt, so intuitiv und \u201eunverlernbar\u201c wie Fahrradfahren.\n<\/p>\n<h2>Pie Men\u00fc trifft Touchscreen<\/h2>\n<p>Doch soll ein Pie Men\u00fc f\u00fcr die Interaktion mit einem Touchscreen System verwendet werden, gen\u00fcgt es nicht, blo\u00df das lineare Men\u00fc durch ein solches zu ersetzen. Touchscreens unterscheiden sich in ihrer Bedienung ganz entscheidend von klassischen Bildschirmarbeitspl\u00e4tzen: Wo zuvor noch der Cursor war, ist nun der Finger und dieser verdeckt, im Gegensatz zum Mauszeiger, einen wesentlich gr\u00f6\u00dferen Teil des Bildschirms.\n<\/p>\n<p>Das bedeutet unter anderem, dass das Pie Men\u00fc eine bestimmte Mindestgr\u00f6\u00dfe haben muss, was nat\u00fcrlich entsprechend viel Platz erfordert. Aber auch die Anzahl der Felder ist durch die Navigation mit dem Finger eingeschr\u00e4nkt. Sollen m\u00f6glichst einfache Gesten unterst\u00fctzt werden, empfiehlt es sich, ein Pie Men\u00fc mit mindestens 45\u00b0 Winkeln zu verwenden, da diese vom User noch pr\u00e4zise genug ausgef\u00fchrt werden k\u00f6nnen, um vom System eindeutig erkannt zu werden. Unter Ber\u00fccksichtigung dieser Restriktionen ergibt sich ein Pie Men\u00fc mit maximal acht Feldern. Beachtet man nun noch, dass die Finger eines Erwachsenen typischerweise einen Durchmesser von 16 bis 20 Millimeter haben (Saffer, D. Designing Gestural Interfaces, 2008), ergibt sich f\u00fcr den Mittelpunkt des Men\u00fcs ein Durchmesser von optimalerweise mindestens 18, besser aber 20 Millimetern.\n<\/p>\n<p>Aber nicht nur der aufliegende Teil des Fingers verdeckt Elemente im Men\u00fc, sondern &#8211; und vor allem auch \u2013 die verwendete Hand. Je nach Blickwinkel und Position des Bildschirms verschwinden ein oder gleich mehrere Teile des Men\u00fcs unter ihr \u2013 und zwar selbst dann, wenn der Handballen nicht direkt auf dem Screen aufliegt.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/piemanuhand.png\" alt=\"Pie Men\u00fc mit geschlossenem Design\" \/><br \/>\n<strong>Pie Men\u00fc mit geschlossenem Design<\/strong>\n<\/p>\n<h2>Geschlossenes Design vs. offenes Design<\/h2>\n<p>Ganz gleich welche Position die Hand einnimmt \u2013 innerhalb eines geschlossenen Pie Men\u00fc Designs ist es dem Benutzer unm\u00f6glich, alle Elemente zur gleichen Zeit einzusehen, ohne die Hand anzuheben.\n<\/p>\n<p>Dies bedeutet f\u00fcr das Pie Men\u00fc, dass es keine Bereiche enthalten darf, die von der Hand oder dem Finger verdeckt werden. Um das zu erreichen, m\u00fcssen alle Men\u00fcfelder entfernt werden, die von den Nutzern nicht ohne Probleme gesehen werden k\u00f6nnen. Auf diesem Weg entsteht ein offenes Design, das hei\u00dft das Men\u00fc nimmt grob die Form eines F\u00e4chers an.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/piemenuopenhand.png\" alt=\"Pie Men\u00fc mit offenem Design\" \/><br \/>\n<strong>Pie Men\u00fc mit offenem Design<\/strong>\n<\/p>\n<h2>Nachteile des offenen Designs<\/h2>\n<p>Mit einem offenen Design sind zwar alle Men\u00fceintr\u00e4ge direkt sichtbar, allerdings entstehen andere Nachteile: Die Anzahl der Felder, die mit Aktionen belegt werden k\u00f6nnen, verringert sich zwangsl\u00e4ufig. Studien zufolge werden von den meisten rechtsh\u00e4ndigen Usern in einem Pie Men\u00fc, das in acht Felder gegliedert ist, die drei Felder unten rechts verdeckt (analog dazu von Linksh\u00e4ndern die drei Felder unten links), die dann dementsprechend wegfallen. Dies hat, je nach Einsatzgebiet des Men\u00fcs, eine merkliche Einschr\u00e4nkung zufolge. Sollen mehr Aktionen verf\u00fcgbar sein als Felder vorhanden sind, so m\u00fcssen zus\u00e4tzliche Felder auf eine andere Art bereitgestellt werden.\n<\/p>\n<h2 id=\"submenus\">Untermen\u00fcs<\/h2>\n<p>Eine M\u00f6glichkeit, mehr Aktionen zu erlauben, besteht darin, dem offenen Pie Men\u00fc jeweils Untermen\u00fcs hinzuzuf\u00fcgen. Mit den Feldern der obersten Men\u00fcebene werden so jeweils Untermen\u00fcs in Form von weiteren Pie Men\u00fcs ge\u00f6ffnet. Bleibt man beim offenen Pie Men\u00fc Design, erh\u00e4lt man so mit einer Ebene f\u00fcnf m\u00f6gliche Aktionen und mit mehr Ebenen entsprechend mehr Aktionen.\n<\/p>\n<p>Ebenfalls entstehen auf diese Weise weitere Gesten. Diese bestehen nicht mehr nur aus einer Bewegung in eine Richtung, sondern beinhalten Richtungswechsel. Von mehr als drei Hierarchiestufen ist jedoch abzuraten, da hierbei schnell komplexe Gestenabfolgen entstehen und die \u00dcbersichtlichkeit des Men\u00fcs leidet.\n<\/p>\n<h2>Learning by doing<\/h2>\n<p>Das Pie Men\u00fc umgeht auf geschickte Art und Weise die Problematik, die in Verbindung mit Gesten und Touchscreen Systemen entsteht. Aufgrund der vielen unterschiedlichen Interaktionsm\u00f6glichkeiten ist es unwahrscheinlich, dass ein User selbstst\u00e4ndig alle findet, vor allem wenn es sich dabei um komplexere Gesten oder Aktionen handelt. Das Pie Men\u00fc gibt jedoch stets visuelles Feedback zur\u00fcck und zeigt dem User den Pfad zu der gew\u00fcnschten Aktion an, w\u00e4hrend dieser sich durch das Men\u00fc bewegt.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/storyboard-geste.png\" alt=\"Gesten im hierarchischen Pie Men\u00fc\" \/><br \/>\n<strong>Gesten im hierarchischen Pie Men\u00fc<\/strong>\n<\/p>\n<p>Gesten werden so auf eine einfache Art und Weise entdeckt: \u201eLearning by doing\u201c.\n<\/p>\n<h2>Fazit<\/h2>\n<p>Die neuesten Entwicklungen und Projekte auf dem Gebiet der Natural User Interfaces zeigen ganz deutlich, dass sich die Technik zurzeit im Wandel befindet. Dies er\u00f6ffnet ganz neue Wege, doch um diese beschreiten zu k\u00f6nnen, muss auch ein Wandel beim User Interface Design stattfinden: Die traditionellen und etablierten Interface-Elemente m\u00fcssen auf der Grundlage von Touchscreens neu erforscht und gegebenenfalls auch erg\u00e4nzt oder angepasst werden, damit sie weiterhin optimal genutzt werden k\u00f6nnen.\n<\/p>\n<p>Die Interaktion mit Touch-Displays muss sich nat\u00fcrlich anf\u00fchlen und darf dem User keine gro\u00dfen oder komplizierten Bewegungen abverlangen. Das Pie Men\u00fc minimiert den erforderlichen Aufwand, um eine Aktion auszuw\u00e4hlen und ist auf einem Touchscreen einfacher und aufgrund der kurzen Wege nat\u00fcrlicher zu bedienen, als ein Drop-down Men\u00fc. Auch hat es den Vorteil, dass Novizen und Experten gleicherma\u00dfen unterst\u00fctzt werden k\u00f6nnen und bietet die M\u00f6glichkeit, die Besonderheiten von Touchscreen Systemen, wie zum Beispiel die Gestensteuerung, zu nutzen.\n<\/p>\n<p>Mit nur geringen Anpassungen lassen sich Pie Men\u00fcs in Touchscreen Anwendungen verwenden. Sie helfen dem Nutzer, schnell und gezielt zum gew\u00fcnschten Ergebnis zu gelangen und erf\u00fcllen hierbei noch eine ganz wichtige Regel: \u201eDon\u2019t make me think!\u201c (<a href=\"http:\/\/www.sensible.com\/\">Steve Krug<\/a>)\n<\/p>\n<p>Eine konkrete Designstudie zum Thema Pie Men\u00fc wird in einem <a href=\"http:\/\/www.centigrade.de\/de\/blog\/pie-menu-design-studie\/\">anderen Blogartikel<\/a> behandelt.<\/p>\n","protected":false},"author":17,"featured_media":0,"template":"","tags":[74,102],"class_list":["post-777","blog","type-blog","status-publish","hentry","tag-usability-de","tag-user-interface-design-de"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/777","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\/17"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/777\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=777"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}