تكنولوجيا المعلومات والاتصالات (بالإنجليزية) الصف الثاني الإعدادي، الأسبوع 8: What is user interface design?

User interface (UI)

الأسبوع 8 · الدرس ١ «مبادئ تصميم واجهات احترافية شيقة للمواقع الإلكترونية» (٢): واجهة المستخدم UI ومبادئها والفرق بينها وبين UX · 3 دروس

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

What does UI stand for in your own words?

What is a first impression?

Name two things that belong to UI.

Why can a button that is too small be a problem?