Count the “Clicks”

I optimized 998 clicks for a given user story down to just 4 and this is how you can too.

Not all users click. Some tap the screen or keys on a keyboard. Others may use dictation to interact with your interface. In this post we’ll refer to any single user interaction as a “click”.

How many clicks does it take to accomplish tasks within your interface? Each click is an exhaustive investment made by your users. If they begin to feel they aren’t getting a return on their investment they will bounce leaving you with a unsuccessful conversion. Reducing the clicks in your experience is one way to improve the usability and conversion rate of your interface.

One of the goals of the Eureka Media Browser redesign was to reduce the number of clicks required for users to achieve tasks. Let’s examine the number of clicks required to delete files in the original browser and compare that to the redesign. Originally, there were no bulk select features so deleting media items cost N * 2clicks, where N is the number of items to be deleted. Deleting one item cost two clicks; deleting 100 media items costs 200 clicks. As the number of items grew our clicks grew linearly with it.

Once the bulk select feature was added I was able to reduce the number of clicks by removing multiplication from the equation. Users can individually select multiple items, and then click a delete button to delete them all. Our algorithm is now N + 1, which, as seen in the chart below, is a fantastic improvement.

The number of clicks required to delete multiple items is significantly reduced using bulk selection

But we aren’t done yet. Imagine a scenario where we have a large folder of media items, let’s call it 500 items, and we want to delete all but two of them. With our original design this would cost 996 clicks (498 * 2). Why are you crying? With bulk selection this would cost 499 clicks (498 + 1). Either way, that is a lot of clicks. This is where the invert selection feature comes in. A user can now select the 2 items they don't want to delete, invert the selection, and delete all 498 media items with just four clicks. So for this scenario we’ve optimized 998 clicks all the way down to 4!

Deleting 486 items in just 3 clicks using inverted bulk selection

So what does this “inverse selection” algorithm look like?
(T - (T - N)) + 1 + 1 where T is the total number of media items and N is the number of items to omit. With invert selection we save them the total number of items minus the items they’d like to omit.

Inverting selected items allows actions to be performed on many items efficiently

Conclusion

Once we’ve written an algorithm that represents clicks necessary for a user to perform we can work on reducing user exhaustion. Look for multiplication and repitition within your algorithm and explore design patterns to allow for a more efficient user experience. Consider utilizing modern APIs such as localStorage to automatically jump users back to where they were. Treat each click as an investement made by the user and do what you can do give them an adequate return. Rest assured that if your interface allows them to take shortcuts using just a few clicks odds are they will be more likely to return. Less is more, especially when it comes to clicks!