Better User Experience with Auto Scrolling

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.

back to top 

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. 

Scrollbar fundamentals

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.

I believe it is important to retain these core values when we tamper with the default behaviour of the scroll bar with JavaScript. This means that care should be taken when developing an automatic scroll feature. 

Development Method

There are essentially two options a UX developer can take when building this control.
  1. Create a button which, when clicked, will ‘jump’ to the specified location on the document.
  2. 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. 

Automatically scrolling to a position on the document can pertain to any feature of a site which causes the scroll bar to be controlled by JavaScript.

Considerations

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?

Transition Duration

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.

Transition Easing

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.

Escape Clause

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.

Share:

Add your comment

 
 

 

Archive

Tagcloud

Digital Transformation employee engagement staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics intranet jquery QA Quality Assurance testing digital workspace content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage windows azure cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp SharePoint Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath