Tips on how to play with a website from the perspective of UX, graphics, and text are my favourite topic. Sometimes, these are small details that can improve the website visitors’ impression, speed up their orientation, or improve the site’s conversion rate. And that is exactly what we want in the end. After all, every website owner wants people to come back, to stay on the site as long as possible, to find what they are looking for and, finally, to become their customers.

So let’s take a look at a few interesting tips that are worth trying on the website.

Design vs front-end

Before we check the specific tips that could fine-tune the design, copy, and usability of a website, it is a good idea to get the basic terminology in order.

The success of a website or an online shop is dependent on the work of various people, such as:

  • a graphic designer,
  • a UX specialist,
  • an SEO specialist,
  • a copywriter,
  • an analyst,
  • a web developer.

The chance of success will only increase if all the people involved work together. Because it isn’t enough to get people to the website – you need to attract their attention, hold them there and, ideally, convert them (whatever this means from your perspective).

At Visibility, we also create websites. However, as soon as a client requests a tailor-made website or online shop, the project is automatically forwarded to Vizion, our daughter company, which is a part of the Visibility 360 Group.

Vizion – tailor-made websites and online shops

At Visibility and Vizion, we both approach web design as follows:

The design

The appearance and impression of the website, its layout, and the buttons or touchpoints that a user perceives.

Design vs front-end

It is important to realise that although front-end development deals with the visual and interactive aspect of a website, it isn’t the same as web design.

In fact, front-end developers don’t design these website aspects – this is the work of a web designer, or, to be more precise, a UI designer. A front-end developer subsequently takes over this design and develops it into a functional unit – the front-end. Front-end developers deal with functionality – they transform these designs into a live and interactive website.

A developer brings the work of a designer to life using various models and frameworks. Front-end developers don’t create graphic or design elements, but create an interface and various dynamic elements that create an experience.

This means that while web design is focused on the website appearance, front-end development is a way in which these designs and “appearance” are depicted on the website itself.

Demonstration of what front-end is

Source: https://www.frontend-gmbh.de/en/blog/what-is-frontend-what-is-backend/

Front-end

  • Front-end represents what you see and what you interact with in your browser.
  • It contains everything the user directly experiences – from text and colours, to buttons, images, and navigation menus.

Front-end elements include:

  • the app or website layout
  • graphics
  • audio and video elements
  • text content
  • user interface elements (buttons, links, toolbars, navigation panels, etc.)
  • input areas (dialogue windows, form fields, text fields, etc.)
  • user flow (how one interface leads to another)
  • user preferences, themes, and customisations

Enough theory, let’s take a look at particular tips for fine tuning website design and usability:

Website headline with CTA

One of the most important areas on a website is the main banner on the website homepage, or the central area of the selected landing page after the website is loaded.

It’s not just the banner or graphics that play a key role in this. The accompanying copy text – the main headline of the given website – is also key. And this is exactly where you can play around.

You can play with the visual distinction of the key headline information, and it’s also necessary to use the right keywords for your target group of website visitors (see how to find these keywords).

The theory looks like this:

Website headline

Take a look at a specific example: The SaaS tool Pipedrive is intended for management of contacts and offers for business teams. Its homepage contains the headline: “The all-in-one sales platform for growing revenue”.

From my point of view, what you can experiment with is the colour distinction of the main keyword and its selection:

Current state:

Usability of a website in practice

Proposed variant:

Usability of a website in practice

First, we need to find out what our target group really search for using a keyword analysis. In our case, the result is as follows:

Sample of keywords

Source: Marketingminder.com

Of course, the ideal way is to A/B test various copies, the use of keywords or text underlining, but this requires a sufficient statistical sample of visitors and mainly a lot of time for analysis and assessment.

Supporting text

The second important section of a homepage or landing page is an additional description, which should further explain information about what a visitor finds on the website. It should be concise, clear, and easy to read.

A practical example can assist again. On their main corporate website, investment group 365.invest has a short description, the aim of which is to sum up the basic information about the company.

Current state:

Supporting text sample:

Proposed variant:

Additional text sample

Therefore, the goal is to simplify the sentence structure, omit unnecessary information, and to point out the company’s top highlights.

CTA elements

The CTA (call to action) elements on the website have been widely discussed. CTA always depends on the context and goals. Sometimes, the role of a CTA element is to keep a visitor on the website, sometimes it should convince them to add a product to their basket.

There are various debates and a lot of research and figures on whether CTA elements should be blue, green, or red, and which tones of these colours to choose.

The fact is, however, that this depends exclusively on the context of the given website, its graphics, identity, and visitors, and without A/B testing, we can never state this objectively.

But from a purely psychological perspective, it is generally true that it’s worth experimenting not only with colours, but also with brightness and shading, see the picture below:

Usability on the website – how to choose colours

Lighter button colours actually give users the impression that the subsequent process after the click is easier.

Usability of colours on a website

Website copy and graphics in a single line

Individual website elements cannot contradict each other. If we say that our tool is easy to use, we should not show complicated images.

Good:

Website design and usability

Bad:

Website design and usability (graphics)

If we claim to deliver high returns, we should not show small projects or low numbers.

Good:

Website design and usability (photographs)

Bad:

Website design and usability (photos)

How to design graphic elements and images?

If you want to get as close as possible to your potential customers with images and graphic elements on the website, using an image search on Google can be an interesting trick. Why?

For the given keywords, Google displays only the most relevant images, i.e. those that people click on the most and those on trusted websites. If we combine this with the enormous computing power of Google algorithms, we will get the images that best express the desired phrases.

Take a look at a specific example. Let’s say that you sell party supplies. To perceive what a party means to ordinary people, enter words like “party for children”, “family party” or “company party” into Google Images.

Search in Google Images, samples of family party

For example, if you want to use particular products or graphic elements on the website, it is also good to take a look at how Google “imagines” them. What about coffee cups? Large, small? White, coloured? Is the handle on the left or right?

Google images, search for cups

Too much empty space

If you leave a lot of empty space around the text and CTA elements, this may seem counterproductive, because a user can subconsciously feel you have nothing to offer.

Concise and unambiguous copy texts are important. But if we write too little, you should consider whether an empty space could be filled by copywriting or a graphic.

Good:

Text optimisation

Bad:

Text layout optimisation

Before/after images and visualisations

The best example of the before/after mechanism is weight-loss products. You surely know it well:

Fine tuning image design

Source: interez.sk

However, the same principle works perfectly with product websites as well. For example, if you offer a certain tool which solves a client’s problem (which is what a tool should usually do), why not depict it with graphics as well using the “before and after” form?

Before:

Optimisation of image design

After:

How to optimise image design

Graphic depiction of the benefits of a product

The last tip on how a website can fine-tune the design and improve usability is a graphic depiction of the benefits of the products themselves. This means showing potential customers what it’s like when they use your products, what will change in their lives, or what benefits this will bring in practice. Here is some inspiration:

Optimisation of graphic element layout

Source: Slido.com

Optimisation of graphic element layout

Source: LiveAgent.com

—

Sometimes less is more. A complete website redesign is sometimes even counterproductive. On the other hand, graphic or copy changes on the website should not be implemented purely emotionally. Everything should be decided based on analytics data, which confirm or disprove your hypothesis.

In the Visiguide magazine, you will find a lot of useful articles. From my own ones, I would suggest 9 tips to help an online shop from the business side. This article from 2019 includes a few marketing and psychological ways to improve the conversion rate in an online shop.