User Ex­pe­ri­ence Design

Have you ever been looking for a menu feature on a website and realized you can’t find it anywhere? Or have you ever been at a ticket machine and not been able to find the exact option you need? Then you know what the opposite of good user ex­pe­ri­ence design is (UX design). But what is UX design, why is it so important, and what is the dif­fer­ence between UX and UI (user interface)?

Our guide provides the answers including basic in­for­ma­tion about user ex­pe­ri­ence as well as some examples of suc­cess­ful UX designs.

The term 'user ex­pe­ri­ence' has been a major topic among web designers for quite some time. However, there is often a lack of clear de­f­i­n­i­tion. To give readers the best possible ex­pe­ri­ence on your website, you first need to know what good user ex­pe­ri­ence design is and what user ex­pe­ri­ence (UX) is. UX describes the entirety: a user’s emotional ex­pe­ri­ence when dealing with a website, app, or any other technical product. UX design is char­ac­ter­ized by knowledge of the website/app’s target group and what they require, as well as an at­trac­tive user interface, while still being goal-oriented and func­tion­al at the same time.

The Roman architect, Marcus Vitruvius Pollio, knew which com­po­nents a product should have in order to provide a good user ex­pe­ri­ence as early on as the 1^st century BC. At that time, he described the three concepts of 'Fir­mi­tas' (strength), 'U­til­i­tas' (utility), and 'Venus­tas' (beauty) as the basics of a good user ex­pe­ri­ence design – without using the term itself, of course. This principle also applies more than 2,000 years later – whether you want to launch a website, create an app, or program a video game.

Three factors for a good user ex­pe­ri­ence

1. In first place is ‘strength,’ or expressed in a more modern way, 'func­tion­al­i­ty'. Simply put, this means that your product must work. Crashes, downtimes, and long loading times are not part of a good user ex­pe­ri­ence! The user must be able to rely on your product. If you can’t fulfill these re­quire­ments, the user will look elsewhere and it won’t be difficult to find an al­ter­na­tive thanks to the wide range of pos­si­bil­i­ties provided by today’s internet. If your product doesn’t work or doesn’t work as intended, the target group will not receive any word-of-mouth rec­om­men­da­tions or positive reviews on the relevant App Store, meaning that your site will not be shared or linked to. 2. The next thing is utility: your website or app must offer the user value. This could be the products in an online store that the user would like to have, for example. Good content, whether in­for­ma­tive or en­ter­tain­ing, is required on other websites. The general rules for good content apply here. How you can go about op­ti­miz­ing your content is shown in this article. In addition, this also means the site must be easy to use: the menu nav­i­ga­tion must be intuitive, logical, and easy to remember. The func­tion­al range must cor­re­spond to the target group’s re­quire­ments, be up-to-date, and ideally be able to adapt to the user’s behavior and habits. Two examples of how not to do it: a graphic program that has its cropping function hidden in three sub menus and does not offer shortcuts is useless for the target group. Also, a writing program whose bold, un­der­lin­ing, and italic features are hard to find, won’t impress the reader since it doesn’t provide a good user ex­pe­ri­ence. 3. Beauty is also needed for a good user ex­pe­ri­ence, so make sure you don’t neglect the aesthetic! This area is where the most pitfalls have the pos­si­bil­i­ty of occurring. The aesthetic scale can vary greatly depending on the cultural area, scene, or target group. In­con­sis­ten­cy, over­load­ing, or using a design that misses the mark with your target group will dis­cour­age the user. Therefore, the design must not only be func­tion­al but also relevant to the target group.

UX vs. UI: what is the dif­fer­ence?

Sometimes user ex­pe­ri­ence (UX) is confused with user interface (UI). Even though both terms are closely related, there are sig­nif­i­cant dif­fer­ences between the two: while user ex­pe­ri­ence refers to the internal ex­pe­ri­ence a user has as they interact with a company’s products and services, the term user interface refers to visual elements e.g. like buttons and icons. The latter en­com­pass­es the user interface on which user and machine interact and is the more technical term, while UX is the more strategic term. The user ex­pe­ri­ence design is the result of a good user interface, but also includes areas such as in­for­ma­tion ar­chi­tec­ture, usability, or purely aesthetic aspects. Thus, user ex­pe­ri­ence is an over­ar­ch­ing term, whereas user interface, on the other hand, is a dis­ci­pline.

