UI/UX and Accessibility

Where this helps: designing an interface real people can actually use. In the IB Computer Science Internal Assessment this supports the interface design in Criterion C. Usability and accessibility matter in every piece of software people touch.

Table of Contents

  1. Why This Page Exists
  2. UI and UX: Two Different Things
  3. Usability: Making It Easy to Use
  4. Accessibility: Making It Usable by Everyone
  5. Ergonomics: Making It Comfortable and Efficient
  6. Worked Example: Fixing a Bad Form
  7. Quick Check
  8. Match the Principle
  9. Practice Exercises
    1. Core
    2. Extension
    3. Challenge
  10. Connections

Why This Page Exists

Software is used by people, and people are not the computer. A program can be fast, correct, and powerful, and still fail completely because no one can work out how to use it. The gap between “the program can do this” and “a person can get the program to do this” is where a lot of software quietly dies.

This page is about closing that gap: making interfaces that are easy to understand (usability), that create a good overall experience (UX), and that work for people with a range of abilities and situations (accessibility). None of it is specific to one course or one language. It is the difference between software people tolerate and software people actually use.

UI and UX: Two Different Things

The two terms get muddled, but they name different things.

  • UI (user interface) is what the user sees and touches: the buttons, menus, layout, colours, text, and controls. It is the surface.
  • UX (user experience) is the whole experience of using the software to reach a goal: is it easy, is it frustrating, does it get me where I wanted to go? It is the feeling.

A beautiful UI can still deliver a terrible UX if the buttons are beautiful but you cannot find the one you need. Good design serves the experience, not just the appearance. The interface is a means; the user’s success is the end.

Usability: Making It Easy to Use

Usability is how easily a person can learn and use software to do what they came to do. A handful of principles cover most of it.

Principle What it means A quick example
Consistency The same action looks and behaves the same way everywhere “Save” is in the same place, named the same, on every screen
Feedback The system tells the user what just happened A “Payment saved” message after saving, not silence
Visibility Users can see what they can do; important actions are not hidden The main action is an obvious button, not a secret gesture
Error prevention and recovery Mistakes are hard to make and easy to undo A confirm step before deleting, and an undo afterwards
Simplicity Show what matters; do not overload the screen One clear path for the common task, advanced options tucked away
Match expectations Use words and patterns the user already knows A trash-can icon for delete, “Cart” for a shopping basket

Most everyday frustration with software traces back to one of these being broken: an action with no feedback so you click twice, an inconsistent layout so you hunt for the button, a screen so cluttered you cannot find the one thing you need.

The strongest usability test is free: watch one real person try to do one real task, and say nothing. Every place they hesitate, misclick, or ask “what do I do now?” is a usability problem you can fix. You will learn more in five minutes of watching than in an hour of guessing.

Accessibility: Making It Usable by Everyone

Accessibility is designing so that people with disabilities, and people in difficult situations, can use your software. It is not an optional extra for a few users; done well, it makes software better for everyone.

Area Who it helps What good design does
Vision Blind and low-vision users Works with screen readers, has strong colour contrast, allows larger text, gives images alt text
Hearing Deaf and hard-of-hearing users Provides captions and transcripts for audio and video
Motor Users who cannot use a mouse precisely Everything reachable by keyboard, targets big enough to tap
Cognitive Users who find dense text hard Plain language, clear structure, one thing at a time

Two rules do a lot of the work:

  • Never rely on colour alone. If errors are shown only by turning a field red, a colour-blind user sees nothing wrong. Add an icon or a message as well. Colour can reinforce a signal, but it must never be the only signal.
  • Accessibility helps everyone. Captions help a deaf user and someone watching in a noisy room. Keyboard access helps a motor-impaired user and a fast typist. Big tap targets help everyone on a phone. This is the “curb-cut effect”: the ramp cut into a kerb for wheelchairs also helps prams, suitcases, and delivery trolleys.

There are recognised standards for this. The Web Content Accessibility Guidelines (WCAG) are the most widely used, and they set testable rules for things like contrast and keyboard access. You do not need to memorise them, but knowing they exist, and that accessibility is a measurable target rather than a vague hope, is the point.

Ergonomics: Making It Comfortable and Efficient

Ergonomics is designing for the way people physically use software, so that common tasks are quick and comfortable and do not cause strain.

In an interface, that means:

  • Put frequent actions within easy reach. The thing users do fifty times a day should take one tap, not a dig through three menus.
  • Minimise steps for common tasks. Every extra click or field is friction; cut the common path to the fewest steps that still make sense.
  • Sensible defaults. Pre-fill the most likely choice so most users can just accept it.
  • Reduce repetitive effort. If a user retypes the same thing constantly, let them save it or pick it from a list.

Ergonomics also has a physical side (screen height, posture, avoiding strain from repetitive movements), but in software design the everyday form is efficiency: respecting the user’s time and effort by making the frequent things effortless.

Worked Example: Fixing a Bad Form

Scenario. A club membership form has these problems. Each breaks a principle from this page.

Problem Principle broken Fix
When you leave a field blank, it just turns red, with no message Accessibility (colour alone) Add an error message and an icon, not only colour
After you press “Join”, nothing visibly happens Usability (feedback) Show a clear “You are now a member” confirmation
“Submit” is on the left on one page and the right on the next Usability (consistency) Put the main action in the same place every time
The “Pay now” button is a tiny link in the corner Ergonomics / visibility Make the common action a large, obvious button
The form asks for a fax number nobody has Usability (simplicity) Remove fields that are not needed

None of these fixes require new features or faster code. They are design choices that decide whether a person can comfortably do the one thing they came to do.

Quick Check

Q1. What is the difference between UI and UX?

Q2. A form shows input errors only by turning the field red, with no other sign. Which principle does this most directly break?

Q3. In usability, what does "feedback" mean?

Q4. Adding captions to videos helps deaf users. What else is true of this accessibility choice?

Q5. A cashier scans hundreds of items a day. Which change best reflects good ergonomics?

Q6. Which change most improves the accessibility of a sign-up form?

Match the Principle

Name the principle each design choice supports: consistency, feedback, accessibility, simplicity, or ergonomics.

Fill in the blanks.

// A "Saved!" message appears after every save
// Principle: 

// Every screen puts the main button in the same place
// Principle: 

// Errors show an icon and a message, not just a red colour
// Principle: 

// The common task is cut down to a single tap
// Principle: 

// The screen shows only what the user needs right now
// Principle:

Practice Exercises

Note for IB CS learners: these mirror the interface-design thinking behind Internal Assessment Criterion C. Command terms and a suggested mark weight are shown. At least one asks for a full prose response.

Core

  1. Distinguish (3 marks) – Explain the difference between UI and UX, and give an example of a good-looking interface that could still have a poor user experience.

  2. Identify (4 marks) – List four things that make a mobile app accessible to users with low vision.

  3. Apply (4 marks) – Describe two changes that would make a data-entry screen faster and more comfortable for someone using it all day (ergonomics).

Extension

  1. Explain (4 marks) – Explain the “curb-cut effect” with an original example of an accessibility feature that helps users far beyond the group it was designed for.

  2. Critique (6 marks) – Describe an interface you find frustrating and identify which usability principles it breaks, with a specific fix for each.

Challenge

  1. Discuss (8 marks) – “Accessibility is extra work that only benefits a small number of users.” Discuss this claim, referring to the curb-cut effect, standards such as WCAG, and who accessibility actually helps. Reach a reasoned conclusion. (Write in prose.)

Connections

© EduCS.me — A resource hub for Computer Science education

This site uses Just the Docs, a documentation theme for Jekyll.