June 24, 2021

UX vs. UI Design: How your product looks is not the same as how it works

BlogHeader_UIVSUX.jpg

 

Companies often think that in order to have a successful digital product or application, they just need a good designer to make it look better. We get it — it’s easy to get sucked into a glossy visual or brand identity and think that’s all you need for an exceptional digital experience. However, the reality is, even if something looks great, it doesn’t mean it will work great for your users.

While a beautiful interface contributes to a great product, it only scrapes the surface of what your user really needs. Whether you’re an organization whose software applications could benefit from UX design, or you’re a designer wondering where you can improve, you need to ask yourself some important questions when diving into the design process:

  • Who is the user and/or target audience?

  • How will they use this product, and why do they need it?

  • What are the business needs and requirements?

  • How can we achieve those needs in the design?

  • Is the user flow feasible and intuitive?

  • Who is our competition and what are they doing?

  • How do we stand out while staying intuitive?

  • What will surprise and delight our users?

Regardless of how good the design looks (UI design), it’s worthless to your user if it’s hard-to-use and they can’t easily accomplish their goals (UX design).

By the end of this post, you’ll understand:

  1. The differences between UI and UX

2. The importance of UX to your overall design

3. Common UX processes

4. How to design better products with UX Guiding Principles


Read more: 5 Reasons Why Your Organization Needs Design.


The difference between UI and UX

Before diving deeper, let’s explain what UI and UX design actually are…

What is UI Design?

User Interface (UI) Design is a process focused on the look and feel of interfaces within software or a computerized device. This includes everything the user engages with, such as images, icons, typography, colour, buttons, visual hierarchy, text entry fields, layout, and more.

User interfaces can be categorized into three groups based on which point the user and the design interact. These are the three categories and some examples:

  • Graphical User Interface, also known as GUI: 

Users interact with a network of visual components on a digital platform. Examples of a graphical user interface include iOS, Microsoft Windows, and macOS.

  • Voice-Controlled User Interface, also known as VUI: 

Users can interact with VUI devices through their voices. Examples of a voice-controlled user interface include several virtual assistants like Amazon’s Alexa and Apple’s Siri.

  • Gestural User Interface, also known as Gesture-based user interface: 

Here, users utilize their bodies to interact with 3Dimensional interfaces using predetermined motions and gestures (like tilting, pinching, and rotating). Examples of a gestural user interface include virtual reality games.

What is UX Design?

User Experience (UX) entails a user’s end-to-end experience with a product, service, or company. User Experience Design involves a series of processes that explore a user’s behaviours, pain points and needs, to create an ideal product that addresses those needs while accomplishing business goals within the defined technical constraints.

UX design requires critical thinking and the knowledge of usability principles. Strong UX enhances an experience by making a product or service more accessible, easy to use, and enjoyable. UX helps you align your business goals with the needs of your users. It deals with the functionality, layout, framework, reasoning and rationale of the product rather than its aesthetics.

No matter how beautifully an interface is designed, if the User Experience is subpar, the product will fall flat, and you’ll waste thousands on development. Poor UX can also create enormous headaches for your sales and customer support teams.


Read more: Optimize your business processes with UX.


While UX Design deliverables (such as wireframes or personas) are often visual artifacts that help communicate a story to stakeholders, however, they should always be based on facts and actual data from users. It includes, but is not limited to, site maps, information architecture, non-interactive and interactive prototypes, wireframes, user research, user personas, journey maps, user stories, scenario maps, storyboards, and user flow.

Common UX processes and deliverables:

  • Discovery Research (such as in-depth interviews, surveys, observations, and more)

  • Stakeholder Interviews

  • Data Analysis & Synthesis

  • User Personas

  • Visual Planning (journey maps, user stories, scenario mapping, storyboards)

  • Information Architecture

  • User Flows

  • User Testing

  • Low Fidelity Wireframes

  • Medium Fidelity Wireframes

  • High-fidelity User Interface Design

  • And more…

