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 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.
The word ‘topics’ can be renamed to whatever is appropriate or necessary to your app or brand (e.g. ‘My interests’ in BBC+)
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 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
- Native ‘Re-order’ icon (optional for ‘Add topics’)
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.
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.
The GEL ‘Yes’ icon is to indicate active topics. An ‘Add’ icon is used to show inactive topics.
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.
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.
A short label descriptor for your checklist item. It is recommended that the labels do not exceed a single line.
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.
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.
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.
This paragraph should be no longer than 2 lines and helps give context to the task at hand.
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."
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.
Category headers can allow you to easily scan a large number of topics.
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.
Pattern in Action
The pattern is currently being used by the BBC Sport app and BBC+ app