UI vs UX: The Human Factor Against the Product Factor

No matter how many times people confuse and overlap UI and UX, these concepts won’t become the same thing. Period. Although now that I’m thinking, certain events, like the development of the first graphical user interface in the 1980’s at Xerox PARC, may have just given a mutual start for both. There is also the misconception that one and the same person can do both user interface design and user experience design. This further leads to the confusion that there is no difference between UI and UX, and such a thing as UI vs UX design doesn’t exist. But each deserves its own expert.

And here is something I would like to highlight right from the start.

UI is AESTHETICAL. It is about WHAT users will interact with. There is the PRODUCT factor. It relies on and involves CREATIVITY.

UX is COGNITIVE. It is about HOW users interact. There is the HUMAN factor. It relies on and involves ANALYTICS.

In this blog I will look closer at the major difference between UI and UX design and what each role encompasses. You will also read about where these two meet together in the process of digital product development and will learn about the value that modern-day digital product design tools add to user interface design and user experience.

Questions to be answered:

• What is UI and why is UI important?
• What is UX and why is UX important?
• How are UI design and UX design related?
• How can Indigo.Design help you with your UI/UX needs?

What Is UI… and I Mean Modern-Day UI?

User interface is the visual “place where interactions between humans and machines occur.” It has a narrower perspective on design compared to UX as it focuses more on the product itself. It considers all the visible static and active elements – text sections, the placement of buttons, navigation bars, spacing, typography, icons, color palettes, themes, layout of menus, and overall design responsiveness. The end goal here is to transform a design idea into something that is simultaneously attractive to the end-user but also intuitive and easy to interact with.

However, this is the old-school definition, and UI isn’t all about adding features and interactions, which also reflect the user experience.

In a recent article[1] on the Gartner ® website, I read that “it’s important to understand that all software reaches a point when the next added feature degrades the UX for all current and future users. A lot of software has gone beyond this point already, and both users and developers would benefit from some streamlining.” So, as much as of creativity, the UI is also about the psychology of choices, research, the use of the latest technology to construct hyper-personalized results, and informative decisions when working on a new design.

To rephrase this, the user interface design leans towards simplified day-to-day tasks, digitalization, and the generation of next-gen interactions through crazy innovative techniques like air gesture controls and personalized emotional design. All this is because processes in software and design development tend to become more and more automated, led by the constant digital transformation and demand for bolder ideas. Next gen, tech-savvy end-users simply crave different interactions that follow their logic but still manage to escape and provoke their user experience oversaturation.

What Are the Responsibilities of a UI Designer?

From following and implementing the latest design trends, through building a responsive design, to establishing consistent visual guidelines, the UI designer is responsible for tackling all the graphical constraints and opportunities a product may introduce. And the designer does it in a way that combines user-centric and product-driven design insights, creativity, and awareness of all that is happening in the tech industry and design field.

Here are all the things that a UI designer does:

Researching, Embracing the “Current,” and Forging the “Next”

UI is considered the more creative part when handling a digital product, but it requires thorough design research before task implementation. This provides UI designers with more context and insights into user needs, user behavior, design trends and competitors. Through research, designers even make an informative decision on the design systems that can be used for their project to facilitate workflows.

• Understanding of information architecture
• Design research
• Understanding stakeholders and customers’ needs
• Analysis of current digital and design trends

Shaping the Look and Feel

It might sound like something that only the UX designer should be working on, but whether the end-user will like and use the digital product very much depends on how intuitive and easy to navigate the product design is. That’s why the UI designer takes care of:

• Interface layout
• Designing and positioning of UI elements
• Branding and graphics development
• Establishing visual guidelines

Delivering Responsiveness and Interactivity

This is when a UI designer handles responsive design and screen size optimization, interaction design, animation and also:

• Usability testing
• Prototype testing
• Design-development handoffs
• User guides

As systems, processes, expectations, accessibility, and even work environments have all shifted to become more digitally oriented, the UI designer’s role has evolved dramatically. Now UI designers must be more flexible and need to become extremist-visionaries in terms of what they create and how they create it to be able to foresee, envision, and build results that respond to the present and give a slight nod to the future.

What Is UX… and I Mean Modern-Day UX?

Describing UX as the way in which someone interacts with a software solution, a website, or another digital product no longer corresponds to our “metaverse.” In the Gartner ® report[2] “Customer Experience, User Experience - and the Business Analyst”, it is noted:

“User experience in turn is defined as the experienced quality of an interactive system from the perspective of those directly using the system. User experience results from the personal experience with a system, e.g. “wow, that was simple”, but also from the experience of others communicating their experience “Have you tried this new travel expenses UI? Works really like the iPhone.“

We now speak of UX as something that deals with the feeling and the impression left after using a product AND the desire of users to actually recommend the experience to others.

Key questions that surround UX are:

• How do users feel when they use a certain digital product?
• How intuitive or easy is it to navigate?
• Are certain processes easy to complete? Like proceeding to checkout when shopping online, for instance.
• How do users interact with a digital product/web page?
• What are they thinking during the process?
• What is their overall impression?
• Are they willing to keep using it and recommend it to others?
• Or would they rather close the app/web page?

Compared to UI, user experience design is more analytical and explorative as it considers the human (or the user). According to Peter Morville, designer and information architect, there are seven key aspects that construct an effective UX design: useful, usable, desirable, findable, accessible, credible, and valuable.

He presents them in a honeycomb shape with each of these facets building upon the product ease of use, end-users’ satisfaction, customer loyalty, and willingness to spread the word about the digital product.

(User Experience Honeycomb by Peter Morville)

What Are the Responsibilities of a UX Designer?

A typical UX designer researches and knows everything about end-users to help model the product in a way so it can deliver optimal and consistent experiences. A UX designer who is up-to-date will do all this with the help of automation tools, managing everything from communication across teams through user testing to analytics and strategy implementation.

Here are all the tasks that a UX designer takes on:

Preparing Sound Strategies and Planning Content

If users can’t use a product, they won’t. That’s why the role of a UX designer is to research everything there is to research users, analyze their behavior as digital consumers, and plan the best user journey.

• Perform field and user research and competitive analysis
• Conduct user surveys
• Gather data from research to validate ideas and assumptions
• Prepare a strategic plan for stakeholders
• Create user personas
• Create user flows
• Conduct user tests or face-to-face interviews

Taking Care of the Iterative Process

UX designers are also the people who try to twist everything from customers’ and end-users perspective using these techniques:

• Prototyping, testing, and refinements
• Information architecture: organizing and labeling digital content
• Wireframing
• Performing user testing and product evaluation

Handling the End Phase: Studying Analytics and Implementation

UX designers also examine how people use the product and how they feel about it, drawing informative conclusions based on analytics. These conclusions and results are used for design enhancements.

• Analyze test results, study analytics, and determine the next steps
• Coordinate results and product improvements with UI designers and developers
• Track goals and product integration

How Are They Related: Or When “UI vs UX” Become “UI and UX”

Creating great design is integral for the success of a digital product and crucial for the success of a business as well. Both UI and UX designers must remain close to end-users, understand them, cater to their needs, and translate their expectations to what is being developed. But designers must also coordinate their own tasks and goals and work in synergy because when it comes to design, UI and UX go hand in hand. Good UX cannot make up for bad UI and vice versa.

At times, it might be challenging to find the balance or the right methods that work best in different cases. In the last couple of years, though, an emerging trend seems to be the solution – digital product design systems. These design tools serve as a single platform and a "force multiplier", streamlining all the steps in design and app development: screen design, user flows, prototyping, user and usability testing, real-time visual collaboration, app building, and even production-ready code generation in Angular or any other popular framework.

One such digital product design accelerator is Indigo.Design.

How Can Indigo.Design Help With Your UI/UX Needs?

• Provides 100% cloud-based WYSIWIG drag and drop experience.
• Delivers best-in-class UX and UI designs with customizable components.
• Ensures usable, production-ready, testable code and simplicity when turning designs into clean code. 
• Works with most popular vector design tools like Sketch and Figma.
• Allows co-editing and collaboration with other designers, developers, stakeholders, and customers.
• Makes remote and unmoderated user testing super easy and provides real-time analytics. 
• It offers an Inspect tool (like Zeplin) for obtaining CSS, colors, and size/positioning code from completed designs. 
• Delivers a data-source option that lets users of the platform connect to any REST or other common data source.
• Is packed with plenty of built-in theme options but also offers customization thanks to a custom theme builder.

 All of this is included with Indigo.Design — and it’s super easy to learn and integrate!

Sources:

[1] Gartner, ‘Improve User Experience by Reducing Features’, May 24, 2016 Rob van der Meulen, https://www.gartner.com/smarterwithgartner/improve-user-experience-by-reducing-features

[2] Gartner, ‘Customer Experience, User Experience - and the Business Analyst’, May 05, 2017, Thomas Geis and Knut Polkehn, UXQB, https://www.gartner.com/imagesrv/media-products/pdf/iiba/customer-exp.pdf