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. Eighty 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.
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 addingmoving 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.
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% attendess)
- 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 let 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.
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
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
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.
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.
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 another 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 which 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 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 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.
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.