A screen for a hungry queue
The made-up Eastfield School canteen has a long queue at lunch. The head cook wants an app so students can order ahead from their phone.
You are the designer. Before you write any code, you must decide what is on the screen, where it sits and how it reacts. This lesson shows how to design that screen on paper first.
By the end of this lesson
Note
I can design a user interface for a given scenario and explain my choices.
Key words
| Word | What it means |
|---|---|
| User interface | what a person sees and uses on a screen |
| Wireframe | a plain sketch of where each part of a screen goes |
| Navigation | the way a person moves between screens |
| Feedback | a sign that the app has done what you asked |
| Shortcut | a quicker way for an experienced user to do a job |
| Prototype | an early working model of an app, used to test the design |
The cells students fill in are left blank in this preview.
Starter: what you already know
Have a go
Starter: what you already know
4 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.
Start with users and jobs, then sketch
First list the users and the jobs they must do. At the canteen: a student chooses a meal, a student collects it, a cook sees the orders.
Then draw a wireframe, a plain sketch of one screen. Use boxes and labels, no colour and no pictures. It lets you test the layout cheaply, before any code is written. Later, a prototype (an early working model) lets real users try it.
Notes beside the wireframe
| Part | Kind | Why it is there |
|---|---|---|
| Menu, My orders, Help | Navigation | Lets users move between screens |
| Day, meal, allergies | Input controls | Collect what the cook needs |
| Add to order button | Input control | Starts the action |
| Message area | Information part | Tells the user the order was added |
The cells students fill in are left blank in this preview.
Check
Have a go
Check
3 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.