Published on October 21, 2013
RESPONSIVE DESIGN A FAD OR THE FUTURE? 17TH OCTOBER 2013 PRWD REVEAL MANCHESTER PAUL ROUKE Founder & Director of Optimisation @paulrouke @PRWD #PRWDReveal
TALK OVERVIEW Why are brands going responsive? What business impact is it having? 7 guiding principles for cross device conversion optimisation 3 key takeaways @PRWD #PRWDReveal
WHY ARE BRANDS GOING RESPONSIVE? @PRWD #PRWDReveal
THE CASE FOR THE USER @PRWD #PRWDReveal
From a user perspective, a site built using responsive design offers a high quality experience. Sites not optimised SECTIONfor mobile devices often display TITLE content that is difficult to navigate or too small to read. Maani Safa, innovation director at Somo @PRWD #PRWDReveal
We know that customers like shopping on their phones and tablets, but most e-commerce sites are hideous to use SECTIONon a small screen. TITLE Responsive design - when done right provides for a simpler and faster experience. Maani Safa, innovation director at Somo @PRWD #PRWDReveal
THE CASE FOR THE BUSINESS @PRWD #PRWDReveal
From the point of view of the site owner, a site that uses responsive design only needs to be built once SECTIONyou don't need to build a web version, TITLE a mobile version and a tablet version separately - so this usually saves time and money. Terence Eden, mobile industry consultant @PRWD #PRWDReveal
THE IMPACT @PRWD #PRWDReveal
7 GUIDING PRINCIPLES FOR CROSS DEVICE OPTIMISATION @PRWD #PRWDReveal
7 GUIDING PRINCIPLES FOR CROSS DEVICE CONVERSION OPTIMISATION @PRWD Visibility #PRWDReveal
Bench have 3 extremely persuasive USP messages right at the top of their desktop/tablet experience... yet on mobile they have been removed: Mobile visitors still need to be persuaded so don’t remove USP’s to@PRWD space” “save #PRWDReveal
Schuh also have 3 very compelling proposition messages (they have plenty to choose from but that's another story!) that they ensure they put in front of visitors irrespective of the device they are using Schuh feature the USP messages consistently in their sitewide footer on mobile @PRWD #PRWDReveal
YOUR PROPOSITION MESSAGES SHOULD BE SECTION TITLE VISIBLE SITEWIDE, DEVICE WIDE @PRWD In multiple A/B tests for different types of businesses (retail or not), user researched USP messages never fail to improve sitewide conversion rate Don’t make the mistake of assuming that having a simplified design on mobile means you should lose or hide USP messages On mobile, consider adding in USP messages to your primary tools/navigation menu to give them regular visibility Consider using the footer to promote USP’s on mobile & tablet – users will more often get down to this area by swiping without knowing how long the page is #PRWDReveal
7 GUIDING PRINCIPLES FOR CROSS DEVICE CONVERSION OPTIMISATION @PRWD Visibility Consistency #PRWDReveal
ASOS are still one of the few major retailers who provide visitors with a save/wish list style feature that they genuinely want visitors to use This is the type of feature that is typically removed on mobile experience, yet ASOS recognise the importance of this persuasive tool no matter which device @PRWD are #PRWDReveal visitors using
ASOS recognise that their quick, intuitive and user-centered suggestive search facility needs to be available to visitors on different devices, including on mobile – few retailers usually provide this on mobile @PRWD #PRWDReveal
TOOLS TO STREAMLINE THE USER EXPERIENCE SECTION SHOULD BE TITLE AVAILABLE ON ALL DEVICES If you have large product sets, providing intuitive filtering across devices is a must – don’t take away this key feature for mobile visitors If you provide suggestive search on your desktop site, provide visitors with this same user-centred experience on tablet & mobile In order to provide intuitive mega menus from your primary navigation on tablet devices, display the menu on the 1 st tap – replicating the mouse hover effect on desktop If you provide a wish-list or save feature, ensure that by logging in visitors can browse and shop when it suits them and where it suits them @PRWD #PRWDReveal
7 GUIDING PRINCIPLES FOR CROSS DEVICE CONVERSION OPTIMISATION @PRWD Visibility Consistency Transparency #PRWDReveal
John Lewis are one of the few retailers who allow desktop visitors to scroll between product images “on the image itself” – this is more intuitive that having to click thumbnails They then provide clarity & transparency of how visitors on mobile can browse through image – using the device specific interactions to good affect @PRWD #PRWDReveal
DO YOU HAVE A PERSUASIVE, TRANSPARENT PAYMENT PROPOSITION? @PRWD #PRWDReveal
Paypal is widely known now and it's secure. If there was a problem you would know that they could help you. SECTION TITLE A user in moderated user testing @PRWD #PRWDReveal
I do like Paypal. I have funds in Paypal from eBay, so it's just fun money, it's not accounted for in my bank account Browsing through the site it's not that clear that you can pay with Paypal A user in moderated user testing @PRWD #PRWDReveal
Schuh are one of many retailers who provide PayPal as a payment option. The issue prior to testing is that users completely miss seeing the PayPal logo as it is lost within the other payment card logos When you are shopping on mobile, PayPal is even less prominent to visitors due its relative reduction in size compared to the @PRWD primary checkout button #PRWDReveal
Firebox ensure that immediately from the shopping basket visitors are made completely aware that PayPal can be used as a payment option Firebox recognise that PayPal is a different and persuasive payment option for visitors @PRWD #PRWDReveal
I like that straight away and it's telling me the payment options straight way before I've filled in my details. So I don't have to go upstairs and get my card, because it's got Paypal. A user on the Firebox shopping basket page @PRWD #PRWDReveal
PROVIDING TRANSPARENCY OF YOUR SERVICE SECTION TITLE PROPOSITION IS CRUCIAL FOR CONVERSION Make your payment options clear and don't let PayPal get lost amongst your card types - its a completely different option for visitors that has its own persuasive influence Provide visibility & clarity of your delivery options & costs on your product page – on all devices Make the available payment options clear on your shopping basket Provide visitors on all devices with access to your delivery & returns information throughout checkout Within checkout, don’t hide delivery options within a dropdown – expose them all to allow visitors to make a choice @PRWD #PRWDReveal
7 GUIDING PRINCIPLES FOR CROSS DEVICE CONVERSION OPTIMISATION @PRWD Visibility Consistency Transparency Findability #PRWDReveal
KEY GOALS FOR NAVIGATION SIMPLE FAST CLEAR @PRWD #PRWDReveal
GUIDING PRINCIPLES FOR ECOMMERCE FILTERING & BROWSING Reduce clutter Provide relevant filters Make it quick & responsive to input Make it intuitive Make it consistent across devices Have a clear visual hierarchy Provide display choices @PRWD #PRWDReveal
Nixon provide an excellent example of providing a rich filtered navigation system that works across devices with their responsive redesign Notice that by default the filters are hidden so as not to focus attention away from what is really going to persuade visitors to buy – the products and photography @PRWD #PRWDReveal
FILTERING SHOULD BE QUICK, INTUITIVE & SECTION TITLE CONSISTENT ACROSS DEVICES Do not take away filter options for mobile visitors – users still want to find suitable products & content easily Keep dynamically updating the products in the filter set as users are making selections Ensure users can multi-select without refreshing their location Ensure sliders work on touch devices – so often they don’t and make this important feature redundant Provide a summary of filters applied on desktop & tablet, but simplify for mobile Ensure your filters are finger friendly for touches devices – more vertical space please! @PRWD #PRWDReveal
7 GUIDING PRINCIPLES FOR CROSS DEVICE CONVERSION OPTIMISATION @PRWD Visibility Consistency Transparency Findability Simplicity #PRWDReveal
As part of Nixon’s responsive redesign, they have adopted the commonly used three bar icon for their primary navigation and other user options From our experience most average users now recognise this icon – some brands add in the word “menu” at the side of it to make it even more clear @PRWD #PRWDReveal
They're asking for your phone number. Presumably that's in case you're not in. I'd rather not put my phone number in because sometimes you get all these PPI phone calls. A user on the John Lewis website @PRWD #PRWDReveal
Again you've got to fill in your name, which is annoying. A user on the ASOS website @PRWD #PRWDReveal
The new responsive design for AllSaints is focussed on limiting the amount of personal information users have to provide during checkout Make it quick and non-intrusive for new customers to get through checkout and you will improve brand experience & repeat business @PRWD #PRWDReveal
SIMPLIFY NAVIGATION TO SUIT MOBILE, & STREAMLINE SECTION TITLE YOUR CHECKOUT Simplify the header of your mobile site using the commonly seen tools icon – don’t worry users are used to this now! In checkout, limit the amount of data you request to the bare minimum – ask the question: “do we actually use this data?” In checkout, don’t ask visitors to enter the same information more than once Disable the native auto fill feature on tablet and mobile – dismissing these suggestions can be fiddly and frustrating for users If there is a valid reason you are asking for data, explain this to the user – this is usually enough to satisfy them @PRWD #PRWDReveal
7 GUIDING PRINCIPLES FOR CROSS DEVICE CONVERSION OPTIMISATION @PRWD Visibility Consistency Transparency Findability Simplicity Flexibility #PRWDReveal
Schuh probably have the most comprehensive & flexible lists of delivery choices for customers from the top tier UK (and perhaps worldwide) retailers This level of flexibility for customers will play an extremely important role in persuading customers to keep coming back to Schuh @PRWD #PRWDReveal
Nixon provide desktop visitors with the flexibility to choose their product viewing preference on desktop – but why has this feature been removed for mobile visitors? @PRWD #PRWDReveal
ASOS recognise that providing this flexibility in the browsing experience for visitors is just as applicable across devices, so they don’t remove this feature on mobile @PRWD #PRWDReveal
PROVIDE FLEXIBILITY FOR VISITORS, IN BOTH VISUAL SECTION DISPLAY & TITLE DELIVERY OPTIONS @PRWD Providing flexible delivery options to suit your customers is becoming more and more important, and a potential differentiator Provide the same delivery options across devices – its the same user at the end of the day Some users like to see more detail, where others like to have a more visual experience – provide display options for visitors Maintain consistency of your feature set when it comes to browsing options for visitors across devices #PRWDReveal
7 GUIDING PRINCIPLES FOR CROSS DEVICE ECOMMERCE OPTIMISATION Visibility Consistency Transparency Findability Simplicity Flexibility Usability @PRWD #PRWDReveal
Not exactly breaking news, but optimising site speed across devices, particularly on mobile, is extremely important in improving user experience and conversion rates @PRWD #PRWDReveal
Whether this is opening and using the mobile flyout menu or applying various filters across any device, the speed of the Nixon browsing experience is excellent and really helps generate a positive, enjoyable attitude when shopping. @PRWD #PRWDReveal
The boxes are a bit too small to see. Even if they doubled in size and you had to scroll more A user on the Topman website on a mobile device @PRWD #PRWDReveal
Again the continue button is a bit small, it was very close to the button which takes you back a step. A user on the Topman website on a mobile device @PRWD #PRWDReveal
Topman provide mobile visitors with slim form fields and small calls to action The new Schuh checkout aims to do the opposite – deep form fields and large, almost full width calls to action buttons @PRWD #PRWDReveal
BIGGER MEANS BETTER ON MOBILE: MAKE BUTTONS SECTION TITLE & FORM FIELDS FINGER FRIENDLY @PRWD Users prefer larger form fields that don’t require precision pressing on mobile Don’t be shy about providing big, full width buttons on mobile – its a clearer call to action and easier to press Give your primary calls to action breathing space, don’t cram other actions around them Don’t neglect the importance of having a quick loading website, particularly for mobile visitors #PRWDReveal
3 FINAL TAKEAWAYS @PRWD #PRWDReveal
3 TAKEAWAYS SECTION TITLE @PRWD Businesses need to have/develop a mobile optimised user experience to stay competitive and not lose mobile sales Users don’t actually care whether a website is mobile optimised or responsive – they just want the same key tools and features across all devices – without having to zoom in and out! Users need to be persuaded to take action no matter what device they are visiting on – good usability & persuasive design needs to remain central to online experiences across desktop, tablet and mobile experiences #PRWDReveal
THANKS FOR LISTENING Are there any questions? 17TH OCTOBER 2013 PRWD Reveal MANCHESTER PAUL ROUKE Founder & Director of Optimisation @paulrouke @PRWD #PRWDReveal
Brands are more invested today than ever before on curating and distributing paid,...
Marketers need to be creating and publishing original content across many differen...
As content marketing continues to increase in popularity in every industry, more m...
Il Direct Email Marketing (DEM) è una tipologia di marketing diretto che usa la po...
This presentation contains all 120 rules from Part 1 of the 2nd edition of "Email ...
... Responsive Design, Testing and Conversion ... Paul Rouke – Responsive Design: A Fad or the ... Pricing, prwd, PRWD Reveal, Responsive design ...
Design; Devices & Hardware ... Share Geo-location: Fad or Future? ... Responsive Design: A Fad or the Future? Paul Rouke, PRWD. Login or Join. Processing ...
1 The Theory of Constraints --Fad or Future? ... Design; Devices & Hardware ... Responsive Design: A Fad or the Future? Paul Rouke, PRWD.
The most influential Persuasive Design priorities for 2013. ... To answer this Paul Rouke of PRWD will explain and give examples of the persuasive web ...
... by our clients to provide support as they move towards responsive design. ... Is responsive design just a fad and we should all ... Paul Rouke is ...
Paul is our Smart Insights expert ... hear Paul Rouke of PRWD speak in a webcast at ... Nine practices to watch out for in a responsive web design;
A Look Inside the Global Conversion Alliance Paul Rouke. ... Gwen Stefani thought her stardom would fade. It didn't, ...
Sophia from PRWD reviews Conversion Conference 2013 in London before our Director of Optimisation heads ... User Centred Design; User Research; Careers ...