Putting theory aside for a moment – how does good user ex­pe­ri­ence design look in practice? Firstly, ask yourself what your company or offer is: do you already have a corporate identity or important design guide­lines in a style guide? If so, use this as the basis for any further steps. You will most likely benefit from the work that has already been pre­vi­ous­ly done. This will ensure a con­sis­tent and pro­fes­sion­al ap­pear­ance across all your com­mu­ni­ca­tion channels. This enables you to be rec­og­nized by your users and elim­i­nates the risk of design faux pas later on. For the next step, you should ask yourself - Who exactly it is that you intend to reach with your site or app? What are your target group’s wishes and demands? What do they expect from your offer? UX design is always tailored to a specific target group. This is the only way to provide the perfect ex­pe­ri­ence for your visitors and users. For example, a gothic band’s website should be quite different from that of a porcelain factory. Ac­cord­ing­ly, user ex­pe­ri­ence design only works for certain target groups whose taste you should know in advance. This requires tests, surveys, and even large-scale target group studies so you can use the results to create personas. Con­cen­trate on the es­sen­tials: an over­loaded design is not helpful and will end up being dis­tract­ing and ir­ri­tat­ing. A good user ex­pe­ri­ence design, on the other hand, is minimal, simple, and clear. When it comes to websites, it’s important to regularly include blank spaces to give the user time to process content. If the design is too intense, the user will quickly become over­whelmed. There should also be a suf­fi­cient gap between the text, image, and any nav­i­ga­tion­al elements, but make sure you also aren’t simply wasting space. Co­or­di­nate colors, fonts, and the layout of your content. Avoid stylistic in­con­sis­ten­cy for your UX design. It can quickly overwhelm users if they are con­stant­ly con­front­ed with new color schemes or fonts. In addition, lack of con­sis­ten­cy in user ex­pe­ri­ence design makes it look unclear. The taste of the target group is always important in this case. Once all aesthetic aspects are clas­si­fied, the focus is on op­ti­miz­ing ac­ces­si­bil­i­ty and user friend­li­ness: a good user ex­pe­ri­ence design does not have long loading times and leads the user quickly to their goal without sending them on several detours. Com­pli­cat­ed menus should, therefore, be avoided. You should instead design an intuitive and easy-to-follow path to help the user get familiar with your software or website. In­ex­pe­ri­enced users sometimes fail at basic in­ter­sec­tions – despite all the op­ti­miza­tion efforts to produce a chic UX design. Such users must be able to quickly find not only the most important functions but also be able to find support if necessary. For this purpose, you could provide a central help button. This could lead users, for example, through the ap­pli­ca­tion in a clear step-by-step fashion, or lead them directly to a search­able en­cy­clo­pe­dia that explains all important terms and functions. To improve user ex­pe­ri­ence even more, you could consider including a forum, contact form, or even a hotline for telephone inquiries.

The aim of user ex­pe­ri­ence design is to enable the target group to have the best possible ex­pe­ri­ence at any time. This means that the website or software must be con­tin­u­al­ly improved in order to keep up with the pro­gres­sive re­quire­ments of the target group. A simple example: a few years ago, classic website design was enough. But nowadays, your website will lose important users and possibly not make a profit if it doesn’t have re­spon­sive design for mobile devices or native apps for iOS and Android devices. Users might decide to use your com­pe­ti­tion’s website if their user ex­pe­ri­ence is better. In this article, we explain how to make your website mobile.

Obtaining user feedback and studying the target group

Regular feedback is necessary if you want your UX design to be up-to-date and stay that way. Although you can detect and correct many in­con­sis­ten­cies by carrying out your own tests, the problem with internal testing is that there’s a risk of op­er­a­tional blindness. This means that you won’t see your own errors. So, for this reason, it’s highly advisable to collect in­de­pen­dent opinions through user surveys and tests. For example, you should try to reward the target group with relevant non-cash prizes, free trial versions of your premium offer, or in-game items for all par­tic­i­pants. There are many in­cen­tives to get feedback from (potential) users.

