UK Met Office Site Redesign Thoughts

As a dinghy sailor and instructor, I completely rely on weather forecasts to help me plan activities on the water, and I usually look at forecasts at least a couple of times during the day, pulling data from at least two sources. I also look at synoptic charts depending on the conditions and planned activity.

I’ve found the UK Met Office forecasts to be good, but they’re pushing out a new site design which I fear will make it harder to read the data. The usability issues with the new site are kind of bugging me, and since they seem to be interested in user feedback, I thought I’d write some thoughts down. Who knows, maybe someone will read this and find it interesting or useful.

BTW, all credit to the Met Office for launching the new design with a site switcher to allow users to switch between old and new designs, as well as seeking user feedback via the pop-up mini survey.

Anyway, let’s have a look at the old and new designs.

There’s a lot to like about the new design and it feels like they have taken their design cues from the BBC weather website which is fine, but I’m just finding the page hard to use and the the data hard to read.

Old design

New design

Good Data Display Design

As a sailor and instructor, I’m usually most interested in wind data; speed, gust, direction and how the conditions will change over a few hours or days. Below are a couple of examples of what I consider good design and usability.

1. https://www.metoffice.gov.uk/ – old design.

The old Met Office design makes it very easy to read key data at a glance and see how the weather conditions will develop over the next hours or a couple of days. The data is at the top of the page in one easy-to-read table and minimal scrolling is needed.

2. Windfinder.com – Web version

I find the Met Office forecast, to be more accurate, but the Windfinder web design has my favourite data display. It’s super easy to read, and I’m able to understand the wind forecast and see how it will develop very easily. The tide data is a bonus.

Also Worth a Look

It’s worth having a look at another popular forecast site; Windguru. This one is less designed, more pure data. I think this one is harder to read than Windfinder (particularly the date hour column header cell), but wind data is very easy to read, and it’s easy to spot development patterns over a couple of days.

https://www.windguru.cz/

For me, the design elements that make for a good weather data display are:

  • Wind direction, speed and gust speed data are one top of each other for easy comparison.
  • Data is generally in one place without scrolling needed.
  • The wind and wind gust speeds are simple numbers with the unit defined at the beginning of the table row.
  • A units switcher is a must-have for a maritime forecast.
  • Visual color indicators for wind strengths and temperature.
  • Nice iconography for cloud cover.
  • Easy to read wind direction arrows.
  • No redundant text e.g. WNW vs West North West, or Knts vs Knots.

What’s Changed with the Met Office Site?

Let’s compare the old and new site designs.

Old Design – Desktop

Old Design – Mobile

New Design – Desktop

New Design – Mobile

My main issue with the new design is the data display, which I think got harder to read. I think this down to a couple of things.

Issue 1. The data is split across two tables.

Compare the old and new designs. In the old design, the data is in one table. In the new one, it’s across two tables which forces users to scroll and find the data. Compare the two, the data is enclosed in red boxes.

Old design

Data is in one place.

New Design

Data is now in two places, users now need to scroll and find the data.

Issue 2. The detailed forecast data is hard to read

That’s this bit.

It took me a little while to figure out in my mind what exactly makes it hard to read but I think the main issues are:

Redundant text for wind and gust speeds.

The user is forced to mentally parse the data to get to the number. Compare how hard at a glance it is to understand wind and gust speed on the new design:

compared to the old design:

or Windfinder:

Wind direction arrow design, and wind directions.

To be fair, the arrow looks pretty much the same as the old design, but nonetheless it’s bit hard at a glance to determine the wind direction. I think this is because the arrow is almost like an equilateral triangle, and the non-abbreviated wind directions add more text which needs mental parsing.

Compare old, which is clear and easy..

to the new design which needs higher mental effort to understand. The lowercase text is also hard to read compared to the capitalised abbreviation:

Wind and wind gust speed rows aren’t on top of each other.

I think this is a real miss in the new design. Wind and wind gust speed is key data, and it must be easy to compare both. The new design has a ‘Direction’ row in between them. Compare how hard it is to read wind and wind gust speed in the old design..

vs the old design

That Wind Speed row in particular is a real headache. The sticky hours row is useful though, that’s better on the new design.

I’ve put my comments together in one screenshot below:

Poor use of screen space

This bit doesn’t bother me that much, because I scroll right past it, but this section has extravagant use of screen space for the amount of useful data displayed. There is a lot of scrolling here on mobile devices.

Does any of this matter?

Probably not? I’m just one person, one view, and I could well be thinking about all this the wrong way.

Maybe most users are receiving the new design well, they’re unlikely to scroll down to the second data table anyway.

What I’d do

I think the new design has a lot of promise, and the simplest thing would probably just be to alter the lower detailed data table, and make it as easy to read as the old site’s data.

Perhaps also add an anchor tag to it so that users can bookmark that detailed data view.

I’m curious to see how the site develops. I’m curious to see what others think, leave a comment.

Tell the Met Office what you think

They have a survey: https://answer.questback.com/01a08b7b-fb9b-799d-b6fb-84f9a19dc898/information

Leave a comment