An 8-Point Checklist for Great UI/UX Online

Even if you don’t know what the term UI/UX encompasses, you’re likely to have experienced it before as a citizen of our technology-driven world. Read on to learn what falls under both UI and UX, and how you can identify what constitutes good or bad user interface and experience.

UI/UX Design
Gordon Chen
Contributor

As the coronavirus continues to take hold of the world, most of our activities have been shifted online. More than ever, we’re counting on remote connections to keep our day to day moving. This has necessitated technology to become more seamlessly integrated into our lives. Although the number of people online has been increasing even before COVID-19, its emergence has accelerated this growth.

Technology is an area deeply tied to the field of User Interface and User Experience (UI/UX). UI/UX is a term we’ve begun hearing more often in Singapore. You often hear them being used together, mentioned as a single phrase. And for those who are unfamiliar with them, you might think they are one and the same.

They are, however, not interchangeable. UI and UX seem to come in tandem, but they’re separate fields that work closely together. Though these terms are used largely in the tech and digital industries, they aren’t limited to them either.

For this article, we’ll examine what UI/UX constitutes, so you can differentiate the two. We’ll also cover elements you should focus on, for good UI/UX online.

What is UI (User Interface) Design?

UI, or User Interface, represents the point at which people interact with products and devices digitally. In other words, it’s how users interact with websites, apps and programs, through screens and buttons on digital devices. On that note, User Interface is strictly a term to be used with digital or virtual programs.

User Interface Design then refers to designing all visual elements of an interface. This covers many things, such as icons used, animations, colours, and even the typeface. Essentially, good UI design feels intuitive to users, and is also easy on the eyes.

What is UX (User Experience) Design?

UX, on the other hand, stands for User Experience. As the name suggests, it’s concerned with the experience an individual has through using a product, app, or even a particular service. This experience is affected by how users feel in a process.

UX Design is thus the design procedure focused on making usage easy and enjoyable.

This is where UI and UX are related:

A user interacts with programs and apps through interfaces, which is why UI design is important. But depending on the UX design, their experience with an interface can either be a breeze, or nothing short of nightmarish.

“In short, UI is about the look of the product; UX is about the ease of using the product.”

If you would like to learn more about the two fields, check out our detailed introduction to UI/UX design.

Bad things are clearer than good things; same goes for UI/UX
It's harder to identify something that's good

Bad UI/UX is apparent, good isn’t

We all want to be happy, and we love having a great time. Yet it’s much easier for us to remember bad things that happened to us, instead of something good.

The same goes for products and devices. In fact, various studies have shown that people remember negative things more vividly. A psychology professor at Stanford University indicated how we tend to notice the negative more than the positive. It might have something to do with evolution and survival: in the past, it was more important for people to spot the lion in the brush, than a beautiful flower growing on the other side of the way.

What constitutes a pleasant encounter with any product or service is essentially a fuss-free experience. We can’t always pinpoint how or why a well-designed product is great.

And that’s the beauty of good UI and UX design!

What good UI/UX looks like

As UI or UX designers, understanding what makes good UI/UX is crucial. Simply put, you need to know what counts as good design, so you too can design well.

The good news is, even if you’re completely new to these fields, you can learn to be a good UI or UX designer from avenues you are already familiar with. Start by digging deeper into what goes behind a good product’s UI/UX online. You can tap on existing experiences with your most-used software or applications. Keep a mental checklist of good UI/UX considerations outlined below and pay closer attention to whether the software fulfills them. You’ll be able to identify which aspects are great, and why.

Checklist of 8 components to improve UI/UX of programs
General elements to focus on


Guidelines to good UI/UX online

1. User Control

  • Is the user in control? Can features be personalised to the user’s behaviour and preferences?
  • With good UI, users will be able to customise the interface to their liking, depending on how you interact with it.

2. Cognitive Load

  • Is there too much information? Is anything unnecessary?
  • A good UI will have just enough information displayed, providing users with the main options, or potential next steps to take. What an interface presents to users should be relevant and not excessive.

3. Visual Hierarchy

  • How is the content organised? Does it flow naturally?
  • Users will see that information is presented in an intentional manner on a good interface. Good UI designers employ visual design principles to draw the users attention to the information that matters first.

4. Use of Language, Signs and Symbols

  • Are they easily understandable? Might they be misinterpreted?
  • Straightforward and plain use of these contribute greatly to a user’s experience. Make sure there’s no room for ambiguity in word or icon choices. It’s even more important if it’s related to your product’s calls to action (CTAs).

5. Feedback

  • Are there visual/audial cues when you make changes? Does the program acknowledge your actions?
  • Having noticeable feedback is crucial in a good interface, so users know when their interactions are registered. This assures them that changes have taken place, saving them time from double checking.

6. Error Prevention & Confirmation

  • For bigger actions that are done less often
  • Error Prevention: Does the program help avoid unintended errors?
  • Confirmation: When performing certain actions, does the program prompt you to confirm them?
  • When errors occur, users want to be able to solve them. But it’s better to mitigate errors altogether. Good UI/UX should keep users from making accidental decisions, and allow users to undo them.

7. Consistency

  • Typography, Location and Design of Symbols: Are they consistent throughout supported platforms and devices?
  • A good UI ensures that the symbols and options are standardised across all devices to avoid confusion. They should look identical, in appearance (icons) and be in the same typeface (worded options). This ensures the interface will remain familiar and easy to use for users.

8. Accessibility

  • Is the app/software accessible to others who are disadvantaged, or of different needs? Can it be used equally well, no matter the context?
  • For the UI/UX of a product to be good, inclusivity is crucial. Good UI design should embrace everyone in your target audience.

This list will help you streamline factors you should pay attention to. You’ll also understand how each component can be improved.

And that’s how great UI and UX should look online! Now that you have a checklist, you can work on modifying your products and services with greater focus.

If you’re not getting any customer feedback, don’t worry! As we mentioned earlier, that might be a good sign too. That could mean your users are finding things easy to use and interact with!

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.

Like what you've just read?

Here are some great UI/UX resources you might find useful:

Learn more about what we do at Hatch: