2

Having trouble figuring out a sensible place for a button.

Ideal Objectives

  • Place the button in an area that is intuitive and makes sense to the user
  • Avoid wasting space since that could detract from the mobile experience on smaller screens
  • Avoid "hacking" over top of the material design library (Angular Material)
  • Remain faithful to Material Design (if feasible)

Problem

  • Have a page with group of tabs that pertain to scheduling.
  • Also on the page there needs to be a button that enables the user to "Add a Schedule"

Possible Solutions

Place button directly to the right of the tabs

enter image description here

  • Pros
    • Relatively easy to do
  • Cons
    • A lot of wasted vertical space

(Slight modification would be to float the button over top of the right side of the tabs, but this would be hacking the angular material library and would probably cause a lot of problems with other device screen sizes and maintainability)

Place button on top of tabs

enter image description here

  • Pros
    • Relatively easy to do
  • Cons
    • A lot of wasted horizontal space

Place button inside each tab

enter image description here

  • Pros
    • Button will not waste space
  • Cons
    • Harder to implement since each screen will need to have the button added to it.
    • Harder to maintain since developers might forget to add the button to future tabs.

Assumptions

I can think of at least one assumption I am making that perhaps should be questioned. Perhaps there are more assumptions that should be questioned?:

  • Add Schedule" should be a button?
  • 1
    Have you considered the Material Design: Floating Action Button? – Rolf ツ Jan 18 '18 at 23:10
1

This has a lot to do with the strength of the button. Assuming "Add Schedule" needs to be pretty strong and is going to be one of the user's primary actions, it is best to have it left aligned. For that reason, I favor putting it above the tabs. Sure you waste some horizontal space, but that seems to be the convention with designs like this, and you are wasting less space than you would with the other method.

The reason I'm not big into placing the button under the tabs is because that infers that the button is within the context of the selected tab, but if I understand correctly, that button should be independent of all the tabs.

Hope this helps!

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.