UX ≠ UI—The Difference Between UX & UI

When we talk about Web and Application Design, the terms “UX” and “UI” are thrown around constantly. Both are key to providing a successful product and solution; something we’re passionate about here at PixelMill. But what do they mean exactly? What’s the difference? How are they used together? The truth is, they have extremely different flavors, but much like the classic PB&J, they can be used together to create a winning combination.   


IT’S UX (PEANUT BUTTER) + UI (JELLY) TIME!   
giphy
 

What is UX? (Usefulness, usability, delight)  

“UX” stands for User Experience. Just as it reads, it is the feeling or the experience someone (User) gets when interacting with a product or service.   
Still a little fuzzy? Check out this quick clip of Don Norman breaking down UX:


Think about the interactions you’ve experienced in your day to day life: driving your car to work, ordering your morning coffee from your favorite coffee shop, or checking your email. These are all interactions we have with products or services to achieve certain goals throughout the day. Now think about the emotion and attitude you’re left with after achieving the goal, this is User Experience.   
It can be broken down to 3 tenets: 

  1. Usefulness – is it useful to you? Does it do what you need it to do?  
  1. Usability – Does it work? How easy was it to use? Is it intuitive? 
  1. Delight – Were you pleased? Was it stimulating?  

To achieve great user experience, we must develop empathy and understanding of the people who will be interacting with the product or service. At PixelMill, we start focusing on the needs of the user and the business the moment we begin speaking with you. During our Discovery stage, we gather information on a user’s needs and wants by performing user and stakeholder interviews to fully understand the people who will be using the product or service. The result of this analysis is then translated into actionable items, which provides us with the base of information to formulate a solution.  


 Example of UX Wireframe:
wireframe_sample
 

What is UI?  

The term “UI” means User Interface. It consists of the visual elements of an experience that supports a user when they’re interacting with the product or service.  For example, the interface of your car consists of buttons on your dashboard, the radio player, the air conditioning controls—these elements all support your experience of driving your car. In the digital world, some examples of visual elements are buttons, checkboxes, icons, notifications, and navigation menus. These visual indicators act as a common communicative language that tells us how to use a product or service.  
In the design stage, we transform the findings from our discovery stage into process sketches or wireframes to visually brainstorm a possible experience. Once we are in a good place in the wireframe phase, a user interface can then be designed to support the experience that was formulated in wireframes. User interfaces can also be designed to reflect a company’s brand and culture. We incorporate a company’s visual design elements such as color, typography, images, and any other design elements while also being conscious of how it supports how the user interacts with the interface.  


Example of Visual Design Mockup:
mockup_sample
 

Ok, great! Now you know the difference between the two, but how do they work together?   

Now it’s time to pull out your Wonder bread!  
Both UX and UI are essential ingredients to the success of a product or service. It’s difficult to separate the two terms as they are so closely related. A beautiful user interface is nothing if it doesn’t account for its user’s needs. A well thought out experience could fail if it cannot captivate the users with the interface. Much like the classic PB&J, UX and UI are just better together.  
 microsoftteams-image-3
 UX + UI 4 eva! 


Want to discuss how PixelMill’s designers can help make your end-users as happy as that little dancing banana above? Have a question for our design experts? Or simply care to share your favorite sandwich? We’d love to hear from you! Contact us today!  

 

One thought on “UX ≠ UI—The Difference Between UX & UI

  1. Ryan Coquilla February 5, 2018

    Great read!

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Do you need to build a custom search-driven component for your #digitalworkspace while saving thousands of hours of development time?

Join us on as we lift the hood of #PnP Modern Search v4, show you how it's built, & take you on a live coding adventure.

http://ow.ly/MTnL50EpN5J

#Hybridwork is more than just a buzzword to latch onto; it’s the future for many organizations for the unforeseeable future. So, how can you use #Microsoft365 for #hybridwork? Let's breaks it down…

http://ow.ly/ay2e50EmNhg

It's that time again! Join the #PixelMillWebinars on 4/29 where @EricOverfield lifts the hood of #PnP Modern Search v4, shows how it's built, & takes you on a live coding adventure to customizing your own web part using the power of the existing codebase.

http://ow.ly/EI5h50EmNqj

What? Anchor links now work in #SharePoint site navigation! This fix snuck in and I completely missed it. Use them to create a TOC for long pages or cross link between pages. They work in text or quick links web parts & nav too! https://support.microsoft.com/en-us/office/create-and-use-modern-pages-on-a-sharepoint-site-b3d46deb-27a6-4b1e-87b8-df851e503dec#bkmk_pageanchors

A big thank you to David Leveille and @CrushNetworks for having our President + Co-Founder @EricOverfield on this episode of #TheVirtualWaterCooler!

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch