28

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?

PS: As most of the users are suggesting for categorization, let me add that here the user has to decide whether to lend the book or not. Categorization (genre specific or have-read/want-to-read etc.) might not be very fruitful.

Improve this question
10
  • 2
    100 is the max number of items possible?
    – Alejandro Veltri
    Commented Jul 14, 2015 at 14:11
  • 9
    This doesn't fit within the way you've asked the question, but what I'd imagine is simply not asking them about all the books at once. Give them say 10 at the beginning, then have a filtered view/queue of books to look through later when they have time. That is, at least internally, think of the books as having three states: selected to lend, selected to not lend, and unreviewed.
    – Cascabel
    Commented Jul 14, 2015 at 16:06
  • 1
    show a limited amount, possibly selected by date of completion, randomly, by category, by popularity, whatever suits your need, with the option of selecting or rejecting each book, and a done for now button at the bottom. See how senscritique.com does to engage users in rating movies and books.
    – njzk2
    Commented Jul 14, 2015 at 17:55
  • 2
    As @njzk2 states, only show a few books. I'd lazy-load the other ones, but the 'I would love to lend' button should always be visible.
    – Vince C
    Commented Jul 15, 2015 at 7:31
  • 1
    Why do users need to decide which books to lend all in one step and so early in the process of setting up their account?
    – Kevin
    Commented Jul 16, 2015 at 20:10

11 Answers 11

Reset to default
45

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

Improve this answer
1
  • 12
    You could expand on the second point - Users can experience cognitive overload on too many items at once. Look how amazon presents search results: You never have more than 4x3 or so at once. I would recomment big images and only 3-4 columns and then a scrolling list. So the user doesn't see too many items at once.
    – Falco
    Commented Jul 15, 2015 at 8:55
23

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.

Improve this answer
8

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

Improve this answer
7

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).

Improve this answer
2
  • 5
    It may be generally useful to have a third state "not decided yet", so I can stop and resume at any time -- this is also useful for recently added books.
    – Simon Richter
    Commented Jul 14, 2015 at 17:41
  • 1
    Which witch did you mean? ;)
    – Ruslan
    Commented Jul 15, 2015 at 16:51
5

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.)

Improve this answer
1
  • 3
    Agreed, it looks like a pretty solid UX already. Making the whole area clickable is key. If the OP doesn't want to break it into genres, this makes the most sense to me.
    – Lindsey D
    Commented Jul 14, 2015 at 16:40
2

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

Improve this answer
2
  • 2
    Here the user has to decide whether to lend the book or not. Categorization (genre specific or have-read/want-to-read etc.) might not be very fruitful.
    – Saurabh Hooda
    Commented Jul 14, 2015 at 13:01
  • 1
    Categorization can help if a user has multiple books (around 100 as you said). From a UX POV, segmented information is easier to process and can lead to better participation from the user. Also, I think it can give the user more data points like which genres are most popular, etc. You can also use this data to enhance findability. Just my $0.02
    – Adit Gupta
    Commented Jul 14, 2015 at 13:12
2

It's important to provide the 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!

Improve this answer
1

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!

Improve this answer
1

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

Improve this answer
1
  • 1
    You should include more detail about the interface you're referencing, I'm guessing the majority of people looking are not familiar with what you're referencing especially in the future. Perhaps including some images
    – Zach Saucier
    Commented Jul 16, 2015 at 14:55
0

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.

Improve this answer
4
  • I don't think this is good practice. It makes it so that there are really long vertical lists and as soon as one moves it most likely goes way up or down the page so the user loses context of the choice
    – Zach Saucier
    Commented Jul 16, 2015 at 14:52
  • I was thinking the choice would be put on the top of the list and the others would move down. The last picked are on top (on the left and right) and the next one to pick is on the top in the center.
    – Hogan
    Commented Jul 16, 2015 at 14:55
  • That is much better but I still don't think it's optimal :P It'd also be a pain to make as a developer
    – Zach Saucier
    Commented Jul 16, 2015 at 14:56
  • You are right -- optimal would be just to get rid of the humans... what a waste of time having a UI at all.
    – Hogan
    Commented Jul 16, 2015 at 14:57
0

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.

Improve this answer

Your Answer

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

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