☰ خطة العام · تكنولوجيا المعلومات والاتصالات (بالإنجليزية)

User interface (UI)

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

UX or UI? Judge a design

ICT Prep 2 Term 1, Unit 2, Lesson 1: pp. 46–53
GoalSort design comments into UX or UI and say what to improve.
New words
UX · how easy and pleasant the use isUI · how the product looksrating sheet · a table where a group gives each design pointsimprove · to change something so that it works or looks better
Explanation

Think of a restaurant. The decoration, the plates and the menu’s lettering are the UI. The food, the waiter’s help and the waiting time are the UX. A restaurant needs both. In an app, comments like “the letters are too small” or “the colours clash” are about UI. Comments like “I cannot find the timetable” or “it takes too many steps” are about UX. Many comments touch both, because a looks problem can make use harder. When you judge a design, say the comment, decide if it is UX or UI, and write what to improve. A small group can use a rating sheet to give one to five points for each idea.

UXUIeasy to findfewer stepscolours, fontsbutton lookboth shape howthe user feels
Worked examples
CommentUX or UI?
letters too smallUI
cannot find the timetableUX
colours are tiringUI
seven taps to log outUX
A class sorts five comments about an invented app. “The letters are too small”: UI. “I cannot find the timetable”: UX. “The colours are tiring”: UI. “It needs seven taps to log out”: UX. “The page jumps and the buttons look odd”: both.
012345454232clear letterseasy menucalm coloursDesign A (made up)Design B
Hana’s group uses a rating sheet for two paper designs, A and B. Each member gives points from one to five. A gets 4 and 5 and 4 for clear letters, easy menu and calm colours; B gets 2, 3 and 2. They choose A and write one thing to improve in A.
Class activity

With a classmate, write six invented comments about an app, three about the look and three about the use. Swap, then sort the other pair’s comments into UX or UI and write one improvement for each.

Practice
1
In the restaurant picture, what is the UI and what is the UX?
2
“The colours are tiring.” UX or UI?
3
“It takes too many steps to find the page.” UX or UI?
4
Why can one comment belong to both?