👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Audio and Video Player Guidelines

Audio and video players allow users to watch and listen to movies, music, podcasts, videos, and more.

Applies to:
Video Player
Playback

Rich media controls and displays

Rich media controls and displays are inputs and read-outs that give the user more information and control when interacting with audio and video.

Icon buttons and inputs

Icon buttons are inputs used to control the media the user is interacting with.

Play button: The play button starts playing a video or audio.

Pause button: The pause button pauses playing the audio or video.

Stop: The stop button stops the video or song from playing.

Back: Also known as "step back," this button has two functions depending on whether it is a video or audio player and how far into the song/video the user is. If the user clicks this button at the beginning of an audio track, it will play the previous audio track. If the user clicks this button during a video or audio track, it will jump to the very beginning of that video or audio track. Sometimes this icon is also represented by another arrow.

Skip: Also known as "step forward," this button allows the user to skip the current video or audio they are interacting with and start playing the next one in the list. Sometimes this icon is also represented by another arrow.

Rewind: This button allows the user to rewind or view a video backward. This is helpful when the user wants to go back to a specific moment in the video. Some media players also use this icon in place of the "back" icon.

Fast-forward: This is a button that allows the user to go forward. If pressed, it will usually speed up the pace that a video is being played. This button isn’t used that often anymore as most users find seek bars more efficient. Some media players also use this icon in place of the "skip" icon.

Settings: This allows users to adjust the video settings, such as the video quality and playback speed.

Shuffle: This toggle button is used to shuffle between songs.

Repeat: This toggle button is used to play a song or video on repeat.

Closed captions: This toggle button reveals transcribed text at the bottom of the video.

Expand video: This button expands the video to fill the entire screen.

Sliders

Sliders are visual representations of progress or quantity. They both relay information and act as inputs.

Seek bar: The seek bar is a slider that indicates how far into the video or audio playback the user is currently. It can also be used to adjust the location by dragging the slider forward or back.

Volume control: The volume control increases or decreases the volume levels. It can either be done as a percentage (e.g. 80% volume) or as a level (e.g. 4/5). Volume control sliders can either be vertical or horizontal.

Read-only information

Some elements relay read-only information (i.e., information the user can view but not interact with).

Duration time: This is a number that shows how long a video or audio track is.

Progress time: This is a number that shows how much of the video or audio track the user has watched or listened to. This can also be shown with a seek bar.

Audio image cover: The cover is usually an image used to represent a song, album, or podcast episode.

Video thumbnail: A thumbnail is a static image used as a preview for a video.


Video players

Video players are applications that allow users to watch videos, films, home recordings, and more. They are usually made up of the display area, which is where the actual video would be, and video controls.

These controls may change depending on the product. At a minimum, a video player should have a pause button, play button, seek bar, and volume controls. Ideally, a video player should also have closed captions, expand to full screen, and quality settings.


Audio players

Audio players are apps or components that play audio, such as songs, podcasts, online radio, sound effects, and more.

Single audio track player

Single audio track components are usually used on websites that just want to display one track. The most common example of this is podcast websites, where each show has its own web page with the audio track, transcript, and bonus material.

At a minimum, single audio track players will have a play/pause button, seek bar, duration, track details, and volume controls. Some will also have a cover image area that can display the show’s artwork.

Audio player

Audio players are most often used for listening to multiple tracks of music or episodes of podcasts. They are designed so that the user can listen to one track after another.

The episodes or songs will usually appear in a list with their details. The player controls will usually include a play/pause button, seek bar, duration and progress time, volume controls, and skip and back buttons. Some audio players also have shuffle and repeat buttons.


Accessibility features

Without subtitles, closed captions, and transcripts, audio and visual media aren’t accessible to everyone. If you want to share your content with everyone regardless of their physical or language limitations, you need to put the following options in place.

Different language subtitles

Subtitles are the text displayed at the bottom of a video that translates the audio dialog or voice-over. Different language subtitles allow videos to be watched and understood by someone of a different language, provided a translation is available for that language.

Who benefits: Non-native language speakers
Users who don’t speak the video’s dialog’s language, benefit from being able to watch the video with translated subtitles. It is often used as a method to learn a new language.

Same language subtitles (SLS) and closed captions

Same language subtitles and closed captions are both text at the bottom of a video transcribing the audio. Where they differ is in the amount of detail.

SLS are standard subtitles that have the dialog transcribed. SLS assume that the viewer can hear but prefers to have the dialog shown in a written format.

Closed captions are more detailed and contain the audio dialog as well as other noises. These additional sounds could be ambient, such as traffic or dogs barking, or non-verbal, such as crying sounds. For people who can’t hear, closed captions create a richer and more rounded experience.

Who directly benefits: Users with hearing impairments
Users with hearing impairments can watch videos and still understand most of what is going on.

Who indirectly benefits:

  • Users who are second-language or use a different dialect.
  • Children who are learning to read. Turn on the subtitles has done extensive research into how much children’s reading has improved by just making them watch TV with subtitles.
  • Users in a noisy environment. Users in noisy homes, trains, or anywhere else with a lot of noise pollution will often turn subtitles on to not miss any of the dialog.
  • Users who aren’t able to watch with the sound. Users in public places without headphones may watch videos with the sound turned off but with the subtitles on.

Transcripts

Transcripts are the video or audio written out in long form. This means that a user can read the video or audio track contents without having to watch or listen to the track itself.

Basic transcript: This transcript type is just the video or podcasts dialog written out.

Descriptive transcript: This transcript type contains the video’s dialog and all other visual and audio details.

Who directly benefits: Deafblind users and people with auditory impairments
Transcripts are the only way deafblind users can access content in videos and audio files. They do this using a tactile braille display.

Who indirectly benefits: Researchers
Researchers (professional and amateur) may find it easier and quicker to go through a transcript rather than watching a whole video or podcast if they are looking for something specific.


Variations

There are many different variations of rich media controls.

Controls included in Balsamiq

Balsamiq offers a range of pre-made controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.

Volume controls: A volume control lets the user adjust the volume of an audio or video file.

Playback controls: Playback controls let the user play, skip, and go back through media.

Video player: The video player control plays films and videos for users.

DIY Symbols

You can make your own rich media Symbols in Balsamiq.

Seek bar: A seek bar lets the user know the time progress through a rich media item. You can create one using labels and a horizontal slider. To make a chunkier version, you can use a progress bar and two labels.

Playback controls: Playback controls let the user play, skip, and go back through media. You can create them using circle buttons.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.