16

I am working with a Javascript dockable window framework called Golden Layout for a web app I'm developing. On their site, they have two examples for how to add windows to their framework which are the two I am currently looking at implementing, I'm just not sure which is better for the user.

The first is a drag and drop style method. The user has to grab the specific component from a list of components and place it on the page. This is nice because it allows them to place the module where they want, but the user has to click and drag to achieve this effect.

The other method is a click to add method. The user clicks on the component they wish to add in the list and it adds the module to the page at the top most level. This is a good approach as well, but the user then has to go over and re-position it (if they choose to do so). I could also see this getting confusing if the user has lots of modules added in different locations, they might not be able to see where it was placed.

Question:

Is there a best practice on how users should add components to a webpage? Do users prefer to drag and drop or click to add? Are there any statistics on this?

Improve this question

5 Answers 5

Reset to default
24

As I've learnt – the more options you provide for the same actions – the better the application is. So the advice would be to implement both drag-n-drop and click-to-add, and you don’t have to worry about which one users use.

Even better, you have the option to track which one is most popular in your specific case, which may differ from an existing more general study.

Improve this answer
4
  • 6
    It also promotes terrible interface creep.
    – Lightness Races in Orbit
    Jul 31, 2015 at 19:23
  • 8
    Very informative comments. You provide all the necessary critique and solves the issue with a lot of thoughtful insights. This is worth a gold badge - for both of you. Thank you! <3
    – Benny Skogberg
    Jul 31, 2015 at 20:27
  • 1
    In my opinion, this is the way to go. Drag-and-drop is more convenient for some users/devices while others are more comfortable with the old-style click-to-add. Give them the choice.
    – Mast
    Aug 1, 2015 at 13:35
  • 1
    My mom will never use drag-and-drop. She is able to cope with the button to upload things, and will upload one file at a time, even if you can upload multiple at once. I'll nearly always use the drag-and-drop functionality if available, and find the button cumbersome. I would agree with adding both, especially if uploading is not a one-off thing (such as when uploading an avatar).
    – Sumurai8
    Aug 1, 2015 at 17:11
8

Do users prefer to drag and drop or click to add?

One thing to consider is that drag-and-drop can be difficult with a laptop touchpad. If click-to-add can be used without an additional drag step, you'll likely make some laptop users happier. This also applies for touchscreens, where dragging might be confused with an attempt at scrolling. Modern touch-capable browsers handle this reasonably well, but not perfectly - and it can occasionally be frustrating.

Also consider your target audience. Do you need to support handicapped users? Some may find it difficult to use a pointing device (arthritis? RSI?). Others might be visually impaired and again would be left with just a keyboard and screen reader - in their case, having a window/MDI layout might not make sense at all.

It might be that the majority of your users prefer drag-and-drop, but it might also be necessary to support an alternative (keyboard-friendly?) mechanism if you intend to support such users.

Improve this answer
5

It depends, click to add and drag and drop will have the same outcomes with slightly different processes.

If I click to add, then the expectation is that I've chosen something specific. The pro of this approach is going to be that specificity: "I want this put into that bucket." When that is the logical outcome of my effort, a click to add makes perfect sense. A good example would be click to add to a cart. There's not many other places I might want to add something I want to purchase, and thus clicking to add makes perfect sense. The con would be less tangible control. By that I am referring to the fact that I didn't physically put it there as a user, it magically went in, but maybe I wanted it to go somewhere else. Be cautious about clicking to add something if it's unclear where it needs to go.

If I drag and drop, then the expectation is that I have more than one place I could drag, and that I am choosing that place. The pros of this approach is the tangible activity of moving it: "I can drop this here or there... or even way over here." A good example would be an item on a list or set of lists. Wunderlist, for example, uses drag and drop to let you reorganize that item on a list. The con would be the chance of error, or worse, the lack of commitment by the user. "What if I don't want it there," would be a fair question, but could lead to a user being unsure about where to put it. It also lacks the immediacy of a button that does the 'putting' activity for you.

Improve this answer
1

Taken into account the context of the user plays the most important role.

If your user is working on a laptop using a touchpad then it would be harder for him or her to drag the window before dropping it. How often is he going to do it? If this is not often enough then it is ok but if the frequency of it is high then tapping would be easier to include the window and the layout would be secondary.

On a tablet/phablet it would make more sense to drag n drop as it is pain free for users to drag items, usually it might be harder to have accuracy with your finger when tapping a small button rather than dragging a larger item. However in the sample from Golden layout the button and the initial drag-item have same size.

The cons of clicking at the browser is the feedback the user gets from the interface. At this sample in the golden layout page there is no feedback that something has happened, there is only a sudden change in the layout so the first time the user will be surprised but then he/she will learn it.

The cons of dragging and dropping is that it is a little bit painful - especially when clicking all day at the office - to put pressure with your finger until you decide what is the best position to drop the item.

Design Opportunity

This drag n drop functionality now has two states: first click to start dragging and secondly leave the mouse button to drop and apply the action.

What if it had three states:

  1. Click to start dragging
  2. Optional: Just drag away and drop too quickly (<1s) to specify that this is the item you want to use, you just dragged it out of the toolbox. So stay in a state like you were holding the mouse clicked
  3. Apply the action either by leaving the mouse button if second state were never triggered or by clicking

In simpler words to just drag and drop quickly, move the mouse around pondering which is the place to be dropped and when you like just click to actually drop it. Of course you could always hit the esc button or click on the initial item to cancel the current state.

Wouldn't you like to be at the following state without pressing the mouse button? golden layout widget

It would be nice to avoid Repetitive Stress Injury with good design

Improve this answer
1

I am going to take an unpopular stance, because I believe it is right. It depends on how versatile you want to be which is easier. Drag and drop is easier when the source and destination are both in view and in reach. Click to add is easier in all other cases. Therefore to accommodate maximum versatility, plan for both, so that when the choices become too big for the screen, easy stays easy and difficult stays possible.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.