The Principles of User Experience Design

User Experience (UX) and User Interface (UI) are interrelated aspects of human-computer interaction which form the building blocks of modern design.

UX is more interdisciplinary and it presupposed an in-depth understanding of your audience. This makes UX experts part-psychologists, part-designers, the former due to the much necessary theoretical framework, the latter in order to put it into practice.

In continuation, I look over both: the psychological principles of UX design and the design thinking method as the best way to employ them into practice.

So, join me.

 

User Experience (UX) vs. User Interface (UI)

The Differences and Similarities Between UX and UI

Modern web design is based on two important aspects of human-computer interaction: user experience (UX) and user interface (UI).

Loosely speaking, UI is what you see while scrolling up and down a web page. Namely, the colour and the shape of elements, the font types, the space between some of the building blocks, etc.

However, you don’t just observe a web page as a collection of elements, but you interact with some – or all – of them. (By the way, scrolling is also a type of interaction.) This brings us to the concept of UX, which is all about how good it feels for you as a user to interact with a web page.

Even at first glance, you can easily discern that UI and UX are profoundly interrelated; in other words, it’s difficult to think about them separately. If you want to enhance the website experience for a user, you’ll certainly have to deal with its interface; and it’s virtually impossible to build a website interface without taking into consideration the way its future users will experience it.

Even so, for the purposes of this article, we’ll mostly talk about UX, all the while keeping in mind that it involves UI as well.

The Interdisciplinarity of UX

UX is much more interdisciplinary than UI. In fact, even though it may not look so, UX is tightly connected with an important branch of the social sciences; namely, psychology. Building a good UX means knowing how formal/informal your customers feel about using your product/service, which of its aspects appeal to them the most, what is the approximate time they spend on your page, etc.

Put differently, one can create an outstanding design of the interface of an application, but still win zero points on account of bad user experience. And it’s the psychological nuances of the user’s behaviour which, ultimately, make the difference.

That’s why I’d like to invite you to have a look with me at the primary principles of UX through psychological lenses. We’ll figure out how we can use this knowledge afterwards!

 

Understanding the Principles of User Experience Design

Focus

It turns out that we don’t really notice a lot of things. And what we do – is even more subjective than we think.

From where a web designer is sitting, that tiny little block of icons should be the most attractive element of the webpage. After all, he or she has probably spent most of his/her time creating it. However, you may not even notice it as a user!

Blame it on evolution: we’re built that way! It’s actually great to be able to see only what you want to. Just think of the sheer amount of external impulses your eye would have to process in the opposite case! So, it’s better if it refuses.

But, no, you say – I notice much more things than other people.

Really?

Please, do me a favour and try this famous awareness test. Then, come back here.

Oh, you’re back. (You – yes, you! – who didn’t leave the page: you don’t know what you missed).

I guess it’s safe to say that you got the point. You won’t see even something as obvious as a gorilla if you don’t want to see it.

Now think of your customers.

Does it make any sense to build a webpage before figuring out what its objective is? Because, otherwise, the majority of your customers may inadvertently focus on something you don’t even want them to notice.

Effort

As a rule, we don’t like to put any effort to find what we need. It may sound strange, egoistic, and whatever – but we all hope to see exactly what we want at the very moment a website finishes loading.

You can think about it in terms of laziness, but, once again, it’s a positive human trait. Evolutionary, it makes a lot of sense to take only what’s there for the taking. You can’t overestimate the significance of sparing your energy for the really important stuff.

So, if you want to create such UX that will make your customers want to come back – make it easy for them. You know what they need, right? (If you don’t, you’ve skipped the previous chapter.) The shorter the customer’s path from clicking on a link to getting what he/she really needs, the better the user experience is.

Structure

The website structure has a lot to do with understanding how your users search for information while browsing through your webpage. In other words, it’s not simply about offering your users useful information; it’s even more about structuring it in a way which won’t confuse them.

If you want to accomplish this, you need to have clear and intuitively comprehensible navigation map of your web page(s); and this, in turn, stems from having a very clear picture of what your customer journey should look like.

There are many different techniques to build a good website structure; however, website mapping is undoubtedly the one you want to start with. Testing and customers surveys will help you gather information to perfect the initial map.

Visuals

Your website’s interface includes numerous elements, such as colours, shapes, fonts, and spaces. They all contribute to a certain character of your website. For example, you may have already heard about the popular “warm vs. cold colours” concept. Well, it’s not just the hype – it really works!

Because colours, shapes, fonts – they all transmit a certain message. Both in itself – and in combination with other elements. Consequently, the better you know the mood and purposes of your customers, the more personalized the experience you can create for them. You wouldn’t want a pink background for a goth-related website, right?

Triggers

The better the product the more emotional connection it creates with its users. However, the connection is not only due to the visuals; it also owes a lot to the triggers, the call to actions elements, such as buttons, popup forms, notifications, etc.

