Tag Archives: layout

Why UI Changes Annoy People and How to Handle It

When it comes to designing for good user interfaces, especially for website design interfaces, there are so many reading patterns that you can apply. Each pattern has their own knowledge of how people perceive visual information and theory of how to improve user experience while reading or observing content. Among so many theories, there are three patterns that gain the most popularity. They are the Gutenberg Diagram, the F-pattern, and the Z-pattern. If you are a web designer, we  highly recommend this article for you!

The Gutenberg Diagram
This theory reflects the western culture of reading which is top to bottom and left to right.

image 1 for UI changes

From the diagram above, we can see that there are four quadrants. For key contents like a headline and a logo, you’d better place it in the top left quadrant. Then, you can place logical conclusion in the bottom right quadrant in the bottom quadrant. Therefore, it is recommended to put a CTA (call-to-action) in this section in the form of text, a video, or a link.

The F-Pattern
In F-pattern, people start engaging with content by moving their eyes in a horizontal line. Then, they scan a vertical line trying to find the points they’re interested in. Then, they will continue what they’re looking for after scanning the content horizontally.

image 2 for UI changes

 

You can use elements like bullet, points, typography, colored buttons, and highlighted texts and so on to improve the user experience. These elements give visual weight to the interface and indicate important points.

The Z-Pattern
Many people consider Z-pattern as the king of landing pages since it covers important aspects including visual hierarchy, content structure, and CTAs. Different from F-pattern, which is more suitable for text- or content-heavy page, the Z-pattern efficiently grasps users’ attention on landing pages with minimal copy. Here is an image of Z-pattern.

image 3 for UI changes

You can follow the structure below when designing with the Z-pattern:

  1. A top horizontal line should include catchy contents and elements like the logo and navigation bar (so users can quickly access the website’s pages).
  2. Following a classic storytelling approach, a diagonal line should introduce users to the main content including the main copy, attention-grabbing images, slideshows, and so on.
  3. Finally, a lower horizontal line should feature a CTA that stimulates users to perform a certain action such as signing up, subscribing, or making a purchase.

How to Prevent User Dissatisfaction with Interface Changes

Since everyone is unique,  we cannot determine which pattern that might suit your users. To know what kind of pattern that might suit your readers; you can apply the following methods to evaluate the design and functionality of a new or an existing system with real users. Here are some of the methods:

A/B Testing
Comparing two different concepts is called as A/B testing or split testing. In A/B testing, you can compare buttons, CTAs, color schemes, and banners. The aim of A/B testing is to figure out which of various options is the most successful, for instance, which button gets the most clicks. Each case of A/B testing is unique. What elements you test depends on your business goals. However,  the following elements are generally tested:

  • Copy (product descriptions, button text, etc.)
  • Calls-to-action (for example, their placement or wording)
  • Application forms
  • Layouts
  • Images
  • Color Schemes

Bear in mind that in order to get relevant results, the A/B testing should be performed simultaneously. Besides, doing A/B tests will avoid you from audience backlash and can even help you achieve better conversion rates by making necessary tweaks to an interface.

Hallway Testing
If you are looking for an informal way, the hallway testing is the answer. It involves going to a crowded area and simply asking passers-by to test and evaluate an interface. For example, you may go to local Starbucks and do little interviews with strangers in that cozy place. You can also apply this method with your office colleagues. Therefore, to conduct testing successfully, you can plan everything in advance.

By performing this method, you can figure out what elements of an interface puzzle users and how your users conceive the system as a whole.

Five-Second Testing
The main purpose of 5-second testing is to elicit the user’s first impressions to an interface and discover whether a website or an app communicates its purpose to its visitors. In 5-seconds, they have to view an interface and try to remember as much as possible. Then, they will be given some questions regarding the sense of their reactions.

Through 5-second observing, you can generally aim at evaluating a visual UI component rather than the whole interface.

Conclusion
Even though the changes of UI will upset people,  ignoring the last trend will ruin your product. Therefore, you need to study your pattern before applying it. This trick will make the necessary tweaks without scaring off your users.

4 Ways of Boosting UI Design with Vibrant Colours

Ways of Boosting UI Design with Vibrant Colours

Colour has strong effects and impressions for almost everything. When you come into someone’s house, the first thing you would notice is the colour of their house and how it gives you different kinds of vibes depending on what combination of colours it has. That’s why; colour has the most powerful influence for all designs. Not only can it trigger different kinds of reactions, emotions, or moods, it can also boost the audience’s impressions upon seeing it.

The same thing applies to UI design too. For a web designer, colour in UI design is very important because it can draw attention and influence the reaction of the people who see it. Nowadays, designers use vibrant colours for their design. Vibrant is generally used to describe bright and intense colour, although vibrant isn’t a precise colour term, since people will use it differently. Bright colours with cartoonish designs are usually good for entertainment designs and elegantly minimalist colour and styles are well-suited for business designs. Therefore, vibrant colour is one of the biggest UI design trends of 2017.

What makes it unique is that vibrant colour can be applied in different ways and styles to design. In this article, we are going to explore the ways of boosting UI design using vibrant colours!

1. Monotone
Monotone is one of the most popular ways to use vibrant colours for a design. It is easy to create and makes text very readable. Monotone palettes come with a single colour with a mixture of shades and tints. Choose the colour that matches with your message. If paired with perfect typography, monotone colour schemes will create a really amazing look,.

2. Duotone
Duotone is an image created from two colours. It can be either two shades of the same colour, or two different colours. Duotone enables you to express an image with the emotional elements from the combination of any colour. Different colours can stir different kinds of emotions, depending of which colours and its combination you use. For example, the combination of soft and simple colour can represent business-like atmosphere, while the combination of bright colours can express happiness with a positive mood. It also adjusts the colour variations in an image. That way, the text can be placed anywhere on the image and is still perfectly readable.

3. Gradients
Gradients in the combination of the same colour that illuminates from light to dark can give the impression of modernism. It can also improve visual communication, whether it is a full gradient background or smaller places for the gradients. What makes smaller areas of gradient easier and more interesting is that you have more options to be creative with this technique, and when applied in smaller spaces, it can be visually attractive to play with multiple colour pairs.

4. Overlays
Overlaying is the application of semi-transparent coloured box covering an image or a video. It has been a popular design choice for a long time because it is easy to create. However, you have to be careful in setting the degree of saturation and transparency of the colour, because you have to make sure whether the text is still easily readable or not.

Now you know the ways of boosting your UI design using vibrant colours! Whatever you choose between these 4 types, make sure you put the text with the right colour combination so that the text is easy to read and the design is interesting to look at.