Transient controls that float over content are a common pattern for applications that show images or video.
Since overlaid controls hide when they are not in use, they help to provide an uncluttered viewing experience. They are appropriate when it is desirable to present a clean and distraction-free view on a content item — this is particularly (although not exclusively) appropriate for images and video.
Overlaid controls may be inappropriate if they obscure relevant parts of the content below. Image editing controls may interfere with the ability to see their effects, for example. In these cases, controls should not be overlaid.
Follow established conventions for this type of control, such as left/right browse buttons in image viewers, and player controls at the bottom for video.
Controls should be displayed when the pointer is moved over the content, or when it is tapped (on touch devices).
Overlaid controls can be attached to the edge of the content/window, or can be free-floating. Action bars can be treated as overlaid controls.
Use the standard “OSD” theme style for overlaid controls.
Got a comment? Spotted an error? Found the instructions unclear? Send feedback about this page.