The experience of display design and some details

"About the exhibition"
such as offline shopping malls to pay attention to moving lines and display the same, we online on the page also attaches great importance to the display of some details! The custom of design is called User experience design! I am based on the rapid elimination of large sellers of the work of the actual experience to talk about these content, modesty or want to, a discussion! Of course there is a point, no matter how to talk about the user experience of the page, this is only a link to the entire electrical business behavior, so to eliminate the experience of the design of the king of this irresponsible, no overall view of the speech!

I am talking about the "display design" is not based on the concept of professional field, but through the experience of actual combat, may be in the middle of the "user experience design," The main point, ....

Some principles to be grasped in exhibition design are:
1. Make new customers easy to find products, quickly familiar with the product catalog
2. Let the old customers see the new products on the shelves first time
3. The purpose of the exhibition is to make the customer make decision
4. Launch the main product in the right position!
5. Do not easily replace the moving line and layout
6. The number of products displayed by each function module should be reasonable
7. The display of picture specifications to save space and clearly express product features!
8. The influence of skillfully using words and data in display
9. Clear boundaries between each display module
10. Do not misuse the advertising map!
11. Grasp the display of the desire to cause shopping elements
12. The impromptu consumption which can not be neglected in the exhibition
13 ... (to be continued)

———————————————————————————–
1. Make new customers easy to find products, quickly familiar with the product catalog

Regardless of your store popularity is flourishing, new customers are our primary Care group, just enter your website new customers have two ways, one is directly into your product page, the other is to enter your homepage! The former after browsing the product page How to let it continue to browse other products or into the home page, is the navigation and correlation module design goals! This is not in the scope of the display! So the latter is the focus of discussion!

After entering the home page, how to let new customers easily find products?
A. Search box and store product keywords

B. Clear graphical product category navigation

C. Home Trilogy: New, Main push, hot section

Note: I am here according to the rapid elimination of goods (clothing, clothing, footwear package) actual combat concluded that some categories may not apply.
The above a/b/c three kinds of options can be selected; A search box for that kind of online shopping experience, or senior network groups, they do not need to show directly, prefer to search their own, and the keyword links shorten the jump process.

B Graphical Product category navigation on the front page of the suspension side, or vice navigation below can let new customers very concise understanding of the contents of the store products!

C First Trilogy covers the main store in the mainstream consumer products! So the number of each area display should be reasonable arrangement, not let new customers lost in a large area of products, forget the Product catalog!
There are two kinds of sounds inside this:
· One is from the business point of view, I hope that new customers come in after the store all the products are read!
· Another is from the customer point of view, to help customers find the products she wants to know as soon as possible!
According to the different products, choose a different strategy! If the product is not very different, you need to guide them as much as possible to browse products! If the product difference is large, should focus on the column guide, small area coverage!
——-Here Taobao Shop page is temporarily not lifted, first put a Beijing-east page analysis-

2. Let the old customers see the new products on the shelves first time
The old customer into the shop has two requirements:
A. Caring about recent new products

B. Care for shop activities or promotions

Excluding the old customers directly purchase the Desire product this group (of course, if you want to do fine words can also be considered)
In view of these two needs, develops the display area;
A new area, this area must be dynamic, for the product update frequency is relatively good for the class to do, there is a number of how much, home space is limited, you can not peremptorily all new products to the heap, the most important thing is to push the main new products forward, Here to pay attention to the skill is a need to pay attention to the size of the thumbnail to be reasonable, Taobao on my basic choice of 220px * 220px, two rows of 8! Title banner height should not be too high control within 30px! To be clear about this area, in order to stimulate the number of clicks on the new product, in banner place can set some to help to remind of the factors such as: "You also have" 12 "new product not see" This is from SNS website transplant come over, I found in later data statistics of this reminder to increase the new rate is very effective!

b Shop activities or promotions. This content also has a lot of ways in the display! such as: Activity Banner Guide to the new label page, direct home full screen display activity content, home selected several as a guide.
First, the activity banner Guide to the New tab page;

This is very common, banner design I have always advocated "pager is more" This view (Chinese explanation is the Avenue to Jane), with less color, less elements, the theme of the event to highlight! A lot of immature art, just show off the design, like to do a lot of special effects on the banner, add a lot of elements that don't have much to do with the theme, this just will distract the user, can not reach the profound effect!

Good banner need to let people a bit into the impulse, master two words "concise" "exaggerated"! This is the way to be remembered! Here are two tips for people to remember to share:
One is repetition, the other is exaggeration!

Repeat in the design is unified, color to unify, not often change color, you now see "green + orange" to know is when, see "Light green" to know is watercress, see "Orange" is the same as Taobao!

Second is exaggeration, exaggerated things are always remembered and curious! In the summer you walk on the road, suddenly a man wearing a down jacket appears in front of you, you will be attracted by it! This is believed that many people have seen some stunning design pictures on Taobao, such as Mr Ing's breathable picture, which is an exaggerated expression, but remembered!

