It’s Not UX vs. UI, It’s UX & UI

  •  6 Comments

How differentiating the two will improve them both

Chris Bank of UXPin — the wireframing & prototyping app — compares and contrasts web UI and UX, explains why we sometimes default to building a UI, and how UI shapes UX. For analysis of examples from over 33 companies, feel free to check out Web UI Best Practices.

The web user experience (UX) is the abstract feeling people get from using a website. The user interface (UI) is what people interact with as part of that experience.

When designing a website, you want your UX to be as positive as possible — you want your users to enjoy being on your website, that’s kind of the whole point. But you can’t just say “let’s improve our site’s UX” any more than a business can say “let’s make more money.” It’s the strategies you use to create your UX, namely the UI, that can enhance (or weaken) it.

ux ui

Source: UX is not UI

Typically for websites, a company’s design team works on the UI in order to heighten the UX. Menu options, buttons, text, graphics, videos — and where each are placed on the page — make up the interface, and should all be meticulously planned. These are the components of the UX, and how they’re used directly affect how the user feels.

We’ll start by giving an overview of UI with some examples, explain strategies to help you understand why a good UX depends on a good UI, and dive into why it’s easier (but necessarily correct) to create a UI instead of UX.

What Web UI Is… And Isn’t

In the context of the web, let’s say the designer chooses to include the option of dragging files around as a means of organizing content. That’s UI. Now let’s say a user prefers that site over its competitors because they like how simple it is to enjoy music for hours. That’s UX.

As discussed in Web UI Best Practices 2014, web UI is the design, presentation, and execution of the elements that make up a web page. Naturally, these are varied, since they encompass everything a designer can put in a site, but luckily, Usability.gov, a leading UX resource for recommended practices and guidelines, categorized them in a helpful and convenient way:

  • Input — text field forms, date field forms, dropdown lists, checkboxes, list boxes, clickable buttons, toggles
  • Navigation — sliders, search field forms, pagination, sidebars, tags, icons
  • Sharing — friend lists, follow buttons, like/promote, share buttons, invite friends
  • Information — text content, tooltips, message boxes, notifications, icons, progress bar, modal windows

For example, the OS X Yosemite strives for exceptional UI. While Yosemite is an operating system (rather than website), the principles behind the UI are still applicable to a web environment. The visual achievements for their clickable buttons (input) make using the system more enjoyable, its vibrant sidebars (navigation) let users see content behind the window, and its crisp notification center (information) provides need-to-know information without cluttering the desktop.

Most importantly, as Apple states in their UI guidelines, these elements help paint the bigger picture of “custom functionality and a unique user experience.” The end goal of the Yosemite UI is to allow users to enjoy a system that is sophisticated enough to be empowering without being overwhelming.

Seeing UI in Action

UI & UX are different concepts, yet undeniably connected.

As shown in Web UI Design Patterns 2014, Google Play masters the drag-and-drop UI technique (called a “pattern”). On their site, users can drag-and-drop their songs into a playlist, then drag-and-drop them in the order they want to listen to them. As a result, the UX is improved since all the user needs to do is tell the app what songs they like and relax as the music flows. In this way, a UI choice (drag-and-drop) improves the UX through convenience and personalization.

google play

Source: Web UI Design Patterns 2014

Now let’s talk about a less direct example. Let’s say a lot of your users leave your site prematurely because they don’t want to sign up to use some of the features. It’s clearly a UX problem since the experience is encouraging abandonment, but you may be able to find the root of the issue in the UI. Perhaps your current login requires too many form fields. In that case, the immediate immersion (“lazy signup”) UI pattern might be the solution. This gives the user access to most of the site without signing up. After browsing freely for a period of time, they’ll likely decide to create an account, especially if there are gated features accessible only to members.

AirBnB takes the same tactic to attracting new customers. Users without a membership are free to browse all the posts on the site as if they were members, letting them see if AirBnB has something of interest. However, once they find a room they want to reserve, they need to start an account to book it.

Airbnb