UI design is often mistaken for UX design, but they are not the same! While both forms of design are needed for a successful product, UX design should be your first step in the process. Designing interfaces without first working on the experience is like stumbling in the dark. You might have an idea where you’d like to go, but UX will offer you several paths to follow. Make informed design decisions by committing to the experience of your user first and foremost, before diving into what your product “looks” like.

 

Here is a quick breakdown of the differences between the two:

The importance of UX in design

Users tend to engage with interfaces in unpredictable ways, so before embarking on creating a new digital product, you must consider (1) What is valuable to the user? And (2) What might they experience? By allowing this to take precedence before the visuals of the product, you are designing for the user.


“Design is not just what it looks like and feels like. Design is how it works.”

— Steve Jobs

User experience’s benefits to design include:

  • Increased user satisfaction

  • Less time and money spent redesigning the interface

  • Helps achieve business goals

  • Increased customer retention and more engagement

  • The rise in engagement resulting in revenue growth

  • Less time and money on software development

If you don’t have UX Designer and Researchers on your team, we’ve got you covered! There are many reasons why hiring an external design agency is the right move for your business.


Get in touch today, so we can create a stellar digital experience!


 

UX Guiding Principles

Now that you understand the differences between UX and UI design and its importance for your business let’s dive into some key UX guiding principles to help you on your journey.

The overall user experience can be impacted by seven principal factors, also known as the User Experience Honeycomb. As described by UX pioneer Peter Morville, here are the factors to consider:

  • Useful

  • Usable

  • Findable

  • Credible

  • Desirable

  • Accessible

  • Valuable

 

Peter Morville’s 7 Principal Factors That Influence User Experience

Useful:

Today, the iOS App Store offers users 1.85 million apps, and the Google Play Store a whopping 2.56 million apps. With this much competition, you cannot afford to have an ineffective app. Imagine your product not being functional to users after the investment put into developing it. That would be an utterly devastating feeling! Thankfully, you can reduce the chances of that happening by de-risking your product launches with UX research.

Usable:

For users to be satisfied, the product must be intuitive. They need to find it easy to use and navigate, or your user will be easy to lose. Studies show that worldwide, 25% of mobile apps were only accessed once after being downloaded. As per BusinessOfApps.com, a combined figure of 4.41 million apps exist on both Google Play Store and iOS App Store. This means over 1 million apps are accessed only once after they are downloaded. In short, if your product is too complicated, users are likely to abandon it.

Findable:

It is essential for your interface to have a carefully thought out, easily understandable, well organized layout and structure. This ensures the user can locate what they need without repeatedly making use of the search function (provided you offer one).

Credible:

An analysis by The Washington Post shows that of the leading 1000 grossing apps on the Apple iOS App Store, nearly 2% are fraudulent. Does your app/product look and feel trustworthy? With millions of apps available today, your product runs the risk of being replaceable. Credibility speaks to whether a user or customer trusts your product. Does it do the job it claims to do in a timely and efficient fashion? You can also add testimonials and social proof to up your credibility!

Desirable:

By making your product desirable, you can evoke feelings of joy and delight in your user. Allow the unique personality of your product or service to shine through to achieve this. Desirability can be expressed through images, aesthetics, branding, identity. Emotional design elements such as colour, contrast, custom microcopy, and storytelling are also important UI elements. This is where UI design plays an important role!

Accessible:

An accessible user interface or experience can be easily utilized by users of varying abilities, including but not limited to those with vision, motion, learning, or hearing impairment. A study by the World Health Organization shows that one billion people, (i.e. 15% of the world’s population) are estimated to be living with a disability. Don’t lose out on a massive percentage of your potential users by being non inclusive. Always take accessibility constraints into account during your UX design process.

Valuable:

Consider what value your product is delivering and design accordingly; this improves user satisfaction, and as we know, a satisfied user increases the likelihood of referral to others. While it may not guarantee profitability, it’s a huge step in the right direction and contributes to achieving business needs.

 

To wrap up…

By focusing on your user’s needs, you can determine which issues will take precedence, increasing the likelihood of having a successful product or service. While UX and UI design are not the same thing, both are necessary for a great product. Use the honeycomb model as your guide and start with user experience first. Design is so much more than meets the eye!

 

Resources we like: