Web designer within the University of St Andrews digital communications team. A graduate of Abertay University (BA Hons Computer Arts, 2012), Lewis joined the digital communications team in 2013 during the re-design of the admissions website which lead to the new visual design for the University website. Lewis is a jack of all trades when it comes to design and media. You'll mainly find him burrowed in the depths of Photoshop meticulously crafting designs to pixel perfection.

Is parallax scrolling bad for your website?

You may be very familiar with the term “parallax scrolling” or you might just be hearing it for the first time, regardless, if you’ve browsed the web in the past four years you’ve certainly encountered it at some point.

Parallax scrolling is the effect in which the background of the website moves at a different speed to the rest of the page. CSS code allows different layers of the webpage to move at different rates. Just like every level of Super Mario World or Walt Disney’s “MultiPlane Camera”.

Parallax scrolling was a web trend that began in 2013. It gained traction after The New York Times released multimedia Pulitzer Prize-winning piece “Snow Fall” in 2012. It was pretty cool and different, but then it began to turn up everywhere, even in places where it is almost inappropriate.

This raises the question, is parallax scrolling bad for your website?

I’ll be making reference to quotes and findings from two relevant articles:

User Testing BlogParallax Scrolling: Engaging or Annoying? – Jennifer Winter

Smashing Hub5 reasons why parallax scrolling is bad for your website – Ali Qayyum

Parallax scrolling increases load time

To achieve the effect of parallax scrolling, the website requires additional computation for the jquery script. Pages with heavy amounts of content will suffer from longer load times while the script calculates where everything should be placed. For users with slower internet speeds, a parallax scrolling website will be seen as crawling.

“Although many users didn’t notice this themselves, I could see they were missing large portions of the content because they were scrolling too fast through the page.”

It does not work on mobile devices

Mobile is now without a doubt the most popular device used to browse the internet. Why invest time and effort implementing parallax scrolling when it doesn’t work on mobile devices? Including this design will lower the performance rate of your website, and in turn, the success rate for your customers.

“Only one user was able to load the page of one site, but the scrolling was so difficult the user gave up before completing the test.”

Parallax scrolling pages can be confusing

“Nearly all the users found the sites to be confusing and had a hard time grasping the point of the site.”

Excessive scrolling can be irritating for users, especially when there is added animation interfering the users success rate of completing a task. Adding more “shiny” to your website will not solve poor navigation design. Anchor links solve this problem on longer pages, and this is a solution we have implemented on our subjects pages.

Conclusion

We certainly have some long pages on the University website, notably our recently launched subjects pages, and our own long-form stories. But we have refrained from implementing parallax scrolling onto either styles due to the accessibility risks.

It can be easy to slap some parallax scrolling onto your website and say “look at how fancy our website is.” But that’s not what websites are about. It’s important to stay up to date with the latest web-trends in terms of accessibility, but it is less important to latch onto the latest design trends where it is not necessary.

Where and when should you use a hero banner?

Hero banners are great. They are perfect for conveying the mission statement of your website through strong visuals and a large tagline. They’re almost like billboards in the digital era, but they are one step better as they also have a call-to-action button that will complete the task you are probably on the website to carry out in the first place.
Continue reading “Where and when should you use a hero banner?”

Identifying your website’s Top Tasks

At the beginning of the month I attended a seminar hosted by User Experience expert, author, and speaker Gerry McGovern on measuring the customer experience with Top Task management for websites.


What is a Top Task?

The key to successful digital transformation is customer-centricity. Every website’s users have a small number of tasks they want to complete above everything else. These are regarded as Top Tasks.

Poorly-managed websites can become polluted with dozens (if not thousands) of worthless pages that are irrelevant to the user.

Websites are for answers, and identifying and improving the Top Tasks will help your customer success rate.

Top Task management is about streamlining your site by focusing on the content that matters most to your users.  The European Commission has used the system to great success.


Benefits from Top Task management

Do you think you know what your website’s key content is? Well, you might be surprised.

One of the Norwegian Cancer Society’s main key performance indicators (KPIs) is gaining donations. Gerry McGovern’s Top Task management model highlighted that the most important content for their visitors was information about diagnosis and treatment.

