Mobile e-Commerce website product Display page and shopping cart

Here are my references to Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2go, Ralph Lauren and Tickets.com (each site is directly linked to their mobile version ) Some suggestions on the usability of mobile device websites.

Products Page

Although you can use any only mobile phone access to e-commerce sites, but optimized product pages are usually more user-friendly, as you see in the following figure:

Product Description

When the home page removes pictures and extra navigation, the page becomes easier to use on the phone. Always identify what is most important to your online shopping experience:

• When deciding whether to buy from an online retailer, 77% of the "most likely to buy" people will be affected by the quality of product information content (description, copyright information, pictures, and tools)
• 79% of people do not or will not buy goods without complete product information
• 76% of people think that the site does not provide enough content to complete product research or lead to "often", "very frequent" or "sometimes" buy goods online
• When there is not enough information, 72% of the users will go to the competitor to do further research

Information comes from e-tailing group,2007

The best online stores offer the richest product descriptions, picture previews, picture scaling, reviews, and even product comparison tools. Of course, putting all of this on a mobile site may not be the best solution, but it may not be realistic, but pay attention to the display of brands, textures, and patterns that represent the core strengths of the product.

The image above is the HDTV product page for the BestBuy ecommerce store, and the following is the mobile version of the product interface:

BestBuy's example is straightforward, but if the mobile site is used as a product research, is the information displayed enough to cause the product to be sold? Can users understand the industry terminology of "HDMI input, screen aspect ratio, black piano paint casing"?

Users always want to get the seamless access experience as perfect as possible. If you've gained user loyalty with a highly available, content-rich traditional Web site, it's just as important to make the mobile device experience meet the user's expectations.

Be careful of those product description paragraphs are not shown in a coherent manner. Moosejaw in its new design (right) to get rid of the long and incoherent description (left):

The old version of the site has such a few problems: HYPN OLV may be a description of the color, but it does not mean obvious. Click-to-call and add to cart these two buttons are too close to the touch screen and can be easily mistaken. Zoom Prod at the bottom of the paragraph. Image Call-to-action does not look like a link. The new site looks more like a traditional Moosejaw web site, with a consistently moosejaw and quirky style of product descriptions. Click-to-call links and Big pictures are easy to click on the touch screen.

Target uses the point phrase to simplify the message of expression, making the content easier to navigate:

You can even send details of the product to your phone by text message.

Sears2go allows you to read a description of the product and expand it to show more details if you need to. This both facilitates users who dislike scrolling screens and satisfies the researcher's need for detailed information:

Sephora and Sears at the top of the product page for product ratings and comment Links:

Using tables carefully, they often force the user to scroll horizontally, sometimes in both portrait and landscape scrolling, as Ralph Lauren on the iphone:

Moosejaw allows users to expand and close comments, which minimizes the amount of time a page reads:

Image

Considering that when deciding whether to buy goods from an online retailer, 77% of the "most likely to buy" people will be affected by the quality of the information content of products such as pictures, so the quality of the picture should not be reduced. Target, Ralph Lauren, and Sears both display large images by default, while Moosejaw provides an alternative way to display pictures. Obviously, you can get a higher purchase rate of goods through high quality picture display.

Button layout

For touch screen users, to avoid the "add to Cart", "Add to Wishlist" and "Continue Shopping" and other buttons piled together. Keep some space between the buttons, or put them on one line:

Shopping Cart Overview

Best Buy, Sephora, Target, and Moosejaw only support direct checkout at the mobile end. If so, here are some tips:

Ralph Lauren and Sears are allowed to edit the shopping cart, and Barnes and noble allow the goods to be transferred to the Favorites folder. Surprisingly, Amazo does not have a shopping cart overview page, but instead jumps directly to the login page.

Ralph Lauren's Shopping Cart Overview page allows users to confirm the number and highlight the use of mobile phone purchases can be free shipping. Sear provides shipping and provisioning options, but cannot be set when the product is not suitable for the service. The best feature is Sears, which provides a secure shopping icon on the shopping cart button, as I mentioned in last week's Multichannel 2.0 Online Symposium , fearing that security is not guaranteed to be a major barrier to users ' shopping with their mobile phones.

Tickets.com is very interesting. Its business model is unique because ticket purchases are time-limited, and if the transaction is not completed within a certain period of time, the ticket will still be returned to inventory. You can hardly see the verification code on the E-commerce checkout page, but the ticketing industry is usually more sensitive to suspicious online behavior than other online retailing businesses. Unfortunately, Tickets.com's verification code is difficult to identify.

We will focus on checkout process and form design in the next article.