Improving the interactive design pattern of mobile e-commerce Sales

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

　　

Translator Note: 2012, the major electric power companies and brand operators of mobile terminal orders are showing a rapid growth trend. As everyone has seen, the mobile dealer has already come. Then the design of a good mobile shopping experience will be able to compete for more users, improve sales. This paper introduces the interactive design mode of each link in the mobile shopping flow in a comprehensive way for reference.

Original address: http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/

Now more and more people use smartphones to replace desktop computers for shopping and buying. As more people buy products and services from computers to mobile devices, site creators can use some design patterns to help jump-start a mobile business project.

A good mobile shopping experience is important. A recent study found that 67% of customers are willing to shop in the design experience friendly mobile end.

The benefit of design patterns is to tell you how other designers solve similar problems without requiring you to reinvent the wheel. This allows you to design a Web site that meets the expectations of people using other sites, and can be based on these design patterns to consider better design options.

This paper focuses on the design of mobile e-commerce functions of the model and methods, including the following aspects:

Home

Full Station navigation

Search Suggestions

Search results

Search Filtering and Sorting

Products Page

Picture exhibition

Shopping Cart

Use existing account/visitor settlement

Form

The interface of this article is mainly selected from the mobile browser version of large department stores, and large retailers need thoughtful design, such as search and search results filtering and sorting, because of the rich product category. These design patterns also apply to local applications.

Home

The primary role of the home page is to help users find what they want when they access the mobile side. Common patterns include a single-column layout for promotional designs and a list of links to a single column, linked to the site's featured area or product catalog page. The home page also contains a list of keyword inquiries, store location guidelines, promotional emails, and loyalty programs.

　　

Amazon and Macy ' s both use promotional elements and list menus.

　　

The target promotion area takes up more screen areas than a simple list but also has a stronger visual impact. Threadless uses a more common dashboard design pattern in local applications.

If the purpose of a customer's visit to the site is to speed parity, then the simple list mode and search function will be more appropriate. If they are looking for a promotion, Target's design will be better. What kind of scheme you use requires data mining to analyze the behavior of consumers when they use your site.

Full Station navigation

In addition to using the homepage as the main navigation center, many sites also place navigation menus at the top of other pages. This allows customers to navigate to other pages without having to return to the home page.

　　

Lowe ' s full station navigation menu each option is an icon. Best Buy's navigation is a two-column layout, with options in the form of buttons. Lowe's menu is covered in content, and Best Buy's pull-down menu pushes the content down accordingly.

　　

The Macy ' s full station navigation menu contains options for the Level Two submenu. Each option in the CVS two-column menu is equipped with an icon. The menus for these two cases are placed at the top of the page.

The above examples show several ways of total station navigation. Lowe's design is very simple, and icon added visual effect, content area gray into the background can let users more focused on the navigation menu, that is, the current task. The CVS two column icon design is more messy, touch target too close to also bring many usability problems.

Search Suggestions

Search suggestions, also known as "input hints" or "autocomplete," indicate possible search targets when a user enters a character. For common, long term search targets, automatic completion can greatly facilitate customers. But there is also a problem, the virtual keyboard is easy to operate incorrectly so that the proposed search target is inaccurate. Showing common "correct" targets can be very effective. You can also consider using an improved AutoComplete model to reduce customer input and use slower mobile bandwidth in the most efficient way.

　　

There are several possible search targets for entering "d-r-a-f" in the office Depot ' s Website search box. The error input "d-r-a-g" results in a user-expected search target. It is a common problem to accidentally enter the adjacent letters of a target when using a virtual key.

If the designer cannot improve the user's faulty input, it is best to provide other ways for the user to reach the target product page from the wrong search results, such as the product catalog Drop-down list or the top-level category of the full station navigation. The site manager can also fine-tune the search functionality, such as a suggested search for "DRAGT" to display "draft".

Search results

A common design pattern for two types of mobile dealer websites: Table and grid mode. Table mode each line shows the thumbnail of the product and basic information such as commodity name and price. Grid mode uses less information for larger pictures. Some sites allow users to switch between two modes.

　　

The Zappos uses the grid form to display the larger commodity chart, is a good way for the display such as the shoe such commodity. The Walgreens table pattern highlights the ability to shop and find goods.

　　

OfficeMax under the large category "Monitors" Let the user select a finer subcategory, and then render the corresponding subcategory of the product result. If a commodity such as "Scissors" has fewer subcategories, it renders the product directly.

