Last updated 21.10.2020

User experience (UX) design, usability, human interface design and human centered design - these are just some of the terms we are increasingly confronted with. But what does all this mean? Why should usability and user experience in particular interest you as a web designer? And how can you create value through UX even if you don't have an UX designer in your team?

In my last article on harmonious web design, I showed you how to create your own design guidelines. However, harmonious web design is shaped by several factors - so today I'll introduce you to the user experience:

UX Design

Why should I bother with UX?

Many European designers I know have a strong background in communication design - so they come from the direction of the print media. They create sophisticated compositions that present a precise message.

In print design, the communication path is clear: there is a sender (for example, a poster or a brochure) and a recipient (the person at whom the medium is aimed). The recipient has nothing more to do than receive the message, understand it and then make a (purchase) decision.

Web design, on the other hand, is interactive: it's not just sending a message, it's creating a conversation. 

UX is all about the user's experience

Since the early days of the internet, companies have been looking at the psychological aspects of these interactions. However, back then they didn't talk about UX designers, but human interaction designers - and the profession was generally much less common than it is today.

What is user experience?

User experience by today's standards doesn't start when you visit a website and doesn't end when you leave it. Rather, it describes the entire experience that a user has with the brand or product - from the first to the last contact.

However, I would like to limit myself only to the subarea that is directly related to a website: usability. The path through our product should therefore be as pleasant and seamless as possible. However, you should not disregard the budget and internal company specifications.

Good usability can have a not insignificant impact on your sales figures. What drives me personally is the duty as a website operator not to frustrate the user.

Affordances, Signifiers and Feedback

Simply put, Affordance describes what is generally possible. Using a desktop screen as an example, this would be the ability to "click". Since it would be idle and frustrating if you had to click randomly everywhere on the website, we build in signifiers (indicators). These show the user where something is possible and what. 

One of the best known signifiers is a button. It delimits the interaction area. We know that if we click here, something will happen. This is usually reinforced by hover effects - or when the cursor turns into an index finger when I hover over it. These are also signifiers.

What are Affordances, Signifiers and Feedback?

Affordance describes which interaction is generally possible. Signifiers signal that an interaction is possible. Feedback, on the other hand, ensures that the user knows that his interaction has triggered something.

The active-state of the button shows me as feedback that something happened when I clicked on it. All three processes go into each other and can help as basic questions to make your website more user-friendly in the first place.

  1. Which interactions are generally possible?
  2. How do I show my users that they are possible?
  3. How do they know they did the "right" thing?

The possibility of interaction is often defined by the device used to access the website: Swiping and touch is not possible on a (standard) desktop computer, while there is no hover effect on mobile devices.

This is exactly what needs to be considered when choosing signifiers. For example, are links only clear when I hover over them with the mouse? Then a mobile visitor does not recognize that an interaction is possible at all. 

Users interact physically and digitally

Affordances and signifiers can also go beyond your website interface. Your visitor can be influenced by external circumstances, or use certain interactions differently than originally intended. For example, the browser's back button is a circumstance that is external to your website. 

If the visitor has accidentally navigated to a part of your site where he does not find what he is looking for, there is a good chance that he will navigate using the back button instead of the links on your site . 

How interactions are deliberately used "incorrectly" - an example

I often book flights via a foreign service provider whose site is displayed neither in German nor in English by default. Using the mobile version, I suddenly couldn't find the language settings. However, I remembered that I had already accessed the website via the app, where everything was then displayed in English by default. Since then, I only access the mobile website via the "app" detour, because I can remember that and because I'd rather make two more clicks than click around in frustration on a mobile site .

You should also be aware that you cannot "re-educate" your users. You can't stop them from doing things the wrong way, but you can plan for this behavior and make sure there are enough alternatives.

Another good example that has caused headaches for all of us is the - unfortunately still widespread - use of outdated browsers or Internet Explorer. Some layouts don't display as creatively valuable as they do in Firefox or Chrome, for example. Even though this is annoying, we have to design and program just as much for these users.

Because worse than accessing site via the app, for example, or using the back button, is when the site visitor gives up altogether - Whether because using our site creates too much frustration or because there are too few error-handling alternatives.

Why usability testing?

By the way, the best way to find out such behaviors is through observation. Who tests the website is relatively unimportant. It is not necessary to find people who actually use the site afterwards. Because really gross usability errors occur with almost every user. 

Importantly, don't tell the tester what to do or how to get where. The key is to identify and note possible hurdles and complications in order to make your website more user-friendly. The less you tell the respondent, the more unbiased the results.

The 4 different indicators

What signals can you set on your site to highlight interactions? We distinguish four different categories, which I will briefly introduce to you.

1. Explicit signifier

Explicit signifiers consist of a prompt in text form, such as "click here". You'll often find these in conjunction with other indicators, such as contact forms or buttons. These should be as clear and concise as possible. In addition, for the sake of simplicity, you should fall back on familiar phrases and avoid supposedly creative formulations. 

