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?

Improve this question
1
  • 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, 2017 at 17:30

4 Answers 4

Reset to default
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?

Improve this answer
1
  • 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, 2017 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

Improve this answer
2
  • 1
    very nice indeed :)
    – Devin
    Jul 28, 2017 at 17:30
  • 1
    I like this option a lot.
    – Matthew Bradshaw
    Jul 29, 2017 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.

Improve this answer
2

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

"Office Sales Targets"

For the hard of thinking:

Sales Targets

Improve this answer
2
  • could you elaborate? Right now this is more of a comment than an answer.
    – Mayo
    Jul 28, 2017 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, 2017 at 20:49

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.