When building a new website, or redesigning an already existing one, there are many factors that need to be considered. From the creative approach and overall style, to the functionality of the website, including what pages will have what components, and how these components will interact with each other.
The process of website design has dozens of moving parts that need to be taken into account and one of the most important factors will be the User Interface (UI)
Is User Interface (UI) design part of User Experience (UX) design?
Well yes and no. UX design is essentially what it says it is - the design of an experience. How this is done though takes on many forms. It includes but is not limited to:
- Site architecture - the structure of pages on a website and the site hierarchy.
- User journeys - the simple goals of multiple user groups within the solution.
- Wireframes - the structure of on-page content using a low-fidelity interface.
- Prototypes - the basic prototype of a website / application that can be used to test solutions prior to doing high-fidelity designs and builds.
In an ideal scenario the UX design process is informed heavily by user research and examining data of established solutions already in place (e.g. the current website and how it is used by who).
So, strictly is UI design part of UX? No, but does a comprehensive UI design enhance and shape an experience? Absolutely it does.
What is UI design?
If a wireframe design is a skeleton of a page, then the UI is the muscles, tendons, skin and hair. It is the interactive layer that should be intuitive to your users.
Unlike a wireframe a user interface will have key elements of a brand’s visual identity (such as a logo, colours and fonts). Although interfaces are often thought of as outside of UX design the two are not mutually exclusive. UX design does overlap into UI. This is because of the word ‘experience’. Experience overlaps into everything. If an interface does not communicate the intended experience well enough then it is limiting and hindering what was intended in the wireframes.
Consistency with brand elements
It is imperative that the website of a brand or product is clearly related to that brand or product. This is done by keeping consistent elements on the page and having consistency in your visual message as well as actual messaging. Key brand elements that tend to remain consistent across pages of a website are the logo, image styles, fonts (including weights and sizes) and colours. These can all be used in various different ways to create a recognisable brand pattern.
Why is that so important? Well one of the main reasons today is trust. Trust can be conveyed effectively through an interface by being consistent throughout the website. You may have used a few websites where page styles change dramatically and it feels as if you have gone off to another site. A common example of this is older payment gateways.
Significant changes to interface at key moments in journeys can be enough of a jolt to ruin or pause an experience. Doubt is not something you want to inject into the flow especially when looking to convert / sell online.
Here is a list of some of the key elements we often see inconsistent on websites:
- Logo - believe it not this can sometimes fall out of date during a rebrand and a failure to update on third party site integrations.
- Colours - consider keeping colour use documented to avoid a use that’s inconsistent with other pages.
- Buttons - this is probably the biggest offender and most common. All too often we see sites without clear buttons or a button style that differs from a previous button significantly enough to not seem like a button at all or be overshadowed by other elements.
A continuation of the wireframes
UI design should always follow on nicely from wireframes. Wireframes ideally work with real content to give an accurate portrayal of information architecture on a page. This means titles, paragraphs, images and media can be placed in the right order with the right weightings.
Does that mean things can’t change at all from wireframes to interface design? No. Well at least we don’t believe so.
Maybe that will put some purist UX researchers and designers into a rectum-clenching panic, but(t)... we think the best way to work is collaboratively. We have always believed that. We have seen the best results when working like that. So if our interface designer wants to query something in the wireframes and suggest alternatives - guess what - they can. We will have a discussion and conclude from our best understanding what will work best. In some cases it may not be a clear winner so we might have to test which would work best.
The key thing to highlight here is that UI design can and likely should be refined over time along with various other approaches to the experience designs.
A documented approach
It is not uncommon to have brand guidelines that dictate what can and can’t be done with brand communications in terms of top level visual identity and tone of voice. What is considerably less common is website / digital specific documentation about font and colour uses within interfaces. This can sometimes lead to inconsistencies in digital visual communications especially if you are a brand with multiple agencies / individuals / teams working in silos on various projects / platforms. The chance of them all singing from the same hymn sheet when the hymn sheet doesn’t exist is pretty slim.
How do we get around this? Make a hymn sheet - duh!
The main way is to document the approach of designed components in interfaces via a style guide or style tile. We use Figma for all our design work (UX and UI) and find locking down styles and components into reusable elements works incredibly well to maintain consistency. In fact - we often set up these shared components and are then able to share them across multiple projects for the same client. Not only does that cut down on time somewhat but it ensures we are consistent in our designs.
Designing with rules is boring
If we have all these rules and guidelines documented though are we not limiting our creative freedom? Well quite simply - yes. But is that actually a bad thing?
As designers it is one of our biggest challenges to create originality within project scope. It is not always possible to be sexy and cutting edge but it should always be possible to create something that fits the requirements, works well and most importantly - converts / sells!
An interface is there to facilitate the experience we want a user to have. Those experiences are more in line with brand experience if the brand experiences and interface elements are actually controlled.
"“If we follow the rules it’s more fun! Rules are good! Rules help control the fun!”
In conclusion...
A UI that properly facilitates the functionality or the website or application is a good UI. It can be tempting to add flair or personality to interfaces and this is important for brand and emotive response reasons - but - always make sure that your designs are ‘function over form’ (not form over function). Ensure experiences are rich but simple to use with emotive design elements used to enhance experiences and not hinder it.
