5 things to consider when adding movement to a website

Websites are all about getting people to find and interact with content as quickly as possible. But how do you encourage people to engage with certain pieces of content above others? Some websites choose to do this by adding movement to the content.  Whether it’s the latest news stories or the most recent tweets, animating these features on your site is one way of attracting attention and making them stand out above other content on the page. Many sites nowadays include scrolling news tickers, automatically playing videos and flashing advertising banners to attract our attention. While some of us find continuously moving content annoying and may use browser add ons such as Firefox’s Adblock Plus to block this type of content from the page, consider that for some people movement on a website can be so distracting, it can prevent them from reading any content on the page at all. Many people with disabilities often need more time to read and interact with content on a page. When that content animates automatically and people are not able to control it, it can make reading it far more difficult and in some cases impossible.

Is the movement really necessary?

Movement on a webpage can include, but is not limited to items which move, rotate, scroll or blink. Typical types of moving content include scrolling news tickers, animations, presentations, carousels, accordions, multimedia, games and auto-updating content. There are many people that have difficulty reading stationary text. Adding movement into the equation may often prevent people with poor literacy skills or those with reading or learning disabilities from reading the content on a website at all. Moving content can have an impact on a person’s concentration levels as well. Some people with attention deficit disorders or Asperger’s syndrome may find movement on a web page so distracting that they cannot focus or concentrate on other parts of the web page. People using screen readers may also experience problems when encountering moving content on a page. Consider a continuously rotating carousel showing the latest news stories for the day. The headline of each news story is shown on screen for 5 seconds before the carousel changes to show the next story. In this type of scenario, there may not be enough time for the screen reader to read out the full headline before the carousel rotates to show the next news story. For the person using the screen reading software, this can be a frustrating experience as they are not able to reach the information they know is available to them on the page. While moving content can be an issue for some people that is no reason to completely exclude it from your website. Excluding movement altogether is one option available to you, but there are several options to consider to make sure movement on your website is suitable for everyone.

1. No movement

It may sound obvious but the simplest thing you can do is make sure your content doesn’t move, blink, scroll or rotate. If you are thinking about adding moving content to your site but you feel it might be too distracting for some people, then the best thing to do is have content without any movement.

2. Set an appropriate time limit

People read and process information at different speeds. Keep in mind that people with reading difficulties such as Dyslexia may take longer to read and interpret the content on a web page than others. When movement is factored into the content, these people may need much longer than usual to read and fully understand the content on display. People with limited dexterity may also find interacting with moving content difficult. Auto-updating content which updates and then disappears off screen at a set time limit can be particularly problematic. There may not be enough time for people to read the information and select links or buttons within the content before it disappears from the page. If you have continuously moving content on your pages such as a rotating news ticker, ensure that the time limit between each rotation of that content is suitably long enough for people to read and interact with it. The time limit required depends on the length and complexity of content on the page, so it’s up to you to set an appropriate time limit for your content. If you are not sure that the time limit is long enough, try asking different people to read through your content to find out if the time limit for reading is comfortable.  You will soon find out if it isn’t. Alternatively you may want to allow people to adjust the time limit set on the content so they can read it in their own time. You could do this by either:

• allowing people to adjust the time limit by providing the functionality to increase or decrease the amount of time between each rotation of content.

OR,

• providing controls to allow people to pause or stop the content long enough for them to read it.

As a third option you could allow your content to move for a limited period of time before bringing it to a stop. Using the news ticker as an example, the ticker could move through each news story twice before coming to a stop. In this way the movement on the page is only present for a short period of time. Once it stops people with attention deficit disorders and other conditions affected by movement should be able to use the rest of the page without issue. Be aware that sometimes it isn’t possible to change or disable time limits on moving content. For real time events or auctions, disabling time limits or extending a time limit may not be possible. In these cases, providing an archive of the information after the event is a way of allowing people access to the content. You would need to make sure that any movement in the archive can be controlled easily by using one or more of the methods mentioned above.

3. Provide controls

For any moving content on your web pages, the best solution is to provide controls allowing people to turn the movement off if it becomes too distracting. Allowing people to stop or pause moving content on your web pages is the best way of making sure everyone can access this type of content without issue. Providing controls such as play/pause, next and previous will allow people to read through your content in their own time. The type of controls you provide will depend largely on your content, but giving people the ability to play/pause or stop the moving content is usually sufficient. The BBC news ticker is one example where controls have been provided to allow people to pause the moving content if needed.

4. Don’t start it automatically

Ideally movement on screen should only occur when it is requested by the person browsing the page. Content should not move automatically when the page first loads as some people become transfixed by the movement and cannot concentrate on other parts of the page. Again, whether you choose to implement this advice will depend on the type of content you wish to display, however it is particularly important when it comes to including video on your pages. Video content should not play automatically when the page first loads to avoid distracting people unnecessarily. Keep in mind that not only is movement in a video distracting, but automatically playing audio in a video can be disruptive for people using screen readers. If audio automatically plays when the page first loads, people using screen readers may not be able to hear their screen readers over the audio content on the page. This could make it difficult for them to interact with the page. If you do include video on your pages, make sure that the video:

• doesn’t start automatically when the page loads;
• has suitable controls such as play/pause;
• clearly indicates that people can interact with the video. Including a large play button and a still of the video content as part of the media player interface will help to get this message across.

5. Turn off the movement or provide an alternative version

You may find it isn’t possible to give people fine control over moving content on your site due to the limitations of your technology. Financial and practical implications may also play a part. If this is the case, you could provide a feature on your site to disable the movement on the page. This could be a small control either at the top of the page or as near to the moving content as possible, which would allow people to turn off the movement if required. If you have several different areas of moving content, you could provide one single control to turn off all movement, or provide separate controls for each piece of content where appropriate.

As a last resort, you can of course provide an alternative version of the content without movement. This could be as simple as a linking to a page containing the same content but without the movement aspect.

Conclusion

If you are thinking about including movement on your website, keep in mind the following point:

• Is it really necessary for the content to move?

If the answer is yes, make sure that there is:

• An appropriate time limit on the content to give people enough time to read it;
• The movement doesn’t start automatically;
• There are controls provided to pause or stop the content from moving;
• Alternatively, turn the movement off or provide alternative content without movement.

Content that moves continuously can be distracting and annoying for a number of people, however movement can also help make areas of your pages stand out and introduce an element of fun into your website.  Understanding the problems experienced by some people when interacting with moving content will go some way to help you avoid those issues. Ultimately the type of moving content you wish to display, your technology and the skills of your web team will determine what is and isn’t possible for your website.

If you would like Nomensa to help you with your website build please don’t hesitate to get in touch.

Take a full look at the web development services that we offer.