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

On this page you will find 2 videos of an older adult user, Cecilia, using an e-banking website provided by HP.   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 Cecilia’s preferences for having more help and tooltips regarding links and interactive content.

Use of the HP Application Before Adaptation

This video shows Cecilia logging into the e-banking website provided by HP.  This is the default presentation of the home page where she is presented with basic information about her account.  At approximately 1 minute into the video, she begins the task of checking the transactions on her account.  She begins by hovering the mouse over links in the page, bringing up very brief tooltips describing where the links go.  Navigation in older adult users was very selective in this fashion.  Users often would read and evaluate in detail each link and control on a website, and only navigate away from a page when they were confident of where the link goes.  This is very different from many mainstream people who will click often on links, and use the back button to backtrack. 

At approximately 1 minute and 45 seconds into the video, Cecilia begins the task of transferring money electronically to a friend of hers.  This is a common task that requires a lot of interaction on the part of the user entering information from, potentially, multiple sources.    In this case, Cecilia begins with the left navigation bar with buttons that do not traditionally have tooltip help information.  She needs to rely on the very short labels on the buttons to know where each will lead within the web application.  Cecilia reviews all of the buttons, even after finding a button labelled money transfer, a good candidate for the option for which she is looking.  Again, this was quite common in the selective navigation behaviour that was observed in the I2Web work with older adult users.

On the Money Transfer page, Cecilia is presented with a set of instructions on how to fill out the form to move money from her account to her friend’s account.  Unfortunately, while there are labels for the form fields and buttons, Cecilia is not confident in what she is putting into the fields.  There is an opportunity to provide more help to the user, but current websites do not typically provide additional help for individual form fields.

Use of the HP Application After Adaptation

Design adaptations featured in this video:

  • Addition of help tooltips for all interactive elements and links

This video shows Cecilia returning to the HP banking website, with it having been adapted to meet her preferences.  She has previously set up her preferences and logged into the website.

The first thing she notices is the yellow box in the upper right hand corner of the page.  This box explains that this new, adapted website has additional help for links and form fields that can be revealed by hovering a mouse over a question mark icon.  This builds on the existing strategy of using tooltips for gaining more information, but extends it, allowing much more help to be provided to users.  As an example of this, the very first question mark that Cecilia encounters provides an overall set of instructions to help her understand the layout of the site and the left hand navigation menu.  Similarly, she can get far more information about the navigation buttons on the left hand side than is typically provided in current web pages.

Cecilia is again trying to perform a money transfer from one account to another.  This time, with the additional information contained in the help positioned beside the Money Transfer button, she can confidently browse to the appropriate page.

When arriving on the Money Transfer page, the instructions this time are available in an on-demand fashion for each piece of the form that needs to be filled out.  As opposed to having to relate a large number of instructions at the beginning of the web page to the form that comes later, Cecilia is able to check each form field as she goes and understand how and why it is being filled out.  In particular, things like the IBAN number, and the description of the transaction are explained at the time they are to be entered.  While this design is primarily intended for older adult users, there are likely other users who also would prefer and benefit from this type of on-demand help.