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

On this page you will find 2 videos of a screen magnifier user, Lara, working with an e-participation website by Public-I.  In the first video, the website is as it appears for all users on a desktop computer.  In the second video, the website has been personalised through a set of adaptations to meet Lara’s preferences for content and website presentation while using a screen magnifier.

Use of the Public-I Application Before Adaptation

This video shows Lara coming to the Public-I website to try to find a webcast of a local council meeting in West Sussex in the UK.  She begins by scrolling down the far left hand side of the page looking for useful landmarks.  Panning vertically and then horizontally is a common strategy used by screen magnifier users to gain an overview of a web page.

When Lara returns to the top of the page she scrolls across horizontally.  When she starts on the left hand side, there is a menu available with a black background.  However, as she scrolls, the menu text disappears and the magnifier is filled with a very long, solid black line with no information.  She eventually reaches the far right hand side of the page, where the search box is presented. 

At approximately 1 minute into the video, Lara begins to describe some of the challenges of working with a screen magnifier after arriving on the page with the webcasts.  Similar to the black line discussed above, there are large portions of the page that appear blank in the screen magnifier.  Many users, when encountering large amounts of a page with no information will stop scrolling horizontally and miss what is on the far right hand side of the page.  Similarly, some users will simply give up and return to a known location, like the upper left hand corner of the page, to try to gain some understanding of where they are in the page. 

At approximately 1 minute 45 seconds into the video, Lara beings trying to work with the webcast.  She scrolls down to the bottom of the page looking for further information, in particular links to jump to different points of the video.  When she reaches the bottom of the page without finding anything, she must move the magnifier all the way back up to the video, which now is a long way to go with the smaller view provided by the magnifier.

At 2 minutes 45 seconds into the video, Lara finds the index points for the video and starts trying to interact with them.  She scrolls down the index points, which provides her with an overview of the meeting.  After finding the item she is looking for, Lara clicks on the link but nothing seems to happen.  What has happened is that the video has started playing at a particular time point.  Lara does not know this because even though she has successfully navigated the list, the associated time for each index point is hidden off the screen to the right.  It is not until Lara clicks for the second time that she begins to explore and finds the video has changed position.  Even after searching, Lara never finds the times for the index points because she does not go far enough to the right.

At approximately 3 minutes and 25 seconds into the video, Lara begins to search for the chat functionality that she encountered previously, but cannot remember where it is located on the page.  She scrolls down the page, and finds the Twitter feed, but not the chat box.  In fact, the chat box is in the lower right hand corner of the page, an area that very few screen magnifier users go.  Because Lara goes along the bottom of the page and then up into the content, she almost misses that she has found the chat functionality, mistakenly thinking that it is part of the Twitter feed that is also on the page.

Lara comments that she is going to try to stay in line with the heading so that she can keep track of the content.  What she means is that she is trying not to scroll to the left or right, and risk losing the edge of the chat box.  Items that are on the far left side of the page have the edge of the desktop to act as a barrier to align the magnifier and prevent further movement, but in the middle of the page there is no such barrier. 

Added to this is the problem that Lara demonstrates at 4 minutes and 50 seconds into the video.  She shows how difficult it is to find the webcast and then return to the chat box.  This long scrolling, with nothing to use as a barrier for the magnifier and nothing to support the user in getting to different sections of the website, makes it very difficult for Lara to participate in the chat about the video stream.

Use of the Public-I Application After Adaptation

Design adaptations featured in this video:

  • Transformation of presentation so that the webpage is closer to size of the viewport
  • Reduction of horizontal spacing between pieces of related information
  • Transformation of layout so that sections of content are vertically presented in one column
  • Addition of skip links at the beginning of the website
  • Addition of list of heading links
  • Addition of Back to top links after each section of content

This video shows Lara returning to the Public-I website, with it having been adapted to meet her preferences as a screen magnifier user.  She has previously set up her preferences and logged into the website.

Immediately after login, Lara comments on the material that is in the upper left hand corner of the page.  The account information and login and/or logout information is now compressed and positioned in the screen magnifier view.  This is the first major change that has occurred to support her browsing preferences.  Due to many screen magnifier users working at the left edge of the screen, the information for key tasks such as login and/or logout have been moved so that they are immediately visible in the magnifier.  This provides good feedback to a user, letting them know they have been successful, without having to scroll.

Below that information, Lara encounters a set of links that allow her to jump to different portions of the page.  These skip links would not normally be included on a web site, however, as a screen magnifier user, Lara now has the option to jump to particular sections of the web page.  These skip links are an extension of traditional hidden skip links that only allow screen reader users to skip to the main content of the website.  Lara uses one of those skip links to take her to another detailed set of links about the headings on the page.  This structured navigation within the page reduces a screen magnifier user’s need to scroll around the page looking for key information.

At approximately 1 minute and 15 seconds into the video, Lara is on the page where the webcasts are located.  She uses the heading list to jump to the webcast and is able to very quickly start the webcast playing.  When she scrolls to the right, she discovers it is a much smaller distance to navigate horizontally to find the index points to the right of the webcast.  The page has been narrowed to more closely fit the viewport of the screen magnifier.  Further, she can now see the times clearly associated by row with the index points for the video, giving her important cues as to what will happen when she clicks the link.

At approximately 2 minutes and 45 seconds in the video, Lara again uses the heading list to jump to the  chat section of the web page.   The chat functionality is now flush with the left edge of the desktop, so the screen magnifier stays over the appropriate location without any extra effort on Lara’s part.  The reduced screen width also shrinks the extra white space around components and allows Lara to make the connection between the “Send” button and the text box where she typed her message.   Finally, one of the most important adaptations is the inclusion of the “Back to top” links in the web page that allow Lara to return to the top left hand corner of the page.  These ensure that Lara does not have to scroll through all of the content in the, now quite long, vertical column.