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.
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?
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!
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.
You can use a book API to auto categorize books - 53 Book API's
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).
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.)
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.
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:
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!
I can think of three improvements:
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:
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:
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.
Something like this:
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.
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.
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:
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.
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.