UI Motion System
A UI motion system for an online fashion store.
A UI motion system for an online fashion store.
This is a shortened version of my thesis project that I finished in July 2016 at FH Potsdam under the supervision of Prof. Boris Müller and Timm Kekeritz. You can download the full thesis here to can get a closer look at the research I conducted which informed a lot of the design decisions.
I believe that digital products should be dynamic and alive, like everything in our analogue world is. UI animation (or UI motion as I will refer to it in this document) can make digital experiences more dynamic, more lifelike and I believe thereby easier to use and understand and also more fun. Unfortunately a lot of digital products today lack that liveliness and realness.
But it’s important to use UI motion with a purpose. There should be a system behind the choreography of moving elements and the transitions between screens to create a seamless experience for the user.
Google made a big leap forward with their material design guidelines. They are attempting to create a system for UI motion design that is informed by real world physics. Gravity, mass, light and position in space all play roles in making up the rules of this virtual space.
Rooted in my believe that animation in UI design (which I will refer to as UI motion in this document) has been greatly overlooked in interface design for a long time and I think it’s time for designers to start creating dynamic animated prototypes rather than just static screens. With the surge of powerful prototyping and animation tools it has become easier for designers to start playing and tinkering with animation and I think they should embrace that.
I’ve been and still am part of a team at Zalando, an international online fashion retailer, that was tasked with designing a future vision of the company’s online shop –the "Fashion Store". Since the beginning of January 2016 we have been shaping that vision and part of my contribution to it is this thesis. I tried to come up with a guideline document on how UI motion should be used in the vision of the Fashion Store to get designers accross Zalando engaged in the topic.
I believe that UI motion will become a more and more integral part of how we interact with software in the future as it enables new kinds of interfaces. The goal of this thesis is to try to push the evolution of UI motion forward by providing an underlying system that designers can draw from.
The base for this UI motion system is an online shop that I designed. It features a prominent header with a big search bar, access to profile and shopping bag as well as a canvas area that can display items as well as content pieces. That's it.
To use motion not only as a means to enhance an interface as it currently exists but to put it at the core of the design I decided to come up with a guiding principle as a challenge: "Everything should happen in the same virtual space". That means the interface should be made up of a virtual space in which elements can be arranged in, in which elements can change size and order and in which elements can exit and enter.
The prototype was designed for the tablet screen size.
Navigation
The navigation is made up of the search area and the filter bar. The search area contains the profile, the search bar and the cart.
Basic structure of the site.
Cart & Checkout
The cart and the checkout process are displayed as a modal overlay that slide in from the right. The steps also progress along the horizontal access enforcing the metaphor of virtual space.
The checkout modal.
Filtering
At the top of the catalogue there is a blue bar that contains filtering options for the displayed products. Depending on what kind of products are displayed these filters can vary.
The filter bar in action.
Inline Product Page
At the core of most online shopping experiences are the catalogue (the area where products are displayed in a grid) and the product page (where a product is displayed in more detail). These two pages are probably the most visited of any online shop and where users spend most of their time while browsing. The transition between catalogue and product page is therefore an important one.
Unfortunately this transition requires a page reload in most online shops. This can be an unpleasant cut in the experience as it's a change of context and the scrolling position of the catalogue can get lost easily.
Wireframe transition of opening an inline PDP.
To get around the page reload there are no separate product pages in this design, but inline product pages. If the user taps a product thumbnail in the catalogue, the thumbnail simply scales up and reveals more details about the product. Additionally a horizontally scrollable list of related products appears below which allows deeper exploration right within the catalogue. This way the user always stays on the catalogue and doesn't have to deal with the unpleasant cut in the experience.
The behaviour of elements in the catalogue follows certain rules. These rules define how elements enter, exit, move and change.
They are divided into 3 chapters: Movement & Duration, Transitions and Choreography.
Movement shouldn’t only feel natural, but elegant and smooth to reflect the context of fashion.
Easing curves define how movement accelerates and decelerates. The more natural movement feels the better the user can relate to it. And to reflect the context of fashion the movement shouldn’t only feel natural, but elegant and smooth.
The three easing curves used for the fashion store: Standard, Ease-Out and Spring.
Standard
The standard easing curve is similar to the Decay curve in Facebook’s Pop. Movement comes to a smooth, slow halt and gives the animation an airy and soft feeling. The standard easing curve should be used for all system initiated movement.
Ease-Out
The ease-out curve is similar to the standard curve but it takes not time to accelerate, giving the moving object a much more responsive feeling. This easing curve should be used for user initiated movement, as it's responsive movement gives the user the feeling of being responsible for the objects acceleration.
Spring
The Spring curve is used for microinterations. The bouncing motion gives the user reassuring feedback that their input has been registered (see filter bar).
Depending on if movement of an element is user-initiated or system-initiated its acceleration should behave differently.
User-Initiated Acceleration (Direct)
If the movement of an element is user-initiated (e.g. opening a Product or tapping the Add-to-Cart button) it needs almost no time to accelerate to full speed. This makes the user feel like she’s the one who accelerates the movement. This movement uses the Ease-Out curve.
System-Initiated Acceleration (Indirect)
If the movement of an element is system- initiated or indirectly user-initiated (e.g. related products sliding in from the side) it needs more time to accelerate as the user doesn’t expect it. Animation that’s not a direct result of an action can make people feel disconnected or distracted and should therefore take more time to speed up to not surprise the user.
Movement should be fast and clear. The user should never have to wait for an animation to finish, as this can make the interface feel slow and unpleasant to use. The smaller and less complex the animation the shorter it should be (around 200ms) and the larger and more complex it is it should be longer (up to 750ms).
Duration times of animations based on their complexity.
Smaller movement (e.g. a microinteraction) generally needs less time and should range somewhere from 150–200ms.
Larger movement (e.g. Opening a PDV) generally needs more time and should range somewhere from 300–400ms.
Complex Transitions like Mask & Scale in the catalogue take longer because there are a lot of moving elements involved: 700ms–800ms.
Transitions should guide the user’s attention through a change in the interface.
Shared elements (elements that are visible throughout the transition) scale up during the transition, elements that are not shared (elements that are only visible on one side of the transition) stay fixed in place and get revealed when the mask uncovers them. This keeps the user focused on the most important element during the transition. Elements in the catalogue act as masks. If they change their size they can reveal additional content like product information and price. This makes elements in the catalogue diverse enough to display many different kinds of content. Elements inside the mask–besides the main element (e.g. the product image)– don’t move with the mask but stay stationary and get revealed when the mask reveals them. This helps to keep the user focused on the most important element during the transition. When an element in the catalogue scales up or down its top border should stay in the same place to minimise the movement the user has to process. This gives the transition consistency. All elements next to and below the one scaling up get pushed down.
Opening an closing an element.
Incoming Elements
When a new element is added to the catalogue–for example by changing a filter setting–the user should get a clear sense of where it came from. An incoming element fades in and slides up. This establishes a mental model of the element's place of origin in the users mind.
The transition for single incoming elements is called Fade In & Slide Up.
Exception: Horizontally scrollable lists
This transition is only used for horizontally scrollable lists. This animation gives a clear affordance to the user that the list is horizontally scrollable.
The transition for horizontally scrollable lists is called "Slide In".
Outgoing Elements
If an an element leaves the catalogue it fades out and slides down–the opposite transition of an incoming element. This again enforces the mental model of place of origin.
The transition for single outgoing elements is called Fade Out & Slide Down–the opposite of Fade In & Slide Down.
Transitions with multiple elements should be choreographed to not overload the user with too much movement at once.
If all elements enter or exit the screen at once their behaviour is choreographed. They Fade In & Slide Up in a staggered way, starting on the top left and finishing at the bottom right. This helps to guide the users attention during the transition.
Choreographed entrance of all items.
Multiple Items Entering & Exiting
If not all but some items either exit or enter, the remaining elements reorganise themselves. There should never be any diagonal movement over the screen, so the reshuffling is seperated into the X-Position changing first and the Y-Posititon changing second, so that elements always travel at a right angle.
Multiple items entering the catalogue.
Multiple items exiting the catalogue.
This thesis is the result of a research & design project at the Studio. If you want to dive deeper into the thesis, you can do that here.
A big part of this thesis was about understanding for me. Understanding what a transition exactly is. Understanding how gestures and animations work and belong together. Understanding what motion can do for the user and how it’s best used to enhance an experience. I dove into different topics like the Material Design Guidelines, Disney’s animation principles and Facebook’s Paper and Pop which really helped me get a better understanding for the topic.
This research phase was necessary for me to be able to form my own motion design guidelines. The design phase for the guidelines was a bit shorter than I had originally intended but as the thesis was connected to my work at Zalando I was tied to the design process there.
Looking back I probably should have started with the design process earlier myself, simultaneously to the research part. Working on the research and the design at the same time might have influenced them both in a good way.
I also spent a lot of time clustering the motion patterns I had come up with and thought a lot about how the guideline document should be structured. Because the design phase of the project at Zalando is not finished yet and there might be new things I have to integrate into the document. Its structure might change or expand.
A question that I asked myself very early on in the process of writing this thesis was »What differentiates motion guidelines for an online fashion store from motion guidelines for any other online store?«
The way I tried to answer that question was to think about what kind of feeling the user should have while using Zalando. Should it be exciting, comforting, boring…?
Zalando wants to be a fashion brand (Wauters 2016) and not just a retailer of clothes, that’s why I wanted the experience to feel exclusive and elegant. I tried to avoid bouncy movements, like in the Facebook Paper app, and create a light and airy feeling (Apple 2016) in the interface. Easing curves and timing of animations play a significant role here.
What I’m trying to achieve with this guideline document is to create awareness for UI motion within Zalando and to systematize the work we did on the future vision of the fashion store. It’s important to think about the animation used in interface design in a systematic way to ensure a unified experience for the user.