UX vs UI Design or What’s the difference between UI and UX?

We’ll approach this question from a little bit afar. You’ll see why. Let’s assume you are thinking about starting your own digital business. You’d probably ponder around your own ideas first. You’d think about things like:

• How do you go about developing your own product or service?
• How much should you invest in it?
• Should you think first about the cost-profit side of the business?
• Or maybe focus more on the Unique Selling Point (USP) — a more conceptual side of things?

You might soon discover in your quest that the business approaches have changed. Pricing strategies are still relevant, for sure. USP is a must-have. But, they are secondary. They are based on something else. And this something else is the design. It is the defining factor of success. How so?

In this article, we’ll guide you through the fundamental role of design in business planning and product development. More so, we’ll look closely into the difference between UI and UX design.

The Backstory to The Design

We can trace back the turning point to Steve Jobs’s interview in January of the year 2000. At that time, Apple was a revolutionizing force in many ways. Here is the pivotal excerpt:

What has always distinguished the products of the companies you’ve led is the design aesthetic. Is your obsession with design an inborn instinct or what?

S.J.: We don’t have good language to talk about this kind of thing. In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains and the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation … That is the furthest thing from veneer. It was at the core of the product the day we started.

Steve Jobs

And Steve Jobs was kind of right. Even today, more than two decades later, the word ‘design’ is understood in so many different ways. Once you do some googling, you might end up with a bunch of terms. They are UI/UX designer, UI designer, UX specialist, and other permutations. So, what kind of design can turn your business idea into a success story like Apple? How does it connect to visual aesthetics? What is the difference between UI and UX? Given the defining role of design, it is worth looking into this primary building block in-depth.

What Makes Design So Central to Product/Service Business Success?

Truth be told, the market of products is oversaturated. If you search for, let’s say, a laptop, you can find one for $49 up to $6.499 for the latest Apple MacBook. In addition, you can also get a custom laptop for whatever needs you have. With that range of product options, it is a challenge to come up with something that differentiates. And even if you manage to mix an interesting laptop — it is very easily replicable. So, you should compete in something else. In creating something completely different.

Today’s competition is about specialized innovative expertise and/or lean processes. The latter is about efficiency, doing what’s just enough, and getting faster to market. The innovative expertise is about design. And, this is specifically User Experience Design — UX.

So what you do when designing user experience is basically develop a concept of how your user should feel while using your product or service.

• How convenient it is to use your product whether it is a phone or a e-commerce marketplace.
• Does your user get tired and confused or enjoy clicking every button?

When Steve Jobs turned on his design thinking, he would consider the following examples:

• How to make the computer work without a fan.
• How to fit a mobile phone in the user’s hand.
• How to make the keyboard customizable to the screen on smartphones.

So, in terms of mobile or web applications, it is about how to achieve a smooth and seamless user experience.

Sample Scenario: How UX Design Creates a Product (an IoT app)

For example, let’s imagine developing an IoT app. Let it be a controller of several sensors for a smart home as in the pictures below.

In this scenario, UX design would be concerned with the following questions:

• Considering about 4 sensors totaling 20 indicators, how should we structure displaying and accessing this data?
• It can be a layout of 4 icons with 1 key indicator each.
• It may also be a slider with one indicator per screen with several key indicators.
• It might also mean an opportunity to include a “need-for-action” button or indicator.
• Or it might mean including the “recommended-action” button calculated based on the indicators.

Other options and better solutions are also possible.

• Considering the amount of data, which should be prioritized and delivered more frequently to the user?
• What types of notifications would benefit a user?
• How should alerts work together with the user goals?
• If that is a user who wants to cut utility bills, how often should they receive updates on usage plans?
• Let’s take a user with environmentally friendly goals. Should there be extra alerts if it seems like they’ve forgotten to turn off a lamp in a study?
• How customizable should alerts be? How frequent?

