Week 8 · Unit 2, Lesson 1 Principles of Designing Attractive, Professional Website Interfaces (2) · 3 lessons
1
What is user interface design?
ICT Prep 2 Term 1, Unit 2, Lesson 1: pp. 46–53
GoalExplain what the user interface is and why a first impression matters.
New words
user interface (UI) · the look of a product: colours, fonts, layout and the size of buttonsvisual appeal · how attractive a design looks to the eyefirst impression · the feeling you get in the first seconds of seeing somethinglayout · the way parts of a page are placed
Explanation
Last week you learned that UX is how easy and pleasant the use is. This week we study the look: the user interface, or UI. It includes the colours, the fonts, the layout and the size and shape of buttons. People form a first impression in the first seconds. A calm, tidy page invites you to stay. A crowded page with clashing colours makes you want to leave. This is called visual appeal. UI also affects use. Imagine a button that is far too small for a finger: even if it is in the right place, people press the wrong thing. Good UI looks nice and also helps people read and press with ease.
Part of the UI
What it is
A problem to avoid
Colours
the colours used on the page
too many bright, clashing colours
Fonts
the style of the letters
tiny or very decorated letters
Layout
where the parts are placed
a crowded page with no sections
Buttons
their size and shape
buttons too small to press
Worked examples
first seconds→first impression→stay or leave
Laila opens two invented quiz apps. The first has a calm blue and grey page with big, clear buttons. The second has eight bright colours and tiny buttons. She stays with the first. Her first impression decided, even before she tried any question.
Button
Result
tiny
wrong presses
big enough
easy to press
A grandfather has trouble pressing a tiny “Next” button on a phone. His grandson makes the button bigger in his paper design. Bigger buttons are a UI choice that helps use.
Class activity
Take a sheet of paper and draw a screen with four buttons. First make the buttons tiny and crowded, then draw the same screen again with bigger buttons and more space. Ask a family member which one is easier to use and why.
Practice
1
What does UI stand for in your own words?
The look of a product: colours, fonts, layout and buttons.
2
What is a first impression?
The feeling you get in the first seconds of seeing something.
3
Name two things that belong to UI.
For example colours and fonts (also layout and button size).
4
Why can a button that is too small be a problem?
People press the wrong thing or cannot press it at all.
