Click-to-edit and click-n-drag combined

Question

I'm considering an option to combine two behaviours in a list:

• Click to edit an item (like in Asana)
• Click-n-drag an item (like in JIRA)

As illustrated in the screenshots, the cursor in both applications differs.

Since I believe it's possible to combine the two functionalities, how can I properly hint to the user that both possibilities are available? I know that a good solution might be to follow Asana's approach with a draggable beginning of the row (that also changes the cursor appropriately), but I want to consider the option of allowing the functionality on the entire row.

Any ideas?

Answer 1

I think the answer is provided by your first screenshot. The cursor changes to allow input over the text; it would I presume change to the hand cursor when it hovers over the drag indicator on the left edge of the list item.

Gmail also does it this way. When you mouse over an inbox item, the draggable indicator appears and when you hover over that part, it changes to the hand, when you hover over the clickable section (sender, subject), it turns to a pointer.

Answer 2

A possible solution.

1. A small "hints & tips" pop up that visitors get if the system detects its the first time they are new unique visitors. You could actually build a sequence of "hints & tips" that the visitor can either click on next or close this window.

However I would recommend (if budget allows) conducting a contextual usability test with a few users and observe their behavior. if your research shows that most users are instinctively using option 1 then perhaps its better to scrap option two completely. Remember to not overdo the number of options on an interface as that will increase the chances of the user not doing anything.

Answer 3

Usually, when something is editable, the editor activates on mouse-down. That said, if your make the line draggable when user clicks the text it might be confusing. Imagine the scenario:

1. User initiates mouse-down on text.
2. The editor appears.
3. User starts dragging.
4. The editor should disappear and the dragging animation start

Doesn't sound nice? Also, you may start the editing on mouse-up, but it will be non-standard and feel weird.

That said, I suggest to give up the idea of dragging when the mouse is on text. However, you can drag in all other places, where the editor is not engaged! That said, the answer to your question is show the "edit" cursor when the mouse over the text, show "move" cursor in all other places.