Article: The differences between and biggest misconceptions of UX & UI Design
An exploration into the current incarnation of the digital design industry.
The digital sector is forever growing and evolving. The roles themselves and duties they contain have advanced rapidly over the last decade.
Let’s begin with a general description of the roles, for anyone uncertain or new to the industry. Both role names are often used interchangeably, which can be confusing for everyone.
Generally speaking, both form another job role called ‘Product Designer’ (UX + UI = Product). But Product can also mean App projects (digital applications) or physical Product Design (non-digital objects or services that solve problems).
What do they mean?
User Experience (UX) | This role is normally involved in the first half of the design process.
The UX Designer (also known as Design Researcher) will understand the brief, host workshops to define the problems and co-create solutions, create lo-fi designs to run test sessions of ideas and synthing, categorising and sharing the findings. They are an advocate or voice for the real humans they are designing for and must do their best to engage and directly work and co-create with these communities.
Example from a Co-Creation Workshop, where multiple people create ideas to solve problems.
User Interface (UI) | This role is normally involved in the second half of the design process.
The UI Designer will take the findings from the workshops and testing phase and use visual communication principles to create a design that’s easy to understand and intuitive to use. Run testing, define how the components interact and respond, present to stakeholders and hand over to Developers. As well as meeting WCAG accessibility requirements, such as adding captions, colour contrast and use of visual identifiers, like icons or imagery.
One person can do both roles. This is called “generalising” or “being a generalist”. See also ‘End to End’ and ‘Unicorn’.
One person can do one of the roles, with another designer to do the other. This is called “specialising” or “being a specialist”.
Misconceptions
Now let’s consider the most common misconceptions about each role.
User Experience (UX)
This role has a tendency to get associated with cold, hard data collection. This can be true and it gives useful insights but it plays a small part of the discovery process. Real human insights gathered through Workshops, Interviews or Testing always prove to be more valuable.
UX Design is actually more human
Using this kind of mass data collection can help in the beginning of a project, in ‘Insights gathering’ stages, when data (Quant) is freely available and insights (Qual) may not be. It can provide some useful information into the real humans who use the services (also known as ‘users’).
Examples: Existing site data revealing that 80% of users access via a mobile device. Or learning the most frequented pages on the site, giving an idea as to what people are coming to do.
It’s more useful to use these data insights as an early guide until you can get feedback from your users through the aforementioned touch points.
UX Design is actually an underrated Visual role
Considering UI principles in the early UX testing phases leads to a better end outcome, especially if timelines and/ or scope won’t allow for multiple rounds of testing or testing in the UI Phase. Through the use of A/B Tests, we can very quickly trial a few options of a component design or action to complete the same goal. Testing designs in a not pixel perfect but high resolution state with no placeholder imagery or text, will get you ‘closest to final’ testing results, allowing you to pivot early and quickly if something is not testing well.
Real human insights gathered and categorised from user testing.
User Interface (UI)
This role has a tendency to get associated with simple visual aesthetics, such as colours, imagery and spacing. Whilst important, UI is better understood when seen as ‘Visual Communication’.
UI Design is actually a way of communicating visually
Put simply, a way of communicating a message or idea via visual means, that does not rely on the use of words. Put even simpler, remove the words (or change them to another language you can’t understand) and will the intent of the page still make sense?
Visual Communication can also make the complex easy to understand, especially helpful for financial or government institutions where convoluted processes can bewilder and cause friction for service users. The use of infographics and diagrams can go a long way to helping someone understand information.
Infographic to explain the complex process of a payment gateway to users.
UI Design actually makes content accessible
20,000 Australians speak Auslan, the national sign language, and a small majority don’t read written English. Through Visual Communication, we can make the message of a page clear without having to read the content.
Instead of a wall of text (like this article has become), we can use bite-sized pieces of content with clear headers and spacing, to help make easily skim-able and reduce the mental capacity needed to consume the information or complete the desired task.
When designing any digital content, be it responsive web or native apps, we should all strive to make our designs accessible to everyone. This includes the 575,000 Australians that have a visual impairment, the 3.6 million Australians that have a hearing impairment and the 30–40% of the Australian population that are Neuro-diverse. Basic Visual Design methodology, such as proximity, scale and hierarchy and A11y & WCAG guidelines can help in the way we design our content to be accessible. UI Designers can also encourage Developers to code in a way that’s compatible with screen readers and other accessibility tools.
Rise of the Design System
In a time where the automation and standardisation of Visual Design is growing, through catalogues of reusable components known as Design Systems, we are finding UI Design is being undervalued.
We can use Design Systems to work smarter and allow the UI Designer to look at what’s currently there, look at what’s needed and bridge the gap. Each page, flow or component needs to be considered together, to ensure the whole journey is the best for the user it can be. This will avoid Frankenstein (hacked together from limited set of existing components) or cookie cutter (everything looking the same) page designs.
We can also use Design Systems as a starting point for UX, so we can test with high resolution visuals in a very short space of time. Almost using Design Systems as a replacement for grey scale Wireframes.
Value of UX Research
UX Design/ Research is often doubted in terms of effectiveness and value it can bring. This article covers these concerns in more depth: https://medium.com/enjoyhq/ux-uncensored-the-5-biggest-misconceptions-about-user-research-part-4-ac02de834d58
_
Thanks for reading.
All images Authors own.
Read full article (with images) at: https://medium.com/design-bootcamp/the-biggest-misconceptions-and-differences-between-ux-ui-design-1133fc837f85