Make click, drag and drop and link between both tables more obvious to user

Question

The two tables in the window below are intrinsically linked.

Their purpose is to help the user to quickly allocate a pickup job to a driver. In order to do this, the user simply needs to click on the job in the first table, drag it over to the second table and drop it onto a driver in the second table. The box on which the job is dragged on to turns green, in order to show the user that the assignment was successful.

Alternatively, the user can click on the auto allocate button and the system will allocate the jobs automatically to the driver.

I have tested the window out with a few users, and they have said that the relationship between the two tables is not immediately obvious, and they do not know that they need to click, drag and drop. How can I make it more obvious to the user that they need to carry out this action?

Answer 1

Immediately looking at your design there are no visual clues on draggable elements. The first thing I would do is add some sort of visual aid to these elements to guide the user

You could even take this further by adding visual cues to the overall container

However I do think the overall layout is the actual issue of confusion (unless I misunderstood your user requirements). From what I understand

• User can drag Jobs to Driver (identified by id #)

They two column layout you are using is usually used in sorting and grouping draggable elements. Such a layout would encourage users to may child elements between group A and group B until they are satisfied with the groups.

Example:

As you can see in this example child elements are sorted into groups.

From what I understand you have a 1 way draggable relationship matching Jobs to a specific driver. If this is the case I would challenge your current layout.

I would turn the right column into a list of all the drivers rather then section that looks similar to the jobs. Here are two quick options I came up with

This layout immediately eliminates the 2 way draggable relationship that your original layout represents. The visual cues on the elements on the left should give the user enough indication that they can drag jobs to drivers.

Hope this helps!

Answer 2

Jason has written a decent answer for emphasising dragging by adding visual cues which you should implement, but the problem is a more deeper than this.

From your wireframes, I'm inferring that the interface is a website and not a mobile app. And on desktop interfaces, dragging, swiping and other gestures are not so obvious or intuitive and herein lies your core issue.

It does not look like you are supporting regular click-based task allocation (apart from auto-allocate). So, your to-do list should be:

1. Make provision for regular click-and-allocate interaction.
2. Show a transition animation (task dropping on driver) when the user clicks and allocates (This provides a visual cue which indicates that the interface supports dragging and dropping)
3. Provide a written cue/hint as well ("You can also drag and drop tasks onto drivers to allocate")

Services like Google Drive, Dropbox do a very good job of this by providing traditional click interface for uploading but also providing written instructions and visual cues indicating the support of drag-and-drop interface

Answer 3

As someone who recently finished designing an interface in which drag-and-drop was the primary method of accomplishing the task, I agree with the points that Jason and BatlaDanny made about clueing the user in on what they are supposed to do. Written instruction is great but, if possible, a transition animation would do wonders especially for those who don't own smartphones (yes, they exist) or will not connect the two ideas.

One of the things that struck me from Jason's examples was the removal of the outline around the second table. Because the two tables look like separate and distinct containers, it would be hard for someone to guess that they are related except to display information, not to act on it.

As far as design goes, my suggestion would be to remove the table border from one or both of the tables and have a simple line as a separator. This line can as have an arrow that can serve as a continuously available visual cue (if using animation). Also, consider changing the size of the drop target so that it is bigger or at least the same shape as the drag object. We humans tend to be pretty literal in some regards and would never consider trying to put a coffee cup inside of a thimble, even if the laws of physics do not apply in a virtual space. Jason did something similar in his example.

Also, I'm not sure what screens you have that follow this interface but I think you should have a confirmation that includes more than color. 1) It would make it more accessible and 2) if there were 20 assignments made, where do they find out who had what and who might have more. With a drag-and-drop interface, there might be (still testing, so just guessing) a tendency to drag to the nearest available candidate, making even distribution problematic.