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

On this page you will find 2 videos of a screen reader user, Peter, working with an online movie web application by Polymedia.  In the first video, the website is as it appears for all users on a mobile phone.  In the second video, the website has been personalised through a set of adaptations to meet Peter’s preferences for content and website presentation while using a screen reader on a mobile phone. 

Use of the Polymedia Application Before Adaptation

This video shows Peter using an online movie web application provided by Polymedia on a mobile phone.  The website is presented the same way it would be for any user, with a login form, a visual carousel, a set of headings indicating genres of movies available on the site, and links to individual movies.

In this video, Peter begins by registering for the Polymedia website.  He swipes through a number of unrelated pieces of content, looking for a way to register for an account.  In the default presentation, each time Peter goes to a web page, the screen reader announces that a page has loaded, but there is no further information about the page.  As a result, Peter has no information about what is on the page, and must rely on manual exploration to build up a mental picture about what is on the website.  In comparison, on a desktop computer, most screen readers would provide a summary listing the number of links and the number of headings along with other information.  This is often used as a cue by users to search through a list of links or a list of headings for important content. Without the summary information, Peter must go through the page piece of content by piece of content looking for information. 

Later on, Peter completed the registration process and is starting to look for the movie Green Lantern.  Again, with no information about what headings are available on a page, or even how many there are, Peter cannot use that information to choose an appropriate strategy for navigating the web page.  As a result, he goes through the web page sequentially looking for information.  On encountering the visual carousel and its controls, Peter notes that these are often not useful for screen reader users.  This points to an opportunity to personalise the content and controls for a screen reader user.

During the search for Green Lantern, Peter encounters two headings: one for romance, one for action.  With a summary being available at the top of the page, Peter could have used the strategy of navigating by headings to jump to those sections, and therefore reducing the amount of time he needs to spend swiping through the website.

Some minutes later, Peter starts playing the Green Lantern movie.  On the mobile phone screen is general rating information for the movie, but none of that information is provided in the audio track.  Peter spends about 5 seconds in silence, with no indication that the movie is playing.  Later, he comments on the lack of audio description, a content enhancement that describes in audio what is happening in the visuals of the movie.  Once again, this points to an opportunity where the system could have provided a personalised movie with audio description in place of the default movie.

Towards the end of the video, Peter tries to leave a comment on the video.  Again, Peter navigates sequentially through web content looking for a form to comment on the movie.  With some indication that there was a form on the page, Peter could have applied more sophisticated strategies to interact with the web content.

Use of the Polymedia Application After Adaptation

Design adaptations featured in this video:

  • Addition of summary information regarding the number of headings, links and forms on the page
  • Addition of a list of links that will permit the user to jump to important headings on the page
  • Removal of the visual carousel, replacement with a list of links
  • Addition of audio description enhancement on videos

This video shows Peter returning to the Polymedia website after the option has been made available for adapting the website to his preferences, specifically the inclusion of summary information at the top of the page.  Peter begins by adjusting his registration preferences to activate the personalised adaptations.

At the beginning of the video Peter begins browsing for the movie Sintel.  He finds that a summary has been added to the top of the web page about how many headings, links and forms there are on the page.  This summary information is followed by a list of headings that would allow him to jump to a particular heading he is interested in.  This type of navigation, where a user jumps from heading to heading, was often seen being used to gain an overview of the page as well as to understand the content contained under each heading.

In order to navigate by headings, Peter chooses to use the Apple iPhone rotor control to change the type of material he is navigating by on the page.  For each swipe that he makes after that change, he jumps by headings.  This substantially reduces the amount of content that he must navigate through to find the New Releases category of movie that he is interested in viewing.

Later, Peter discusses how the carousel has been removed.  This is an example of personalisation of the website structure where one type of control, the visual carousel, has been substituted with a list of links.  This personalisation removes the extra button controls from the website.  As there is no confusion over what the extra control buttons do, or what the strictly visual carousel control is trying to do for a user, Peter can confidently move through the list of movies looking for Sintel.

Then Peter begins watching the movie Sintel, which has a full audio description provided in the audio track.  Normally, this video would have no audio description, but by taking advantage of the personalisation preferences, and knowing that Peter is on a mobile phone using a screen reader, the content has been substituted for an enhanced version that is often preferred by people with visual disabilities.  Unlike a version of a movie seen in the default presentation of the website, there is no period of silence with text on the screen, and Peter knows immediately that the movie is playing. 

At approximately 3 minutes into the video, Peter begins using the rotor to search for a form on the comments page for the movie he has just watched.  On a page with no summary information, Peter would need to skip through a very large amount of information before finding the comments area of the page.  In this adapted prototype, the summary at the top of the page tells him how many forms are available, allowing him to again use the more sophisticated strategy with the rotor.