So I am heading to Seattle this coming weekend and I wanted to check the weather.  Now, I may be old-school, but my first resource for this sort of thing is the Weather Channel website.  For me, it is one of those things that just works, and even though there are no less than 7,000,000 options to get weather these days, this just works well enough for me.

Anyhow, there is something about the weather channel 10-day forecast page that has always bugged me.  That is, there is one data element that is out of alignment with the rest of the page.  For the most part, the page is aligned in 60px-wide columns or so for each day.  The problem comes in at the bottom with the precipitation graph.  The problem is that it is not in alignment with the other elements for that day.  Visually, this is confusing.  That is, we are trained to group columnar data together.  But, when we break the boundaries of the column, it is confusing.  Anyhow, here is what I mean (the precip graph is in green):

 Now, I see why they did it this way.  The precip graph has a legend on the left side of the graph to establish scale.  However, I would argue, do we really need a scale to make sense of this graph?  To me, something like chance of rain is relative, either there is no chance, a little chance, a medium chance, or a large chance.  And, to show this visually, I just don’t think we need to be able to have the granularity of seeing the exact value of the percentage of precipitation (especially since it is listed, in numerical form, right above the graph).

When I read a graph like this, I end up a day off.  To my eyes, Monday’s graph is (mostly) in-line with Tuesday’s column, which at first glance can cause me to read it wrong.  Now, one could argue that even a modicum of thought could overcome this and figure out which graph is which.  This is true, however, it does not mean that it is acceptable.  In the world of web usability, simple errors like this (that cause the user to think) draws the user out of the experience.  For something as simple as a weather forecast (especially one you get for free) this may not be that big of a deal.  However, I would argue that it is a simple problem (with a simple solution) that was created simply due to a lack of attention to detail and flow.

Now, if it were me, I would fix this problem pretty easily.  First, I would drop the legend from the graph (since it seems superfluous).  Second, I would simply make the visual representation (the graph) and extension of the numerical value (and merge them into one box).  I built a super-quick mockup to show how I would go about fixing this:

To me, this fixes the whole issue and makes the page much easier to read (even better, it is much easier to skim).  Often, simple fixes like this are just what a page needs.  That is, at the heart of user experience (and usability) is getting to the root of how can you most simply and succinctly convey the message you want to.  There is an elegance to simplicity, and often when we are designing something we make things much more complex than they need to be.  As a user, I just want to know if it is going to rain and a solution like this satisfies that desire quickly and elegantly.