Design Demystified | A Layman’s Introduction to User Interface and User Experience

Updated: Jul 26

Hatch Guide to User Interface (UI) and User Experience (UX)

UI (User Interface) and UX (User Experience) are among some of the most misunderstood terms in today’s digital era. They are often used interchangeably, and sometimes even packaged together under a single umbrella term – UI/UX Design. Truth is, UX and UI are not the same, nor do they represent a single discipline. Steer clear from any incoming confusion as you embark on a career in the digital and design industry. Find out how UI and UX are related to each other, and what this distinction means for aspiring practitioners.

Let’s simplify UI and UX using an analogy that we can relate best in Singapore – good, amazing hawker food!
Lau Pa Sat Food Court Singapore
10 points for those who recognise this place | Credit: Ethan Hu

Picture yourself in a hawker centre – you are greeted with an assortment of food and beverage stalls, and a spread of tables and chairs. Think about the layout of the space and everything you see. This is UI, or User Interface.

Next, let’s get down to UX, or User Experience. Take note of the atmosphere of your dining experience. What are some of the factors you consider when choosing where to seat or what to eat? How did you find the selection of food choices available? Were there any challenges you face during your hawker dining experience? How did these encounters make you feel?

Let’s move this into the digital realm and examine each term in greater detail.

Hatch Introduction to User Interface (UI)

UI Design, or User Interface Design, refers to all visual elements of a digital product’s interface. In essence, it comprises of everything users see when they interact with your website or app.

This includes the navigational touchpoints such as buttons and scrollbars, icons that guide their visual journey, and colour schemes and typography in headers and body texts. Every single micro-interaction a user has with an interface, right down to its interactive elements covering transitions and animations, collectively come together to make up UI design.

Example of User Interface (UI)