The Difference Between UX and UI

Due to similar acronyms, the two concepts of UI and UX can often be confused and their role in the design process misunderstood. Both concepts are essential to a successful design and work closely together, however, they refer to different parts of the same process.


UX Design

Put simply, UX refers to user experience and relies heavily on consumer research in order to understand how your audience relates to your product or service. The whole concept relies on identifying a common problem amongst your target demographic and devising a solution. In order to effectively arrive at a solution, UX requires heavy research into the user journey and identifies a value proposition. Studying the steps that lead to a conversion, call to action or before users encounter a certain problem can help illustrate how to support user experience best. Collection of both qualitative and quantitative data through methods such as focus groups, empathy maps, personas, desk research, thematic interviews amongst many others allow the designer to develop an effective solution.

To further understand the UX process, the Design Council released a structure that is followed by designers to move from problem to solution space. The double diamond includes Discover, Define, Develop and Deliver which are key stages in the UX process. After research, designers can effectively develop prototypes in the form of wireframes and user flows which are passed on to UI designers.


UI Design

UI stands for user interaction and refers to how your audience interacts with your product or service, such as your website or application. This could be down to the formatting of buttons or web navigation in order to improve the overall UX of your product/service. Whereas UX makes designs useful and relevant to the target audience, UI makes the interaction more convenient and more appealing. Based on data revealed through the process of UX research, UI designers can choose typography, colour, and layouts most likely to appeal to their chosen demographic. UI effectively controls the visual aspects of the design process and serves to improve overall UX with visual cues and efficient navigation systems.

Once you have established the basic usability of your web page, UI can add personality and uniqueness to allow your website to stand out from competitors. UI offers an opportunity to forge a more emotional connection with your audience by integrating design elements you know they would prefer.


Case Study

In order to understand the process of UX and UI, we can look at how it works within web design. Abbey Masterbatch’s clientele will need to contact the company directly in order to make a purchase. Knowing this, the UI designer has chosen to include the company contact details in the header and used visual cues to highlight it. The contact information is accompanied with icons, uses a different colour font to the menu and highlighted in blue when the mouse rolls over it. This visual aspect improves the overall user experience and directs them towards the information that is most useful to the user journey.


Final Thoughts

In order to differentiate between the two concepts, CareerFoundry offers a clear summary of the roles of UX and UI stating that UX deals with macro-interactions and UI deals with micro-interactions. Both work together to support the best possible consumer experience. Although it is common to think UI occurs after UX, the whole process is iterative and designers can return to a step if prototypes are not receiving the intended response.

Stay up to date with news, inspirations and events

16 Web Design Gateshead