Nach einer Weile Ruhe kann ich nun mein neuestes “Projekt” vorstellen, das mich hauptsächlich nun während des Studiums nicht mehr loslässt: Es handelt sich dabei um eine Pie-Menu Implementierung in JavaScript und XHTML.
Gefesselt haben mich Pie Menus nun seit Längerem. Denn neben meinen Interessen für die technische Seite der aktuellen Entwicklungen interessieren mich auch neue oder ungewohnte, selten genutzte Benutzerschnittstellen.
Vorteile eines Pie-Menus sind dabei:
- einfachere Bedienung, da nur grobe Richtungen angegeben werden müssen, anstatt auf kleine Icons etc. zu klicken
- bessere Raumausnutzung (ringförmig) statt linearer Menüs
- intuitive Benutzung nach kurzer Gewöhnungsphase
Die Implementierung ist momentan noch ziemlich simpel, aber schon darauf ausgelegt, mehrere solcher Menüs in einer Seite unterbringen zu können.
Die Idee: im Markup werden ul-Elemente mittels der Klasse “jspie” gekennzeichnet, für diese wird je li-Element ein Eintrag im Menü erstellt.
Es lässt sich dabei nicht nur zu URLs navigieren, sondern z.B. auch JavaScript-Code ausführen, sodass den Aktionen alle Möglichkeiten offenbleiben.
Wem “Pie Menus” nichts sagen, dem wird folgende “Illustration” vielleicht weiterhelfen:
Für eine feinere Implementierung als die momentane werde ich wohl noch einige Zeit brauchen, aber der Prototyp dafür steht bereits und kann grob verwendet werden. Eine Demo-Seite werde ich in den nächsten Tagen einrichten. Dort wird dann auch der Quellcode veröffentlicht werden.
Die Darstellung des Menüs wird im Laufe der Zeit natürlich noch optimiert werden.
EDIT:
Wenn man eine Weile in einem Projekt drinsteckt läuft man gerne Gefahr, viele Aktionen die für den Laien schleierhaft erscheinen mögen als völlig klar und “trivial” anzusehen. Um nochmal auf die Funktionsweise eines Pie-Menu zurückzukommen:
- das Pie Menu wird vom Benutzer aktiviert (hier durch Gedrückthalten der Maus länger als 300ms)
- innerhalb des nun dargestellen Menüs wird eine Aktion ausgewählt – meist durch Bewegen der Maus in Richtung der Aktion (hier mit gedrückter Maustaste – eine Aktion wird nur gewählt, wenn der Mauszeiger über den Rand des Kreises hinaus bewegt wird)
- durch Loslassen der Maustaste wird die gewählte Aktion bestätigt und ausgeführt – soll keine Aktion ausgeführt werden lässt man die Maus folglich innerhalb des Kreises los
Nun noch ein (akademisch außerordentlich wertvoller) Link zum Wikipedia-Artikel: Pie Menus in der Wikipedia