3

I have the following area on a form:

enter image description here

I don't like the repeated words "Open" and "Date". To me repeated words just add clutter.

I would like to have a way to group these together in some way. Preferably a grouping label like "Open Date Range" and sub labels "Start" and "End".

Putting the labels above the form fields is not an option. Labels on the left is format/pattern we are using for forms of this type.

What are some ways I can avoid repeating the words "Open" and "Date"?

Improve this question

3 Answers 3

Reset to default
3

Can you adjust the spacing, and possibly font style (i.e. italic, for additional visual separation), to place the "Open Date Range" text along side the "Start" field, but not the "End" field?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
8
  • I like that...good suggestion.
    – richard
    Dec 5, 2015 at 0:31
  • That's going to be problematic on mobile.
    – plainclothes
    Dec 5, 2015 at 7:20
  • @plainclothes What mobile related issues do you forseee for this specific example? Could these issues be addressed by adjusting font size and/or adding line breaks?
    – Andy
    Dec 5, 2015 at 13:10
  • To fit a single column mobile screen, you'd need to fold the row on itself. Then you'd have the arrangement I posted, which Richard apparently didn't like.
    – plainclothes
    Dec 5, 2015 at 17:03
  • Depending on the content, two columns could fit well on a mobile screen (placing the label in the left column and the input field in the right column). @RichardDesLonde mentioned that placing the labels above the fields was not an option.
    – Andy
    Dec 5, 2015 at 20:25
5

Just add titles

Identify the logical heading for the related items and use it. Based off of the limited info you provided, "open dates" seems logical.

Inputs with a group heading

I'd also add some kind of calendar date picker, which would be access via the calendar icon in my example.

Improve this answer
6
  • I like that. But there are fields above and below these. How do we indicate that it is only for those two fields, and not the ones below them?
    – richard
    Dec 4, 2015 at 23:20
  • Well, you can't start creating headings for some fields and not others. If you go down the grouping path, I'd recommend doing it throughout that form.
    – plainclothes
    Dec 4, 2015 at 23:43
  • If you must do it in only one place, you could bound that group within a color field or rectangle (and drop the rule below) to wall it off from the others.
    – plainclothes
    Dec 4, 2015 at 23:44
  • Just add seperating lines (without titel) between the other fields?
    – Rolf ツ
    Dec 5, 2015 at 17:44
  • 1
    I mean: give the dates a separator line and title. But keep the consistency and make clear that the other fields do not belong to the date range by adding additional separation lines.
    – Rolf ツ
    Dec 5, 2015 at 18:10
1

Why not use <fieldset> and <legend>?

These can be used with any form element - doesn't have to be radio buttons or checkboxes.

http://www.w3schools.com/tags/tag_fieldset.asp

By default, browsers draw a box around a fieldset and put the legend in the box-border.

It is more semantic and accessible as well.

http://webaim.org/techniques/forms/controls

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.