I am considering the following: enter image description here

Where as you have 4 screen and each screen has a "main" action which changes on the fly. By change I mean the icon and the color of the circle.

However I feel like this will be very bad from UX point of view?

  • It needn't be bad, as long as the changes are what the user would anticipate and appropriate to each context. – Steve Jones Feb 23 '18 at 17:56
  • Well in the center there will be an icon with the current state and text sami-describing what the main action does (ex. Please turn on your Wifi and pressing the button does that) – user112500 Feb 23 '18 at 22:42

Actually, this is basically what a floating action button is: https://material.io/guidelines/components/buttons-floating-action-button.html .

However, the way you're presenting the button, it seems like a part of the bottom navigation bar, not a separate entity. Given that it changes based on context and has a completely different role in the UI, it should be a separate entity and presented as such. Perhaps losing the gray outline, adding a shadow to make it feel like it's above the bar, and spacing the elements of the navigation bar as if the button wasn't there (4 columns instead of 5) might make it clear that it's separate. You should test with users after, though, to be sure.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.