This topic has a very simple, yet deceptive name: “Drag and Drop vs. Click”. On second thought, it’s nonsense. How could two actions that are so different possibly be compared? Well, let me introduce collections.

Collections are by far one of the most underrated features of our web-service. 80 percent of our customers don’t use them because they simply don’t know they exist. Collections allow the user to group icons so they can:

  • recolor them all at once
  • resize them all at once
  • generate a font
  • keep icons structured, e.g. “FoodAppCollection”, “WhyIWearPinkCollection”

The goal of this article is not to promote this feature (I doubt that would help), but instead to use it as a playground where both procedures (dragging and clicking) serve one purpose – adding an icon to the collection.

Drag and Drop and Click

Showcasing both ways of adding an icon

Dragging is a very common behavior used in many interfaces (most obviously, like a file manager in your OS) for adding moving something. Left-clicking, on the other hand, isn’t often used for that purpose. So, what’s the point? Well, in our case it’s extremely handy to use clicking because it saves a great amount of time. We’ve conducted studies on how people add their icons, which will be presented alongside a bit of analysis. Hopefully, you’ll find it useful for your own projects.

Survey Results

Of 13 participants only 1 or 2 had ever used collections before, so most of them were seeing them for the first time. Here are the results:

  • Dragged an icon 8 (~62% attendees)
  • Clicked an icon 5 (~38% attendees)

That 38% is actually not so bad considering it’s a not-so-common to add something by left-clicking (shopping carts use a slightly different pattern). Plus, we never provided any hints or visual clues for how we expected people to add icons, so people had to come up with their own way of doing it.

Our overall environment lets us implement both ways of doing things – kind of a basic decision. If you don’t know what to choose, pick both. But let’s explore a few factors that may affect your decision.

Target Audience

Our audience is quite varied – developers, designers, and pretty much everyone who uses icons in their projects, be it in an app or on T-shirts. This, and a few other factors, let us implement both mechanics to serve the needs of our audience. There may be more specifics however, according to these studies:

“Children were able to perform point-and-click interactions significantly faster and with significantly fewer errors than drag-and-drop interactions, and more children preferred the point-and-click interaction style.”

That means they were more effective and had, overall, better learning experiences. Let’s not forget that games always teach us something, otherwise they would not be interesting for our brain. Of course, you may say that dragging is a learning field as well, and many games are based on this mechanic – which is right. It’s all about whether to become more efficient at shooting pigs with birds or playing a puzzle games.

Same for older folks – I believe there may be issues with coordination and fatigue if you force more mature users to constantly drag something with mouse. These may be niche examples, but they show how important in some cases target audience needs may be for your app.

In short: the special aspects of your target audience may affect your choice. See more in “Productivity, efficiency, and habits” below.

Complex Interfaces

I’m not saying that our interface is very easy, it’s actually the opposite, but in the context of collections it’s a one-way ticket – you have one icon and one place for it to go. Now, suppose you have a few potential places you could “send” an icon – say, a shopping cart, or some editor. To use a more “practical” example let’s think of a “Trello” web-service. Basically, it’s a board with notes that can be dragged all around.

trelloengagee

You can drag not only notes within columns but the columns themselves.

If you click something and it automatically went somewhere – that would be awkward at the very least. Instead, you provide only one mechanism – dragging. Dragging, in this case, gives your customers a great variety of options to where they can drag the object, and a good interface would use that very effectively. Meanwhile, left-clicking is free and can be used for any other useful operation – say, opening this object’s contents or settings, which allows you to keep your interface simple. Even more importantly, if clients are used to one procedure you can successfully implement other ones based on it. For example, you can add new modules to your app to extend it but people can still use old procedures. If you use that wisely, trying out new features may become a very pleasant and rewarding experience for your customers.
In short: complex interfaces that implement both procedures for the same purpose may lead to ambiguity and chaos.

Productivity, Efficiency, and Habits

As I mentioned, clicking saves a good amount of time and energy. Well, not when you drag 5 icons a day. Suppose you need to drag 5,000. Now let’s talk about efficiency. So why not implement both and let people choose for themselves? Well, that’s the thing called habit. During my studies when I asked people after they “dragged” an icon to find another way of doing things, such as by clicking, 80% of them were discouraged. They tried dragging to another place and were looking specifically for “another-way-of-doing-things” button but were never successful in finding a clicking mechanism. However, one time I used a prototype with Drag and Drop function not working (to be honest, it wasn’t intentional).

One doesn not simply drag and drop the icon.

One does not simply drag and drop the icon.

Guess what? They found the clicking mechanism quite successfully on their own. Many psychological mechanisms are involved, but there’s one I should mention specifically – sufficiency. After discovering a working successful way of doing things people may completely lose the motivation to find another one, even if the mechanism they’ve found is not the most efficient and optimal.
In short: it’s much easier to add a new feature or behavior than to get rid of unproductive but “sufficient” old ones. This is especially true for an enterprise environment where such issues may lead to losses in productivity. Customers may also find some interactions not convenient but will be bound to them by force of habit. Even displeasure with your app may come to be a habit, so be careful.

Mobile Platforms and Touchscreens

Gestures are far more natural to people than dragging with the mouse. Most mobile apps I saw tended to use gestures for that reason. However, it’s also about saving space. Considering the small size of mobile screens, it becomes even more important to optimize interfaces, so doubling the procedures may be a luxury. As for the rest, everything already discussed applies to mobile platforms as well.

In short: Gestures are a very pleasant and natural mechanic for people. I’d suggest using them everywhere it’s appropriate and make sense. Be careful of overkill, though. Some people may not use your application in public just because it’ll look like they’re trying to conduct a mouse orchestra.

Summary

The combination of these two mechanics may benefit your application or totally ruin your user’s experience. I hope this article helps you make the right choices for your environment. That’s pretty much it. I never expected such a simple topic to grow into such a big article, but believe me, there’s much more to say, so you got off lightly.
Now tell me, are you a clicker or a dragger? And why? Share your examples in the comments as it would be very beneficial to other readers as well as myself.

About the Author
Andrew Burmistrov is a usability specialist of Icons8. He started his career as a phone support specialist, telling jokes while customers were rebooting their computers, then moved to usability testing and occasional writing.

 

Try free tools for creators by the Icons8 team

Icons8, a library of about 120K+ free icons and free clip art images
Lunacy, free graphic design software with built-in design resources
Photo Creator, free collage maker with AI-based technologies to make custom photos for your story
Fugue, royalty free music for videos of any kind
Pichon, the desktop app to download icons and clip art and use them offline
Icons8 Photos, the big collection of free stock photos designed to work together
Ouch!, a library of free vector illustrations


Also, get the lists of free vector software and free photo editing software.




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit