The button that does nothing
You tap Pay. Nothing happens. You tap again. Still nothing. Did it work? Did it take your money twice?
You delete the app.
A good interface always answers the user. Today you learn the tools for this: pictures, movement, sound, touch and charts.
Key words
| Word | What it means | Example |
|---|---|---|
| User interface | Everything a person sees and uses to work with a program. | screens, buttons, sounds |
| Input | What the user gives to the program. | a tap, a typed word, a voice command |
| Feedback | The answer the program gives back to the user. | a message, a sound, a buzz |
| Animation | Movement on the screen over time. | |
| Effect | A visual change that adds style, such as a fade or a shadow. | |
| Haptic | Feedback you feel, such as a phone buzz. | |
| Data visualisation | Showing numbers as a picture, such as a chart. | |
| Dashboard | One screen that shows the most important figures together. | |
| Graph | A chart that draws numbers as bars, lines or points. | |
| Pixel | One tiny dot on a screen. A screen is made of thousands of pixels. |
The cells students fill in are left blank in this preview.
The tools of an interface
| Feature | What it does | Use it for | Take care |
|---|---|---|---|
| Images | Show a picture | Products, icons, maps | Big files load slowly. Add a text description for blind users |
| Animation | Moves things | Showing something is loading or changed | Too much is tiring. Let users turn it off |
| Audio | Plays sound | Alerts, music, spoken help | Never play loud sound without being asked |
| Effects | Fade, shadow, colour change | Showing a button is active | Keep them simple and quick |
| Haptic | Buzz or vibration | Confirming a tap on a phone | Not every device can do it |
The cells students fill in are left blank in this preview.
Try it: an animation
<button class="pulse">Press me</button>
Quick check: tools
Have a go
Quick check: tools
3 questionsHave a go: your answers are marked here and then forgotten. Sign in if you would like your score kept, and to pick up where you left off.Sign in to keep your score
Your answers are marked here and are not kept. A college account keeps every student’s marks.
Quick check: effects and care
Have a go
Quick check: effects and care
3 questionsHave a go: your answers are marked here and then forgotten. Sign in if you would like your score kept, and to pick up where you left off.Sign in to keep your score
Your answers are marked here and are not kept. A college account keeps every student’s marks.