Lists and Contextual Menus, MMI nightmare!

I’m more of a “server side” kind of developer.
When I see too much HTML, CSS and Javascript, I need pills!
Still, I like to challenge the MVC architecture of UI frameworks. I even wrote my own web framework for fun (but some poor developers, in India I think, are now suffering from it), and played with Swing developing Stellarium4Java.

So, UI is not my cup of Tea. Now, for the latest release of Artifactory, I needed to managed the communication between the UI Designer and the Web developers. I learned a lot from this interesting experience.
During this process I encountered a really basic UI design issue. It was so basic I got worried I missed something!
The point is: The way we are used to manage lists, selections, actions and contextual menus is totally incoherent.

In real UI applications (fat client and Ajax), you get a list of elements and then you can act on them. Usually, you select a line, then some Action (Buttons, Menus) become enabled and you can activate them. But to minimize the amount of clicks and mouse gestures there are also contextual menus. This is where it gets weird…
You select one line, and then can actually “right click” on another one. That way, the list of Actions on the contextual menus does not match the one in buttons and menus.
You can force select the line where you right click, but few Applications are doing it!

The other issue is that contextual menus are really not that great (i.e. I hate them!):

• They are not Web Browser friendly.
• They don’t actually save much in terms of clicks and gestures (right click, move, left click).
• They get in the middle of reading the lists of elements.
• They never disappear when you want them to, and always disappear before you find the menu item you want to click on.
• To remove them go away you need to click elsewhere, crossing your finger you did not actually click on “buy in one click” button.

One solution on the Web (and on the iPhone/iPod, where there is no right click :), is to add action buttons directly in the list itself as columns. That works and can be nice looking (with good icons) but this technique get very heavy (bunch of garbage icons all over). Anyway, it is not scalable: 5 icons it’s already too much.

So, the UI designer came with the really cool idea: A hovering toolbox appearing on the side of the list when rollover the line element.
At first, I thought:

• It may work but we’d be going against a big UI muscle memory about how to use a list.
• People will hate it!
• The toolbox is too far from where my mouse is, and going there will be very annoying.
• We are not here to reinvent UI and Men Machine Interaction!

But, anyway I took the chance and we implemented it. To see it, you can go to Artifactory live demo, do a quick search on “log” for example, and hover above the list. It’s still a beta version and the previous select/link actions are not removed, so it may be confusing. As anonymous user your action list is limited, but you can still get the feel of it.

I’m using this feature for 2 weeks now and frankly: I love it!
I hover on the list in the left side of it, I can read the line I’m on, and then activate the action with one click. Just natural moves and ONLY ONE click.

May be I’m under the influence (it’s our application at the end :), and that’s why I’m anxiously waiting for the feedback!
What do you think?