Keywords

1 Introduction

With the rapid growth of internet users in recent decades, e-commerce of used-car has been developed rapidly and extensively. The entrepreneur team Beepi created a C2C used-car transaction mode for the first time, which has caused a close attention from the industry and investors. The principal of the company claimed that during 2014–2015, the company had realized 1000% of income growth. In this paper, we explored a new way of improving user experience in a used-car trading website by utilizing data visualization methods in the interface. Typically there are two main car-searching modes in websites. One is to search by keywords; the other is to use constraints to narrow down the range of qualified cars. While purchasing a car, users will make many comparisons. Also, we can see that most of the used car websites place a complete inspection report in a detail page. Users use the detailed contents of car performance and inspection reports of cars to evaluate the car they find. Users normally should repeat the same search-comparing process for many rounds before they can make their final decisions, which is a time-consuming and inconvenient process.

The user experience of product searching is an important issue in e-commerce websites. While shopping for a product especially with many choices, the customer gradually forms his/her expectation of the product through reviewing and comparing many different products. This process can be divided into several stages [1,2,3,4]. To be specific, a user firstly forms a universal set which contains all products that are related to his/her purchasing goal. While forming the universal set, the user gradually understands the market status, realize his real demands and capacity, and create a consideration set through filtering out unfit products from the universal set. Finally the customer evaluates products within this consideration set, which is the most critical stage in products screening toward the final purchasing decision. It is impossible for a client to find the best fit product without forming a proper consideration set. To make a proper consideration set, the user has to bear a good understanding of all relevant products in the market, including their price, pros and cons, functionalities, and cost-benefit trade-off. During this process, the user will have to study and compare many products carefully. Customer’s knowledge gained from previous shopping experience may not be reliable for a new shopping due to market uncertainty issues such as discount and promotions from certain products. In most e-commerce sites, including used-car platforms, customers still use the old way of studying products by examining each product. Although product data are digitalized to enable fast search, it is still a frustrating, repetitive searching-comparing process. Often consumers may have to limit their attention and evaluation to a much smaller range of products to simplify the purchasing decision, which will certainly result in less optimistic purchasing result.

In this paper, we try to employ a data visualization method to enhance user’s experience on product searching via allowing users to foresee results under different parameter ranges. Through the visualization, the user can quickly get an overview of goods on the market, form a universal set, and construct his consideration set by examining product parameters with simple interactions. The customer can also consider cost-benefit trade-offs by examining relations among parameters. With this design, users can gain a quick understanding of the used cars market, recognizing relations among car make, type, price, mileage, year, and configuration packages, and thus make an optimistic purchasing decision. Car searching time will be shortened. The whole shopping process will much more effective, smooth, and convenient.

2 Literature Review

Online websites provide a great number of candidate products for users. Undoubtedly the large quantity of selections will cause difficulties on users’ decision-making process [5]. Similarly, when products have plenty of parameter properties to be referred, it will result in information overloading [6]. Thus, users have to make more efforts to select products [7].

The traditional method of screening is a process of adding limiters and shrinking its range of values constantly, called as “logical product filtration”. Scholars show that when users set multiple constraints, there may be an insufficient quantity of products in the result set [8]. To fix this problem, one of the solutions is to use the “soft boundary”. The upper and lower boundary of the limit range could be enlarged to a certain degree. For example, if upper boundary of a limit range is 100, the broad allowable parameter is 20%, the upper boundary of the actual limit range will be 120. However, such a way may result in information overloading and increasing cognitive burdens of users. To satisfy search demands of users without significantly increasing cognitive load, researchers introduce some new methods within the soft boundary as a supplement, namely preference properties [9]. Users control these constraints, thus can be more flexible based on users’ preference of the searching results. Under this search mode, however, users may still fail to anticipate searching results, and the searching process still requires users to modify limiters constantly before they could see results.

Information visualization provides an idea for solving the problems mentioned above. In an information space, utilization of sensitivity information can help to realize “movement before seeing,” instead of “seeing before movement” [10]. Its presence provides clues for users to set up or modify limit ranges. Such a model may better consistent with the behavior pattern of users.

Parallel bar gram in a multidimensional and interaction techniques to support consumer-based information exploration and choice based on attributes of the items in the selection set [11]. In such an interface, each property of a car corresponds to a bar graph. It excluded cars for inconsistent with the current constraint out of the boundary of the limited range. Such a display pattern indicates that after users change the limit range, some products will be brought into the qualified range. Therefore, users have no need to obtain a reasonable amount of candidate products by modifying the filtering range through countless attempts.

One multi-dimensional data visualization method is parallel coordinate plots [12]. Parallel coordinate plots can visual enable user to see distribution on each parameter and aware correlations among parameters. Through interacting with parallel coordinate plots, a user can investigate the correlation and tendency among many parameters [13]. Users’ interaction in parallel coordinate plots is direct and simple. We can utilize a select box to set up a limit range on the coordinate plots directly. Comparing with the parallel bar gram, we assume such a way can better display abundant product data, realize direct selection, and facilitate cost-benefit trade-off comparison. In this study, we first conduct a user study to understand user’s behavior and needs while purchasing a used car, then designed a new interface with parallel coordinate plots and property marking function to support car-searching process on a used-car trading platform.

3 User Study

At first, to understand the problem, we conduct a user study using interviews and contextual inquiry. We recruited users by applying the “snowball” strategy. We invited six people to our study. All of them are students at Purdue University. They all have basic car knowledge and are interested in buying a 2nd car. After the interview, we invited them to conduct car-search tasks in a used-car website. Their searching and decision-making process were observed and questioned while working on the website.

3.1 Methods

We asked questions about user’s previous experience of purchasing user cars and what factors they would take into consideration when they make decisions. We asked the following questions:

  • Do you have any experience on purchasing a used car? If so, please describe the car picking process.

  • Have you ever searched for cars information through the internet? If so, which website(s)?

  • Have you ever purchased a car through C2C car-purchasing website? What is your experience? Advantage and disadvantage of the website?

  • If you want to purchase a used car, what kinds of parameters will be the key factors affect your final decision? Which parameters are fixed? Which parameters are flexible? Which parameters are subject to cost-benefit trade-off?

We asked users to operate in a current used-car e-commerce websites [14]. In this way, we can investigate user’s behavior and habit in detail. We asked the user to finish the following tasks:

  • Browse the website freely, speak out what’s your concern in the website page and why do you concern about these issues.

  • For users without car purchasing experience, ask him/her to select the most preferred car as if s/he is going to buy the car.

  • For users who have already purchased a car, ask him/her to finish a virtual car purchasing process.

3.2 Summary of the User Research

We found that searching and choosing a used car is a complicated process. We find that the most attractive part for novice users is the information in the detail page of cars, such as fixed parameters, every used-car’s special status, inspection report and photos. Browsing such information will help novice users to form expectation on the target car gradually. Such a process means to browse, record, and summarize through many used-car detail pages constantly. Users will jump through different pages to search, record and compare. According to current websites, the information on detail pages is not able to use as constraints yet. Users can only filter unqualified used cars based on their memory. For some users with experience in car purchasing, we find that after users use traditional filters and find there are no qualified items, they will adjust constraints, observe results, repeat these two steps, and guide to acquire satisfactory results.

In summary, based on results of our interviews and contextual inquiry, we find main difficulties for users to use the current searching method on websites:

  • Used car information has its inherent complexity. There are too many parameters for the user to compare. Every used car has its condition. It involves a lot of cost-benefit trade-off analysis.

  • To compare candidate cars, users need to jump through many pages to find the parameters on car’s detail page and need to remember these parameters. After several rounds, the user forgot previous result. Some of them have to write down the previous search using pencil and paper.

  • When modifying condition ranges, there are no clues for user to predict the result. For instance, before they click the “search” button, they never know “how many candidate cars will be newly increased after the price is improved by $5000.” “how much I should adjust the boundary, for the sake of acquiring other ten candidate cars”. Often the user reaches a “no qualified results” due to the tight constraints. The user has to go back to lose these parameter constraints to get some result.

  • Loosen the constraints often generate too many results, which causes information overload or deficiency for the user. It is very hard for the user to create a consideration set within a reasonable quantity of cars. The search either yield no result or too many results.

