*** UPDATE: Check out the animated prototype (video). See more about it at the bottom of this page. ***
*** UPDATE II: new poster presentation. ***
User need information to decide whether he/she should bike and if yes, what clothes to wear:
User don't need:
App shows how weather is in either direction depending on iDevice rotation.
Wind chill effect can include relative wind speed depending on biking direction.
Main screen "You"/the user/"head" is centered in the app (head/person) app showing weather around you. Layout is basically a map of the weather within biking distance - default 10 km (6.2 miles) radius. The map shows hot vs. cold (color gradient background), cloud vs. sun (cloud overlay) and wet vs. dry (precipitation overlay).
Interaction 1) Orientation of device rotates weather map. 2) Drag "head" to either side to show more detail of weather in opposite direction of drag. 3) Drag "you" all way to edge to see even more detail = forecast of entire day.
Discoverability As you might have noticed, show should the user know to drag or that "head" is the user. First of, since the map rotate immediately to user rotation of device, the user gets that the app relates to users position and orientation. The drag gestures is only for secondary features, but if the app is left unused for a certain amount of time, the "head" could animate around, showing of that some additional functionality is just a drag away.
The design uses the 11pt grid and font choices made by Sarah Mick.
Default screen 1) animating clouds indicate wind direction and speed. 2) Temperature color is including wind chill effect.
Drag "head" for detail Dragging "head" in reveals more details in opposite direction. Other directions fade out.
Drag "head" all way to edge for forecast Dragging head all the way to the edge and it snaps. Complete detail with forecast is shown (+4 hours). Scroll content to extend forecast.
Prototyping in Quartz Composer
It was quite fun to try and I think this could work for "quick" prototypes, especially for gestural interfaces. A little behind-the-scenes for the prototype below actually shows the entire setup for my demo.
More of my work @ developmunk.dk