Source: Web UI Design Patterns 2014

 If the UX is created in part through the UI, then the UI is created through design processes like sketching, wireframing and creating mockups. Wireframes and mockups are like the outlines or blueprints designers use before they create the actual site. These can be anything from hand-drawn sketches on napkins to digital wireframes built in a tool like UXPin or Balsamiq. This is arguably the most important phase, where designers must think theoretically about what kind of UI will create the desired UX. Just like with building house, you wouldn’t get started on construction unless the blueprint was thoroughly detailed.

For a more detailed explanation of wireframing for UIs, check out the Guide to Wireframing.

Why We Build UI Instead of UX

Shawn Borsky, UI/UX Lead Designer at Rivet Games, reminds us that the UX is more than just the result of UI. According to him, the UX is the “nucleus of a brand,” with the brand itself being “the sum of the experiences that a person has with a company or organization.” That puts a positive UX as not just the goal of UI, but the goal of all interaction with an organization.

Every detail a website puts forward contributes to its users’ experiences and to the memories and impressions they form when using the site — but the site designers can’t control that experience directly. As you can see in the below illustration, it’s easy to get tunnel vision and focus just on the UI because it’s tangible (like a spoon) versus crafting the whole experience (like the enjoyment of breakfast).

ui and ux

Source: UX vs. UI

Likewise, if you’re cooking an important dinner, you want to put a lot of thought into it, right? You hand-pick all the best ingredients, choose the best recipes and follow them carefully, and you may even put out a nice centerpiece to create the right atmosphere. Well, a website is no different. You want to plan everything perfectly so that your visitors have a good time. While you can spend hours — even days — planning and preparing the meal itself, it’s only part of the ultimate goal of a fantastic dinner experience. That’s why it’s only worthwhile to focus on the details of UI if you keep the UX in mind.

If a UI is built with thought, attention, and care, then it will show in the UX. If the UI is built haphazardly and with little effort, or if there is a large oversight, then the UX will likely suffer. A good example of this kind of UI oversight is the iPhone’s Shift key (while we’re discussing specifically websites, mobile devices are not immune to faulty UI ruining their UX):

black
white

Source: Quora

Which picture has the Shift key activated and which one doesn’t? Some of the background keys are always gray and some are always white, but the Shift key has both, depending on whether or not it’s activated. This is a poor UI design, even though everything is functional and the user can still access the Shift function. The result? Users (like us at UXPin) often must delete and retype our texts, which gets frustrating, leading to a poor UX.

(Seriously, which pictures has it on?! At UXPin, we’ve had iPhones for six years, and we still get confused.)

As shown as a cautionary example in Web UI Best Practices, one of the most notorious poor UI designs is also fairly common, even for popular sites like LivingSocial.

input ux

Source: Bad UI/UX Design

 This is the window that appears when you first enter the site. The problem is, there’s no way to exit it. That means casual or curious browsers unwilling to give up their email with leave the site as soon as they enter. Perhaps this is an intentional UI flaw designed to pressure users into giving up their emails but do you really want your site’s UX to be the same as a bully’s?

Now, it’s important to note that the UI here is completely functional and adequate — the colors are nice, the buttons are crisp — but the UX suffers. This is a good example of how you can have a bad UX despite a good UI. Marcin Treder, CEO of UXPin, believes that a bad UX is only sparingly acceptable if the goals are valid. “Sometimes you will see long and complicated web forms in which labels are left aligned, which creates a worse reading experience,” Treder says. “On the other hand, it can achieve the goal of better data quality by preventing people from mechanically fast form completion.”

We’re picking on bad UI designs simply because they’re easier to notice (and more fun) than well-planned UI designs. That’s because the better a UI is, the less you notice it. Just like a good film makes you forget you’re in a theater, a solid UI will immerse the user in the experience and not draw attention to itself. Not even noticing the UI produces the best UX.

How UI Shapes UX

Enough of theory — let’s see how UI choices directly affect the UX.

ui ux design

These examples are just a broad overview of the ways UI choices affect UX. For a problem/solution explanation of 63 such techniques, check out Web UI Design Patterns 2014.

Even though the UI shapes the UX, the first thing you want to do is decide what kind of UX you want, and then find the UI that will help bring it to life. Similarly, if there’s a problem with your UX, it’s best to identify and detail the problem before diving into which UI will fix it.

