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!

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.

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.

‍

Beyond ensuring that an interface appears visually pleasing, effective UI design takes one step further in considering the purpose behind different aesthetic choices. The ultimate goal of UI is to ensure that the user’s experience with the interface is intuitive and enjoyable. Visual communication here takes the form of contrast and hierarchy. Whether it is to prompt the user to take a specific action or help users retrieve the information that they are searching for, good UI guides the user's eye to the vital information first.

It ensures that the least amount of effort can yield the most satisfying outcome for the users.

Hence, UI designers are not only expected to wear the hats of a creative when it comes to designing visual elements. They have to anchor their design decisions from the users’ perspective. In anticipation of these user preferences, they can then maximise the efficiency and responsiveness of any digital product.

Skills Needed | Branding, Typography, Colour Theory, Visual Design, Interactivity and Animation, User Empathy

Tools of the Trade | Sketch, Adobe XD, InVision Studio, Figma

UX Design, or User Experience Design, is a multi-disciplinary field that considers the combined experience of each and every touchpoint a user has with a product, service or system. In the context of a digital product, the complete user experience goes beyond its front-end beauty and usability (UI). It also considers any indirect experiences or associations the user has that is related to the product as part of the entire user journey. In other words, UX actually begins way before a user directly interacts with the product or service.  

True story, bro

The UX design process is extremely diverse. Duties of UX designers cover seven core disciplines:

User Research – The process of gathering data on the target users’ needs, behaviours, motivations and pain-points in other to uncover insights that would inform the design process.

Information Architecture – The science of organising, labelling and structuring content of websites and applications in an effective way. The goal of an effective IA is to help users find information or complete tasks with ease.

Interaction Design – The practice of designing the interactive interfaces for products and services to enhance the overall user experience between the system and its user. A great example of a successful interaction design is the pull-to-refresh design pattern that allows a user to update their content.

Visual Design – The strategic use of typography, colour, white spaces, images, and fonts to enhance a product’s aesthetic appeal and interaction. The most important design principle is to create a sense of unity across all elements in a product.

Accessibility – The practice of building digital products that can be used, understood and enjoyed by all users regardless of their abilities and contexts. This includes individuals who have some form of physical, cognitive or neurological disabilities.

Usability – The measure of how effective, efficient and satisfying it is for a user to accomplish a specific task with a digital product. Usability focuses primarily on the functional aspect of a product.

Content Strategy – The framework that guides the planning, management and distribution of quality content, that is backed up by data and user needs.

Skills Needed | Prototyping, Wireframing, Customer and Competitor Analysis, User Research, Exploration and Iteration, User Empathy

Tools of the Trade | Wireframe.cc, Pixate, FlowMapp, Balsamiq, Treejack

Summary

At its core, both UI and UX are centred around empathising with the users' needs and designing with the human behaviour in mind. UX focuses more on the overall feel and functionality of a product, while UI is primarily in charge of how it’s laid out. For smaller projects or teams, the role of both UI and UX usually falls on the same person. Before choosing their specialisations (if they do), most designers are also trained in UI and UX.

The important takeaway from this is that the success of a product depends on the collaboration between UI and UX. A stellar interface is nothing without data-driven and intuitive wireframes, and the most enjoyable user experience is only limited by an unfriendly user interface.

Hatch is an impact-driven business with the mission to make digital and design opportunities accessible for all.  That's why we are committed to sharing valuable resources like these freely and openly for the community.

You might also like:

Asking the Right Questions During User Research

Master the Art of Storytelling Using Colours in Your Web Design

‍

‍