Explore Mobile Design Best Practices
Learning Objectives
After completing this unit, you’ll be able to:
- List the two mobile design development approaches that are considered best practices.
- Explain how SFRA maps to mobile design best practices.
- Explain why it’s important to plan for mobile implementations.
- List three responsive design best practices.
- Explain the importance of mobile user interface best practices.
Mobile Design Best Practices
There’s no question that mobile shopping has exploded. Two converging realities—shoppers gaining confidence with online credit card transactions and the proliferation of intelligent mobile devices—made this happen. In fact, most shoppers interact with an online brand for the first time from a mobile device.
A high conversion rate—when shopping carts fulfill their destinies and become purchases—is the primary goal of most merchants. To make this happen, they must embrace mobile-centric storefront design and a mobile-first shopping experience. That means that you, as the functional architect, must direct your team in using a solid mobile strategy to ensure a first-rate customer experience.
So what are some of the best practices here? And how can you lead a mobile implementation that uses the right methods and technologies to ensure a merchant’s success?
Design Approaches
You can look at mobile design in multiple ways. Let’s begin with the general approach of comparing desktop-first versus mobile-first experiences. From this general approach, key development approaches emerge.
Desktop-Driven
Most storefront designs began as desktop-driven, because that’s what was available when online retail began. The results of this approach were three key development approaches: responsive, mobile, and adaptive. Understanding these approaches can help you advise merchants and direct your team.
| Design | Pluses | Minuses |
|
Responsive |
|
|
|
Mobile |
|
|
|
Adaptive (App) |
|
|
Mobile-First
Today, mobile retail is the growing market, changing the landscape. The focus is on mobile-first, a design that begins at the smallest device and works its way up. Both the responsive and adaptive approaches can be built on top of this technology. When shopping on a desktop, desktop-style features are available, and when shopping on a smartphone or tablet, mobile features are available. The underlying code automatically switches to the appropriate set of features.
Mobile-first, using responsive or adaptive techniques, is THE best practice for mobile storefront design!
The Commerce Cloud Storefront Reference Architecture (SFRA) meets this standard by providing a basic mobile-first cartridge, upon which other cartridges, such as responsive, adaptive, or LINK technologies, can be loaded.
Responsive Design
For implementations that use responsive design, you need to consider additional best practices. To start, project documentation should clearly define how the display will change at each of the defined screen size breakpoints.
Include Breakpoints in the Design
Breakpoints are defined storefront window sizes that cause the responsive template to change. Common break points include, but are not limited to: 1280px, 1024px, 768px, 320px. Each responsive breakpoint should become part of the design. Think smartphone versus tablet.
Minimize Page Weight
With responsive design, while the information displays differently at various break points, it’s pretty much the same content. This includes media, such as images. You need to make sure the images are web optimized and as light as possible so they render quickly over networks. Remember, even if an image doesn’t display at a mobile breakpoint, it might still have been requested from the server.
Avoid Interaction Models
Interaction models on the desktop don’t always translate well to mobile devices. So, it’s important to avoid the use of popup windows, modals, and hover states at mobile breakpoints.
Mobile User Interface
The shopper’s experience should always be top of mind. As more shopping is done on mobile, more shoppers become aware of the best and brightest features. They begin to expect those experiences everywhere. Sites that fall short, fall by the wayside.
As you help implement a Salesforce B2C Commerce storefront, attention to these best practices can help improve a shopper’s experience on mobile.
- Reduce the number of taps to purchase. One-touch checkout eliminates manual data entry, alleviating frustration, and reducing cart abandonment.
- Augment payment processing with state-of-the-art encryption and best-in-class fraud prevention via third-party apps. Shoppers need to know that their money is safe.
- Offer shoppers multiple payment methods. Make it easy for your shoppers to do business with you.
- Optimize interactions for the medium. Follow device-specific standards for all UI elements so that the shopper’s experience is what they’ve come to expect for that device.
- Include finger-friendly tap targets. Make sure buttons, for example, are large enough for fingers.
- Simplify navigation. Eliminate unnecessary steps.
- Make it easy to buy, for example, via a one-page cart.
- Connect with social media. Make shopping another experience customers can share with friends.
While these practices are typically left up to the designers, you need to understand their importance for enhancing the shopper’s experience. They also go a long way toward increasing the conversion rate, making merchants happy, too.
What's Next
We learned about best practices for both mobile design and the mobile user interface. These are important because they enhance the shopping experience and drive sales. Knowing the right approach can help you better lead your implementation team. Now it’s time to learn about the internationalization best practices that you should consider.