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:
Why bother with UX design?
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 does not begin when a user visits a website and does not end when he or she leaves 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 significant impact on your sales figures. What drives me personally is the duty as a website owner 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 are interrelated and can be used as basic questions to help make your website more user-friendly in the first place.
- Which interactions are generally possible?
- How do I show my users that they are possible?
- How do they know they have done the "right thing"?
The possibility of interaction is often defined by the device used to access the website: Swiping and touching 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 siteis displayed neither in German nor in English by default. I suddenly couldn't find the language settings via the mobile version. However, I remembered that I had already accessed the website via the app once, where everything was then displayed in English by default. Since then, I only access the mobile website via the "app" diversions, 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 about such behaviour is through observation. Who tests the website is relatively unimportant. It is not necessary to find people who actually use the siteafterwards. Because really gross usability errors occur with almost every user.
It is important that you do not tell the tester what to do or how to get where. The key is to recognise 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 result.
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.
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 takes you 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 us as an indication of content and guides 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.
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:
In the desktop version, new calls-to-action appear when hovering. Since the user intuitively clicks on the image to add it to his or her collection, the feature will most likely not go undetected. Nevertheless, the designers have developed a plan B: If you click on the picture, you get 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.
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-action - as with the desktop version - is only available when you have actually clicked on the image. This means 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, using the same icons would make it easier to find one's way around. This makes use smoother. Usability is thus positively enhanced.
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 letterbox 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. They have to question whether this symbol corresponds to what they want to achieve.
Conclusion on UX Design & Web Usability
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.
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: A Common Sense Approach to Web Usability" by Steve Krug
- "The Design of Everyday Things by Donald A. Norman
- UX Pin offers 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.