0

We are designing an app and want to use a floating action button (FAB) in order to add an item to our list. Now this list can be either a "task" or a "reward" depending on what page the user is on.

enter image description here

You can see that if you are on the rewards page, then you use the floating action button to add a reward, while if you switch to the tasks list you use that same button to add a task. I was wondering if this is bad ux considering that we are having one identical button doing two different functions? Would the users know to switch pages before pressing the FAB to add to their respective list? Should we get rid of the FAB in favor of a standard "add" button?

3 Answers 3

0

A couple of things to consider in the question:

  1. What's shown in the image are not buttons, they are cards in a vertical dashboard
  2. If the image corresponds to the explanation, they are not on two different pages but on two tabs

From there, there is no problem in UX with showing the same card's design in different tabs, on the contrary, it's part of the design guideline.

Now, the problem that can arise is the user, seeing the same elements all the time, confuses the sections, so sometimes some kind of subtle contrast is usually made: color, shape, position, figure-ground, space, alignment, etc.

1
  • My question was more related to the floating action button (FAB). The blue floating action button has two different functions depending on the tab the user is on. (if user is on task, the FAB adds a task. if user is on reward, FAB adds a reward. I did find a link that explains this use in lateral screens which helped. material.io/archive/guidelines/components/… If you search lateral screens here, you will see the problem I am running into, but it doesnt seem to be a major ux issue
    – Gene
    Aug 15, 2022 at 17:02
0

I agree with Danielillo. The problem is that users can't understand what this floating button is designed for, is this for tasks or rewards because you used the same button in both screens. As he mentioned, you can experiment with colour, shape, iconography, or, even better, implement the label in a default view, which will add more clarity in your design for your users. When users scroll down, you can hide the label also. To explore this kind of experience, I recommend to interact with the new Gmail design. They have done this very beautifully. I also shared a couple of screenshots here from Gmail. I hope it helps you.

Mailbox

Chat

Space

0

I think this is something that you should test with users.

(Slightly) changing the action on the button does break consistency, which is probably what you're picking up as the UX problem -- but I'm wondering if that's really going to be an issue, given that the user has clearly switched contexts, and would expect the FAB to add an item of that context.

It might be that the FAB itself is okay, but you have to be very clear in the next screen about that the user is adding (a bold title that says Add Reward, for example).

It would be good to investigate other examples of contextual FABs, but I don't see your example violating existing FAB principles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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