What's The Difference Between UX and UI Design?

When you have an awful experience with technology, you notice it. You can be using a banking app and can't sort your transactions, or you can be in your car and can’t figure out how to move the heat from your feet to defrost...usability issues are all around us.

But when you interact with technology and have a good experience, you don’t always remember it do you? That’s because a lot of people did their job well, making it possible for you to go about your day without technology getting in the way.

In application design, user experience (UX) and user interface (UI) experts focus their time on eliminating the roadblocks to a good experience. UX designers spend their days engineering fluid, intuitive interactions. While UI designers take this experience and make it easy to understand. UX and UI are two different practices, but together they help make a very successful product! Are you ready to dig deeper? Let's go.

What is UX Design?

Make believe you are a carpenter who is getting ready to start a new project. Before you buy the materials and decide what tools to use, you have to know what you are building. On top of that, you need to know who you are building for, why you are building it and when it needs to be complete.

Let's say you are building a custom desk for a particular executive. First we would need to find the size of his or her office to make sure we don't make the desk too big or too small. Next we want to put ourselves in the executive’s shoes. What is their job like? What day-to-day activities are they performing? Are they organized or need help with organization? Now that we have this information, we can build a better product.

Throughout the creation process, we will perform tests. Is the height of the desk comfortable for our executive? Do the drawers work smoothly? Are they too deep or too shallow? Do they provide quick access to what the executive needs? We will bring in similar executives to sit at the desk and give us their thoughts. Having other users test the usability allows you to gather outside perspectives that are vital for a successful product.

At CGI Interactive we do this on a daily basis. Every website, app and interactive tool we create follows best practices. But instead of desk size and drawer location, we design digital experiences using elements such as:

  • Navigation bars

  • Call-to-action buttons

  • Animation

  • Page transitions

  • Data visualization

  • CMS configuration

  • and much more

An effective UX design seamlessly aligns business objectives with user needs. For example, a common requirement for a business website is converting visitors into leads. This is often done by providing information that visitors are interested in and where they are most likely to look for it. But just as important is providing flexible, easy options for visitors to contact the business. They will be happier and more likely to buy, and it positions the business to receive more leads.

On our website we made a very simple change. In the navigation bar we added a colored button that says "start a project". Before, we only used the word "contact" in the same style and format as the rest of the navigation text. By making this small adjustment, we made it even easier for our visitors to reach out to us.

Start a project button

If UX Design uses the science of human interaction, what does UI design do?

What is UI Design?

Remember that desk? It's time to bring it to life. The color we stain the desk must be in harmony with the other office furniture. The drawer handles need to be a good strong material with a comfortable grip. The edges of the desk need to have an intricate design that compliments the vibe of it's surroundings. It’s the colors, patterns, fonts and images that are chosen, how they are balanced; and how they provide context and meaning that make up the elements of the user interface.

UI designers take the user experience and make it easy to understand. In technology projects like apps and websites...iconography, navigation bars and animations are the UI designer's responsibilities. A product can have a great UI and have a horrible UX. For example, a website can look beautiful but if the contact form is hidden behind an interaction, the UI designer will not be able to call attention to it if that is the goal.

UI and UX Design

A great experience is ultimately the end goal and it takes both UI and UX designers working together to make that happen. This is a continuous process. Testing, experimenting and fine-tuning lead to deeper success.

Follow us on Twitter at @CGIInteractive to stay up to date on new content!

Thank you for your time!