IXD Lecture (IV) Questions

19 FEB 2025 -- IXD Lecture 4

In Lecture 4, the lecturer gave us the questions below to think about...

============================================================

1. What is User Interface (UI), and User Experience (UX)?

User Interface (UI)

“User Interface (UI)” is a gateway allowing humans to interact or control digital surfaces, like an application or a device interface…  

In terms of “User Interface”, “Graphical User Interface” (GUI) has been mainly used as its’ synonymous (Kolko, J., 2011) [1]. The cornerstone of GUI design is because GUI has major overlapping nodes between UI – Use of tailored, mapped, reactive  “visual elements”. However, being “voice” and “menu” driven is also considered part of UI design (Coursera Staff, 2024) [2].

The UI focuses on making the user interact with the user surface effortlessly by using navigational visual elements, input controls, informational feedback, and mapped containers [2].

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Here is an example that I was impressed  from reading these books from our lecturer, I would like to give some examples of my understanding:

Visual elements

• Visual elements included colour use, typography, typeface, and pictograms (pictorial images in this book (Lidwell, W. et al., 2003)[3]. 

  • Typefaces like bold, italic, and underlining should be used to emphasise and bring attention [3].

  • The use of colour can make surface aesthetic, but it can also convey special meanings [3].

    
    

Input Controls

• Input control is an important part of the surface of an interactive element.

  • For example, a “button” holds up the affordance to perform an action that is executed by a user (Cooper, A., Reimann, R. & Cronin, D. , 2007) [4].

  • It is also a communication between the user, the surface (a bank application, for example), and the system (a process like paying bills in the real world).

    
    

Informational Feedback

• After the user acts on a surface or an application, for example, the surface will give feedback, whether simply a loading bar or an error message.

• It has the affordance to…

  • Tells the user the status of an experience, like the loading bar, to tell the user “ the system is processing user enquirement”, not a blank screen telling nothing.

  • Tells the statement that the user currently encounters, for example, a user inputted a wrong value and what is expected for input [3].

Mapped Containers

• Listing all things out on a single screen can be daunting and horrible. A poorly mapped container lowers user understanding of what happens to the user surface.

• However, by use of the “Hierarchy” concept, by mapping similar concepts, meanings, or similar actions into organized, relational structures [3] shall be done.

====================================================

User Experience (UX)

“User experience” concerns how design affects user feeling and perceived experience, which requires user research to understand their “pain points”, and it evaluates the human factor.

A user may suffer from a hard-to-use, inefficient, barriered service platform or media, and a UX designer would deal with the problems with it with serval layers below, according to UK lecturer slides (Xingzhi [GiGi] ZHENG., 2025) [5]. 

"5-S" Elements, from abstract to concrete:

Strategy: To align user needs and product demands with the market [5].

Scope: To define the content and function requirements [5].

Structural: To evaluate information interactivity and architecture [5].

Skeleton (Wireframe): To define planned navigation within UI elements [5].

Surface: The overview of all the elements or the actual surface facing the user [5].

====================================================

Reference

[1] Kolko, J. (2011)Thoughts on Interaction Design, 2nd edn, Elsevier Science & Technology, Chantilly. [Accessed 20 FEB 2025]. (VTC Summon - ISBN 978-0-123-80930-8)

[2] Coursera Staff (2024) What Is UI Design? Definition, Tips, Best Practices Coursera. 2024 [online]. Available from: https://www.coursera.org/articles/ui-design  [Accessed 20 February 2025].

[3] Lidwell, W. et al. (2003) Universal principles of design : 100 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Gloucester, Mass: Rockport.  [Accessed 20 FEB 2025].

(VTC Summon - ISBN 9781592530076 (hbk.))

[4] Cooper, A., Reimann, R. & Cronin, D. 2007, About face 3: the essentials of interaction design, 3rd;3. Aufl.;3;Revis and updat;3rd, completely rev. & updat; edn, Wiley Pub, Indianapolis, IN.  [Accessed 20 FEB 2025]. 

(VTC Summon - ISBN 978-0-470-08411-3)

[5] Xingzhi [GiGi] ZHENG. (2025) Designing Guidelines for Brands & Human Interfaces 品牌與用戶界面的設計守則. Interaction Design, BSc Digital Media [online]. Available from: https://moodle-nay.vtc.edu.hk/mod/resource/view.php?id=136464  [Accessed 20 FEB 2025].