I’m keen to make sure that our Flow feature development roadmap keeps up with the latest trends. It’s been over six months since I last talked about the predictions from web designers and product design houses, so here’s a brief update.
As expected things have moved on a little. Last year, designers were predicting the increased use of dynamic layering and soft shadows to give the UI a greater depth and make it more engaging. This year those thoughts have been further developed into a set of design techniques that are collectively described as Motion UIs. As the name implies, elements dynamically change as you move around the screen bringing in additional detail or providing visual hints to guide the user towards interesting or useful content.
Over recent years, animation within product UIs and websites had fallen out of favour with designers because the effects could be intrusive and the negative impact on performance and page loading times outweighed the benefits. The increased use of Motion UIs looks to reverse that trend, with interactive animation that provides real usability benefits without impacting page loading speed.
One set of techniques often used in a motion UI is scroll triggered animation which can take one of three forms:
- Multi-layer parallax scrolling, where the background and foreground layers scroll at different rates and/or directions as they come into view, which helps provide the illusion of depth. Patryk Zabielski has created a good example which really helps illustrate this effect.
- Animation of page elements as they come into view. This can include sliding text, self-filling graphs, exploded views etc. Parrot’s drone website shows the benefits of this technique nicely, especially right at the bottom of the page where the drone is disassembled to show its component parts.
- Scroll controlled video where instead of playing video in a normal linear fashion, the display of each frame is linked to the scroll position on the page. This is quite an attractive way of moving back and forth within the video which could be useful when using 360 degree footage to provide remote product demonstrations.
As Parrot’s drone website demonstrates, motion UIs can really enhance the user experience. I’m confident that these techniques will become very popular with customer facing website designers, and hope to see similar animation techniques making their way into some product UIs in the very near future as well.
If you’d like to automatically receive our posts by email please join our mailing list.
