Haze App Lets You See Weather Info, Not Just Read It

By blending animations into the app design, Haze can tell you more with less.

I know what you’re thinking: Seriously? Another weather app? The designers behind Haze at least have a geographic excuse: "it’s no secret that we’ve always been a little infatuated with weather apps, being from the cold Scandinavia," says Willi Wu, lead developer at Robocat. "It’s this combination of readily available data, the tangibility of the concept, and the intimate relationship we all share with the weather that keeps us coming back to this type of app."

Robocat (who partnered with another app shop called Taptanium on Haze) has made two weather apps before Haze and is already at work on another, but they’re trying something new this time: encoding dynamic weather information into the look and feel of the app itself, rather than spelling it out in text and icons. Haze’s gradient background visuals ripple in a simple, gentle animation that tells you where tomorrow’s weather is trending: an upward-flowing "current" means that tomorrow will be warmer, a downward-flowing one means tomorrow will be cooler. (The animations also display similar trends for tomorrow’s chance of rain.) "Don’t read it. See it," the designers say.

To be fair, Haze still gets the bulk of its information across using words, numbers, and tappable icons. Wu and his team had originally planned to make Haze’s information architecture and interaction design totally "glanceable"—based solely on aesthetic representations of weather data, like the background animations—but pulled back from that plan after doing user research.

"At one point in development, Haze didn’t even have values or icons, but relied solely on relative placement, color, and animation," Wu tells Co.Design. "However, we found that while most testers enjoyed the novelty, they liked the option of sometimes bothering with the actual numbers. We wanted to stay true to the idea of being able to glance [at] the current weather situation by looking at the colors and the direction of the animation, but we also wanted more power under the hood, allowing the user to fold out the forecast and tap into the more detailed aspects of the current weather."

Haze’s approach of baking informational utility directly into the visual design and behavior of the app emerged from Robocat and Taptanium’s development process, which (like more and more app shops) relies heavily on functional prototyping from the start, rather than a more traditional "UX wireframes first, UI visuals last" process.

"While we did start off with some general ideas on paper, most of the details and fluidity of Haze have been extracted through working prototypes, testing and timing effects and sounds," Wu says. "It is very time consuming, but it has given us the opportunity to pursue interactions and user experiences that we couldn’t possibly have thought up beforehand. In many ways it’s been more like working with a tweakable simulation susceptible for user input, rather than a classic design spec."

Any "glanceable" display has to maximize its information density in a way that appeals directly to our senses. Structure must become content, and vice versa. This principle isn’t new to graphic design, but applying it to time-based and interactive contexts (like consumer apps) isn’t as common. Haze’s animated backgrounds are a simple step in this direction. But turning "passive" elements of an app’s interface into dynamic, information-delivering patterns could unlock powerful new ways of interacting with information—without it feeling like a ton of work.

"Spatial, color-coded, and animated information presentation [is] very suggestive, and it can help decode information at a faster pace," Wu says. "It’s obviously always been around in some capacity, but we believe that we’re just starting to see the beginning of a more radical use, particularly in mobile design." Haze’s UI experiments could apply well beyond the realm of weather apps. What if your banking app was more than a calculator-like grid of buttons and input fields—what if its color scheme edged toward red as your balance fell? The days of eye candy for eye candy’s sake may be numbered—and that’s a good thing.

Add New Comment

7 Comments

  • Ari Maguire

    beautiful app. my only issue is how unnecessary it is to make an overly engaging weather app. having to swipe left and right for information that should/could just be right on the main page. I know there's aesthetic value in it and as a designer I totally appreciate that. I'd just like to see this in a different application. Something more practical, more utilitarian. On iOS, I just swipe down notification center to see the weather and swipe up and I'm done. 

    on that note, I live in the south (sf) bay area and our weather is pretty standard - sunny and clear ;)

  • Renato Castilho

    I still wish weather apps could display the current temperature right on the Home Screen icon, the way the Calendar app displays the date... 

  • John Pavlus

    Me too. I asked around and apparently iOS doesn't make this functionality available (yet?) for developers. All they can manage for now is crufty hacks that use the icon badge number (little red numbers, like unread mail) to display the temp. 

  • on

    Definitely not as well-refined as Solar. It deals with more information but loses the 'at-a-glance' by having those extra levels of interaction.

  • Franz

    We're discussing to port it to other platforms, but at this point I can't make any promises.