KS3 · Computer Science

Designing a mobile app

An app can have every feature and still be a bad app if you can't find the button you need. Good designers start with the person, not the buttons.

Designing Leo's homework app, stage by stage

Leo is in Year 7 and keeps missing homework deadlines. Follow his app from first idea to improved design. Tap any stage to see what it decides for Leo.

Computing · User interfaces

Display or collect?

Here is the Add homework screen from Leo's app. Sort each element: does it display information to Leo, or collect information from him?

Still to sort

Displays information (0)

Shows something to the user. Labels and images do this.

Where the line is: Leo only looks at it. Nothing he does changes what it holds.

Collects information (0)

Takes something from the user. Buttons and text boxes do this.

Where the line is: Leo acts on it: he taps it or types into it, and information goes from him into the app.

6 of 6 still to sort.

The user interface (UI) is the part of an app that users interact with. Every element on it has a job: it either shows information to the user, or takes information from the user.

Computer Science · Structure

Leo's plan: three screens and the paths between them

Tap a screen to see which elements it holds and where they go. Each arrow says what Leo taps to move from one screen to another.

Tap any part of the diagram to see what it does.

Same features, two designs

Cluttered screenvsClear screen

Both versions of Leo's Home screen hold exactly the same features. Only one of them can actually be used.

Focus

Can Leo find his way around?

Cluttered screen

Eight same-sized buttons crowd the screen. "Add homework" is one of them, and Leo has to hunt for it.

Clear screen

"+ Add homework" stands on its own, clearly labelled. Leo finds it straight away.

The insight

Lead with this one: apps are built for users, so they must be easy to navigate.

Can Leo understand it?

Cluttered screen

Long labels in small writing, squashed together. He has to read everything to find one thing.

Clear screen

Short labels say exactly what each part is, like "Due this week".

How it looks

Cluttered screen

Every element squeezed in, with pictures everywhere.

Clear screen

Space around each element, and one small picture per subject.

How Leo interacts with it

Cluttered screen

To add homework he opens a menu, then another menu, then finds the form.

Clear screen

One tap on "+ Add homework", type the task and date, tap Save.

What the app can do

Cluttered screen

Homework list, add homework, homework details, subject pictures.

Clear screen

Exactly the same.

Computing · Testing a design

When is an app design finished?

Priya has built an app to help her grandad remember his appointments. She has tapped every button herself, and everything works.

Is Priya's design finished? Pick the idea closest to what you think right now.

Yes. Every button works, so the design is done.Nearly. She should test it again herself on a different phone, just to be sure.Not yet. She should add more features first so it is more useful.Not yet. Her grandad needs to try it, she checks it meets his need and is easy for him to use, then she improves it.

How sure are you?

I'm sureI think soI'm guessing

Yes. Every button works, so the design is done.

This is a common misconception

Working is not the same as well designed. The question a design must answer is whether the user can use it for their task. Priya does not know that yet, because the user has not tried it.

Nearly. She should test it again herself on a different phone, just to be sure.

This is a common misconception

Priya already knows where every button is and what every label means, because she put them there. Her grandad does not. The app is built for him, so he is the one who has to try it.

Not yet. She should add more features first so it is more useful.

This is a common misconception

More features do not make a design finished. Nobody has checked whether the features she already has meet her grandad's need, and only testing with him can show that.

Not yet. Her grandad needs to try it, she checks it meets his need and is easy for him to use, then she improves it.

This matches the evidence

Exactly. A design is tested by having the users try the app and checking whether it meets their needs and is easy to use. Then the design is improved using what was found.

An app that works is not automatically well designed. The design is tested when its users have tried it, and improved from what they found.

WHAT YOU'VE LEARNED

A quick recap of today's lesson.

Great apps are designed backwards: start with the person, and the buttons follow.

What you need to know

A user interface (UI) is the part of an app that users interact with: how it looks and how they use it.
Interface elements do one of two jobs: labels and images display information to the user; buttons and text boxes collect information from the user.
Design starts from the user need: who the users are, and what problem or task the app should help them with.
Plan the screens as a sketch or wireframe, build them with visual tools, then have users test the app and improve the design from what they found.

The big picture

Designing an app starts with the user: who they are and what task they need help with. From that need you decide what the app must do, plan the screens as a sketch or wireframe, build them with visual tools, then have users test it and improve the design from what they find. The user interface is the part users interact with, and its elements either display information (labels, images) or collect it (buttons, text boxes). A good interface is visually clear and functionally simple.

Key points

1The user need decides what the app must do, and so what goes on every screen.

2A wireframe plans the elements on each screen, where they are placed and how the user moves between screens.

3Visual tools let you build a screen by adding interface elements and arranging them.

4A good user interface is visually clear and functionally simple, so users can navigate it and understand it.

5A design is tested by users trying the app, checking it meets their needs and is easy to use, and then improving it.

.we-_R_18slubsnpfiv5ubrb_ [data-we-step]{display:flex !important}.we-_R_18slubsnpfiv5ubrb_ [data-we-solution]{display:block !important}.we-_R_18slubsnpfiv5ubrb_ [data-we-reveal]{display:none !important}

Worked example

Problem

The school librarian wants Year 7 pupils to be able to check, from their phones, whether a book is in the library before they walk over. Plan the first screen of the app, deciding each element and its job.

⚠ Watch out

Starting by placing buttons on a blank screen before knowing who the app is for, and then calling the design finished as soon as it works, without its users ever trying it.

🧠

Memory hook

Who? What? Wireframe. Build. Try. Tweak. Six steps, and the first one is always a person.

✓

Check yourself

Leo's friend wants an app that reminds her to water her plants. What should the designer find out before sketching a single screen, and who should try the app before the design counts as tested?

Flashcards

(14)

What is a user interface (UI)?

The part of an app that users interact with.

What are the two jobs an interface element can do?

Display information to the user, or collect information from the user.

Which common elements display information?

Labels (they show text) and images.

Which common elements collect information?

Buttons (the user taps them) and text boxes (the user types into them).

A label sits right next to a text box. Which one collects?

The text box. The label only displays words telling the user what to type.

What two things does a user interface include?

How the app looks, and how users interact with it.

What makes a user interface good?

It is visually clear and functionally simple.

Why must an app be easy to navigate and understand?

Because apps are built for users. If users cannot find their way or understand it, the app fails them.

Where does designing an app start?

With the user need: who the users are and what problem or task the app should help them with.

What is the audience of an app?

The people who will use it.

What does a wireframe show?

The interface elements on each screen, where they are placed, and how the user moves between screens.

How do you build a simple screen with visual tools?

Add interface elements and arrange them on the screen.

How is an app design tested?

Users try the app, and you check whether it meets their needs and is easy to use.

What happens after users test the design?

The design is improved using what the testing found.

Tap any card to flip it, or use Study as deck to go through them one at a time. In the full lesson these run as a spaced-repetition deck — you rate each card Hard, Good or Easy and the tricky ones keep coming back until they stick.

Learning with Lightbulb is opening soon

You can use this lesson now. Join the waitlist and we'll let you know when the full Lightbulb experience is ready.

Keep me posted

Display or collect?

Leo's plan: three screens and the paths between them

When is an app design finished?

More KS3 Computer Science topics