User Interface (UI) and User Experience (UX) are terms often used interchangeably. In fact, these two terms are quickly becoming dangerous buzzwords that are used inaccurately, creating massive confusion in the industry. A simple Google search will show that UI Designer and UX Designer jobs are listed under similar titles and descriptions.
In addition to helping us identify and apply for the right role, understanding the key differences between UI and UX helps us in using the right concept in our own applications. This document will address the difference between UI and UX as well as some of the techniques used in UI Design and UX Design.
UI is about the design of the buttons, the layout of the website and the responsiveness of the application. It encompasses the presentation and interactivity of the application. On the other hand, UX is concern with the ease of use and the pleasure provided through using the application. In short, UI is about the look and feel while UX is about customer satisfaction.
Due to the overlapping nature of UI and UX, you might still have some questions such as 'Doesn't improving the UI also improve the UX?' Indeed, it does. In fact, UI can be part of UX.
Note that can is used because UI is no longer a necessity to UX due to the emergence of zero UI, which won't be covered here.
To gain a better understanding, let's look at real life examples of good UI but bad UX. A prime example would be the Mystery Meat Navigation problem. It refers to buttons and links that do not explain themselves; users have to click on them to find out where it leads. In essence, the pursuit of clean and neat UI has resulted in omission of details that provide clarity for the user. This results in bad UX because people do not like to puzzle over how things work. A good UX should never make the user think.
If you would like to read more about the differences between UI and UX, here are a few articles:
Flat and minimalist design are technically easier to create than realistic design. Thanks to the rise of flat and minimalist design you don't have to be a photoshop expert to get started on UI design.
A good way to start is by observing existing designs. Use existing UI Designs as references and try to apply the design patterns in your own application. Using UI design guidelines can help to highlight and avoid common mistakes. Online lessons like Hack Design also provide a variety of materials covering the basics of UI design. The best thing is that they are free!
Here is a non-exhaustive list of UI design concepts you can choose to dive into if you are interested:
At it's core, UX Design is about understanding both user and business goals, and tailoring a product that strikes a right balance between both goals within given constraints such as budget or time.
Just like Software Development, UX Design is an iterative process. It involves many stages like researching, planning, testing, and at each stage are many different techniques that you could use. A good place to find these techniques would be the UX Project Checklist created by Andrea Soverini.
The metaphor of building a house by Clayton Yan (UX Designer at UserTesting) illustrates this aptly. UX is the structure (i.e. the number of rooms, one-storey or two-storey and where the front door leads). Meanwhile, UI is about the visual (i.e. whether the same wallpaper or vases is used). A good UX with bad UI is like an ugly house with nice structure. A good UI with bad UX is like a beautiful house with the front door leading straight to the bathroom. To sum it up, UI and UX are equally important in creating an awesome experience for the users.
As stated above, UX is a highly iterative process to achieve a fine balance between meeting the needs of the target audience and achieving business goals. Many times the functionality of a product is prioritised over the experience it gives. However this should not be the case when experience is the deciding factor in delighting or frustrating users.
Catering the right experiences for users does not have to be difficult. The stages of UX Design are logical and can be decomposed into four main stages as shown, with each section supplemented with what you would do during each stage, and the expected deliverables at the end of each stage.
The first stage is Preliminary Research. This is where you would:
After Preliminary Research, the next stage is Prototyping. This is where you would:
After Prototyping, the next stage is User Testing. This is where you would:
After User Testing and the launch of the final product, the next stage is Maintenance. This is where you would:
The clearly-stated objectives and deliverables of each stage culminate in a well-defined target audience and a well-designed prototype needed to match the expectations of that audience. UX Design requires empathy in the users' shoes and effort to address their problems, however all that is worth it in the grand scheme of delighting users when they use your applications.