Understanding the Difference Between UI and UX Design
Alok – Technology Graduate
When I tell people that I work as a UI and UX designer, it usually follows with a question about designing colour palettes, button shapes or fonts. These are all important aspects of UI design, but it is quite common for people to ignore the UX part of my job.
UI and UX go hand in hand with each other and each are just as important to the design of a product as the other. So, what exactly are UI and UX design and what is the difference between them?
UX is short for User Experience and refers to the interaction between human beings and the product being designed. The term “UX design” has been popularised by technology but it is a practice that has existed since long before. Everything from coffee machines to operating systems requires good user experience design to ensure the product is successful.
For example, an elevator with the buttons for different floors in a random order would have a significantly worse user experience than one with buttons in ascending order. In the technology industry, the same principles apply. A registration form with 25 different fields is less likely to encourage users to sign up than one with two or three.
UX design is a scientific process that involves performing research, analysing the subsequent data, and drawing conclusions about how the quality of interaction and the experience can be improved. UX design only considers how to enable the user to complete their tasks more easily, efficiently, and quickly. A common misconception is that user experience design is about the visual design, but this is not true. Instead it is about the overall experience and flow.
UI, on the other hand, is short for User Interface and refers to the visual design of products. Unlike UX design, UI is mainly restricted to digital products such as websites, apps or even the touch screen used to operate a photocopier. The user interface is the vector between the human and the technology and so it complements the result of the UX design process. The design of the user interface focusses on the look and feel of the product.
Given the example of the elevator, the user interface design refers to the size, colour and tactility of the buttons. It also determines the design of the interaction between the user and the technology such as whether the button lights up and how it bounces back after it is pressed. For a website or app, a UI designer will consider the size of the button such that it is large enough to be pressed by a finger and that the colour demonstrates the button’s importance.
A UI designer must design all the screens that a user will move through during a user experience. Good UI design must enable a user to get from A to B without thinking too much about it; this requires the designer to empathise with the user and their environment. A UI designer must consider the needs of all users, including those with disabilities and accessibility issues. For example, colour blind users may have difficulties differentiating between red and green buttons and visually impaired users may require voice or gesture interactions.
The Differences Between UI and UX
Now that we have defined what UI and UX are, we can start to identify the differences between them. To help understand the difference think about driving a car. UI design considers how features of the car look, such as the size of the steering wheel, the position of the pedals and the shape of the gear stick. UX design, on the other hand, is about how the car feels when it drives, such as the suspension, the responsiveness of the brakes and smoothness of the gearbox.
A UX designer will consider the user’s journey to achieve a particular task or solve a problem by breaking down the process. They must must consider each of the steps a user must go through to identify problems and bottlenecks and then develop solutions to iron these problems out.
Once the UX designer has developed the user journey and smoothed it out to make it as pain free as possible, it is the UI designer’s responsibility to translate this into the visual and interactive elements of the journey. Initially, this is done using wireframes which are low fidelity sketches of what the screens will look like. This is followed by high fidelity prototypes which is when the designer will apply colours, fonts, and animations.
What Skills Do I Need to Be A UI or UX Designer?
The fundamental skills that UI and UX designers use are not a million miles away. Both require empathy, communication, and organisation. The roles also require significant degrees of creativity and imagination, but in both disciplines, these are applied differently.
Since UX design is more of a scientific process, someone working in this industry will need an appetite for scientific procedures and methods. This includes everything from conducting research, designing experiments, and analysing data. A good UX designer will need to be able to communicate their scientific process and the results of any experiments to UI designers and other stakeholders.
UI design, on the other hand, might be considered a blend of science and art and so it demands skills which consider these equally. A basic understanding of psychology and how this influences colours, typography, and layouts is vital, as well as the ability to communicate these and translate them into prototypes and wireframes. An appreciation of animation is also important, and this will require a basic understanding of physics and motion. It is also helpful to have a basic understanding of code such as HTML and CSS to ensure that designs are realistic and achievable. Much like UX designers, UI designers also need to communicate their processes and decisions to developers and other stakeholders.
UX and UI design is a valuable career path and if you have an appetite for data analysis and/or graphic design then it could be a great way to start your career in tech. As technology has become more prevalent in our everyday lives, it has become increasingly important to blend the boundaries between it and the real world. UI and UX are the mechanism by which technology companies do this. Many employers look for designers who can spread their skills between both UX and UI so picking up skills in both areas can be beneficial.
If you are wanting to start building your skills in UI and UX design, then you should get stuck in! I would recommend starting with some free software such as Adobe XD or Figma and start designing apps and websites to build a portfolio. Remember that they do not actually have to be built, just proof that you understand the tools and processes is enough to get started. If you’re struggling for inspiration then www.dribbble.com is a great place to get the cogs turning.
And if you are still struggling to determine the difference between UX and UI design; remember: