Research on Interactive Design of Interface Layout of Idle Resource Transactional Websites

Abstract

In recent years, with the continuous development of the Internet, the idle resource transactional websites has gradually sprung up and developed rapidly with the help of the Internet platform. And it has also gained more and more people’s attention and favor. The layout design of the website is not only the first impression of the website, but also is an important factor for user experience. Either from the perspective of business profit or from the perspective of user needs, it is very important to research and explore the layout design of idle resource transactional websites. First of all, this paper analyzes and classifies the idle resources transactional website. Secondly, according to the classification of idle resources transactional websites, we propose the interface layout design evaluation index. We have evaluated three of the most visited idle resources transactional websites based on the proposed evaluation index. The result proves that interface layout design is a very important factor. Finally, we conclude some practical and useful design strategies which can be used as the reference for the interactive layout design of the website.

1 Interface Layout Design Interpretation of the Idle Resource Transactional Websites

1.1 The Definition of Idle Resource Transactional Websites

Idle resources transactional website is a commodity trading platform where users can not only sell or share their idle resources, but also can find cost-effective goods. And the benefit of idle resources can be maximized on the win-win platform.

1.2 The Classification of Idle Resource Transactional Websites

With the rapid development of the sharing economy, idle resource transactional websites have also started to go to the positive market. At present, there are two kinds of idle resource trading websites, free sharing and sale. Free sharing sites include Freecycle, YouRole, etc. These websites are very easy to use, where free information of idle resource transferring and help can be released. Sale sites include Xian Yu website, Mercari, Carousell, etc. Users can buy and sell idle resource in order to get paid through these websites.

2 Standard Extraction of Interface Layout Design

2.1 Grid Systems Theory

Grid systems design style is characterized by the use of digital proportions, the type page is divided into numerous uniform sizes through strict calculation. The page is divided into one column, two columns, three columns, or more columns. And the visual elements such as words and pictures are arranged into these columns. So that the layout has a certain rhythm change, formed the harmonious beautiful visual rhythm [1]. The grid system is developed from a planar grid system, and their design thoughts are intimately tied up, which guide and standardize the layout and distribution of information in the web page by using regular grid array [2]. For the interface design, the use of the grid system can not only make the web information more beautiful and easy to read, but also enhance the usability of the web page.

2.2 Symmetry and Equilibrium

The visual balance is to make each plate in the interface basically consistent, so as to achieve the balance. Visual balance is mainly divided into symmetrical balance and asymmetrical balance, also called equilibrium [3]. Although absolute balance does not have much use for websites interface design, left-right horizontal symmetry is often used in the layout of web pages. Equilibrium is one of the most common forms of composition and is often used in websites interface design. In two-column layout design of the websites page. We will find that the color of larger area with less content is usually light. While on the opposite, the color of small area, which we can use as navigation bar, is often dark. Such an asymmetrical layout will achieve a balanced effect, without causing a deviation of the center of gravity.

2.3 White Space

Chinese traditional aesthetics has this statement “white Shouhei” [4]. White space is a special way of showing no pictures in the version. Without very good white space, the page will be crowded. White space can lead the user’s line of sight to the side of the page, making the design of the interface “breathable”. In the design of the layout of the web, the beauty of white space is one of the factors that focus on the expressiveness of Art. The intention to leave white space is to leave enough room for the consumer to breathe, and it helps to highlight the contents that need to be emphasized, avoid accumulation of various elements without rhythm which makes visual fatigue and causes tension. It also strengthens space level, making layout compact and orderly.

2.4 Golden Section Method

To highlight the importance of attracting attention, people often habitually like to put important things in the center. However, according to the human visual habit, the center is actually a blind spot, which is often overlooked, so the information is placed in the center and does not cause the visual impact.

As is known to all, 0.618 is known as the golden ratio, which brings a harmonious and pleasant visual experience. Among them, the tripartite method is a method of using the golden rule. According to people’s reading habits from left to right and from top to top, the visual impact of the four points as (shown in Fig. 1) is from strong to weak in order A (top left), B (top right), C (lower left), D (lower right). This reminds us that in order to enable users to obtain key information more accurately and efficiently, we should fully consider the overall picture and the reasonable arrangement of the visual center in the layout design of the interface.

Fig. 1.

Three-point page visual center

3 Case Analysis

We have selected three of the most visited idle resources transactional websites (Xianyu, Carousell and Mercari) based on the proposed evaluation index. The layout design of idle resource transaction website is analyzed according to the interface layout design standard.

3.1 Xianyu Website Layout Design Analysis

The Xianyu website has accumulated more than 100 million real-name authentication users and is the largest idle trading website in China. Users can log in using taobao or alipay accounts, without having to go through a complicated process of opening a store. Users can be used to upload and upload second-hand goods, and can be traded online and other functions.

Xianyu website layout structure is a comprehensive layout. This kind of layout structure is divided into three parts. Above the interface for Xianyu website is the Logo and navigation, in the middle is the main content of the website, at the bottom of the interface is the copyright information and contact information.

The reasonable arrangement and selection of interface layout structure is determined by the function of the website. There is a lot of information in the Xianyu website. So it is necessary to have a clear hierarchy of information in the layout structure, and the proportion of information content should be sufficient. In order to facilitate user browsing, the visual contrast relationship between the parts should be taken into consideration in the layout arrangement. The best way is to use the golden ratios the most reasonable way is to use the golden ratio to divide, so the main content in the middle is bigger space. The middle part of the proportion will be a little more. Usually account for about 60%, the top 10%, the bottom 30%. Below this way of dividing the closest to the golden ratio, visual center can be concentrated to the main information area. The overall layout and have some breathing space, bring more comfortable feeling to the user (Fig. 2). Xianyu homepage interface, the whole layout of segmentation is very close to the golden ratio. Commodity information is also on the layout along the center of gravity on the average distribution, to achieve the effect of visual balance. However, the content of the interface is too much. And there is no good white space, which leads to the accumulation of too much information. That can’t effectively communicate the information, which can also cause the user’s visual fatigue and cause the tension.