This pattern can be problematic if the customer does not know what kind of target they are looking for in a complex class hierarchy. In the OfficeMax example, if a customer is looking for 8.5*11-inch paper, it could be a copy & multipurpose or laser printer. A good solution is to list the corresponding subcategories, such as color and size, under each filter condition. Look for typical users every 4-6 weeks to test the most common search terms and best sellers, and you can probably determine which solution is better. A/b test can also determine which option will lead to more customers and a higher purchase conversion rate.

　　

Gap's default is to display search results in tabular mode, as well as to view results in a grid mode. Display the results of the same time in the search box to retain the search term.

If you enter "Men ' shirts" in Gap, no search results are found, and there is no link to the "Men ' T-shirts" search results. Improvements such as gap can increase the query statement "You are looking for?" and Google handles it well, listing possible search targets "men ' T-shirts" and rendering related search results.

Search sort

Sorting search results by different metrics helps customers organize information, such as price sorting and user rating sequencing. The common Sort interface pattern has buttons and selection menus.

　　

Walmart provides three filtered buttons. Seras similar, using segmented controls.

　　

J.c.penney uses a custom-styled menu, while Eddie Bauer uses the browser's default menu of choices. Both call the browser's own selection menu control.

The size and distance of the Walmart's three buttons ensure a good clickable target, although this allows Walmart to provide only three choices and Sears four. Sears "All" option, you can quickly return to the original search results page if the customer cannot find the desired target in the sort result. The vast majority of browsers support the selection of menu controls, and the selection menu can accommodate more options, but it also takes up more space, so testing is needed to weigh and evaluate the pros and cons of these design patterns.

Search Multi Filtration

Filtering allows customers to narrow the search results by different dimensions, such as color, brand, and size. Filtering functions usually give different dimensions with numeric values. The common filtering interface mode has a selection menu, a drop-down list and a collapsible panel. Select one or more values for a dimension to filter the results. However, if the filtering dimension is too high, the number of selected values can lead to search failures and higher interaction costs.

　　

CVS Filter using the Selection menu, select the appropriate options will immediately update the search results. J.c.penney uses a Drop-down list and indicates the number of results for each filtered dimension, and also allows multiple dimensions to be selected at the same time, weighing the need for the customer to click "Apply" one more time.

　　

Kohl ' s uses collapsible panels (accordion panels) to organize the filtered dimensions, and each panel expansion is a different numeric selection for the dimension. Threadless renders the values of all dimensions directly in one interface. Search results are updated every time a number is selected.

The direct presentation of all dimensions and values allows customers to have a clear look at the number of selected choices. Using this mode or collapsible panel mode depends on how much of your product's filtering dimension. If the product's filtering dimensions are diverse and plentiful, you need to keep trying to find the best design. You can optimize the interface of the products that customers most often use for filtering.

Product page

Product page is a detailed display of the website of the Electronic Business page. They often contain more than one design pattern, such as tags, collapsible panels and picture displays. Two common product page forms, one is a long page containing all the details, one is embedded with a tag or collapsible panel multiple modules page, so that users to expand different information as needed.

　　

Both Samsung and Dell use a step-by-step approach to presenting goods, which typically contain a large amount of detailed information. Samsung uses a collapsible panel and Dell uses labels.

　　

Cobela ' s and Office Depot are a long page to display all the information about the product. This mode requires frequent scrolling of the page to get information, but eliminates the hassle of switching labels and panels. Which model to use depends on the amount of information in the product and how to organize it effectively.

Long pages require more page scrolling than logical module split pages, and customers need to spend more effort to find a specific piece of information they need. In the usability tests I did, both patterns had user preferences, but it was obvious that users were more likely to use pages that split into logical modules. If you use a logically divided page, make sure the user clicks on the tag or panel to quickly load the appropriate information.

The easiest way to do this is to load information about all the product pages at once, including the information that is hidden in the tags and panels so that users can switch to display them immediately. The advantage of this approach is that users can still browse when they break the network, but the disadvantage is to load all the information at once, whether or not needed, which increases your server burden and consumes more data traffic. So you need to weigh it.

Picture exhibition

Photo display is especially important for apparel and consumer electronics. You may not need to look at a wrench from three different angles, but pictures are important for clothes, footwear and high-end smartphones. The common design pattern has a sliding display, double magnification and thumbnails.

　　

Palyess use a sliding display to display items from different angles, and users can double-click to enlarge and view the details.

　　

The Payless Double click zooms out on the screen for a few seconds to ensure that the user has enough time to understand and notice how to operate. The ability to zoom in on details is important for apparel and footwear products.

Dockers (upper left) by way of image display, double-click to enlarge and view the details, while the user can switch different colors. The Levi ' s (upper right) is similar, with multiple selectable thumbnails of different perspectives. Dockers the entire page refreshes when different colors are switched, while Levi ' s is not.

