When One Letter Makes a Difference. UI and UX Design Explained
Some time ago I asked in my social media if there are any design-related questions I could answer and there was one that really caught my attention: “Let’s say your client has a very limited budget and he can afford only either a UI or a UX designer. Which one would you recommend him to hire to develop a product?”. Well… I’d start with explaining to him what these people actually do on a daily basis.
Old approach
In the beginning of the digital design era, there wasn’t such profession as Product, UI or UX Designer. If you wanted to do anything close to design, basically you had two options. First one was a graphic designer, who was in charge of things like making web and print materials for marketing campaigns, designing applications’ layouts for social media, and also working on branding materials for new or regular clients.
The second option was a so-called webmaster, who at the time were superhumans taking care of design, coding, updating digital products, and also solving all server-related issues.
At that time, this distinction worked pretty well. However, along with the rapid growth of the IT industry, people started to realise that a team of experts from a professional UX design agency with very specialised skill sets can achieve greater results than even the most talented Jack of all trades.
UI and UX — What do they mean exactly?
Each product’s design consists of two codependent parts — user experience structure (UX) and user interface (UI). The first one (UX) is the structural representation of the content and features of a given product, based on research, data analysis, and knowledge about the motorical and psychological abilities of the end-user group. UX is about making things usable and practical while keeping the simplest possible visual styling.
UI, or user interface, focuses on usability obtained through proper, eye-pleasing visual styling of the layout. While working on the product’s UI, a designer sets the colour palette, contrast, typography, and the final dimensions of components keeping in mind such facets as grid, baseline, and responsiveness.
As I said, UX and UI depend on each other, which means that neither of them can be passed to development on its own. A functional UX prototype based on greyscale, low-fidelity components won’t encourage anybody to download and use the product. On the other hand, even the most beautifully designed website or application will be useless if built with illogically distributed UI elements. A good design is a fusion of two skill sets — a logical one (UX) and a more intuitive one, based on the understanding of the rules and needs of peoples’ perceptive preferences (UI).
In a classic scenario, we assume our product design process consists of seven steps:
- Product introduction and setup
- Ideation and concept
- Wireframing
- User Testing
- Design
- Implementing recommendations
- Design handover
As in every process, omitting any one of the phases causes issues. Without a user flow map it’s hard to predict the number of screens and design clear navigation. Without UX wireframes, we cannot guarantee the UI components and their alignment will be usable. Without nice looking and functional UI components, we put our user in shoes of a Teslas owner sitting in a classic DeLorean time-machine, trying to figure out the vehicle’s interface. So the codependency we’re talking about is much deeper and complex than our prospective Client might expect reading the previous paragraphs.
UX designer routine
As I said, UX is about making things usable and practical. UX designers usually spend a lot of time on research and deep data analysis. Depending on the stage of the product and the quality of the available analytics resources, UX designers draw the right conclusions as well as make some predictions regarding the product’s strengths and weaknesses.
But this is just the tip of the iceberg. UX should focus on the end user. In the research phase, UX designers get to know the potential product’s customers as well as they can. They may conduct interviews, lead workshops or spend long hours reading about some relevant cultural aspects of the end-user group. The final outcome of UX work (which in 80–90% of cases are prototypes) is based on the gathered and digested data.
After the UX designer gathers enough information, they begin preparing user flow maps, sitemaps, and product prototypes which subsequently are tested with a group of chosen users. Making UX wireframes isn’t an obvious thing. Being aware of the product’s general context, business assumptions, and the end-user preferences, a UX designer has to create clickable prototypes that reflect a business idea, keep a clear information hierarchy, and are fully usable — everything built from a set of basic, grey-scale components that don’t have to be pixel-perfect or aligned to any stiff grid or structure.
The UI part of the project
What’s next? When the prototype is ready for the next phase, the second half of the design duo comes to the table. The UI designer has to acknowledge the project assumptions as well as, similarly to the UX designer, study the available data about the end users, their requirements, and their limitations. Knowing all of the necessary details and — what’s also very relevant — brand identity principles, the UI designer may start converting low-fidelity wireframes into a high-quality set of screens that fit the visual foundation of the brand. At the end of a process they will serve as base for successful development.
However, creating a functional interface isn’t just a repetitive process of setting colours pallets, picking nice font pairings or specifying the roundness of newly created tiles or buttons. The life of a UI designer is a constant fight with the rules of grids and baselines, global coherence, and an overall look and feel based, among others, on a well-balanced composition. UI designers are also responsible for designing UI animations and microinteractions which, besides a purely aesthetic aspect, have a real impact on the way the user follows the UX structure of the product.
A UI designer has also to take into consideration such facets as the product’s technical limitations, end-file development requirements, and the ways of organising and distributing libraries and design systems that are often overpacked with symbols and codependent components.. Everything in order to make the product easy to develop and scale in the future.
What about users with disabilities?
Depending on the company’s profile, target group, and the type of the market on which a given company operates, UX and UI designers may have to tackle some unusual issues working on an accessibility-oriented product.
Accessibility has become an important issue recently. According to the WHO, even 15% of the whole population are people with some form of disability. These kind of users usually need some specific tech improvements in order to use the product with the majority of its intended functions. Speaking about accessibility, both types of designers have a lot of arguments they can bring to the table.
UX design for impaired users
When I think about designing UX prototypes with a view to disabled users, the first thing that comes to my mind are websites or applications that enable screen readers such as VoiceOver or TalkBack to read out the content for visually impaired people. When creating this kind of product, the UX designer has to pay attention to the structure of the navigation, logical information order, and microcopy. Words should have their alternatives that are read out while tapping on a particular part of the layout. It’s hard to embrace the perspective of a visually impaired person, so it is really important that this kind of product is tested with a sample of the end user group many times before its official launch.
Design for visually impaired users in practice
Some time ago I watched a lecture by a designer who has worked for about two years in one of the biggest travel broker companies in Europe. Because of the size and the nature of their product, it seemed to be a natural move to improve the structure and code of the website to become fully accessible, taking into consideration also groups as visually impaired users. He admitted that participating in user testing sessions with visionless people was a very tough experience. Until then, he didn’t realise how many problems they encounter trying to use digital products. In my personal opinion, user testing sessions are far above the common understanding of design. They require the UX designer to use all of their empathy to draw neutral, problem-solving conclusions.
All-user-friendly UI
When it comes to UI design, things become a little bit simpler. Both iOS and Android offer rich accessibility guidelines that explain how to adjust a product’s layout for the needs of f.e. older users, who often have problems with a hue interpretation, noticing clickable action components or operating a mobile device. In this context, UI design is mostly focused on meeting the WCAG contrast standard, keeping the optimal size and legibility of action components or enriching state-based elements with easy-to-understand icons that aim to emphasise the message.
Summary
It’s hard to compare the importance of UX and UI in the project. Both professions are equally important depending on the stage of the product. Hiring both UX and UI designers may significantly improve the quality of the product, making it more usable and appealing at the same time.
However, there are some situations when the budget is limited and you can work with one person only. Then the best option is hiring a full-time product designer whose quality of work, especially at a very early stage of the product’s life, is at the same level as the quality of the work of UI and UX experts. But that’s a topic for another blog post.
This post originally appeared on Netguru blog
Follow me on: Facebook • Twitter • Instagram | WojciechWasilewski.com
