Posted 17 March 2015 12:00 AM by Ian Jackson
Many websites adopt an auto scroll feature of some sort. This is generally a button or link which allows the user to jump to a different part of the document without having to manually scroll.
A ‘back to top’ feature is generally a button or link which is either placed at the bottom of a page or fixed on the page as the user scrolls beyond a certain point. It is a feature which allows the user to return to the top of the document when clicked. This is especially useful on pages containing a large amount of content.
Anchor links are clickable buttons/links which can take the user to another section of the page. This is usually seen in a large article page with a list of contents links at the top which refer to each section.
Both of these are examples of a scenario where the position of the scrollbar needs to be moved automatically.
The scroll bar is an integral feature of, not just browsers, but all computer interfaces since the creation of the first graphical operating system. They provide reassurance to the user that there is more content offered below the fold. They indicate the length of the content and also the section of the content the user is viewing. It also assures the user that they have complete control over the scroll position and that they are free to move up, down, left, or right.
There are essentially two options a UX developer can take when building this control.
- Create a button which, when clicked, will ‘jump’ to the specified location on the document.
- Create a button which, when clicked, will transition smoothly to the specified location on the document.
In this article I am going to focus on the latter option.
A transition effect is beneficial in this scenario as it allows the user to perceive the position of the page as it is moving and gives a sense of bearing and direction. If the page were to jump without a transition, the user will be confused - have we moved up, or down? Are we viewing a different page? What just happened?
This is the time it takes to scroll to the specific point on the page. It cannot be too fast or it will disorientate the user. It cannot be too slow or it will irritate the user.
The transition easing
is the property which describes how the animation will proceed over time. Does it proceed from point A to point B at a fixed speed or does it slow down as it reaches point B? In my opinion the transition easing function, much like the branding, should be consistent throughout the site and should match the character of the brand, i.e. you wouldn’t really use a ‘bouncing
’ or ‘elastic
’ effect on a corporate legal website.
The user should be able to resume control of the scrollbar if they so choose, and therefore cancel the auto-scroll if necessary.
Take a look at this example of a ‘back to top’ button. When we click the button, we briefly lose control of the scrollbar until the page is back at the top.
When we deny the user the ability to control the page freely, albeit small, we degrade the user experience, and devalue the appeal of the site.
To sum up
When developing an auto scroll feature, such as a ‘back to top’ button or a set of anchor links, a developer must consider using a transitional effect to allow a gradual scroll as opposed to a sudden ‘jump’. The developer must also consider the duration of the scroll transition, the easing of the transition, and must ensure the user has complete control at all times by allowing the scroll transition to be interrupted if necessary.