Week 7 · Unit 2, Lesson 1 Principles of Designing Attractive, Professional Website Interfaces (1) · 3 lessons
3
Clear and consistent
ICT Prep 2 Term 1, Unit 2, Lesson 1: pp. 42–46
GoalExplain clarity and consistency and use them to judge small designs.
New words
clarity · being easy to read and to understand at onceconsistency · things that do the same job look and act the same everywherelegible · easy to read, because of size, shape and colouruser · the person who uses a site or an app
Explanation
Two more ideas make a good experience. Clarity means that the user understands at once: large, plain writing, short sentences and clear words. Compare “Reading opens new worlds” written in big, plain letters with the same sentence in tiny, curly, pale letters: the second is hard to read, even if some people find it pretty. Consistency means that things that do the same job look and act the same on every page. If “Save” is a blue rounded button on one page, it should not be a red square on another and a green triangle on a third. Users learn once and then can trust the pattern. Together, navigation, clarity and consistency make a calm, easy experience.
Idea
Poor design
Good design
Clarity
tiny, curly, pale letters
large, plain, dark letters
Consistency
Save: blue round; Cancel: red square; Back: green triangle
Save and Cancel and Back: the same shape, each with its own clear word
Worked examples
Salma’s class compares two versions of the same sentence on paper. Version A: big, plain letters. Version B: small curly letters in pale grey. Everyone reads A in two seconds, but B takes ten. A has clarity.
Back differs on each page→users get lost→make Back the same everywhere→users find it easily
On page one of an invented app, the “Back” button is a grey arrow at the top left. On page two it is a red word at the bottom right. Users look in the wrong place. The app is not consistent. The team makes “Back” the same on every page.
Class activity
Write the sentence “Reading opens new worlds” twice on paper: once in clear letters and once in tiny, fancy ones. Ask a family member to read each and time them. Then draw the Save, Cancel and Back buttons as one consistent set, using words only.
Practice
1
What is clarity in design?
Being easy to read and understand at once.
2
What is consistency?
Things that do the same job look and act the same everywhere.
3
A “Save” button is blue on page one and red on page two. Which idea is missing?
