The Importance of Context-Shifting in UX Patterns

Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent years, employers at big companies have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website works the same way.

Any time a new user visits your website, they do so with trepidation. It’s the reason that all sites begin to use the same patterns over time. For example, people tend to know how a radio button group works. You're giving your users an interaction they already understand. But a lot of big sites don’t consider that by changing the placement of elements in the UI completely upon interaction, you’re also asking your user to readjust to this new view. This lack of context is an anti-pattern: we’re not gracefully showing the user what changed and why.

The associations of space, time and placement can help an interaction seem more fluid and intuitive. It needn’t be over-the-top. Think of clean, minimal UI designs. They can be easy to navigate and look very elegant, but it doesn't mean they are easier to make.

Let's give these placement changing interactions a name: context-shifting UX. Then we'll attempt to demystify with some examples and techniques.

Before we dive into solutions, it’s important to note that any one of these can be overdone. Our brains (and subsequently, most living things) have evolved to especially take note of something in motion. This evolutionary trait is in place to keep us safe and alert, however, the part of your brain that kicks up adrenaline instinctual for survival is the part triggered when something unexpected moves. Animation is fantastic! The web is a static, droll, box without it. But when it comes to UX animation, subtlety is key.

The power of most of the techniques we'll cover are in combining them. Throughout the article I’ll illustrate this with complimentary approaches such as the Pen below. It’s recommended to see the full demo.

See the Pen map 30 by Sarah Drasner (@sdras) on CodePen.

Revealing

Imagine a modal that reveals itself on click. Anything we pop onto the screen without warning has the potential to cause unease. Modals are powerful because they have a commanding and attention-grabbing state, but are often disliked, in part because they can be so jarring.

If we can reveal the modal in a more nuanced way, say by expanding, scaling, or flipping it, we suddenly create the opportunity to guide our users from one state to another. We'll get just as much attention as a jarring modal, or perhaps even more so, because our brains have evolved to detect movement.

Revealing states (think of a modal as a "state") are particularly useful because we can play some slight-of-hand tricks that make everything seem very fast. We can lazy-load the hidden state after the rest of the page is done, but keep it dormant and paused, so that it can easily come when called by a trigger such as a button or even a scroll event. This has the potential to make this technique feel seamless and intuitive. I'm not the only person who's considering UX and revealing states in animation, check out this great article from Val Head on A List Apart, too.

Morphing

A visually obvious transition technique is morphing. If you need to get from one state to another, the simplest thing you can do to relax that transition is to morph one shape into another. It can be quite a lovely effect!

UI flourishes that use concepts like transformicons have become popular because they are elegant, informative, and enjoyable.

Both SVG and CSS are good options for these kind of UI animations. I’ve found, from working with both, that each have their strength and weaknesses. CSS easily tweens round to square and back again with border-radius. It can also handle large quantities of scale transforms gracefully, while SVG, beyond a few multitudes, will appear pixelated before recovering. However, SVG is built for drawing. It is well suited for complex shapes. You can tween path or even shape data with JavaScript, previously with SMIL (no longer recommended because of discontinued support), and soon CSS with some new SVG Styling Properties in working draft with the W3C. Snap.svg is well-known for tweening path data with similar numbers of points gracefully, and GSAP offers similar capabilities with their Attr plugin. You can also make an SVG look like it's drawing itself for morphing effects by animating the stroke-dashoffset, as you see in the demo when the close button disappears.

Morphing and revealing, when orchestrated in tandem can create informative and intuitive UX patterns, demonstrated in the Pen above.

The combination of effects mean that the user interface can come when called.

Rather than moving through popping modals or multiple screens, the map marker morphs into the information the user needs, the inputs move out of the way for the user to write in their email, and the submit state tells you immediately that something is loading.

Everything is already on the page waiting to be activated.

Isolation

People do not keep steady focus on your UI no matter how clean your UX. Eyes move around in a phenomenon called Saccade, creating a three dimensional mental map of a scene, yet focusing on points of interest. If you consider that your site ideally siphons a wide user base into smaller sections depending on their interest, narrowing the scope of what they are scanning is helpful.

Here, we illustrate how once the user decides their relative path of interest, the design shifts to guide them, giving them less area to scan and making it more clear where their attention should lay (see full pen here):

See the Pen map 30 by Sarah Drasner (@sdras) on CodePen.

Style

Any of these techniques need to be married with the appropriate style. I’ve written before on how to accomplish appropriate style and branding communication within a motion design language. The morphing/revealing Pen I showed earlier has a sine/single curve easing. Compare this to the bouncy easing in this Pen:

