Use these UX tricks on your website or die

Are you looking for answers how to design your home page or what it should contain? As a User Experience Designer I’ll try to point you to a few areas which are worth considering.

In this article you will learn:

1. How homepage affects user experience.

2. What should you do to match content to the way it’s consumed nowadays.

3. How to use social proof, the glow of glory and authority.

4. How does simplicity and animation work.

.

Before I give you some tips, I have a thought to share with you. I want to stress the importance of looking at a problem / issue from a much larger perspective. Why am I writing about this? A website or an online store is usually just part of your business, your contact point with customers. Refining the entire complex process or product guarantees success.

This is exactly what studying user experience is about – looking at users in the broad context guarantees their satisfaction. That’s why in Divante we always look from a broader perspective at each and every business. Here you can read about a sample tool that we use to identify our clients’ business: http://divante.co/blog/value-channel-user-business-model-canvas/

Getting back to the guidelines, know that you don’t have to use them all at the same time. You’ll even see that some of the examples will be mutually exclusive. Why? Because websites differ from each other as well.

Examples of websites you may be dealing with:

1. Company websites aimed at creating confidence in potential customers and presenting the offer: 

2. Product websites, whose primary purpose is to show the benefits of a product:

3. E-stores, aimed at responding to user needs by matching the best and fastest offer to these needs:

Home page and it’s impact on experience

Did you know that people have been affected by advertising since the invention of printing in the fifteenth century? Consequently, virtually all of us involuntarily became resistant to many forms of media and don’t pay attention to it anymore. What should we use then, so that our website is not treated like any other? How can we make users remember us?

Well, we can use the fact that people often remember what they felt rather than the information conveyed. Note that many messages, advertisements or websites tries to arouse certain emotions. That’s why User Experience has become such an important area of design.

The first tip that affects building emotional effect is the use of hero image. This can be a single image, a slider with several images or a full-screen video in the background. Note the two main things: first, each of these pages immediately tells users what it contains. A corresponding image, video and catchphrase were used to achieve this purpose, forming a coherent whole – a consistent image evoking specific emotions. Think about one important thing you want to convey and do it.

The second thing is call to action. In each of the examples you can see an arrow suggesting that you need to scroll down or other form of call to action (CTA). Users don’t just feel, they know what to do next to find out more. In this way you attract users’ attention and lead them to the goal.

How do users consume content?

I guess it won’t be new to you if I write that people don’t read what’s written on homepages. At first, they scan it in search of interesting things. That’s why you should employ the following suggestions.

The first is to build your homepage based on scrolling (up and down), not paging. The times when everything had to be fit on one page are long gone. Scrolling is simply easier than clicking through subpages. It’s also less tiring. Why? Because every click on a subpage reloads the browser. Yes, the waiting makes it so tiring. Why wait when you can have everything right away? Remember that users don’t like to wait. Long loading content is one of the most common reasons for high bounce rates.

The second tip refers to the form of content. Build pages using infographics. They gained their popularity precisely because the combination of a simple image (icons) and the content that focuses user attention, but doesn’t exhaust their cognitive resources. They really help to see the general and delve into detail. They correspond to the two main groups of users: “hares” and “turtles”. Hares scan the whole page very quickly, so the overall impression is enough for them to build a positive emotional feeling. In contrast, turtles need to know more details in order to delve into the topic.

Social proof, the glow of glory and the influence of authority

People need confirmation that they are making a good choice. In today’s world there is practically no monopoly. Several big players have such attempts, but you can’t say that they are the only ones (although the majority uses their services). This is why people need evidence that they’re making the right call.

The trick that can convince potential customers to the fact that it’s worthwhile to work with you can be a psychological phenomenon called social proof. In short: if others are doing so, it’s correct and proper behavior. How can you use it on your homepage? Leave feedback from satisfied customers. Nothing affects more to build trust and a sense of security than a group of people who are interested in the product and speak favorably about it.

Another example can be the so-called basking in the glory of a bigger player. How does it work? Imagine that you provide services for companies. Your client was one of the largest and most recognizable companies. To convince other clients, simply put information about such cooperation on your homepage. In this way you show that you are working for the biggest and leading players. Okay, so where is the glow and glory? People often transfer some characteristics of one thing to another when the two things are put together, forming a kind of generalization. And so, if a large company with a well-established brand that you collaborated with is presented on your website, it is highly likely that its positive features and size will be transferred to your business. If you work with the biggest and the best, you have to be similar!

The last such example, connected with the two above, is the influence of authority. That’s why well-known specialists appear in various adverts. And I’m not talking about celebrities, such as actors endorsing certain banks. It’s more about a chef who advertises food or a pharmacist endorsing a given drug. How can you use the influence of authority on your own homepage? You can post a photo and a few words from your specialists, directors or sellers. Such information may appear as a short note or it can be longer, e.g. an article.

Simplicity and animation

A good starting point is to imagine that your homepage is a tourist guide. It’s a place that shows what and where you can find. It’s also a place you want to abandon, if you feel that there is too much information or you get scared by its excess. It’s also a point from which users can embark on an interesting adventure learning about your company and you. A good guide is a simple guide. Take care of simple navigation – by extending pages (the effect of scrolling); navigation systems today are more flattened than the older multi-level modes.

A good solution is the approach when first you design functionalities and website navigation and only then you start thinking about aesthetics.

Another thing that matters nowadays is functional animation. It is through animation you can affect user experience with a particular element, and as we know the overall impression is the sum of small experiences.

What can you use animation for:

• animated loaders, progress bars that show the user that the system works if they performed some action that required loading, which can take several seconds,

• menu and navigation animations, e.g. a dropdown that appears when the user moves the cursor over or clicks on a link,

• gifs and videos in the background, which can be used e.g. in slider,

• hover animations – it may be used e.g. in pictures,

• transitions – elements that appear e.g. when scrolling a page,

• tutorials showing how it works when you first load the page – educational functions, showing how certain elements work.

.

Summary

As you can see, the above article includes a few tips you should consider when designing or redesigning your homepage. Think about what do your users really look for, try to define their goals and create solutions that will help to achieve them in as simple as possible way. Of course, don’t forget to connect user goals with your own business objectives. Good luck!

This is a guest post by Krzysztof Jagiełka, Senior UX Designer at Divante.co. Short bio:

UX Designer in Divante; designs solutions for online and offline projects and conducts research on the basis of psychological knowledge; a graduate of Psychology and HCI at the USWPS in Wroclaw.

Contact Krzysztof: kjagielka@divante.pl.