4

enter image description hereenter image description hereI am working on a project where my actionable buttons next and previous were placed to the bottom right and left corner of the browser. It wasn't a problem until floating feedback button was added to our application. This floating button has overlapped the next button and the flash messages that appear at the bottom right.

I have following possible options to solve this problem 1. Change floating feedback position to bottom left corner 2. Centralized next and previous button 3. Change flash message position from bottom right to bottom left.

I have already centralized the next and previous button, but I am not sure on swapping the position of floating button to bottom left cause I think the button will be ignored and no user will click on the button. Also, shifting flash message to the bottom left may cause the user to ignore important messages.

  • 1
    Do you have a screen shot or a clipping? – DarrylGodden Aug 17 '17 at 7:09
1

Are the users supposed to do something with the flash messages, or is it merely giving them a heads up that something happened? In the latter case, try moving it to the top right. It's noticeable enough that users will quickly glance at it because it's in their peripheral vision, but it should not impact or interrupt their flow.

Regarding the feedback button, having some more breathing space at the bottom of your pages should solve any overlaying consequences from having it being sticky. I would keep it bottom right since it's the most often used location for feedback or help services. Centralising the actionable buttons would also work in your case.

Added an image of what I'm trying to say:

http://imgur.com/a/Eoy4g

1

Have you considered other UI elements (and placement) than a floating action button? FABs are intended often as the primary action on a page. Task completion is the primary focus, feedback is tertiary at best here.

Are you relying on a feedback button as the sole means to understand what's not working in the UI, or do you also have access to user testing and observation? You can also use tools to track interactions like Google Tag Manager.

If a user is focused on giving feedback, it often means they cannot complete a task.

Caution about breaking convention on patterns (and user expectation)

You're using a Material component which is often used for the creation (or addition) of new entities.

With Material's prominence across applications, you're competing with patterns that are reinforced by the widespread use of basic UI elements providing functions (primary actions for an FAB) that are different than what you're using it for in your example.

Users are building up expectations about what these elements do.

Only one floating action button is recommended per screen to represent the most common action.

Floating action buttons are used for a promoted action.

enter image description here

Your current application

In your example above, it appears you have a step through. The focus is on getting them through the sequence of actions, creating a focus that keeps them on task.

As you have it right now, Feedback has more contrast and prominence than the other buttons on screen, and looks the most active.

A Material alternative: in the navbar

From the material guidelines: help & feedback

This lumps help & feedback together:

To make it easier for users to find help for urgent issues, such as payments and refunds, place a Help icon in the app bar.

Desktop applications may also place a Help icon in the app bar, as there is more space in the desktop UI.

Here's an example from Google Cloud application; in the upper right in the navbar. It's always visible, yet doesn't distract from any other actions.

enter image description here

Here's a chat app example, with icon plus text:

enter image description here

0

How about placing it halfway up the page as a pull-out? This could be positioned left or right, depending on content, and coloured to match your website.

Feedback

  • 2
    I do love it when people apply a negative score without a comment. – DarrylGodden Aug 17 '17 at 8:42
  • I would honestly like to know the reasons that this is being downvoted. A floating action button is usually reserved for a primary action in almost all applications I've seen so far. It's often used to create a new entity. – Mike M Aug 17 '17 at 10:36
0

Floating Action Button is a great innovation but it needs to be used very carefully. They don't always serve the intended purpose and most of the times are a nuisance as they overlap with other elements on the page and draw focus away from the rest of the page.

While FABs present a fine and reasonable approach to completing an action, they are very hard to ignore. As the result, they can be a bad move for overall UX.

What are the alternatives?

  • One of the best ways to use FAB is to place it on partitions. This gives the button a base and keeps it out of the way of other actions or page elements (See screenshot below)

  • Use sticky headers. If the action is so important, then go with the Dashboard approach and keep the header with the action fixed.

  • Another alternative is to design the application in such a way that there is no other interaction at the bottom half of the page. Sticky footer or bottom action bar may be used here.

FAB on page partition Fixed footer with primary action

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.