BBC Weather App: designing for device orientation
Hi, I'm Mala Vadhia, a Senior User Experience Designer in BBC Future Media.
The BBC Weather app was launched back in June (user experience led by my colleague Stephen Robertson). Since then we've heard from many users about the need for landscape rotation across all Android devices and the desire for a tablet app on iOS (as product manager James Metcalfe last week).
We currently support 438 different screen resolutions on over 1000 Android devices. The key challenge here was to produce a design that scales, rather than bespoke solutions for both iPhone and iPad.
As well as scaling elements of the design we introduce features based on the screen size of the device. For example, for screen heights as small as 320 dips (density-independent pixels) we don't have the height to reveal the five day forecast information within the navigation tabs (or the hourly temperature curve). We reintroduce the five day forecast within the navigation for screen heights 360 dips and above, and the temperature curve for screen heights 380 dips and above. Similarly, for screens that are narrow in landscape orientation, such as devices 433 dips wide, we don’t show the column with environmental information, sunrise and sunset.
Android app on screen heights as small as 320 dips high and QVGA devices 433 dips wide
We aimed to keep a tight relationship between the elements that make up the five day forecast, the daily overview on the home screen and the temperature curve on the hourly forecast. The vertical space in between these areas increases as the app scales, allowing the designs to breathe.
Android vertical stretch points
By focusing on one design that scales we have been able to build on the existing Android app more quickly, while keeping a consistent user experience across all devices.
BBC Weather App on the Nexus 10, 7 and 5
The major difference in the iOS app is that we have exposed the hourly forecast data in both portrait and landscape orientation. The stats confirmed that this is the most commonly used feature by our users.
Most commonly used features on the iOS BBC Weather app
With extra horizontal space on larger iOS devices we had the room to expose the temperature curve which visualises how the weather will develop over a day. For example, if you are likely to get caught out by a rain shower or if the day will become warmer.
We made a couple of smaller enhancements too. The sunrise/sunset time is in a more prominent position following user feedback, and we’ve strengthened the relationship between the refresh icon and the location by bringing them closer together.
BBC Weather app in portrait on iPhone & iPad Mini and in landscape on iPad
Both apps remain optimised for their respective platforms and use bold typography to create strong hierarchies and highlight key information.
On Android, we're using the font Roboto - the bold weight is a little condensed compared with Helvetica bold so it works well for small screens and long location names.
With this update we've taken the opportunity to freshen up the look and feel of the app. We improved the ambient transitions for daytime and added two new ambiances for light rain and heavy rain showers. We also introduced nighttime ambiences for all weather types.
Day and night weather ambiences
We’re now using simple, semi-transparent white blocks on top of the ambiences which let the weather show through (for example behind the five day forecast). We stripped back the use of gradients, creating what we feel is a cleaner design.
I'm always keen to hear your feedback so please leave a comment below.
Mala Vadhia is a Senior User Experience Designer, BBC Future Media
BBC Weather App across various locations