Mastering the principle of exaggeration, you can grasp the direction of thinking when you make creative pictures!

Second, the first home directly show the way the exhibition activities!

Each class purpose different product consumers have different consumption habits! Is the activity content directly on the home page or on a new tab? I think we should consider the purpose of the activity! In the peak season, many sellers even do not do activities have been saturated load state, do some activities at this time if the product content directly on the home page is likely to weaken the original home pages to product flow (traffic is too focused on promotional products), if the activity is not profit-oriented, then instead of reducing sales, And will add a lot of manpower (planning Ah, delivery ah, etc.)!
Seller promotion is nothing more than pulling traffic, running sales, dumping inventory, play promotion!
Pull the flow of a good explanation, outside a hard wide out, in the rolling flow if not planning, rampage disrupted the original sales rhythm will outweigh the gains, at this time I suggest direct access to product pages more appropriate, one will not drag down the home page function, but can directly bring the conversion rate!
Run sales of that batch, most of the profit is lower, in order to speed up turnover, this activity sales department looks very happy, sales are also crazy growth, but in fact, the cost behind is still very large, bad, the number of team is not enough, we all stop to pack and ship! The result is a lot of bad user experience! Personally feel, this low profit run sales of things should not be made, occasionally out to stimulate, the market weak time put a little out, the market when the good time to the high margin of the product! So in the display, such as the home is not the main location to open up such an area, can accommodate 1~4 section, occasionally come out seconds to kill, occasionally out discount, sometimes seduce the old customers that itch heart can!
Dump inventory, dump inventory as a long-term work, from the beginning you have to plan a good dumping cycle, of course, you have to observe a few sales cycle to grasp the law of the dumping time, early, and not lack of electricity which is dead goods, dumped late, pressed a stock! In the exhibition planning can be a separate page, display the time to have a unified identification symbols, such as the title and "promote" or the words, thumbnails to play a marked mark, let people know is to dump the goods! The original and current prices must be marked clearly. Over time, customers naturally know where to look at your dumping, gradually form a habit after the flow will naturally stabilize!

Finally, I would like to talk about home selected several as a guide to the activities!

This kind of activity general subjectivity is relatively strong, and the representative product that is elected also has certain cost-performance advantage, in order to attract customers to display products, the method has a direct display of product thumbnails (Taobao directly show the first picture), the other is to make their own advertising map, a row of two to three such, must seize the continuity, coordination between each other, The introduction of a new Page button also to set the clever! Usually will use "more xx point this enter" "Click here" "" and so on! This type of display is the most important thing is the choice of products, must have cost-effective, such as the original price of selling 290 of the current selling 120, so you have to have sufficient space to show the difference of preferences, so that customers can see at a glance, the price of this figure to clear introduction! Here, many of the primary design will be a variety of fonts are put on the advertising map, strictly speaking, like the price of this serious and accurate information is not to beautify him, with the general Helvetica or Microsoft ya Black font can!

————— Let's have a look at the Korean clothes House on the 5 anniversary of the home exhibition ————————

3. The purpose of the exhibition is to make the customer make decision

This principle may be literally difficult to understand, the following I use two kinds of display way to explain!

Figure:

On the left this can be called "the same space adjacent display", the right this is called "the same space along the time display" Why do you want to introduce these two modes of display?
It is these two ways of display determines the browsing habits of customers! We take the iphone as an example, their icon is in the left side of the "adjacent display" mode, we found that the use of the basic decision to enter which program! Because this kind of display should display the information, you need to decide which one I want to use!
Also on our website, in Taobao shop if you want customers to make a quick judgment on the product and enter the browsing stage, adjacent display is undoubtedly the best way! Once Taobao on a lot of shops like on the first page opened a screen on a huge advertising map, although the effect of advertising pictures Many people do very well, the design is great! But I do not agree with this practice, of course, I am in the exclusive promotion of the type of shop not business! We should clearly give ourselves positioning, we are selling things, not show design! So instead of banner ads better design a display module, select a few, and will be the necessary information to display (price, or original prices, collection, purchase number, pictures, etc.), so that customers quickly make decisions into which product page!
One thing I do not know, in the traditional offline shopping malls and stores, to enter the store is a buffer belt, the purpose is to allow customers to enter the shop faster structure, not to the dazzling array of products dizzy! I do not know whether the characteristics of the line is obvious, but I said before, in the head of the home must have a suitable product graphical directory navigation, this also played a certain buffer effect! Do not appear a come in to see is the second kill, Poly cost-effective, all sorts of discount information, so that customers thoroughly to this shop no overall sense!
So to sum up, do not superstitious advertising graphics and large space design (that propaganda is OK, sell goods not)! Very simple logic, you take a flower to tell your girlfriend this flower is very beautiful and fragrant, and you take two different flowers ask her to choose that one, the latter easier to let her accept!
So what are the benefits of this same space on the right side of the time display?
Obviously, we have this kind of display in the Product Details page, because this kind of display is not necessary for you to make decisions immediately, more time you are in the absorption of information, so at this time your pictures and information can be independent, each space to show the products or pictures, or the information should be rich and single-minded! I have done some small experiments, if the product Details page inside, you each picture of the height of just occupy a 1440*900 screen part, if the picture more accurate expression of product characteristics, the more easy to impress customers!
So these two kinds of display in different occasions must be reasonable choice!

