UX Design

Sonja Hoffmann Last updated on 21.10.2020
8 Min.
UX Design Usability
Last updated on 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 webdesign I showed you how to create your own design guidelines. However, harmonious web design is influenced by several factors - that's why I'm going to introduce the User Experience to you today:

UX Design

Why should I deal 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 brochure) and a receiver (the one the medium is aimed at). The recipient has nothing more to do here than to receive the message, understand it and then make a (purchase) decision.

Web design, on the other hand, is interactive: not only is a message sent, but rather a conversation is created. 

UX is all about the user's experience

Since the early days of the Internet, companies have been dealing with the psychological aspects of these interactions. However, at that time they did not talk about UX designers but about 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 start when visiting a website and does not stop when leaving it. Rather, it describes the entire experience a user has with the brand or product - from the first to the last contact.

However, I would like to limit myself to the part of the website that is directly related to a website: usability. The way through our product should therefore be as pleasant and seamless as possible. Nevertheless, you should not ignore the budget and internal company guidelines.

Good usability can have a significant 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 the example of a desktop screen, this would be the possibility to "click". Since it would be pointless and frustrating to have to click indiscriminately anywhere on the website, we include signifiers. These show the user where something is possible and what. 

One of the most famous signifiers is a button. It narrows down the area of interaction. We know that when we click here, something happens. This is usually intensified by hover effects - or when the cursor turns into an index finger when I move over it (hovere). These are also signifiers.

What are affordances, signifiers and feedback?

Affordance describes which interaction is generally possible. Signifiers (indicators) 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 it. All three processes are intertwined and can help to make your website more user-friendly right from the start.

  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: On a (standard) desktop computer, swiping and touch is not possible, while there is no hover effect on mobile devices.

This is exactly what must be taken into account when choosing signifiers. For example, do links only become clear when I hover the mouse over them? Then a mobile visitor does not recognize that an interaction is even possible. 

Users interact physically and digitally

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

If the visitor has accidentally navigated to a part of your site site where they can't find what they're looking for, they are likely to 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 standard display is neither in German nor in English. Using the mobile version I suddenly could not find the language settings. However, I remembered that I had already accessed the website via the app, where everything was 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 prefer to make two more clicks than frustratedly clicking site around on a mobile one.

But you should also be aware that you cannot "re-educate" your users. You can't "dissuade" them from such "wrong" behaviour, but you can plan for this behaviour and also make sure that there are enough alternatives.

Another good example, which has already caused headaches for all of us, is the - unfortunately still widespread - use of outdated browsers or the Internet Explorer. Some layouts are not displayed as creatively valuable as in Firefox or Chrome, for example. Even though this is annoying, we have to design and program for these users in the same way.

It's worse than using the app to access themsite , or using the back button, if the site visitor gives up completely - either because using ours site causes too much frustration or because there are too few alternatives for error handling.

Why usability testing?

By the way, the best way to find out about such behaviour is to observe it. Whoever tests the website is relatively insignificant. It is not necessary to find people who will actually use it site afterwards. Because really gross usability errors occur with almost every user. 

The important thing is that you must not tell the tester what to do or how to get where. The most important thing is to identify and write down possible hurdles and complications to make your website more user-friendly. The less you tell the test person, the more unbiased the result.

The 4 different indicators

What signals can you put on yours 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". Often these can be found 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, one should fall back on familiar formulations and avoid supposedly creative formulations. 

The recognition value enables the user to know with a high degree of certainty what result he can 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 to which we have become so accustomed that they no longer require explanation or further reference. There are relatively many of these. 

Everybody 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 another such phenomenon. We expect them to appear at certain locations on a site . We know that the Nav Bar serves us as a table of contents and guides us through the website. A menu bar that turns into a Hamburg icon on mobile devices also needs no further explanation. 

Common patterns that we have learned over the last years

The surprising thing is that these designs often have international validity. You can see this particularly well if you want to site orientate yourself on one whose language you do not speak. So it's worth not reinventing the wheel here. Instead, for a better usability of yourssite , it is recommended to deal with the established patterns. 

This is clearly visible in the example of a site (randomly selected) restaurant in Moscow. Although I neither speak Russian nor read Cyrillic, I immediately see how I can site navigate through them. I can see in which navigation point I am and I am able to filter out the most important information (contact) at first go.

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 slimmer. 

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 for action (call-to-actions).

When using hidden signifiers, you should also keep in mind that it may be necessary to find a separate solution for each end device.

A good example is Pinterest:

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, but the designers have developed a plan B: Clicking on the image brings up a large view in which all possible interactions are visible.

It is interesting to see how the whole thing is solved in the touch screen version. Here, too, there are hidden interactions - but for different purposes.

UX Design

In the left picture you can see the general overview of the 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. 

The additional Call-To-Actions - like in the desktop version - are only available after you have actually clicked on the image. So they are no longer hidden signifiers. 

What surprised me, however, was that Pinterest uses two different icons for the same interaction in the two versions. From a usability point of view, I don't think this is recommendable. If the user switches from the mobile to the desktop version, or vice versa, using the same icons would make it easier to find your way around. This makes the usage smoother. The usability is 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 that you can press it. All principles have in common that we know them from the real world. 

Their use in the digital world has developed into a design pattern. However, you have to be careful here: Using a metaphorical indicator with a modified symbol could confuse your users.

For example, if you use a mailbox instead of the familiar envelope, this could damage the usability of your website. Why? The user must pause and consider the next step. He has to 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 does not only mean that your visitors will somehow find their way through themsite . Usability rather means that the focus is put on the visitor - the "journey" through yours site should be as seamless as possible. 

Every interruption - i.e. every time the user has to stop and ask himself "What is actually offered here? What happens when I click on it? Do I come back then? Where do I find myself? How did I get here?" - is counterproductive.

Is it possible to build one site so that there is no interruption? Very probably not. Depending on the information displayed, certain interruptions, targeted thinking and slight frustration may even be desirable.

It is important to know the different tools in order to be able to use them appropriately 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 is the program here and in the end that is 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 about web usability and user experience design do you have? Which processes can you recommend? Please use the comment function. You want more tips on web design and development? Then follow us on Twitteror Facebook , or subscribe to our newsletter.

After studying Game Design and Creative Writing in the green Auckland region, Sonja Hoffmann has 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.

Related articles

Comments on this article

Write a comment

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