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?
6 comments:
Fred hi,
The link to Artifactory live demo is broken ?
Amit
Thanks fixed...
Just a quick reaction:
> * They are not Web Browser friendly.
I assume you mean that most users will realize that this is a "web application" and usually in that case, right-clicking does not work. Which is correct, but that fact is due to a technical limitation (it used to be impossible to have right click contextual menus before more recent browsers and Javascript allowed that). Now that it is possible, it might be a good idea to use it to be more consistent with regular (non web) applications.
> * They don't actually save much in terms of clicks and gestures (right click, move, left click).
Yes but it takes longer to have to move your mouse to the left of the screen than to click.
> * They get in the middle of reading the lists of elements.
True.
> * They never disappear when you want them to, and always disappear before you find the menu item you want to click on.
They should not disappear automatically and they don't under Windows for example.
> * To remove them go away you need to click elsewhere, crossing your finger you did not actually click on "buy in one click" button.
Pressing 'Escape' should make them disappear without having to click elsewhere.
As a conclusion, I think your solution is not bad at all and very usable (except moving to the left of the screen is annoying), but in my opinion it is almost always better to use "standard" solutions even if they have problems.
PS: I do think right clicking on an item should select that item prior to showing the contextual menu.
:)
@Benoit: Glad you like it, and I agree with you: At the end the implementation and details makes the difference.
I still think that, if both solution are valid the simplest and easiest one should be used :)
So, if everyone is wrong.. Does it make it right?
Hi Fred,
I think it's an elegant solution.
Yet, if I had to implement it myself, I guess I might have shown the icons within the row itself, while hovering over it (to the right of the artifact's name).
That way, the user wouldn't have to move the mouse all the way to left to reach the popup.
Now, you might be asking how would a user identify the icon's meaning if it's not clear enough.
Well, IMO, there are 3 options:
1. A tooltip will be displayed while hovering over the icon.
2. A legend beneath the table.
3. Both. :)
Hey Fred. Some days after reading your post, I found the same functionality on a Motorola website. You have to point over on the phones. The idea is the same one. but there it was done using Flash and Artifactory's is Javascript :)
Post a Comment