Web Design Adaptations Supporting User Browsing Strategies

On this page, you will find details about the web design adaptation work that has been undertaken in the I2Web project for supporting people with disabilities and older adults in Web 2.0 applications.  Here, we describe and demonstrate a set of design adaptations proposed by the I2Web project that will support users when they are surfing the web.

What are the I2Web web design adaptations?

In the I2Web project, we have proposed ways to change web sites that will better support the browsing strategies of people with disabilities and older adults when they are using Web 2.0 applications on different technology platforms.   Sometimes this involves inserting new information into a web page, such as adding summary about key content on a page, or the inclusion of more detailed information about links.  In other cases, it involves transforming existing content on the page, such as moving the search box from the common web convention of the upper right hand corner of the page to the left hand side.

These adaptations are designed to be delivered to individuals based on their preferences when surfing the web.  This way, users receive their own personalised experiences on the Web.

How did you come up with these adaptations?

In the I2Web project we observed 67 people using Web 2.0 applications on a variety of platforms (desktop, mobile phone and interactive television).  The participants were from across the user groups of people with visual disabilities, people with hearing disabilities, people with physical disabilities, people with specific learning difficulties and older adult users.  During the observation sessions we asked people to explain the types of strategies they were employing as they used the Web. 

After the sessions, we analysed the videos and categorised the types of strategies that people with disabilities and older adults use when surfing the web.  Then, using these strategies we have produced some adaptations to common web design practices that will support users in applying the strategies they already use when surfing the web. 

How would people get personalised web applications with these web design adaptations?

In the I2Web project we are developing a personalisation framework that will allow web users to specify the type of adaptations they would like to have on websites they visit and the types of technology they are using on the Web.  These different preferences will then be used to automatically personalise the website presentation and content.  In this way, each user gets the exact support that they would prefer on a website.

Do you have any examples of these adaptations I could see?

Yes we do!  We have prepared 3 examples of adaptations for different user groups.  Each of the following links will take you to a page with videos of the adaptations, a description of the videos and what they demonstrate and as some of the rationale behind the web design adaptations.

Web Design Adaptation Demonstration 1: A screen reader user with additional summary information

  • In this demonstration, Peter, a screen reader user, is browsing an online movie application provided by Polymedia on a mobile phone.  While the mobile phone does provide a screen reader, the functionality is not as advanced as those found on desktop computers.  As a result, Peter as little information about what is on the page and needs to spend more time exploring the page in a very step-by-step process to build up an understanding of what is on it. 
  • After the I2Web design adaptations are applied, Peter eceives summary information that lets him know what is on the page, helping him make decisions about what strategies to apply when browsing the page.

Web Design Adaptation Demonstration 2: A screen magnifier user with an enhanced and more narrow website theme

  • In this demonstration, Sam is a screen magnifier user trying to use an e-participation portal from Public-I.  She knows that she can view a council meeting, participate in chat and tweet on the site, but finding that information proves to be very difficult due to the length and width of the page.
  • After the I2Web design adaptations are applied, the page is changed so that the majority of the information is on the left hand side of the page.  This way, when Sam is searching the page starting from the left, she is more likely to find information that is relevant to her.  In addition, the page has been made more narrow, with links provided that will take her to different parts of the now longer website.

Web Design Adaptation Demonstration 3: An older adult user with additional help for interactive content

  • In this demonstration, Carol is an older adult user who is doing e-banking on a website provided by HP.  In the original design, she spends a great deal of time exploring links and other interactive content, such as forms, to determine what they do.  She is very selective about what she interacts with, only choosing links that she is confident will lead her somewhere useful.
  • After the I2Web design adaptations are applied, Carol now has extra help tooltips that will provide her with information about different links or other interactive content.  This additional information allows her to confidently work with the application.