1

I am required to add a date range selector to a report page and I've tried doing this below.

My team finds this cluttered and taking too much away from the Search feature. I also suggested we could maybe try a slider that you pull down or from the side of the page that allows for additional user controls. Or a button/link that leads to a modal dialogue.

I'm wondering what's the best practice to introduce a user to controls bit by bit, if I weren't the clutter the form upfront. Any advice /suggestions would be super helpful

On Mobile

On Laptop

  • 1
    I don't think the issue is really around where the fields are, it's more of a design one. They don't look like they belong with the search or with the results. it's just some fields dropped on with no context. There's no header to the form fields so the user doesn't know what they're searching for. I'd make the filter panel (which this search option kind of is) more of a feature on the page - styled and given headings. Not just dropped on the page seemingly at random. – JonW Jun 3 '15 at 9:21
  • What do you mean by making it a feature? How would you do it? I am working with a very rigid style guide unfortunately. – Megha Jun 3 '15 at 12:06
  • Do some competitive analysis - look at other apps / sites that do filtering and see how they present their filter options. Like Etsy or something like that. Be inspired by (aka 'steal from') other designs - that's what web design is all about! – JonW Jun 3 '15 at 12:09
  • I still don't get what you mean by "feature" and how the search is not a "feature" right now. – Megha Jun 3 '15 at 12:25
  • Okay, maybe you mean put it on top along with login, etc like a search feature. But the search is specific to this page and not to the entire website. So it is required to be in a second level menu which is what that grey bar is. – Megha Jun 3 '15 at 12:29
1

The best practice to adding controls bit by bit is to first decide if you need them. Really understand how a user might use the extra information on the form.

If the inputs are not vital for the main action or result, then you can reveal them after the initial selection and (in this instance) use them as a filter for data that has already loaded.

As always with UX, it's about context. For this example: do you need the information for the first part? If not, it's perfectly reasonable to fade it in. People expect that level of interaction: select, new information, re-enter.

Extra analysis about your example below:

It’s not so much “cluttered” as confusing, I would say.

Here are the issues I’m having with the page:

The “reset” button has the same design/placement as a “submit” button. That’s confusing. See your “Get Summary” button? You’re teaching users that submit and reset are the same action by matching those styles.

Also, do you need to “reset” the option? Surely they could just chose another option from the dropdown? Except in specific cases, most people don’t tend to chose to “reset” a three-input form (in fact, most people don't use it at all). Here's a great Stack Exchange answer about it.

Anyway, my method for desktop would be:

  • Dropdown to choose school in grey area
  • Underneath that — to indicate it’s the second choice - and also still in the grey section - are the date selectors

Above we’ve cognitively linked the two “selection” options. Then:

  • click the “Get summary” button to action and load the data in the whitespace below

Now we’ve outlined the white area as the “content loading” space.

By keeping the grey header with the selectors in, people can also easily change variables and see the outcomes.

For mobile,

  • Dropdown to choose school in grey area
  • Grey area expands to reveal date selection options
  • click the “Get summary” button to action and load the data in the whitespace below

IF date range is optional and simply adds a filter, then keep it out of the grey area, and change “get summary” to “apply date filter”, put the options on a paler grey area, and a “Clear” filter option.

Finally, if your date ranges are simply academic years rather than full dates, then replace the date boxes with a slider with two points, which can choose the range.

P.S. I think the blue button style looks nice!

  • 2
    While lots of this is probably useful to OP, it reads more like a general review of the UI rather than an explicit answer to the main point being asked. – JonW Jun 3 '15 at 10:14
  • You're right, I will restructure it as answer then added analysis for OP. – Jacktionman Jun 3 '15 at 11:20
  • 1
    Thanks. So, you are basically saying I keep all user inputs in a grey area. And I like "Apply Date Range/Filter", will use that. – Megha Jun 3 '15 at 12:10
  • Yup! Grouping your sections together will help the user more than dynamically revealing the useful information - although that could help too. – Jacktionman Jun 3 '15 at 15:17

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.