1

If I have a list of countries (or anything really) with the most relevant ones at the top in a "Suggested" optgroup, and then underneath I list out all (other) countries, should I duplicate those "Suggested" ones in the "All countries" optgroup?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select doesn't seem to mention anything about duplicate options, so from an HTML perspective it seems fine. But I'm curious about a UX perspective if either of these choices would be considered good or bad.

Example:

(NOTE: the below is a snippet of an actual listing of countries. In reality the list may be hundreds of options long.)

Choice 1: Duplicate the "Suggested" countries in the "All countries" optgroup. This may be a more clear choice for a user if they didn't realize the option they're looking for was at the top, but it might also be a little odd for keyboard navigation by typing the country name if there are 2 available options:

<select name="country">
    <option value="">Select...</option>
    <optgroup label="Suggested">
        <option value="United States">United States</option>
        <option value="Germany">Germany</option>
        <option value="Japan">Japan</option>
    </optgroup>
    <optgroup label="All Countries">
        <option value="Antarctica">Antarctica</option>
        <option value="Barbados">Barbados</option>
        <option value="Croatia">Croatia</option>
        <option value="El Salvador">El Salvador</option>
        <option value="Gambia">Gambia</option>
        <option value="Germany">Germany</option>
        <option value="Haiti">Haiti</option>
        <option value="Israel">Israel</option>
        <option value="Japan">Japan</option>
        <option value="Latvia">Latvia</option>
        <option value="Mozambique">Mozambique</option>
        <option value="Pakistan">Pakistan</option>
        <option value="Tunisia">Tunisia</option>
        <option value="United States">United States</option>
        <option value="Yemen">Yemen</option>
        <option value="Zimbabwe">Zimbabwe</option>
    </optgroup>
</select>

Choice 2: don't duplicate the suggested options:

<select name="country">
    <option value="">Select...</option>
    <optgroup label="Suggested">
        <option value="United States">United States</option>
        <option value="Germany">Germany</option>
        <option value="Japan">Japan</option>
    </optgroup>
    <optgroup label="All Countries">
        <option value="Antarctica">Antarctica</option>
        <option value="Barbados">Barbados</option>
        <option value="Croatia">Croatia</option>
        <option value="El Salvador">El Salvador</option>
        <option value="Gambia">Gambia</option>
        <option value="Haiti">Haiti</option>
        <option value="Israel">Israel</option>
        <option value="Latvia">Latvia</option>
        <option value="Mozambique">Mozambique</option>
        <option value="Pakistan">Pakistan</option>
        <option value="Tunisia">Tunisia</option>
        <option value="Yemen">Yemen</option>
        <option value="Zimbabwe">Zimbabwe</option>
    </optgroup>
</select>

2 Answers 2

3

There's no single right answer to this. It's just about the approach

The logical approach: Don't repeat because why would you?

This works well if you define the groups well. Suggested, for example, isn't very well-defined but Europe is. An avid/regular user might understand Suggested, Frequent, Recommended, etc. but a lot of users tend to ignore such cues and find it difficult achieve the desired results.

PRO

I have noticed similar practice in payment apps where they mention a few banks under the grouping of Popular Banks and don't repeat them in the Other Banks. Most users would see their preferred bank up top and won't have scroll through the list to get their bank.

CON

But, there are users who won't read the top selections because their bank name is, let's say, United Bank and then find themselves lost when they fail to locate it at the bottom of the list.

The accessibility approach: Repeat because you can't predict user behavior

Government sites tend to take this approach. They'd repeat menu options, navigation items and dropdowns. It is "dirty" from a UX point of view but it does the job.

2

You need to repeat them. If you don't the user would always have to check 'suggested' before looking in 'other'. You have called the option 'all countries' rather than 'other' so it should have all countries in it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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