Presenting a user-selected list of items, from a bigger list

Question

This is for a mobile design.

I have a list of activities (running, swimming, hiking etc.) and the user will select which of these activities they would like to do. For example, a user might just pick swimming or they might pick swimming and running. The activities they have selected will show on their user profile.

How should I show their selected activities? My first thought was to have a grid layout with an icon and title for each activity, and then highlight which activities the user has selected and grey out the rest. I then realised that I was terrible at icon design.

Would just having an ordered list of the activities be suitable here?

Answer 1

There is a lot of "it depends" here. I would say the biggest indicator is how identifiable your icons are.

• If their meanings are all perfectly clear (less and less likely with more and more icons), then just showing the icons could be fine, and you get the bonus of consistent positioning for all activities (especially if using icons instead of a list means you avoid the need to scroll) as well as always showing unselected activities, which users may want to choose in the future.

• If their meanings are not very clear, you probably do want descriptive text.

  • If you want most of the same advantages as above, by using an ordered list and keeping the idea of the greyed-out unselected items, though, you can have the same or a similar kind of consistent positioning (scrolling breaks this somewhat) and constant visibility of unselected activities.

  • If you want to increase the chance that people can see all selected activities on a single screen, then you could force selected items to the top (and thus break ordering) but keep the greyed-out items below. In this case, of course, you should at least keep relative ordering within the selected and unselected groups.

Of course, if you can fit all of the icons with descriptive text on a single screen without scrolling, your decision is much easier.

Edit: The options above dealing with icons and descriptive text would all, of course, also work with just descriptive text.

Answer 2

I certainly don't see why icons would be necessary. In general, I consider icons to do two things: (1) provide at-a-glance information via shape & color and (2) acts as visual bullet points when in a list.

I would question the need to show disabled or non-selected items in the list. Is it important for the user to see those? If not, or if it's only important during an "edit" mode, I'd leave them out to reduce clutter (and over-reliance on shading that can be bad for accessibility).