Today, we will take a detour to world-wide web and learn how we can improve our dashboards, reports, presentations or workbooks by using one of the ideas, called as Golden Triangle.
Golden what?!?
Website designers all over the world are always asking,
- What areas of my webpage get most attention?
- Should I get another cup of coffee?!?
During one such coffee breaks, they had a break!. Eye-tracking.
Eye-tracking is used to learn where our eyes focus when we look at a website. Imagine your eyes as spray paint cans. Now, when you look at something, your eyes would spray paint, at the point of focus. So, when you look at a webpage, at the end of first few seconds, your eyes would have painted something like this, (source: Google)
You see the triangle? that is what web-designers call as Golden Triangle – the place where your users attention will be.
How do we apply golden triangle to our Reports, Dashboards or Workbook Models?
Simple! Just place the important content, metrics, messages or charts at the top-left corner. A few more important stuff can be placed at top-right too.
Based on my extensive eye-tracking studies conducted on my own eyes, I present you the first-ever Excel eye-tracking results.
What is the best place to show important info on reports and dashboards?
In my opinion, top-left corner & top rows are good place to show summaries & important info. Whenever I followed this rules, my clients loved the output.
What about you? What is the best place for key information according to you? Do you agree with the golden triangle idea? Share your ideas & insights thru comments.
Resources on Dashboard / Charting Best Practices:
If you make a lot of reports, charts or presentations, then go thru these additional material to learn more.
- Articles on Visualization Principles
- Selecting right chart for your data & needs
- 5 Rules for making better charts
PS: Further eye-tracking studies have revealed that you will never click here if you do not want to learn more about making awesome charts.
20 Responses to “Place Key Information in Golden Triangle on your Reports, Dashboards etc. [Quick Tips]”
i dont quite agree.. depending on the contens the eyes will focus on that.. in the dashboard your using as an example my eyes get automatically drawn to the wordcloud as this is the visual most compeling part of the dashboard. first then the golden triangles get into effect..
next thing is that you makle dashboards for not only one time use but a periodically reporting .. this means that your user over time get used to the layout and they themselves wil focus automatically on the parts of teh dashboard they find most informative for them.
I think the reason the golden triangle exists is because web pages are viewed as continuous documents. In printed documents or one-page interactions, it's a bit different. Our eyes definitely start in the same place: top left corner (unless you are more used to reading languages that read from right to left, in which case your eyes start at the top right.)
Then the eyes even follow the same path, where they will linger more near the top, but gradually work their way down to the bottom left.
In single page documents, the eyes take one final step. They then travel laterally to the bottom right corner. This is a key location to tie up any content. Leaving this blank will make the document seem incomplete, or meant to be continuous. That is not something dashboards should aim for. 🙂
I don't have much time to pull up any references, but I'm sure they're out there.
@Chandoo: good call on this though! I've used precious too few techniques from my graphic design days in report creation. This one slipped my attention for far too long!
Have to agree with Cameron on this one, Chandoo. Consider this photograph I found randomly on the Web - http://www.schuitema.co.za/blog/wp-content/uploads/2010/02/focus-attention2.jpg. I don't know about you, but my eye spends very little time in the upper left of the image.
Even though I don't agree with the upper-left idea, I agree with Cameron again that you have done a great thing by showing that we spend too little time on the graphic design of Excel dashboards. The graphic design world has a lot to teach us about color, layout, positive/negative space, etc. Every Excel dashboard and Excel report designer should spend some time learning about graphic design and applying its principles to our field.
Hi Chandoo - I agree with everyone that this is an important and helpful topic. The only thing I would add is that there may be a bit of a chicken-and-egg situation here.
People may have developed the golden triangle habit precisely because that's where content creators put the most important information or because that's where the most important browser controls are. Therefore, you may simply be advocating a model that evolved naturally out of what made the most sense.
That being said, I do believe in paving the cow paths, or whatever that saying is, and if that's where people are looking, then it's probably best to take advantage of that fact.
Keep up the great work!
I let end users be the architect / designers. From my experience, people are overly opinionated if the layout / design isn't what they expected to be. And it just waste my precious time doing the re-work of the reports/analysis tools, pushing back deadline and I am blamed for missing the original deadline. I just built the functionality behind the worksheets.
@ Kyle: nice pix 😀
As an user, let pose this topic like this: You have 4 indicators, where should you put the most important one? Assuming the language is English (L to R). I guess Golden Triangle makes a sense there.
Chandoo,
I quite agree with you.
> F-Shaped Pattern For Reading Web
Content http://www.useit.com/alertbox/reading_pattern.html
Hi,
I agreed with ThomasL. A dashboard is to be used as a periodically basis. Of course that we need to take some time to build/design our dashboard layout in a “correct” way where should be simple to read. There are several technics used by designers and we (reports developers) should have some tips how to do it… There are a few good books for that. Another thing that we should take in consideration is the content/data. Not all data can be displayed as the same way.
Thanks for this topic.
BR
Hi Chandoo
An interesting concept - this should be explored further.
Golden Triangle applies to webpages and PowerPoint presentations because the need to deliver information quickly and consisely. I don't think it's a hard rule for dashboards or charts. The audience and the amount of data being reported or analyzed may push the info beyond the borders of the Golden Triangle.
Interesting comments everyone. My thoughts on this so far,
> Placing important information in top or bottom is really effective. I have done this many times and impressed my bosses and clients.
> The triangle is just a metaphor. It could be an F pattern for someone, a triangle for others and a box for someone else.
> Following a consistent layout and arrangement of info on your dashboard is very good way to minimize the time taken to read it. That said, often you should experiment by moving stuff. This creates surprise and you can exploit it.
That said, blindly following golden triangle is not recommended either. It is just a principle to help you decide where to place the most important metrics, charts.
As a further note, I am thinking of doing a survey to learn where users focus when presented with different dashboard / reports. Let me figure out the most effective way to do this and get back to you.
@Chandoo: I believe there are some mouse-tracking and click-tracking services out there for web designers. No reason the same principles wouldn't transfer.
Maybe you could find a test model that requires the user to interact with all the elements on the page with their mouse; this will get them to hover their mouse over the areas that they are focusing on.
Just an idea.
This is sort of like the proverbial Chicken and Egg question?
In Top Down, Left to Right languages you would expect most of the Words and hence Keystrokes/Eye Movements to be in the Upper Left corner of the screen, as that is where all our language start, new Pages, Sentences etc all start at the Upper Left.
We are trained to look for the start of a page at the Top Upper Left
So it won't be surprising that any studies of Eye, Keyboard or Mouse movements reflect that and in fact you'd be disappointing if they didn't.
Now that doesn't mean that as a designer you have to follow those rules, but as a designer trying to tell a story you have a responsibility to lead your readers on a story.
This can be done through a number of techniques, including color, emphasis, size/layout of items on your page/screen and the choice is entirely yours.
You can tell your story how ever you want but using clear and concise links to lead your readers through your story from start to finish is how good story tellers write.
Doesn't matter if it's a Novel or an Excel spreadsheet.
Start at the Upper Left and where you go is up to you.
I'm not on expert on this, so here's my unqualified view:
>you focus your eyes where the information is and drift over the empty spaces. MOST cultures work on the left to right, top to bottom written word, so if you want to make an impact , then put it in the sweet zone (bottom right they may have lost interest). This changes based on your languauge/culture changes!
>The picture, by John Kyle, is a great proof -> who spent long looking in the "blank" / "blue" zone?
> The biggest thing I took from Sayyad's link on the F pattern is that you can make "Islands", where people then concentrate on key points... so, whereever on the page you want people to focus their attention, then surround that info in "white space".
having written my views I now see how busy my dashboards appear and how i can improve them. Don't fill the empty space, it's as valuable as anything you want to shoe-horn into it.
@Stephen
Interesting comments, except that Google makes it too easy to stick ads in the blank spots, and make money out of them, and so there isn't any blank spots left to guide people
@Hui
my comments refer to dashboards... I don't care what Google want to do with their white spots as I'm not publishing them for free on the web... but I'm willing to learn from others experience and not be blinded by anti-advertising theology (lets face it Chandoo feeds his family on the revenue from his advertising slots!)
Wow, this is a great article, Chandoo!
You all might find this website devoted to "The Art of the Spreadsheet" interesting:
http://john.raffensperger.org/ArtOfTheSpreadsheet/index.html
IDK chandoo... in your dashboard above... my eyes first caught site at the word cloud, maybe because it is fancier than the rest and my first attention went there....
Seems that irregular shapes takes my attention first instead of plain words in your yellow triangle
i think it is a cultural thing as well. westerners read top-left to bottom-right so it seems natural a westerner would initally focus on the top left corner of a page.
i am a believer in some of Tufte's principles as applied to quantitative visuals.
The way you provide info is really helpful to us but can you pls elaborate it more .