Bluefaqs

The Cluttered World Of Weather Websites

Posted on 03. Feb, 2010 by Shawn Ramsey in Design

Over the years I have developed a love and respect for the weather. It all stemmed from my job working for a landscaping company many years back. The weather was the #1 factor in determining how our day would play out. If it was raining outside, you could pretty much guarantee that you wouldn’t be working that day. So, needless to say, since the weather directly affected my paycheck, I kept up with it through a variety of different sources.

With my love for web design and the often overlooked aspect of user-experience, I have been disappointed for sometime in The Overwhelmingly Cluttered World Of Weather Websites. Some of the most popular and trusted weather related websites have neglected to release a web design that is both aesthetically pleasing and easy to navigate.

Let’s Have A Look

Let’s begin by making a simple search in Google for the term “weather”. The first three websites mentioned are, as expected, The Weather Channel, NOAA’s National Weather Service and AccuWeather. You’ve probably at least heard of these sites and more than likely have visited one in the recent past.

Upon entering any of the three, we are immediately bombarded with an extraordianary amount of options in the form of links. To get a baseline, let’s take a look at the above the fold screenshots of these three weather giants.

The Weather Channel

Really? Do I need 107 different ways to analyze the weather? In my opinion this is way over the top and a little overwhelming. A less patient man would’ve backed out of here already. I’m given options for vacation home rentals, pets, green vehicles, scenic drives and I’ve never seen such a cluttered search bar.

One thing that really stands out to me is that little advertisement in the bottom right-hand corner that says “Brookeland: Mom Discovers $3 Whitening Trick,” this is pulling my nearest location and targeting that ad. This ad knows where I’m from, yet TWC does not offer me one smart option that is aware of my location. I love The Weather Channel, but you have to be smarter than your own ads. Let’s move on to another.

AccuWeather

Oh wow! I just thought I was working with a lot of options with TWC, look at this. AccuWeather takes the cake as far as cramming in as much info as possible into the smallest amount of space. It’s almost as if a tornado came through and randomly scattered links across my browser.

There is so much information that it takes three search bars within 400 px of each other to comb through it all. I’m thinking let’s drop the three column layout, specifically the left sidebar, move the radar map up, work on some typography and cut the options down to half a third.

Let’s move on to the notoriously ill designed websites of the government and see if they can do any better.

National Weather Service

Hmm, less options than the others but the homepage could still use a little work. Could we possibly cram that first paragraph in a little more?

Being a government site, there is no need for advertising, so immediately we loose a lot of clutter in that department. I would’ve liked to of seen a radar map as my first option, but Warnings & Forecast isn’t a bad alternative. The color coded map key has more colors than a rainbow and would be much more effective if it was slightly less detailed. I mean honestly what’s the difference between a wind advisory and a brisk wind advisory? But wait there is still hope…

How About Their Mobile Counterparts?

What happens if we give them less room to work? With more and more people using smart phones for browsing, many websites have adapted by including a mobile version of their site. With the exception of the NWS, the other two sites have stepped up to the plate in this regard. Let’s take a look and see if they can give us more relevant information with less real estate.

The Weather Channel

AccuWeather

It appears that we are now in a much better position to get the info we want. The Weather Channel now knows where I am from and capitalizes on that by giving me the local forecast front and center. I’m still given quite a few options, but in a much more user-friendly atmosphere. In comparison to their website, I’m more happy with their mobile version.

In respect to AccuWeather, I’m not exactly jumping up and down over the design of the site. However, my first real option is a search bar and that will help me to move on to what I’m really after, local weather. The text links are pretty close together and not exactly accessible for finger navigation.

Wait a second, they still have one more chance to de-clutter themselves and provide a decent user-experience. Let’s now take a look at their iPhone applications.

Will Their Apps Save Them?

Luckily, all three companies do have an iPhone application and we can be more fair in the comparison of this particular aspect. I already owned the TWC app, I downloaded the AW app for free and dished out a healthy $1.99 for the NWS app (ouch). Now that we have all three, let’s take a look.

Can it be so? All of the relevant local weather right in my face? In exception to the NWS app, who made me jump through a couple of hoops to get to my local weather, the other two get a gold star for providing me with a nice interface to work with. They were even able to squeeze in some unobtrusive advertising. Let’s give them a small round of applause.

If you rely on any of these sites for your local weather, and want a pleasant user-experience, no doubt their apps are the way to go. They provide local weather, extended weather and radar all bundled into an easy to use interface.

Does Anyone De-clutter The Weather?

So this begs the question: Is there a website that actually makes finding local weather a breeze while also serving up a great user experience? The answer is: Kind of but not really.

The fact is the big guys control the weather, well at least the way we receive weather variables such as temp, atmospheric pressure, wind speed, radar, yada yada. They own the tools needed to provide the numbers that actually determine the forecast. What this means is that the little guys have to rely on data from the big guys in order to provide their version of how to serve up the forecast. We see this all of the time in web design by making use of the API.

As far as a website strictly focused on grabbing this info and placing into a well-designed atmosphere, I couldn’t find anything that hit it out of the park. However, I did find a couple in my research that are somewhat on the right track.

Weather Made Simple

This is kind of what I envisioned, one option and one option only, “Get Weather”. After entering my search I was somewhat pleased with the results, a list of my current weather, my 3-day weather and some map options. Definitely on the right track, but the radar maps were less than desirable and the layout could use some work.

Sleeves

Sticking to the less is more philosphy, I thought that Sleeves was going to be the answer. Immediately I can tell that someone actually put some time into the design and thought-process of this site. The little sun and cloud icons are spaced appropriately, the logo is nice and again only one simple weather-related option. I was eager to see the rest of the design.

I typed in a local zip, pressed go and was expecting pure awesomeness. However, I was let down as you can see in the following screen below.

Calculated Sleevage, Long? I’m left with a simple graphic informing me to wear long sleeves. Absolutely no useful weather data.

In Closing

I’m hoping that I am over-looking some magical website that couples accurate weather and a great design into one place. Please either offer up a link in the comment section or build this fantasy site for the rest of us. For now, I will rely on apps, add-ons and the trusty early morning televised news to deliver my local weather to me in an un-cluttered environment.

YOU MAY ALSO ENJOY:

• Photoshop Shortcuts - The Fun Way
• 10 Fresh Redesigns from the Design World
• Creative Use Of Thumbnails In Web Design
• 10 Details Not To Neglect On Your Blog
• Characteristics Of A Professional Web Design

Tags: Articles