Direct Manipulation & Invisible Interfaces
Direct manipulation, the desktop metaphor vs the CLI, metaphorical vs literal invisibility, good vs bad design, invisibility by learning vs by design, and five tips for invisible interfaces.
▶Lecture videos
Click any timestamp — here or inside the notes — to jump the video to that moment. Your position is remembered.
6.1 Direct and Indirect Manipulations
Direct manipulation: acting on the task object itself.
00:01Designing tasks: feedback cycles and invisible interfaces02:22Direct manipulation: no feeling of an intermediate interface04:44Example: laptop touchpad vs touch screen06:18Indirect manipulation: searching for menu options08:44How the user feels about the task10:19Example: zooming an image, then and now12:37Invisible interfaces: users think about the task, not the interface14:57Direct manipulation reduces the gulf of executionGood Designs and Bad Designs
Metaphorically invisible vs literally invisible interfaces.
00:04What good and bad design mean for interfaces00:30Good design: metaphorically invisible, literally present01:40Bad design: literally invisible, so there's no feedback02:46Summary of the differenceInvisibility by Learning & by Design
Two ways an interface becomes invisible, and why designing for invisibility is so hard.
00:05Two routes to invisibility00:58By learning: the interface fades with practice (video games)02:26By design: invisible from the very first moment03:19Very challenging, hard to achieve 100%04:03The thinking is done by the designer, not the user04:47Designer effort is commonly underestimatedInvisible Interface Design Tips
Five tips: affordance, know your user, differentiate users, let the interface teach, talk to users.
00:00Tip 1: affordances, and why controls are placed where they are01:59Tip 2: know your user (novice = ease, expert = efficiency)03:45Tip 3: differentiate users, with many ways to do the same thing (MS Word)04:44Tip 4: let the interface teach05:33Tip 5: talk to your users07:25Summary: direct manipulation + invisibility = usable systems1Direct manipulation
In direct manipulation the user feels immediate, tactile control of the task object itself. The software layer fades from conscious awareness, which narrows both the gulf of execution and the gulf of evaluation.
| 💻 Laptop without touch (indirect) | 📱 Tablet / phone (direct manipulation) | |
|---|---|---|
| Zoom an image | Move cursor → open menu → click the zoom widget → type a percentage | Put two fingers on the image and pinch outward |
| Effect | High friction: attention shifts from the image to configuring controls | Invisible interface: the gesture maps 1-to-1 onto the mental model of stretching a photo |
Indirect (menu + typed %)
Steps: 0
Direct (drag the slider on the picture)
Steps: 0
On a touch screen the right-hand version would be a pinch. Count your steps and notice where your attention goes: to the control, or to the picture?
2The desktop metaphor vs the command line
The desktop metaphor succeeded because it mimics a physical desk.
| 📁 Desktop GUI | ⌨️ Command line (CLI) | |
|---|---|---|
| Move a document | Drag the icon into a folder, like moving a paper folder on a desk | Recall exact syntax: mv /usr/var/doc.txt /home/docs/ |
| Risk | Low: you see the result | One missing space or typo = failure |
| Attention | On the task | On the syntax |
3Metaphorical vs literal invisibility — good vs bad design
- Metaphorically invisible: the user's train of thought is never interrupted by confusing software mechanics. There's no noticeable "figurative" involvement of the interface.
- Literally visible: the interface is still there doing its job, giving clear visual status, confirmation highlights and feedback.
| ✅ Good design | ❌ Bad design | |
|---|---|---|
| Metaphorically | Invisible: you think about the task | (may also feel invisible) |
| Literally | Present: gives feedback and support | Invisible even literally: what the interface is for is forgotten, so there's no feedback 01:40 |
| Result | The sense of interaction is there, but the interface isn't prominent | Violates the feedback cycle, so the user gets no support |
Good design = metaphorically invisible, literally present. Bad design = invisible even literally, so the user gets no feedback.
4Where direct manipulation is still lacking
| Scenario | Today (indirect, high friction) | Direct vision |
|---|---|---|
| Typo correction | Moving a tiny cursor with a finger and holding backspace | Scribble out or swipe the unwanted text, like on a whiteboard |
| Emoji selection | Pausing the conversation to browse hundreds of emoji grids | Facial expression tracking adds a smile or wink automatically |
| Car climate control | Digging through dashboard menus at 80 km/h | Biometric sensors detect shivering or heat and adjust the cabin automatically |
5Invisibility by learning vs by design
| 📚 By learning (a design crutch) | ✨ By design (the gold standard) | |
|---|---|---|
| How | The interface fades with practice. At first you notice it, then familiarity makes it go unnoticed 00:58 | Disappears from the very first moment of use: no manual, no training 02:26 |
| Example | 50-button TV remote: an adult uses it blind, but a 2-year-old can't (arbitrary mapping). Video game controls become automatic after practice | YouTube on an iPad: a 2-year-old taps the big thumbnail and it plays, with zero instruction |
| Who does the thinking | The user (learning effort) | The designer 04:03 |
- It's very challenging and hard to achieve 100%.
- "Most of the thinking has to be done by the designer, not by the user." The user's mental challenge is minimised, but the designer's is immense.
- Designers' effort is commonly underestimated, even by computing experts 04:47.
6Five tips for invisible interfaces
| # | Tip | Core idea |
|---|---|---|
| 1 | Use natural affordances | Controls show how they're used; placement has reasons 00:00 |
| 2 | Know your user | Novice → ease of use; expert → efficiency 01:59 |
| 3 | Differentiate your users | Several paths to the same task (menu, toolbar, right-click, shortcut) 03:45 |
| 4 | Let the interface teach | Learn by doing: feedback, options, error tolerance, inline hints 04:44 |
| 5 | Talk to your users | People have emotions and preferences; observe real use 05:33 |
Typical questions:
- "What is direct manipulation? Give examples" (pinch-zoom, drag-and-drop)
- "Differentiate invisibility by learning and by design"
- "Explain metaphorically vs literally invisible"
- "List five tips to design invisible interfaces"
7Quick revision sheet
| Concept | Remember it as |
|---|---|
| Direct manipulation | Act on the object itself (pinch, drag); narrows both gulfs |
| Desktop metaphor | Drag the file into a folder vs mv syntax in the CLI |
| Good design | Metaphorically invisible, literally present (feedback) |
| Bad design | Literally invisible: no feedback, breaks the feedback cycle |
| Lacking DM | Typo fixing, emoji picking, car climate |
| By learning | Fades with practice (TV remote, games): the user does the work |
| By design | Invisible from the first use (iPad YouTube): the designer does the work |
| 5 tips | Affordance · Know user · Differentiate users · Interface teaches · Talk to users |
| Novice vs expert | Ease of use vs efficiency |
?Self-check quiz
10 questions on this week. Answer them all, then press Check my answers. Your best and latest scores are saved and shown on the subject page.