How to communicate with your users through design?

Even if you don’t greet each user personally: each time a user visits your website, you are communicating with them. Through the design of your website.

How this works?

Communication on your website works on different levels and ranges from text, pictures and the structure of a site to colours, titles and buttons. In this blog post I want to explain how communication on a website works and what you can do to improve it.

Let’s go!

If you like this article, give it some sharing ❤️

Your Users Spend an Average of 10 Seconds on Your Website. What Should They Take with Them?

The fact that users only spend a short time on your website is nothing new. Instead of thinking about how you can get them to stay longer, today I want you to think about what your users can take away from your site in 10 seconds.

Will your users understand in 10 seconds, what your company does, which products you make and what company philosophy you follow? To answer this, think about the following questions:

  • What is my key message?
  • Will the user see it at first glance?
  • Are text and buttons placed correctly?
  • Are the colours working well together?
  • What do the pictures express and how does this fit my key message?
  • Does my website as a whole deliver a well-rounded, good first impression?

Forms of Communication on Your Website

I now want to talk about the different forms of communication that are used on websites.

Verbal Communication

Via the text on your website, you’re starting a direct communication with your users. Back in the day you would often find a direct welcome message addressed to the visitor. Today this is (luckily) not very common anymore.

The text on your landing page should be well thought out. The principle that applies here is: less is more. Come up with a key message and explanation but refrain from page-long descriptions.

The principle “nice and simple” also applies to the text on your website. The user should understand what your company does, what your product is and what industry you’re in. This should be conveyed in a few sentences.

Pictures

Depending on the type of product you’re offering, it can be difficult to use pictures to express what it does. If that is the case, try to find figurative language that allows you to create associations with your product.

Icons

Just like pictures, icons are part of visual communication and allow communicating without text. A user could, for instance, see the Twitter logo above a blog post and would immediately know that he or she can share it.

Design

The design of your website should match your industry and product. You should also think about how you can address users through the design of your website. Large scale animations like the ones on the website of Invision are a great example of how a user can be transported directly into a scene.

Design is something direct, and users feel like they are part of a moment.

It is a form of communication that invites users to become active and engage with your website.

GIFs and Videos

We at Usersnap have been big fans of GIFs for a long time and use the short videos not only in our blog posts, but also in our internal communication.

Why?

Because GIFs express our type of humour and are part of our company culture.

Colours

Colours play a special role in a website’s design and contribute to whether we feel good using the website or not.

The light green colour gives the website helpling.de a relaxing feel. Just picture the site in red. All of a sudden, the claim “In 60 Sekunden zu Ihrer Reinigungskraft (in 60 seconds to finding your cleaner)” would seem almost aggressive.

Improving Communication with Good Design: This is What You Can Do!

Selected Content

Don’t overwhelm your user with information and visual impressions. Instead, think about what is displayed on your landing page and what information could maybe be moved around.

Try to determine if your page looks too “busy”, or, at the other side of the spectrum, if there’s any information missing.

crowded website

Websites like this one are luckily becoming less common. This is a good example of how text and information will overwhelm the visitor. The page has way too much content and feels chaotic, badly structured and confusing.

Clear Structure

An example for a clear structure and open design, on the other hand, is the website of Dropbox.

dropbox design

The design is very simple and basic with appealing graphics, a short explanation about what Dropbox does, and a sign-up form. The dominating white area symbolizes simplicity and the funny animated graphic catches the user’s attention.

Direct Communication

Even though you should refrain from using a welcome message, it doesn’t mean that you can’t communicate with your users directly through text on your website. A good example is the website of Evernote.

evernote design

Here, the user is directly addressed multiple times on the site: “Remember Everything”, “Simplify it With Evernote” and “Sign in”. The design is drawing your attention directly from “Remember Everything” to the CTA Button.

Show Personality

A website should present your brand and company and should therefore have personality.

Dare to deviate from standards in web design!

A good example for a company that is showing personality on its website is MailChimp. First of all, the brand icon, the little friendly chimp, is highly recognizable and immediately makes you think of MailChimp.

mailchimp design

On the company’s pricing page, animals are assigned to the different plans, from a little cute lamb to a badass winged lion.

Wrapping it up.

The design of your website gives you the opportunity to communicate with your users on different levels (text, pictures, icons, colour). Clear structure, simplicity and a good colour scheme are extremely important.

Another way to create users’ engagement with your company is by directly addressing them in more ways than using a CTA button.

We at Usersnap hope that you like this post and would love it if you follow us on Twitter. We tweet about web development, web design and UAT on a regular basis.

Usersnap is a bug-tracking and screenshot tool for every web-project. Get immediate feedback from the visitors of your websites. Try it now for free!

If you like this article, give it some sharing ❤️