lesson 2.5 - efficient ui: speed & access (shortcuts, feedback)
Discover techniques that improve an interface's speed, such as using keyboard shortcuts and providing informative feedback.
Have you ever wished you could control your computer like a wizard, without even touching the mouse? Today, we are looking at the "Need for Speed" and the "Safety Nets" of computing! We will learn how Shortcuts make you faster, how Feedback stops you from getting angry at the screen, and how Undo buttons save your life! You are going to become the expert today by creating a "Cheat Sheet" for shortcuts and then designing your own cinema kiosk screen that is fast, friendly, and forgiving.
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
Define the term Keyboard Shortcut as a key combination used to execute a command.
State the purpose of Informative Feedback in a user interface.
Identify examples of Easy Reversal of Actions (e.g., Undo buttons, Trash cans).
The Connections and Theories (Conceptual Knowledge)
Explain how the use of shortcuts improves efficiency and reduces selection time for expert users.
Discuss how easy reversal of actions increases user confidence by reducing the fear of making permanent mistakes.
Analyse the relationship between Informative Feedback and System Status (letting the user know what is happening).
The Skills and Methods (Procedural Knowledge)
Apply keyboard shortcuts to speed up routine tasks in software applications.
Design interface elements that provide clear visual or auditory feedback to the user.
Create a UI design concept that includes mechanisms for reversing actions (Undo/Cancel).
Digital Skill Focus: C.3.6 User-Centred Design: Evaluate a website or app for basic efficiency issues, considering how interface design impacts user speed and confidence.
1
Speed Up: Keyboard Shortcuts
Imagine playing a video game where you have to click a menu to jump every time. You’d lose! We use buttons on the controller to react fast. Business software is the same.
What are they? Combinations of keys that perform a command (e.g., Ctrl + C to Copy).
Why use them? They reduce Selection Time. Moving a mouse to a menu takes time; pressing two keys is instant.
Who are they for?
Mostly Expert or Regular users who want to work efficiently.
They also help users with motor impairments who find using a mouse difficult or painful.
2
Talk to Me: Informative Feedback
Computers can't speak (well, not always), so they need to give us visual signs that they are working.
What is it? The system telling you that an action has been received or completed.
Examples:
Visual: A button turns grey after you click it (so you don't click twice). A spinning wheel appears while loading. A green tick appears when a file saves.
Audio: A "whoosh" sound when an email sends.
Haptic: Your phone vibrates when you unlock it.
The Rule: Every action needs a reaction! If the user clicks, the screen must change.
3
Oops! Easy Reversal of Actions
We all make mistakes. A good interface forgives you.
The Safety Net: Users feel more confident exploring an app if they know they can fix a mistake.
Methods:
Undo Button: The classic arrow or Ctrl + Z.
Trash/Recycle Bin: Files aren't deleted instantly; they go to a "holding area" first.
"Cancel" options: Being able to back out of a menu or payment screen.
Confirmation messages: "Are you sure you want to delete this?"
Key Takeaway: An efficient interface respects the user's time (Shortcuts), keeps them informed (Feedback), and forgives their mistakes (Reversal).
Task The 'Fast & Forgiving' Design Challenge
1
The Knowledge
Research: Find the keyboard shortcuts for these 5 actions for BOTH Windows and Mac: Copy, Paste, Undo, Save, Print.
Design: Create a one-page "Help Sheet" or Infographic.
Use two columns (Windows vs Mac).
List the actions and keys clearly using icons if possible.
Tip: Macs generally use the Command Key (⌘) to invoke shortcuts.
Explain: At the bottom, write one sentence answering: "Why are keyboard shortcuts useful for an interface user?" (Hint: Use the word "efficiency").
2
The Application
1
Scenario: You are designing a Self-Service Ticket Kiosk for a cinema.
2
Sketch: On paper, draw the "Payment Confirmation" screen.
3
Include & Label:
Informative Feedback: Draw a visual sign that shows the payment worked (e.g., a tick or message).
Reversal of Action: Draw a "Cancel" or "Go Back" button.
Efficiency: Add a label saying "Press Enter to Confirm" (a shortcut).
4
Annotate: Draw arrows to your three features explaining why they are important for the user.
Outcome: I have created a digital guide to shortcuts and a paper prototype demonstrating feedback and error correction.
Application to the Component Sample PSA
Component 1 Scenario: The Majestic Cinema
Efficiency: The brief states the audience includes teenagers and adults. Teenagers are often "regular" or "expert" users who appreciate speed. Including keyboard shortcuts in your design (Task 2) meets this need.
Feedback: When booking tickets, users need confirmation. If they select a wheelchair space, the interface must provide visual feedback (e.g., the seat icon changing colour) to confirm the selection has been registered.
Reversal: The ticket booking form asks for personal details. Users make typos. Your design needs a "Clear Form" or "Edit" button so they can reverse mistakes without frustration.
Component 2 Scenario: Pedal Power Cycles
Efficiency: When creating the Dashboard (Task 2c) , you can use Macros (a type of shortcut) to create buttons that navigate between worksheets instantly, making the dashboard more efficient for the bike shop owner.
Out of Lesson Learning
⭐ The Creative Technologist's Studio
Task: "Iconic Feedback."
Instructions: Sketch three different icons that could represent "Loading," "Success," and "Failure" for The Majestic Cinema app. Try to match the "Classic / Art Deco" style of the cinema logo.
Task: "Iconic Feedback."
Instructions: Sketch three different icons that could represent "Loading," "Success," and "Failure" for The Majestic Cinema app. Try to match the "Classic / Art Deco" style of the cinema logo.
⭐⭐ The Problem Solver's Challenge
Task: "The Undo Loop."
Instructions: Write a short algorithm (step-by-step list) for what happens when a user clicks "Cancel" on the Majestic Cinema Ticket Booking Form. Does it clear the data? Does it return to the Home screen?
Task: "The Undo Loop."
Instructions: Write a short algorithm (step-by-step list) for what happens when a user clicks "Cancel" on the Majestic Cinema Ticket Booking Form. Does it clear the data? Does it return to the Home screen?
⭐⭐⭐ The UX Designer's Critique
Task: "Shortcuts for Accessibility."
Instructions: The Majestic Cinema audience includes users with motor impairments. Write a short paragraph explaining why keyboard shortcuts (like Tab to move between boxes) are vital for these users, not just for speed, but for access.
Task: "Shortcuts for Accessibility."
Instructions: The Majestic Cinema audience includes users with motor impairments. Write a short paragraph explaining why keyboard shortcuts (like Tab to move between boxes) are vital for these users, not just for speed, but for access.
Last modified: November 24th, 2025