See the Pen map 30 by Sarah Drasner (@sdras) on CodePen.

The bouncing easing gives things a more more expressive and elastic tone. Both the above example and the map example complement the palette and type of design. The motion language in context-shifting has to be married with the rest of the design. If it didn't, it would seem out of place. Imagine the bouncy feeling in the slick map design—it would be weird. We’ve used different context-shifting techniques in each example to support the site’s branding.

The style can also change the way that the context-shifting action is registered in our brains. This gooey menu by Lucas Bebber is a more memorable and unique way to register where items are going and where they have gone than other ways of accomplishing the same beginning and end states. Being memorable for creativity and style is always a good thing. Lucas' series of Pens demonstrating this relatively simple technique have a combined view count of almost 320,000!

The relative style of easing can be used the same way you might think of a color palette. Most company use accent colors sparingly to balance a complete color palette and call attention to certain key points:

accents in palette and ease

We can apply the same accent logic we know from creating palettes to creating a site's eases (images made with Adobe Color CC, and GreenSock’s ease visualizer)

Let’s say all of the easings on your site are more linear, and something you trying to attention to snaps or bounces onto the screen. That makes it stand out in significance. In the earlier demo, the only bounce ease I used was on the check, upon confirmation of success.

tl.fromTo(check, 0.2, {
    scale: 0,
    rotation: -30
  }, {
    scale: 1,
    rotation: 0, 
    transformOrigin: "50% 50%",
    // ease out with back ease which has a single exaggerated bounce
    ease: Back.easeOut
    // begin according to a relative label
  }, "done+=7.1");

This is only one example of this kind of logic in the whole interaction.

Drag and Drop

You learn more by doing. It’s an old adage, but an accurate one. Let’s use this old wisdom and apply it to our UX patterns with context-shifting in mind.

Rather than simply selecting an item and having it transition before the viewer’s eyes, interconnectivity between states of a UI can be reinforced very strongly when the user themselves are the ones that carry the action forward. Consider these very well done Drag and Drop Interactions by Mary Lou (Manoela Ilic) on Codrops.

She shows a plethora of ways this can be accomplished by the user for a variety of use-cases, each time, the interface quickly comes to greet the user, enforcing a fluidity of movement from one juxtaposition to another.

The drawers come out, and are put away when the user has finished their selection. It would be difficult to move any piece into a separate compartment without the user remembering that they have placed it there—much harder than if it had collapsed or simply vanished of it’s own accord.

Placement

You may find that you’re not as excited about animation as I am. Facilitation of seamless context-shifting can be still achieved without animation, but instead, with more calculated placement of objects. The clearest course is simply to place elements near one another. Here’s an example of this in terms of collapsing navigation.

This is has the potential to be much more complex than it sounds. With dozens or more links and interactions on a page, keeping the next state close to previous transition requires prior planning, and could mean design reorganization.

Any good UX user flow will consider the relative trajectory of a user navigating the site. This kind of organization should be something that is built on something like a Story Map where this is already taken into account. A placement-only implementation of context-shifting is least recommended, because it is less malleable as pieces of the UI become more like puzzle pieces, and because of their lack of fluidity, the placement of elements becomes more brittle.

Subtle Cues

Shifting from one view to another is not the only important context-shifting behavior. Some symbolize something that has happened and will happen. Small examples of this are:

  • A dropdown selection changing other contexts on the page
  • A loading state
  • A button being pushed
  • A login being rejected
  • A form being submitted but not having gone through yet
  • Something saving

When these type of changes occur, it might not make sense to have a grand change, but still signify that the state of the page has changed or is in the process of transitioning- creating a context in and of itself. Considering the techniques we spoke about earlier, we might ask ourselves:

  • Are we captivating the viewer during the transitional state, or is it simply a small means to arrive at the end state?
  • Will this transitional state be reused for other instances? Does it need to be designed to be flexible enough for multiple placements and failure conditions?
  • Does the movement need to express the activity? An example of this would be the user saving something that’s not complete yet, in which case an anthropomorphization of “wait” would help communicate this.

Asking questions like this before the design is implemented helps us discern how to communicate wordlessly with our audience.


Again, these techniques are stronger when combined. By writing this article I am not suggesting people only use what I outlined. Quite the contrary, context-shifting is a fundamental piece of intuitive interface design, and we’ve only hit the tip of the iceberg. The purpose of detailing each is to provide people a jumping-off point so that they feel they can experiment. User Interface designs become boring when they are redundant. There is a lot of space between humdrum hide and show and a confusing popup zooming around the screen. There is space for invention, where thoughtful design meets interactivity.