4

Consider the case when the user is asked to select one item from a fixed list.

If the list contains more than a dozen items, an autocomplete / typeahead type widget has proven itself to be very user-friendly and quick to use. You type a few letters and a popup appears—or is updated—with relevant matches, without stealing your focus from the search box. When you find what you are looking for, you can click on it from the popup, or select it with arrow keys and confirm with Enter.

When the list has less than a couple hundred items, the best HTML-only graceful degradation is a simple select box. The list of countries (206 as of this writing) is the classical example that's at the limit of usability for a select box. Anything longer than that and it gets heavy to download and render and cumbersome to use.

So what is a good HTML-only graceful degradation for a typeahead / autocomplete box, when the list contains thousands of items?

Ideas:

  1. Just let the user type whatever they want in the text field. If they have no Javascript and just sumbit the form, you can show them an intermediate step where they will see the matching items, refine their search and make a choice.
     
    But what if the original form contains more than one typeahead box? Would you show them a sequence of intermediate steps, one to refine each selection?

  2. Replace the typeahead boxes with buttons.* Each button will submit the partial form (to be stored on the server in some temporary or session storage) and show a page with all the tools to search for items and make a selection. When the user makes their selection, go back to the half-filled form and let them continue.

  3. Replace the typeahead boxes with iframes* (say, 5 to 10 lines tall, as big as a textarea.) Each iframe will let them perform independent searches and selections, which will be stored on the server, without disrupting the main form.

Any other idea?

_____________
* Of course, technically it's the opposite: you put the degraded interface in the HTML and then use JS to replace it with the autocomplete.

  • What do you mean by 'graceful degradation' in this context? – DA01 Jul 10 '15 at 22:12
  • @DA01 I mean an alternative user interface that fulfils the same purpose as the primary one, but is limited to standard HTML / HTTP components and interacton, without any form of JavaScript. It is to be shown in case the JavaScript is disabled on the user's browser or is otherwise broken. – Tobia Jul 10 '15 at 22:15
  • Do you think that's a concern for your audience? I know we used to really be concerned about that a decade ago, but today, most all sites require Javascript and I find that that's an acceptable stance today. All depends on your target audience, of course, but I wouldn't by default go out of your way to support non-js enabled browsers. All that said, as long as you use form elements 'under the hood' almost any solution should work just find sans JS. Most decent JS components merely add a UI and update hidden (via CSS) form fields. – DA01 Jul 11 '15 at 1:08
4

You've asked for graceful degradation... this isn't ideal, but a variation of idea 1 would work reasonable OK.

Give user a text field with a search button next to it. User types in their search string and hit search. Page refresh to show them a list of the best matches as radio selections.

User can choose to select an option, or choose to search again.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You can realistically treat this as a larger block on your form and so you can have multiple of these no problem. Not sure what sort of ramification this may have server side though.

  • This is actually easy to do server-side, and very user-friendly. Thanks – Tobia Jul 12 '15 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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