Category Archives: Article

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.

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.

Using CDNs to Reduce Network Latency

Using CDNs to Reduce Network Latency

There are two definitions that can be understood from network latency. In relation to overall network performance, latency is the number of milliseconds for your web content to begin rendering in a visitor’s browser.

In relation to network computing, latency is the time taken for a site visitor to make an initial connection with your webserver.

So, by minimizing latency, you will be able to correspondingly reduce page loading time and enhance your site visitor’s experience. Therefore, minimizing latency is highly recommended to any e-commerce sites. If you are a web developer this article will fit you.

How to Measure Latency

There are several methods that you can use to measure latency, such as:

Round-trip time: with Ping, you can measure a round trip time, Ping is a command line tool that bounces a request off a user’s system to any targeted server. RTT is determined by the interval it takes for the packets to be returned to the user.

Network congestion or throttling can occasionally provide a false reading, while the ping value provides a reliable assessment of latency.

Time to first byte (TTFB): After the webserver gets an initial user request, the time taken for the visitor’s browser to begin rendering a requested page is known as time to first byte (TTFB). There are two ways to measure it:

  • Actual TTFB: The amount of time taken for the first data byte from your server to reach a visitor’s browser. Network speed and connectivity affect this value.
  • Perceived TTFB: The amount of time taken for a site visitor to perceive your web content as being rendered in their browser. The time it takes for an HTML file to be parsed impacts this metric, which is critical to both SEO and the UX.

 How CDNs Reduce Your Network Latency

To reduce network latency, you can apply CDNs which work in several ways, such as:

  • Content caching: you can get this benefit through a CDN’s global network of strategically placed points of presence (PoPs); exact copies of your web pages are cached and compressed. As your site visitors are generally served content from the PoP closest to their location, this will greatly decrease RTT and latency.
  • Connection optimization: it is a session reuse and network peering that optimize connections between visitors and origin servers.
  • Progressive image rendering: For any image, a progressive series is overlaid over one another in the visitor’s browser. Each overplay is of a higher quality resolution. The visitor’s perception is that the page is being rendered more quickly in their browser than it would be otherwise.

Reducing the network latency is very important in maintaining your website in its best quality, as it determines your website’s performance and how it can attract more visitors. With these tricks, you can make an awesome website without having to worry too much about slow page loading time problems.

Myths and Realities of Replaced elements in HTML

Replaced Elements in HTML Myths and Realities - YWF (2)

According to official specs, replaced elements are content outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For instance, the content of the HTML IMG element is often replaced by the image that its src attribute designates. Besides, replaced elements often have intrinsic dimensions, such as an intrinsic width, an intrinsic height, and an intrinsic height specified in absolute units. Now, you may have a general description of what a replaced element is, but as a web developer, you have to look deeper about replaced elements.

Replaced Elements in the Real World
To discuss in a full description about the replaced elements, we need to go to a different resource, namely the Rendering section of the HTML Living Standard document. But, when you look deeper, the specs can be confusing. This is because some HTML elements operate as replaced elements all the time, while other do it only in specific circumstances.

Embedded Content
Embedded content is the first category of replaced elements. Embedded content means any element that imports another resource into the document, or content from another vocabulary that is inserted into the document. While these external resources have the intrinsic dimensions that match the requirements of the definition.

Embed, iframe, and video are the main elements in this category. Since they always import external content into your document, these elements are always treated as replaced elements. There are more elements that a bit more complicated that fall into this category only in special circumstances, such as:

  • applet – Treated as a replaced element when it represents a plugin, otherwise it’s treated as an ordinary element.
  • audio – Treated as a replaced element only when it is “exposing a user interface element”. Will render about one line high, as wide as is necessary to expose the user agent’s user interface features.
  • object – Treated as a replaced element when it represents an image, plugin, or nested browsing context (similar to an iframe).
  • canvas – Treated as a replaced element when it represents embedded content. That is, it contains the element’s bitmap, if any, or else a transparent black bitmap with the same intrinsic dimensions as the element.

Images are others elements that treated as a replaced element with the intrinsic dimensions of the image. This category also includes the input elements with a type=”image” attribute.

When the image is not rendered on the page, things get a bit more complicated for several reasons. The <input type=”image”> will be displayed as a normal button.

Default Size of Replaced Elements
We can understand this elements by these three basic rules:

  • if the object has explicit width, height and ratio values, use them;
  • if the object only has ratio, use auto for both width and height while maintaining the said ratio;
  • if none of these dimensions are available:
    – use width: 300px; height: 150px when the viewport is larger than 300px
    – use “auto” for both width and height and a ratio of 2:1 when the viewport is smaller than 300px;

What About the Other Types of Form Controls?
There are many misconceptions about other types of form controls are replaced elements too. After all, these elements are also rendered with a default width and height. In fact, most people consider intrinsic dimensions actually comes from the following line:

Each kind of form control is also described in the widgets section, which describes the look and feel of the control. Another reason why form control looks different from one browser to the next and from one OS to another:

The elements defined in this section can be rendered in a variety of manners, within the guidelines provided below. User agents are encouraged to set the ‘appearance’ CSS property appropriately to achieve platform-native appearances for widgets, and are expected to implement any relevant animations,etc, that are appropriate for the platform.

It is easy to get confused about replaced elements and form controls. But, they are different categories of HTML elements, with <input type=”image”> being the only form control that is a replaced element.