The needs and goals of your user should be central to your business as well as your website design. There are two acronyms used a lot in web design: UX and UI. They are two different methods that share a common goal of providing a good user experience. The most important aspect of both methods is that they prompt designers and developers to keep the user at the center of all their decisions.

UX: User Experience

UX stands for User Experience and deals with the type of experience your user has with your product. As a website developer, I consider user experience as I’m developing a website and particularly when I’m developing the architecture of the website. One way I do this is to create and consider different user personas and the different goals those users may have.

For example, if I were creating an e-commerce store, one of my personas may be a male user coming to the website to purchase a gift for his partner. He has the item name and the website, so all he needs to do is go to the website, search the term, and purchase.

As a developer, I want the user to be able to accomplish his task and come away with a good user experience. Most of us don’t want to think. We want to land on a page and intuitively and quickly accomplish our task. With this in mind, I may decide to place a search bar at the top of the web page along with the primary navigation so the user won’t have to scroll to find the product or click on a bunch of category drop downs. I may also put an “Add to Cart” button on the preview image so the user won’t have to click on the item description before he is able to add it to his cart. Making sure that the path and architecture of your website considers your users and their goals, is what User Experience is about.

UI: User Interface Design

UI stands for User Interface, and I think of it as a subset of UX. Once I’ve considered the best architecture and interactive elements for your website, I’ll consider the interface design. In our example, the Search Bar and the “Add to Cart” button are two elements that I’ve determined will help our user have a good experience. I want to now design those elements with the user in mind. I want those elements to be highly visible, and consistent with the tone of the website as well as your company’s branding. I would make sure the design includes a search bar above the fold of the website so that the user will see it as soon as he lands on the page. I would also make sure the ‘Add to Cart’ button is prominent and carries the colors and branding of your website. User Interface is the design that makes the UX seamless.

UX and UI in Action

Here is a quick example from Target’s Website that illustrates what we’ve been talking about. 

Our user persona wants to purchase a “Hello Gorgeous” mug that his partner saw at Target. The user would go to Target.com and find a large visible search bar at the top of the home page.
He would type in the description “Hello Gorgeous Mug” and be presented with the result page. He sees the mug his partner wants, so now all he has to do is click the Target Red “Add to Cart” button and checkout.
The UX helped create the site architecture that allowed the user to quickly navigate to the desired product. The large and highly visible search bar, as well as the clearly marked “Add to Cart” button styled in Target Red, were the UI elements that helped the user take full advantage of the carefully considered site architecture. The user was able to quickly and intuitively accomplish his task. He would ideally come away with a good user experience. This is the goal of UX and UI. 

The Takeaway

Often, these UX and UI considerations aren’t part of ready-made themes or Drag and Drop Website builders . Those are created for the masses, and so putting user-centered design theory into practice doesn’t always work. But now that you know the importance of UX and UI, you can bring it into your business. Just being aware of your user and considering what goals she/he may have can help with decisions and design.

Whether you are hiring someone to build a website, or you’re a DIY with big plans, make sure you think of your user and the goals that they may have when they come to your website. A few simple changes can make a big difference to your user. Remember, you’re designing your website for your users, not yourself.

If you have any questions, or want to talk about working together just drop us a line. We’d love to hear from you.