Thursday, August 12, 2004

Icon Based Menus

We have all used menu bars in every operating system. This has been the same since the original MacOS and has been copied for every other operating system without much differences apart from its location. MacOS has a single menu bar while windows has a menu bar for each window and the menu items themselves. Apart from that, nothing has changed. Menu items are still displayed horizontally and drop down vertically. Its still hard to get to sub menu items with a quick dash of the mouse without it disapearing. This has been one of the most unchanged parts of the desktop metaphore. It's time for a change. How? We have been using icons also from the first decade of GUIs, so why not apply the same for menus? But icons are big and menu items are small. Thats just the problem... menu items are too small. When menu items are stacked in a vertical manner, this makes it hard to select a menu item without missing it sometimes. If its a list where a mistake is not a problem, menu items do actions and tapping Print instead of Save makes you having to rush to the task bar to cancel the print job is not exactly user friendly. And dont think of seperators... this would just look worse. One of the problems with icons is because they take alot of screen space, it's hard to scroll them. This is what can be solved to make it usable. Imagine a film strip... it has loads of pictures seperated from each other. Place it aligned horizontally to the bottom of your display and imagine every window on your desktop has a thumbnail in the film strip. Slide the film strip left/right (moving the film strip but keeping it aligned) and see how the thumbnails move off-screen while others come on-screen. To do this inside the user interface, you would just drag the mouse/pen left and right to scroll the film strip. Now imagine that the end and beggining of the film are connected which means that scrolling all the way left will return you to the original set of thumbnails on-screen. Tap on a thumbnail would be just like tapping on a menu item and because menu names could fit in under each icon you get a big target to tap, an icon to identify with and text to attach to the icon to learn the icons identity. Because only a specific set of icons are displayed on-screen at any time, it looks less complex then 15 items on-screen even though with a single drag you can get to them all (left/right). How to do sub items? Easily, tapping on a menu icon which is a sub menu (it has an arrow next to the name of the menu icon) navigates to show only the icons of the sub menu. How to get back up? Tap the back button below the film strip. Wait a second... this sounds alot like folder/file browsing? what's the difference? The difference is the way you scroll allows you to bring folder/file browsing as a menu experience. We use so many icons per day why not memorize some more. You could still allow users to use existing menu design but allowing them to experience this by default. I dont see any major OS's doing this untill someone else has, so I am going to do so with Screens Environment to see how well users like it. Just to give you a major reason why I will be using it? For window clutter. I believe that this could be the key to stop window clutter since I will use 'spotlight' on the center icon of the strip. What does this mean? This means that if an icon reaches the center inside the spotlight, it's window representation is brought to the front of the display. If it leaves the spotlight it returns to it's existing location. This would allow with a single stroke to switch between 3-8 windows depending on the number of icons on-screen at a single moment. You could find the window you want by it's true representation instead of a title (windows), icon (MacOS) or shrinked representation (MacOS - Expose). It would feel just like flipping through pages in a book. We have done that for centuries, why not apply that in window searching. Many guidelines say dont include more than 6 items per menu. In todays requests of features that's nearly impossible and ends up in either too many items per menu or too few features. This has never been the case in icons and therefore has no problem in icon based menus since the number of menu items the user sees are less than 6 but the number he can get to is more. What developers/user designers can do is put the 6 icons that a user sees when he first activates the menu is the most common and leave more advanceed menu functionality in a scrollable reach. What about menus which items can be tapped and have sub menus? That should not be the case. Make the 'default' sub menu item centered when the user taps on the parent menu item. Remember though that text is still under each icon. Learning icons is harder than reading text so text must be there (not via tooltip) for such a design to be successful. And keyboard shortcuts also still exist because of the text. Also note that the icons must be simple enough to understand which is a tricky part but could probably be done if spent alot of try and testing. And this is NOT a toolbar. It's a film-strip. What's the difference? Toolbars are not scrollable while film-strips are. You can drag & drop icons to move them to your own order (every user and thier preferences). This design is not perfect and is just an idea without any working models behind it. I will post a more updated version when I can finish coding the components required for it. Of course this theory will have to prove itself in the beta testing of Screens Environment... but it's a thought worth thinking about (in my opinion).

3 comments:

Anonymous said...

Wonderfull! I like the filmstrip idea, and I think this will suit a PDA perfect.

Anonymous said...

Any comments on some of the more insightful stuff people have said on OSNews in regards to this idea? Esp Brain Hawley's comment was nice and deserves a response, me thinks. Plus ofcourse the requests for mock-up's, even if only pictures.

Anonymous said...

I do not know whether menus should be more of a browser or a spatial interface. I believe spatial is better - I use the spatial option on OS X, and nobody likes spatial anymore.

A menu of icons that scrolled left-to-right would perhaps defeat the idea of a menu, in case most of the options march off the end of the screen. In any case, it is worth trying.

A customisable icon menu would also defeat another important spatial concept of the original menu bar - Apple intended it from the very start to be File / Edit / View, etc. It has its detractors, but having it as a constant throughout the entire interface gives the new user a very good idea on what to expect from the menus. Such hints are even more important in the light of icons being harder to understand.

Assorted quibbles:

It is very hard to depict an icon for certain items, and for all people. For instance, the Mozilla Firebird toolbar icons have a hexagon as a stop sign - such a sign is common in the US and a few other countries only. Even the little parts of an icon - let's say the proportion of fair skinned and dark skinned people in an icon representing a community - is going to offend somebody.

The screen is longer than it is tall - that is, you can reach the menu bar on Mac OS or the taskbar on Windows/KDE/Gnome much faster if it's on the top/bottom than the sides.