6 Example webpages
6.1 Structure and Appearance Examples
This section demonstrates how webpage structure alters user experience.
6.1.1 Baseline
This Baseline Welcome Page follows the principles discussed in previous chapters.
It’s not intended to be perfect either in form or content, but to provide a baseline for comparison to the variations below.
Compare and contrast the structure of the baseline design to these first two examples:
6.1.2 Variation 1
6.1.3 Variation 2
The next two examples illustrate the effect of appearance on user experience:
6.1.4 Variation 3
6.1.5 Variation 4
Imagine we discovered that the most important things to users in order of popularity were:
- Student Life
- Library
- Research
How might we use this knowledge to improve our baseline webpage?
6.2 Font comparison
The next page compares five of 16 fonts previously tested on 350 participants to see how they changed reading experience.
The key findings were that the font does affect reading speed, but different people preferred different fonts, and font preference didn’t necessarily mean it was the fastest to read. Reading speed was most affected by age of the reader.
They cite a study that found using a font size of 18 point improved reading speed and comprehension, but this would be equivalent to 24px and 37% bigger than the text you are currently reading, so would have a big impact on the amount of text visible on the screen and the amount of scrolling required to read the text.
See which one you prefer and compare your preferences to the study participants.
6.3 Language Example
I asked Claude Sonnet to describe Rule 59 of the Highway Code. This was the response:
Rule 59 of the Highway Code provides guidance on proper clothing and protective gear for cyclists. It states the following:
You should avoid wearing clothes that could get tangled in the bicycle’s chain or wheels, or that might obscure your lights while cycling. This could include loose or flowing garments, items with dangling straps or cords, or any clothing that is overly baggy or ill-fitting.
The rule recommends wearing light-colored or fluorescent clothing during the day and in poor light conditions, as this can help other road users see you more easily. Reflective clothing and accessories, such as reflective belts, arm or ankle bands, are also advised for increased visibility at night or in low-light situations.
Additionally, Rule 59 emphasizes the importance of wearing a cycle helmet that conforms to current regulations and safety standards. The helmet should be the correct size and properly fastened to ensure a secure fit. Research suggests that a correctly fitted helmet can significantly reduce the risk of sustaining a head injury in certain circumstances or accidents while cycling.
In summary, Rule 59 advises cyclists to wear appropriate clothing that does not pose an entanglement hazard, choose visible and reflective garments for increased conspicuity, and always wear a properly fitted and approved cycle helmet to protect against head injuries.
Try interpreting this description to write Rule 59.
To illustrate the effect of language on user experience I created two versions of Rule 59 based on the actual text. Are they good writing? How would you describe them?
Vestiary accoutrements. One ought to eschew sartorial assemblages that may become entrapped within the continuous chain or rotational apparatus, or occlude the luminescent signaling devices during the act of cycling. Garments exhibiting a high degree of luminance or fluorescence can augment the perceptibility to other vehicular operators in diurnal and suboptimal illumination conditions, while attire or accessories (such as belts, arm bands, or ankle adornments) imbued with retroreflective properties can amplify one’s conspicuity in conditions of nocturnal obscurity.
It is advisable to don a cranial protective apparatus conforming to current regulatory mandates, exhibiting an appropriate dimensional correspondence, and securely affixed. Empirical evidence suggests that a properly fitted cranial shield can mitigate the risk of sustaining cephalic trauma in certain contingencies.
Clothing, you should avoid wearing garments that may become entangled in the bicycle chain or wheels, or that may obstruct your lights while you are cycling, thus posing a potential safety hazard. Clothing items that are light-colored or fluorescent in nature can significantly enhance your visibility to other road users under daylight conditions and in situations of poor lighting, whereas reflective clothing and accessories, such as reflective belts, arm bands, or ankle bands, can substantially increase your conspicuity and visibility in the dark, thereby reducing the risk of accidents or collisions.
Furthermore, it is highly recommended that you wear a cycle helmet that conforms to the current regulations and safety standards, ensuring that it is of the correct size and securely fastened to your head, as extensive research and evidence strongly suggest that a correctly fitted and properly worn cycle helmet can significantly reduce your risk of sustaining a head injury in the event of certain circumstances or accidents that may occur while cycling.
What makes this good writing?
Clothing. You should avoid clothes that may get tangled in the chain, or in a wheel or may obscure your lights when you are cycling.
Light-coloured or fluorescent clothing can help other road users to see you in daylight and poor light, while reflective clothing and/or accessories (belt, arm or ankle bands) can increase your visibility in the dark.
You should wear a cycle helmet that conforms to current regulations, is the correct size and securely fastened. Evidence suggests that a correctly fitted helmet will reduce your risk of sustaining a head injury in certain circumstances.
6.4 Accessibility
We already touched on accessibility throughout, but let’s just look at how to identify issues in practice.
Utah State University host WebAIM. They are separate from the official body which is part of the world wide web consortium W3C Web Accessibility Initiative (WAI), but have a long standing involvement with accessibility on the web.
I’ve created a deliberately inaccessible version of a Library homepage:
But we can also look at existing real webpages to explore accessibility issues. One of the easiest ways is to put the URL of our page of interest into the search box of the WebAIM WAVE page, or from the same page install the WebAIM WAVE tool into our browser and right-click (on Windows) to run it on any page.
Here’s a few to consider, but you could always pick your favourite pages:
- University of Southampton Library Homepage
- University of Southampton Library Academic Skills page
- University of Oxford Bodleian Library
- RNIB homepage
The point here is not to criticise anyone, but to illustrate the challenges in meeting the accessibility guidelines without any errors or warnings.