Mobile Shopping Experience Design: clean, effective, smooth, simple shopping process design

Article Description: Mobile commerce is beginning to mature. A good and poor order submission experience has a significant difference in revenue impact. If you give the user a clean, efficient, smooth, and simple process to do the shopping--knowing the advantages and limitations of the mobile experience mentioned above--users and businesses can be profitable.

Translator Note: In E-commerce, we found that the user in the payment link is very high, the payment process user experience is a vital link. This article describes some of the mobile-end payment process methods, how to make our payment process more user-friendly. Spare time to translate this article to share with you, if you find any mistakes, please feel free to give correction.

Original address: Designing-a-better-mobile-checkout-process

Data show that more and more users have a tendency to use smartphones for payment. "Do these users want to complete the purchase on a mobile device?" The question got a quick answer. U.S. mobile E-commerce sales surged 81% in 2012, creating a 25 billion dollar market.

It's worth noting that only a fraction of these deals have come from app. According to the survey, 61%-81% of users are more likely to do shopping on the Mobile Web page: Research goods and prices, view the details of the goods, participate in promotional activities, order and pay. They are more likely to shop in browsers (to get a seamless experience between browsing and payment links) than apps that are independent of each other.

Let's take a closer look at some examples of the mobile end checkout process.

1, Keep only Important information

We may have answered many annoying questions, such as "How do you know us?" "Such a problem may be useful to businesses and has no effect on consumers," he said. Then these consumers need to pay hard earned money, they also have the power to decide whether to close the page.

Although these issues are less important on the web, they are fatal on the mobile side. Let's take a look at two examples:

On the left is a responsive mobile payment process designed by Moby, which reduces unnecessary information and retains only the necessary information. Successfully aggregated the entire payment process into one page.

On the right is Kayjeweler a simple experience becomes very tedious. A total of three pages, showing a lot of unnecessary information, such as "Evening Phone" and "mobile phone number" Two useless information, the address bar into three columns (rather than only a zip code column), but also require users to repeat the e-mail address.

2, allow checkout as a guest

Providing guest identity payments should be a standard practice in the media (although 24% of e-commerce sites do not), especially on the mobile side. Statistics show that if users have to establish an account and confirm that they may not be able to complete the order, this is sometimes very shocking. It is reported that a merchant deleted the "registration" button, saw a leap in sales of 300 million dollars.

Burton began hedging bets on the checkout process, offering three options to users: "Login", "Create Account" or "Guest checkout." ”

3, leverage Mobile User interface elements

Fandango has a fluent mobile payment experience. A big reason is that it is good at using the advantages of the media, more use of touch devices, users can use more easily than typing.

Fandango desktop-side UI and mobile-side UI

Fandango's desktop version of the UI (left) provides users with a typical Drop-down menu to select the number. On the mobile UI (right), they are provided with an incremental selector (also with input options), and a faster choice of quantity.

4, eliminate distractions, not content

Once the user arrives at the paid page, they obviously have the will to buy the product. This time, the site has switched from a salesperson to an order fulfillment center. Thus, the paid page should remove extraneous information that affects the user's attention.

When you're shopping on Amazon, you'll notice a closed payment strategy, where the page goes beyond the standard headers, including menu links and search bars that may drive users to other places, and the payment page can be made easier on the mobile side.

Once the user comes to the Dillard Payment page, their only escape pod is the logo in the upper left corner.

Social media links, like shopping carts in GNC, show users too much content and easily lead users to other places

The rich payment page seems to be a good idea, but it's easy to distract users from buying attention.

That doesn't mean we need to remove everything. Users may have questions about express, delivery, terms, etc., and a good experience should allow users to find the answers they want.

In Crate & Barrel's mobile website, some basic questions are displayed at the bottom of the shopping cart page, allowing users to get answers without leaving the payment page.

5, Show Steps

Users want to know where they are, where they are going, and how long it will take to complete the process. The progress bar is here to ease the user's anxiety.

Recent studies have shown that most businesses display a progress bar.

Armour mobile site to show users a concise and clear progress bar

6, Build lightweight Web sites

First of all, time is precious. If a site is loaded for more than 5 seconds, 74% of users will leave.

He may not win any design awards, but TOMS Shoes page load speed, extremely concise payment page

7, provide safety and security

Mobile e-commerce security is the most concerned problem for users. To overcome this obstacle, designers need not be very subtle: provide users with the necessary security information on the Web page, such as secure phone calls, SSL authentication, and so on.

8, using Google Wallet , PayPal and Amazon and other ways

With Google Wallet, Paypal, Amazon and other ways to allow users to touch the screen only two times to complete the payment, rather than on the order form on the day. User information will be filled out automatically, completing most of the payment process

Shopify No-frill Mobile e-commerce experience

For example, this dodocase, Shopfy mobile E-commerce does not have much visual design, but this is not the point. Their design is very concise (this is a free translation, literal translation is no noise), allowing users to use Third-party trust procedures to quickly submit orders.

9, provides location services and telephone dialing functions

The Home Depot Mobile page lets you use the Select Store product and then use the GPS to find the nearest storefront and view the items bar (possibly the shopping cart)

Compared with the traditional web page habits, GPS information to the user to do address guidance. For example, on a mobile phone with a Web page address: http://maps.google.com/maps?daddr=BEST+BUY&saddr=Current+Location, Google will automatically find the nearest location and provide route guidance. Best Buy finds that 28% of the users of the landing mobile platform will come to the store to purchase goods, proving that the mobile platform is of great value.

In addition, using the Tel:p rotocol dial function to call Customer service calls is a more concise user experience than by phone number

10. Cross-platform testing

Chrome user Agent? It's a mobile phone test software.

Mobile testing is very difficult and time-consuming, but it is important to prioritize and test multiple resolutions based on market share in existing systems-competitive markets. It's certainly the best way to test yourself on each system, but if this doesn't work, you can use Firefox or the Chrome plugin user Agent switcher. He can save you a lot of time and allow you to quickly switch between different phone systems.

Another factor in the communication between systems is design. Many mobile Web experience designers will make mistakes in the design elements of the mobile phone system interface. For example, a designer using an Apple system might use an Apple-style button. Although it can be done in the application, but the mobile page is a multi-browser experience, a Web page with a certain system may lose other users of other systems, or the worst case, the page is not good-looking.

Summarize

Finally, mobile commerce is beginning to mature. A good and poor order submission experience has a significant difference in revenue impact. If you give the user a clean, efficient, smooth, and simple process to do the shopping--knowing the advantages and limitations of the mobile experience mentioned above--users and businesses can be profitable.