Navigating new UI: how to ease users into major changes

Dark and light geometric fragments clashing in the middle.
Generated with Dall-E.

Do you remember when Facebook and Reddit did massive UI redesigns and there was a massive internet backlash? Or maybe you were one of the many who stubbornly stuck with Windows XP when Windows Vista came out. Change can be difficult, but as products continue to evolve, sometimes drastic UI redesigns are inevitable. So how can designers introduce users to change with minimal thrash?

Screenshot of Old Reddit introducing the redesign.

Humans are creatures of habit and usually hate change. The well-studied psychological phenomenon known as the “Mere Exposure Effect” (or “Familiarity Effect”) can help us understand why this is the case. This effect suggests that people tend to develop a preference for things simply because they are familiar with them. In the context of user interfaces, this means that users often become attached to the current interface and may be resistant to major UI redesigns, even if the new version is objectively “better” in terms of performance or usability.

When it comes to making changes to the user interface, we often face the challenge of deciding between a major redesign or incremental changes. While incremental changes can be made through AB testing and experiments, a major redesign requires significant coordination and resources but has more potential impact. So, when should you choose one approach over another?

Generally, it’s recommended to choose incremental changes over a major redesign for most situations. If things are working well and there’s a reasonable baseline metric, small improvements through AB testing and experiments can be more effective than betting everything on a huge redesign.

There are certain scenarios where a larger redesign is warranted, such as fixing accumulated UX debt being more work than a redesign, the business undergoing strategic transformations, or when consolidating multiple products into one, etc. But before you go down that path, it’s important to ensure there is solid evidence that a redesign will achieve trackable business goals. Too often, designers jump to flashier changes without addressing the less-glamorous aspects such as content, information architecture, or interaction design, which are often the root of the problem.

A diagram showing global and local maximums and minimums.
A diagram showing global and local maximums and minimums. (Source: author)

You should opt for a major redesign if the gains from making incremental changes are minuscule or non-existent. If the current design is underperforming in certain KPIs compared to benchmark metrics, it could also signal that a radical redesign is necessary. For example, if the information architecture of an e-commerce site is broken, no amount of visual tweaks will help customers find the right products and checkout. In such cases, no amount of small tweaks will solve the core problems impacting those metrics.

In the case of deciding to go with a major redesign, there are three techniques: 1) progressive change, 2) highlighting benefits, and 3) tutorials and tour tips which will ease the transition for users to migrate to the new version of the product.

Gradual changes can be an effective way to introduce a new design and help users become familiar with it. By making gradual changes, users are less likely to feel overwhelmed and have a smoother transition. One approach to implementing gradual changes is by introducing changes to one part of the user interface at a time. For example, when redesigning the navigation menu, the first change could be a simple information architecture change involving relabeling and re-ordering navigation items before moving on to visual changes. As a guiding principle, I would avoid launching information architecture changes (moving a feature’s entry point) and visual changes together in one update. The difference in the experience would be too jarring, and the mental interaction costs of translating the old interaction model to the new one would put user retention at risk.

The principle of progressive change should also be adopted for introducing new features to users. Instead of publishing massive changes involving multiple new features, it’s much less overwhelming to introduce them one at a time (or as they become relevant for the user’s use case). By introducing these new features gradually, users can learn how to use them one at a time and become familiar with them before the next feature is introduced. This increases the chances of users fully using features relevant to them (rather than never discovering certain features buried in massive updates).

A new feature introduction popup from Dribbble.
A new feature introduction popup from Dribbble. Source

It should also be noted, if there is a larger UI redesign in the near future, introducing a new experience or a V2 with significant upgrades using the new UI is a great way to get users accustomed to the new interface. If the new experience is well received, there’s a high chance of users preferring it due to the ‘Halo Effect’, and opting into upgrading the rest of their interface.

Wix’s old UI.
Wix’s old UI. Source

An interesting example of progressive change is Wix’s evolution from the Wix Editor to Editor X. As part of their evolving product strategy, Wix built an AI-assisted website builder experience which came with a massive UI redesign that would eventually permeate the rest of the experience. Instead of forcing users to migrate to a new UI or forcing them to use Editor X, Wix gave users the option to try out Editor X while maintaining access to their classic Wix Editor UI.

“There is no price difference in using Wix Editor X or just the regular Wix Editor. However, the Wix Editor X interface is completely different. It will take you some time to learn all the new features and their capabilities.”—Wix Product Team

Therefore, in order to use Editor X with the new AI features, they had to interact with the new UI. However, since it was initially presented as a ‘new product’ rather than a ‘v2’, adoption was much smoother and users who became familiar with Editor X opted into refreshing their classic experience with the new UI as well.

