Mapping tools: Figma, XMind
In the process of experiencing the APP after owning a car, we found that there are a large number of various types of list pages in the app, such as information list, post list, word-of-mouth list, comment list and so on. And these list pages all give us the same feeling: messy, dense and full of words. When we showed these interfaces to other colleagues, the feedback we got was: it looked messy and I didn't know where to look.
Translating this sentence into the design language, we can find that the biggest problem of these interfaces is the confusion of information levels and the failure to form a good visual flow.
However, the impact of such an interface on users is that it is impossible to locate the first visual focus of the interface, the browsing process is laborious, and the access to key information and content is inefficient and difficult to understand.
Let's think further, which existing design details have caused such problems, thus resulting in corresponding experience problems. At the same time, the corresponding optimization scheme is found.
The above is mainly from the perspective of visual expression, to think about the details of the interface and the corresponding optimization scheme. For example, visual elements are organized by their size, color, location and distance, so as to provide users with a clear visual information structure.
But before that, more importantly, we need to summarize and sort out the information in the interface and make clear the information level. Otherwise, it may lead to inaccurate information transmission. Let's take the information list as an example to sort out the information hierarchy of the page and output the optimization scheme.
The core behavior of users in the information list page is "browsing", and the next step will be generated after finding the content of interest (entering the details page to view the article or jumping to the relevant information column). Our experience goal is to help users quickly acquire and understand useful and interesting information.
The information in the page is relatively simple, so we analyze it one by one from the two dimensions of "necessity" and "importance". We need to think about the purpose of each piece of information, what role it plays, whether it can be removed, what impact it will have, how big the impact will be, and so on, so as to measure and judge.
Based on all the above analysis, we can draw the following optimization ideas.
On the renderings, I combined the fire of hot reviews with the background. The upper left corner of the background box is not only the shape of fire, but also points to the number of comments, which strengthens its logical connection with the number of comments. However, because the color is gray and the element size is too small, the overall effect is not very good and needs to be adjusted and optimized.
The following renderings are not the final design and are for reference only.
This kind of attempt to optimize the page information level still follows the previous thinking, first understand the current situation, find the problems, and then find the corresponding optimization scheme. In a specific page, it is to define the page positioning and design objectives, sort out the information level, summarize the optimization points, and finally output the visual effect diagram.
In the past, when we optimized the interface design, we always took "bad experience" as the reason and "interface revision" as the solution, and then began to design visual renderings. This time, I tried to decompose the "bad experience" into various experience details, and summed up some experiences and methods, hoping to apply them in the subsequent design and continue to optimize and improve them.