7-8 Digital Technologies: Designing user interfaces and experiences Hangman

The 21 key terms

1user interface

The part of a digital system that you see and use. You give input by touching, clicking or typing, and the screen shows you output.

2user experience (UX)

How easy, efficient and pleasant a system feels to use from start to finish, not just how it looks. Good UX avoids frustration points, while UI is only the look.

3button

An interface element the user clicks or taps to make something happen. It needs a clear label, should do one action, and must be big enough to press easily.

4text box and label

A text box lets the user type in an answer. A label is words on the screen that tell the user what to type (prompt text) or show the result (output text).

5menu, slider, checkbox

Interface elements that let the user pick from set options instead of typing: a menu lists choices, a slider picks a value on a range, a checkbox turns an option on or off.

6layout

Where items are placed on a screen. Good layout groups related items together, lines them up and leaves space between them, so the screen is easy to scan.

7consistency

Consistency means similar things look and work the same way on every screen, like buttons with the same style and a menu in the same place, so users always know what to do.

8contrast

How different the text colour is from the background colour. High contrast, like black text on white, with large enough text, makes words easy to read.

9different users, different needs

One digital system can suit one user well and fail another, because users differ in age, ability and experience. Features like read-aloud and large text help.

10accessibility feature

A design choice that lets people with different abilities use a system, such as alt text for images, captions for video, keyboard-only controls or colour-blind safe colours.

11user flow

The path of screens a user follows to finish a task, like logging in or buying a ticket. Navigation controls such as back and home buttons help them move along it in as few steps as possible.

12feedback

A response from the interface that tells the user what happened, like a confirmation message, or an error message that says what went wrong and how to fix it.

13thumbnail sketches

Small, quick drawings of different design ideas. Make several, compare them, then choose the best one to build.

14screen sketch

A simple drawing of a screen. It has an outline, then a box or shape for each button, text box or label, drawn where it will go. You draw one sketch for each screen.

15storyboard

A row of numbered screen sketches with arrows showing the order a user moves through them, so you can plan how someone gets from the first screen to the last.

16annotation

A short note on a design that says what an element does or what happens when it is used, like a label on a button or an arrow showing which screen opens next.

17present a design

To show your sketch, explain how each part helps the user, and ask others for feedback. Listen to what they say so you can improve your design.

18criteria table

A table that lists each design option against the same criteria, rates each one, and helps you pick the best design and give reasons for your choice.

19observing

Watching a user do a task to see where they get stuck, without helping or interrupting. You write down what you see instead of just asking them what they think.

20evaluate a design

To check a design against criteria, like easy to read, easy to use and meets the requirements, using a checklist, user feedback and evidence to show if each one is met.

21modify a design

Change one thing in your design, like size, position or wording, because of feedback. Then check it again. Change one thing at a time and save each version.