Best way to switch views inside widget?

Question

I am building a web application, and I am currently using Floating Action Buttons in the bottom right hand corner of certain predefined widgets to toggle between a main view and a settings view as indicated by their respective icon.

I have two dilemmas that I am now facing --

1. I want to add a main floating action button in the bottom right of the application to trigger the adding of dynamic widgets, and I fear that this would result in floating action button overkill if these exist on widgets too.

2. I could use a tab view inside the widget to switch between main and settings views, except that I am using this in the settings view inside each widget (example)

What would be the best way to switch views inside a widget without using a floating action button? Or on the contrary, what would be the best way to add a dynamic widget (preferably in accordance to material design specs) that is not a Floating Action Button?

Thanks!

Answer 1

It's common to place a view switcher in the top bar (eg a settings cog icon).

Floating Action Buttons (FABs) are not commonly used to switch views. FABs should represent the essential and primary action or purpose of a page, and that is rarely "switch views".

You may want to refer to the resources in this question for more reading on how to use a FAB correctly:

https://ux.stackexchange.com/a/81457/62445

Answer 2

I really like toggle switches for this. They are easy to understand, indicate the current view, and are visually differentiated from buttons, tabs, and other kinds of nav.

One challenge is that Material guidelines suggest toggles be used to indicate "On" and "Off" for a particular setting. Sometimes, switching views conforms to this, as in my example, where the two views amount to adding/removing extra detail. In other cases, like the one you describe, a toggle would not be appropriate if you are adhering strictly to Material.

In these cases, and in cases where there are more than 2 views, I use tabs that are visually distinct from my navigation. While the nav might be the kind of text+underline motif that Material uses, my toggle might look like a more traditional tab: