✨
Abstract
While others were at work, the designer was revising…
While everyone else is off work, the designer is still revising…
Designers still change drafts while other people are on dates…
Whether it’s on the job or working overtime, designers are always revising! Especially when the demand side says, why don’t we use the first edition in a different color?
Day! It’s really breaking down! Want to shit heart all have…
I wanted to do the same, but I had to!
I’m going to share with you how I discovered the use of the “cross method” to comb through the information hierarchy on a page after experiencing unclear requirements and repeated design changes.
It consists of five parts. The following is the first part.
✨
Part one: Repeated revisions! Whose responsibility?
1. The product manager always tells me to change by the seat of my pants! To change! To change!
The following is a project I did before — revision of product details page of e-commerce platform, as shown in the picture below
This was one of the first versions I made. Every time I went through the design, the product manager always asked me to make changes here and there. One message would be bolded, one would be highlighted, one would be weakened. At the beginning, I felt that I was not able to meet the requirements of the other party, so I patiently changed, but in my heart, IT was ten thousand grass mud…
The most important thing is that the product manager himself can not tell the reason, just let me change by feeling! To change! To change!
And I consider myself to be a good temper designer, but always such repeated adjustment, really some impatient.
2. The Designer’s counterattack – Discover the new world side by side
Later in order to prove how hard AND tired I am, I put together several versions of the design draft. I wanted to show it to the product manager, but when I put it side by side, the problem became more serious.
I find that each version change is basically an adjustment of the strength of the message. The product manager himself has a very vague concept of information priority, so he constantly asks me to adjust, trying to make up for the lack of demand through design, which I feel like I have discovered a new continent. It’s not just design, it’s unclear requirements! And product managers want to solve the problem of unclear information hierarchy in requirements by means of design!
This is obviously inverted, because design is built on the premise of clear requirements, if the requirements are uncertain, then no design is right. It’s like a riddle, but there’s at least one answer to a riddle, and in this case there’s no answer, because the person who wrote the riddle doesn’t know.
At the beginning, I did not realize this problem and failed to help the product manager to control the level of information, which was also my own lack of ability. Therefore, I revised the design draft after draft. As a designer, I should also take certain responsibility.
✨
Part two: the origin of “cross law”
1. Review the four-quadrant principle
Once you realize the problem, you want to make the information hierarchy clear and then design it. But how do you know for sure? Not by instinct, because it’s too unreliable, and what this situation calls for is rational analysis.
During that time, I happened to hear a share, in which it was mentioned that Eisenhower, the 34th President of the United States, would classify the things to be done every day according to the four quadrants of important and urgent, important and not urgent, urgent and not important, and then the work efficiency of the day would be improved a lot.
I was so impressed by this that it would come back to me from time to time. Then ask yourself, if jobs can be classified this way, can the vast amount of information in the product details page also be classified in these four dimensions?
I tried it right away, only to find that the semantics didn’t make sense.
Because in our design, there is only important or not important information, and there is no urgent or not urgent information. If there is only important weight, it cannot constitute four quadrants, and one more weight must be added.
2. Extracting “Cross method” from four quadrants
Which one do you want to add? The boss asked for it? Customer needs? Or is it something else? It doesn’t even feel right! And then the brain circuits. Try to imagine what the demander values, recall the working scene, especially the situation of passing the design draft with the demander, and find that we often hear:
“This information is not very important, but to show”
“Or” This is not necessarily information about the product itself, but it’s important to reinforce.”
“Or” This is just so-so, whether you show it or not, you can see for yourself while you design…”
Sorting out the above statements, is in addition to important is not important, there is a show, whether to show.
Thinking of this, I changed the “urgent” in important urgent to “must”, that is, important and necessary to show the content, and so on respectively: important and necessary/important and not necessary/must not be important/not important and not necessary. Also draw a cross, as shown below
Let’s call it the “method of the cross,” and the important and necessary quadrant is naturally the highest priority. The other three quadrants are priority 2 / Priority 3 / Priority 4.
Once this was sketched out, the product manager was pulled together to comb through the product detail page information along the four quadrants.
✨
Part three: Constructing information hierarchy with cross method
1. List all the information to be displayed on the first screen of the product details page
First of all, we listed all the information on the product details page, including product pictures, product SKU and store information of the product. There are more than 30 large and small ones in total, excluding auxiliary content, as shown below
2. Fill in the corresponding quadrants with the information according to the “cross method”
After listing, classify all the above information according to the four quadrants according to the cross method mentioned above, and fill them into the corresponding quadrants according to the different priorities. The important and necessary contents, such as product picture, name and price, are shown in the following figure
(Note: this process will be somewhat difficult, and there may be repeated situations. When we were doing it, we discussed for a long time about logistics, namely shipping information, because logistics is very important, but our platform has no advantage in logistics, so we finally decided to put it in the third quadrant, as long as users can find it when they need it.)
3. Comb the information in the quadrant again
After the above two steps, we have a lot of information in some quadrants, especially in the third quadrant. Then the information in each quadrant was combed twice, as shown in the figure below
As shown in the figure above, information in each quadrant is divided into several echelons. Due to the relationship of priority, each echelon in each quadrant will be treated differently in design. See the fourth part for details.
✨
Part FOUR: Visual design according to information hierarchy
1. Quadrant 1
(Note: the gray circles marked 1.1 and 1.2 in the pictures used below represent the information of echelon 1 in this quadrant, while the gray circles marked 2.1 and 2.1 represent the information of Echelon 2 in this quadrant)
First of all, the information of echelon 1 and Echelon 2 in the first quadrant marked with arrows not only occupies the golden position in the page, but also strengthens the design. Here is a brief description of some of the information, as follows:
1.1 Product picture: the large picture of the product in the product picture, which needs no more modification. The picture itself and its position can show its importance.
1.2 Product price: the product price is handled in a way that not only the font size is larger than other contents, but also the bright warm color;
1.3 Button: Buy Now and Add to Cart belong to the first tier of information, which are obviously different from other elements in size and color, and the button itself has prominent attributes.
2.1 Product name: The product name belongs to the general information in all the contents of the product, and is the second tier of priority. Due to the particularity of its location, it does not need to be strengthened in the design, so it uses the most common black and gray color, and the price on the font is smaller than that of the product. Because the region itself is pretty obvious.
2. Second quadrant
The second quadrant doesn’t have a lot of information, so it’s relatively easy to handle in terms of design. As follows:
1. Product evaluation and volume: although these two information are not necessary for products, they play a very important role in users’ purchasing decisions. Therefore, the design adopts the same processing technique as the information in the second echelon in the first image. The font size and color of the key information are consistent with the product name. In addition, the minimum font size 12px is adopted for the auxiliary information.
3. Third quadrant
There is a lot of content in the third quadrant, so it is divided into 4 echelons. The visual performance of each echelon is also somewhat different, as follows:
1.1 Product SKU Area: Except button, this piece of information belongs to the first echelon of information, such as shipping/size/quantity/Add to Wish list, etc., all belong to the contents that users need to operate before purchase, so a gray background is used to integrate these parts of operation contents together. In addition, as the content of pictures is inherently attractive, the information with icon such as Add to Wish list should be weakened, while the information without icon such as Total Price should be strengthened. Mainly to adjust the size of the font to achieve a relatively balanced effect;
2.1 Store name: The information of echelon 2 is mainly related to the store, which is much easier to deal with. Since the store name should be clearly clickable, but not too strong, dark blue link color is used.
2.2 Store star diamond/evaluation: The store star diamond evaluation and other related information are in the most common black and gray, but we hope to keep the same level with the store name, so we have enlarged and bolded the font size to achieve the effect that is not weaker than or even stronger than the store name.
2.3 visit store: enter the store is an action point, weaker than buying operation on the hierarchy, but stronger than the page to see more action, so made on the design and processing, retain the form of a button, but USES the gray design, make it as a whole is not strong but not too weak, and the store name and so on to achieve a state of flat;
3. Retum policy: It is easier to process the information of echelon 3, including bread crumbs and detailed Seller ratings related to the store, with the simplest processing method. The color is black and gray and the font size is 12px.
4 chat now: The contact information belongs to echelon 3 when it is online, and echelon 4 when it is offline. There are no too many changes in the design, and it is directly displayed in gray scale.
4. Quadrant 4
If the previous information can be processed, then the lowest priority information is basically fine. For information in the fourth quadrant, use a #999 grayscale and 12px font size, along with supporting content, for a cleaner look. As follows:
1.1 Bulk Price: The wholesale price information is directly processed in gray scale without too many changes;
1.2 Store address: there is a string of store address after the name of the store, which is not necessary and important information. It is purely for demand, so the gray processing method is weakened in the design.
✨
Part V: Visual review
Through the sorting of information hierarchy, the whole design process is very smooth. Before you do it, you can basically predict what information should be handled, and then you have to fine-tune the details. Here is the final draft confirmed with the product manager.
Although there is little difference between the final draft and the original version on the whole, there are many differences in details, including differences in icon, font size, color and other aspects. And has actually changed from the essence, the original version is in the grope to do, mainly by feeling, there is no certain rules and logic, relatively lack of confidence, and the final draft is based on, every detail point can withstand scrutiny.
There are some differences between the two versions. I have briefly marked a few for you to compare:
(Note: In the picture below, circles 1-7 in the original version correspond to the final version one by one. You can compare the effect.)
1 Mouse over to zoom in: Information about this, think users will go to see the product details at first, with a relatively deep color, so after comb information, found that it is not that important, general benefit slide down more if you want to see the product details, see more pictures, so in the fourth quadrant, when the final version of unity has been adopted grayscale processing;
2 Bulk Price: The arrowheads used at the beginning had a small box outside, and more arrowheads were not the same as this style. Generally speaking, it was a little complicated, so in the final version, all the arrowheads were unified, but the color and direction of the arrowheads were processed differently due to different functions and levels.
3. Shipping: In the initial design, the logistics-related information was not put together with the SKU of the product. Later, when sorting out the information hierarchy, I found that it was all items that users needed to operate when buying the product, so the operation content was put together in the final design.
4. Add to Wish List: As for favorites, it seems to be an important function, so both icon and copy are in darker color. Although it is not obvious at the level, it will affect the display of the information level of the whole page.
5 security information: this information is also with the feeling of personal shopping to do, think it’s more important, so when the design at first, by to show a larger piece of surface, in fact this information is really important, but it is not the advantage of our platform, and the security information also do little, so in the final version is also did weaken the processing;
Shop name: about this information, the original design just use ordinary black and grey, but from the seller level, starting from the demand, is the hope can give the seller the details page of the product store bring some traffic, but also cannot too obvious, or in the product details information display is given priority to, so in the final version of the design strengthened slightly, USES deep blue links color;
While it’s not orange, it’s still a darker color when you’re offline. In this state, we do not encourage users to click to contact the seller. Because of the time difference, the seller cannot reply in real time, which will affect the buyer’s experience. Therefore, gray processing is adopted in the final design to weaken this information.
In addition to these, there are some white space, spacing and other details have done different processing, here is not to say clearly.
After looking at the differences between the final version and the original design, let’s talk about an episode during the visual review.
That is, in the visual evaluation, some students asked, “The auxiliary information of logistics seems to be more important, so it seems a little weak to use this gray.”
I want you to pay attention to this question. I talked about the importance of information. It has to do with requirements. The latter is the design. Generally speaking, it feels a little weak to use gray. It seems to be the reason for this color and the problem of design.
Of course not! Logistics is important, but the reason why it should be weakened is also mentioned above. The development stage of the platform is different. If logistics develops in the future, of course, logistics information can be further strengthened.
So AT that time, I did not discuss the issue of what color should be used for the auxiliary information of logistics. Instead, I first explained that there was a lot of important information in the product details page, and the content of different importance levels would be dealt with in different ways. The auxiliary information of logistics is a category with the lowest priority, which is reflected in the design with gray. In addition, you just mentioned that this information is weak, but information such as the wholesale price and RMB price of the product is not weak, which means that it may not be the color problem, but we put it at the lowest level when making the information level.
After that, the student who asked the question immediately understood the reason of such design, and turned to discuss with the product manager which level of logistics information belongs to. Of course, the last is still the lowest level. But at least this avoids unnecessary discussion of design, which sometimes appears to be a design issue but is really a requirement issue.
At the end of the review, except for some visual adjustments, the whole process was very smooth, most of which benefited from the “cross method” to comb through the information hierarchy.
The above is the whole process of the information is not clear when doing the details page revision, of course, there are some other problems, here is not a detailed description.
Later, when I started a new job, one of my colleagues told me that there was too much information on the page and I didn’t know how to design it to look better. In my mind, this is another typical problem that the information hierarchy has not been sorted out, but the hope is to solve it through design means. So I told him about the cross method, sorted all the information according to the four quadrants, and combed through with him, and found that there was no need to show so much information on the page. Nearly half of the content was removed, and the design was not only clear, but also easier.
So that’s the hierarchy of information in design using the cross method. When you’re stuck in a design, tweaking it repeatedly, or disagreeing with your product manager, think about whether you have a problem with unclear information. If so, you can use the above methods to help you build your information hierarchy.
Sing Sing by Zhang Linlin
Image ✎ pexels.com
/ The author is brief /
Lin-lin zhang
Currently, I am a senior interaction designer of netease. I once worked in Alibaba and Lvmama travel. As a visual interaction professional, I have certain experience and research in both visual and interaction.
Please do not transfer to other public numbers without permission
Please leave a message for the public to be granted permission
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
