UX and UI are both terms that are bandied around a lot, but there is often confusion as to what the difference is. There are important differences between the two, but they are becoming increasingly inter-mingled, as it is very tricky to have one without the other. This guide will outline the key differences and some of the history and theory of UX and UI design.
The Basics
UI (USER INTERFACE)
UI, or User Interface, is the surface look of a website and UI designers aim to maximise the usability and efficiency of a website. They will take into consideration factors such as how the site looks, whether it is visually clean, and generally assess the overall site in terms of its visual appeal. It also includes the design and placement of fonts, and location of navigational buttons. Successfully building a user friendly UI requires a designer to think carefully about how elements like pop-ups and interstitials might affect a user’s ability to understand what a website does or how to use it.
When considering ways to improve UI, as designers we are constantly questioning whether key information is accessible on the site, or ‘is the information displayed in the clearest fashion?’. This will require a UI designer to think about how colour combinations, padding, size, positioning and much more might impede or enhance the user experience.
UX (USER EXPERIENCE)UX stands for User Experience and is a much more widely used term throughout design – unlike UI which is usually limited to web design and products with a digital user interface screen, for example a Sat Nav. UX is a term coined by Don Norman, a cognitive scientist working at Apple in 1993. He explains UX like this:
“Think through all of the stages of a product or service – from initial intentions through final reflections, from first usage to help, service, and maintenance. Make them all work together seamlessly.”
User experience, then, is defined as the end-to-end experience that anyone engaging with a product has, and the experiential response that they might have. Good UX will be pleasing, and intuitive. Lots of successful elements of UX become standardised, for example the ‘hamburger’ menu symbol has become the ubiquitous indicator for ‘click here for more’, and you might use it everyday without even thinking about it.
Generally UI is more changeable, and driven by contemporary design trends that will inform a site’s feel. It is also increasingly incorporating features to help a wider variety of users, such as those who are visually impaired or potentially an older target demographic, in which case larger call-to-actions and buttons can provide a clearer (and easier to use) UI.
UI is an important aspect of UX, but UX also encompasses more structural features like site architecture. You might have a gorgeous site that draws people to it on the sole basis of its excellent design, but if it loads slowly then that will subtract from the UX. On the other hand something like Excel certainly won’t win any beauty prizes for its interface, but it uses familiar and recognisable features which contribute to the overall experience, and therefore UX.
The History of UX Design
When the first computers came onto the market, users had to input vast amounts of code in order to run a program. This all changed in 1984, when Apple came along with the iconic Macintosh computer that promised to ‘show you why 1984 won’t be like 1984’. This was the first to use a Graphical User Interface (GUI) that they could directly interact with for the first time. With innovations like click and drag, and a ‘metaphorical desktop’ which used real life objects like folders to signify virtual objects, it aimed to be as intuitive as possible. It is a testament to its success that many of these elements are now standard across computing interfaces.
Apple have sometimes been accused of being over-zealous in their defence of certain aspects of their UI and UX, although this is partly because they are one of the foremost innovators. They even took Microsoft to court, which took 6 years of litigation, over similarities like ‘click and drag’ and ‘overlapping rectangular windows’. Unfortunately for them, they only managed to win on the ‘Mac-ness’ of Window’s Trash icon, as it was ruled that you ‘can’t own a concept’, so it ended up being a somewhat Pyrrhic victory.
Early Web Design
Standardisation is an important part of UX because people quickly become frustrated with trying to use things that are unfamiliar. This can certainly be seen in early web design, where designers had to compromise between usability and aesthetics. Many of the Web’s early sites used popping bright colours and oversized buttons, with a healthy amount of shadowing and glare. Frankly it didn’t look great.
However at a time when most people were becoming familiar with how the internet worked elements of UI had to be over-blown to make it obvious what to click on. There was also a tendency to use skeuomorphic design – design that mimics real life objects. Many sites now increasingly favour minimalism. Google is probably an extreme example, but a minimal design layout is definitely nicer to look at than the 1999-2010 iteration!
A key factor in the standardisation of UX/UI has been the integration of the internet to our daily lives. 20 years ago, there simply wasn’t the same usage of the web as there is in our modern day. As usage continues to increase it is far easier to identify trends, common denominators, and best practice. This is dictated by both users and designers, resulting in core user behaviours that must be satisfied by standardised UX/UI practices.
Modern UX design
Take a common piece of UI that can be incredibly disruptive for UX: overlays, modals, and interstitials – more commonly known as pop-ups. Almost every website in the EU now includes these because of data privacy laws which require a website to get a user’s consent before they can use their data. Check out Yellowball’s overlay below:
This is good because it does not disrupt the user’s ability to interact with a website. You probably didn’t even interact with it the first time you came on the site, but it is informative and obvious without being intrusive.
Forbes.com, on the other hand has a very disruptive approach to pop-ups:
Now of course a website as large as Forbes can survive having elements that could be considered poor UX because people will visit it in spite of this. Most of us can’t get away with this though, and have to design a website to maximise user experience.
How to create good UX
However, there are good reasons why you might want a pop-up to be slightly disruptive. Users spend longer looking at unfamiliar aspects of a site and tend to ignore what they already know. If you want to attract the attention of a prospective podcast listener or alert someone of something, it can be useful to interrupt the smoothness of their UX. You will have to risk that they might just navigate away from your page if you are being too interruptive though!
Usually if you want someone to spend time on your site, and to feel compelled to delve further into the great content that you have it’s not enough to just have a Spartan approach to design. Unless you only have a very small number of products, anything too minimal can run the risk of appearing clinical. Making sure that you present everything in a fun and eye-catching way is just as important if you want to keep a high retention and encourage click-throughs.
What are the tools for designing UI?
Programs like Sketch and Adobe XD are regularly used by UX and UI designers. These allow a designer to create a ‘wire-frame’ of a website, as well as design some of the features that will eventually be used to navigate around the site. Creating a stripped down wire-frame of your website means that you can think about how a user will navigate around different elements, so it’s very important to spend the time to get it right early on. It’s much like drawing up a floor plan before you create a 3-D rendering.
Sometimes we will design this wireframe in black and white, and build up to incorporate colour and stylistic elements so that the flow of the site is as clear as it can possibly be. Using a well trained design team can significantly reduce the cost and time, when compared with designing the full website straight away. As this will be the most simple version of the end site any problems will be magnified down the line, making this a crucial step to get right from the off.
Once a designer has worked out what will go where on a site they can then start to think about what these different elements will look like, so that it is as obvious as possible for the end user. The move to minimalism is a direct result of good UX and UI design because people have familiarised themselves with how things look. We all know instinctively that if we hover over something that we can interact with, it might change its appearance in response, for example by changing colour or size.
At this point it is practically a cliche to use Apple as an example of minimal design, but look at their website:
There are obvious buttons that are clearly labeled, only a few different elements for you to click on. The interface is clean and you either instinctively know what does what, or you can easily see how you would work it out. There are also nice pictures that are pleasing to look at, and give a clear visual indication of what they are. From a user’s perspective, once you’ve reached the homepage you can navigate to most of the pages that you might want to visit without scrolling or clicking on lots of drop-downs.
Ultimately web design has improved over the years because it has always focused on creating the best possible experience for the user. By using a mixture of cognitive science, good rules of design, and standardised practices, designers have contributed to an internet that is (mostly) an easy place to get around!
Users are sensitive to bad design, even if they aren’t fully aware of how it is affecting their experience. As part of Google’s Panda update the algorithm will also take design elements into consideration and will give preference to well designed sites when it comes to ranking. There is so much available on the internet, and without being a Forbes-level website you can struggle to retain users and cut through the noise. UX/UI is a burgeoning field, with more and more people working specifically on designing a specific page on a website like a form or an e-commerce page. Fundamentally the most important aspect to bear in mind is that UI is the overall appearance of the site, while UX is an all-encompassing approach to how someone will navigate around a site.