According to the problems defined by our study and relevant topics in the literature review, we considered the following design requirements to satisfy user’s need:

  • Users should easily see the overall market status, and understand how different product attributes affect his final purchase decision.

  • Provide with visual clues for user to foresee search results before hit the “search button” after setting up ranges.

  • Users should be able to easily conduct cost-benefit trade-offs by comparing different value combinations of product attributes.

  • The user should be provided with a simple interaction method to filter our un-relevant products to create a consideration set with reasonable quantities of cars.

  • In the detail page, users can mark properties, which can be used as a clue or constraint in the visualization filter.

4 Searching Interface with Data Visualization

4.1 The Visualization Design

We adopted the parallel coordinate plots into the searching interface (Fig. 1) to facilitate car searching and comparison. Using a popular car trading website [14] as a template, we implement our design in the car browsing page. It keeps the core function of the original internet site, and we added our new method to it as supplementary. For a fair comparison, we keep the similar look and feel of the original site. The data used here are real used-car data extracted from the website.

Fig. 1.
figure 1

A: visualization filter (parallel coordinate plots). B: Property marking system C: Searching results D: Traditional filter

Full size image

Our parallel coordinate plots on the searching page will visualize main properties of each used cars in universal set (Fig. 2). Each axis stands for one parameter. We listed 11 key parameters that customers care the most, which are: car price, car type, model, transmission, mileage, model year, cylinder, engine size, new car price, skylight, and color. Some parameters carry numeric value, e.g. price, while some parameters are categorical data with limited choices, e.g. color and model. For each car, their attribute will match a position on the corresponding axis. Connecting these positions will form a polygon, which represents one car. Many cars together will form a graph like Fig. 3. We further encode one key parameter (car price) in the graph by assign each polygon a color, from blue to red, represent price from low to high.

Fig. 2.
figure 2

Property visualization of all cars (~500 cars)

Full size image
Fig. 3.
figure 3

The user drags and puts the property axis “new car prize” to the position next to “prize”. In this way, the user can investigate two properties’ correlation. (Color figure online)

Full size image

One of the major advantages of this visualization tool is the visibility of different parameters’ correlation. By looking the color distribution in other axes, we can see the relationship of cars’ prices with other properties. For example, comparing with or without skylight option, there are more red lines connect to with skylight than without skylight, which indicates cars with skylight are mostly likely expensive cars. In this visualization, any two axes can be put together by dragging one axis and move it next to the other one. Thus any properties’ correlation can be examined (Fig. 3). For example, initially, the parameter “body type” is located at the second position of all axis from left to right (Fig. 3A). When a user want to begin his purchasing with a high “new car price” and low “current price”, he can drag the “new car price” and move it next to the price axis(Fig. 3B). With this interaction, he can observe the relationship between the sale price of used cars and their original price. This particular interaction execute one possible purchasing intention: find the most discounted car.

4.2 Searching with the Interface

Users aware their expectation and purchasing goals through a formative process of examining car properties. Their decision making is an iterative process with two stages, which includes general understanding the product space (universal set) and construct his/her selection (consideration set).

The first stage means to know about the distribution of cars’ parameters in the universal set. At the beginning of this stage, users generally have no definite inclination and preference. They find out cars that may qualify for them in a browsing manner, make comparisons with different cars and reflect what kinds of cars, or what particular functions may meet their demands. On this stage, users will review a great number of cars and parameters that may conform to their expectation. However, it is still a stage that users just start to know about used-car properties and correlation among these properties. Users need to construct a good understanding of how parameters affect with each other through many interactions, for example, by moving axes to compare pairs of parameters. At this stage, the user only gains an overall understanding of the whole market without evaluating individual cars in detail. For a specific car, several parameters may satisfy users’ demands, but other parameters may be totally unsatisfied. One impossible to fit a car satisfy on every aspect, the user has to conduct in-depth analysis on the cost-benefit trade-off among these conflicting parameters.

