In recent studies, it is found that most people are more likely to perform actual purchasing processes in mobile devices. Consequently, mobile sites should provide an optimum viewing experience on popular handheld platforms, such as iOS, Android, Windows Phone and BlackBerry OS. All mobile webpages must scale properly to allow shoppers read content better on smaller displays. As an example, the interface should smoothly facilitate thumb-scrolling, a commonly-accepted methods for working with mobile content. Navigation buttons should be highly accessible on the touch-based display and if possible, the device’s “Back” button should integrate with website’s interface.
We often consider it necessary for web designers to have adequate experiences in handling mobile e-commerce platforms. Fortunately, many web designers have solved many mobile-related issues, so we don’t have to reinvent the wheel. By using proper methods, designers can build a website that meets the demanding expectations of clients and consumers. These methods also allow design approaches that we would not have thought possible. This article focuses more on smartphones, which can be more challenging to handle for designers, due to significantly smaller display size.
Experts have predicted that most of Internet traffic will come from mobile devices and a large proportion of them are smartphones. So, it’s mandatory for businesses to operate smartphone-enabled websites to attract more shoppers.
Main Pages
When we visit websites on smartphones, modified main pages tend to contain less content and they seem to focus on helping people find what they are looking for. On e-commerce websites, the preferred layout is two columns to accommodate main content and product categories or featured parts of the website. Search feature is usually prominently located somewhere on the website and it acts as a locator to help users find what they need. To make a much stronger visual impact, promotional contents take a good proportion of the screen real state in any product page. Shoppers come to websites typically to compare price quickly, so simple search function and list-based layout are much more desirable. They may also come to learn about sales and promotions offers, so websites should explain things very clearly. Amazon uses this concept strongly even on its mobile webpages and without a powerful search feature, the website is a much less effective in selling products through online means.
Site-wide Navigation
Beyond using main pages as their primary navigational hubs, many mobile websites implement some kind of navigation menus on most if not all of their pages. Designers typically place menus in the header to allow shoppers go to any part of the website very easily. There are some effective methods we can choose, as an example, some simpler designs use icons to add a bit of nice visual polish. The other way is to let the rest of the webpage fades when users select the navigation menu to let them focus on current tasks. Many larger e-commerce websites choose not to display all navigational options at once. This allows them to set a balance between applying visual design with providing good information structure. Due to a significant amount of information they need to deliver to users, these websites need to decide things that should be included in the global navigation. They continuously refine an applied concept by using analytics tools to see which options on the navigational menu get most of the clicks. Usability tests and A/B tests can also determine whether the menu overwhelms users with too many options. These tools and tests can help designers to decide whether the mobile website has reached the optimal solution for users and the business.
Auto-completion feature on search fields are particularly useful for smartphone users, since on-screen keyboard on smartphones are relatively more uncomfortable to use. With autocomplete, users only need to type in a few characters and get accurate suggestions, based on words entered by previous consumers and dictionary-based corrections. This can be very convenient when users search for common terms, especially, if the search terms contain more than three words. It should be noted that users might tap a wrong character on the field and this could significantly change the suggested keywords. It could be more useful to show common “correct” results instead. Designers might also consider using the more improved auto-suggestion technology, which further reduce the amount of typing users need to enter queries. This could result in a more efficient use of the slower mobile bandwidth. While web designers can do very little to prevent people mistype queries on small smartphone keyboards, they can still provide ways to deliver the right pages.
Designers can do this by displaying a drill-down list for specific product categories, but the ability to do all of this typically depends on the kind of search engine technology, web developers are using.
Search Results
Designers should fully optimize search results for smartphone displays and there are some patterns; web designers can use. Grid display and table display are most commonly used. Grids show bigger images but with less descriptive information. Tables show smaller thumbnail photos with a bit more detailed information on the product, such as name, price and brief specs. Choosing the right one depends on how each business operates. On fashion-related websites, grids can be a better choice, since they allow for bigger pictures of the products. For websites selling tech products, tables are more appropriate since they offer more room for text-based content.
Web designers may initially use grid layout and allow users to choose one or multiple subcategories for broader search terms, like “hats” or “computer monitors”. Once these subcategories are chosen, results can displayed as tables to provide detailed information. Unfortunately, this approach is not without problems, so designer could need A/B tests to reveal whether they can get more people to relevant product pages and bring better conversion rates.
Some mobile websites set grid display as default with the option to set a table display. This allows shoppers to define how they can see search results, allowing them to switch easily from a view mode with bigger photos to the one with an easier-to-scan list. This amount of flexibility should allow shoppers to determine which products they should focus. Web designers should retain the search terms in the field to remind people what they have searched for and allow them refine the search results with additional selections, such as colors and size of the products. Web designers may also duplicate Google’s “Did you mean?” option, to display suggested queries and present more relevant results. Here are two search result features that web designers may need to include in mobile websites:
Results Sorting:
Designers may allow users to organize a huge set of results by using the result sorting capability. This typically appropriate for information that involves numerical values, such as consumer rating, price and arrival date. <Select> menus and buttons are common interface elements used to sort search results. Web designers can provide better tap targets by making buttons slightly bigger and add more spacing between them. Designers can use <select> menu quite safely since newer mobile web browsers on smartphones support this capability and deliver longer lists. However, this could take plenty of valuable space and when facing design trade-offs, web designers should perform regular testing to define the right balance.
Results Filtering:
Smartphone users can narrow their results better with filtering feature enabled. Designers can apply filters using a number of attributes such as size, brand and color. <Select> menu is also a common interface method for offering filtering options to shoppers, but web designers can also use accordion displays and drop-down lists. Filtering is particularly more efficient in providing narrowed down results when shoppers choose multiple values and they should be encouraged to do that. Again, a balanced approach is necessary and web designers should restrain themselves from adding too many values when filtering information. It will not be too helpful for shoppers if they regularly get “No results” messages.
Some mobile websites use the “Refine” tab for filtering purposes and shippers can choose menu options to filter the search results. Other use drop-down lists to select filters along with numbers to indicate how many items match the value. An accordion display can expose multiple checkboxes that are useful for filtering results. In most cases, choosing any of these values would instantly filter the results and shoppers do not need to click a button.
Showing users the number of available items after they select specific filter values can give them greater transparency into what they would get. Accordion method could be more useful for smartphone interface since displaying all available value would take up the whole screen. Web designers need to perform experiments more regularly on mobile websites to define the right structure.
These pages could be the more important part of any mobile e-commerce websites and this is where businesses can show their products and services in detail. They contain many elements including photos, text, buttons and others. They still have the same top navigation structure and search feature, like any page in the website. There are a number of approaches designers should choose when building products pages for smartphones, for example, by using pages with a succession of tabs that display information progressively or long pages with uninterrupted flow of product information.
Choosing to use long product pages for mobile websites may require a lot more considerations. Users would need to swipe up and down more to get the information they need. But, on the other hand, this should free users from having to deal with potentially troublesome small tabs on their smartphone’s web browser. The choice would depend on how much information designers need to describe specific products and whether they can really break down information to manageable chunks. In any usability tests, web designers would typically hear feedbacks favoring any of the approach, but in most cases, users would find it easier to work with product pages organized with tabs. Even if designers take this approach, they should make sure that tabbed content could render on the browser very quickly despite the limited mobile data bandwidth.
A good way to accomplish this is by loading all information at once and then hides them into tabs immediately. This approach would benefit users when the network connection suddenly drops, while they’re working with the page. Unfortunately, this means that the website must transfer all content to users’ devices, putting more pressure on servers and shopper’s expensive mobile data plan.
Photo Galleries
Photo galleries are visually important to shoppers, especially on websites selling apparel products. It may not be necessary for developer to add multiple angles like what they do on desktop versions of the website, but galleries are often an irreplaceable visual-based functionality. Common methods designers may apply include thumbnails for choosing photos, double-tap to zoom and swipe-able gallery interface. Web designers can make their galleries more user-friendly by using fewer pages. They can click the thumbnails to launch larger high-resolution images, since image quality is essential when shoppers examine more expensive products such as laptops and jewelries.
Shopping Carts
The shopping carts section usually uses a table pattern. Besides showing products to be purchased, carts may also include added functionality such as grab items from wish lists, save items for future purchases, change product quantities, remove products, apply promotional codes and go to the check out interface. Once shoppers add an item to the cart, it should be reachable through a visually obvious icon, specifically on the headers. The rows on the cart should include the ability to update quantities, save to favorites and remove products. It is also useful for users if there is information on delivery time and cost. Designers shouldn’t let shoppers move away from the shopping cart interface when performing specific tasks, such as applying promotional codes. To improve sales rates, purchasing procedure should be very straightforward and easy to use. If web designers need to display some information in shopping carts, they can apply the progressive disclosure and reveal content as needed.
Checkout
Checkout is an important part of the purchasing procedure and designers should greatly streamline the process in mobile devices, without compromising security and usability. It should also be very easy for guests to follow.
It is important to allow shoppers to login or checkout as guests. Web designers can invite users to create an account using the smartphone after they place an order, since users already provide adequate information. Any effort needed to create a new user account on the website should be quite minimal at this point and shoppers should be able to enter additional information on the shopping cart. Adding a “Create an account” button that leads to a different page could result in abandoned carts and worse, shoppers may cancel the purchasing process if they think it requires too much effort.
Another good solution is to let shoppers confirm their other first and then invite them to complete the registration right in the invoice page. The quick registration process would help to improve conversions on mobile websites, since users require much less effort to get themselves registered. Fewer choices are critical when users are working with smaller displays.
Forms
Web designers use form in mobile e-commerce websites to let users search, check out, register and enter promotional codes. It is important to fully apply a number of good practices when creating forms for small displays:
- Put form labels directly above input fields. This way, form labels won’t shift off the display when users zoom into input.
- Designers should add fields only when they are absolutely necessary. Web designers should reduce frictions when getting users through the checkout process.
It is always a good idea to limit the use of forms when designing for smartphone displays. There are other options to gather information from users, such as automatically use the phone’s geo-location feature to enter users’ ZIP codes. Web designers may also allow users to perform the checkout process quicker by using information they used earlier. Designers should be aware that the best forms are those that require the least effort to complete.
Web designers should remember that people need forms to complete a transaction on mobile website. They should pay special attention to forms and do whatever necessary to reduce efforts and interaction costs needed to complete them. In some cases, designers need to try out something completely different, such as asking only a single question at a time. This method should be more appropriate for smaller display. Users can also use hotkeys to fill in the form faster, although this option won’t work well in all situations. In the end, web forms should be user-friendly, simple and highly responsive.
Conclusion
Mobile e-commerce websites have increasing importance as they can act as significant source of revenue for businesses. Latest technologies and methods can help web designers add many features on mobile-optimized websites. Based on researches, it is shown that people are far more willing to buy something when the website they’re visiting is mobile-friendly. Web designers should explore various options to get their websites ready for mobile devices. They shouldn’t stop by using only existing patterns, since these can act as jump-off points to explore new designs and discover options they may not have thought of. Mobile web browsers continue to evolve and it is now possible to duplicate interaction patterns and interface apps of native mobile apps into mobile website experience.