Choosing from Long Option Lists in Web Forms

Recently I have been exploring approaches toward choosing from a long list, such as US states or world countries, targeting all of mouse/keyboard & trackpad & touchscreen, using one same/single web form.

Real world use cases I have encountered in the last year include:

  • choose from 75 names (target: laptop, Android tablet)
  • choose from 300 names (laptop, Android tablet)
  • choose from 100 codes with descriptions (desktop, iPhone)
  • choose from 2000 codes with descriptions (desktop, iPhone)

Sample or demonstration "laboratory" can be found at:
http://whizman.com/Lab/

With a vanilla SELECT element, in a typical desktop-type GUI web browser, keying in a prefix of the desired value jumps to values with a matching prefix - which is effective in the case of sorted lists of options. However, with the Android browser, I am not aware of any way to invoke the keyboard while the SELECT element is activated. Does anyone know a trick of which I'm unaware? Can anyone comment whether any other mobile browser allows keyboard prefix in a SELECT element?

Auto-complete is helpful to narrow down a long list by typing just a few characters of the desired value. However, in the Android browser, the popped-up on-scrreen keyboard tends to cover over most of the list of matching items. Can anyone comment whether other mobile browsers do the same?

My custom complete/combo, in my testing, works reasonably with desktop Fireox & Opera and with Android-ICS-4.0, but does not work with Android-GB-2.3 older but still-common version. I am curious how it fares in other mobile browsers besides Android.

If you can try out the comparative demonstrations, please post a comment about which ones worked better and worse in your experience - thanks!

Comments

4
John E. Bowen's picture

Great topic, Randall! I have run into this in the past, though with a hard client with a native desktop program, not a web client.

I liked your experimental control; keep at it. I did find it hard to correct a mistake I made, or to change it once I made a choice. That could be an issue with brand new, even innovative form controls - people are not sure how to use them.

> I liked your experimental control; keep at it.
Thanks.

> I did find it hard to correct a mistake I made, or to change it once I
> made a choice.

Exactly that is one of my concerns with that approach (the other being cross-browser compatibility, esp. varying mobile platforms). Specifically, may I ask whether you mean to say:
* with difficulty you figured out how to recover from a mistake; or
* with this interface you were unable to recover from a mistake?

I have another idea or 2 to try, but I'm curious whether you were able to figure it out, in the current version.

> That could be an issue with brand new, even innovative form controls -
> people are not sure how to use them.

Right. In an intranet environment, that may be resolvable by training. On the public internet, however, training every user/visitor is not really an option. In the demo, I very intentionally omitted adding any instructions, being more interested in getting feedback on using it without the benefit of intstructions.

Side note: some approaches allow write-in values, and some do not. Allowing or forbidding write-in values is another important criterion when choosing form interface approach.

John E. Bowen's picture

>* with this interface you were unable to recover from a mistake?

I was unable. I have to admit I didn't spend a whole lot of time, but made a few clicks, hit backspace, etc., then gave up.

You are spot on regarding intranet and a captive herd group of departmental or company users. People can and do put up with little interface oddities if, once trained, it really does save them time and give a better result.

Also, for a couple of the mobile related tests, I actually got out my iPod Touch and tried it. I'm not that good at typing URLs with my stubby little fingers, but I did get there. When I did, however, the tests of controls that were combo box or similar gave me some problems, but not due to any fault of my own! The iPod (or iOS) had a different idea about what I should be typing. Darn autocompletion!

Re: unable to recover from a data-entry mistake in the adapting complete/combo:

Right - the way to recover from a mistake, was insufficiently discoverable.

I have added an update and another alternative. Does either the updated adapting combo, or the dual input, fare any better?

http://whizman.com/Lab/

Btw, thanks for the testing & feedback.