TK Study
HomeLearn step by stepHow to answerMemoriseKey termsFlashcardsNotesMaster answersPast questionsMultiple choiceMock examPractice & marker

Software Engineering › How to answer › Drawing › a user interface mock-up

How to design a user interface mock-up

The question gives a task (such as “users register an account”) and asks for a labelled screen. The labels earn the marks. From NESA material

What it looks like in the real exam

From NESA material 2025 familiarisation 2025 NESA familiarisation exam, Q9A (3 marks): design a user interface for users to register an account, with features labelled.

2025 NESA familiarisation exam, Q9A · 3 marks

[Question stem not available as text (it is on the interactive NESA familiarisation site). Task per the NESA mapping grid: design a user interface for users to register an account, with features labelled]

Official marking criteria

  • 3 marks: UI suitable for users to register an account, with features labelled.
  • 2 marks: UI with some relevant features.
  • 1 mark: Some understanding of the problem.

Notes

The sample answer is an image. Include labelled: title/heading, text boxes (username, password, confirm password, email), labels, password mask, submit/register button, cancel/clear, error message area, consistent colours/fonts, help text. (Checklist from UI design principles, not from the MG.)

Open this question page · some of the NESA wording or answer is an image or is unpublished, as noted

From course notes Course grid: User interface is worth about 3 marks in the school’s exam-style grid (target band 3–4).

What to include (a checklist from UI design principles)

Reasoned The bank note says this checklist comes from UI design principles, not from the NESA marking guideline.

  • A heading that says the purpose of the screen
  • A label for every text box
  • Text boxes for the data needed (username, email, password, confirm password)
  • Password characters masked
  • A main action button (Register) and a secondary one (Cancel or Clear)
  • An area for error messages
  • Hint or help text
  • Consistent fonts and colours, good contrast, readable size

Method

  1. Read the task and underline the actions and data it needs (“register an account”). From course notes
  2. List the controls needed: one input per piece of data, one button per action. General advice
  3. Draw the screen frame, then the controls from top to bottom in a sensible order. General advice
  4. Add a label to each control and a short annotation arrow explaining it (“password is masked”). The question says “with features labelled”, so labels earn the marks. From NESA material
  5. Check accessibility and consistency: contrast, readable size, aligned controls. From course notes

Worked example: a registration screen (original)

Create an accountUsernameEmailPassword• • • • • • • •At least 8 charactersConfirm passwordI agree to the termsError message appears hereRegisterCancelHeading says what the screen is forLabel above every text boxText box (correct type: email)Password characters are maskedHint text before the user errsCheckbox for a yes/no choiceSpace for error feedbackMain action stands out; Cancel is plainer
User interface mock-up for a registration screen with labelled features: heading, labelled text boxes, masked password, hint text, checkbox, error message area, register and cancel buttons

Original practice Each annotation names a feature and, where useful, the reason for it.

Markers’ checklist

  • A recognisable screen for the task given.
  • Controls for all the data and actions needed.
  • Each feature labelled (the question asks for it).
  • Sensible placement and grouping.
  • Evidence of good design: consistency, clarity, error feedback.

Common mistakes

  • General advice Drawing the screen but not labelling the features.
  • General advice Forgetting controls (no password confirmation or no button).
  • General advice Cluttered or inconsistent layout.

Time per mark

Derived The paper averages 1.75 minutes per mark (140 minutes ÷ 80 marks), so a 3-mark drawing question is about 5.3 minutes in total. General advice Suggested split: 1 minute reading and planning, most of the time drawing, and the last minute checking labels against the checklist. Drawing in an online tool is slower than on paper, so practise with the tool on NESA’s familiarisation site.

Practice (3 prompts, with answers)

Item 1 · search screen

Design a screen for searching a library catalogue, with features labelled.

Show the answer

Heading “Search the catalogue”; labelled text box “Title or author”; dropdown “Search in” (Books, DVDs); Search button; results area; “No results found” message area; help text. Each labelled. Original practice

Item 2 · feedback form

Design a feedback form for an app.

Show the answer

Heading; labelled text boxes (Name, Email); a rating control (1 to 5); a comments text area; Submit and Cancel buttons; error message area. Original practice

Item 3 · critique

A student’s sign-up screen has no labels on the boxes, white text on a yellow background and a tiny Submit button. List the faults.

Show the answer

(1) No labels on text boxes. (2) Poor contrast. (3) The main action is too small and not clearly identifiable. Original practice

← How to draw a storyboardHow to draw a network or system diagram →