Multimedia UI design guidelines

A good multimedia user interface (UI) lets users reach information and use media easily and with little effort. The design should follow structured guidelines on how the interface is organised and presented.

General design guidelines

1. Consistency. Use the same layout, colours, icons, fonts, terminology and navigation on every screen. Example: the back button is always at the same position.
2. Simplicity and clarity. Show only what is needed, with clear labels and uncluttered screens. Avoid excess animation and sound that distract.
3. Clear navigation structure. Users must always know where they are, how they got there and how to go back or to the home page. Use menus, breadcrumbs, and a map or index. Common structures are linear, hierarchical, network (web) and combined.
4. User control. Users should control playback of audio and video (play, pause, stop, volume, skip) and be able to exit at any time.
5. Feedback. Give immediate response to actions: highlight a pressed button, show a progress bar while loading.
6. Appropriate use of media. Choose each medium for what it conveys best: text for detail, images for appearance, audio for narration, video for motion. Do not use media for decoration only.
7. Colour and contrast. Use a limited palette, good contrast between text and background, and consider colour-blind users.
8. Typography. Readable font size, few font styles, and short lines of text.
9. Visual balance and grouping. Place related items together and use white space; place important items where the eye falls first (top-left).
10. Error prevention and help. Confirm destructive actions, give clear error messages, and offer help or a tutorial.
11. Know the users. Design for the target audience's age, skill and language, and provide accessibility options such as subtitles.
12. Fast response. Compress media and give loading indicators to keep waits short.

Example: an e-learning course has a fixed top menu, a lesson list on the left, a content pane with a video that has play and pause controls and subtitles, and Previous/Next buttons at the bottom of every page. The look is identical on all pages, and a progress bar shows completion.