Settings

The Settings screen is an important area of an app. Here you can easily control the changeable elements of the app, like changing text size or restricting downloading to Wi-Fi only.

Contributors

Published on 22 Aug 2016
Platform: App

Overview

Example settings screen for an app that uses BBC iD (on iOS).

How it works

The Settings Screen is split into two main sections;

  • The Account Settings
  • The App Settings

If your app uses BBC iD, then you must always include the Account module at the top of this screen. Please see Account in Apps for more information on the account module.

A ‘setting’ is anything that you can ‘set’. The App Settings section should include settings that are only specific to your app. What you include in this section and what features are available in your app is largely up to you. 

Mandatory settings

Some common settings are mandatory, either for legal reasons or from a good UX point of view. If your app has a feature linked to any of the below, you should be able to control it.

Setting Description Applicable Settings
Control over the text sizeText size
Control over data and how or when it's downloadedRestrict data to Wi-Fi only, Allow downloads, Downloads only, Higher quality downloads
Allowing us to see your app statisticsShare statistics
Control over the parental lockParental lock
Control over your notificationsAllow notifications, Notification sounds

Setting categories

If you have lots of settings, you may wish to break them up into categories to add some structure to your screen. All your settings should be able to fit into the following categories (headings are in priority order):

Note

If you can’t find the setting you require below, then please see the App Information Guideline. Information such as 'Terms of use' and 'Privacy' should sit in App Information.

Header When to use Example
PersonalAny personal information not yet captured by AccountAge, Name
GeneralAny settings general to your appText size, Change location, Compact layout, Carousels, Widget update frequency, Opt into Beta, Sleep timer/alarm, Temperature unit, Wind speed, Flood alerts, Linked music services
NotificationsControl over your notificationsAllow notifications, Notification sounds
Data UsageControl over how data is stored, used and downloaded in your appRestrict data usage to Wi-Fi, Autoplay media, Background app refresh, Download over Wi-Fi only, Allow downloads, Allow higher quality downloads, Clear search history, Sync images for offline use
Security & PrivacySettings such as parental lock and share statisticsParental lock, Share statistics
Start up ScreenControl over how your start up screen appearsStart up screen appearance

Toggles and checkboxes

A setting can exist in different states. It can either be on or off, or it can offer a multiple choice.

To make your choice easy, you need a control to adjust the setting. If the setting only has two options (e.g. On or Off) then use a Toggle on iOS and a checkbox on Android.

Example of an iOS toggle and Android Checkbox.

If the setting offers a multiple choice, use checkboxes on iOS and use a dialog box for Android. That box should contain the options in a list, along with radio buttons.

Example of iOS checkbox list and Android dialog box containing radio buttons.

Rules

  • GEL recommended font sizes should be used.
  • Brand colour should be used on toggles, switches, text boxes and titles.
  • A white or black background can be used.
  • The headers (Account Settings & App Settings) must be written in capitals on iOS and lowercase (with a captial letter at the start of the word) on Android.
Example of iOS and Android variations in headers.
  • The setting must always sit on the left, with its related control sitting on the right.
Example of an iOS toggle sitting to the right of the setting text.

Grouping settings

The Settings Categories above can be used if you’ve got a lot of Settings and they need breaking up into groups. They can either be used as headings to break up the screen, or as links to a sub-screen (with the relevant settings placed there). The following is recommended:

7 or fewer: Don’t group at all.

Example of an iOS App that has 7 or fewer App Settings.

8 to 15: Group the settings into their categories, using the category name as the heading.

Example of an iOS App that has 8 - 15 App Settings.

16 and above: Only show the category names. Each name should then be used as a link to a sub-screen. These sub-screens will be home to that category’s related settings.

Example of an iOS App that has 16 or more App Settings.

Variations

If you don’t have a hidden menu in your app (such as a Side Drawer Menu), and so can’t split up Settings and App Information, you can include the App Information in the Settings screen.

Patterns in action

This pattern is currently being used by the BBC+ App, Bitesize App and the Updated Weather App.