Examine Interaction for Open/Close in Media Player Menus

[joncameron]

Description

Which menu items should be click to open, and which should open on hover? There are other players that we could look at. Should CC be a button with binary state as well as a menu on hover, or just a menu on hover etc. YouTube, LinkedIn, Vimeo, ASP and others have different design patterns that we could look at and discuss as a group. Current Ramp items are mixed between click and click to open.

Done Looks Like

• Generate a list of each menu item in the Ramp media player and whether they should be click, click to open a menu, open a menu on hover after looking at design examples from other players.
• Check that current behavior is consistent across different player sizes and contexts (embedded player etc.)

[Dananji]

Pointer actions used to open the popup menus in the player's control bar in different players are as follows;
The columns represent different controls that mostly use popup menus, the rows represent different players.

	Volume	Captions	Settings (gear icon)	Playback rate	Quality selector	Other
YouTube	hover: opens volume panel, click: mute/unmute	click: toggles closed captions, this doesn't have a popup menu	hover: none, click: opens menu	inside settings menu	inside settings menu	none
Vimeo	same behavior	hover: none, click: opens menu	hover: none, click: opens menu	inside settings menu	inside settings menu	Transcript -> click: shows transcript panel on the right hand side of video, hover: none
LinkedIn Learning player (VideoJS)	same behavior	hover: none, click: opens menu	hover: none, click: opens menu	hover: none, click: opens menu	inside settings menu	none
Cousera player (VideoJS)	same behavior	hover/click: opens menu	hover/click: opens menu	N/A	N/A	none
Netflix	same behavior	hover/click: opens menu	N/A	hover/click: opens menu	N/A	Episodes -> hover/click: opens menu
Ramp	same behavior	hover: none, click: opens menu	hover: none, click: opens menu	hover: none, click: opens menu	hover: none, click: opens menu	File download: hover: none, click: opens menu

Summary:

• volume button uses the pointer actions (hover: opens volume panel, click: mute/unmute) across players
• other popup menu buttons has mixed pointer actions (hover and/or click) across players
• none of the players use the same pointer action for all popup menu controls (only hover or only click to open)
• YouTube, Vimeo, and LinkedIn Learning uses the CC button, and only YouTube uses it as a toggle button and it doesn't have a popup menu
• Cousera and Netflix uses a subtitles button instead of a CC button
• all the control icons show a title on hover for all the players except for Netflix