2

Which will be a better approach to display this banner on a dashboard?

Option 1

enter image description here

Option 2

enter image description here

Improve this question
2
  • 5
    This feels like you're trying to get us to do your homework. What's your analysis of these two designs? Why do you need help understanding the differences? What other possible choices have you explored?
    – Roux Martin
    Dec 7, 2022 at 9:34
  • 1
    Adding to @RouxMartin's comment, I find your question too broad. We are lacking context and information around this decision. Each of these can be "better" depending on your assumptions.
    – Mahm00d
    Dec 7, 2022 at 12:21

3 Answers 3

Reset to default
1

It really depends on the context the banner is placed. When there is a clear difference between context and banner, i would go with option 2.

In option 2 you distinguish between information and action. That makes it more clear for the user. First you get the information and can then express an action. I would also would place the more important button (in my view, Exercise new) on the right side. So the user can scan which option he wants to use (like: no, yes).

Option 1 has more noise, and it's harder for the user to scan what is information and what are his possible interactions.

If you go on mobile, the actions would be right to place them under the Information, but with a little more space to make it more clear that you have the information and then actions.

Improve this answer
1

Hard to say. Do you have the option to A/B test or even eye-track?

Intuitively (which you should always take with a grain of salt):

  • Option 2 looks cleaner, but if my screen is larger, I might not see the buttons far to the right
  • Apart from that, I agree with @metzograf on all counts; especially that it depends on context (hence my test suggestion)
  • If Exercise now is your primary button / Call To Action on the whole site, I think you would benefit by making it bigger and more outstanding (more padding, maybe a subtle gradient, border or shadow...), so that you definitely see it as a user - don't underestimate how easy it is to overlook things when in scanning mode...
  • It may also worth it to change the order of your buttons, depending on which platform this is running on - see here
Improve this answer
0

Depends on what you're targeting. Option 1 would work best on mobile due to limited screen width but option 2 would be better desktop as it frees up more vertical space. With that being said, there's nothing stopping you from doing both with a responsive UI.

Improve this answer

Your Answer

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

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