help you get promoted, help you win! An ultra-comprehensive guide to the design of Electronic Business website navigation

The first screen (above the fold) refers to a screen that is visible to users without scrolling through the Web page screen.

World famous Web usability expert Nielsen has reported that the first screen above the attention level of 80.3%, the first screen below the attention of only 19.7%. These two figures are enough to show that the first screen is important for every site that needs to be converted, especially the website of the electric dealer.

In E-commerce sites, the most urgent need for users to get more than two points: attractive goods or shops, and the site can give him trust. The trust needs to accumulate, therefore, each kind of propaganda promotion information becomes the electricity Shang display the choice.

A stop-and-go screen will bring more customers and benefits to the site, now let us tell you how to plan to design a good use of the electric Shang.

First, determine the visual range

According to statistical reports, the most used Internet user screen resolution for 2014 is 1366px*768px. Take this as an example, the browser border width is generally around 21, so the first screen width of the Web page can be determined as 1345 without interference, while the total screen height is 768, excluding taskbar height 40, Shop page header 106, browser (toolbar, border, etc.) 160 and Position toolbar 30, Preliminary estimation of the first screen height control in 432 is more appropriate. As a result, we can conclude that the first screen design with the most current trend is 1345*432, and the important content can be put in this range as far as possible.

Second, the display of information to attract users

The first screen location of the first page in the entire site is called a land-inch gold, because of this, the text shown here should be short and short, as much as possible with a minimum of space to express the information clearly. The title of the text should be more commercial business demands clear and direct expression, in the planning of such words should pay attention to conform to the overall style of the site.

The banner copy of a shop can catch the eye of the viewer very well, the interesting title text plus "0 yuan collar" such eye-catching words, let the user full of curiosity.

Gap's first screen although not the second half of the ads are fully displayed, but this does not seem to affect the user want to continue to click the mood, the real attraction of the user's information points are neatly displayed in the first screen, for users to understand one by one.

Third, the visual focus should be conspicuous

Most of the user's browsing habits are a cursory, to now the general layout of the domestic electrical business site, the user in the first screen of the visual focus of banner and navigation is primarily. Therefore, both the text and the big picture, should let the user see the content at one glance, reduce their thinking time. Designers can use the "Go Color" method to test the actual effect.

Go to color before:

After the color:

Ishun first screen is a negative example. The first screen will be too complicated, so the visual focus will naturally disperse.

Through the color contrast before and after we can find that the color, the navigation on the text content will become less clear, so we can conclude that color is the key to lock the user's visual focus.

Go to color before:

After the color:

Only product head screen color after the effect is very different. After the color, the contents of the banner can still be easily identified, the text and background are very clear.

In the study of the students feel excellent set the first screen of the network?

Four, the picture makes the content more advantageous to understand

To allow users in just a few seconds to understand the Web site or business published a series of information, simple text is not enough, but also need to borrow the help of the picture. The use of the picture can be implied from the side of the theme, therefore, in the selection of the picture material should ensure that the theme of the expression is helpful, and to maintain a consistent style of vision.

Where the first screen of customers to go is a minimalist route, there is no modification, so that users can focus on the commodity itself. The map does not show the full picture of the product, but in a minimalist style, it can also enhance the user's desire to click.

Emphasize theme with style

The first screen style is based on the purpose of the decision, before the design, you must understand what the first screen in the entire site will play a role. Generally speaking, the first screen of E-commerce website will be used to promote publicity, such as single product promotion, shop promotion and promotional activities.

Items

To promote a single product as the theme of the first screen will generally use selling points to compose a copy, and then with a simple picture.

Shop:

Shop promotion does not need to use a lot of space to specify, as long as some users care about the key points can be displayed, such as preferential information, activities, such as the scope of the form.

Activities:

A campaign is difficult to use simple copy in the first screen described clearly, so try to use the impact of words to attract users to click on the Details page.

Vi. locking the user's visual focus

When the user is not too familiar with the site, access to the home page is bound to confused, at this time, giving users visual guidance becomes particularly important. There are a variety of ways to guide, such as eye-catching characters or pictures, attractive headlines, or a well-organized overall layout. The so-called guidance, not just for customers to buy goods, but also means that users click into other pages, resulting in more consumption.

Very few electric Dealer website's first screen like the good music buys as clean neat, the classification is clear, the clear layout lets the user be able to find his demand at a glance.

Seven, the animation attracts the user view

On the basis of the user experience of the site, the first screen can be appropriate to add some mouse interaction effect, or flash animation effect will make the page look more lively and interesting, this approach can also increase a number of clicks, and attract users ' attention. But these effects can only be used as embellishment, the use of large areas will backfire.

Taobao in the upper right corner has a small mouse interaction effect, click into an Activity zone, page effect in psychology is considered more likely to trigger users want to click the impulse.

Eight, conforms to the visual custom the picture and text mixed row

A large piece of single text or pictures will make the user feel tired, and graphics and text mixed row is very good to make up for this. There are many ways to mix lines, such as color contrast, text or image amplification and so on, in the layout as far as possible to do patchwork, so that the user's vision of a smooth transfer. Whichever form you use, you must ensure that the main content is readable.

Graphics and text mixed with the skill stamp: "Recommended!" 10 tips for graphic design of the first screen of Web page

The first screen of a Amoy network is not in line with most people's use habits. When the user enters an electric business website, first of all must be attracted by the picture, very few people will be willing to read the big paragraph word verbatim, so the detailed description is not suitable to put in the first screen position.

Poly United States Excellent products first screen graphics and text collocation appropriate, simple big picture and some short sentences, the two complement each other, the picture user-friendly, the text is very concise, the focus is clear.

Summarize:

We believe that the first screen is the most important channel to attract users, many sites because of the neglect of the first screen, resulting in a number of user experience problems. Compared to the ordinary website of the official website in the nature of more special, the first screen should take the merchant's purpose to meet the user's routine use habits, rather than aimlessly turn the first screen into a bulletin board.

Designers in the design of a project, may wish to think more from the user's point of view, there may be unexpected harvest.