3

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?

2 Answers 2

2

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.

3
  • Do you think it's essential to use an icon at all? Or would a simple, one word description be enough? (I haven't really got the time/ skill to create icons). If you think just having a description is enough then I think having an ordered list with greyed-out items is the way to go. Aug 8, 2013 at 20:19
  • "Essential" is a strong word. :) You could certainly use just text and be fine. A nice middle ground that would be not be much more work than text, though, would be a simple dab of colour for each activity. ...a blue dot beside "swimming", a red dot beside "running", etc.
    – A.M.
    Aug 8, 2013 at 20:32
  • Ok, I'll mess around with your idea. Many thanks for your help! Aug 8, 2013 at 20:33
1

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).

4
  • good point about the shading (+1, and welcome to the site!), though two levels of shading (selected vs deselected) should be OK.
    – A.M.
    Aug 8, 2013 at 20:44
  • The need to show non-selected items is just to use up the space. If the user had only selected one item, then there would be a large empty gap below it which I believe would look worse than having them greyed-out. Aug 8, 2013 at 20:55
  • 1
    Just to clarify, what I meant was "good point about accessibility". :) ...though again, I suspect it would only be a much of a problem with many shades (more than the two we are discussing here), where in order for them to be noticeably different one or more of them is forced into hard-to-read territory.
    – A.M.
    Aug 8, 2013 at 21:26
  • I'd be less worried about hard-to-read territory than hard-to-differentiate. Both are fairly easy to overcome in a two-color system (as A.M. points out), just something to keep in mind. Aug 8, 2013 at 21:43

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.