6

I'm trying to figure out the best way to display a list of USA States where multiple items, or all, can be selected.

Select Element
The obvious UI element that exists for this sort of thing is the field where a long list of items can be shown and a user can select multiple from this list providing they know the key combinations to do so (holding control and click etc)

Checkboxes & List
Another solution I thought of was simply outputting all the States into a list (alphabetically order) which checkboxes next to the names. This is a little more intuitive for the user but takes up a large amount of space.

I wonder if any of my ideas are the correct experience for the user or whether a better solution exists.

Multi Select UI

  • 50 items are a lot – clickable map? (And does one include Puerto Rico etc. in such selections?) – Crissov Jan 20 '15 at 14:46
  • 2
    @Crissov - 50 states on a map is a lot too. You waste a lot of space and dealing with the Several states on the East Coast makes it even more challenging. Unless geographical proximities are important, a map would – Evil Closet Monkey Jan 20 '15 at 14:52
  • 3
    ... tend to make things more difficult. Not knowing geography could make the selection more difficult too. (apologies for 2 comments - in mobile and accidentally hit send, and couldn't edit) – Evil Closet Monkey Jan 20 '15 at 14:54
  • 3
    The obvious answer is a multi-state checkbox. – Roger Attrill Jan 20 '15 at 15:31
  • 1
    Anecdotally, and as referenced by an answer here, a multi-select box might be the best choice you have. There's an exact example of this situation in the Select2 documentation, "Multiple Select Boxes" -- select2.github.io/examples.html – Seiyria Jan 21 '15 at 0:44
9

Whatever design you choose, think about placing some container which displays the current selected items, so that way users won't have to remember what they've selected previously by themselves, avoiding the need for scrolling back to double-check every selection. This way also the most relevant data for the action is showed separately from everything so it results in a cleaner interface.

Here some options for your case: (btw, I would place the (x) symbol on the right of the selected items, but I wasn't able to that with balsamiq)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The old school approach:

enter image description here

The fancier -and less usable- approach: It won't be appropriate for every website, but the idea also could be use as a complement of the other, the show the selected states as a preview.. (green = selected, borderInGreen (or other color) = activeElement, uncolored = unselected)

enter image description here

I also consider the last Roger example as a very good approach for plenty situations.

  • 1
    Cheers. This works great if non of the states are preselected. If for example the list is pre-selected and user wants to remove the places they don't include in their delivery you end up with a problem where lists on both sides are huge. You also cannot reverse the purpose (from add to remove) because that confuses people who expect it to work the same. What is your suggestion for this situation? – slaterjohn Jan 20 '15 at 15:32
  • Mmm I don't get it completely. 1)Are you referring just to the "old school" approach or which?. Also, 2) what % approximately is going to be selected by default , 3) what % approximately will be the amount of states selected over the total? If they tend to be a lot, I would recommend the map solution -I've just add it- (specially if it's related with shipping) and/or the last recommendation from Roger. – Alejandro Veltri Jan 20 '15 at 18:52
  • Gah! Your map update may look "fancier" but it is by far the least usable solution! (1) It takes up way too much space for so little information, (2) states are disproportionally represented - Hawaii is not that big and Texas appears to be far more important than other states, and (3) it is horribly hard to select Rhode Island or Delaware! The map is a solution, but it is not the right solution! – Evil Closet Monkey Jan 20 '15 at 18:53
  • I agree @EvilClosetMonkey, I made some clarifications. – Alejandro Veltri Jan 20 '15 at 19:04
5

Essentially this is like adding tags - where each state is a valid tag. As the user types, a set of valid completion tags appears. Selecting one adds it to the list with immediate access to remove it again. Very similar to how the tags work here on stack exchange.

enter image description here

If users don't know the states ( eg are from outside the US) then really they do need to select from a list, but to be honest it's only 50 options - it's not overly excessive to have them in a big list - with an option to select or deselect all.

Example from google images:

enter image description here

You wouldn't have to show this list permanently, you could indicate how many states are currently selected; maybe list the first few and have an option to edit list at which point the list slides open until the user is done.

  • 2
    This wouldn't work if we preselected all options by default and the user didn't to remove the ones they don't want to deal with. It relies on international users knowing all the states too. – slaterjohn Jan 20 '15 at 15:41
  • 1
    @slaterjohn If the used does not select / un-select what they want then no solution will work. He specifically states if they don't know the US states then present a fixed list. +1 – paparazzo Jan 20 '15 at 16:07
  • @blam Thanks for the support! To be fair, I extended my answer since that first comment which was in reference only to the tags part of the answer :) – Roger Attrill Jan 20 '15 at 16:22
  • @blam My point wasn't that the user doesn't want to select states, they do. But the tag method expects them to start typing the name of the states. In countries other than the USA this isn't a suitable option. And if they need to unselect pre-selected states, the tag system make it even more difficult. – slaterjohn Jan 21 '15 at 8:18
  • @RogerAttrill The tag selection may not be the best solution for this. But it certainly has it's uses. I think i'll go with your second solution where we have a check list, but not display them all to start with. I'll have a box saying "Select All (50)" which is pre-checked and then when unchecking this box we can show the individual options. – slaterjohn Jan 21 '15 at 8:20

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.