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
Geo-Pickers - assuming user knows what they want
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.
Experimental Textbox & Select/Dropdown Adapting Control
> 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.
>* with this interface you
>* 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 captiveherd 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!
Usability in recovering from mistakes
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.