Given the encouraging feedback and great suggestions I had after publishing my initial iPhone weather app concept it’s full steam ahead with version two. In this version I’ve added more information to the screen yet I’ve tried to reduce the overall visual noise. I’ve mocked up both a sunny and stormy forecast using data from BOM to get a better sense of how it would work with different forecasts.
Sunny day forecasted
Storms forecast
The specifics of what I’ve done and the rationale include:
- Added background photos that represent the overall forecast for the day. They are to instantly communicate what the day is likely to be like for users.
- Changed the sunrise and sunset text to icons (thanks Brett). Also removed the am and pm from the times, it’s pretty obvious which one is which! Both these changes help to reduce the overall visual noise.
- I increased the size of the current temperature considerably based on the feedback I received. This is the most important piece of information on the screen for users so make it really pop.
- I made the forecast maximum temperature bigger, this is because I consider it to be the second most important piece of information on the screen.
- I aligned the forecast min and max temperatures to the left of the screen with their lines extending full width across. I initially wanted to indicate where the likely peak temperature would be by just having a short line but I feel the projected line as well as the graph are indicators enough. Having them aligned on the left just feels much tidier.
- For Mr Green I added an umbrella icon which indicates whether you need to pack the wet weather gear or not.
- I faded out the beginning and end of the graph line as this feels more elegant. Ditto for the hour and noon lines. This again reduces the overall visual noise of the screen.
- I moved the title bar to the bottom of the screen – the information on it is once off information that once you know becomes insignificant.
- I added the long version of the forecast on the left-hand side of the screen – I feel this detail is important to have on the screen.
- Lastly I added the short version of the forecast below the city name in the title bar. Not necessary but it works there.
Love to hear your thoughts and ideas.
Comment by Robert Postill — February 13, 2010 @ 3:20 pm
Pip,
Loving the development of your gorgeous weather app mockup
Two questions… How is it going to deal with the internet (e.g. what happens when it can’t get a full set of data or makes a request for a dud location)? Two, what do the three dots on the bottom right represent?
If I was adding my two cents I’d love to see:
* A long range forecast. I hate just getting today if its 11PM.
* An offline mode (download the info once per 24 hours rather than every time I fire the app). So I’d want a visual cue that the data was cached.
* A night view is handy so I can program the heating/air-con. Maybe I could drag that onto the screen?
* A side-by-side comparison so I can gloat at Taswegians and the like
Keep it up and can’t wait to see the next iteration
Comment by Brett Collinson — February 15, 2010 @ 9:15 am
Great iteration James. Gorgeous. Like the way the min and max bound the description on the left. Like the footer rather than when it was a header.
Further ideas:
* only show the umbrella icon when I need to know – there’s less mental processing needed to just register that it is there compared with processing the little yes/no note next to it.
* I’d want a link to radar images for get more specific on rain
* there’s something about the sunrise/noon/sunset labels that seem too much – there’s too much nipple action happening – I think those labels can be dialled back (maybe they don’t need the background – they could be direct annotations on the graph) to make the min/current/max labels be the unquestioned stars of the show
Comment by Adam Schilling — February 15, 2010 @ 9:24 am
Hi James,
I like the idea that this may be the zoomed in ‘daily’ view of a wider ‘weekly’ forecast—all on the same line, complete with day/night shifts and upcoming weather visuals (as above). The line-thickness would hold, but the peaks and troughs would compress to make room for up to 7 days (or, however many days makes sense).
In other words, you could pinch to shrink the above daily view to see the weekly view. Then, you could double-tap on a particular day to zoom perfectly on it, or spread to enlarge on a particular day (or set of days) and maybe then (in day view) flick in either direction to move along the timeline.
Just an idea.
It looks sharp! Keep it up.
Cheers, Adam.
Comment by Ben Green — February 15, 2010 @ 9:51 pm
Hey James,
Awesome: looking so lovely. I’m so entranced by the backgrounds – I assume they’re live cams?
Agree with Brett on the brolly – if it’s there when it’s raining only then you can get rid of the text labels.
For the time trackers – what about keeping the noon vertical line, but losing the label. Then you could add a label to track the current time directly below the current temp. Maybe it’s just the proximity of the current temp to noon atm, but I sort of want to read noon as the current time, knowhatimean?
And is the navigation bar at the bottom permanent, or does it hide? I’d expect it to hide, and then I’m wondering if “Showers, possible storms” could be integrated with the description on the left hand side and the navigation bar would be a simple back button and label as per full screen photo view in Photos.
Those line tweaks you’ve done really make a difference. I can’t wait to see the next iteration.
Cheers, Ben
Comment by Gavin McFarland — December 9, 2010 @ 10:18 pm
Looking gorgeous! I feel the having the umbrella for both yes or no is less striking than if you just had it for one.
I would try one of the following:
Having an icon for different requirements, ie. umbrella, gloves, suncream or hat.
Or a dulled/translucent icon when it’s not needed and a solid icon when it is.
Or maybe an LED icon that’s light up when it is needed and off when it’s not needed.
It’s looking really nice now though, definitely prefer the navbar at the bottom.