As described in Sect. 2, there are a large number of design guidelines available on how to make websites and web applications easy to use for older users. Many of these guidelines are supported by empirical data. However, we wanted to make the case for particular patterns of dynamic adaptations that could be run automatically to make web forms easier to use for an elderly individual. These should be applicable even when the author of the web form did not consider the needs and preferences of older users at all. Therefore, we decided to prototypically implement a selection of four substitution/augmentation patterns of which most are based on or related to existing guidelines (see Sect. 2). The prototype was implemented with Axure RP.Footnote 2
In a study with desktop computers, we tested these patterns on acceptance for older adults. We had a total of 15 subjects (4 women, 11 men), aged between 64 and 84. We asked them for their experience with computers and the Internet. 10 subjects had already used computers in their workplace, 13 had used emails for communication, and 9 had already ordered a product in an online shop. During our observations, we noticed that 10 of the subjects used the tab key to navigate between input fields, which is an indication that they were quite familiar with the web and its forms.
Every subject got the same set of tasks:
Search for a specific product (sweater or t-shirt).
Put two pieces of the product in size “M” into the shopping cart.
Proceed with the payment process.
Enter name and address for delivery.
Pick a delivery method.
Pay with a credit card (a “faked” MasterCard was given to the user for this purpose).
In this set of tasks, we exposed the participants to four patterns of user interface adaptation, each coming in two versions (see subsections 4.1–4.4). For example, we had them order a sweater, whereby they had to choose the size from a drop-down menu (version A). After that, they had to order another sweater, this time selecting the size from a set of push-buttons with graphical symbols and letters for the different sizes (version B). We varied the order of version A and version B between subjects to counter-balance possible learning effects. At the end of the test, we collected feedback from the users on the different versions of the patterns.
The following subsections describe the patterns and the pertaining results of the empirical study.
4.1 Drop-Down Menu vs. Push-Buttons
In general, expandable menus that require a user action to open are often considered an issue for older users (see Sect. 2). This can be attributed to dexterity issues and cognitive difficulties. The menu choices are hidden and become only visible after clicking on a small button at the right of the drop-down menu field. Obviously, this is also an issue for users of touchscreen devices since it is hard to hit the “open menu” button with the finger. Also, if the user is not familiar with a drop-down menu, they may not know how to open it.
In our study, we contrasted drop-down menus with text items to sets of push-buttons, for selection of size and number of shopping items. In the choice of size, we also added the letter “S”, “M” or “L” on top of the symbol to make their meanings more obvious (see Fig. 1).
The seniors’ feedback was not completely uniform. Some commended the ease of recognizing and selecting the pictograms in version B, whereas others – being aware of their computer expertise – thought the pictograms were inappropriate and made them feel like analphabets or children. Also, some wanted to have a text input field for the number of items, so they would not be restricted to the values 1, 2 and 3.
4.2 Make Images Available in Enlarged Format
In many online shops it is already customary to have high-resolution versions of images available upon demand (often triggered by clicking on a magnifier glass icon in the upper left of the image). While the image file may only be available in low resolution – if the author of the web page did not bother to provide different versions of the image – a system could always add an “enlarge image” function at runtime. Once activated, this function would display the image on a larger area by stretching (e.g. in a popup window, see Fig. 2). For many users – in particular those with low vision – the fact that the large image version is not rendered in high resolution would be a minor problem, as long as the image is enlarged.
Most participants found that the possibility of enlarging the product images improves the website’s ease of use. Many senior users were already familiar with this functionality due to its widespread use in online shops. Some even wanted to have multiple views on the items, e.g. from different perspectives, or have selected areas of the image magnified.
4.3 Validation on Submit vs. Validation on Input Field
Clear and descriptive error messages are an important aspect of senior-friendly websites (see Sect. 2). A related aspect is the timing of warnings in case of invalid form input. The user may be alerted to validation errors only after they have filled out and submitted the complete form (pattern version A), or they may get a message right away when they have left an input field with invalid content (version B). Figure 3 shows our prototypical implementation of this pattern, in both versions.
All participants were either pleased with the validation of input fields upon focus change (version B), or had a neutral opinion. One user appreciated the direct feedback – or better in this case the absence of a negative feedback – as a kind of reward for a doing a good job. The validation upon submit (version A) caused confusion for some elderly users since they did not immediately understand what the problem was and what they had to do to be able to move on.
4.4 Display of Help Text
Help texts for web forms can be presented to the user in various ways. Some websites display hints and help texts openly, others on the press of a button. Recently, some websites have provided hints as “placeholders” in input fields, but unfortunately a placeholder text disappears as soon as the user sets the focus in the field. On the other hand, hints and help texts may clutter the screen and distract the user (see Sect. 2).
In our fourth pattern, we implemented two versions of help text display for input fields. In version A, the help text appears below the input field when the user clicks on a button with a question mark (‘?’). The button is placed to the right of the input field. The help text disappears again when the user leaves the input field. In version B, the help text is shown automatically when the user sets focus to the input field, and disappears when the user leaves the input field (see Fig. 4).
Most users did not notice the help texts, neither for version A nor for version B. When asked for feedback, they deemed the input for name and address fields as trivial and not requiring any hints beyond the label. However, they appreciated help for more complex input fields such as the expiration date of the credit card. Here, they wished a permanent display of help text that would not disappear when moving away from the input field (as opposed to both versions implemented in our prototype), e.g. in the form of a long label.
4.5 General Observations
Aside from the assessment of the four patterns for user interface adaptation, the study brought about some other findings that could potentially be used in automatic user interface adaptations.
In general, participants had problems in recognizing that they needed to scroll vertically to get to the screen elements “below the fold”. This problem is a common finding and reflected in various guidelines (see Sect. 2). An adaptation system could automatically break up one page into multiple pages to avoid the need for scrolling.
A related problem occurs when – upon a submit operation – error messages are displayed in a part of the screen that is currently not visible due to scrolling. This could be avoided by automatic scrolling or – even better – by validating upon leaving an input field rather than upon submit (cf. Sect. 4.3).
When filling out web forms, many participants used either all-capital characters or all-small characters in their typing. An adaptation system should be tolerant to this practice, and could further automatically correct the character case where appropriate.
The division of first name and surname into two input fields was unnatural for some participants. They entered their full name into the field for the first name, and noticed their mistake when they got to the next input field (requesting the surname). The same occurred with the input fields for street name and house number, and with the input fields for the expiration date of the credit card (month and year). An adaptation system could recognize these user input mistakes and automatically split the input and distribute its pieces into the appropriate fields.
On typing their email address, many seniors typed a comma (‘,’) instead of a dot (‘.’) due to vision and dexterity problems. This mistake could also be automatically corrected.
For the credit card, some participants entered its number in blocks of 4 digits, with spaces between the blocks. In fact, this allows for easier reading and double-checking of the number. An adaptation system could offer separate input fields for each block, and automatically jump to the next block when a block is full.
A frequent issue for the senior users was the entry of the 3-digit card validation code which they were not familiar with. An adaptation system could provide additional guidance for this input field on request, for example by a photo explaining where this code can be found on a real credit card.
Some participants did not have an email address. Therefore, an alternative contact for clients should be offered (e.g. a phone number), and the email address field should not be a mandatory field. While this problem cannot be easily fixed at runtime, it could be part of guidelines for web authors.