Even if your app is found in the Google Play Store or Apple App Store, it’s not always easy to share it with users. Dis­sat­is­fied users are more likely to give feedback than satisfied ones and will let you know im­me­di­ate­ly if something is wrong with your product or service – this can be a curse and a blessing at the same time. On one hand, feedback is important for being able to continue op­ti­miz­ing the user ex­pe­ri­ence; on the other hand, many negative responses can quickly damage your rep­u­ta­tion. If possible, react quickly to the criticism and offer help. Prefer­ably, you have already carried out extensive (and in­de­pen­dent) UX tests in the run-up to the launch and have already minimized the risk. It’s also a good idea to send out public messages to explain that bugs were fixed as this will calm many users.

If you have a forum and/or social media account for your offer, this is a great op­por­tu­ni­ty to keep users and prospects up to date. Sending news no­ti­fi­ca­tions regarding de­vel­op­ment updates, dis­cov­ered bugs, or informing users that you’re op­ti­miz­ing your user ex­pe­ri­ence design, will be gladly received. They bind the users to your offer and at the same time give them the op­por­tu­ni­ty to react to the changes. Last, but not least, a good and trans­par­ent in­for­ma­tion policy increases the user ex­pe­ri­ence in the long-term.

UX design: mea­sure­ments via eye-tracking

Costly, but very promising are complex UX mea­sure­ments e.g. via heatmap analyses – the heatmap enables you to visualize a website’s usability. A proven technique for creating heatmaps is eye tracking. This technique uses special glasses, webcams, and external remote eye trackers to record the user’s behavior, focus, and per­cep­tion. The obtained data can be used to optimize the user ex­pe­ri­ence design e.g. if you notice users getting in­creas­ing­ly lost while looking for a certain function, you can use this in­for­ma­tion to improve user ex­pe­ri­ence and adapt the design.

Are you wondering if all the effort and cost for op­ti­miz­ing user ex­pe­ri­ence is really worth it? These time-consuming and cost-intensive test phases are needed before software or websites are launched. The reasons for investing time and money into suc­cess­ful user ex­pe­ri­ence design are numerous and clear:

• UX design puts the user first.

• It means the design of the website/app has an ob­jec­tive­ly mea­sur­able basis: the sat­is­fac­tion of the user.

• It promotes goal-oriented work in the team.

• If you work directly with a func­tion­ing and up-to-date user ex­pe­ri­ence design, you will later save de­vel­op­ment costs for cor­rec­tions, support, and customer service.

• Con­tin­u­ous testing and op­ti­miza­tion of the user ex­pe­ri­ence leads to in­no­v­a­tive and up-to-date designs. This puts you ahead of the com­pe­ti­tion.

• Aes­thet­i­cal­ly appealing designs attract attention and encourage users to continue to engage with your site or app.

• If users are familiar with the ap­pli­ca­tion, your offer will stay in their memory for longer – this will strength­en your brand.

• A high level of customer and user sat­is­fac­tion connects users, generates likes and/or rec­om­men­da­tions, and ul­ti­mate­ly increases the con­ver­sion rate.

In order to give users an authentic ex­pe­ri­ence on a website or with software, cre­ativ­i­ty as well as func­tion­al­i­ty is required: otherwise your project won’t prosper. If long loading times are un­avoid­able on an app or a complex website, why don’t you turn them into part of the user ex­pe­ri­ence design? Keep the user in the loop by ex­plain­ing why the site is taking a while to load: this improves the user ex­pe­ri­ence. The following examples show how to create real ex­pe­ri­ences with in­no­va­tions and cre­ativ­i­ty:

On the original page from Wikipedia, the same image appears further down and sig­nif­i­cant­ly smaller. Its sig­nif­i­cance is somewhat reduced, compared to it being used as the back­ground where it im­me­di­ate­ly catches the reader’s attention and elevates the mood of the article. Don’t forget the ed­u­ca­tion­al value of this: even when you skim the text, you can’t miss the mas­ter­piece behind it.

This is all thanks to one image – the back­ground image. This also applies to hundreds of other example articles: an article about tigers using the animal as a back­ground picture, or an article on different oceans having a cor­re­spond­ing photo. It seems that a picture is indeed worth a thousand words.