17 . 2 . 15

Design Museum Transition Design

When the design museum returned for a phone friendly version of their iPad app, it was a good opportunity to revisit some of the functionality of the original and to add some polish to the overall experience. The iPad app, designed in-line with a new permanent exhibition at the museum, showcased 59 design classics and described some of their history.  The biggest challenge when translating the app to the iPhone was (predictably) working with a much smaller screen and in particular adapting the menu and filter.


On the iPad, the filter takes advantage of the larger screen, allowing the user to scrub through categories such as designer and material, whilst simultaneously seeing the results of their choices on screen.  This was an experience that would be difficult to replicate on the iPhone.  By trying to fit both the filter and results on screen at once, the experience and usability of each would be compromised.  Instead, we devoted the full screen to both whilst also allowing the user to quickly transition between the two.


In order to improve the experience of the original app, some time was spent prototyping screen transitions.  Not all of the transitions made it to the final app, though they did guide discussion with developers and establish a feel for how the animations should play out.  The intention was to marry the personality of the animations with the style of UI elements. In this instance, smooth and simple transitions were preferable to overly bouncy characterful ones; keeping transitions quick and unified, as opposed to staggered.


A couple of great articles on animation in UI cover how to inject personality into your animations and how animation can contribute to affordance and guiding the user experience.


Also, the section on animation in Google’s material design pretty much reads like a how-to guide on animation best practice.


First transition

The diagonal slice on the side menu offered the opportunity to add a little personality to the initial transition, swiping from top left to bottom right.  Overlaying the menu gives the user some context, icons animate on and settle slightly to keep them movement feeling natural.  This bottom-to-top animation is repeated throughout the app to develop consistency and familiarity with the user.



Second transition

Where possible icons are reused on different pages to develop the sense of fluidity and a seamless experience.  Here, the upward moving icon also guides the action of the following filter types, providing a kind of mask.


Third transition

Here the solution to the problem of showing results is demonstrated.  Whilst the object itself isn’t shown, a results indicator expands as a link to view the filtered objects.  Once selected, the menu retracts, revealing the grid.  The results animate in, highlighting the update the user and adding a bit of flair to the grid.  The plus icon also changes to a back arrow on white, replicating the appearance of the results link and establishing a connection between the two.


Fourth transition

This example demonstrates how shared common elements can be used to connect pages.  In this case the object scales and suggests moving through layers in order to reach new content.


The filter works well though a few tweaks could make the functionality more elegant.  One of the bigger difficulties is switching between the filter and results; utilising a swipe to activate the filter would feel natural and also reduce the tedium of tapping, whilst revealing results instantaneously.


The animations add refinement to the original app and facilitate affordance.  This impact on affordance is a useful weapon in the UX arsenal, particularly with the prevalence of ‘flat’ design and the lack of visual affordance that often comes with it.  Transitions carry an emotional quality, providing familiarity from real world movement and making objects feel more tangible.  All this can add up to an experience that delights the user, and with a positive mindset being linked to improved problem solving aptitude, animations contribute to improved usability too.


ptr1A quick example.  The now retired pull to load icon from iOS Mail stretched with the users drag before snapping to refresh the feed.  Whilst the stretching of the icon encourages the user to pull, the snap as the elastic icon reaches its breaking point is playful and tactile; it was also a preferable distraction to actually reading emails.  A small feature, it was nevertheless memorable, and provides a good example of how animation and transition can connect users with their devices.




Some good sites for inspiration


The iPhone version of the app can be downloaded here


and the iPad version here…

Share This: