Smart Transitions In User Experience Design

Advertisement

Some websites outperform others, whether in their content, usability, design, features, etc. Details of interaction design and animation make a fundamental difference on modern websites. We’ll share some lessons drawn from various models and analyze why these simple patterns work so well.

When we design digital products, we often use design applications such as Photoshop and Sketch. Most people who have been in the business for a few years obviously know that design is more than just about visual presentation. Still, many continue to create static designs. Steve Jobs said this1 about design:

“It’s not just what it looks like and feels like. Design is how it works.

Our experience and impression of a product are shaped by a combination of factors, with interaction playing a fundamental role. No longer can we think of user interfaces as static designs and add the magic of interaction later on. Instead, we need to embrace the interactive nature of the Web from the very beginning and think of it as natural constituent.

Let’s look at some examples in which smart interaction, defined by subtle animation, gently improves the user experience.

Animated Scrolling

The blessing and the curse of the Web are hyperlinks. When you click on a link, it could take you anywhere, from a product page to the website of the creepy old puppet store down the street. The result is a loss of context.

One of the great things about the user experience of books is the linearity. Every chapter in a book builds on the last. You must read chapter one in a primer on economics to understand chapter two. When you skip a chapter, you are aware that you might miss something and, thus, lack some knowledge about the subsequent content. On the Web, and especially on long websites, this often happens subconsciously. By adding a scrolling animation, we can fix that:

Compare that to this:

Compare the default behavior of “name” anchor links with the animated behavior. Skipping content is not an unconscious action anymore; it’s a decision. In fact, Hope Lies at 24 Frames Per Second2 has a menu button for its mobile view that sends you to the top of the page, without any animation. It took me more than a minute to figure out what actually happened.

Takeaway: Abrupt changes in an interface are hard for users to process. Don’t leave them in the dark; always show what’s happening.

Stateful Toggle

As we saw in the last example, transitions help users understand the pace and flow of an interface. Nothing feels more unnatural than a sudden change, because sudden changes just don’t exist in the real world. Let’s look at another example: toggle menus. Users associate the “plus” symbol with the action of adding content or expanding an element. By rotating it by 45°, the plus becomes a cross, an interface element widely understood to mean “close”:

This simple transition completely changes the meaning of the icon. Such a small detail means the difference between having to guess what will happen next and knowing what the icon means in either state. That toggle is pretty user-friendly, if you ask me. Also, note that the plus sign always rotates in the same direction as the content, reinforcing the flow of information.

Takeaway: Make your website element understandable in each state.

Collapsed Forms And Comments

The comment forms on many blogs and news websites are not the happiest-looking elements. Why? Well, most of them are not exactly friendly, right? When you are ready to post a comment, you just want to start typing the comment itself and nothing else. Instead, a typical form asks you all kinds of other stuff first. It’s annoying.

To motivate people to comment more, we can collapse the form and show only the most crucial element: the comment field. When the user clicks on the field, you can expand the form accordingly. A real-world example of this progressive disclosure can be found on the New York Times’ beta website:

You could take this even further by setting the cursor’s focus to the comment field when the form expands. This approach has a problem, though: A key principle of interaction design is that an action should always happen close to where the interaction occurs (near the locus of attention). We could go one step further, then, and animate the comment field to orient the user:

You could even pin the comment field to the top, expand it accordingly and display additional fields below it.

As you can see, this reduces clutter and makes the comment form more inviting. But what about collapsing all of the previous comments, too?

By collapsing the comments, we get the scroll bar to represent the length of the article itself, instead of the entire page. A common practice is to automatically load comments when the user reaches the bottom of a page. We should avoid forcing the user to click unless there is a really good reason to.

Takeaway: Progressively disclose in order to reduce UI components to their essence. Reveal features as the user needs them.

Pull To Refresh

One of the most exciting interactions to emerge shortly after the introduction of the iPhone was “pull to refresh,” pioneered by Loren Brichter. It allows the user to update scrollable reverse-chronological content. You can see this concept in action in Twitter’s app. Once you’ve scrolled to the top of the stream of tweets, scroll a little further to refresh the stream.

Why does this work so well? Before pull to refresh existed, users had to hit the refresh button in their browser to load more content. By connecting the user’s desire of finding more content with the action of refreshing, the need for an explicit action became obsolete.

Takeaway: By connecting intent with action, the experience becomes more seamless.

Sticky Labels

Sticky labels are another subtle yet useful combination of a user-interface component and a meaningful transition. Check out Edenspiekermann’s use of this technique3 in its portfolio.

The project label scrolls along with the content, thus providing context for the images on the right, until the next project appears. This behavior is similar to that of the address book in iOS and is especially helpful for providing context in long sections. The transition offers both improved orientation and smooth context-based descriptions.

Takeaway: Use sticky labels for long sections in which descriptions or titles add valuable information to content that doesn’t fit in the viewport.

Affordance Transition

The concept of affordance derives from cognitive psychology and refers to particular characteristics of an object that guide the viewer.

In the context of user-interface design, the usability glossary4 (PDF) of the EU’s website defines it as follows:

“An affordance is a desirable property of a user interface — software which naturally leads people to take the correct steps to accomplish their goals.”

Ridges are often used to enhance affordance. Ridges around a button suggest that the button can be manipulated. This UX technique was widely popularized by the camera app in iOS.

iOS_Lockscreen-500-final5

iOS 6’s lock screen featured ripples around the camera icon, suggesting draggability. Apple removed it in iOS 7, apparently because users got accustomed to it, making the icon look more like a standalone button now. What happens is still the same, though: When you drag the button, the lock screen bounces up, revealing the camera underneath. This is a great technique to point users to features in an interface.

Takeaway: Give elements a high affordance to point users to features in an interface.

Context-Based Hiding

Google Chrome on iOS has had context-based hiding since it launched. This is what it looks like:

The basic idea is that the browser chrome and navigation controls hide automatically once the user scrolls down. As soon as the user scrolls up again, the controls reappear. This approach both enhances the contextual experience (focusing on the content itself) and increases screen space. The latter is, of course, particularly important on mobile devices.

The underlying assumption is that users will flow with the content that they’re consuming. As soon as they stop the flow, a change of context is likely required; thus, the navigation controls reappear. While this technique saves screen space, check whether the assumption holds up in your use case.

iOS takes this a step further. When you reach the bottom of a page, the controls expand again. It’s a good example of dynamically incorporating the needs of the user in an interface.

Takeaway: Use context-based hiding to enhance the user’s focus and save screen space.

Focus Transition

About a week ago, Nikita Vasilyev, a Toronto-based UI designer, came up with a pretty neat idea. He developed a script that animates focused elements. While still experimental, the concept is pretty interesting. Have a look at his video below. (And please put your earphones on — the music is epic.)

When navigating by keyboard, the user is often not clear on where the focus has moved to upon pressing the Tab key. Animation points them to the right spot on the page. The transition is subtle but has a big impact on orienting the user.

Takeaway: Orient the user, regardless of how they navigate.

Conclusion

These are only a few examples, among many others out there. The point is not to show the latest and fanciest interaction techniques, but rather to highlight how small interaction details can significantly improve the user experience.

If we are to design better digital products, then we need to challenge our current beliefs and see how interaction patterns can potentially ease the user’s life. I’m not saying we should reinvent the wheel, but it would be pretty naive to stop exploring. So, get out of your comfort zone. Keep exploring and testing.

If you like this article, you can follow me6 on Twitter, or join me for a bar of Swiss chocolate in Switzerland.

Which transition patterns have you found especially useful in your projects?

Further Reading

(al, il, ea)

↑ Back to topShare on Twitter

Adrian Zumbrunnen is a user experience & interaction designer working at Information Architects in Zurich. He loves the Web, well formed type & freshly brewed coffee. In his free time he goes kite surfing and writes about UX design on his blog.

  1. 1

    Really insightful article. It’s interesting that really small details can help users enjoy and accomplish tasks in a uncomplicated way without them having to think too much about what they need to do next.

    I’m finding myself doing UX/UI stuff more often now and it’s great to have names behind some of the processes.

    Thank you.

    2
    • 2

      Brilliant explanation of technical “magic” to enhance content in any media presentation. What fun this promises! for websites everywhere, especially for non-geek tribe members like me. Way to go, Adrian. Very well written article, loved the music – excellent! I would write more but I’m off to wax my skis so I can meet you in Switzerland to share that chocolate….Thank you for the info.

      0
    • 3

      Current trendy transactions are really smooth and cool.

      This is something new i got from your post the most i like is the 1st one with navigation on top and scrolling according to the nav bar.

      Putting gif animations is really a good idea because we get the clear idea of all the UX effects.

      Thanks

      0
  2. 4

    Great article, with some excellent examples. Thank you for sharing.

    1
  3. 5

    Beautifully written and documented piece!

    I know comment-land can be a very negative place so I decided to write this to tell the author they’ve done an excellent job. Hope to see more quality documentation about concepts and ideologies shared by the good team at Smashing Magazine and people in our industry at large.

    Keep up the good work, Adrian Zumbrunnen.

    Ps. On second glance at your profile, can’t say I expected any less from a member of the infamous iA. Thanks for sharing :)

    0
  4. 6

    Really Interesting. Thanks.

    0
  5. 7

    A good read. Here are a great deal of UX animations: http://sixux.com/archive

    0
  6. 8

    This is an extremely well-written article. I look forward to sharing this with the designers at my agency. Your animated examples really bring the concept to life and at the same time reinforce how smart transitions affect a user’s experience (even when reading the article).

    0
  7. 10

    Very good article!

    0
  8. 11

    very nicely done – i really like how well you have presented each transition with a visual animation. I will be sharing and referencing. Thank you, John

    0
  9. 12

    De läääääääbe!

    0
  10. 13

    This is why I enjoyed the early days of Flash (don’t scorn me). Yes, there were garish overuses of animation, but when used with a soft touch, they enhanced the experience. For another example of a great transition, changing articles on Medium.com has a lovely animation.

    0
  11. 14

    Great article. Altho, I hate the Chrome address bar on iOS. It reports 2 different viewport dimension on page load and then after scroll (triggers window.onresize). It’s quite difficult to code mobile web apps when the browser address bar keeps toggling during scroll.

    0
  12. 16

    “By rotating it by 45°, the plus becomes a cross, an interface element widely understood to mean “close”:”

    Yes, let’s imagine every scenario possible and try to cater for it. Such fun!

    Fortunately for us, the brain is a wonderful machine capable of analyzing things in context (although some people seem to lack the ability). The eyes do NOT send only the “this is an X button” information to the brain but also various information like “the device is rotated”, “there’s a reflection of a red light from the ceiling” etc etc.

    I cannot but remember the time Steve Jobs decided to invert the direction of the mouse pad scrolling. A usability expert was crying about the damage done to the user. To prove his point he paid close attention to his 50 years old mom when face with the change. That woman, without ANY complain “learned” the new behavior in a matter of seconds leaving the usability expert perplexed about her inability to spot “bad design decisions”.

    0
    • 17

      Adrian Zumbrunnen

      October 23, 2013 6:53 am

      Very good point you make there. Will keep this in mind!

      0
    • 18

      Well if you know the history of windows you would remember that everything started in what we see as the inverted scroll. It was an argument on whether the interface should work like a sash window and which slat you open. It’s something which works either way based on your personal feel on how things pivot on the Y axis. That’s why some people naturally play games with inverted Y axis and others don’t it is just how you see the world, there’s no right or wrong.

      0
  13. 19

    Very refreshing to read about transitions! Thank you so much for your insight!

    0
  14. 20

    Great Article, Am curious as to what was used to create the sample gifs used throughout the article…anyone got any ideas ? They work really nicely.

    0
    • 21

      Adrian Zumbrunnen

      October 23, 2013 11:48 am

      I used framer as an interface for photoshop to generate the slices and then animated them using photoshop animate. Those are actually retina gif’s. You can display them at half size.

      0
      • 22

        @Adrian Zumbrunnen – Can you expand on that? Was this done in FramerJS or in Photoshop gif animation palette?


        “I used framer as an interface for photoshop to generate the slices and then animated them using photoshop animate. Those are actually retina gif’s. You can display them at half size.”

        0
        • 23

          I second the request. A tutorial would be awesome – they have been tricky to hunt down on the web. Thanks for a great article!

          0
  15. 24

    Here’s a link to Nikita Vasilyev’s focus transition article, with downloadable JavaScript file:

    http://n12v.com/focus-transition/

    0
  16. 25

    Great article. One of the most enlightening article I read in a long time with clear and factual examples. Well done!

    0
  17. 26

    Wonderful read. And yes the music in focus transition is awesome. Headphones a must.

    0
  18. 27

    Thank you! This an excellent and thoroughly inciteful article.

    0
  19. 28

    On the collapsed comment field: I’d prefer when typing a comment, that the cursor positions stays fixed, so the name and email fields have to expand into the area above, and the single line comment field to extend to the lower area. This also almost implies, that the text box is centered vertically (with traceable motion of course) as soon as it is clicked. It just feels wrong that what said “Leave comment” changes to “Name” when clicked.

    However it shouldn’t overlap any content, so the content should also be moved somewhere up or down. It forces the user to click, however, but this is because he wants to take action and comment, and therefore not a bad thing (and the user is left in control of the actions).

    0
    • 29

      Oh and, while at it, give the expanded version a cancel option somewhere.

      0
    • 30

      Agreed. I think this animation could be improved. If you are going to vertically reposition the “Comment” input field, you shouldn’t completely hide it before animating. It would be much smoother if you simply kept it visible and expanded its height while simultaneously tweening its y position. From a z-depth perspective this input field would be on top and as it animates would reveal the additional fields below it.

      0
      • 31

        Found a quite good example already at this website (following the whatwg-link in another article here):
        http://timkadlec.com/2012/05/wtfwg/

        However there is no animation when clicking on name… yet I like the more-steps approach where it offers you more options the more you click.

        0
  20. 32

    Really great article Adrian!
    When well used and thoughts, transitions can be great.
    We also have to be conscious about not using too many custom transition scripts which might slow down the page and create a bad experience.

    0
  21. 34

    I enjoyed this a lot … thank you for all the examples, both written and visual and giving us a summary point. As a secondary educator I really like having terms with meanings behind them for interactive function.

    0
  22. 35

    Good points all around! I got many ideas for my site. However I have one issue with context-based hiding.

    Not only is it quite hard to do well. It is basically thinking FOR your users, and as such it will cause significant hair-pulling and general distress if it doesn’t work at all times, exactly as the user expects it to. Covering edge cases is difficult.

    It is also, in iOS Chrome’s case, a headache for web developers. At the agency where I work, our site has a header that’s fixed to the top of the page. Since Chrome’s address bar floats on top of the content (it doesn’t push the viewport down to make room for itself), it actually manages to hide the most important navigational element of our site when the user simply scrolls up! With the popularity of fixed headers, I can’t believe Google didn’t anticipate this. In my opinion it is contextual hiding implemented badly.

    0
  23. 37

    I was wondering for many times that how do you make this kind of large gif image that shows a process. Can you suggest any tools to make gif images like this.

    0
  24. 38

    I found this article very informative nice post!

    0
  25. 39

    Isn’t this actually about Usability Design instead of User Experience? What is the difference in your opinion?
    I wrote a blog post about the difference, making a clear distinction. http://deesignre.com/usability-vs-user-experience/ What is the difference between the two you think?

    0
    • 40

      Adrian Zumbrunnen

      October 24, 2013 7:37 am

      Usability is of course a fundamental part of a user experience.

      I see UX as a result of any combination of different fields (interaction design, user interface design, information architecture etc.) that together shape the eventual experience a person has, when using a product. Therefore UXD is an all encompassing design process of the above mentioned fields.

      In other words, user experience design is more than just interface design or usability design. It’s designing the overall experience a person faces when using a product (whether good or bad).

      0
  26. 41

    Transitions can also be damaging. There is a common trend to overload things with visual flare that do not enhance the experience.

    Take any page on https://www.moneyadviceservice.org.uk as an example. There are these faint green boxes interspersed throughout the page body which have this hover state on them to show some actions. They’re not necessary and create a distraction.

    Thinks link contextual state changes have been the best evolution of form design in the history of the web, genuinely helpful and make it easier to maintain focus on a task and help guide the user.

    The focus animation idea is novel, but I don’t believe it creates any additional benefit, if you have a well structured linear form you don’t need guidance through it – unless your answers can allow you to skip other items, which should then be disabled at the same time.

    0
  27. 42

    Oh common! It is interface design, not experience design!

    0
  28. 43

    In regards to animated scrolling are assuming the site is is a one page website? If the website has separate pages, do you think animation would be the right thing to do?

    0
    • 44

      Adrian Zumbrunnen

      October 24, 2013 11:17 pm

      It depends on the conceptual model of the website.

      I wanted my blog to feel more like an app than as a typical website, so I added transitions that reinforce this feeling.

      you can check out the transition by clicking on a blog post: http://azumbrunnen.me/blog

      0
  29. 45

    Great article! And the animated examples are great for sharing with other UXers.

    0
  30. 46

    Regarding the camera button on the iOS lock screen, it should be added that if you tap it instead of dragging it, it jumps up to suggest the upward sliding motion.

    0
  31. 48

    I really wonder how the animated scroll was coded (?) it looks like here it’s only an animated gif of it…. Any idea how this can be accomplished in a simple way on top of Twitter bootstrap? I wouldn’t want to spend a whole day coding this myself… my initial approach would be to create a very large layout and transition the viewport around it, but that’s a bit tedious and experimental.. and it won’t work with bootstrap’s somewhat-finite and layout, plus the responsiveness would need to be toggled off somehow, to avoid it interfering with the animation.

    Any ready code or component that safely does the trick??!

    0
  32. 49

    Very Insightful article by Adrian! excellently explained about how web designs have changed in recent years and how its today. Excellent examples, Thank you for sharing. I stumbledupon it ;) I will come back yet again since i have bookmarked it.

    http://www.boston-technology.com/ios-development.html

    0
  33. 50

    Great article, I thoroughly enjoyed reading it. However, I don’t agree with your use of the term “affordance”, or at least the source that you used for the definition (EU’s website). According to the precepctual psychologist J.J. Gibson who coined the term “affordance”, affordances are a relationship, they don’t have to be visible, known, or desirable. I don’t think that the defintion “An affordance is a desirable property of a user interface — software which naturally leads people to take the correct steps to accomplish their goals.” does justice to the term affordance.

    I know Don Norman uses the terminology perceived affordances, and I believe that this sits more closely with software and the web. This is not meant to demean your article, I think you did a fantastic job.

    0
  34. 51

    I love this kind of articles when you collect a lot of related techniques and examples, and present it in a coherent manner. Great job!

    0
  35. 52

    Insightful article Adrian. The focused transition one is very interesting. My company experiments with navigation to enhance the user experience. We have free scripts for what you call “sticky labels”. We all it “sticky headers” and the script automatically builds it on a page. Check it out at http://www.pebbleroad.com/labs

    0
  36. 53

    excellent piece of article., absolutely loved it., explaining logic behind the animated scrolling was cool.

    0
  37. 54

    Although some suggestions are nice and interactivity and motion enrich the UX of a product. I disagree on copying the nature of the world, just because.

    For example, the “back to top” button takes you from A to B. Why make me “travel fast forward” the whole site when you can just teletransport me?

    0
  38. 56

    It would be nice if more websites hid the comments until they were reached. Especially this one! I thought this article was twice as long as it ended up being. Good sign to have as much chatter in the comments as you have content in the article, though!

    0
  39. 57

    Very Nice! Good article.

    0
  40. 58

    Awesome article. Very important things. Especially in flat-design era

    0
  41. 59

    Nice writeup and very useful! Thanks Adrian!

    0
  42. 60

    Jenn at Medialoot

    October 31, 2013 5:13 am

    This was a really fun post to read through. Thanks for providing moving examples. After I got over the “ooooh ahhh” initial pupil-dilating syndrome, I really learned a lot when it comes to UX. Our site users will find this article helpful as well!

    0
  43. 61

    Interesting and inspiring… Only a UX guy could have seen all this.
    Thanks for sharing !

    0
  44. 62

    Nice article, but I disagree with “…sudden changes just don’t exist in the real world.” Sudden changes DO happen in the real world, at all times. You just may not be the one experiencing it.

    0
  45. 63

    This blog was made to be a repository of good interaction design examples: ui-drops.tumblr.com check it out =D

    0
  46. 64

    “Context-Based Hiding”

    The magic-hiding-address-bar literally does my head in. I now have to scroll up to get to the address bar? To what? Save 10 pixels?

    I hate it.

    0
  47. 65

    Issara Willenskomer

    February 8, 2014 10:56 am

    Hey Adrian, love this article. Already shared on my FB and Twitter. This dovetails nicely with my ‘Rapid Prototyping with After Effects’ training that I’ve been offering. I believe that getting tools in UX Designer’s hands allows them to design not just the flow but also the mechanics of the interaction. This ultimately results in better experiences. I love the Steve Jobs quote. One of the things I’ve noticed is that designers don’t often understand that transitions aren’t just cool, they really how the design works. If used consistently and effectively, transitions can be an extremely powerful way to allow the user to ‘map’ the experience, and very quickly build neural location structures that allow them to use the digital product at a much more effective level. Thanks again!

    0
  48. 66

    Hi there would you mind sharing which blog platform you’re using? I’m looking to start my own blog soon but I’m having a hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I’m looking for something completely unique. P.S My apologies for getting off-topic but I had to ask!

    0
    • 67

      Markus Seyfferth

      July 22, 2014 8:59 pm

      Thanks Colleen, we’re using WordPress and couldn’t think of a better CMS. But it has some hurdles — like every other platform — too. The design was made by Elliot J. Stocks. Hope it helps a bit? :-)

      0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top