Compared to other fields like industrial or graphic design, the design of software is a fairly new profession. Like any new profession, it strikes to organize itself. So far, lots of job titles and terms have been created. You might have heard about UX Prototype, UI Library, Information Architecture, UX Writing. Is all of this just a buzzword-bingo?
Well, yes and no. Two terms seem to be quite established in the design profession.
In this article, we'll explain what User Experience and User Interface Design mean, what the key differences and similarities are and give options on how to implement the two in a design process and team.
Simply put, user experience (UX) is the impression a customer gets when interacting with a company’s touch points.
In return, a user interface (UI) is one of those specific touch points, such as a website, an app, any digital service or even a point-of-sale-device of a company.
- What is User Experience (UX)?
- What is a User Interface (UI)?
- How to differentiate UX Design and UI Design
- What are the similarities of UX and UI design?
- When do I need a UX Designer and when a UI Designer?
- Does it matter?
What is User Experience (UX)?
User experience – abbreviated as UX – refers to the points of contact that a customer has with a company. For instance, a customer could click an advertising in the web, then come to the companies website, subscribe to a service and later on download the mobile app of that service. The experience the user has along those so called "touch points" – positive or negative – is called user experience.
User experience can be measured. The "Task Success Rate", "User Error Rate" and the "Net Promoter Score" are some famous KPIs from this field.
The term is said to be first used in 1993 by Don Norman, who was employed at Apple Computers as the first User Experience Architect.
What does a UX designer do?
The role of a UX designer is said to be mainly in between the business side, for instance a product manager, and the implementation side as in the screen layout and development team. In this position, UX design mainly gathers and aggregates research and insights, performs user tests, drives strategy and concepts.
Some core tasks of UX design are:
- Defining user and business goals
- Designing prototypes and wireframes
- Running user interviews and testings
- Creating user journey maps
- Scoping features with product managers
- Creating blueprints for UI design
What is a User Interface (UI)?
The term user interface – abbreviated as UI – describes the part of a digital service or product that a user can interact with. Website, apps and digital devices have a parts that are visible to the user and a lot of logic behind. Those visible parts are called user interface and often technicall referred to as front-end.
User interfaces normally consists of things like buttons to push, text to read and menus to navigate. Still, even if most interfaces are visual, the user interface could also be driven by voice input and output, gestures or vibrations. It is mainly about an interface between the user and a software.
Some of us still remember the first desktop computers, where typing orders in a text line was the way to run those monsters. In the 80s, graphical user interfaces (GUI) got introduced and replaced the command line with visual elements such as buttons, folders, application icons, input fields and checkboxes. The people creating and maintaining those graphical user interfaces were called user interface (UI) designers.
The quality of a user interface is determined by many parameters and can be measured in the KPIs of user experience. Since it is contributing to a good user expereince, let's take a look at how UX is influenced by UI design and the quality of front-end implementation:
The influence of User Interface Design on User Experience
What does a UI designer do?
A user interface designer (or visual designer) is creating layouts for websites and digital products. Those layouts – also often refered to as screen designs – are blueprints for developers. Interface design brings the input from UX design together with visual and product design skills to a solution that is ready for implementation.
Some core tasks of UI design are:
- Layouting screen designs
- Design systems and Style Guides
- Exploring Look&Feel and bringing it "on-brand"
- Doing High-fidelity prototypes
- Responsive design
- Micro-interactions
- Handover to front-end development
How to differentiate UX Design and UI Design
Even professionals have different understanding on how to separate the two terms. Depending on the size of organization or project, teams are structured differently. Let's outline two more common approaches:
UI Design comes after UX Design.
One school says UX Design comes first and UI Design comes later.
As UX Design being the concept part, it would provide a blueprint of the actual product. Those so called wireframes will layout the rough structure of navigation and what content is where on which page. Later in the phase of UI Design, those wireframes will be turned into final screen designs, adding color, typography, aspects of branding and whatnot to make it a real product.
This whole approach fits in a bigger picture of a design process that starts with user research continues with UX and UI Design and ends in the implementation and development of the design.
In reality insights never come in at once - the process of design is never that linear. Insights that are created in the UI layout phase might influence UX in the same way.
UI Design is part of User Experience.
When the user experience is everything a customer witnesses while in contact with a company, the user interface must be a part of that. This approach is not trying to make UI design smaller than it is, but create an understanding of user experience being something overarching.
What are the similarities of UX and UI design?
In both fields, an understanding of core principles, design methods and tools is a must. Just to drop some of them:
- User-centered: understanding users, their needs and their behavior is a core skillset for both UX and UI designers
- Identifying business-goals: the business requirements and objectives must be understood on both ends.
- User Interviews and Usability Testings: Testing and research is mostly seen as UX domain. But there is no reason why an UI designer should not test designs with users.
- Competitor benchmarking: UX and UI should have a good understanding where to be innovative and how to bring value in a business perspective.
When do I need a UX Designer and when a UI Designer?
Instead of two professions or two job positions, think of UX and UI as two different skills on a project.
A basic rule of thumb can be:
- If you have things to clarify on a strategic and conceptional level, you might want to bring in UX Design to the project.
- If the task is more about professionalizing the visual design, responsive web design, look&feel or bringing it on-brand, UI design is your partner in crime.
It is not said that those tasks should be performed by different designers. There are good reasons to hire two different people for those two skills. Every role requires a slightly different set of methods, tools and brings in different stakeholders. A mix of disciplines might make the design process less focused. When switching from ideation to implementation, important parts of the design might fall of the table.
Of course, there is a bunch of well-payed "unicorn" designers who can handle UX and UI on a professional level. They are the equivalent of a full-stack developer – and no one complains about that I guess. Therefore, it is a question of qualifications, not of process or division of labour. Maybe this is a reason the term "UX/UI" is very often searched on Google and asked for in job openings.
Does it matter?
Your users might not care much about the difference between UX and UI. So why should you care?
Two words: Quality and responsibility.
If your goal is a quality product, you need to have people working on the solution who have an understanding of the whole project. They should feel responsible for the whole process and not only for a part of it. Therefore, we recommend defining project goals in terms of responsibilities rather than process stages. If everyone has the same goal, it works better than if everyone is only feverish enough to win a stage.
Here are a few points to take away:
- Build mixed teams according to the project needs and people's strengths, so they can learn from each other
- Communicate clear responsibilities, for example through applying a "Team Canvas" early on
- Foster buy-in from your designers for the whole project by building up an iterative process with regular feedback and testings
- Let the UI designers listen in during user testing so they get insights first hand
- Make the UX designers understand that their job is not done after shipping a wireframe
At our design studio Boana, we see our responsibility in many different aspects of the design process. Therefore we strike not to separate UX & UI as a role or even different silos of a project. We build teams of minimum two designers in which we mix-match the skills accordingly. We educate our employees in product owner bootcamps, so they understand the needs of our clients and the business side better.
Our experience is, the moment you separate designers in different crafts, nobody feels a responsibility for the whole thing. And we want to have everybody on board to create great things for the people who use it later on.