Fig. 2.

Xianyu website interface

3.2 Carousell Website Layout Design Analysis

Carousell is a trading platform for idle resources in Singapore, which expanding to 13 major cities around the world, mainly in the asia-pacific region. In the mode, Carousell is similar to the Xianyu, simply edit the product information and upload the physical picture. And then users can free trade on the platform (Fig. 3).

Fig. 3.

Carousell website interface

The layout structure of Carousell website type is T layout structure, which is named for the similarity of capital letter T in English. At the top of the interface, the logo and Banner of the Carousell website are placed. The navigation bar menu is set on the left side. And the other part is the main information of the commodity. This kind of layout structure is characterized by simple and clear structure, clear interface information and strong visual impact. While bring us a simple and clear vision at the same time, the layout also has the disadvantages and problems of its own. First of all, information of the commodity content and navigation bar are not in accordance with the golden ratio, which will cause the feeling of imbalance because of the asymmetric layout, the deviation will lead to the center of gravity. In addition, the division of the upper and lower regions is too simple and rigid, and the lack of conciseness will give users a single empty visual sense.

So when idle resource trading website is used in the concise layout of T structure, we should pay attention to the way of arrangement of text, pictures and color elements. We also should enrich visual elements in smart layout, so as to avoid causing the overall interface imbalance.

3.3 Mercari Website Layout Design Analysis

Mercari is a trading platform for idle resources in Japan. Mercari raised more than $111 million, quietly becoming Japan’s first unicorn.

The layout structure type of Mercari uses the three-point method, which divides the whole page into three parts. In this type of layout, the most important thing is to grasp the reasonable proportion between the parts of division, and arrange the clear structure and hierarchy. Because the proportion of the three parts directly influence whether the information can be effectively conveyed. So it can’t simply divide, attention should be paid to the relationship between the three. The overall layout proportion is unreasonable. The middle-upper part text information arrangement is too centralized. The Mercari website interface is based on the central axis, and the information content on the left and right sides is symmetrical. Such a form will make the consumer feel the visual balance, comfortable, the information is clear at a glance. The interface in the commodity display part and bottom of the part information has white space, and through the appropriate space. Make whole layout interface is breathable, users in the process of browsing more easily.

4 Research on Design Strategies of Idle Resource Transactional Websites

Based on the analysis and summary of the layout design of idle resource transactional website. It can provide practical suggestions and design strategies for the layout design of idle resource transactional website.

• (1) Layout design based on user’s visual habits and visual process

  When designing the layout of idle resource transactional website. We should pay attention to the user’s visual habit. Because only when we conform to the users’ natural habits can we achieve the effective transmission of information. As you can see from the previous case analysis, the logo of the website is usually in the upper left corner. Because human visual habits generally begin from the upper left corner when browsing a website. And in the same interface, the content of the upper part of the region is more accessible to the user than the lower part of the content. And the left half of the area is more easily accessible than the right half. Psychological research also shows that in the same plane, the upper part of things can make people feel happy and comfortable, while the lower part of things will bring stability and depression. The reason is the same for left and right half. The contents on the left will be more favorable than the right side. Therefore, the layout of idle resource transaction website interface should be based on such a visual habit.

• (2) Change and unity

  Change and unity are the general principles of formal beauty and the application of the unity of opposites in the layout of the interface. The perfect combination of them is the most fundamental requirement of page composition. In idle resource transactional website layout design, the influence of shape, size, direction and so on is an important part of forming a sense of unity. For example, in the website interface design, the best way to make the page achieve a unified way is that the elements of the interface are less, and the form of the combination is richer. The use of some color blocks or color dots can make the whole page very unified.

  The philosopher Heraclitus once said, “Nature is the original harmony of the object, not the union of the same kind, and the art is thus harmonious [5]. It can be seen that unification can bring about the harmony of the layout of the interface layout of the idle resource transaction. And the harmony also requires the opposition of the design change of the website interface. In the layout design of the interface, there are many ways to change the application. Such as the comparison of shapes, the comparison of size, the contrast of density and so on, that can bring harmony to the page from the comparison.

• (3) Orderly and uniform

  Regularity means ignoring differences and opposites, and pursuing consistent expansion and duplication of shapes, lines, colors, etc., so that all elements of idle resource trading website have strong regularity and uniform effect.

  Mercari website interface (Fig. 4), we can see that the goods and copywriting are all the same size in the region and the location of the place also is the same in the rectangular area. And align each other up and down, the size the same modules are consistent. It is convenient for consumers to browse and find the rules to get the effective information of the goods quickly. Neat pages can make people visually relaxed and comfortable, and can feel the stability and calm of the page.

  Fig. 4.

  

  Mercari website interface

5 Conclusion

With the development of economic globalization, diversity has changed people’s consumption and aesthetic perception. With the sustainable development trend and the idea of green consumption, more and more people begin to learn how to reduce the consumption on the basis of experience to gain a better life. The emergence of idle resource transactional websites provides a new way of thinking and perspective for realizing this idea.

However, there are some problems in the interface layout design of idle resource transactional websites. But the analysis of this situation is very limited. In this paper, idle resource transaction websites with high user volume are selected to analyze the current situation of their interface layout design. Furthermore, based on the advantages and disadvantages, we propose a practical value design strategy, and hope to provide reference value for the interactive design of the website interface of idle resource transaction in the future.