Animations

Custom Scroll Animations: To aid in the recognition of the app's spatial structure, we created custom scroll animations that supported the screen placements (see screens 1–13). This was aimed at solving the problem of a lack of correlation between data and time of capture by creating visual grouping via the app's z-axis. The animations were quickly mocked up using moment-by-moment snapshots to communicate with the engineering team for technical feasibility of future production.

Scrolling Down = Forward in Time: For the weather information screen, the scrolling of stacked "cards" created the visual illusion that they did not exist in the same space on the z-axis (see 1–7). First, the current weather data would scroll "under" the weather photo so the image is always viewable and related to the numeric data via grouping (see 3–4). Second, the forecasted weather will scroll "over" the current weather data, creating the correlation between time and app space (i.e. moving forwards is going into the future and moving backwards is going into the past) (see 5–6). Third, the location information card will scroll over the forecasted data, to visually and spatially create grouping and separation of information (see 7). In addition, when scrolling down, the top and bottom navigation bars will pan out, to provide additional screen space for information consumption. Scrolling up at anytime will bring them back into view (see 1–2).

Scrolling Up = Backward in Time: Scrolling up from the weather information screen will show the refresh module; if they let go at this point, the screen will refresh the weather data (see 8–9). If the user pulls down further, they will see a prompt to continue pulling, and if they pull down more, they will see the "yesterday" module; if they let go at this point, the yesterday timelapse data screen will "fall down" from the top of the screen (see 10–11). If the user pulls down even further, they will see a snippet of a list of past days; if they let go at this point, the timelapse list will fall down from the top (see 12–13). The visual illusion that the timelapse screens are from the top and/or from behind the current weather data emphasizes that the timelapses are from the past.