6

I'm working on a web app which shows a bunch of charts for how the sales are going. This screenshot is from my startpage.

enter image description here

The label I've marked with a red arrow is a label indicating who the sales target charts are for and it's taking too much vertical space, pushing everything down more than I would like, but I have no idea how to show a clear label anywhere else

Any ideas?

  • 8
    too much vertical space? I barely see it and wouldn't notice it without the red arrow! If you're convinced this really is too much vertical space (for any reason), just test with users. As I see it, I'd recommend to increase it to at least double of what it is now – Devin Jul 28 '17 at 17:30
9

Great question, Weblurk. There are an infinite number of solutions if this app allows custom coding. But if you can only slide blocks around, then perhaps a UX solution should be less design change and more text change. If you truly want that headline gone, then simply reword the card titles to include the word "office."

new card titles

Yes, it may be redundant to repeat the word "office" four times, but technically, that is what you get if you wish to reverse engineer the purpose of a headline.

Would you like to see custom coding design options (UI) or does this UX shuffling of words satisfy your need?

  • 1
    I ended up using this approach. A bit reduntant perhaps but it makes it really clear what each box contains AND it solves the vertical space issue. Thanks! – Weblurk Aug 2 '17 at 7:59
24

I'd even increase the vertical space for your label. It needs a bit more breathing room. If you do this, you can move your filter options (or are they action buttons?) to the top. This will clean up your UI, position labels and buttons in a more logical position and also shorten the overall height of your application. See the images below.

  1. Current situation (left)
  2. Improvement as said above (right)

enter image description here

  • 1
    very nice indeed :) – Devin Jul 28 '17 at 17:30
  • 1
    I like this option a lot. – Matthew Bradshaw Jul 29 '17 at 3:14
4

In the mockup above how about moving the label to the left and then moving the action button at the bottom (To Do, More Business Opportunities and Latest Actions) to the top right. Now your vertical space has been utilised more effectively and you can use the label space as a heading indicator?

I'm not entirely sure what the action buttons below are for but that would be one solution if its possible.

2

Move the text to the red block, and change it to:

"Office Sales Targets"

For the hard of thinking:

Sales Targets

  • could you elaborate? Right now this is more of a comment than an answer. – Mayo Jul 28 '17 at 16:49
  • 1
    If they move the text to the red block, the whole section moves up. I know the difference between a comment and an answer. – DarrylGodden Jul 28 '17 at 20:49

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.