Intuitively, you may be tempted to create as many reminders for your users as you possibly can; however, the trick is to do it only when they really need it.

I like how Ximena Vengoechea has phrased this for Techcrunch:

“Habit-forming products align the external trigger (a push notification, for example) with the moment when the internal trigger is felt (say the feeling of uncertainty or boredom). The closer the timing of the external trigger is with the internal trigger, the sooner the association is formed.”

 

From Theory to Practice

I know what you’re thinking: this is all good in theory, but what about practice? How does UX actually looks like? Because, let’s face it, a UI/UX designer rarely has time for theories.

Time for an introductory course in design thinking.

The roots of the concept go back to the 60s and the 70s of the previous century. Or, in other words, the time when design stopped being merely a branch of science and technology and went on to evolve as one of their main instruments. And as early as the 80s, Rolf Faste was already teaching design thinking at Stanford University.

Design thinking uses human-centred approach, which implies that you need to “step into the shoes” of your potential users and aim to create an emotional connection with them via your product. Design thinking means an exhaustive analysis of your audience – finding out what they need before they realize it themselves. It’s deep, insightful, and powerful.

Design thinking isn’t linear – it’s instead a cyclic process. It involves five practical steps which are meant to be repeated until both the designer and the user reach the point of absolute satisfaction with the final result.

Let’s have a closer look at each of these steps!

1. Empathize

Empathy is the core element of design thinking; after all, we just mentioned that it’s based on an emotional connection with your users. Consequently, a UX designer shouldn’t be someone who just sits in his office in front of the computer, using merely his imagination; he or she needs to go out and get to know the people for whom he/she designs as closely as possible.

Obviously, at this stage, it’s necessary to gather all the information available about your audience. There are number of things you can do in order to achieve this: researching existing solutions, surveying potential customers, talking to professionals, surveying amateur users… Really – it can be anything! The main goal is fairly simple: getting a multi-dimensional picture of your audience and the problems they are currently faced with.

2. Define

Now it’s time to use the information gathered at the previous stage.

How?

Well, by first defining the problem you want to solve.

So, who are your users? What kind of lifestyle do they lead? Which part of their life does the problem you’re trying to solve belong to? How complex is the problem? Are there any easy solutions which they feel are uncomplete? What are these other solutions lacking?

These are just some of the questions you need to ask yourself at this point. After some brainstorming, you will undoubtedly come up with many more questions (and, hopefully, answers) which will help you to define the problem from the viewpoint of your audience.

3. Ideate

Next, it’s time to generate some ideas.

Ideally, you’d like to brainstorm with those with a similar vision of the problem – but are not necessarily designers. (Studies have shown that cross-field teams are the most efficient when it comes to brainstorming).

However, brainstorming is much more than just scraping the bottom of the barrel for ideas. Tim Sheiner, a principal designer at Salesforce, puts it this way:

 

I don’t believe the value of brainstorming is the ideas generated; I believe it is the shared value/evaluation context created. The experience of brainstorming creates a group of people with a shared perspective, and an understanding of each other’s communication styles, who are then capable of providing a useful and powerful critique of future work on the topic.

Tim Sheiner

 

Indeed, brainstorming isn’t about finding the perfect solution. (Well, if you’re lucky enough, it can be – but the point is that “the perfect solution” shouldn’t be the only acceptable outcome). Instead, it’s about the gathering of few people with a similar vision and about the total freedom of expressing ideas. This should result in the generation of a wide variety of choices – which is rarely possible for one person.

4. Prototype

You may have stumbled across this word many times before. You may have even prototyped yourself.

The reason why the word and the process are so trendy is fairly simple: prototyping is an extremely powerful process. The goal is to create an easily testable solution to the problem discovered in the first stage and defined in the second.

As it’s obvious from its name, a prototype isn’t a full-fledged product; however, it is a functional product. Sometimes, you may want to test no more than one feature; in that case, you build a prototype for that particular feature only. The point is that you don’t want to spend all of your resources on building something your users won’t find useful.

So, you use merely some of them to create a low-fidelity version of the same product – and test it how it goes.

5. Test

Testing should help you understand how suitable your solution is for the real world. With every iteration, the initial endless array of possibilities will narrow down – until it’s the only viable option.

Usually, testing uncovers problems not even thought of before. This allows you to start the next iteration with more information and more profound knowledge of the audience and the design goals.

They have a great rule of thumb at the Stanford design school:

   

Prototype as if you know you’re right, but test as if you know you’re wrong.

Stanford design school rule

 

Conclusion

Good user experience is always founded upon an in-depth understanding of your users. No matter who they are, they will certainly not like to wander around your web page and put unnecessary efforts into finding what they need.

The Stanford-developed design thinking approach is a great five-step cyclic method to tackle this serious problem: empathize, define, ideate, prototype. Repeat this process over and over again, and you’ll end up with a nicely structured website which respects the needs and the time of your users, while providing them with the information they need in the most functional and appealing manner.