What's the best way to show 'too many options with checkboxes' to user?

by Saurabh Hooda   Last Updated July 14, 2015 14:07 PM

The design of my webapp requires the user to select books from 100 of books. These books are user's own books imported from another app.

so many options to choose from, using checkboxes

This step is just after the user has registered with my app. I am afraid that the user may feel inundated by so much info and might skip this step instead of judiciously selecting which books to lend.

Is there any better way to display so many (around 100) books so that the user selects the books with ease and not just hastily skips, deselect all or foolishly select all?



Answers 11


It's important to provide user a way to apply context to their list of books in order to help them make an informed and easier decision.

Offering filters to help users sort by "date last read" or "genre" might help aid their decision making process. A user will be more likely to select all the books they haven't read in a year, or if they aren't reading crime books at the moment.

I would recommend streamlining this process for the initial onboarding step and enhancing the decision making when the user has escalated their commitment with your application. When a user finishes reading a book, writes a review, gives a book a star rating - adding an option to "add to lend list" really streamlines this feature.

Good luck, hope this helps!

Adam Pattenden
Adam Pattenden
July 14, 2015 11:28 AM

In case of multiple options, categorization always helps the user to make a decision. Netflix/Hulu do this really well and it becomes easy for you to select a title. Although, the use case is bit different here, but it more or less fits for your problem. You can categorize books by Genre, Rating, Recently read, Reading, etc.

enter image description here

You can use a book API to auto categorize books - 53 Book API's

Adit Gupta
Adit Gupta
July 14, 2015 11:36 AM

You can always suggest some books for the user to lend and communicate that he or she can choose more later. It will successfully onboard the user and not overwhelm with too many choices.

The criteria by witch the books are suggested really depends on the purpose of the application (I particularly like Adam's idea of date last read).

JotaRMonteiro
JotaRMonteiro
July 14, 2015 14:06 PM

The way you have it mocked up isn't bad. I mean, if I know my task is to go through my entire library and select loan-able books, then I expect I'll have to go through my whole library. I'd expect to see a page full of my books.

I would, though, make each item larger (showing them in 4 or even 3 columns) and make the clickable area bigger than that little checkbox, in order to make it a no-brainer to select a book. Maybe make it a button or make the entire item clickable for selection. (See Fitts' Law.)

I assume people would make their selections by browsing through everything, rather than searching/filtering for sub-sets of their books, but maybe not. (You can find out by doing some simple user research.) It seems that a Sort feature would be useful, though.

(Note: I'd use that app.)

Ken Mohnkern
Ken Mohnkern
July 14, 2015 14:38 PM

One way of making a selection task less tedious is by increasing the selection target size to the full image + text size (e.g., as in the attached mockup). This decreases the effort that goes into individual selection and can provide an appealing and easy to see overview on which books are selected. Additionally, you can distributed the 100 books over several pages.

enter image description here

dfshk
dfshk
July 14, 2015 16:44 PM

I feel as though you might be jamming too many visual cues into the same screen.

I think it should be broken out into steps:

Step 1

Would you like to lend any of your books at this time? (Sharing is Caring!)

Yes | No

Step 2 - Yes

Below are some books which you have already finished. Tap on each one which you would like to lend.

Book | Book | Book

Book | Book | Book

Book | Book | Book

| View all of my books! |

Lend Books | I've changed my mind, let me in!

Step 2 - No

That's okay! You can choose which books to lend at any time by going to X, Y, and Z!

MonkeyZeus
MonkeyZeus
July 14, 2015 17:18 PM

I can think of three improvements:

  • Adding a filter
  • Adding some order
  • Improving scannability

The filter is the easy one but I don't have a win-win idea for the other two, anyway I'll present some alternatives:

If you're betting on text...

Something that could help to searchability is alphabetical separation, maybe together with an index to each letter.

I don't really know how users will scan the books, but probably they would try to search for the image first, although I'm not sure if this will be always helpful taking into account that not all books are that recognizable, at least in that size. So maybe a less loaded interface which gives more importance to the text may help them find what they want more consistently. Here's just an idea:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

If you are betting on images (and less on text)

On the other hand if you could place bigger images (thumbnails), which could really increment the scanning efficiency and related to selection you could try something similar to the latest Google Drive Interface (image below) where you can select by clicking anywhere on the thumbnail.
Additionally you could place several books on each line (the number depend on the resolution) inside the same alphabetical separation.

enter image description here

Something like this: enter image description here

rewobs
rewobs
July 14, 2015 18:22 PM

Have you seen the newly released Apple music app. When you enter the app for the first time Apple Music asks you to select a few artists out of group and then select a few genre out of a group. I guess your requirement matches a lot with them. And believe me they have done it really well. You can try that kind of interface with some tweaks. Apple brings a set of bubbles in front of you to select. Tap on the circle to select.enter image description here

enter image description here

Krishna
Krishna
July 14, 2015 18:34 PM

Here is a fun idea -- 3 columns, on the left there are the ones to lend on the right ones not to lend, in the center undecided. At the start just the center is populated. The user can click on the left or the right and the item will animate over to the new list. The list continues off the bottom of the screen. As the left and the right fill up they will continue off the edge. The user can process the center part and items move up as item animate to the left and the right.

Hogan
Hogan
July 14, 2015 20:44 PM

I haven’t seen user testing data on this, but there’s an existing pattern that appears to work very well. In the course of on-boarding a new user profile, Netflix allows the user to select movies that he wants to watch or likes:

Netflix onboard

Notice the top row. The left item is selected, the middle item is in the hover state, and the right item is unselected. Also note that there is no particular affordance needed for selection—clicking on your choice is intuitive enough.

Daniel De Laney
Daniel De Laney
July 14, 2015 22:07 PM

Alternatively maybe most people are willing to lend most of their books, but not the ones they are about to read... maybe you should ask them to select books they don't want to lend right now and auto lend the rest... Under the assumption most users only have a few books they know they don't want to part with right now. Include a search filter at the top to then locate the books they don't want to lend from the whole list quickly.

I also agree with MonkeyZeus, but maybe you have somewhere else in your app where people request books they want to borrow maybe this can help identify books in the new user library that are imported that have been read, also maybe you can look up the book on a retail site and get a rating of the book and rank them higher in being displayed in the initial limited book selection.

axawire
axawire
July 15, 2015 12:17 PM

Related Questions