Usability, Accessibility, and the Web
Introduction to the main concepts
Volker Sorge
University of Birmingham, UK
cs.bham.ac.uk/~vxs
MathJax Consortium
mathjax.org
Progressive Accessiblity Solutions
progacc.com
Overview
- Usability
- Introduction
- Usability of software
- Universal Design
- Universal Software design
- Documents, Accessibility and Design
- The Web
- Documents vs the WEB
- General understanding how the web works
- Defining Usability and Accessibility
- Separation of Concerns
Usability
- Usability according to Wikipedia is the capacity of a system to allow users to perform tasks
- safely,
- effectively, and
- efficiently
- while enjoying the experience.
Unfortunately,
- Functionality is often easy to achieve
- Making it usable is much harder
General Usability
- Example: Light switch
- Find it and switch the lights on (or off)
General Usability (2)
-
Example: Light switch
- safe: If there are no life wires!
- effective: Does it switch the light on/off?
- efficient: Can I find it in the dark?
- enjoyable: maybe if you have a dimmer...
-
Just inserting a switch in a circuit is easy
-
But it is important to put it somewhere reachable, safe, operable by anyone regardless of size, strength, age, etc.
Particular Unusability
- Example: Elevator Panel
- Find your floor and get there
- ... if you can
General Unusability
- Example: The Microwave Panel
- What are all these buttons for?
Achieving Usability
- Usability for one is unusablity for another
- Try to find a common ground
A product should be usable by everyone regardless of age, disability or special needs
- General Principle of Universal Design
- Particular aspect is Accessibility
Accessibility
Usability for users with special needs
👁 Visual: blindness, low vision, impaired vision, distracted vision
👂 Aural: deaf, hard of hearing, distracted hearing
🖐 Movement: limited use of extremities, slow reaction time, limited fine motor skills
🧠 Cognition: Dyslexia, Dyscalculia, Distraction, Memory deficits
We are all not fully able at some point in our life
Software Usability
Traditionaly Usability has been equated with Accessibility. In software it is an important concept for all!
- effective: Is it servicable for what I want to do?
- efficient: Does it help me to do my task or does it get in the way?
- enjoyable: The first two often define this!
- safe: How severe are mistakes?
Additional aspects
- learnability and memorability
- Do I need a certificate to understand the software?
- Do I have to relearn after not using a system for a while?
Importance and misconceptions
- Usability has to look good
- Design is not equal to aesthetics
- Usability cannot be measured
- Not true. E.g. Fitts's law for average time to complete a task with point-and-click
$$ T=a+b\log _{2}{\Bigg (}1+{\frac {D}{W}}{\Bigg )} $$
- Usability is expensive
- Maintaining a poorly designed system is more expensive
- Loosing user is loosing customers
- Law-suits cost money!
Designing for everyone is important!
Fitts's law variabls Explanations
- T is the average time taken to complete the movement.
- {\displaystyle a}represents the start/stop time of the device and
- {\displaystyle b} stands for the inherent speed of the device.
- These constants can be determined experimentally by fitting a straight line to measured data.
- {\displaystyle D} is the distance from the starting point to the center of the target.
- {\displaystyle W} is the width of the target measured along the axis of motion.
- {\displaystyle W} can also be thought of as the allowed error tolerance in the final position, since the final point of the motion must fall within
- {\displaystyle \pm {\frac {W}{2}}} of the target's centre.
Universal Design
A product and a process
- Design that is usable by all people
- Not always possible!
- Design that works for as many people as possible
- Design to extent the reach of your product to a wide audience
- Design that does not need for adaptation
- Do not design special cases, add-ons, extra layers, etc.
Universal Software Design
Things to consider:
- Input
- Output
- Presentation
- Interaction
- Workflow
- Functionality
- ...
UD: Input
- Common input devices:
- Key-based: Keyboard, keypad, panels.
- Point-and-click: Mouse, trackball, pen
- Touch-based: Mobile devices, touch-screen laptops, smart boards
- Less common:
- Microphone
- Data glove
- Eye tracking
- Breathing tube
- What if a combination of devices is not possible, e.g., Keyboard only
UD: Output
- Common output devices
- Visual: Screen, printers
- Audio: Sound,
- Data: Networks, disks, memory sticks
- Less common
- Tactile: Braille display, embosser
- Haptic: Force feedback, data gloves
- Is there some way to support all at once?
UD: Logic
- Presentation is increasingly important but changes every day
- from menus to smart icons
- from lists to directories to tabs
- mystery meat of mobile navigation
- Presentation affects interaction (see Fitts's law)
- Workflows for novices, experts, tech savvy or not so
- All this should still be functional!
- Often Restricted by combinations of Input and Output modalities
Approaches to Universal Design
- Design the core product to be usable by main stream users
- Identify the shortcomings and hurdles
- Gradually add solutions for those
- Extend the reach of the software
This is a very poor approach
- Software maintenance often prohibits steps 2-4
- 3-4 will always lack behind in functionality
- Some solutions are often impossible to retro-fit
- Example: PhosphorJS library in JupyterLab
Good Approaches to UD
- Think about all the users that can benefit from your product
- Consider as many corner case as possible
- What are the requirements for your software to satisfy these?
- Where do you need to make allowances for different needs?
This is an inclusive approach
- You design "outside in"
- Leads to a general, flexible core
- Needs experience, knowledge and time!
- Examples: Plug-in architectures like Jupyter, Emacs, Visual Studio
Software UD: Dos and Don'ts
- Design your data structures as general as possible
- Use a clear separation of concerns
- Make full use of multi-tier designs, object oriented paradigm
- Input and output are never part of the core logic
- Avoid premature optimisation techniques
General Mantra:
- Special needs should not require special systems
- In fact features designed for the few can benefit the many
Examples: Specialist Support for Mainstream
- Voice output: designd BVI community
- Everyone listens to audiobooks, home assistants, etc.
- Voice input: designd for motor impaired people
- We all talk to our assistants, SatNavs, etc.
- Subtitles: Originally designed for DHH community
- Many watch with CC by default
- Large fonts, Screen magnification, Dark modes, High contrast, ...
Usability and Accessibilty
- So what about accessibility
- Accessibility can be defined as the usability by all regardless of their special needs.
- Barrier-free documents = universally designed documents
Universal Design and Documents?
- What does all this have to do with documents?
- Modern documents are effectively software artefacts
- Their design can lead to barriers or remove them
- Next we apply all this to documents and then to the web
Usability of Documents
- What is usability of a document?
- Roughly speaking:
The design or container of a document should not get in the way of its purpose:
- Reading
- Writing
- Communicating
Traditional Documents
Examples:
- Books
- Hardcover vs paperback
- Newspapers
- Broadsheets vs tabloids
- Design
- Primary school Math book vs University textbook
Usability is still (relatively) straight forward
Accessibility of Traditional Documents
Different formats for different needs
- Large Print
- Embossed Braille
- Audiobooks
- ...
Difficult and expensive
Electronic Documents Timeline
- The past: Formats aimed a printing
- Postscript (1984)
- RTF (1987 - 2008)
- PDF (1993),
- The present: Flexible formats for all form factors
- various proprietary Wordprocessing languages
- SGML(1986)
- HTML (since 1993)
- eBook/EPub (1999)
- Various extension, additions, refinements
- The future: ???
- For now, still the web
Electronic Documents Today
- Documents are becoming functional
- Functionality is implemented via documents
- The boundaries blurring
What does that mean:
- Document usability is harder
- Accessibility should become easier
- Unfortunately that is not really true!
What is the Web, really
We don't know yet. Compare it to Gutenberg, say, 100 years later.
- Poor layout compared to codex
- No new forms yet (e.g., novel)
- But illegal copying
- cheap pamphlets
- causing social unrest
The Web is very new
- Very young, around 30 years old
- Still finding our way
- New media pop up every day
- Some similarities to print
- It forgets even less!
The Web as Throwback
- A vertical medium (scrolling)
- Rich decorations (rubrics and illumination)
- Pictographics (emojis vs hieroglyphs)
The Web as Progress
- Content
- Ubiquituous
- Democratic
- Ephemeral
- Adaptive
- Interactivity
- Personalisation
The Web vs Control
- Pagination vs Reflow
- render ⟹ deliver vs deliver ⟹ render
- width/height fixed vs varied width/infinite height
- content position vs content order
In practice: Pagination vs Reflow
Reflow
The web gives varying widths, infinite height.
"Direction" of reflow design (small <=> large viewport) varies with use case.
Reflow ≠ collapsing
The Web as a Superset Medium
- We can easily replicate the print medium on the Web
- But we can do so much more!
- One source many uses.
- ... and therein lies the problem
- People think print and like control!
Separation of Concerns
Distinct technologies addressing separate concerns/purposes.
Separation of Concerns on the Web:
- Initially all mingled together
- Now we have the web trinity
- HTML
- CSS
- JavaScript
Complementary languages for content, styling and interaction.