UI vs UX

User Interface (UI) and User Experience (UX) are often confused with one another as they both work hand-in-hand. Here is a simple breakdown of the two,

User Interface (UI): This is the cosmetic appearance and superficial functions of an application (or product). It is focused on the look and feel of the application. It helps people navigate the application with ease to complete their task. Some examples of elements that make up the UI include fonts, colour, layout, design, and stylistic functions like a drop down menu in an online application form.

User Experience (UX): This is focused on the interaction that the user takes on to complete a specific task. It is more operational than stylistic (e.g. the fields and options on an online application form that a user must complete, any operational functions like ‘upload’ and ‘submit’ etc.)

Here is a sweet analogy by the Nielsen Normal Group,

For more detail on UX, refer to this article on UX vs CX. Read on for more information on how we can build a good UI.

User Interface (UI) best practices

There are many elements and considerations that go into building a great UI. Adobe has condensed these into 4 key components,

1. Control: We want the user to feel like they are in control. We don’t want them to feel lost when interacting with the application. Here are some prompts we can use to create UI that empowers the user,

   1. Are there enough cues to help the user navigate easily?

   2. Can the user ‘go back’ or ‘undo’ easily if they make a wrong step?

   3. Does the user receive enough feedback to confirm an action has been taken (e.g. form submitted, system status, page loading etc.)?
      

2. Comfort: We want the user to feel comfortable using the product. It shouldn’t feel unusual or challenging for the user. Here are some steps we can take to incorporate a sense of comfort into our application,

   1. Eliminate jargon to make the application more usable

   2. Remove elements that are not helpful or require repetitive input from the user

   3. Have sufficient security and privacy measures in place and make them known

   4. Design using colour and bigger elements, especially for key actions, to make it easier for users to navigate and make decisions with confidence

   5. Be clear and helpful with error handling so that the user knows what to do next

   6. Relate back to users’ real-world experience by using metaphors so that the application feels ‘familiar’ (e.g. using a trash can or recycle bin icon and name for deleted item storage)
      

3. Consistency: We want the elements of the application to remain consistent in both style and function. This helps the user become more familiar with the interface and confident navigating it. With greater consistency across the interface, users will know what they are looking at and know what to expect with every action.
   

4. Reduce Cognitive Load: At the end of the day, we don’t want our users to have to think too much when using our application. They should not have to make complex inferences to perform an action. Here are some tips for this,

   1. Good visual organisation helps people identify and absorb information easily

   2. Minimal steps or actions to complete a task makes makes the experience quick and favourable

   3. Prioritise recognition over recall. It is easier to recognise something than to learn and remember something new, however simple it might be.

Learn more about UI and UX!

Adobe XD Ideas is a great forum that provides insights on the practice, business and impact of design. It is a perfect resource for anyone looking to specialise in UI and UX design.

Nielsen Norman Group is a leader in Research-Based User Experience and has a whole library of information and articles that go into the details of CX and UX. You can enroll for their courses and conferences if you intend to specialise in this field.