Topic Management

Topic Management allows you to add and/or remove your favourite or most relevant topics (e.g. music genres, favourite sports, interests) allowing users to customise their apps to suit their tastes.

Contributors

Published on 6 Oct 2016
Platform: App

Overview

An example of the Topic management screen on iOS, showcasing your selected topics.

How it Works

Topic Management is accessed by tapping on ‘EDIT’ within the menu. Please see the Side Drawer Menu pattern for more information on the ‘EDIT’ call to action.

Topic Management comprises of 3 main parts:

  • Topics tabs (My topics & Add topics)
  • Description text
  • Checklist items
The 3 main parts of Topic Management

Topic tabs

The Topic Management screen includes 2 tabs. ‘My topics’ and ‘Add topics’

By hitting ‘EDIT’ in your app menu you are taken to the Topic Management screen in its default state. You are presented with the ‘My topics’ tab highlighted, which displays a list of your selected topics.

To switch between ‘My topics’ and ‘Add topics’, on iOS a segmented control is used and limited to 2 segments, and on Android 2 fixed tabs are used.

Note

The word ‘topics’ can be renamed to whatever is appropriate or necessary to your app or brand (e.g. ‘My interests’ in BBC+)

An Example of the iOS Segmented control and Android fixed tabs

Description text

Under the Topics tabs sits the description text. This should be a brief description of what you can do depending on which tab you have selected. Suggested wording for ‘My topics’ is ‘These are your chosen topics, tap a topic to remove it’. Suggested wording for ‘Add topics’ is ‘Here are some more topics that you might be interested in. Add away!’

Checklist items

Checklist items allow you to add topics (when ‘Add topics’ tab is selected) and remove topics (when ‘My topics’ tab is selected) A checklist item is made up of 3 parts;

  • ‘Active’ or ‘in-active’ icon
  • Label
  • Native ‘Re-order’ icon (optional for ‘Add topics’)
Example of 'Active' and 'In-active' checklist items.

When ‘My topics’ is selected, you can choose to remove any of your selections by tapping on them. They are removed from the list and also get removed from your app menu.

An example 'My Topics' on iOS.

When ‘Add topics’ is selected, you can choose to add any of your selections by tapping on them. When selected they disappear from the list and get added to your app menu.

An example of the 'Add Topics' page on iOS.

Iconography


The GEL ‘Yes’ icon is to indicate active topics. An ‘Add’ icon is used to show inactive topics.

The GEL 'Yes' and 'Add' icons.

When choosing to remove topics on the ‘My topic’ tab, the GEL ‘yes’ icon is used to show that the topic is active, meaning that this has been added to your app menu.

Please see the Content Utilities downloadable assets for styling information around the Add button.

Re-ordering

If a ‘re-order’ icon is present, you can use it to re-order your topics using a drag and drop interaction. The icon should be the native re-ordering icon for that OS.

Native 'Re-order' icons used by iOS and Android.

Label

A short label descriptor for your checklist item. It is recommended that the labels do not exceed a single line.

Feedback messages

If you decide to remove a selected topic in Android, you are prompted with an undo message (in the form of a Material Design ‘snackbar’) just in case you have done so in error.

When adding a topic in Android, you receive a feedback prompt clarifying that the topic selected has been added successfully.

An example of an Android 'Snackbar' after a topic has been removed.

Minimum required topics (optional)

If your app requires a minimum number of topics, you can use a native prompt or alert box when you attempt to remove more than the required amount of topics.

Example of an iOS 'Alert Box' and an Android 'Snackbar'.

For more information on Search on iOS, please see the iOS Human Interface Guidelines for Search Bars .

For more information on Search on Android, please see the Material Design guidelines for Search .

Rules

Header

The header is compromised of the App bar, search bar (optional), topic tabs and description text. The header should be fixed to the top of the screen. 

Description text

This paragraph should be no longer than 2 lines and helps give context to the task at hand.

Accessibility

All controls must be navigable by touch, switch and keyboard, and available to a screen reader.

  • When reading items in My topics, a screen reader should say "[Topic title]. Double tap to un-select this topic." 
  • When reading items in Add topics, a screen reader should say "[Topic title]. Double tap to select and add this topic."

Variations

Checklist item

The layout of the checklist item can be changed to suit your product needs. You can change the following:

  • Add a line of description text under the label. This should be no longer than 2 lines.
  • Increase the height of the checklist item’s background and add an image. If an image is used a gradient running from black at the bottom to transparent at the top, should be added over the image to aid readability of the text.
  • Change the background colour of the checklist item’s background box.
A showcase of the variety of ways to display the checklist item.

Category headers

Category headers can allow you to easily scan a large number of topics.

An example showcasing how Topic Management can be customised to suit the needs of your app.

Search

Search is an optional feature that should only be considered if it is likely that you will know what you were looking for (e.g. ‘Manchester United’ in BBC Sport).

On iOS, a native search bar is sat between the App bar and Topics tabs. On Android, a search icon sits on the right hand side of the App bar.

Once you interact with the search bar (iOS) or search icon (Android), the search tool will become active. Using the native keyboard of that device, as you begin to type, you will be presented with search suggestions of both active and inactive topics.

Showing position of iOS keyboard.

For more information on Search on iOS, please see the iOS Human Interface Guidelines for Search Bars .

For more information on Search on Android, please see the Material Design guidelines for Search .

Pattern in Action

The pattern is currently being used by the BBC Sport app and BBC+ app