The UX of Learning UX

Understanding the difference between UX and UI is only the beginning — the key to building a good website lies in becoming familiar with how the two concepts relate to each other. While a lot of web design is compartmentalized and independent, UX and UI are almost always inherently linked.

UX

As you can see above, crafting an effective user experience requires much more than pretty visuals. Visual and sound design are only a few UI elements which feed into the UX. While you can’t necessarily control your website’s UX, you can control the UI — so make sure you have a general UX goal and design your UI accordingly.

For practical advice on building web interfaces based on examples from top companies like AirBnB, Wufoo, Linkedin, and more, check out Web UI Best Practices.

web ui design

Newsletter

6 Comments
  1. Eduardo Weidman Barijan Nov 13, 8:57 pm

    Even though I am a programmer I like to read about UI design and UX. It helps to develop better products, knowing the concepts and how to apply them correctly. It kinda drives the development as well.

    Reply
    +19
  2. Stuart Eaton Nov 17, 6:48 pm

    Good read. As you rightly say UX and UI and interwtinned and need each other. As a Creative Director I have to deal with and often design both. And when not doing the actual design work myself the challenge then becomes making sure the designers and developers all understand the desired user experience which in turn will direct how they design and build.

    I don´t like the image example you have of the spoon representing the UI though – If the end user experience is having breakfast then they need all the tools (UI) to do that … you won’t get far eating breakfast if you are missing the bowl, cereals and milk. Even then the user might not like or didn’t want cereals in the first place … but thats another conversation :)

    (You do elude to this in your text near enough, it was just that image that bugs me.)

    Reply
    +5
  3. Abhay Nayar Nov 19, 8:46 am

    I believe that there is no problem with the iOS keyboard because when the shift key is active the arrow symbol turns white, unlike the two buttons below it (Not a good logic behind it, but it is fairly intuitive). So, it is clearly distinct that the shift key is active and frankly speaking I saw it at once. We’ve had iPhones for six years, but this keyboard is from iOS 7 and I don’t think we are still getting confused, rather I think we never got confused.

    Reply
    0
    • Collin Dec 17, 1:35 am

      Honestly, I had to double-check (I’ve been using their interface for many many years now) and I’m usually very good at remembering and figuring out UI designs I use. It’s a very poor choice on their part with the reasons described in the article.

      I actually felt pretty dumb since I assumed it would be dark/filled when it was uppercase (seemed more intuitive to me). Then I remembered they are the ones that should feel silly. As much as we all love many of Apple’s design choices, they have many mistakes across the board that my design team points out constantly.

      Reply
      +1
  4. Abin Joe Dec 3, 8:27 am

    There are many definition for UX. But for me there is only one
    That is:

    “User Experience is the REACTION of a Human Being for an ACTION caused by a Object”

    In digital world the Object will be Mobile, tablet, Desktop and the ACTION will be effected on our primary senses. like Sense, Vision , Touch.. etc…

    These ACTIONS will result in a REACTION in a human being (us) and that Reaction will be of two types : Positive and Negative.

    Hence a User Experience designer study the Amount of Positiveness of the REACTION.

    Reply
    +5
  5. Jamie Collingwood Dec 17, 5:25 pm

    Great article, was informative and fun to read. It is often hard to discern the two for bean counters. And honestly, I think the most telling illustration on the site is “how UX wants to be seen”. To further expand upon that, it makes it hard on us because we as designers want to do all of the proper preparation work (research, personas, etc.) and in theory so do the bean counters…. until they realize it costs money and time. Then the push back starts.. and soon it becomes we need this done by such and such a date.. so scratch the research, the personas, the information architecture…. etc. etc.

    I would also add some other classic examples of trends that need to die.

    1. Prompting me to download an app when all i want to do is read the site.
    2. The giant scrolling adds that push the page down and then 8 seconds later slide the page back up… that’s real fun to try to find where you left off in the article.. (I’m talking to you cnn)
    3. As you mentioned above, the “no way out” modals.

    Reply
    +3

Leave a Reply

*
* Minimum length: 20 characters