0

I have a UI like this designed at the moment with Bootstrap modal:

enter image description here

I was thinking the "Add Shift" button looks misplaced. Would there be any better placement for the button so it doesn't look so out of place, yet still easily accessible?

I was thinking of adding (Add) to the tabs, but wouldn't that also affect usability?

Improve this question
3
  • I think it looks misplaced because there is no room to breath. There is a lot of space that can be created to allow the information to breath. Try spacing things out.
    – UXerUIer
    Dec 12, 2014 at 1:56
  • Also, is shift 1 (and 2) clickable? I highly suggest you don't make it a button if it is. It seems like a secondary action.
    – UXerUIer
    Dec 12, 2014 at 1:57
  • They are clickable; they pop up a dropdown if clicked, with actions like Delete.
    – David Xu
    Dec 12, 2014 at 2:07

2 Answers 2

Reset to default
1

Decided to make UI much simpler and obvious, saved a lot of space in the process! :)

enter image description here

Improve this answer
4
  • A couple of points. 1) It's not clear how to add a shift, and 2) as a general rule, the tabs should mimic their real world equivalents and connect to the main body they represent. The horizontal line above the Monday row breaks this.
    – dennislees
    Dec 12, 2014 at 3:33
  • @dennisless Make sense; how's this? dropbox.com/s/t0735k7xiaasiju/…
    – David Xu
    Dec 12, 2014 at 3:50
  • Tab looks good (though I think the tabs are a particular weakness in Bootstrap. They're arguably too stripped down and flat. I'd be tempted to add some contrast color to the inactive tabs (active tab > white like the page, inactive tabs > light gray) just to strengthen the pattern. Also, as final note, your layout would really benefit from touch more whitespace. Just a few more pixels of vertical space between the horizontal rows. That would make it look less cramped and make parsing the page a bit easier.
    – dennislees
    Dec 12, 2014 at 16:13
  • @dennisless thanks for the comment! i'll be adding a bit more margin to the items in the rows. although i agree with your comment about the tabs, I find mobile is tending more toward flat design so i'll just leave it like that for now.
    – David Xu
    Dec 12, 2014 at 18:47
1

In my opinion, right side above of the table would be a better place, it looks good if it display in same size of the button and font size which is used for - Shift 1 button enter image description here

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.