They implemented a new site structure that reduced the prominence of content asking for donations and instead helped visitors get to the content that Top Tasks had shown mattered most to them.

This resulted in:

  • 70% increase in one-time donations
  • 88% increase in monthly donors registered.
  • 164% increase in members registered.
  • 348% increase in incoming links.
  • 80% increase in visitors.

Looks like it worked out pretty well for them, so how do you go about identifying Top Tasks?


Identifying Top Tasks

Create a tasklist

Define scope for who your target demographic is and then create a tasklist. These tasks are similar to user stories. Here are a few tips on sourcing tasks:

  • Analytical data from your website’s top 50 internal and external annual searches.
  • Surveys and research on customers from the last three years.
  • Customer feedback from social media, blogs, and community forums.

Shortlisting and survey design

After identifying an appropriate number of tasks, they should then be shortlisted to a maximum of one-hundred user tasks. Ideally, 80% of the tasks shortlisted should be customer focused with the remaining 20% focused on organisation.

Three to eight people from a broad group of representative stakeholders should be involved in the shortlisting process. Genuine experienced people who truly understand the customer’s needs. The same group should be involved in all shortlisting meetings throughout the process. A broad group from different departments is beneficial when presenting the data to management at a later stage.

When composing the final list of tasks, avoid framing the instruction from the point of view of the organisations. Instead compose the instructions from the open perspective of the user.

For example:

  • “When you are choosing a university.”
  • “Select the five tasks that are most important to you when interacting with the University of St Andrews.”

Participants and voting methods

The aim of the survey is to gather as many participants as possible for a thorough representation of data. Ideally, 400 or more participants, with an absolute minimum being 100.

In order to achieve a high participant count, it can be effective to be intrusive with links to the survey. Pop-ups are an effective method, or banners with a link at the top of a webpage. Sending out a newsletter to a list of customers is also effective.

The survey can run for two to four weeks in duration.

Results

If your tasklist was thoroughly prepared the final results should display a logarithmic trend.

Commonly, 25% of the accumulative votes will highlight tasks by level of priority.

European Commission: 77 tasks – 107,000 voters

The top tasks have been identified, and the data / evidence can be presented to management as proof of what the customer truly needs to use the website for.


After identifying the Top Tasks, a thorough re-design process can then begin. But the process doesn’t end there. The customer success rate must be measured through a series of task performance indicator tests.

But, that’s for another blog post.

It’s time to make your site retina ready

Some members of the digital communications team have updated their hardware. Right now, I’m rocking around the internet using a 2K “built-in retina display” monitor and the best comparison I can make to how it feels is when you put new prescription glasses on for the first time. The clarity is remarkable. However, viewing the internet from this perspective has changed the way I see the University’s website. Continue reading “It’s time to make your site retina ready”

Keep your social media content relevant to your audience

Whether personal or corporate, social media channels develop their own voice and tone. Audiences don’t want brands talking to them as if they were dollar signs. They subscribe to channels with an expectation of authentic communication.
Continue reading “Keep your social media content relevant to your audience”

5 of the best international calling and texting apps

a14b743986a48664b7445f2eb23d7c50

Ring, ring. Remember these things? You probably don’t since they were so last century.

Smartphones have completely revolutionised the way we communicate with one another over the past decade, subsequently rendering cord-tethered landlines a thing of the past — for better or worse.
Continue reading “5 of the best international calling and texting apps”

Implementing UniStats’s KIS widget into our design

What is the KIS widget?

Unistats is the official site to search for, and compare, data and information about university and college courses from across the UK. Key Information Sets (KIS) are comparable sets of data about full or part time undergraduate courses catered to meet the needs of prospective students.

KIS data is published on the Unistats website and can be accessed via an ad banner on the course web pages of universities and colleges. You can see the KIS widget on the St Andrews course search pages, such as this Art History one – just click into the ‘Overview’ section.
Continue reading “Implementing UniStats’s KIS widget into our design”

Skype vs FaceTime vs Google Hangouts

In this digital age, we sometimes forget that we’re living in a sci-fi future where calling someone via videophone is now a normal everyday occurrence. Video calling services have been improving over the past decade and the rise of mobile devices and 3G / 4G internet connectivity has made them more accessible.

Continue reading “Skype vs FaceTime vs Google Hangouts”