These are just two points out of at least a dozen that would be considered by the UX designer. And, they are not considered in isolation but rather as a complete whole. Some points are such as aligning user goals with the app’s functionality. If the user adopts the smart home system to follow a ‘green’ lifestyle — are the proposed sensors enough? Do they provide enough data? Does this data enable the user to achieve their goal effectively?

Implications

Answering these UX questions will create the product. It will also determine the pricing strategies. If that is mainly for users who follow a green lifestyle, they would likely opt more for “greener” features. So, the app can have more features covering different aspects. And so the price for the app can be in the higher range. If the target user has a cost-saving goal in mind — fewer features for a lower price would often be the resulting strategy. So, this is generally how the UX design makes a product. And also why the pricing strategies are secondary.

To highlight the innovation aspect of UX design, here is another quote from the same Steve Jobs’s interview:

People are always asking, “What will be the next Macintosh?” My answer still is “I don’t know…” This is what customers pay us for — to sweat all these details so it’s easy and pleasant for them to use our computers.

Steve Jobs

How Does UI Come into Play if UX is So Central?

So, at this point, it becomes apparent that UX design comes first. Using Steve Jobs’ vocabulary, User Interface (UI) design is the veneer. UI is the translation of UX into the outer layers of the product. But make no mistake: Apple does not sell ugly products. Apple’s app and software designs are also trendsetters. So when you think about why some 49% of US consumers chose iPhones, it is both: UX and UI. It is the pleasure of use and the stylish looks. And it explains the relationship between coming up with the user experience first and then putting it into the veneer of the user interface.

Talking about a real-life startup development project, the development process starts with idea validation and research. UX research is an integral part of that process. It is what Steve Jobs said about ‘sweating out the details’. Once the bulk of UX work has been completed, UI design gets involved. To visualize this, let’s take a Gantt Chart from a development project as shown below. Steve Jobs’s words sound like years of hard work — really like blood, sweat, and tears. But in this screenshot, it takes about 2 weeks. So, don’t get scared of the sound of the UX process, just see how simple, fast, and lean it can be when is done by professionals. You can check out more about processes within Design Services.

It’s time to go back to our hypothetical IoT app.

IoT Scenario: UX & UI Interplay

UX research, UI get-up

In our pre-development stage, the process starts with UX research. There are options on how to go about it. Traditional ones are

• surveys,
• opinion polls,
• focus groups, and
• NPS — Net Promoter Scores.

These approaches give a good grasp of what potential users think they want. The downside is that it is not necessarily what users do. It is one of the things Steve Jobs promoted: people don’t know what they want in terms of actually using it. This is not to say that these approaches are irrelevant. They just play a secondary role. So, especially with lean start-up methodologies, UX research gives preference to other research approaches.

The most efficient UX research is rooted in answering the question “Do people want the product?”. It looks simple. It is a very lightweight approach. It is also non-wasteful so you don’t even need an actual product for that. This is why Concierge MVPs exist, and what kick-started Fake Door Experiments in IT. Both of these methods allow you to get the actual market data on how many people will be interested in buying your product. Without developing that product. Getting by on even low-fidelity prototypes.

At this stage, UI is already involved. However, often it is developing simple UIs, not more than a few screens. The goal for UI is to implement UX recommendations mainly. If you are looking for lean and streamlined Design Services, it’s best to hire professionals.

Interpreting UX research, Elaborating on UI design

For example, in addition to our experiments, we also looked at competitors’ IoT apps. These are the findings:

• Setting up and syncing processes were too challenging. Some users had to ask for help and didn’t do it in one sitting. They experienced errors when their app went offline when the mobile device received calls. Also, mobile device interruptions canceled previously made progress. In some instances, the data at different onboarding stages got cleared.
• Some users who prefer voice commands were very frustrated with their IoT app that failed to work with that feature.
• After a series of news segments on AI and security failures, 70% of users started being worried/concerned about how their data is stored and handled.
• Successful competitors’ apps provided a lot of feedback to accompany user’s actions. In addition, there are colored indicators to indicate statuses across multiple sensors.
• Two User Personas were developed. Laura — a busy working woman who has no time to grapple with setting up. (Laura needs a smooth onboarding process) James — a fan of all things tech and likes customization. (James needs to be able to control which indicators are a priority for him and which ones should be displayed first, easily accessed, and maybe even offer a ‘customization wizard’)

