GlobalShop 2016 Conference is just around the corner and it’s exciting to see one of the biggest retail marketing conferences in the world adapting their offerings to cater to a more digitally advanced group of attendees and retailers every year.
Your audience is becoming exponentially more savvy. They’re probably browsing your online store in the shower using an iPad with a waterproof case while tuned in to their morning conference call on a Bluetooth wall speaker right now. Okay, maybe not that, but when you’re thinking of redesigning your store, you have to account for a sophisticated consumer.
Social sites like Pinterest and Facebook, the dominance of mobile devices over desktops, and the arrival of the design age have indirectly made consumers hyper-cognizant of high quality design. And it’s not just aesthetics; it’s functionality, simplicity, ease of use, and intuitiveness that they’re becoming accustomed to.
Piggybacking on our recent post about Optimizing eCommerce Product Pages and Site Search, today we’ll set our sights on the design process and take aim at optimizing your eCommerce web design using 2016’s best trends and techniques.
Although not new to 2016, Google’s Material Design concept and guidelines continue to be a staple and benchmark for 2016’s design standards. Its principles are vast and transcend eCommerce, but the core concepts are integral to optimizing your store’s design. Here are a few components that stand out:
As many have experienced it on Pinterest, people are now familiar with this natural way of consuming a constant flow of information by scrolling through products on mobile and desktop devices. Using a card layout design makes it capable to adapt to multiple devices and screen
A focus of the Material Design approach is pleasant, congruent, and complementary colour schemes and palettes. This is especially relevant when combined with the other guiding principles, such as menus, cards, lists, sliders, buttons, grids, etc.
Colour is a big deal in the eCommerce design world. Choosing the right colours for action buttons, checkout and shopping cart pages, navigation buttons, etc. all impact your site’s ability to engage and convert. Here’s a quick, one minute video on it.
As said by Google: “Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your product. Bold, graphic, and intentional imagery helps to engage the user.” They have three areas of focus; relevance, informative, and delight.
These focus areas are largely important when choosing product imagery for your eCommerce site. Ensure that you choose highly informative and descriptive images. Try and stay far away from stock imagery, but rather, select captivating images that portray emotion and tell a story. It’s important to select imagery that triggers an emotional response with your audience rather than inundate them with all familiar stock images.
Did you know that 30% of the world access the web with a monitor that’s 21 inches or bigger? And 13% with 24 inches?* As important as mobile is, it’s not everything. When designing your store, consider people browsing on TV’s or large monitors. Make your digital experience scalable and immersive. Take advantage of new larger screen real estate with hidden content, responsive images, and captivating imagery. Amazon and Burberry are two great leading examples.
When designing for your standard desktop and mobile sizes, ensure you include 1920x1080 and 1920x1200 for 1080p television and 23 and 24 inch monitors.
As Steve Krug would say, “Don’t make me think.” When you’re creating your navigation, it’s often helpful to make it "sticky". Sticky Navigation means making it stick to the top of the screen at all times as the user clicks and scrolls around your store.
One of the main purposes is that it allows for a clear call to action at any stage of the on-site buyer journey. A user can always find their cart, find the home page, and access the menu at any given time. This example below from frank body even goes a step further and incorporates sticky call to action buttons inside the navigation as users scroll through the product pages.
Typography can make or break a brand identity. Large type was a predominant trend in 2015, and it’s not slowing down for 2016. Large type can draw visitors into your store, help them reach your product pages, and compel them to click that coveted, “add to cart” button. They also force you to convey your message with a short succinct call to action. When paired with the right image, they can make a perfect hero banner or product page header.
Gone are the days where users have to adapt to a website's limitations. And welcome today’s standards where sites need to design with the user's expectations in mind. Allow for multiple input formats on mobile. I.e. When it comes time to put in a phone number or credit card number, automatically switch to a numerical keyboard. Other things to consider to ensure a frictionless shopping experience are credit card scanning, auto capitalization, and auto advance to the next field upon completion.
An onerous sign-in/sign-up process can deter even the most brand loyal shoppers. Consider simplifying the process by reducing the number of steps required to log-in or sign-up. Allow third party authentication like social sign-in or sign-in with Google. Or my personal favourite, fingerprint touch log-in.
When designing for mobile, make the contact and customer service information readily available. With limited screen real estate it’s easy for it to become lost and/or hidden in the fiery depths of the hamburger navigation. Make live chat, social links, email, and phone number, visible on screen and throughout the shopping cart and checkout process.
What other 2016 web design techniques do you find effective? Please share in the comments.