User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
What is the difference between popover menu, drop-down menu & fly-out menu? Are they same in functionality or do they vary?
If no, why so many variations?
Popover menu drop-down menu
Fly-out menu
For reference:
https://experience.sap.com/fiori-design-web/quickview/
https://lightningdesignsystem.com/components/popovers/
https://getbootstrap.com/docs/4.0/components/dropdowns/
Note: These are just for references!!
No, all are different.
Popover Menu:it is used when we want to collapse all secondary items or actions (Ex:Edit,Save,Refresh,Delete) to show on single click trigger (icons or buttons). regularly it's used in touch pad and ipads.
Drop down Menu:it is initiate primary actions based on the selected option.
Fly out menu: it is used when we have categories and sub categories of links to redirect to other page.
My sources:
https://www.nngroup.com/articles/drop-down-menus/
https://docs.nextcloud.com/server/12/developer_manual/design/popovermenu.html
In my opinion, all these UI elements vary. I will discuss what I think about these:
To show some basic information about an element or button to the user. The popovers are generally advanced tooltips with more content and helpful information. They mostly appear on hover and autohides without a need for the user to close them manually. Directions are generally either top, bottom, left, right but not diagonal. Moreover, mostly they do not have child elements. The example you mentioned in the post is not of a popover but a dropdown.
An example:
A dropdown in the is like a select element. On clicking or hovering over the element, its child elements are animated and exposed down below it. They just 'drop down' after click or hover. The difference between popover and dropdown in most cases is that dropdown has child elements.
A flyout can show its child elements in multiple ways compared to a dropdown, such as upwards, downwards, radially etc. The child elements may or may not animate outwards, ie flying out from the parent.
Just for the sake of a balanced argument I will take the point of view that these menus are essentially the same (i.e. they solve the same problem but in different ways).
Problem 1 - there is more content than there is space to display them all at all times.
Problem 2 - how can we provide the interactions required at the point of need in the right context?
The user-triggered interaction of revealing more content at the point of interest solves both problems by hiding the additional content/interaction only when the user asks for it. This eliminates the need for more room to display all the information when it is not needed all the time, thus providing a more compact and less cluttered design, which is more important in mobile applications compared to desktop applications.
The variations that you see from the example provided comes from a number of different sources:
design patterns: the trigger may come from a button-like interface element, a dropdown selector interface element, a navigation/menu component but the essential interaction of showing and hiding information based on a user-driven action remains the same. Where it is situated in the layout and what design/development framework is used determines what it looks and behaves like.
amount of information: the way the container for the revealed information is created depends on the amount of information you need to display, and how much space is available. It is natural to see variations between desktop and mobile devices, as well as screen resolutions or aspect rations.
type/complexity of interaction: this design pattern supports a simple click or hover interaction and returns the focus back to the main window or region that the user is focused on. Alternatively the item selected could be a link that takes the user to a different view of the application or a different section of the screen.
With UI design terms like these, there can be many popular terms for the same thing. Companies will purposely use unique terminology for business reasons and legal reasons. People will misuse terminology because it's technical. Menu is definitely a technical word but these terms are not.
These are very generic terms though. For example, every menu that expands vertically is a dropdown. Material Design Guidelines rarely uses the term dropdown. Dropdown menus are simply referred to as menus: https://material.io/guidelines/components/menus.html#menus-simple-menus
Look to popular design guidelines to find or validate UI terminology. The terminology used by design guidelines is itself designed by designers and developers working together.
In general, there are two types of menus in UI. The first type of menu is a list of commands. Commands make the application do something. This is the original core programming UI. The second type of menu is a only a selection tool. The menu has only one command and the items in menu are just options for that command. A navigation menu is this type of menu.
There are differences between the terms you're asking about. Dropdown Menu is a desktop design. Popover menu is a touch design. Fly-out menu is a desktop dropdown menu sub-menu.
Dropdown is the original description given to expanding text menus on desktop. Dropdown refers to the visual effect of the menu opening. So all menus dropdown but the term is generally used for keyboard and mouse menus (desktop) as opposed to touch menus.
Popover refers to the visual effect of the menu appearing on top of everything visually. So all menus popover. The term is used for touch menus.
Fly-out refers to opening horizontally as opposed to vertically. The term is used for desktop dropdown sub-menus. Fly-outs are dropdowns.
Here are examples of dropdown and popover from Google's Material Design Guidelines and Apple's Human Interaction Guidelines for Mac OS and iOS. Also shows how Apple uses "popup" for their Mac OS as opposed to "popover".