In addition, our low-fidelity prototype experiment indicated that there should be more visual cues, also some users experienced difficulty with text legibility ( so contrasts and text size should be adjusted).

Case Study Results: UX and UI Solutions

The Difference Between UI vs UX: Specialized Expertise

This section is going to talk about the difference between UI and UX design in terms of expertise that is required for more substantial MVPs, product iterations, and further scaling.

UX Designer & User Psychology

As you can see, the bulk of UX solutions are based on understanding user needs, wants, and pain points. It relies on the ability to understand the user and decipher behavioral messages into actionable technological solutions. UX designer is one of the roles that heavily relies on understanding user psychology.

Unfortunately, this role is often misunderstood. UI/UX designers are sometimes seen as people who would ‘force’ users to buy or sign up for subscriptions. There are and there were and probably there will be ‘dark’ practices around that. Misleading language, forced opt-ins, hidden costs, ambiguous or deceitful claims, misplacing form checkboxes, trick buttons, and so much more. As a user, many of us have experienced these and been left with a bitter taste and distrust. In terms of business consequences, let’s not even go into damage to brand reputation. There are very real legal consequences. This is not the kind of user psychology knowledge that we will be talking about here.

The study of psychology and its application to digital user experiences are vital for business success. Since the field is wide and deep, we’d better give some real examples. Let’s start with the Goldilocks Principle for prototyping. It is the essence of lean and efficient prototype development.

IoT App: The Goldilocks Principle for Prototyping

Our IoT app went through initial UX research and experiments. Now, we see the idea has potential and want to move further. We decide to include F.A.Q. section. We might decide to make it as an accordion and will go on to do some usability testing. Instead of building an entire prototype of that screen in Figma, we can and should just use screenshots and build out the F.A.Q. accordion only. This principle implies going for prototype quality that is just enough. We test the usability point without too much work. At the same, it is not too little and we get the answers we were looking for. In the case of F.A.Q. accordions, we wanted to see if they are effective and how easily users can spot them.

Fitts’s Law: It’s Not The User, It’s The Design

Another example comes from the attempt to draw a line between human error and simply poor design. It originated from studies of airplane cockpit controls during the World War II. In short, many crashes and errors could have been prevented if only controls had been designed better. It boils down to the relationship between the distance to the target and its size. Even though the distance between the cursor and the targets is the same, the user will reach Target A faster. The formula applies to all kinds of user actions: cursor, tapping, swiping, dragging, etc.

This law is key to designing the app’s flow. In our IoT app example, the indicators should be represented by buttons with icons + labels to make the button area bigger.

Interestingly, we see sometimes designers who would just increase the padding for Target C so they take up the same space on the screen. And they can be clicked on in the same areas. But users perceive the dimensions and they will still reach the button more slowly. The first part of the action is quicker, and then the gesture slows down. And, UIs designed without this knowledge may even look similar, but they require more effort from the user and increase overshooting errors. If you multiply that by the number of menu options, buttons, etc on the screen and then by the number of screens… The inefficiencies and user hardship start mounting up.

This law applies to the design of menus as well. Vertical menus are good when you have priorities: some menu items are more important than others. So they should be closer to the button that opens that menu. If we have all menu items equally important, we should consider either rectangular or pie menus. These considerations also guide the design of the “Save Progress” button and “Submit” for forms and so much more.

Miller’s Law: Cognitive Load

This Law is important when UX designers work on menus, lists, quizzes, and other elements that are part of a group. The magic number “7 ± 2” represents the bandwidth of human short-term memory. It is about reducing cognitive load thanks to chunking. It explains how many elements are digestible for the user per that chunk. The picture below shows Netflix’s navigation: the navigation is clearly divided into 3 chunks, and the main one is clearly separated and emphasized. In the navigation chunk, there are 6 menu options. It is an example of an element designed correctly.

