BBC UX design guidelines and principles

These design principles focus primarily on the usability of the system’s interface and information design. They do not address designing a more branded feel to an interface.

Interface design is only one element of a great user experience. We advise you take a human-centred approach to design. This means that you include user research to understand how your end-users may achieve their tasks in any new or changed system, their context of use, as well as taking the wider consideration of the human systems that surround the processes and workflows in the software systems.

If you have questions, or need further support, ask your BBC contact to put you in touch with the in-house User Experience & Design team.

1. Location & navigation

• Make it clear to the user where they are in the system, and what step they are at in any sequence in order to perform their task.
• Label or title every state (e.g. screen, dialogue box) effectively so the user can identify it and understand how to interact with it.
• Inform and update the user about what is happening in an appropriate and timely way.
• Enable the user to cancel or retract a journey, and to return to the previous state without affecting any settings already made.
• Do not allow the user to enter a state that they can’t leave.
• Provide a clear and well-structured site map when needed.
• Prioritise steps and content which are most relevant and important for the user.

2. Minimal navigational effort

• Ensure there are a minimum number of useful and relevant steps between related components.
• Avoid unnecessary repetition in the sequence of steps.
• Enable the user to move between system states and functional components as easily as possible.
• When appropriate, enable the user to return to a previous step without having to retract all the intervening steps they have already made.
• Where appropriate, proactively prompt the user to guide them to the next step of the process
• Ensure call-to-actions are clear, well labelled and appear as though you can interact with them. Consider how positive actions are identified and differentiated from destructive actions.
• Ensure links are clear, descriptive and well labelled.

3. Consistency of interactions

• Ensure the steps required to complete any specific task are consistent. For example, the steps to save a document should be consistent each time the user wishes to save.
• Ensure that interaction between components operates consistently, so that the user is able to predict what the outcome will be for any given activity.
• Consider the consistency of the software across platforms so users moving between platforms can maximise their existing knowledge of the software, and reduce re-learning and confusion.

4. Memory load

• Avoid forcing the user to enter or complete complex information without support.
• If the user must enter information in a specific format, support the user as much as possible, either with forgiving and helpful input rules (e.g. accepting spaces in phone numbers), and/or provide shortcuts and options for auto-complete (e.g. country codes for phone numbers.)
• Avoid taxing the user’s short-term memory. Keep displays simple, consolidate multiple page or panels, and ensure items are easy to locate and recognise as oppose to relying on users’ recall.
• Don’t force the user to remember information from one part of the system to another.
• If the user needs help, provide instructions in a way that enables the user to complete the task without needing to commit the instructions to memory.
• Write help that is concise, easy to read, easy to locate and in language that is easy to understand.

5. Visual Clarity

• Ensure that graphical objects that can be interacted with or support the user’s goal should are discernible and distinguishable from other each other.
• Design icons that enable the user to distinguish their function and differentiate them from each other. Use GEL icons where possible.
• Ensure all text is readable, with effective use of font size, type and line separation. (See the BBC Accessibility and Assistive Technology Standards).
• Ensure size, colour and accordance of interaction of objects (how they suggest possible interactions – e.g. a button looks clickable) is appropriate for their use.

6. Visual Contrast

• Ensure there is sufficient contrast between text (and visual objects) and their background.
• Pick colours that support the user’s goals, their duration spent on activities in the software and are not uncomfortable or glaring.
• Avoid common colour clashes (red-green, blue-black, blue-red, blue-yellow).
• Ensure colour choice is culturally and contextually appropriate.

7. Visual Load

• Ensure that during normal use, the interface should not appear cluttered.
• Consider grouping, alignment, spacing, and gestalt to organise layout for optimum clarity.
• Use as few colours and fonts faces as you need.
• Where possible use the BBC’s typeface: BBC Reith.
• Where colour is used to indicate specific meaning, use additional visual treatments to distinguish this further. Do not rely on colour alone to denote difference.
• Use minimal animation (moving or flashing graphical items) and if possible, set as a user preference.
• Ensure there is enough contrast between text and the background.  (See the BBC Accessibility and Assistive Technology Standards).

8. Audio Load

• Use audio output sparingly - for error, warning tones or indication of changes in system state etc.
• Allow volume to be changed.

9. Motor Load

• Ensure the user can perform tasks with the minimum of physical actions.
• Allow for the support of multiple input modes, such as using keyboard only or using the mouse and keyboard simultaneously.

10. Error management

• Where possible, design the system so errors are hard to make, and easy to recover from.
• If the user makes an error, offer simple, understandable information about what went wrong and how to correct the error.
• Prevent significant user errors (e.g. data loss) or give sufficient warning stating the specific consequences.
• Make trivial errors retractable (e.g. allow the user to undo) but don’t necessarily prevent them.
• Make complex inputs (e.g. settings made in a dialogue box) retractable in full (via a ‘cancel’ option), and modifiable (via resetting or rewriting) before final acceptance.
• Clearly indicate required and optional form fields.
• Break up complex forms and processes into readily understood steps and sections.
• Support users according to their level of expertise (e.g. short cuts for expert users, help and instructions for novice users).

11. Feedback

• Display the status of the system (i.e. what it is doing) to the user at all times.
• Where the user has initiated an action, present confirmation immediately after the action.
• Match continuous user input by the appropriate feedback, with minimal delay.
• Ensure site or application performance experience (e.g. system up time, slow page downloads, long delays) doesn’t inhibit the user.

12. Responsiveness

• Ensure minimal delay in the initiation of system process.
• Ensure interactive, selective objects have no resistance in their selection.
• Indicate any latency in the system appropriately to user so they understand the system status.

13. Language & terminology

• Use language and terminology that is clear and understandable to the user.
• Use language and tone of voice that is appropriate for the context of use.
• Use the minimum amount of informative text to communicate the required message.
• Present information that is accurate, unambiguous and explicit.

14. Consistency in communication

• Ensure language style, tone and terminology is consistent across components and states. Users should be able to predict and understand the labels and language in the system.
• Present information and content of the same consistently.
• Ensure language is appropriate for the intended audience.

15. Browser and operating system support

• Support commonly used browsers and devices, including mobile and touch devices in the BBC.
• Support IE, Firefox, Chrome and Safari – the current versions and previous two major versions.
• Support IOS – the current version and previous two major versions.
• Build and optimise for a variety of screen sizes.