Are your customers using mobile? Categorically, yes. A recent study from Bain and Company showed that people interact with their phones 13 times an hour. Our mobile devices are integral to how we talk, learn, and increasingly, shop.
Now more than ever, brands need to think about how mobile activity is changing the customer journey or risk missing critical opportunities for engagement. But many are still underplaying or misunderstanding the role mobile plays in customer experience.
Here are 11 of the core imperatives we reference to make sure our sites are fully optimized and sensible across devices, at any point of shopping journey.
Map out the journey – To make sure everyone in the team has a clear vision of the journey, the first imperative should be to map out the various journeys your customers take, using any useful personas of them you’ve previously created.
Maximize your “small screen” mentality – When we say “mobile”, what do we think of? A smartphone, but also someone out and about, completing small tasks as they go about their busy day. It is true that apps have nurtured an in-and-out, task-focused user, but that doesn’t mean smartphones aren’t also used for long reads and careful research. That smartphone could equally be at home on a wifi connection, providing a second screen to someone watching TV.
Clear out the cruft – The small screen, the inconsistent connection, the in-and-out behavior. Such constraints demand an experience that gets to the point and provides clear pathways. However, without the right checks and balance, websites accumulate cruft, such as useless, superfluous or dysfunctional elements in computer software, that leaves users bogged down. Every surplus page is a possible dead end. If you’re heading into a big redesign, this is your chance for a spring clean. Clearing the cruft not only optimizes for mobile constraints, but streamlines for other means of access too.
Assess must-have components of the mobile experience – FUD (fear, uncertainty, and doubt) is often the deal breakers in a sale, and its influence on a mobile shopper is no less. Audiences still want to know about things like product durability, shipping costs, and independent opinions. Unfortunately, this vital supporting content is often cut or curtailed because “there isn’t enough space” or “mobile users don’t read”. So FUDs may actually be higher for people shopping on a smartphone.
Respect design limitations – As a rule of thumb, there are three technical constraints that impact the design. Touch input is much less accurate than a mouse, so inputs need to be chunkier (Apple HIG advises 44 x 44 pixel minimum) and well-spaced to accommodate pudgy fingers and thumbs. Glossy screens are easily affected by bright lights, and battery saving modes compound this, so clear typography and higher contrast are needed to aid visibility. Wireless connections are unreliable and relatively slow, so lightweight pages respect the user’s time and their data caps.
Get coding quickly – Designers who were once comfortable with a fixed 960px layout now must conceive interfaces that accommodate an infinite range of viewports. Even with a focus on the major breakpoints (phone, tablet, and desktop), time spent producing concepts in Photoshop or Sketch increases two to threefold. That’s a big investment in a static medium that can’t demonstrate animations, interactions, browser quirks, or bandwidth. Even more so when you consider the number of PhotoShop Document (PSDs) discarded at the end of a project.
Integrate design and front-end – Designers who can write HTML and CSS become invaluable in a code-focused process, but most projects will be operating with separate design and front-end capabilities. Normally, that would mean designers throwing mock-ups ‘over the wall’ to developers and hoping for the best. But a process without those visualizations can no longer rely on such a clean-cut handover.
Manually tune break points – Front-end frameworks, like Bootstrap and Foundation, provide a toolbox of elements and plugins. They’re ideal for prototyping, but because they’re designed to be useful to many projects, they’re also not optimized for an individual one. You’re typically locked into predefined breakpoints and grid systems that are functional for the broad strokes of the layout.
Optimize loading times first – Between 2015 and 2016, the average page size has increased 13%. It grew 16% the year before. This upwards trend is not matched by bandwidth improvements, and certainly not addressed by site owners and their developers. So as pages take longer to display, and cost more to transfer, mobile users are voting with their feet and finding a faster alternative.
Be judicious with effects – Native apps have acclimatized mobile users to interfaces that feature responsive interactions and smooth transitions. The web has been playing catch up, and sites that employ jQuery’s fade and slide effects will fall short of the standard. Transformations, transitions, and animations available through CSS3, while less fine-grained, can take advantage of GPU acceleration.
Review with real devices – Developer tools in browsers like Chrome and Firefox have come on leaps and bounds, providing simulators and network throttling. However, they can’t truly replicate the physical and environmental conditions of using a real device. This is the best setting to refine the coded designs, particularly with respect to scaling content and touch areas. Establishing a device lab is critical for testing finished sites and will help support refined decisions about their creation.
Magento Solutions Partners JH is a digital agency that utilizess the power of Magento to build and design user-centric eCommerce experiences that drive businesses forward. JH has been nominated for the second year running for the Magento Imagine Award for Excellence in the Mobile Experience category (they won in 2016).