In contrast, the Adobe tool had a toolbox menu similar to the picture on the left below. The picture on the right shows how it should have been designed.

The Field At Large

As you can see intuitive user experience has nothing to do with the intuition of those who build it: it is science-based and research-verified. There are several key areas around which the UX designer builds user experiences. They are based on things like:

• User attention aspects such as tunnel vision or selectivity of their focus;
• User’s ability to notice change outside of their focus;
• Gestalt principles (those that equalize or complete things that seem to be related);
• Short-term memory, working memory as a part of short-term memory;
• Priming, learning, information consistency;
• Mental Frameworks and Information Cues;
• User decision-making: loss aversion, choice overload, compensatory & non-compensatory patterns;
• Action cost;
• And more…

This is not to say that UI specialists do not study these. Some of these things such as Gestalt principles, focus, and tunnel vision can be a part of their training as well. It depends on the quality of the training. For example, the contrast of change required for the discoverability of change outside the user’s focus. Plus, without this knowledge, it will be hard to tell why a beautiful design doesn’t work. It will be hard to read analytics and data. The process of creating the experience for users will take too many iterations.

With this knowledge, the design processes start off efficiently. You get to receive clear feedback. Your team will be to act on usability data. The updates, fixes, and changes are made with purpose and tested accordingly. A good UX designer always pays off handsomely.

UI Matters: Cross-browser/Cross-platform UIs

Same as UX specialists acquire intimate knowledge of user psychology, UI specialists dive deep into browsers and devices. It is not enough to design a beautiful UI according to UX specs on a UI designer’s device. The things that must be considered range from feature support across different browsers to their different versions. For instance, the latest version of Chrome at the time of writing this article is 120.0.6099.199. It usually reads as: there have been 120 major changes, 6099 moderate modifications, and about 199 minor tweaks. Browsers are the engines that render the code, so the way they interpret them may change with a version.

Fallbacks & Polyfills

To mitigate the variety of compatibility and feature support issues, UI experts should have a strong command of fallbacks and polyfills.

Fallback is when a UI designer provides two or three more options if the first option can’t be executed. For example, fonts. If the browser doesn’t support the newer font, we can include “older” fonts to use instead of a browser standard. It is often done for the majority of style elements.

Pollyfill is a way to cater to older browsers. In older browsers, some features, especially interactive ones, may not be natively supported. So, in addition to the main code, a UI expert includes a code that mimics modern functionality in older browsers.

Standards

Not only feature support is vital. There are web standards, app store standards, security requirements, and accessibility guidelines. These too often fall within the scope of UI designer responsibilities. Following these ensures not only robust and reliable rendering of the user interface but also improves the performance and security of your application.

Progressive Enhancement / Graceful Degradation

Same as UX specialists focus on usability testing, UI specialists focus on UI testing. It includes:

– running your app at different network conditions (slow internet, interrupted internet signal, fast internet, different latency, etc),

– on different screens, and

– in different browsers.

There are tools for that such as LambdaTest or Responsinator or others. A professional UI designer must have a varied up-to-date toolkit for this purpose.

These days, the range of performance results looks like a chasm. On one side of it are unbelievably performant devices, on the other — dinosaurs with low speeds and high latencies. Averaging them out and trying to come up with a one-size-fits-all solution is useless.

So a UI specialist often ends up developing a range of UIs starting with basic to enhanced, or the other way around. Technically, the terms are Progressive Enhancement and Graceful Degradation.

The point of the first is to code up features that work on slower and older browsers. Then add features that require more technical capabilities. And layer by layer you add more features to fancy up the base.

Graceful Degradation is the reverse. This strategy entails coding up the complete feature set first. Then, if the screen is small or the speed is slow or else, some features get disabled. It’s sort of like the times when Gmail took way too long to load and it offered a ‘light version’ instead.

Summary of Key Points on UX & UI

We would also recommend diving into the next articles:
– 10 best practices in UX design;
– 10 best practices in UI design.