Faster mobile menus (idea #99)

I've always been a fan of the innovative mobile keyboard "Fastap" from Digit Wireless. It uses essentially two "layers" of keys and "non keys" to achieve a high density keypad, one key per character, in the same space as a traditional numeric pad. This allows faster text entry. Digit Wireless have claimed that data revenues are increased as a result of using Fastap. This is believable because of a simple design principle that seems to apply to mobiles, which is if it's easy to do then it's more likely to be done (which on a mobile probably leads to revenue). I know, that's no deep insight! This principle probably applies to most things, but then go figure why so many mobiles don't follow the rule.

I have recently become frustrated with the interface of my mobile. The home page has a selection of icons for entering various applications. This is a common home page design. However, there are more icons than screen space, which means I have to scroll down to access the hidden buttons. On my phone, this means doing one of two things. Either I grab the slider widget on the right and slide it down (my phone is stylus driven), or I keep pressing the down key to select the icons one by one until I get to the hidden icon I want. The slider is out of the question if I want to use my thumb in place of the stylus, so I'm left with pressing the down key numerous times. Is there an alternative?

Well, the simplest idea is simply to give me a simple "next" key (or similar name) so that I can move to the next set of menu icons in one hit and then select the icon. This is a two-step process. However, there is another approach similar to the Fastap one in principle, but implemented using a graphical technique made popular by the Mac interface, which is transparent overlays. Imagine two pages of icons displayed on top of each other. Of course, that would be messy. However, now offset one from the other so that icons on the bottom layer overlap with gaps on the top layer (and there will be some overlap so as to allow large icons to be used). This will still look messy, so now blur the lower layer slightly and add a transparent overlay to the top layer to give continuity.

With this approach, I can now see all the icons. Hitting the space between the top icons (i.e. the bottom layer) will bring the underlying icons to the top (in focus) and move the top layer to the bottom (blurred). Accessing any icon is now only two presses. The advantage over the paged technique above is that I can already see the icon that I want to press, whether on the top layer or the bottom one. If I could remember how to use Photoshop, I could mock-up a demo. Anyone who could do this in Flash, please have a go and let me know how well it works.

Buy my book (Amazon US/UK)
Join my email list
Subscribe to my "100 Mobile Product Ideas" free e-book

Tags: mobile, UI, fastap, icons, menus, usability