Levi ' s keeps most of the content out of the way when the user switches to a different color, which at first glance feels like a better user experience, but in fact, the Docker full page refresh load is much faster when compared to the same time on the same day. Levi's slow loading may be due to the fact that you have to load five thumbnails in addition to the main diagram, or for other reasons such as network congestion. Each model has its advantages and disadvantages.

　　

Both Samsung and Dell display their products using photo display. Samsung is nested in a collapsible panel, while Dell uses a separate page display.

Samsung's approach seems friendlier, reducing page switching. High-resolution pictures used by both Samsung and Dell, image quality is important to the user experience. Dell's design advantage is to allow customers to focus on the image and reduce distractions of other content.

Shopping Cart

Shopping carts usually use tabular mode to display products. In addition to the necessary purchase information, there are additional features such as modifying orders, saving orders, adding to Favorites or wish lists, deleting or changing quantities, selecting delivery methods, using coupons, coupons, and payments. Users can navigate to the shopping cart through the top of the page or the whole station.

　　

Lowe ' s (upper left) provides the ability to remove merchandise from the shopping cart and select the way to pick up the goods. Sofitel Bath &beyond (upper right) also has the function of removing goods, can change the quantity of goods.

　　

Crate&barrel (upper left) provides the ability to remove merchandise, save to Favorites, and change quantity. It also includes distribution information such as price and time. Payless (upper right) also provides similar functionality.

The shopping cart must provide the best user experience because the customer is only one step away from the final purchase. Allowing users to change the quantity, remove merchandise, and use coupons without having to jump pages is critical to a fast and smooth purchase experience. If the page hosts too much information, you can use the collapsible panel to incrementally display information as the user needs it.

Pay

Paying more is a process than a pattern. Many electric dealers ' websites allow users to use existing accounts or guest identities for payment and settlement. For customers who already have accounts, using existing payment methods and distribution information will greatly simplify the payment process.

　　

Both Crutchfield and Nordstrom allow the user to settle as a visitor or an existing account. Both provide the ability to register the account after the guest is settled, and to change the password.

　　

Amazon asks the customer's email address on the front page of the payment pages and asks if there are any registered accounts. This is consistent with the approach of the PC-side web site. Target provides the ability to sign in, register, and to settle and change passwords on the mobile web site.

For most electrical business sites, it is necessary to allow the customer to pay the settlement with an existing account or a visitor identity. At the same time, consider inviting customers to register accounts after payment is completed, because the customer has entered enough information to register. This will greatly improve the success rate of customer registration, because at this time the customer hardly need to pay much more effort.

Target's "Create target.com Account" button is likely to lead the customer away from the purchase process because it requires a lot of effort from the customer. It would be better to place a single settlement before inviting the customer to register. Limiting the choice of customer settlement can greatly improve the success rate of purchase, reduce customer needs to make decisions.

Form

Forms are frequently used by mobile operators, such as search, payment, registration, use of coupons and promotional codes. Here are some guidelines for designing mobile-end forms:

Label is placed above the input area to avoid the label overflow when the user enlarges the input area

Use HTML5 to invoke the appropriate keyboard to match the usage scenario. Call the input keyboard of the message when you enter the email address, and call the numeric keypad when you enter numbers.

Force the user to enter the required information only when it is really necessary. This will greatly reduce the barriers to customer payment processes.

The best way to work with forms on your phone is to use them sparingly. You can call geolocation to help customers fill out the area code, and you can automatically invoke the information that the user entered before the customer settles. Remember that the best forms are not required for users to complete.

　　

CVS (upper left) does not call the numeric keypad when the user enters the area code. This allows the user to move from one step to another, switching the keyboard. The CVS tab is left-aligned, and there is a problem with the label overflow when the user magnifies the page. The form on the Crate&barrel (upper right) is more user-friendly and automatically calls the numeric keypad when the user enters the area code, with the top aligned label.

Remember that forms help customers complete their purchases on the site. You should pay special attention and reduce the customer's interactive cost as much as possible. Sometimes this means you need to try something a better way.

Conclusion

With the increasing sales of mobile-electric dealers, shopping sites based on mobile browsers offer features that many customers use and expect on the PC side. As Sterling PS and Smithgeiger surveys show, mobile users prefer to buy on friendly websites.

With existing design patterns, you can try different ways to quickly build your own electronic web site for small screens. But do not satisfy existing design patterns, and use them as a starting point to try more different designs. And with the improvement of browser performance, touch screen version of the design can be more considered for reference to local application design patterns.