4. Launch the main product in the right position

Are more common sense principles, this principle may be the most difficult to do is the right place! The main product you know best, but choose the most suitable location but need to adjust and test! Some shops because customers develop browsing habits, they are accustomed to the beginning of the home page to see the main store products! And some shops will be in each product Details page first put the main product!
Display main products to pay attention to several points:
1. To focus on the presentation of 2. Try to put the new customers in the channel mouth (this is not limited to the home page, some do a hard wide product pages are also access to the channel) 3. The main product packaging should be significantly 4. Main product data to show (collection Ah, purchase amount Ah, etc.)
"Take a look at an example."

5. Do not easily replace the moving line and layout

Moving line One said I was in micro-Bo saw a netizen said, this is the line of the shopping malls, and is not a new word! This is also the problem with page layouts on the web! Play the same, once the establishment of moving lines do not easily change!
For example, there is a shop home moving line is such (navigation-deputy navigation-active advertising map-the new area-Main section-Product main category-classification display-ditto) once this moving line is determined not easy to change, because it is likely to affect the old customers browsing habits! Of course, if there is a better layout of the time must be good planning, and then slowly change, so that customers slowly adapt! Understanding is a sentence: Fully respect the user experience!

6. Each function module displays the quantity to be reasonable

What's the function module? If you are in the home horizontal 8 products of a new display area, this is a functional module, or you show on the side of the "Browse the highest number of 10 products" or "Browse the section of the people also visited" and so these are functional modules! The number of modules is a need for reasonable control, not the more the better, the customer has a browsing time, the basic nature of browsing is sweeping, if the careful look may also have to look tired of the time!
So reasonable to put a certain number of products, such as the home page of this structure is very strong as far as possible to streamline the number of sections! and the category page of this display page will be put more!

7. The display of picture specifications to save space and clearly express product features!

The most important thing is to express product features! Want thumbnail (main picture) This kind of picture because will be shrunk, so try to let the product occupy the space of picture 80%! Display the angle and performance characteristics must be clear and accurate! This according to different products to different adjustments, each product has its selling point, try to this selling point in this small square picture accurate expression out! This is the King! Few customers are willing to look at the flashy things, they finally want to understand the product, you surround the theme is also!

8. The influence of skillfully using words and data in display

I believe that the VANCL on the page of the red circle price impression is very deep, we enter VANCL's page feel the deepest is his ubiquitous price figures, in addition to the normal price tag, eye-catching price figures will constitute a certain shopping atmosphere for customers! In the text link such as "You also have x no view" collection number XXX person! These details on the text and figures are subtly affecting the consumer decision-making, so in the display to use these words and figures skillfully!

9. Clear boundaries between each display module

Each module has its own special features, just like each shelf on the display of different products, customers do not know you should be the clearest, so to effectively distinguish these shelves, so that customers from this module to browse to the next module when there is a concept! Not a lap to look down don't know what to see!
How to make a boundary, usually with a banner bar! or use different color blocks to distinguish, or use a graphical display area to distinguish! Different ways can be text, graphics, structure and so on!

10. Do not misuse the advertising map!

This in the display structure said a little, advertising map many times he played a propaganda role, never think the advertising map can bring you how much traffic, the key is the advertising map where? If the advertising map is hanging on Taobao home do hard wide,
Then superstition is still rewarding! If people have come to your shop, you are still playing a large advertising, you can not do! Slightly put a few small publicity pictures can be, there is no need to occupy a large area of space to show one or two products, this is the cart before the horse!

11. Grasp the display of the desire to cause shopping elements

There are many kinds of this element, such as the distinctive price tag, collection quantity, browse quantity, purchase quantity, etc. these elements appear to be very small, but also played a good role, because of the existence of herd mentality, if customers see a certain product below show a large number of browsing volume and collection will be curious what products are so popular!
Usually the text of the boot button can be a bit lively, to where all is "click into" may be a little boring!

12. The impromptu consumption which can not be neglected in the exhibition

Impromptu consumption is in the customer's normal purchase process is not planned products! Relevance marketing is a gimmick, to the implementation level is the design of the display, the relevance of the module where to put the relevant issues are to be considered! Now many sellers are accustomed to putting the associated module in front of the Product Details page, I think this is a great disrespect for the customer's approach, I was good to see a product, the result you give me a large pile of recommended products put in front, the results pulled a half-day to see the products I want to see! This is the cart before the horse, a reasonable correlation module to put in the customer's remaining time, such as after browsing, such as switching to another page, and so on! Instead of blocking the customer's normal browsing process, break the ads!

Source: http://bbs.paidai.com/topic/54062