Speaking of user experience, we will first have to understand user behavior. More specifically, in terms of web design, only when we understand how people read on the web and search for information, can we design a better web interface and web content layout. Here, I would like to introduce three main reading patterns for web and understand the user experience in Chinese context.

Gutenberg diagram

The Gutenberg diagram is also known as the Diagonal Balance. The concept comes from Johannes Gutenburg, who is the inventor of the European movable type printing; he applied the method into printing. He pointed out that people tend to read from top left to bottom right. The pattern applies to text-heavy content, may it be a newspaper or novels (excluding novels from Hong Kong, which still uses vertical layout from right to left. In this case, the reversed Gutenberg diagram works).

The diagram divides the layout into 4 quadrants as shown below: primary optical area / strong fallow area / weak fallow area / terminal area.

gutenb diagram-01

Key visual elements should be placed along the reading gravity path. For instance, putting the headline in the top/left, some important content (table/diagram/image) in the middle, and a call-to-action or contact information in the bottom right. Designs that follow this diagram are said to be in harmony with natural reading gravity.

According to this diagram, there are arguments about how we make decisions when we see call-to-action buttons on dialog boxes or pop up form.

For example, if we are designing an inquiry form, in order to achieve higher efficiency, we usually put ‘submit’ on the bottom right and ‘cancel’/’reset’ on the left if ‘submit’ is the expected and most important action. This is more convenient to the users and can simplify the journey as the ‘submit’ button is placed in the terminal area. However, this will somehow lead to mis-operation to some users who want to reset and cancel the action. As discuss above, this user journey is following the Gutenberg diagram to achieve high efficiency. In fact, the Gutenberg diagram and other reading patterns have greater reference value to Chinese dialog box than the value to  a western one. We can recognise “Yes/No” or “Confirm/Cancel” based on the length of the words. However in Chinese, “是”/“否” or “确定”/“取消” or “确定”/“重填”,they are all the same length – either both one character or both two characters. Users will have to pay great attention to the call-to actions especially when ‘取消’ and ‘确定’ are very close. So in this case, if we follow Gutenberg diagram, then placing ‘确定’ to the right is better.


Many Chinese netizens are Windows system users, the call-to-actions on dialog boxes are always ‘ok’ on the left and ‘cancel’ on the right. The main argument is whether following user experience or user habit is better. The journey of the decision making is like below:


Users read from the left to right and make sure glance through the options and get the meaning, and then go back to the left to click ‘确定’(confirm). If we use Gutenberg diagram, then there will only be two steps to make a decision.


However, Windows users are already accustom to the ‘ok on the left/cancel on the right’ type of arrangement. Therefore, we will need to think about the target audience first when we do the design but at the same time, we will have to take the courage to make some changes to achieve better experience rather than keep following old habits. Again, user experience or user habit – this is an endless battle.

Z pattern layout


The main difference between the Gutenberg diagram and the z-pattern layout is that the z-pattern suggests viewers will pass through the two fallow areas. The z-pattern is applicable to almost any web interface since it addresses the core website requirements such as hierarchy, branding, and calls to action. It is best for minimal websites featured by hero images and simple text storytelling with several key visual elements.


Predicting where the viewer’s eye will go can be a big advantage. Before arranging the visual elements on your webpage, prioritize the most and least important ones. Placing the elements in the pattern’s ‘hot spots’ for the right interactions, you will see your web content become simpler and cleaner and straight to the point while reading it naturally. There are more and more Chinese landing page designs that follow these patterns – z-pattern / zig-zag pattern / golden triangle to tell its story for its effective communication and grand visual (大气的视觉形式) which is typical to Chinese aesthetics from ancient times to the present. However, this would be very boring if we apply this pattern to every piece of the design and content, especially text-heavy content on sub pages. It is very obvious if the users keep reading the whole content like z-pattern, then you will probably fall to sleep ‘zzzzzzzzz’, not to mention reading whole paragraphs in Chinese.

F pattern layout

When generating text heavy content, if we add bigger headlines above the main paragraphs (visual weight), create columns to follow (line tension), and use smaller sections (repetition) we can get viewers closer to the well-known F-Pattern by Jakob Nielson.

Screen Shot 2015-08-24 at 21.54.48


According to the report ‘How People Read on the Web: The Eyetracking Evidence’, Jakob Nielson of the Nielson Norman Group conducted a readability study based on 232 users scanning thousands of webpages and stated the following points:

  • Users will rarely read every word of your text.
  • The first two paragraphs are the most important and should contain your hook.
  • Start paragraphs, subheads, and bullet points with enticing keywords.

It is about visual hierarchy and making the content clearer to the users. This pattern works like this: First start in the upper left corner, like the Z-pattern; and then scan and read the first line of the text; then read down the left side of the column until you find something interesting to you; again read the interesting text more carefully; and finally continue scanning down and repeat the F pattern when scrolling down to another block of text with main headline.


Take one of our designs for example, viewers will first look at the navigation header and click on the info they need and lead to the subpage, on the subpage they will continue to look at the content they need – from main headline to the advert, a focal point, on the right (focal point will lead users so new viewing pattern can be generated by creating focal points you want users to notice), and then read through the content till the end.


Even when it comes to smaller pieces of content, it still follows the same pattern: there are headlines on top, main paragraph in area 3 to 4, and important information at the terminal area 5 : price / website / address / contact. Viewers can easily get the information they want from the start to the end.


These three types of pattern can be applied to different web design / content / form / call-to-action. They all have one thing in common – it is about what information you want the viewer to see and how to enhance the user experience and make the viewing journey more natural and comfortable to the users. When lacking of visual cues, the pattern will become more important for the designer to evaluate the website on user experience perspective. However, we should not be limited to these three types of patterns but to work on the visual hierarchy as we can still use visual design elements as focal points and make the information accessible.

Be the first to post a comment.

Add a comment