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"?

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

  • I like that...good suggestion. – richard Dec 5 '15 at 0:31
  • That's going to be problematic on mobile. – plainclothes Dec 5 '15 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 '15 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 '15 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 '15 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.

  • 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 '15 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 '15 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 '15 at 23:44
  • Just add seperating lines (without titel) between the other fields? – Rolf ツ Dec 5 '15 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 '15 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

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.