4

enter image description here

I've seen many dashboards or statistics pages/screens to have some kind of "dashboard header" in which larger text or graphics are present. They are designed to give an overview of important information. Sometimes it's purely text with some colouring, sometimes its in the "card" style. I've attached some of these examples.

What is the name for this type of element?

5 Answers 5

9

EDIT: For completeness and with Andrews comment

I don't think there is "one name" for that section of the Dashboard apart from "Overview"

I you are asking about the content of that element these are all various "Metrics". The Metrics of what - that depends on the content of your Dashboard.

So if you are providing on overview of some data you are already displaying somewhere else on your Dashboard (graphs, tables..) these can be referred to as "Overview Metrics" (these can be totals, average, max, counters...)

Often in 3rd party products these are implemented as user configurable widgets.

As Andrew answered these could be called KPI's but I'd add only if they are KPIs defined by a customer: I could define various widgets that are not displayed in this way (top strip with numerical / metric overview) and are still a Key Performance indicators, also what if I have only one of these metrics be an actual KPI. KPI is is just a role of presented metric, which might be differently communicated on the design so it stands out from other Metrics.

1
  • OK thanks. I was hoping to find a name for it (if one exists) because I've been looking for some CSS that will allow me to do it without manually writing it. It's been hard to google for any of this because most of the words are generic.
    – user9993
    Commented Jun 2, 2018 at 11:11
2

When I implement a dashboard that has a similar section and I should add a class to name it, I always add something that contains "statistics row" or "overview items". If you check some examples of popular themes, you will see in the title "Quick stats" or "Stats".

2

That looks like a strip of KPIs or Key Performance Indicators - Headline numbers that give an over view of how the system/product is functioning.

They aren't necessarily always in a strip at the top of the page but is makes sense to have them as something that your eye is drawn to first. It gives the use a sense of where things are and which direction they may be headed in. The rest of the dashboard is for finding out why and what do to about it.

1
  • I think this is the correct abstraction - KPIs. At a wireframe level, I’d just scrawl placeholder “KPIs - TBD” in that space. And as you suggest KPIs are quite often prioritized in the info hierarchy front and center like this.
    – Luke Smith
    Commented Jun 4, 2018 at 23:15
0

When you have a collection of controls displayed in a row it's called a "ribbon".

The phrase was coined by Microsoft who started the "ribbon toolbar" trend in UX design.

enter image description here

We've seen this "ribbon" design evolve over time to represent controls that are shown near the top in a horizontal row. It's become so popular that almost all admin designs have a ribbon of something now.

This is just an adaptation of the toolbar to represent information instead of actions.

1
  • 3
    There are no actions, so like Vincent says, it's not a ribbon.
    – user9993
    Commented Jun 2, 2018 at 19:55
0

That's not a ribbon/toolbar, simply because the user can really not directly interact with that header. She can not click on any button to do an action or whatever.

I guess we can call that a cockpit, news feed or an overview as suggested before. That are macro insights about a business, metrics to get a fast overview of it.

1
  • I don't think you can't call something a feed unless unless it is an 'endless' stream of incoming events (examples of feeds: instagram posts, facebook posts) Cockpit = dashboard right?
    – Milan
    Commented Jun 15, 2018 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.