The paper book is already a design
Look at the club's paper book. Somebody drew columns by hand with a ruler: day, hour, court, name.
Those columns are a data design. They say what the club needs to remember about every booking.
Your job is to design the same thing for a computer, and to design the screen the staff will use.
Key words
| Word | What it means | Example |
|---|---|---|
| Interface | What the user sees and uses on the screen. | a form with buttons |
| Wireframe | A simple plan of a screen with no colour or style. | boxes and labels |
| Field | One piece of information in a record. | hour |
| Record | All the fields about one thing. | one booking |
| Data dictionary | A table that describes each field: name, type, example and rule. | hour, integer, 10, 9 to 20 |
| Data type | The kind of value a field holds. | integer or string |
| Integer | A whole number. | 10 |
| Float | A number with a decimal point. | 4.5 |
| String | Text in quote marks. | "Sam" |
| Boolean | True or False. | True |
| CSV | A plain text file where each line is a record and commas (,) separate the fields. | Sam,1,10 |
| Accessibility | Making a tool usable by as many people as possible. | clear labels, big buttons |
The cells students fill in are left blank in this preview.
A data dictionary for a booking
| Field | Data type | Example | Rule |
|---|---|---|---|
| member | string | Sam Jones | 1 to 30 letters |
| is_member | Boolean | True | True or False |
| court | integer | 1 | Only 1 or 2 |
| hour | integer | 10 | From 9 to 20 |
| price | float | 4.0 | Worked out, never typed |
The cells students fill in are left blank in this preview.
Choose the data type of each field
Have a go
Choose the data type of each field
6 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.
Try it: a record becomes a CSV line
booking = {"member": "Sam", "court": 1, "hour": 10}
line = booking["member"] + "," + str(booking["court"]) + "," + str(booking["hour"])
print(line)
back = line.split(",")
print(back)
print(int(back[2]) + 1)
# split(",") cuts the text at each comma.
# Why do we need int() on the last line?
Try it: a very simple form
<h1>Book a court</h1>
<label for="name">Name</label>
<input id="name">
<label for="court">Court (1 or 2)</label>
<input id="court" type="number" min="1" max="2">
<label for="hour">Hour (9 to 20)</label>
<input id="hour" type="number" min="9" max="20">
<button>Book</button>
Simple and accessible
data-callouts.tip.label
Give every box a label that says what to type. Make buttons big. Do not use colour alone to show a mistake: say it in words too. A person with a small phone, or a person who cannot see well, must be able to use it too.