2

If the list is small enough (e.g., less than ten items) or the user needs to see all available options in order to make correct choices, we can present the items in such a way that the user can review all the possible items and select the ones appropriate to their needs. But if there’s a very large set of items that are not disambiguate (e.g.. all universities in USA), I need an interactive expansion structure that will provides simple, clean, intuitive access to nested content.

And unfortunately, I can't break items into sub-categories.

For example, is a user is searching for the California University of Pennsylvania, the set can include:

  • ...
  • ...
  • ...
  • California State University, Northridge
  • California University of Pennsylvania
  • California University
  • California University of Pennsylvania State
  • California University (Pennsylvania)
  • University of Pennsylvania
  • PA California University
  • California University of Pennsylvania - California, PA
  • California State University, Northridge
  • ...
  • ...
  • ...

... and (not in italic) are all good — the user have to select them.

What’s the best UI pattern I could use?

1

If you are unable to break the items into subcategories (curious to know why that's the case, more context about the form would be great!) you could use a combo box that allows for multiple selection. That way a user can begin to type for the university they are looking for and then be presented with options to choose from.

It would also be good to define the Personas of who will be using this form as that will help in how you display / make the information available. For this answer I've assumed/thought of a Persona as a close to graduating high school student and is wanting information regarding about universities they want to apply too (the rest of my answer is predicated on this assumption). Below is an example of how it could look:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Seeing as you mentioned there will be a lot of potential results, there needs to be an ability for a user to search for what they are looking for. For example, if this is a list for users to select what university they'd like to apply to (based on my example above), this Persona i've proposed would have a rough idea of what universities they'd be looking for based on previous research or location they'd like to attend (based on my personal experience anyway).

By going with a searchable combobox, this should help reduce the cognitive load for a user as they won't be presented a list of every university in the United States they'll need to scroll through. Based on the user's previous research/knowledge/experience from the Persona i've assumed, a combobox will help them find what they are looking for more efficiently due to the inclusion of a search capability.

  • You’re right @Clint. Because the amount of information-items is high, there’s a need to search for what they are looking and it could be inside the combo box, like this: cl.ly/image/072C050N1J1L Thank you. – Benoit Meunier Jul 16 '15 at 14:57
  • Not a problem @BenoitMeunier happy I could help – Clint Jul 16 '15 at 14:59

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.