Recognition value allows the user to know with a fair degree of certainty what outcome to expect from an interaction.

"SEE MORE" is an example of a simple explicit signifier.

UX Design
https://www.lonelyplanet.com/portugal/lisbon

2. Design patterns: patterns and conventions

Design patterns refer to recurring designs that we have become so accustomed to that they no longer require explanation or further reference. There are relatively many of them. 

Everyone should know, for example, that clicking on the logo leads back to the index page. Or that blue underlined text represents a link. The navigation bar of a website - as we use it today - is also such a phenomenon. We expect them in certain places on a site . We know that the nav bar serves as our content guide, leading us through the website. A menu bar that turns into a hamburger icon on mobile devices also needs no further explanation. 

Common patterns we have learned over the last few years

The surprising thing is that these patterns often have international validity. You can see this particularly well if you want to find your way around site , whose language you don't speak. So it's worth not reinventing the wheel here. Instead, it is recommended for a better usability of your site if you deal with the established patterns. 

This is well illustrated by the example of a site of a (randomly selected) restaurant in Moscow. Although I neither speak Russian nor can I read Cyrillic, I can immediately see how to navigate through the site . I can see which navigation point I am in and I am able to filter out the most important information (contact) right away. I can see which navigation point I am in and I am able to filter out the most important information (contact) right away.

UX Design
https://bulka.cafe/

3. Hidden signifiers

You can only see these by performing a certain action, such as hovering and scrolling. 

Hidden signifiers have the advantage that they make the layout look clean and tidy. So they can make your design more streamlined. 

However, they also have some disadvantages. They are only found by the user if he either knows that they are present or if he accidentally performs the triggering interaction. Therefore, these signals are not suitable for important, but at most for secondary calls-to-action.

In addition, when using hidden signifiers, you should keep in mind that a separate solution may have to be found for each end device.

Pinterest gives a good example:

pinterest

In the desktop version, new call-to-actions appear when hovering. Since the user intuitively clicks on the image to add it to his collection, the feature will most likely not go undetected.Nevertheless, the designers have developed a Plan B: Clicking on the image brings up a large view in which all possible interactions are visible.

It's interesting how the whole thing is solved in the touch-screen variant. Here, too, there are hidden interactions - but for other purposes.

UX Design

The left image shows the general overview of site . The menu at the bottom only retracts when the user scrolls up - which seems unusual at first, but is also very intuitive. When we look for the navigation, we usually scroll up. 

However, the additional call-to-actions - as with the desktop version - are only available when you have actually clicked on the image. Thus, they are no longer hidden signifiers. 

However, I was surprised that Pinterest uses two different icons for the same interaction in the two versions. From a usability perspective, I don't think this is advisable. If the user switches from the mobile to the desktop version, or vice versa, the use of the same icons would lead to a faster orientation. This makes the usage smoother. The usability is thus positively upgraded.

4. Metaphorical signifiers

A magnifying glass, which signals that the search field is located here. The envelope that represents the sending of messages. The button that signals you can press it. All principles have in common that we know them from the real world. 

Their utility in the digital world has become a design pattern. You have to be careful here, though: If you use a metaphorical indicator with a modified symbol, it could confuse your users.

If you use a mailbox instead of the familiar envelope, for example, this could harm the usability of your website. Why? The user has to stop and think about the next step. He must question whether this symbol corresponds to what he wants to achieve.

UX Design
Copyright: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Final thoughts

Usability doesn't just mean that your visitors somehow find their way through site . Rather, usability means that the focus here is holistically placed on the visitor - the "journey" through your site should be as seamless as possible. 

Every interruption - that is, every time the user has to pause and ask himself "What is actually being offered here? What happens if I click on it? Will I come back again? Where am I located? How did I get here?" - is counterproductive in this regard.

Is it possible to build a site in such a way that there is no interruption? Most likely not. Depending on the information presented, some interruptions, directed reflection and mild frustration may even be desirable.

It is important to know the different tools in order to be able to use them for your own project.

Recommended reading

One of the most famous books about usability is "Don't make me think!" by Steve Krug. The title says it all and is, in the end, what every usability approach is about.

  • "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability," Steve Krug.
  • "The Design of Everyday Things," Donald A. Norman.
  • https://www.uxpin.com/ offers some very interesting e-books for free download
Your questions about user experience

What questions do you have about web usability and user experience design? Which processes can you recommend? Feel free to use the comment function. Want more tips on web design and development? Then follow us on Twitter, Facebook or via our newsletter.

After studying Game Design and Creative Writing in the green Auckland region, Sonja Hoffmann specialized in web and app design and development. Her focus is on gamification and the exploration of user motivation and experience, coupled with a passion and curiosity for technological trends.

Comments on this article

Post a comment

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