Best way to offer a large amount of selectable options (without using Javascript)?

Question

I come from stackoverflow and have no answers for this one, so I turn to the UI guys for assistance.

Let's say I have a library application that allows a user (librarian) to add a book to the database. One of the features is tagging an author to a certain book. A book can have more than one author, so a UI that allows multiple tags is required. I really want it to follow the progressive enhancement approach, from a basic functional site to a JS/CSS enhanced version.

I already have a database of at least 450 authors. For the enhanced version an auto-complete and editable select is in my arsenal and has proven effective. The problem is with the basic version, especially for mobile devices and incapable browsers (like opera mini perhaps?).

From a programmer's view, a multiple-select <select> box should do. But by reading at least 3 UX books, a multiple-select <select> is a "no go" since there is no indication (unless explicitly mentioned) that a select is multiple-enabled. Also not good for the physically-challenged people since you have to hold down Command (Mac) or Ctrl (PC) to multiple select. Mobile browsers have none of those keys also! To add to that, 450+ selections in one box?

In summary:

• 450+ items to choose from
• selecting multiple items
• progressive enhancement approach
• this is for the basic view (No Javascript, limited CSS)
• mainly targeted to non-modern and limited feature browsing devices (like opera mini and mobile browsers that have no JavaScript capability)

What's the best way to tackle this situation? How did they even do this prior to web 2.0?

Answer 1

A dropdown with 450+ values is extremely unusable on any device, including desktop. But you say that you're only looking for a solution for the basic mobile version, so let's stick to that.

Probably the best way to simplify this for the mobile is to have a first screen/popup display the alphabet, then as you tap a letter you drill down to the list of authors beginning with that letter. Your largest list per letter, even for the most common letters, should be at about 30-40 values, which can be scrolled easily. Then you tap a name to select it, press Back to return to the alphabet and proceed to select additional authors until you press Done. That's the most standard approach for mobile, based on simple linear navigation.

A better way would be to develop something resembling a phone book app, but I guess you can't do that on a web app without JS.

Answer 2

Unless you have auto complete, a list with 450+ options is never very user friendly, and always hard to use, especially when you even allow multiple selections.

Given that the task to add books to the library is a very common one, that should be done fast, I would propose a more simpler backend-powered solution using two simple steps:

1. First the user is presented with a simple input field where he simply enters author names. For multiple authors they are simply comma-separated.
2. On submit, the backend splits those entries and tries to find existing database entries for them. If you find a unique match, choose that author. If you find multiple possibilities, retain them all.
3. Present the user your results for him to check. In case of multiple possibilites, make him choose the correct match using a simple select box. When no match was found, allow him to create the author in that step (and maybe ask for more detailed information as well). Do that for each comma-separated value you have found.
4. On the final submit, you should have all your information.

Answer 3

Why not try something like what you get in the iOS Mail app.

1. A simple text input field
2. Drop down auto suggest (just like in Google Search)
3. When you have added a single item (like author in your case), you can type another one, by pushing the + button at the end of the input field (and previously entered items can be deleted ony by one.)

This solution could easily be used on a smart phone and desktop as well. I think that for 100+ elements some kind of "search" solution has to be used.

Answer 4

It's great that you're doing progressive enhancement! However, you're creating a creating a problem for yourself where there's none.

The UX approach is to think about the user and the environment where the product is being used. So let's look at your concerns:

• List box requires to hold down CTRL or Command to select multiple items, which isn't too accessible for disabled users.

  1. How many of your users (librarians) have severe motor disability that prevents them from holding down the required keys with one hand and moving the mouse with the other hand? - Not that many.
  2. Is there any assistive technology that allows people with motor disabilities use keyboards efficiently? - Yes (on-screen keyboards & special physical keyboards).

• Multiple selection in list box has low affordance because users don't know about holding down CTRL or Command.

  1. Can you improve the affordance of multiple selection? - Yes, you can include explicit instructions about it.

• Mobile devices don't have CTRL or Command keys or may have JavaScript-unfriendly browsers.

  1. How often will the system be used from a mobile device? - Maybe occasionally.
  2. What devices don't have CTRL or Command keys? - Nearly all of them.
  3. What devices use primarily Opera Mini and other JavaScript-unfriendly browsers? - Older devices.
  4. What other characteristics do those older devices have? - They have less powerful CPUs, smaller screens, and slower Internet connections.
  5. How usable will a 450+ item list be on such devices? - Highly unusable because it would render & scroll slowly.
  6. What kind of device is likely to be used to enter book information away from the desk? - A tablet or similar because of the amount of text entry necessary.
  7. Do those devices support modern JavaScript? - Absolutely.

Consolidating all of the above, you shouldn't worry about list boxes for mobile devices or disabled users. In fact, you should make the simplest mobile version read-only and remove editing & creation capabilities from it so that users don't even try it. At the same time, a list box will be completely usable to anyone in the simplest version for desktop browsers as long as you instruct users on how to select multiple items.

Answer 5

I would start the web page wih a single drop down box which would include all authors. Then, under that, have a check box that says 'add another author'. This would do what is expected, probably through javascript, and the user would be able to continue adding authors.

Answer 6

I recently had to do multiple selection and a multi select box didn't allow for columns to display more data and the users do not know how to use a mulit select box in any case.

So I created a div with scroll bars, and in your case you could create multiple divs to suit your style (e.g. a div per letter of alphabet for authors).

Here is how mine came out to give you an idea:

Obviously you will have to play with the spacing and size to match your preferred device.

Please note that this is only a suggestion.

Answer 7

Even without the use of javascript you could try using some kind of autocomplete on the server side.

The user inputs the name (or part of it) manually and hits search.
That information is processed by the server and gives back a simple html list (with checkboxes) of possible answers.

On the bottom there would be 2 buttons: add and add & complete

This allows the user to add the name(s) from the current list and then go back to add more, or add the name(s) from this list and complete adding authors.

I'm not a UI expert so I don't know how intuitive it would be to use, but the technical side of it should be fine!