Wix’s new UI in EditorX.
Wix’s new UI in EditorX. Source

In order to successfully introduce a new design or upgrade to existing users, it’s important to understand why people are resistant to change. Many people are satisfied with a solution that’s “good enough” (i.e., satisficing) and prefer to maintain the status quo rather than taking actions that may change their current situation (‘Default Bias’). Therefore, simply offering a choice between the “new” and “old (but good enough)” is not enough to encourage users to adopt the new interface.

BJ Fogg’s Behavior Model Diagram.
BJ Fogg’s Behavior Model Diagram. Source

To bridge this gap, we need to look at what motivates users to make a decision. The behavior model developed by BJ Fogg provides valuable insights into this. The model identifies three critical elements that drive behavior: 1) motivation, 2) ability, and 3) prompt. If any one of these elements is insufficient, the target behavior (i.e., opting into a UI refresh) will not occur.

A modal from Facebook asking users to opt into their new UI.
A modal from Facebook asking users to opt into their new UI. Source

When it comes to asking the user to upgrade to the new experience, the “prompt” usually comes in the form of a modal or banner. The “ability” requirement is negligible as it’s as simple as clicking the call-to-action button.

However, what ultimately determines whether or not users will upgrade is their level of motivation. This is the same reason why some people are willing to spend hours waiting in line for a coveted brand like Supreme, but wouldn’t do the same for a more mainstream retailer like T.J. Maxx. Even though the “cost” of waiting in line is the same, people are much more likely to take action at high motivation levels.

To increase users’ motivation to upgrade to a new interface, it’s important to communicate the value propositions that will be most relevant and compelling to them. The two most common and effective benefits are faster loading times and access to certain beta features.

However, it’s important to note that not all benefits are created equal. While things like improved information architecture or better alignment with the brand may be beneficial to the business, they are unlikely to be compelling reasons for users to upgrade. As such, it’s best to avoid mentioning these benefits and instead focus on the value propositions that users care about.

Providing a smooth onboarding experience to a new design is critical to ensure that users don’t become frustrated or confused when using the new version (this goes double if there are navigational or information architecture changes).

New feature tour tip from Slack.
New feature tour tip from Slack. Source

Transition experiences like tutorials or walkthroughs are standard approaches to helping onboard users onto redesigns. When introducing new features, video walkthroughs tend to be the best option for complex features with a skill curve, while progressive interactive tour tips are best for introducing simple features. To help users discover new features, it’s also a good idea to highlight new features using a blue pulse dot or a ‘new’ badge.

Examples of how to indicate a new feature in a side bar.
Examples of how to indicate a new feature in a sidebar. (Source: Author)

When moving a feature to a different location, it’s important to provide a redirect link at the old feature’s location for a period of time after launch. This is helpful as users who have not adapted might mistakenly navigate to the old location due to muscle memory. A great example of communicating navigational changes is Youtube’s ‘comments have moved’ snack bar. It’s located where comments used to be and provide a scrolling anchor that brings the users up to the new location of comments.

Youtube’s [Comments have Moved] redirect link example.
Youtube’s [Comments have Moved] redirect link example. Source

Another way to help users adjust to the new design is by providing temporary access to the old design. This is particularly helpful during the beta testing phase when you’re still fixing bugs and making improvements. By allowing users to switch back and forth between the old and new designs, they can gradually become more comfortable with the new version and eventually make the full transition.

Facebook’s [Switch to Classic Facebook] settings options.
Facebook’s [Switch to Classic Facebook] settings options. Source

Temporary access to the old design can also provide valuable feedback on what users like and dislike about the new design. By tracking where users switch back to the old design, you can gain valuable insights into what aspects of the new design users are struggling with. This information can be used to make further improvements and ensure that the new design meets users’ needs and expectations.

To wrap up, it’s important to keep in mind that users are generally resistant to major changes in interface design, largely due to the Mere Exposure Effect. If incremental improvements don’t suffice and a major UI redesign is necessary, it’s crucial to approach the transition with intentionality. To ensure a smooth transition, it’s recommended to 1) introduce gradual changes, 2) highlight benefits, and 3) offer tutorials to help users adapt to the new experience.

Read the full article here

Leave a Reply

Your email address will not be published.

Building West 14: An Accessible and Future-proof Design System for the DX Center

Building West 14: An Accessible and Future-proof Design System for the DX Center

Table of Contents Hide Developing ConsistencyAddressing

Bandit Running on Land-book – get inspired by stores design and more

Bandit Running on Land-book – get inspired by stores design and more


You May Also Like