4

I'm creating a dashboard with multiple states of information shown for each item. At this stage, I've got a "quick dashboard" and a "full dashboard".

I'm trying to maintain a site-wide style of quarter-screen, half-screen, and full-screen information panels. So in this case, clicking a button will open up the full screen of information from the half screen.

Since the page has many buttons, how can I best indicate that clicking the "Full dashboard" will not start an action or send them to a new page, but will reveal the rest of the dashboard?

My two ideas are "Hidden card" and "Overlapping button".

Thank you, and let me know if there's a better place to ask this question!

Hidden Card.

Overlapping Button

EDIT:

Alright, I've pared the options down from 2 to... 2?? Some more information on this:

  • We can have a ton of Engine Data. Each truck has anywhere from 12 to 40 separate data fields.
  • The map is pretty important for this view (you can follow the truck, find its next listed destination and compare its location to its path). The map won't be as important once you go one more level deep into the data -- then you're looking at truck information rather than location information. At that point, we can hide the map.

Option 1, Hidden Card. Same as before.

Option 2, Overlapping button. Edited the button based on @MikeM s suggestion, turning it into a small edge tab, making it more noticeable than the full edge (made it vertical to indicate that you stay on the page-- there are several horizontal buttons that leave the page). Small tab

Option 3. All the engine data (odometer) in one column. Thank you Ben and Madalina! One Column

  • what's the map panel for? is it part of the useful, first view info? – Mike M Aug 8 at 18:16
  • @MikeM It is indeed useful! This page is coming from a list of all trucks. When the user is on this view, they'll be centered on this truck. This page is a summary of the truck's info, with more info than the list, but not as in-depth as the full dashboard. They can also live-track the truck with the "follow" button. – Rachel Aug 8 at 19:18
  • Personally I think that the first solution is the best, because it is a typical solution. – Ada Aug 8 at 20:20
  • An Information Architecture workshop would resolve this. – DarrylGodden Aug 9 at 17:39
2

Be explicit about what insights the user will receive by showing more.

In your use case, it looks like you have a subset of 'most important' data.

Terms like Full dashboard are similar to click here links or buttons, where we (as designers) don't tell users where the link leads to in the label, or what info they'll get by going there.

Tell me what data is going to be revealed. Dashboards are all about insights.

enter image description here

You can also measure how important this data is, by how many users land on the dashboard and immediately seek out this data. That might reveal that this is important enough to make visible on page load, or make a top module that's persistently visible.

Update

In response to the concern of making sure users understand they're not going to a separate page, you could design a system of a persistent tab, with a descriptive label show what's going to be revealed. Here's a possible quick sketch:

@ra

I'm not sure about the final wording, or if it's necessary to say 'panel' if they are clear about the tab expanding, but you can refine several iterations and test it.

  • I see what you're saying! It will be especially important to track the actual user movement and redesign if they're immediately going to the full dashboard button. I am a bit concerned about the button still -- I'm trying to indicate that they won't leave the page, but that the page will change. I want to know if there's some sort of UI that indicates a page transformation, and not a page exit – Rachel Aug 8 at 19:12
  • @Rachel I'm thinking you could design a tab, indicating it's an expansion, not a new page. I've updated a quick sketch... – Mike M Aug 8 at 20:04
  • The tab makes more sense! I'm trying to figure out how to keep it from competing with a requested "Hide all" button -- perhaps the full-height "Hidden card" vertical edge can shrink to a smaller tab? I'll update the description to cover this. – Rachel Aug 9 at 15:49
  • @Rachel I would work up several versions, and sync with some users to see if it's clear to them. – Mike M Aug 9 at 16:16
2

As Mike M said, being explicit is generally preferred. If you have the room, and the action's subject matter and the result is able to be distilled into concise language, you should do so.

I'd add to his response with a couple of possible enhancements:

  • Instead of "Show", you could say "Reveal". This better implies that something is exposed within the existing screen, adding to the information. This may help clarify things if you're not able to pursue a tabbed solution (particularly since you likely cannot have that kind of tabbing for smaller screens/mobile)
  • You could also consider treating it more like an expand/collapse area between the main content up top and the extra data below the horizontal rule. In this way, whether with a down/up chevron or +/-, it'll be very clear that the content is being exposed within the existing view. This has the added benefit of working with a wider range of screen sizes and doesn't cover up useful data (the map) when revealing this additional information (instead just pushing down other content).
  • "Reveal" is a good word for it! Even a phrase like "pop the hood" would be very relevant for this type of app and audience -- would that be trying too hard to be clever? I didn't even think about putting the information under the horizontal rule... right now it holds a brief overview, which could open up into more information. I'll sketch out my thoughts on it – Rachel Aug 9 at 15:10
  • 1
    Hehe, "pop the hood" is a little too obscure, clever as it is. I'd avoid using that kind of language for an important button. However, if you have any kind of onboarding emails, slides, or coach marks, that'd be a great bit of verbiage to user in reference to that action. Would be a nice touch of personality to frame more utility-focused language. – Ben Paddock Aug 9 at 15:28

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.