Mobile proof input control for long list of options with a lot of text

Question

I'm letting users choose one option from a set of choices. My data set is much like a list of countries:

• many options (about 50 - 200)
• the user will know what options are there because of the context
• if alphabetically sorted it should be easy to find an option in the list

However, in addition to the above:

• options typically have long text (about 40 - 90 characters)

We had defaulted to using a select dropdown, which is "good enough" given the above bullet points, except that we're running into problems with iOS (which truncates options after 20ish characters with ellipsis). Workarounds to that problem lead to new problems, so perhaps I'm just not using the correct type of input control?

If not a select, what type of input control for web applications is best for the abovementioned type of data set?

I had considered a list of radio buttons, but that's rather awkward if the control is part of a page with multiple controls. Do I have to resort to creating an input control myself?

I've also considered using a select replacement library. However, the main two options haven't worked out well (Chosen explicitly doesn't support mobile, and select2 has a few bugs and bits of behavior that make it awkward for mobile), which again makes me feel like I'm using the wrong type of input (hence me asking about this scenario here, on UX.SE).

Answer 1

Let me start with your additional requirement

How long is 40 Characters?
==========================
0123456789012345678901234567890123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMN
abcdefghijklmnopqrstuvwxyzabcdefghijklmn


How long is 90 Characters?
==========================
012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKL
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl

Should a Drop-down allowed be 90c long? On a Desktop it can get away with it. On a Mobile device a definite NO. I doubt that will fit into my 4.7inch mobile screen without some compramise. Its still a No if its just one or two options that are 90 characters long.

The optimal line length for body text is considered to be 50-60 characters per line, including spaces. Some sources suggest otherwise upto 88 characters per line. And for responsive design 45 to 75 characters per line.

Some context design should be emphasised here. Also on a mobile device—your application should auto-detect data as much as possible; which means an ellipses would work, have you considered placing it to clip content in the middle?

I am a very long sent...and it ends

Alternatives to drop-downs with too many options:

As for dropdown lists with 50-200 options, lets look at Neilson's UX guidelines

Recognition rather than recall
Minimize memory load by making objects, actions, and options visible. Instructions should be visible or easily retrievable

In cases where the users know what they are looking for in advance, consider using a text field with client-side auto-complete functionality instead. Country-selectors are a good candidate for this solution since people know what country they live in (just be sure to support synonyms and abbreviations so you can map ‘US’, ‘USA’, ‘United States’, and so on, to the same match).

Not only does it narrow the list down to a few options, it quickly lets the user find the few options (from a short list) that would best match their selection or what they had in mind.

This article about Redesigning the Country Selector on Smashing Magazine explains the everything you'd need to know (since your UI is like a country selector)