UX vs UI — How to build an effective User Experience strategy for your website

Long gone are the days when a website was designed strictly from a User Interface (UI) standpoint. It is now widely recognized that the User Experience (UX) of a website must be given significant thought when undertaking any project. But what exactly is UX, and how do we actually approach building a UX strategy as we are all told we need to?

An image with a light bulb and different ideas surrounding it

First, let’s tackle the difference between UI and UX.

UI refers to the User Interface; essentially it is how we as a person will interact with a website. It refers to the layout of the screens we see, the navigation between pages we visit, the buttons/icons we push, and how they are all presented to us.

Let’s take Amazon as an example. The UI of Amazon puts a search bar entered at the top with your cart and account options to the right. When you click an item you get specific information with the option to add it to your cart from the right. User interfaces are the individual interfaces on the pages of the website.

UX refers to the User Experience; how a person feels when they are interacting with your website. It’s a combination of all the individual User Interfaces working in harmony to provide a pleasant experience to the user. Was the website frustrating to navigate through, or was it easy to find what you were looking for? Would you go back to this website to get further information, or refer someone else? Though the UX of a site is definitely impacted by the UI design, it also encompasses many other aspects.

Back to Amazon, the UX is far more than searchable items that you can add to a cart. Information is readily available and easy to find. They give you the ability to become a member and get free fast shipping. They remember your preferences and give suggestions on things you would likely be interested in. The flow of purchasing from them is fast, simple, and straight forward. Also, an important note, you generally get what you wanted in the time they say it will take to get it; it works!

In the end, it’s the UX of a website that determines if a person is likely to rely on your website as a credible source of information, give you their business, or refer someone else. With the amount of online competition that exists, if you cannot provide the experience a person is looking for they will find somewhere else for it.

With this in mind, it is obvious that approaching the UX strategy of a website is definitely not the same as the UI of one. Of course, this leaves one very large question: How does one go about understanding what qualities a website should have to be more likely to have a successful UX design?

UX expert and best selling author Peter Morville has been advising large scale organizations such as AT&T, Cisco, and IBM on Information Architecture since 1994. During this time he has presented many ways to look at design, and came up with a fundamental understanding behind the experience of a user on a website. Dubbed “The User Experience Honeycomb”, it shows the 7 key qualities of a website that impact the experience a user will have while visiting it.

The User Experience Honeycomb by Peter Morville

A proper UX strategy will touch base on each of these qualities with an understanding of how the website is expected to be address them. It should be noted that many of the properties of each quality may cross with properties of another, showing the strength of a unified overall strategy.

Let’s dive a bit into each of these qualities to understand how they connect to a website.

Useful

The purpose of a website must be to fulfill a need. Without having a need to be fulfilled, a website cannot be seen as being a useful one. When designing a website you must keep in mind what the website is to be used for and make sure it accomplishes those tasks. If the website does not accomplish the ability to be useful, most people will not revisit it.

Usable

Your website should be easy to use. There should be as little of a learning curve as possible, as a difficult site to navigate will deter people from getting to know it. Note that the UI of your site plays a large role here!

Desirable

This has to do with the visual appeal of your website. If a website is not visually appealing, it will be deemed less credible by many people, and less likely to be trusted as a resource. Keep in mind that a busy website is not a desirable one; keep your design simple and to the point as to not overwhelm the user with too much information at once.

Findable

If people cannot find the information they need on your site, then why are they there? Information must be quick and easy to find with clear thought being given to the navigational structure of the information. Here, again, the UI of the website and the Information Architecture are important to ensure information is presented in a meaningful way.

Accessible

Unfortunately this is one of the most forgotten qualities. If people have issues seeing, hearing, or understanding the content of your website they will be less likely to rely on it as a credible or reliable source. There are various levels of Accessibility standards and you need to decide how accessible your website needs to be based on the demographic of your audience.

Credible

If a person does not feel that the website is credible, they will most probably not trust the information (or products) provided. Along with desirability and accessibility of a website, another important factor to the credibility of a website is the language used; if it is not appropriate for the audience or topic, it will be taken less seriously. Simple language and birds eye view is always preferred over humour or jargon. An easy way to write content on your websites is to use the inverted pyramid method.

Inverted Pyramid Writing

Valuable

At its core, a website must give value to the user. This actually ties in all of the previous qualities discussed. The more you are able to address these qualities, the more valuable your website will be, and value is central to the experience. Think back to the example of Amazon. Most people who have used it would agree that it is a valuable resource for online purchasing, rather than just another online store. Ultimately this is why people go back, because they have found value in the experience.

The UX Honeycomb gives us a starting point for building an effective UX strategy. It allows us a way to visualize the important qualities we need to be considering when designing a website. By understanding each quality and how they affect the people visiting your website you will be better equipped to put together a strategy with confidence that it will do what you expect it to.

Obviously we cannot always adhere fully to every quality in the honeycomb, so this tool also allows us to identify what the priorities are so that they can be focused on first, and which to address when other factors such as time and budget allow. As to which of these qualities is more important than the other, that is something that must be decided on by each person or organization, and the vision they have.

Now that you understand UI and UX, here’s a short article on how to create a features wish list for your website!

Have a project in mind? Tell us about it!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.