March 27, 2018 | By: Marion Marketing

Website UX and UI Design and How They Impact Your Business

The marketing industry loves buzzwords.  In fact, I’m pretty sure that “buzzword” is itself a buzzword.  Buzzwords help us to make simple concepts more interesting and complex concepts simpler.

Two of the most popular buzzwords in the internet marketing space these days are UX and UI design.  They are so over-used that they have even begun to be used interchangeably despite having different meanings.

So, what are UX and UI design?  How are they related?  How are they different? And how do they impact your business’s custom web design in Houston?

If you google these questions, you’re likely to find an article that says something like “UI design is how something looks, and UX design is how something works.”  This basic explanation is partially correct but doesn’t quite represent a solid understanding of the two disciplines.

In this post, we’ll take a high-level overview of UX and UI design, what they mean, how they are related yet separated, and how they impact your business.

UI Design

What is UI Design?

Let’s start with UI design.  It’s often a little easier to grasp and will help us dive into UX design later in the post.

Before we dive too deeply, we should note that both UX and UI design play a major role in our lives as modern humans and have for a while now.

We most likely think of UX and UI design as necessary to for app and website design in Austin.  But your modern car stereo, that internet-connected exercise equipment collecting dust in the spare room of your house, the copy machine at work, the phone on your desk, even your coffee machine have elements of UX and UI design.

For this post, however, we’ll be concentrating primarily on how they relate to your website.

A Quick History of User Interface (UI) Design

Ok, let’s dive in.  In the 1970s the Xerox Palo Research Center pioneered the creation of the first Graphic User Interface or GUI.  A GUI, pronounced “gooey,” is just what it sounds like it is; it’s a way for a human to interact with a computer in a graphically represented environment.

In short, a GUI is the layer between the code that runs all machines and the humans trying to operate those machines.  It takes a complex set of codes which tell a computer to do something and turns it into a button that can be easily pressed and understood by a human.

windows GUI

Both Windows (pictured above) and Mac OS made their fortunes by pairing a user-friendly GUI with a commercial computer in the mid-80s, and GUIs have only gotten sleeker and more user-friendly as time has marched on.

Think about the power held in the palm of your hand with smartphones.  It is the user interface, whether it’s iOS or Android, that unlocks the potential of your phone for you.

Imagine if you had to write a line of code into your phone every time you wanted it to do anything, you wouldn’t be joined at the hip with your phone, I can promise you that.

In the end, that’s what you’re doing when you press that app icon, you are sending a string of codes to your phone that tells it what to do.

We reached a point in time where we realized that in most cases it was really unnecessary to continue to say “Graphic” User Interface and it was shortened to simply User Interface or UI.

The Nuts and Bolts of UI Design

So, now that we have a firm grasp on where UI comes from, what elements go into making one?

The answer to this question will depend on who you ask, but the following are fairly undisputed aspects of every UI:

  • Branding
  • Typography
  • Layout
  • Graphic design of elements
  • Interaction design of elements (sometimes considered to be a part of UX design)

There are a number of elements to a UI design.  One element of good UI design is branding, and how you incorporate your branding into your website.  Many of the other visual elements will be very related to your branding, like color pallets, typography, and choice of imagery.

Still, other elements will be less connected to branding but still informed by it.  For example, the layout and visual representation of elements on your website.  Do the buttons on your website have rounded corners or squared off corners?  Why was that decision made?

Lastly, there are the interactive elements of your website.  How do your menus, not only look but how do they work?  Are they activated by simply hovering over an item or should you click the item? How do you use white-space, color, depth, and motion to visually separate important elements to increase the likelihood that someone with successfully interact with it?

Items like form placement, form length (sometimes referred to as form equity), iconography associated with common tasks (think of the three horizontal bars that you probably automatically associate with a menu) are all very important aspects of a UI design and should be selected with some level consideration.

UX Design

What is UX Design?

We know that UI stands for user interface, so you’re probably guessing UX has an equally salient meaning, and you’re right.  UX Design (UXD or sometimes UED) is User Experience Design.

Once again, it’s very appropriately named.  UX design is concerned less with how something looks or functions, as much as it is with the experience it creates for the user or how it makes the user feel.

In our post discussing the important element of good web design, usability, we discuss the difference between usable and useful.  The concept is very relevant to understanding UX design.

When we think about how UX applies to your website it can be helpful to think of it in terms of useful versus usable.  The goal should always be to achieve a marriage between useful and usable but a usable site that is not useful for its users will offer a worse experience than a useful website with poorer usability.

While usability is a major factor in a user’s experience, at the end of the day, if you create a beautiful, intuitive website that offers no value to its users, you’re offering a poor user experience regardless how usable it is.

A Quick History of User Experience (UX) Design

Given that UI design was introduced in the 1970s, UX design is a very young discipline by comparison.  Donald Norman, an Apple alumni, and co-founder of the Nielson Norman Group, is credited with creating the term, which would later spawn into a discipline of design, in the early 1990s.  His book “The Design of Everyday Things” is a must read for anyone interested in UX design.

ux design of everyday things

According to Norman, he thought human interface and usability were too narrow, saying:

“I wanted to cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual.”

The Nielson Norman Group defines UX as a discipline that “encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

Obviously, this is much broader than just your website, and I would encourage you to consider the user experience impact of all your customer touch points, but for the sake of this post, we will continue to discuss UX primarily regarding your website.

The Nuts and Bolts of UX Design

With its roots in Psychology, user experience design is an immensely complex design discipline.  At its core lies the idea that whenever a user is interacting with a company or product, it is to fill a need or desire.