Through a simple interaction of using mouse to drag a small range along an axis, the user can create a “select box” and define a search range for that parameter, for example, between 100 K to 150 K RBM in price (Fig. 3C). If the user wants to adjust the range, he can drag the upper or lower boundary of the selection box, or simply move the whole box to set a new limit range. To make the use still aware about the car distribution along this axis, filtered out cars still show a short segment indicating their existence and their relation to neighboring axes. With gray outlines, the user can foresee possible result if he moves the select box (Fig. 3C). The customer may create many select boxes on several axes. The polylines remain in the visualizations forms the consideration set. The user will compare and screen out used cars on the basis of some details.

In addition to several main parameters displayed on the visualization tool, there are lots of other parameters on cars’ detail pages. These parameters may not be very crucial when users construct their understanding of consideration set in the first stage. However, when user come to the second stage of evaluating cars, all the candidate cars are from consideration set selected by the constraints. The significance of properties in the detail page increases since all candidate cars are generally qualified. However, current information architecture of used cars trading website doesn’t provide access for users to utilize these kinds of parameters to screen cars. Therefore, the user needs to remember these details in their mind and jump through many pages to compare values of different vehicles, which is truly inconvenient.

4.3 Use Example

Here we demonstrate how a customer construct a small consideration set using the interface. Imagine the user tried to buy a car with a high new car price but low on sale price so that he can enjoy an advance car with large discount. He finds that new car prices of cars with current prices between 100 K to 150 K RMB is ranging from 120 K to 300 K RMB (Fig. 3C). He considers new car price at more than 200 K are good choices. So he sets a constraint via the select box (Figs. 3C and 4A). Next, the user begins to explore the mileage. He does not want to buy a car with a very long mileage. Thus he set a limit of 0 to 70000 km on mileage (Fig. 4B). One more thing he cares is the car’s body type. Most qualified cars are SUV and mid-sized cars. He dragged the “body type” axis to the 4th position to keep compact cars and middle cars by leaving SUV out of the select range (Fig. 4C).

Fig. 4.
figure 4

Searching process

Full size image

So far, the user has explored main parameters of used cars and learned a lot about the correlation among these crucial properties via the visualization tool. After setting four main constraints, the user thinks cars selected are qualified. His first stage has been finished. A consideration set for the user has been established (Fig. 5). Parameters of the car in this consideration set meet demands of the user. For the next stage, the user should evaluate and choose cars from this short list.

Fig. 5.
figure 5

Consideration set cars under four constraints.

Full size image

4.4 Interaction Between Detail Page with the Visualization

In our design, we allow users to mark properties on the detail page and utilize them as new constraints. After reviewing detail pages of several candidate cars, the user realized that GPS is another useful function for him, but this property currently cannot be used as a constraint. He checks his current consideration set and finds there is only one car with GPS (Fig. 5). The available choices are very limited for him. He should go back to the searching page, modify previous constraints and let more cars come into the new consideration set for a fair comparison. To do so, he needs to mark “GPS” as a new constraint. First, he moves the mouse to text “GPS” and clicks right button on it. The property marking interface will pop out. The user then clicks “mark this property” to put this “GPS” selection into consideration. This section will also be recorded into history (Fig. 6A). Then the user can go back to the visualization to adjust select boxes to modify constraints. The “GPS” label is now in the properties marks. The user clicks the check box of “GPS” to establish a new axis on the parallel coordinate plots (Fig. 6B). Thus, a new constraint-GPS for the next round of selection has been set.

Fig. 6.
figure 6

A: Property marking tool in cars’ detail page. Marked property will be shown on the searching page. B: Users can build a new axis to add the “GPS” as a new constraint. The “magnifying lens” will display details of the axis the user is operating on.

Full size image

When the user modifies previous constraints, some gray lines on each axis outside the select box will serve as important clues. For example, as for the “new car prize” axis, gray lines below the lower boundary of the select box stand for cars that have been filtered out only because they did not meet the “new car prize” range set by user. Now, the user feels that a little lower new car prize is acceptable for him. Then he drags the lower boundary of selection box and let more cars come into new consideration set. In this way, the user can foresee the results because he can see the distribution of potential candidate cars and modify the range based on both his needs and the distribution of cars. He knows what efforts he need to do to achieve his goal.

4.5 Heuristic Evaluation

To validate our design and figure out usability problems, we built a paper based static prototype for the new searching page and a high-fidelity interactive prototype for the parallel coordinate plots. We grabbed more than 500 used cars’ data from a real used car trading website [15]. After we had finished building our prototype, we recruited 5 people who work or study in user experience program at Purdue University to conduct a heuristic evaluation. We took use of 10 usability heuristics for user interface design [16] as principles to be checked. The main positive feedbacks are: Good visibility of system status; user control and freedom; Flexibility and efficiency of use; Help users recognize, diagnose, and recover from errors. The main negative feedbacks are concentrated on: Help and documentation; Match between system and the real world.

The overall feedback is positive. Most evaluators felt the new system enjoys a high Level of visibility because they can compare and screen cars in a visual space. The correlation of main parameters can also be investigated via the visualization tools. Furthermore, they can foresee results before they set search conditions. In this way, they can avoid information overload and information insufficiency, which helps users reduce cognitive load and avoid error. The property marking function adds users’ control and freedom, which allows the user to add more detailed and specific parameters as a constraint on the fly while examining a product in detail.

However, some negative feedbacks were also identified during the evaluation. 4 of the five evaluators have now data visualization knowledge. They are not familiar with the parallel coordinate plots used in the design. Thus at the beginning of the evaluation, they had to spend some extra effort to learn the visualization. However, once they figure it out, they fill the visualization method is effective and efficient on supporting user’s searching in large product pool.

5 Discussion and Conclusion

From the users’ experience perspective, we designed a user interface with data visualization to improve the searching process on a used car e-commerce website. Began with exploring users searching behavior and define the problems via our user study, we utilized the parallel coordinate plot visualization as the main component for product searching while keeping current used car trading websites’ current navigation and information hierarchy. Users can use this tool to explore the correlation among so many different cars and different properties to gain a good understand of cars, which increases user’s decision quality. The process is visible, and the result is predictable. Another thing we added is the properties marking function. Since the searching page cannot display all the parameters, some of the properties on the detail page of each car cannot serve as a constraint before. Properties marking will make up this limitation.

The design provides a scheme for solving two major problems happened when user need search in a large number of products. One is how to perceive and compare products’ complicated properties and make decisions on the basis of these properties. The other one is about problems of data overloading or data insufficiency caused by setting constraints when searching products with multidimensional data. By solving these two problems, this design naturally supports the two-stage model of consumers’ decision making process on shopping. The visualization gives a clear overview of the universal set which includes all products with important attributes. The customer can see the distribution of products along each attribute, or examine the trade-off relations among attributes. Through simple interaction, the customer can filter and select desired products to form the consideration set. The consideration set can be easily adjusted.

The design is based on an existing website. Thus, it has high feasible for implementation. In this design, we do not abandon the conventional screening system. The new screening mode and conventional mode can co-exist, evading from risks by using sophisticated solution in the brand-new design. Though this study is focused on the used-car trade, the solution can be applied to explore other products with complicated properties. The design proposes a new way of using data visualization for multi-dimensional data screening in the e-commerce area. Also, the way of using property marking will help users choose cars among various tiny details. Multi-dimensional data screening, such as house purchasing, tourism products, electronic products, as well as other used products, can also use this combination of parallel coordinate plots and properties marking function.

We explore the way to employ relation visualization on real industry to benefit users. We try to collect various kinds of data of each used cars. Total used-car data, however, are still far less than it in the real world. The issue of scalability cannot be ignored. When the data reaches 1000 or more, it would be hard to visualize all of the data at same time, because the lines will be too intensive and overlap with each other.

The primary purpose aims to create a good searching experience for users. In the future, it is necessary to create a more high-fidelity prototype, closer data size in real trade and conduct a deeper user research. In this study, we have found that proposed data visualization method can effectively reduce searching effort and give user better understanding about the whole product space. Such interfaces are still rare in real websites. Our next effort may focus on making such interface more user-friendly so that it can be adopted broader to benefit consumers.