Providing context with animation
Using material design animation principles to improve the photo viewing interaction on Instagram
Background
I originally posted the result of this article a while back on Dribbble, finally I have got round to explaining my thoughts & methods behind it.
Having been an Instagram fan for a long time, scrolling through the explore section has become a regular part of my day, as it is for millions of other users. I love to discover photos and view profiles with content that interests me, however I have become increasing hung up on the experience for both viewing a photo and flicking between multiple images.
Inspired by an article on transitional interfaces by Pasquale D’Silva and Googles Material design I decided to tackle the photo viewing interaction on Instagram. In this short read I will explain how I went about it and why …
The problem
Visually this app delights, it brings the photos to the forefront exactly as it should however for me certain aspects of the user experience could be improved upon particularly when viewing photos.
Viewing a photo (see above)- Currently when tapping on an image a new screen slides in from the right which detaches the user from the journey, breaking the flow, (user taps in one place and something happens somewhere else). This feels like a very unnatural user experience and rather dated.
Viewing multiple photos (see above)- Another problem I have come across is that it isn’t possible to scroll through photos once you’ve tapped into a thumbnail, the user has to use the back button to then click on the next photo. There is the list view which enables the user to scroll photos however when switching to it from the grid the user is sent to the first photo again making it difficult to scroll to photos further down a profile/ explore screen.
From the points raised it is clear there is room for improvement as the current interaction doesn’t provide context for the user when viewing a photo and provides a broken journey for swiping through multiple images.
Design goals
What do I want to achieve?
- Create a responsive interaction that provides context for the user when viewing an image from a grid view
- Create a meaningful transition for the user to easily flick through multiple photos
- Create a delightful interaction using authentic motion
Material Design animation principles
Google have revealed to the world their take on motion & interaction design which you can find here in the material design guidelines. They clearly identify principles for animations and expand on how and why animation should be used. Principles I believe are relevant to this design task can be found below.
Point of origin
When new material is generated as a result of direct user interaction, surface growth motion should originate from the point of input.
Visual continuity
Transitioning between two visual states should be clear, smooth and effortless and not confuse the user.
Hierarchical timing
When building a transition, consider the order and timing of the elements’ movement. Ensure that motion supports the information hierarchy, conveying what content is most important by creating a path for the eye to follow.
Consistent choreography
As transitioning elements move around the screen, they should behave in a coordinated manner. The paths elements travel along should all make sense and be orderly. Haphazard motion is distracting.
Proposed solution
Tap, view, swipe
- By using a surface growth animation the user feels like they are delving into the photo thus providing context of where they came from instead of starting a new flow
- The animation is clear, smooth and effortless that prevents confusion for the user
- Elements are consistent and behave in a coordinated manner
- User is able to swipe to view more
Considerations
- Manage ‘lazy load’ when swiping through the images
- Users are used to the paradigm of swiping through photos however Instagram uses a vertical scroll in other sections of the app
- Scrolling an image vertically to view the comments, swiping to the next image then returning back. Should the image remain in the scrolled position?
Thank you for reading, any feedback or ideas to further develop this concept would be very welcome. You can find more explorations and work on Dribbble.
