As a business owner, you have to wear many hats – or at least, have a basic understanding of many topics. This is great when operating at a high level, but when you get into the detail you often come across terms which you’re not familiar with.
When working on website projects there are two terms which often need to be clarified – UX design and UI design. Part of the job of a good web developer is helping your client understand these terms. Sometimes this just means explaining the differences.
It’s understandable that UI and UX design are often confused. They’re usually thrown together into a single term, UI/UX design. On the surface, they may seem to describe the same thing. But learn the differences, similarities and how they work together and you’ll gain an edge when discussing your website or app project.
It’s often hard to find a clear definition of UI and UX design for business owners. But look no further, we’re going to break down what each term means and how they work together in web development.
UI design is the visual side of web development. It focusses on the graphical layout of a website. UI designers are essentially graphic designers. Their main focus when building a website is how it looks, it’s up to them to make sure it is attractive and matches up with the branding of the client.
User interface (UI) design is the process used by designers and developers to build interfaces for websites, apps and software. With a focus on how things look graphically, designers aim to create websites which users find nice to look at and pleasurable to use.
UI designers need to make sure every visual element is consistent in style and works in harmony. This includes the buttons, text fonts, images, sliders, forms and everything else a website visitor interacts with. UI design covers everything that needs to be designed graphically including screen layout, transitions and animations.
UX design may sound fluffy at first and unless you’re a web design professional it might not seem all that different from UI design. When you start to break it down and gain even a basic understanding of what UX design covers you’ll see it runs through the very core of your business.
User Experience (UX) design is the process of building a great overall experience for your customers, website visitors or product users. UX design covers many disciplines including web design, usability, accessibility & information architecture.
The word “design” is often what leads to confusion with UI/UX design. Most people struggle to separate out the graphical aspects from the more systemised ones. UX design is all about the overall experience of interacting with your brand, website or app. UI design is focused on how it looks.
A user’s experience is determined by how easily they find it to interact with your website. A good user experience leaves the website visitors satisfied that every element and button behaved as they expected.
UX designers determine the structure and functionality of a website. But more than that, they cover what happens in and around a website when a visitor interacts with something. This includes navigation, but also sign-up processes, follow up emails & support ticketing. If everything works well together and feels seamless, visitors will have a good experience. But if it feels complicated and disjointed then the experience will be bad.
So now you understand that UI design is about how a website looks while UX design is all about how it works, it’s time to look at the overlap and how they work together. Building a website (or app) is a collaborative process and the UX and UI teams need to work very closely together.
To put it another way, UI is everything you see, UX is everything you experience. With that, it’s easy to assume everything on a website is from the UI designer. But behind that, beneath the surface, there’s a lot that goes into UX design.
While it’s true that you’ll often find both of these skill sets in the same individual, especially web developers, it’s still important to note that these are still very distinct processes. There’s no point having a graphically fantastic looking website if it doesn’t behave as expected. I’ve seen some truly wonderfully wacky and artistic websites where the designer really showed off their abilities – however, unrestrained design talent usually results in a bad user experience.
Similarly, there is little point in having a logical and predictable website structure if it isn’t pleasing to the eye. It’s a balance, and recognition of the two processes is important, even for freelance designers.
When UI and UX work together, the UX team is mapping out the structure of your website, how all of the forms and buttons work and where they take you while the UI design team is working out how they will appear on the screen. If at some point, that a new section is needed on a website (for example a blog, or a support centre), the UX team will determine how this impacts the overall structure of the website, where new references and buttons need to be added to the existing website. The UI team then adapts their design to accommodate the new elements while maintaining the overall feel and consistency of the website.
You can easily spot websites where a fundamental change in how it works (with the addition of features or sections) was implemented without the input of the UI team. These websites look disjointed and like they have been built on top of each other. This is really common when a website has been built and then handed off to a client to manage themselves – one of the reasons we don’t do this by the way. A good web design service is always on hand as a website grows and evolves, ensuring it always stays true to the brand.
Research is a huge part of the process for both UI and UX designers. For both teams, the information gathering phase is key to producing effective designs and they follow a similar approach to do this.
Finding out what users want and what they expect from a website forms the basis of research for both UI and UX design teams. Such research often involves user testing, where real users interact with the prototype website to determine whether the design is moving the right direction. This feedback is then acted on and the research repeated with each new iteration.
This in depth level of research and testing is more common for projects with large budgets – but even small businesses can make use of inviting existing customers to be beta testers or making use of online usability testing services.
For both UI and UX design teams this process helps guide the process, however, the information each design team is looking for is quite different.
UI designers need to make sure the visual design of a website is aligned with the brand strategy, often outlined by the marketing team. Based on that brand strategy, the UI design team needs to understand a predict the website visitors expectations. An experienced UI designer usually has a good place to start, but should also research other similar websites to look for the commonality in the design structure.
You can learn from competitors websites, looking at what works and what doesn’t. While a designer should look to differentiate from the competition they should also stay within these expectations. A website for an accountant probably shouldn’t be an overly colourful, image-heavy or particularly modern – unless you’re really trying to disrupt the market.
While there are instances where UI can go against the norm (if that’s part of the brand strategy), UX design is fully focussed on user expectations. Having a button or element behave in an unexpected way on a website is generally best avoided.
For a website visitor, every experience they’ve had before with every other website or web application has helped shape their expectations for how websites are supposed to work. Go against these expectations and you’ll deliver a bad experience and frustrate your visitors.
UX designers need to have a good grasp of these user expectations or they could end up designing a website structure that seems logical to them but breaks the commonly accepted conventions. As an extreme example, most people expect that when you click ‘submit’ on a contact form you get a brief confirmation message but remain on the same page with no other actions. If clicking ‘submit’ then downloaded a file, let’s say a PDF brochure, however well-intentioned, this would cause most visitors to freak out. They would likely then delete the file and leave the website.
By now, the differences between UI and UX design should be clear. They involve very different skill sets, yet need to work together to deliver a successful website. The best graphical designer can’t save a confusing website layout, and a perfectly-logical website structure can be unappreciated when behind an ugly or boring visual design.
Both UI and UX design need equal consideration when approaching a website project to keep each other in check and focussed on the end goal – an attractive, yet functional website experience for your potential customers.
To learn more about our approach to web design and how we balance our UI and UX design, get in touch to arrange a call with one of our design team.
