How to display multiple options for settings page using icons?

Question

Question

For a mobile app, how should we display multiple options (say, 20 options are available) in a settings page using icons?

---

Example:

Fig.1: All Options in One Screen Activity.

All options are present in one screen activity (accessible by scrolling up/down if can't fit in one screen). Options may be sorted in certain way (e.g. alphabetical, use-frequency, category, etc).

Fig.2: Five Most-frequently-used Options.

Some of the options are hidden. Only top five, most-frequently-used options, are visible from this main panel. To access the rest options, users must browse through the configuration pages (e.g. by clicking "Other Options" button and loading different screen activity in which the rest options are present in Fig.1 way).

Fig.3: Two-Level Layout.

User selects relevant category first, then he/she reaches to actionable options which are associated with the category.

---

Note:

Above dashboard example does not technically reside in an in-app environment. But, this is the best example I can give for now. I want this question to be strictly limited to in-app Settings & Configurations page.

Answer 1

Few thoughts

• Having more than 4 (5 at the most stretch) elements in a cluster is a bad idea as after 4 elements, your mind needs to burn additional attention to understand "what is going on". Concentrating on icon is easy when they are few but in large numbers they become a cognitive burden. Having 20 icons together is way too far from being a decent user experience.

• Usage frequency is one of the key aspects which help you decide. Having "Favorite" or "Frequently Used Section" in addition to "Standard Set" is additional learning burden and possibly a misleading feature. Since this section will keep putting icons right from your first usage, as user will click some icons and the app would put it in "frequently used" as it will have usage=1 while other icons will have usage=0 but practically those favorite and frequently used sections may not be 'frequently used' unless user has used them few times and they actually qualify to be one. Be very thoughtful about introducing this feature and its implications.

• I would suggest you to group and collate options together under clear headings and keep 4-5 icons under each heading. Android Settings section has decent user-experience and could be a good learning resource in this regard.

• If you possibly can, list these icons vertically and have text description next to them. When you put elements in one column, your mind only uses one dimensional scanning which is easier as compared to two dimensional scanning in which it has to remember a row and then a column number to remember an icon's position. (mind uses positioning as short-cuts and position sensitivity of an element within a cluster works faster then seeing and recognizing elements) If you had 4 icons, you could use 2,2 grid which in effect is more effective then one dimensional layout but when you have 3,3 or 4,4 or 5,5 grid, the cognitive load is triplicated or quadrupled.

Hope this helps you decide and answers your questions.

Answer 2

I would say unless there is some requirement for the user to be able to view the status of all options simultaneously, or you have only a very small number of options, then the two-level layout (Fig. 3) is preferable. Not only does this provide a simpler interface but it allows for expansion, whereas "all options in one screen" (Fig. 1) would require the user to scroll should more options be added.

This assumes that the options can be grouped into subsets in a logical manner.

The "most frequently used options" alternative is a compromise if grouping is not workable, a downside being that users could be faced with a different set of icons should their usage patterns change over time, which may cause some confusion.

Here are some guidelines which may be useful.

Answer 3

Settings are the part of an app that is not intended for frequently usage. It will be hard to locate needed option in one screen. Moreover you have few space for option labels and this makes search process even harder (don't rely on icons only).

As memorability is expected to be low (settings are used not so frequently), you could increase efficiency by making user actions more obvious. Organise the items in meaningful groups and for 20 options two-level layout would be better.

Also you could re-think your settings. If some options are used frequently you could move them out to actions part of your app. And smart defaults will be good, too.