User experience design concerns itself with focusing on making the process of fulfilling that need or desire as clear, concise, pain-free, and even enjoyable as possible.  Common aspects for UX design, as related to websites are:

  • Site or information architecture
  • Content development
  • User persona development
  • User testing
  • Wireframing and prototyping

To refine the user experience, a UX designer will look at analytical data, conduct research, consider questions of form versus function, create user personas, develop content, develop content and site architectures, wireframe and prototype, and perhaps most importantly test everything and then test it again.

In many ways, user experience design is a process whereas user interface design is a deliverable.  I doubt you will find many user experience designers that feel that an initial iteration of a website or product should ever be the final iteration.

How are UX and UI Design Related?

ux ui design diagram

As you have probably gathered as we’ve dipped our toes into the two worlds, UX and UI design are related; they are almost inescapably connected in many ways.

I think the easiest way to think of their connection is that user interface design is a facet of the broader user experience.  You cannot focus on a user’s experience without devoting at least a fair amount of time and energy into aligning the user interface with your user experience goals.

The user interface is the vehicle through which, in many ways, we deliver the user experience.  Deficits in the user interface will certainly negatively impact the user experience.

On the other hand, there are many aspects of the user experience that may not necessarily affect the user interface.  I’d point back to the scenario of the website that is usable but not useful.  The negative user experience is not necessarily related to the user interface or its design, but rather the user experience elements of content development, content relevance, and possibly site architecture.

How do UX and UI Design Impact Your Business?

Ah yes, the million-dollar question, how do UX and UI design affect your bottom line?

Forrester Research study found in 2016 that a well-designed user interface could raise your site’s conversion rate by up to a 200%, and a better user experience could raise conversion rates up to 400%.  These are staggering numbers and they put some perspective around the growing popularity of these two disciplines.

If you’re like most small to mid-sized businesses today, your business relies heavily on your website.  The impact that your website has on your sales funnel is directly related to the focus and attention that you pay to both the UI and UX aspects of your website.

I must sound like a broken record here, but the goal is usable and useful.  And it’s important to note that this means usable and useful at all stages of the customer lifecycle.

Here are two very simple rules of thumb for good UX and UI design:

  1. Provide value
  2. Don’t make your users think

Provide Value

Not every user who hits your website is going to be ready to purchase your goods or services.  Despite this fact, they will still evaluate your business as a potential future customer.

Does your website make them feel like you don’t care about them if they’re not ready to pull the trigger yet?  If so, you’re probably also sending the signal that you won’t care about them after they do pull the trigger either.

Offer value for all stages of the customer lifecycle, whether it’s blog posts, ebooks, instructional videos, podcasts, or tools to aid in their purchase decision – you’re building trust.  You’re building a good user experience.

Don’t Make Your Users Think

Make it as clear and concise as possible for a user to accomplish their goals on your website.  I often call this the only web design rule you will ever need – “Don’t make me think.”

Not many things can destroy the effectiveness of your website as quickly as providing a poor user interface.  Are your buttons clearly identifiable as clickable objects?  Is your menu intuitive and well-designed, allowing a user to easily navigate to the areas of your website that interests them?

If you don’t make your users think about using your website, they will think less about putting that item in their cart, filling out that form, or picking up the phone and giving you a ring.

What You Should Do Right Now

The first step in making your website UI and UX work for your business may be to shift the way you approach your website.  It is very common for business owners to focus so heavily on what they want users to do on their website that they overlook why users are on their website in the first place.

This is where having buyer personas comes in handy.  If you don’t have buyer personas, that’s ok, pick an existing customer or a sales lead that you are hoping to close.  Try and put yourself in their shoes.  When they land on your website, what are they trying to do?  What are they looking for?  How hard or easy is it to accomplish this goal?

Think about users who are in different stages of the customer lifecycle and evaluate if you are providing them with value at every stage and whether that value is clear, concise, and easily accessible using the user interface.

customer lifecycle

Is it easy to find the types of content a user is likely looking for respective to their lifecyle stage?  Are the calls-to-action on your site aligned with specific lifecycle stages?  For example, a “sign up to receive our blog posts” call-to-action may be more appropriate for the awareness and research stages than a “buy now” call-to-action.

When you focus on proving value for your users, you will decrease your bounce rate, increase the time on your site, and increase your conversion rates at all stages in the lifecycle.

The Take-Away

Like many aspects of marketing, if you have a website, you are already putting a user interface design in front of your potential customers.  And similarly, there is a unique user experience associated with interacting with your company.

Just because you haven’t made a consorted effort to understand these design disciplines and how they affect your business doesn’t mean they aren’t already impacting your bottom line.

I can tell you from experience, often a little focus and attention in these areas can go along way. Take a little time out of your day to evaluate how effective your website design is and what kind of experience you are providing your users.

If you think there are deficiencies, reach out to a reputable web design company and discuss an audit of your existing website as a first step towards addressing these concerns.

Whatever you do, don’t ignore the problems that you find, they will not improve on their own.  Websites are in many ways the never-ending project.  Perhaps the best thing that you can do is to find a partner that can help you grow your website as you grow your business and vice versa. Consider the MARION marketing company during your search for a reliable partner.

24 Website Must Haves - ebook download

About Marion Marketing

MARION is a full-service marketing agency. We partner with customers to either supplement their existing marketing department or serve as their full outsourced marketing department. Our areas of expertise include branding and graphic design, online marketing and traditional marketing.

Let's Get Started Today

The first step we need to take is for us to understand your needs, so give us a way to reach out to you and let's get to work.

  • This field is for validation purposes and should be left unchanged.