Expandable links
Even though I am not a design/usability specialist I will discuss the design process for a rather minor detail in an application.
I have one of those lists you will find in almost every application which lists the items the user entered. Now it should be possible to move these items to two different categories. How could this be solved?
The easiest solution would be to add two links to the end of each row. But how do you name those links? “Move to Category A” and “Move to Category B”? Hm, that takes too much space and it looks ugly if you have to repeat it on all rows.
The next idea is to use icons instead of text. But this causes a similar problem as above. How should the icons look so people understand them?
Another idea is to put a checkbox in front of each row and to have a select box with the possible actions at the top and/or the bottom of the list. The problem here is that the user has to click at least three times to move an item.
What about a drag and drop solution? Well, drag and drop is not very intuitive, and it is difficult to visualize that an object is draggable.
Maybe we could add a select box to the end of each row? Well, it is still two clicks for the user. Can we reduce it somehow to a one-click action?
We could add a link to the end of each row and then on a mouse over event we show the possible actions. So with only one click the user can move a list item to the desired category. With that I have found the solution for the problem described at the beginning of this post. Here the visualization of this idea which I called “expandable link”:
The first image shows simply a link, and the second shows what happens on a mouse over event on this link.
Up to now I didn’t test this solution in the wild so I cannot say how it will be accepted by the users, but if they are like me, they will find it cool ;-)
Hi Daniel
This is a great idea - mainly because I’m doing a similar thing :)
For ‘admin actions’ (those that are only displayed to users who have appropriate access) a small ‘[+]‘ sign is displayed top right of the div containing the item to be managed. When hovered over, a list expands with all the possible admin options (Edit, Move Up/Down, Move Above x, Move above y etc in an unordered list).
As we’re providing admin functions from the normal user pages, the great thing about using the ‘[+]‘ is that it’s small enough to not really mess up the rendering.
~GreyCells
I like the solution you’ve come up with. I think this works really well for individual items, but I don’t think I’ve seen a really elegant method for moving multiple items between lists. It would be nice to be able to quickly select all the items I want to move maybe with a click-and-drag selection box then click a “Move to Category B” link.
If anyone knows of a slick implementation of easily moving multiple items from one list to another, let me know. :)
@GreyCells: As long as your list with commands is not too long that’s a good solution ;-)
@hydeph: Yes, it is for moving individual items.
An idea for moving multiple items is to introduce a “move” mode. The user clicks on a button to switch to the “move” mode. As long as the user is in this mode, each item he selects is moved to the other list. But it depends on the concrete application whether such a mode makes sense.
This would be perfect for links!
I e clicking a link and a tiny message appears, asking you if you want it to be opened in the current window/tab or in a new.
Maybe there is something already?
@Rollo: I don’t know such an implementation, And I am not sure if it makes sense to implement it in an application as the browsers already provide this functionality when you do a right-click on a link.