UX: Back button expectations

Native back button – at first glance it may seem like a straightforward feature, but many modern websites or apps do it wrong.

Let’s take a look what UX research has to say on the matter.

Since this blog focuses mainly on TL;DR content, let’s jump right to the summary:

Users expect the “Back” button to take them back to what they perceived to be their previous page. The notion of perception is the key factor here, since there’s often a difference between what is technically a new page and what users perceive to be a new page.

(…)

Ensure that any visual change the user will perceive as a new page is added to their browsing history, regardless of whether it’s technically a new page or not.

4 Design Patterns That Violate “Back” Button Expectations by Baymard Institute

For example what about a back button with modal windows? Should the native “Back” button move the user to the previous page or close the modal? In most cases, it will be the latter.

Fortunately, HTML5 provides a simple solution to achieve the result that users expect. When we open a view that users will perceive as a new page (the new view is visually different enough), we can add an entry to the browser’s history using history.pushState().

Further reading

• 4 Design Patterns That Violate “Back” Button Expectations – 59% of Sites Get It Wrong
• Overuse of Overlays: How to Avoid Misusing Lightboxes
• Should opening a modal box change the browser history?
• History.pushState()

Source: Smashing Magazine on Twitter

Share

Thanks for reading. If you liked it, consider sharing it with friends via:

https://www.damianwajer.com/blog/back-button/

Let's be in touch!

Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.

Don't you want to subscribe via e-mail?

See other ways to keep in touch.