The Beginners Guide to UX and UI

Interchangeable phrases

Since entering the world of the Web 7 years ago, I have often found myself seeing references to both UI and UX being used interchangeably, but I have come to learn that there are indeed significant differences between the two.

Often confused and conflated (and it’s easy to see why), the two terms are usually placed together in a single term; UI/UX design, and as such are seen to be describing the same thing. However, as alluded to earlier, this is not necessarily the case.

Subtle differences

To begin with, “UI” stands for ‘user interface’. The user interface is the graphical layout of an application. Consists of numerous parts that make up the application, from the buttons users click on, the images within the application, the text they read, fields in which text can be added, any slider functionality, and all the rest of the items the user interacts with.

“UX” on the other hand, is referring to the ‘user experience’ within an application or website. The experience of a user on an app or webpage is determined by how they interact with it. It is important to understand whether the experience is smooth and intuitive or clunky and confusing. Does navigating the app/website feel logical or does it feel arbitrary? Does interacting with the application come naturally or does it feel like a struggle for the user to achieve what they set out to achieve within the app/website? User experience is determined by how easy or difficult it is to interact with the user interface elements that the UI designers have created – hence why the two terms can both be combined, confused and paired together as the same term.

In most instances, UI designers are tasked with designing the aesthetic of a user interface, whilst on the other hand, UX designers determine how the user interface operates within its design. Long story short, UI designers design how the interface within the application/website works. If it works well and feels seamless, the user will experience a good journey. But if navigation is overly complicated or unintuitive, then a poor user experience is likely. UX designers aspire to avoid the second scenario through their work and tend to work within the designs provided to them by the UI team. UX teams will often create wireframe mockups and renderings of their interface interactions and get user feedback. 

Due to the fact that they’ll integrate this into their designs, it’s important for UX designers to have a complete understanding of how users prefer to interact with their app/website designs

What are the key tasks and skills required of UX vs. UI designers?

The process of designing the user interface functionality and how it looks is usually a very collaborative process, and the two design teams (UX and UI respectively) tend to work closely together. 

For example, the flow of the application/website has to align with how all of the UX team designed interface elements will appear on the screen when the user is on a specific part of the application/site. The UX designer and the UI designer and their relevant teams will have to work very closely during this process. To further this example, if, at some point in the design process, it’s decided that extra buttons need to be added to a given screen. Then this will of course change how the functionality of the buttons will need to be laid out and could require their shape or size to be altered. In this instance, the UX team would determine the best way to show the functionality to the user, and the UI teams are required to develop their designs to fit a new layout where required. Great communication and collaboration between UI and UX designers both help here, in order to assure that the final interface that the user is met with, looks as good as it can, whilst also maximising its efficiency.

What’s the role of research in the UX/UI design process?

In order for both teams to achieve what they set out to achieve, research must be considered within their approach. It is imperative that both the UX and UI designers gather as much useful data and information as possible to aid them when it comes to curating appropriate designs, and as such, both parties follow a similar approach – however, the information gathered by both UX designers and UI designers is very different.

For UX designers, what the user expects to achieve during their journey is of great interest. UX designers often pride themselves on being aware of what a specific user will want to get out of using an application/website. An application/website might be easy-to-use and logical to its UX designer, but if a user comes across numerous issues or the functionality within the application goes against commonly accepted conventions, which users may have experienced over time, and as such the application behaves differently than what the user is expecting, then this could negatively impact the user experience itself.

Conversely, UI designers are trying to predict user expectations, as opposed to knowing them outright like UX designers will. UI designers will research past applications and websites within the same industry/market as the one they are creating for and investigate which applications/websites were successful or not based on their aesthetics. The exact look and feel is, of course, decided by the UI designer, but the common rules are something designers don’t often ignore.

Co-dependency

Whilst UI and UX are both different types of design that both involve different skill sets, it is no doubt that the two are integral to the success of an application or website that is used by a customer, client, etc. Execution of designs created by UI and UX teams often need to be impeccable, with both teams understanding of the expectations that a user may have when it comes to what they want to achieve through using an application. A design that is aesthetically pleasing will suffer if its interface is confusing to navigate, and on the other hand, a spectacular user experience can be negatively impacted by terrible interface design, of which makes the application dreadful to use.

Conclusion

Understanding the differences between both UX and UI is equally as important as ensuring both teams communicate effectively. When both teams combine and collate efficiently, the results can be strong and spectacular, combining both aesthetically pleasing user journeys, whilst also providing the user with functional journeys too.

As the old adage goes, ‘knowing is only half the battle’.

Whilst the differences aren’t always clear to see on the face of it, we at Embryo have managed to master both sets, and incorporate exceptional levels of communications throughout our projects, which has allowed us to be able to create some truly awe-inspiring websites. With that being said, hopefully the information delivered above has provided you with something to think about for your next project that requires some UX/UI design! If any of the above has piqued your interest and you’d like to discuss how we can manage your next project further with the team at Embryo, then give the team a call on 0161 327 2635 or get in touch.