Website Design Analysis: The first screen of the page standard how much do you know?

　　What is the first screen

The first screen of English is above the fold,fold has folding meaning, above the fold is to be seen after folding, why the first screen of English translation will be related to folding, the reason is very simple, because this concept was first used in the field of publishing, can be simply understood as "front page" Because the process of newspaper transportation and distribution is folded up, it is particularly important that the newspaper is folded up in front of the reader, and the reader will decide whether to buy it according to the contents of the front page.

So the content on the front page means one, the editors think they are the most important, the front page content also determines the position and positioning of the publication. So "above the fold" is also used to represent all the highest priority display or priority content.

The concept of "above the Fold (front page)" Extends to the Internet field. Used to refer to information that is not visible on a Web page without scrolling through the screen. Unlike the "front page" of the publishing industry, the first screen area of the Internet is dynamic, and because of the complex screen resolution environment of the Internet users, they see a big gap in the first screen content. Many shops are designed because of the neglect of the first screen leading to a very serious experience problem.

　　The first screen of the day cat Taobao

So what is the first screen that our shop buyers see? First look at the following day cat and Taobao buyers of the screen resolution ratio: The following figure is the most recent Taobao user screen resolution ratio of the distribution map.

Where the screen height within 768 users have 41.57%,18.78% (1024x768) +2.91% (1280X768) +19.88% (1366x768) 41.57%, which is why you must pay attention to the first screen. When our designers use a large screen 20 inches or more, 41% of the users are still using the 768 display.

　　Typical problems

Examples of the following cases are the 768 pixels with the highest resolution of the user's browser

　　Shop Category Results List differences

Click on the left side of the shop, the first screen content does not change, the day cat and Taobao shops generally exist this problem, the following figure:

This problem causes users to mistakenly think their own clicks do not produce the expected page jump, they still stay in the original page. After many attempts have no effect, the final jump is very normal.

　　Link to target page differences

This is a brand of a historical version of the homepage, in the 768 height of the screen screenshot. Let's see what the difference is between the two pages.

Figure I

Figure II

Did you find the answer?

The correct answer is:

Figure I: Is T400 's new version of the home page.

Figure II: Click on the new version of the home page of the United States (2012 Dream Crystal City Activities banner) into the activity pages.

Of course, the designer of the design of this is two different pages, only the header of the hundreds of pixel is the same, the key is that users do not have to scroll the screen, do not see the following changes will be mistaken for their own click invalid, repeated attempts after a few times, the final jump lost. At the same time achieved the banner of the click Rate.

　　First screen Integrity

Store information appears incomplete on the user's display device. This question usually appears in the shop homepage The marketing information, the promotion banner, looks the following several cases:

　　First-screen floating layer cover

Screen width 1024 of users seem to have been under 20%, if you think you can ignore this part of the user, you can not care about the following content. The Day Cat Shop related page's default width is 990, but the shop decorates the system to open the style custom function, therefore many users, began to use in the shop page design, "Hangs the ear" the way (the following picture)

1024 screen width, to remove the width of the browser border, visible area 1003,1003-990=13 means that the shop page on both sides have 6 pixel available width.

Results "Hanging ear" became a "paste plaster", affecting the user browsing the main content of the shop.

Will the user scroll the screen?

Some designers may think that the first screen is not that important, the user is going to scroll the screen and finally see what we expect them to see. If you have such an optimistic idea, I suggest you take a look at this Nielsen report: (Jakob Nielsen), a famous web usability expert, Bu Nielsen. Known as the originator of usability testing. Jakob Nielson, one of the main principals of the Nielsen-Norman Group, was hailed as "the world's top expert on Web Usability" by the American News and World Report magazine. His Alertbox column has been posted on the Internet since 1995 (the website address is: www.uselt.com). Dr. Nielsen was a brilliant engineer at Sun. ) http://www.useit.com/alertbox/scrolling-attention.html

above the fold:80.3%

below the fold:19.7%

The report concludes that even if users are scrolling the screen, the user's attention division is still quite uneven:

First screen above: 80.3%

First screen below: 19.7%

The most reasonable first screen design draft range value

Width:

Width without interference factor effect is therefore determined 1003

Height: (here refers to the shop design draft height)

Screen Total height 768

Task bar height 40px (win7=40px winxp=30px)

-Mall head + ceiling =106px

-Browser =160px (IE8 contains toolbars; status bar; Border ...) Wait

-Location toolbar =30px (such as Search Toolbar, Baidu toolbar, 360 toolbars and so on user browser installed on a variety of plug-ins will affect the height of the first screen)

768-40-106-160-30=432

Therefore, the final effective design range is obtained.

1003x432

See the first screen effect of your cat shop

You can test your own shop design according to this tool is not in the most reasonable range

(Author: Day Cat Shop experience design, unpaid, official blog: http://sed.tmall.com/)