Magic menu, one navbar to rule em’ all

How would you feel if I told you that you’d never again have to create another navbar, toolbar, or menu – And that you’d never again need to worry about how to have your users navigate your apps? Sounds like science fiction? The Magic menu arguably is that thing. It allows you to use the same navbar, throughout all your apps, and arguably allows you to seamlessly integrate, all your Phosphorus Five apps, resulting in that the user would experience these apps, as if they were simply modules, in an application suite.

The Magic menu from one level is a plain old menu, or navbar if you wish. It allows you to declare your menu items as a tree structure, having an infinite number of dropdown items, creating any number of menu items you wish. However, it features a couple of unique properties, which once you’ve gotten used to, will highly likely feel very comfortable.

First of all, it will never show more than 5 menu items at the same time. The items it shows at any point in time, will also just so happen to be the 5 most recently used menu items. It comes away with this, by displaying its menu items in a pageable grid, which allows the user to easily search for items he’s looking for. See the screenshot above to understand how it will look like.

Secondly, it will automatically plug into any Phosphorus Five apps. Any P5 apps you have, that has a widget on its page, with the CSS class of “toolbar”, will automatically have an additional button injected, which allows the user to launch the Magic menu.

Third of all, it allows you to associate some piece of Hyperlambda to a phrase, word, or sentence, describing your menu item. Later when this phrase or word is selected by the end user, that Hyperlambda will be evaluated. This allows you to easily create any number of menu items, and have any arbitrary Hyperlambda evaluated, once the menu item is later clicked.

And finally, it even allows the user to select menu items, using natural language, by literally speaking to his computer, to select menu items. The last feature unfortunately only works in Google Chrome at the moment, since it’s dependent upon some of the bleeding edge Speech API standards, only currently available in Google Chrome. If you enable it though, then when some menu item has been selected, you can have the Magic menu read out loud some piece of text, using Speech synthesis. This feature, literally allows you to control every single aspect of your web apps, using nothing but natural speech, while listening to the feedback your computer is giving you, which depends upon what you tell your computer. Hence, you can entirely replace your GUI with a “VUI”, or Voice User Interface, no longer making it necessary to even look at your phone.

The last feature, allows you to for instance compose an email, while driving your car, or do anything else you would normally need your eyes and hands to do, without anything but a loudspeaker and a microphone.

A friend of mine, which tested the Magic menu said to me; “This is pissing on Siri”. I probably wouldn’t have used such strong words, but once you enable speech recognition and speech synthesis in your Magic menu, Siri from Apple basically appears like technology from the stone age. The Magic menu also features a very rich administrative dashboard, allowing you to easily configure and manage your items. You can see a screenshot of its backend below.

From its backend administrative interface, you can browse, view, delete and edit existing menu items, and create new items if you wish. You can also easily filter items, finding the exact item you’re looking for. And each menu item, can be localised and translated, into any language you need to support for your end user. Below you can see an example of editing an item, which happens to be localised for both English and Norwegian.

In the above screenshot, you can also see the code editor, for associating Hyperlambda with your menu items.

A menu item can be configured to be either a “Global” command, a “Private” command, or both. A global command, is a menu item that will be “sticky”, and always be available for the end user to choose. Regardless of which “dropdown” level the user has chosen to enter. These are commands that the user needs access to, regardless of where he is in his menu structure, and where he has navigated to. A private command, is a command that is only available for the currently logged in user. The latter typically includes administrative commands, that should not be available for all users, but only a “root” account in your system.

If the Hyperlambda for your menu item returns “false”, then no new stacking context is opened when the item is selected. If it does not return false, a new stacking context will be created, which becomes the equivalent of a “dropdown menu item” in a traditional menu system. The fact that the Magic menu is capable of creating such “stacking context”, happens to basically facilitate for it being an execution tree, or a decision tree, allowing the end user to literally have “conversations” with his computer, such as the following illustrates.

  1. User; Open a page!
  2. Computer; Which page?
  3. User; The one I created yesterday!
  4. … computer opens page …

Configuring the Magic menu can also be done during normal usage of your app. If you search for a phrase or sentence which yields no results, or speak a sentence or phrase if speech is enabled, and your phrase yields zero results – You will be given the option of creating a new command, if you are logged in as “root” in your system. Below is a screenshot demonstrating this feature.

This allows for instance a sys-admin, with some basic knowledge about programming, to configure the menu items, literally with his voice. Hence, resulting in that the burdening of configuring navigation, is taken away from the main developer, and left as an exercise to the customer. Effectively making all your apps become extremely “Agile”, and the process of creating your apps, ends up being completely “customer driven”. Imagine the following scenario.

Customer; I need a new button.
Developer; Speak to your computer!

The video below demonstrates one of the early versions of the Magic menu, and how it is interacting with the user, when speech is enabled.

I know that the Agile Manifesto explicitly claims that “Agile is not about the tools”. However, if you use the Magic menu, your apps literally becomes Agile by default – Allowing your customers, to easily modify almost any aspect of your apps, using nothing but their voice. See the video below for a demonstration of how this might occur.

The combination of the features shown in the above video, literally makes your apps “become alive”, and facilitates for your customers, being able to tie together the UX, such that they can decide themselves to a large extent how the app should behave, feel and interact with its users.

That’s Agile!


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.