DesignFoo: Clarifying the Google Finance Market Chart
Tuesday, Oct 05, 2010
Just a bit of Tuesday low-hanging fruit: The market overview chart on the Google Finance home page has been bugging me for months so I figure I'd just fix it in my own head and share it. Here's the current chart: The current Google Finance chart The problem is that the first action is to look at the chartlines. All three are doing well today, but orange is ahead of red and red is ahead of blue. So what are the color assignments? The legend is at the top of the chart, but the detailed data is at the bottom, meaning the user has to play some visual hopscotch to link these visual tables up together, resulting in a visual trail like this: How your eye interacts with the current chart There's no need for the redundancy. One solution is to incorporate the legend into the detailed data area at the bottom. This has the nice side benefit of cleaning up the top. For some unknown reason the current date doesn't appear anywhere on the Google Finance home page. That sort of thing is usually important when displaying idempotent data, so I've included the current date to give the chart context if clipped and pasted somewhere else. That looks like this: Legend incorporated into dots next to lower details Another option is to use the link text itself to convey the color pairing. This messes with Google's visual standards a bit, but might be warranted here. Also, the orange is a bit too light for readability so I darkened it a little in the text but since it's hard for the eye to get a true luminance from a chartline the discrepancy is pretty unnoticeable: Legend incorporated into text color in lower details It's a tough call which is better, but the first solution (with the dots) is a bit cleaner and less aggressive. Let's go with that and call it a day.
If you like it, please share it.

Hi, I'm Kevin Fox.
I've been blogging at since 1998.
I can be reached at .

I also have a resume.


I'm co-founder in
a fantastic startup fulfilling the promise of the Internet of Things.

The Imp is a computer and wi-fi connection smaller and cheaper than a memory card.

Find out more.

We're also hiring.


I post most frequently on Twitter as @kfury and on Google Plus.


I've led design at Mozilla Labs, designed Gmail 1.0, Google Reader 2.0, FriendFeed, and a few special projects at Facebook.

©2012 Kevin Fox