Monday, December 7, 2009

Everywhere you go, always take the weather with you

Desktop widgets have reached hundreds of millions of users in recent years - OS X Dashboard, Windows Gadgets, Yahoo Widgets and tons of web widgets have all helped the uptake of lightweight, single purpose applications that run in a limited screen estate.

The mobile space has - as many times before - been inspired by the desktop and a number of widget standards are out there; JIL, W3C, Android to name a few.

From a design point of view, widgets are often fun to create. They should do one thing very well, compared to full blown apps that have tons of edge cases that take months to design and specify. Designing a widget is a perfect mobile interaction design 101 task, a bit like when architecture students design a chair during their first semester.
So how come there are so many badly designed widgets out there?

Consider the OS X Dashboard weather widget. It looks great and tells you the weather right now, but most people are able to look out the window to see if it's sunny. Sure, knowing the outside temperature in the morning helps you decide what to wear, but should it cover a majority of the widget area?
Wouldn't it be wiser to spend more on the upcoming weather and less on the current weather? You can expand the OS X widget to show the upcoming weather as well, but it’s still using half the widget area to show the current conditions. And that’s still using numbers instead of graphics ot show the temperatures.
Doesn’t Apple know that an analogue (bars) representation rather than a digital one (digits) makes it easier to compare temperature between days?

In a mobile context, spending a lot of screen estate on the current weather is even worse because
a) Screens are small and every pixel counts
You’re more likely to be outside and thus don’t need a widget to tell you it’s too cold

We really love what HTC has done with Hero and their awesome Sense UI. The visual design is flawless and they have really taken Android beyond vanilla. But still, we never use the weather widgets. The small one doesn’t show any forecast, and the big one steals too much space.


We are currently in the midst of designing a suite of Android widgets and have put some thought into the ultimate weather widget, that according to us should:

  • Emphasize upcoming weather rather than current
  • Offer short term forecasts at a glance (should I bring an umbrella today?)
  • Offer long term forecasts with minimum effort (what's the best day this week to go mountainbiking?)
  • Stay compact unless specifically interacted with
  • Be beautiful and give an aha/wow/smile

Here’s what we came up with:

A compact mode that shows the current and upcoming weather with the same priority. Temperature is color coded to give information at a glance:

An extended mode that shows the weather with a bar representation so that you can easily see how it’s going to vary the following days:

How do you get between these modes?
The widget is 3D so you can swipe to rotate between the modes.For some extra love we’ve added physics, making it even more playful:

Another thing we’re experimenting with is more exotic input methods. Here you blow into the microphone to switch from temperature to wind information:

7 comments:

Unknown said...

Hi,

Impressive! Are those videos real demos or mock ups? I didn't think that type of physics was possible in an Android app widget.

Thanks,

J

Simon Lessing said...

Jason,

what you see is real, running on Android.

As for how that is actually put together behind the scenes, you'll have to wait and see. ;)

Valentin Alexeev said...

Nice capabilities. This minimal to detailed transition with dragging looks really good.

As of particular example — imagined myself calling that wind display. No way.

ahmed.bougacha@gmail.com said...

Great work. These are the small details that make the overall user experience better; by the way, keep on innovating with "exotic inputs"!

Are there plans to integrate this in some UI? ..Nexus, maybe? :-P

Helge Tennø said...

Wonderful concept. Like the playfulness of the 3D and the imagination behind the blowing.

To bad the video player you are using makes it too difficult to spread. :(

Helge

Anonymous said...

GSM: Global System for Mobile Communication- then band width of GSM mobile system is 900 M Hg

Jay Parmar said...

Mobile phones are not just communications devices sparking new modalities of interaction between people; they are also particularly useful computers that fit in your pocket, are always with you, and are nearly always on. There is a definite appeal in gaming for learning using mobile phones. Currently, several companies are experimenting with game-based learning technology for mobiles. Learning something from a small cell phone screen is different than reading a book or browsing through an online learning application. And although most people would prefer the traditional way of learning when the conditions are appropriate, mobile learning has the great advantage of accompanying you everywhere. Visit sell mobile phone for more information.