1

I'm working on an update to an app with a dashboard. The dashboard has three "inputs", if you will:

  • a location (defaults to the root location for the app) from a predefined set;
  • a specific year of reporting
  • a specific month

Currently, the navigation uses dropdowns for the location and month, and a horizontal menu for the year, and that's become unwieldy since reporting has gone on for a bit see screenshot.

I'd like to change the interface so it's uncluttered, easy to navigate, and (possibly) allow date range inputs and selection of facets, but I'm concerned that form-based input would be harder to use than single clicks, particularly since the app has been used for several years that way.

Is there a simple way to present the navigation without necessarily overwhelming the user?

Just as an FYI: Cumulative/Monthly are supposed to be toggles, with Monthly as the default.

0

I'm a little confused if this is for top level navigation, as opposed to a filter bar that scopes data in a dashboard. If space is a concern, you might be able to consolidate into one row.

Since dashboards work best by having high value data available at a glance, space is often a concern. This may be an opportunity to get more vertical space, while bring more clarity and functionality to the filtering elements.

I don't know too much else about your context, but here's a quick take of the controls:

Location selection

I'm not sure of your constraints, but you could make this a input dropdown (or even an open search, where users can tab into the field and start typing their location right away, or select from the dropdown. Allow search and recent (or favorite) locations to save users effort.

enter image description here

Date selection

You mentioned adding potential date ranges. Perhaps you can give users some canned ranges, and allow a 'custom' with a range picker.

Segmented controls for format selection

Since the choices might not be clear to users who don't come to the product every day, surfacing a small amount of choices with a segmented control allows users to see all choices at once. These choices don't seem obvious, unlike a date (which we're used to seeing and understanding in several formats).

See 'Obvious always wins' by Lukew. You'll find some thoughts against dropdowns, but it's almost always about tradeoffs in UX, which is why location is a dropdown.

Scaling for the future: additional filters, and date ranges

enter image description here

I'm not sure of your viewport constraints, but consolidating to one row seems possible, at least on standard desktop. The +filter at the end allows for further scoping.

What do you expect the users to gain? Test with them.

While all of us are somewhat averse to change, understand why you're doing a redesign: In your case, you have a feeling it's 'cluttered', but you also want to introduce more functionality.

You can structure some tasks for your users, especially filtering and date selection. This will help you find out if you're on the right path, and may uncover some concerns you've never heard about previously.

  • thanks for the feedback - it really is very useful. i guess i have unconsciously been trying to avoid a form because of the "fill the values, then click this button to activate"-type workflow, but maybe that's a more useful workflow than "click to activate" for multiple inputs as above. – darkphoenix Mar 6 at 20:17
  • If it's a filter, you have a default state, and if you save locations, plus custom date ranges, it's fairly quick to change... – Mike M Mar 6 at 20:52

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.