an introduction to UX and UI design

In this first of a series on UX and UI design at miggle, I think initially  it would be beneficial to clear up exactly what we are talking about, as definitions of the various design processes for a website or web app vary, and the lines are blurred and areas often bleed into one another.

There are many other names and acronyms swirling around web design, but I will tackle what I see as the key ones – User Interface (UI) design, User Experience (UX) design, and Information Architecture (IA). What are the main differences between those and more ‘traditional’ graphic design?

I appreciate Traditional Design cannot really be thought of this way any more, now that web and interface design is so entrenched, but for those of us who started in the design industry pre-internet, largely working in print, it is still hard not to think in terms of ‘normal design’ and ‘web design’. So, for the purposes of this article, in the main a traditional graphic designer will design logos, print, packaging and exhibition material. They will use type, colour, images and typography to create a style, a look and feel, but obviously this is on a static medium, where there is no interactivity or user input.

Information Architecture sits slightly outside of the visual design remit, but is an important part of the design process. For the user, it could be summarised as the structure of the site, how the pages relate to one another, how easy it is to get from one page to another, and access the content they wants. However, a good IA strategy needs much more detail than just this. For the developer, it is also about the technical structure of the information entities used within the platform the site is built in – field structure, taxonomies, etc.

We then have User Experience design. One accepted definition of UX design, according to the journal Interacting With Computers, is that it is
“the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product”.

We can see from this that this is a process we do with a brochure (usually without thinking about it), but the impact we can have on a user’s interaction with it is much less than with a digital product. We can choose a legible typeface, ensure forms are laid out cleanly, and choose a stock that feels nice to handle, but are limited in how we can improve the reading process, as print is obviously not the interactive medium that digital is, where the user gets no real-time feedback from the brochure, and the content doesn’t change according to their actions.

However, for a website our design can have a much greater effect on the user experience (UX). For example, making it as easy and logical as possible to navigate between the pages of the site, designing checkout processes to be as easy as possible, or to try to encourage users to sign up to a newsletter by making it clear and obvious – and generally to reduce user confusion, aid user retention, and make using the site a pleasurable experience.

UX design is a technical and analytical discipline, and involves a knowledge of human behaviour, as it deals with why users do what they do when interacting with a site (often to the bewilderment of the site’s designer), and investigates whether and how that behaviour can be changed by improving the interactive experience.

This UX process goes hand-in hand with User Interface design. According to the usability.gov website, UI design:
“focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.”

UI design is closer to traditional graphic design, in that it involves the use of typography, colour and layout. If one is designing a new brand and offering options for a new logo, stationery, brochure and website, the website design is influenced by the other design elements. However, not only does the UI design have to make the website look a certain way, or be part of a brand, but UI design also uses design elements to help a user navigate a site, by making key call-to-actions obvious, and helping guide the user down pathways established in the UX design. Nowadays UI design has to work across more than one device type – i.e. desktop, mobile and tablet.

So, for example, UX design might decide that user retention on a homepage might be improved by adding a call-to-action high up the page inviting the user to click through to a special offer. And UI design then styles that call-to-action to be as clear and attractive as possible, and ensures an obvious and inviting button for a user to click on.

So we can see how UX and UI design complement each other, and really need to work hand-in-hand to improve the overall experience of a user on a website.

“You can have an application with a stunning design that is hard to use (good UI, bad UX). You can also have an application that has a poor look and feel, but is very intuitive to use (poor UI, good UX).” Helga Moreno, onextrapixel

In my next post I will look at our approach to UX, UI and design in general.