UI (User Interface) and UX (User Experience) are two terms that get mixed up quite often, and for several reasons. They both sound pretty cool for the wannabe-tech-lord to know. So I’ll lay out in simple terms the difference between each, and what makes either of them good.

UI

  • How the application looks/the visual design of the app
  • Buttons, text areas, colours, etc.

UX

  • How the application feels/the general flow of the app
  • Ease of input & navigation, smoothness of performing actions, no lag, etc.

 

Is it clearer now? Think about the words interface and experience. An interface is where the user interacts with the application, and designing an interface is making it look good and clean. An experience is the user’s impression while he/she is interacting with the app, thus an app that is easy to navigate around and doesn’t lag has a good user experience as it leaves a good impression.

 

What makes a good UI?

Now you know that UI and UX are 2 different things, but the confusing bit is that you have to think of both when designing either. Part of what makes a good UX is a good UI, and your app’s UI also becomes its personality.

UI design is a very broad field, and everything you need to know to get good at it definitely can’t be covered in one article, so I’ll give you a general idea of what makes a good UI.

1. Good use of Typography

The use of font, text styles, sizes, and colours can make or break an app or website’s UI. A general rule (with everything, even beyond typography) is to keep things simple. Don’t mix more than 2 different fonts in the same screen. Trying to look flashy will only result in things looking messy for the user. In fact, most Android apps only use one font throughout the whole app (usually Roboto).

This is also the case with the Wikipedia app. The header (“In the news”)is emphasised solely through its size. It doesn’t need to stand out any more than that as anymore would make it look like it’s trying too hard to stand out. The date (“Jul 5, 2017”) is a less important element, so the design shows this through giving it a smaller size and a more faded colour. All bodies of text shown here use the same font. Most importantly, all of these text elements are easy to read which is what text is usually used for anyway.

You might notice that the font used is sans-serif, and you will mostly only see sans-serif fonts in most apps. Don’t forget that the UI makes the personality of an app. A serif font would give a more ‘sophisticated’ vibe which doesn’t often go well with most apps in a modern piece of technology, but for an example of an app that uses a serif font to great effect, check out the bottom of this article.

 

2. Picking the Right Colours

There can be a lot of science behind colours. I’m sure you’ve come across the psychology of colours at some point. Chances are, you might even know and understand it. This all applies to UI as well. A good UI is composed of colours that compliment their elements without trying too hard to be flashy. Starting to see a pattern here? Good UI is all about bringing everything together without making anything stand out more than it needs to.

Here in the Google Play app, you can see a variety of colours being used. All of Google’s apps now follow material design, a unified system that combines theory, resources, and tools for crafting digital experiences (as mentioned by Google). The app’s main theme colour is a light green, and you can see it more than any other colour. Two of the buttons on top are green, as well as the “see more” button and the prices on the apps. The other buttons on top are different vibrant colours to give the application a more “playful” vibe while varying shades of white cover the rest of the app which makes the elements with colour stand out more. This app shows a perfect harmony of colours which is what you want when designing a good UI.

3. Placing the right elements in the right spots

This is more of something that you will get used to overtime, but knowing which UI elements to use and where to place them is a big part of building a good UI.

This app makes good use of these UI elements. The top bit is an extended appbar. Elements are placed inside it to display key information and a tabbed interface which allows the user to switch between different sets of information (habits, dailies, etc.), making it easy to navigate through any of them. A floating action button menu is used to perform a key action, and in this case, it is to add new items of different sorts.

A good use of UI elements should be intuitive and easy to use, giving the user a more natural grasp of the app, allowing him/her to know where to look for information or how to perform actions without much or any experience of using the app before.

Now you might be thinking “Isn’t this supposed to be the UX part of the app?” and you know what? You’re actually right! But as I mentioned earlier, the UI is designed to make a good UX. Let me show you how UX goes beyond UI

 

What makes a good UX

1. A Consistent UI Across Multiple Screens and Devices

How would you feel if you were navigating through an app that was mostly light and vibrant and then suddenly it turned dark and monochromatic and you didn’t know why? Confused? Uncomfortable? It certainly wouldn’t feel right.

A consistent UI throughout different screen and devices is key to a good UX to keep things familiar and make the app feel like a more “natural” environment.

2. Ease of Input and Navigation

How many times have you used an app and found yourself lost in it, knowing it can do something and wanting to do it but not knowing how to do it? Chances are, you no longer have that app in your phone because you didn’t like it for that fact. Making an app intuitive is an important element to its design. It should always be as natural for the user as it can possibly be, and a common way of doing this is following the same design and navigation principles as most other apps, for example, putting all your shortcuts in a side navigation bar or using a tabbed layout.

 

3. Smoothness/No Lag

Do I even need to explain this? What can I say? Lag is bad… Don’t do it. Would you use a laggy app daily? No? Well don’t do it then.

 

Summary

UI and UX are different but closely related fields. UI is how the app looks, and is designed to provide a good User Experience. UX is how the app feels and good UX is achieved through smart design choices within the UI to leave the user with a good impression and natural feel for the app. If you want to explore deeper into either, there are tons of articles about both of them online. I recommend you go check them out, or how about the content on my blog if you want to find out more about all things Android?

(So you actually managed to write an article without advertising your app. I’m proud of you)

“What do you mean? That’s why I called you here.”

(Wait, what? No, sto-)

You know what else makes use of good UI and UX? Class-ify School Assistant and Planner. It uses a careful choice of colours and typography to give the app a ‘school’ vibe using two different fonts on its home screen to great effect!