tag:econsultancy.com,2008:/topics/web-design Latest Design content from Econsultancy 2016-08-16T11:22:00+01:00 tag:econsultancy.com,2008:BlogPost/68177 2016-08-16T11:22:00+01:00 2016-08-16T11:22:00+01:00 Eight drool-worthy restaurant websites Nikki Gilliland <p>A way to showcase creativity and inspire cravings, a <a href="https://econsultancy.com/blog/62044-the-anatomy-of-a-perfect-restaurant-website/" target="_blank">good restaurant website</a> can enhance the dining experience before you’ve even sat down to eat.</p> <p>Here are eight examples to drool over...</p> <h3><a href="http://www.dinnerbyheston.co.uk/" target="_blank">Dinner by Heston</a></h3> <p>Known for his experimental take on food, Blumenthal's Dinner by Heston website evokes the serious business of gastronomy. </p> <p><img src="https://assets.econsultancy.com/images/0007/7916/Dinner_by_Heston.PNG" alt="" width="780" height="521"></p> <p>A full-page background video gives the site a sensory feel, while clever copywriting breaks down the name and concept.</p> <p><img src="https://assets.econsultancy.com/images/0007/7914/Dinner_by_Heston_2.PNG" alt="" width="780" height="527"></p> <p>Like with most celebrity chefs, it's likely that people visit the restaurant because of the famous name.</p> <p>Consequently, the personal voice of Heston is a nice touch, and offers further incentive to visit.</p> <p><img src="https://assets.econsultancy.com/images/0007/7915/Dinner_by_Heston_3.PNG" alt="" width="780" height="536"></p> <h3><a href="https://www.zizzi.co.uk/" target="_blank">Zizzi</a></h3> <p>One of the most creative chain restaurant websites out there, Zizzi is a colourful contrast to the above example.</p> <p><img src="https://assets.econsultancy.com/images/0007/7918/Zizzi.PNG" alt="" width="780" height="376"></p> <p>Zizzi is all about family and fun, and these characteristics are conveyed with playful visuals and interactive elements.</p> <p>Further reflecting the 'social eating' theme, there are also nods to the brand's social media presence.</p> <p><img src="https://assets.econsultancy.com/images/0007/7919/Zizzi_social.PNG" alt="" width="780" height="419"></p> <p>Like most chains, it also includes nutritional information and lots of calls-to-action on its bright, easy-to-navigate menu.</p> <p><img src="https://assets.econsultancy.com/images/0007/7920/Zizzi_menu.PNG" alt="" width="780" height="597"></p> <h3><a href="http://baolondon.com/" target="_blank">Bao</a></h3> <p>Bao's website is beautifully simple - a reflection of the restaurant's humble approach to food.</p> <p><img src="https://assets.econsultancy.com/images/0007/7923/Bao.PNG" alt="" width="742" height="796"></p> <p>Instead of a menu, there is merely an explanation of the main dish.</p> <p>With its less-is-more approach, Bao's website serves to intrigue more than entice.</p> <p><img src="https://assets.econsultancy.com/images/0007/7924/Bao_menu.PNG" alt="" width="780" height="577"></p> <p>Using social media to offer more information on the food and behind-the-scenes goings-on, it shrewdly plays up to the 'must-visit' hype.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">Cod Black. New Bao at Fitzrovia <a href="https://t.co/PGmcR3CJ1s">pic.twitter.com/PGmcR3CJ1s</a></p> — B A O 包 (@bao_london) <a href="https://twitter.com/bao_london/status/762930293544280064">August 9, 2016</a> </blockquote> <h3><a href="http://www.phocafe.co.uk/" target="_blank">Pho</a></h3> <p>Like Zizzi, Pho uses bright visuals to bring its brand to life.</p> <p><img src="https://assets.econsultancy.com/images/0007/7928/Pho.PNG" alt="" width="780" height="623"></p> <p>Recognising that chains can feel overly-commercial compared to independent restaurants, it promotes authenticity by telling a personal story.</p> <p><img src="https://assets.econsultancy.com/images/0007/7929/Pho_story.PNG" alt="" width="780" height="671"></p> <p>With the contrasting nature of quirky illustrations and photography, the menu is both engaging and fun.</p> <p><img src="https://assets.econsultancy.com/images/0007/7930/Pho_menu.PNG" alt="" width="780" height="631"></p> <h3><a href="http://www.dishoom.com/" target="_blank">Dishoom</a></h3> <p>It's easy to assume that the pared-down nature of Dishoom's landing page is a reflection of the whole website. </p> <p>However, the subtle 'All Welcome' button leads the user to a surprising amount of engaging and valuable content.</p> <p> <img src="https://assets.econsultancy.com/images/0007/7931/Dishoom.PNG" alt="" width="780" height="400"></p> <p>Inspired by the old Irani cafe's of Bombay, Dishoom uses its digital space to bring to life the sights and sounds of the eating experience.</p> <p><img src="https://assets.econsultancy.com/images/0007/7932/Dishoom_2.PNG" alt="" width="780" height="387"></p> <p>By calling what any other brand might call a blog a 'Journal', it cleverly evokes a sense of history and authenticity.</p> <p>Using storytelling to great effect, it means the user is likely to get lost in the website rather than check one page and leave.</p> <p> <img src="https://assets.econsultancy.com/images/0007/7933/Dishoom_3.PNG" alt="" width="780" height="391"></p> <h3>Jamie Oliver's <a href="http://www.fifteen.net/" target="_blank">Fifteen</a> </h3> <p>With its understated background and subtle typography, the food is what really stands out on Fifteen's website.</p> <p><img src="https://assets.econsultancy.com/images/0007/7935/Jamie_Oliver_Fifteen.PNG" alt="" width="780" height="501"></p> <p>Likewise, the decision to include all information on one-page (as well as the option to click on the header) means that it creates a pleasingly smooth scrolling experience.</p> <p><img src="https://assets.econsultancy.com/images/0007/7936/Fifteen_menu.PNG" alt="" width="710" height="881"></p> <p>A simple design, yet it proves that restaurant websites don't always need to be jam-packed full of content.</p> <p><img src="https://assets.econsultancy.com/images/0007/7937/Fifteen_food.PNG" alt="" width="750" height="830"></p> <h3><a href="http://maxbrenner.com/chocolate-dessert-bar/" target="_blank">Max Brenner Chocolate Dessert Bar</a></h3> <p>Max Brenner describes its offering as a "chocolate sensory immersion that encourages you to open your mind about how you connect with chocolate".</p> <p>Unsurprisingly, its website is a similarly indulgent experience.</p> <p><img src="https://assets.econsultancy.com/images/0007/7942/Max_Brenner.PNG" alt="" width="780" height="401"></p> <p>Chock-full of tantalising imagery, it showcases its main ingredient to great effect.</p> <p><img src="https://assets.econsultancy.com/images/0007/7943/Max_Brenner_2.PNG" alt="" width="780" height="403"></p> <p>With an added retail offering, it also promotes its products seamlessly thoughout the site.</p> <p>The only thing that's missing is the option to actually buy online.</p> <p><img src="https://assets.econsultancy.com/images/0007/7945/Max_Brenner_4.PNG" alt="" width="780" height="469"></p> <h3><a href="http://www.burgerandlobster.com/home/" target="_blank">Burger and Lobster</a></h3> <p>The website for Burger and Lobster is impressive in both design and attention to detail.</p> <p><img src="https://assets.econsultancy.com/images/0007/7946/Burger_Lobster.PNG" alt="" width="780" height="404"></p> <p>With all content built onto just one page, it works by moving the user onto different sections depending on where they click.</p> <p><img src="https://assets.econsultancy.com/images/0007/7947/burger_lobster_2.PNG" alt="" width="780" height="502"></p> <p>While there is no need to include a menu (with just two very obvious dishes to choose from), it replaces it with an FAQ section instead.</p> <p>It's rare for restaurants to experiment with a humorous <a href="https://econsultancy.com/blog/67268-how-to-achieve-the-right-tone-of-voice-for-your-brand/">tone of voice</a>, so this makes for a refreshing approach.</p> <p><img src="https://assets.econsultancy.com/images/0007/7948/burger_and_lobster_faq.PNG" alt="" width="581" height="562"></p> <p>For more on topics like this one, check out the following articles:</p> <ul> <li><a href="https://econsultancy.com/blog/67785-why-restaurants-need-a-hyper-local-influencer-marketing-strategy" target="_blank">Why restuarants need a hyper-local influencer marketing strategy</a></li> <li><a href="https://econsultancy.com/blog/66045-ux-design-for-restaurants-leaves-a-bad-taste-in-the-mouth" target="_blank">UX design for restaurants leaves a bad taste in the mouth</a></li> <li><a href="https://econsultancy.com/blog/67411-how-zizzi-uses-gamification-to-boost-voucher-engagement" target="_blank">How Zizzi uses gamification to boost voucher engagement</a></li> <li><a href="https://econsultancy.com/blog/65214-how-london-s-favourite-restaurants-are-performing-on-mobile" target="_blank">How London’s favourite restaurants are performing on mobile</a></li> </ul> <p><em><strong>Food &amp; Drink is just one of the sectors covered at the <a href="http://www.festivalofmarketing.com/welcome?utm_source=econsultancy&amp;utm_medium=blog&amp;utm_campaign=econ%20blog">Festival of Marketing 2016</a>, which takes place in London on October 5-6.</strong></em></p> tag:econsultancy.com,2008:BlogPost/68028 2016-07-06T14:21:35+01:00 2016-07-06T14:21:35+01:00 Five ecommerce lessons from Burberry and Hermes Bart Mroz <p dir="ltr"><a href="https://us.burberry.com/">Burberry</a> is a luxury brand that really gets it right. The brand’s digital experience is perfectly aligned with its image and persona - creating a sleek, chic, modern and cool feel.</p> <p dir="ltr">The couture brand uses bold visuals throughout its site, with a dynamic homepage that integrates interactive elements and visually stunning photography that instantly captures the attention of any consumer.</p> <h3 dir="ltr">Create compelling visual design</h3> <p dir="ltr">It’s important to build an ecommerce site that offers compelling visual design to help differentiate your brand from the competition.</p> <p dir="ltr">Burberry does an excellent job at this by creating innovative product pages that are dramatically different from those of its competitors.</p> <p dir="ltr">The details that go into the design elevate the shopping experience and add to the perceived brand value.</p> <p><img src="https://assets.econsultancy.com/images/0007/6804/product_images_plus_thumbnail.png" alt="" width="700" height="412"></p> <p dir="ltr">Product images are all perfectly shot on a consistent backdrop with every element of the product and the model in clear, crisp focus.</p> <p dir="ltr">This makes it possible to see even minute details without zooming in. Consistent and high-quality visuals such as these display your products in the best possible light.</p> <p dir="ltr">One unique visual feature that Burberry’s site utilizes is the use of large image tiles, which makes for a visually appealing browsing experience.</p> <p dir="ltr">Additionally, supplementary product details are sectioned off so consumers can quickly find the exact information they desire.</p> <p><img src="https://assets.econsultancy.com/images/0007/6805/recommended.png" alt="" width="700" height="414"></p> <p dir="ltr">And while many ecommerce sites provide <a href="https://econsultancy.com/blog/65866-how-do-product-recommendations-influence-buyer-behavior/">product recommendations</a> directly below the featured product, this practice can distract shoppers from following through on the purchase.</p> <p dir="ltr">By reducing the footprint of the product recommendation display and aligning it off-center, Burberry presents shoppers with additional options without detracting from the main product. </p> <h3 dir="ltr">Infuse branded content with commerce</h3> <p dir="ltr">An ecommerce site is much more than a destination to purchase products. It provides a platform for brands to engage with visitors and deliver content that tells an interactive story about the brand.</p> <p dir="ltr">Burberry’s website achieves this by seamlessly merging content and commerce to create a fluid and consistent brand image throughout the site.</p> <p dir="ltr">These experiences give users an emotional connection to the brand – similar to that of visiting a physical retail store.</p> <p><img src="https://assets.econsultancy.com/images/0007/6806/burberry_acoustic.png" alt="" width="700" height="416"></p> <p dir="ltr">The <a href="https://us.burberry.com/acoustic/#/acoustic">Acoustic</a> section, for example, features up-and-coming musicians performing in natural environments while dressed in Burberry clothing, yet there is no sign of a hard sell.</p> <p dir="ltr">It feels more like an exclusive look into these individuals’ lives which helps create emotional connections to visitors through music.  </p> <p><img src="https://assets.econsultancy.com/images/0007/6807/burberry_spring_summer.png" alt="" width="700" height="417"></p> <p dir="ltr">The <a href="https://us.burberry.com/our-history/#/heritage/heritage-1800-1">Our History</a> section provides a visual recap of how the iconic Trench Coat has evolved through the years, featuring world-famous models and prominent advertisements through different points in time.</p> <p dir="ltr">Each of these iconic images imbues a deep connection into the history of the brand and the people who helped shape it.</p> <h3 dir="ltr">Simplify the site’s structure</h3> <p dir="ltr">Brands often feature an extensive product line-up so effectively categorizing each product can be challenging, making it difficult for consumers to find exactly what they are looking for.</p> <p dir="ltr">Therefore, it’s crucial to simplify the site’s structure to make it easy for visitors to navigate your products.</p> <p><img src="https://assets.econsultancy.com/images/0007/6809/burberry_site_structure.png" alt="" width="700" height="412"></p> <p dir="ltr">Burberry did an excellent job of this by designing a site that makes exploring both intuitive and simple. The dynamic directory on the left-hand side of the page makes it simple to navigate and search products by category and/or collection.</p> <p dir="ltr">Each and every part of the website can be accessed through this directory and major categories can be expanded into subcategories.</p> <p dir="ltr"><strong><a href="http://www.hermes.com">Hermes</a></strong>, while also a world-class luxury brand with exceptionally crafted merchandise, offers a digital commerce experience that’s severely lacking.</p> <p dir="ltr">When visitors first arrive at the homepage, they’re immediately presented with three options: the brand site, the ecommerce store and store listings.</p> <p dir="ltr">There is a major divide between content and commerce, forcing shoppers to pick one path instead of allowing them to experience the brand in its entirety, and this is just the beginning of the shopper’s journey.</p> <p><img src="https://assets.econsultancy.com/images/0007/6810/hermes_homepage_2.png" alt="" width="700" height="537"></p> <h3 dir="ltr">Balance creativity with functionality</h3> <p dir="ltr">Some brands go so far into differentiating their sites from the competition that they end up confusing their visitors.</p> <p dir="ltr">The Hermes online shop is a prime example of this since the brand presents an unconventional design that makes visitors question whether it functions as an ecommerce site. </p> <p dir="ltr">The homepage looks more like a boutique art gallery than a luxury brand store, with its hand-drawn images that lack descriptions.</p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0007/6802/hermes_homepage.png" alt="" width="750" height="474"></p> <p dir="ltr"> There is no information to be found about the Hermes brand or any of its product, both of which can add context and content to the brand.</p> <p dir="ltr">Without these elements, the brand loses out on the opportunity to deliver an engaging brand experience.</p> <h3 dir="ltr">Offer Robust Product Pages</h3> <p dir="ltr">On many of Hermes’ product pages, <a href="https://econsultancy.com/blog/67052-a-copywriter-s-template-for-excellent-product-page-descriptions/">product descriptions</a> consist of a few sparse words such as “Printed beach towel” or “Hermes silk tie”.</p> <p dir="ltr">However, the lack of content and information doesn’t stop there.</p> <p dir="ltr">Many product pages offer just one or two images and products are presented on sketches rather than on models; this makes for a great artistic statement but it doesn’t translate well for commerce.</p> <p dir="ltr">.<img src="https://assets.econsultancy.com/images/0007/6811/hermes_towel.png" alt="" width="700" height="356"></p> <p dir="ltr">The Hermes site seems to have been created by artists, for artists.</p> <p dir="ltr">While this approach may resonate with some of the brand’s loyal fans, brands can’t afford to take ecommerce design to such an extreme creative direction in today’s increasingly competitive digital commerce landscape.</p> <p dir="ltr">If a brand’s ecommerce offering doesn’t drive sales or provide content that elevates the brand image, then it fails to deliver on consumer expectations and risks losing market share to its competitors.</p> <p dir="ltr"><em>For more on this topic, see:</em></p> <ul> <li><a href="https://econsultancy.com/blog/64767-where-are-luxury-brands-going-wrong-online/"><em>Where are luxury brands going wrong online?</em></a></li> <li><a href="https://econsultancy.com/blog/67604-what-s-the-point-of-social-media-for-luxury-brands/"><em>What’s the point of social media for luxury brands?</em></a></li> <li><a href="https://econsultancy.com/blog/67731-think-affiliate-marketing-doesn-t-work-for-luxury-brands-think-again/"><em>Think affiliate marketing doesn’t work for luxury brands? Think again</em></a></li> </ul> tag:econsultancy.com,2008:BlogPost/67947 2016-06-14T11:04:00+01:00 2016-06-14T11:04:00+01:00 It’s vital that web design takes human psychology into account – not just the latest technology Simon Norris <p>When it comes to creating the best possible outcomes for web users time and time again, keeping abreast of the latest technological developments is simply not enough.</p> <p>Understanding the latest technical advances is all well and good, but not knowing how to apply them effectively is not going to achieve tangible and long lasting results. </p> <p>The glory of owning a brand new Ferrari is sure to be all but lost when the realisation that nobody really knows how to drive it properly fully sets in.</p> <h3>Understanding the effect of web design on the brain</h3> <p>Only by gaining real insight into how the human brain deals with different elements, colours, contrast, symmetry and balance can we therefore truly bring ourselves closer to the desires of our key audiences. </p> <p>Just as the neurological basis for why we find some things more attractive than others must be present before real beauty can be created within the eye of the beholder, understanding the full effect web design can have on the brain can only be achieved once a basic comprehension of how the human brain works has first been ascertained.</p> <p><img src="https://assets.econsultancy.com/images/0007/6051/brain.jpg" alt="" width="411" height="264"></p> <p>Ultimately, any additional working knowledge of exactly how the old grey matter perceives different experiences is undoubtedly going to bring us a step closer to creating the best possible outcomes for the user.</p> <h3>Using Neurodesign principles in web development</h3> <p>The majority of our decisions and subsequent actions are a resulting element of the subconscious and, by nature, human beings tend to look towards others as a means of understanding how they themselves should behave. </p> <p>Such theory forms the basis of the overall working knowledge we have as experiential designers, which tells us consumers ultimately care about what other people think during the decision-making process, regardless of whether or not the individual is alone when those decisions are being made.</p> <p>The consideration of this and other proven psychological factors is required in order to improve the web design process, and ultimately define what makes a good or bad user experience based on the practical processes of the brain, has led to the term 'neurodesign' becoming commonplace within the web design industry. </p> <p>A philosophy subsequently summarised by a variety of practitioners, the basic principles of neurodesign tell us that getting users to truly engage with information comes down not only to how that content is presented visually, but moreover the feelings that are evoked in the very act of its consumption.</p> <h3>Web designing for the mind</h3> <p>The basic concept of a ‘free gift’ becomes altogether null and void when you consider that simply giving something away is proven to envoke feelings of indebtedness - or reciprocity - within the psyche of the receiver. </p> <p>This gift does not have to be tangible, either, in order to trigger the emotional response required. </p> <p>The gift at hand might therefore be freely available imagery or other kinds of information which, when presented within the context of scarcity (in that it may be made available to the consumer for a limited time only) can create a feeling of emotional debt sufficient enough for the user to feel compelled to return to a particular source time and again. </p> <p>When combined with the right levels of technological know-how, such knowledge can mean the difference between creating a user experience that you think hits the spot, therefore, and achieving a true piece of web design created with the mind in mind. </p> <p>By drawing on this expertise with a sufficient understanding of perceptual and cognitive psychology in tow, current UX design guidelines can often become intuitive.</p> tag:econsultancy.com,2008:BlogPost/67853 2016-05-16T14:20:00+01:00 2016-05-16T14:20:00+01:00 Lead generation forms: Five uncommon strategies to increase conversion rates Marcus Taylor <p>And despite the importance forms have, we rarely give them the attention they deserve. </p> <p>Below are five strategies you can use to take your forms to the next level. </p> <h3>1. Simplify your forms by reducing clicks-to-complete</h3> <p>When Microsoft released Windows Vista, fewer people shut down their PCs. Why?</p> <p>It turns out that Microsoft updated its shutdown command from a button to a dropdown box. This trivial change meant that users now had to click three times to shut their computer down instead of once.</p> <p>This small amount of additional effort led to a significant decrease in people using the feature. </p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.49.png" alt="" width="606" height="233"></p> <p>While there are no right or wrong question field types to use, it’s good practice to use field types that minimise the number of clicks-to-completion.</p> <p>Clickable image/icon buttons, like the ones in the Microsoft example in the top left image, are one of the most efficient form elements to use.</p> <p>Not only do they only require one click to answer, they also provide the user with visual prompts.</p> <p>The fewer clicks required to complete your form, the less brain cycles and cognitive load (i.e. ‘thinking’) is required for your users to complete it.</p> <p>In other words, the less your users have to think to complete your form, the better.</p> <p>As a rule of thumb I’ve found reducing the number of ‘clicks-to-completion’ to be a good technique for improving the simplicity and completion time of forms.</p> <h3>2. Focus on motivation &amp; outcomes</h3> <p>People use forms to achieve an outcome. The outcome your users are trying to achieve has a large impact on your conversion rate.</p> <p>After all, if you gave everyone a free Ferrari for using your form - you would likely have a near-100% conversion rate.</p> <p>While this is an exaggerated example, it illustrates how the performance of your form is influenced not only by the form itself - but by the promise of what lies on the other side of it. </p> <p>By clearly communicating the benefits of using your form you can increase the user’s desire to complete it.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.43.png" alt="" width="605" height="290"></p> <p>This is a common tactic used by dating websites. <a href="http://www.welovedates.com/">WeLoveDates</a> shows a photo of a happy couple placed next to the lead capture form.</p> <p>As the users of this website are likely to be looking for a relationship this image represents the outcome that they’re hoping for, and as a result, increases their motivation to join.</p> <h3>3. First impressions count</h3> <p>The first impression that your form creates helps visitors decide whether or not the outcome is worth their time and effort in filling out your form.</p> <p>So, first impressions matter. A lot.</p> <p>When we changed the lead capture form on the <a href="http://brokernotes.co">BrokerNotes</a> homepage from a dropdown question box to a full-page clickable image select box, we saw a 212% increase in people using the lead capture form. </p> <p>In addition to simplifying the questions, we tested adding large amounts of <a href="https://econsultancy.com/blog/65722-18-highly-effective-examples-of-social-proof-in-ecommerce/">social proof</a> and text to manage the visitors’ expectations (e.g. indicating they’re on step one of two).</p> <p>All of this led to an improved first impression that converted over 46% of visitors.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.38.png" alt="" width="604" height="337"></p> <p>One of the best tips for improving the first impression that your form creates is to split it into multiple steps (if you’re currently using a single-step form).</p> <p>When designed well, multi-step forms appear less overwhelming, and have been repeatedly shown to <a href="http://conversionfanatics.com/multi-step-or-single-step-forms/">convert better</a> than single-step forms.</p> <h3>4. Use cognitive biases to your advantage</h3> <p>Cognitive biases are proven ways in which the brain makes illogical decisions.</p> <p>They can be thought of as ‘mental shortcuts’, such as jumping to the conclusion that a restaurant with a queue outside must be good.</p> <p>For example, it’s proven that people overvalue things that they play a part in building (known as the ‘IKEA effect’).</p> <p>There are <a href="https://en.wikipedia.org/wiki/Cognitive_bias">hundreds of these cognitive biases</a>, which you can use to your advantage to improve your form’s performance.</p> <p>One application of this that can improve form completion is using a bias called the <a href="http://changingminds.org/explanations/theories/endowed_progress.htm">endowed progress effect</a>. This bias proved that people are more likely to complete something if there is an illusion that progress has already been made.</p> <p>Here’s an example of the endowed progress effect in use. In this form, the progress bar starts one third complete, subtly indicating that by seeing the first step you’ve already made progress.  </p> <p>Because of this illusion of progress, users are more likely to go on to the second and third steps.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.32.png" alt="" width="603" height="408"></p> <p>There are hundreds of cognitive biases at your dispense. Use them wisely!</p> <h3>5. Don’t be afraid to make forms visual</h3> <p>The old adage says that a picture paints 1,000 words. Scientifically, this isn’t far from the truth.</p> <p>Our brains process images significantly faster than text. In fact, recent research from MIT found that the brain can identify images seen for <a href="http://news.mit.edu/2014/in-the-blink-of-an-eye-0116">as little as 13 milliseconds</a>!</p> <p>Images have an inherent advantage over text. Yet, most forms don’t use them.</p> <p>One of my favourite examples of a visual form is <a href="https://www.toptal.com/">TopTal.com</a>. </p> <p>TopTal could say “we keep your Skype details private”, but instead it places a subtle padlock icon in the ‘Skype username’ field implying that this will be kept private and secure. </p> <p>TopTal could use text in the dropdown question box, like most other forms.</p> <p>But instead it uses recognisable colourful icons that make it easier to process the range of options.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.27.png" alt="" width="607" height="327"></p> <p>In the form on <a href="https://www.ventureharbour.com/web-hosting-guide/">this web hosting guide</a>, you can see how without even having to read the questions, it’s clear what is being asked just from scanning the images. </p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.22.png" alt="" width="497" height="415"></p> <p>Images also make a form appear more engaging and less form-like.</p> <p>From my research studying high-converting forms, I’ve found that these kinds of forms, which appear more like ‘tools’ or ‘quizzes’, typically convert best.</p> <h3>Where to start?</h3> <p>Form optimisation can be overwhelming. With so many opportunities and elements to test, it can be difficult knowing where to start.</p> <p>If you’re not sure where to begin, I’d suggest using the <a href="https://leadformly.com/form-optimisation-pyramid/">Form Optimisation Pyramid</a> as a framework. </p> <p>Start at the bottom by brainstorming everything that can be done to increase the motivation your users have to use your form.</p> <p>For example, you might want to test using strong imagery or different copy to communicate why people should use your form.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.12.png" alt="" width="601" height="407"></p> <p>From here you can move on to brainstorming ways to improve the user’s ability to use the form.</p> <p>Is your form accessible to people who are colour blind? Is it easy to use on a mobile device in bright light? What about for users who like to navigate through forms using the tab key? </p> <p>Once your form passes this phase, you can then focus on ideas to improve the user’s peace of mind, ease of using your form, and how engaging your form is to complete.</p> <p>Most form optimisation advice focuses on usability and ease of use.</p> <p>Using the framework above will ensure that you first take a few steps back to consider the underlying motivation driving your form conversions and whether or not your visitors have the ability to convert.</p> tag:econsultancy.com,2008:BlogPost/67744 2016-04-20T10:32:00+01:00 2016-04-20T10:32:00+01:00 Confusing UX: The new Royal Family website reviewed Ben Davis <h3>Mobile-first but with too many links out?</h3> <p>The site looks better on mobile than it does on desktop, where it has the characteristic appearance of a stream of content that has been re-arranged for a larger page and lacks focus.</p> <p>On the lighter side, I do love the call-to-action 'You may also like.. The Duke of Edinburgh'.</p> <p><img src="https://assets.econsultancy.com/images/0007/4113/Screen_Shot_2016-04-19_at_17.01.45.png" alt="royal.uk" width="615"> </p> <p>However, there's a problem in concept with this mobile-first website.</p> <p>It's essentially a blog with some nice featured articles and embedded video, then lots of links out to other Royal properties (e.g. The Royal Collection website) and social networks (Instagram and Twitter).</p> <p>What this means is there's an initially enjoyable experience on mobile, scrolling through an optimised home or category page.</p> <p>But then when the user clicks on some features they get carried away to another website, or to a web browser version of a social network (rather than the app).</p> <p>So, when I try to Like an embedded Tweet, I get the following experience.</p> <p><img src="https://assets.econsultancy.com/images/0007/4108/IMG_2738.PNG" alt="twitter royal.uk" width="300">  <img src="https://assets.econsultancy.com/images/0007/4107/IMG_2737.PNG" alt="twitter in browser" width="300"></p> <p>Embedded Instagram posts don't display any text on them on Royal.UK</p> <p>So again I have to click through to see what it's all about, to Instagram in a browser.</p> <p><img src="https://assets.econsultancy.com/images/0007/4109/IMG_2739.PNG" alt="instagram on royals.uk" width="300">  <img src="https://assets.econsultancy.com/images/0007/4115/IMG_2742.PNG" alt="royal.uk" width="300"></p> <p>Blocks such as the one below ('Plan Your Visit', on the 'Homes and residences' stream) carry me to an external website with no warning.</p> <p>There are some blocks which do warn of an external site, but not all of them do.</p> <p><img src="https://assets.econsultancy.com/images/0007/4116/IMG_2743.PNG" alt="plan you visit royal.uk" width="300">  <img src="https://assets.econsultancy.com/images/0007/4117/IMG_2744.PNG" alt="royal collections site" width="300"></p> <p>Therefore, for all the joy of discovering 'native' articles with nice text and images, and for all the joy of scrolling, the experience as a whole can be frustrating.</p> <p>Millennials don't like mobile web UX, so used are they to the app world.</p> <p>It reminds me of using a social curation tool such as <a href="http://live.storystream.it/year-in-review/">Storystream</a>. It's intended to show highlights at face value, with links off to in-depth articles.</p> <p>So, despite its mobile-optimised appearance, this site actually works far better on desktop, where users have time and space to explore the content.</p> <h3>Some of the content is great, but you need to load two pages to find it</h3> <p>Making an attempt to avoid that treason charge, I went to find some great content.</p> <p>So, I clicked the following CTA on the homepage:</p> <p><img src="https://assets.econsultancy.com/images/0007/4118/Screen_Shot_2016-04-19_at_18.14.54.png" alt="button" width="300"></p> <p>And it doesn't link to an article, merely a search facility that has been turned on to show me all the Queen-specific content (see below).</p> <p>Looking at the CTA again, I realise the search icon should have made this obvious.</p> <p><img src="https://assets.econsultancy.com/images/0007/4119/Screen_Shot_2016-04-19_at_18.57.12.png" alt="royal.uk queen" width="615" height="315"></p> <p>Anyway, the content on this filtered page is great, there's <a href="https://econsultancy.com/training/courses/video-marketing-strategies">video</a> that plays when you scroll over and some nicely informative articles.</p> <p>But, I can't help but think that the website confuses the user slightly with that first click.</p> <p><img src="https://assets.econsultancy.com/images/0007/4120/queen_child.gif" alt="royal.uk" width="519" height="311"></p> <h3>Site search is not intuitive (and doesn't cope with typos)</h3> <p><a href="https://econsultancy.com/blog/66658-24-best-practice-tips-for-ecommerce-site-search">Site search</a> sometimes confuses.</p> <p>Before realising there's actually an 'invisible' search field which you need to click into, the user naturally but mistakenly clicks the search icon, which loads search results for a blank query.</p> <p><em>Click the 'invisible' field, not the icon.</em></p> <p><img src="https://assets.econsultancy.com/images/0007/4110/Screen_Shot_2016-04-19_at_14.10.48.png" alt="desktop royal.uk" width="615" height="311"></p> <p>Then the user types a phrase and either hits return on the desktop keyboard or 'search' on the mobile keyboard.</p> <p>But instead of searching, this merely adds a comma after the search term, much as if you were adding tags to a blog post (see below).</p> <p>So, the user then has to hit return or 'search' once more to get the action underway.</p> <p>Far from ideal as this is a behaviour pattern that isn't often used on site search fields.</p> <p><em>'Search' keyboard button doesn't search first time.</em></p> <p><img src="https://assets.econsultancy.com/images/0007/4100/IMG_2736.PNG" alt="site search" width="300"></p> <p>Then, when you finally search, the function does deal very neatly with synonyms (e.g. 'Charles' takes me to results for 'The Prince of Wales') but any typo is likely to stifle your results. And the alternative, suggested content is generic. </p> <p>See below, where I've searched for 'Bictoria' (note that B is next to V on a mobile keyboard).</p> <p><img src="https://assets.econsultancy.com/images/0007/4114/IMG_2741.PNG" alt="victoria" width="300"></p> <p>Lastly, when you select a page, its title populates the search field.</p> <p>This is confusing (or at least atypical) if you want to then use this field for your onward journey.</p> <p><img src="https://assets.econsultancy.com/images/0007/4121/Screen_Shot_2016-04-19_at_18.57.12.png" alt="royal.uk" width="615" height="315"></p> <h3>Navigation is limited, can lead to the user getting 'lost'</h3> <p>The site is designed to be scrolled. There are basic category filters in the menu (which again narrow down posts based on search 'tags').</p> <p>But the user simply can't see the extent of the content, or what subsections might hold.</p> <p>This is fine if content is intended to be transitory, flying by and <a href="https://econsultancy.com/blog/65455-why-you-need-an-evergreen-content-strategy/">not evergreen</a>, but I'm not sure it's intended to be that type of experience.</p> <p>To get round this, the site uses blocks that link to different parts of the same article, but this can send the user to content they have already viewed.</p> <p><em>These two blocks link to the same long article, albeit one block links to further down said page.</em></p> <p><a href="https://www.royal.uk/her-majesty-the-queen"><img src="https://assets.econsultancy.com/images/0007/4122/Screen_Shot_2016-04-19_at_19.11.11.png" alt="royal.uk" width="615" height="250"></a></p> <p><em>The website menu is limited.</em></p> <p><img src="https://assets.econsultancy.com/images/0007/4123/Screen_Shot_2016-04-19_at_19.11.01.png" alt="menu royal.uk" width="615" height="364"></p> <h3>And this button is slightly strange</h3> <p>'Related content' isn't exactly a CTA that's begging to be clicked.</p> <p><img src="https://assets.econsultancy.com/images/0007/4124/RLATED_QUEEN.gif" alt="royal.uk" width="615"></p> <h3>Was this content crying out to be on Medium or Wordpress?</h3> <p>The newly 'platformised' Medium or the classic Wordpress are great options. Lots of the UX has already been done to a high standard and, crucially, it's becoming standard.</p> <p>Some of the problems I had with the site came from the fact that I had not previously experienced the UX points I detailed above.</p> <p>Standing out is great, but not at the expense of a decent user experience.</p> <h3>Cookies are truly treasonous</h3> <p>Lastly, a tiny detail. Despite <a href="https://econsultancy.com/reports/the-eu-cookie-law-a-guide-to-compliance/">EU law</a>, I think websites are overzealous when implementing a 'cookie warning'.</p> <p>Here, the message obscures the Queen's face. That definitely is treason.</p> <p><img src="https://assets.econsultancy.com/images/0007/4099/IMG_2733.PNG" alt="cookies" width="300"></p> <h3>Conclusion</h3> <p>I had to actively get to know this website, get used to using it, understand its quirks.</p> <p>Perhaps I've overplayed the detrimental effect of this novelty in an age of limited attention span.</p> <p>The content is good and perhaps it will reward royalists all the more for its new look, and turn the ambivalent away.</p> <p>Reading Room and The Royal Family have certainly championed the novel use of search as navigation, I'm just not sure the world is ready to do that for a site with limited content.</p> tag:econsultancy.com,2008:BlogPost/67751 2016-04-18T12:38:11+01:00 2016-04-18T12:38:11+01:00 It’s time to make web accessibility integral to your project lifecycle James Hopkins <p dir="ltr">The definition of ‘web accessibility’ and the scope of what it refers to should encompass the complete combination of interfaces that sit between the application interface (which conveys semantics), and the user’s cognitive evaluation of those semantics.</p> <p dir="ltr">They can be thought of as three distinct entities:</p> <ul> <li dir="ltr"> <p dir="ltr">the application composition (colour contrast, design responsivity).</p> </li> <li dir="ltr"> <p dir="ltr">the device used to access the application (network connection, rendering capability).</p> </li> <li dir="ltr"> <p dir="ltr">the capabilities of the user (visual, cognitive, and physical).</p> </li> </ul> <p dir="ltr">It is important to recognise that each entity has the potential to affect the user experience to a similar degree.</p> <p dir="ltr">For example, an unsupported browser used against a well-designed application may be as detrimental to the user journey as an assistive technology used against an <a href="https://econsultancy.com/blog/67625-making-your-html-accessible-for-the-visually-impaired/">application that is not using semantic HTML</a>.</p> <h3 dir="ltr">User capabilities are a project requirement</h3> <p>In the same way the application composition and supported browsers/devices are project requirements, so are user capabilities.</p> <p dir="ltr">From the perspective of the project lifecycle, the capabilities of the user can be classed as external variables that cannot be analysed nor controlled.</p> <p dir="ltr">For example, it is impossible to detect that a user may have a cognitive disability which could affect their user journey.</p> <h3 dir="ltr">Don’t rely on the defaults</h3> <p dir="ltr">Throughout the project workflow, more often than not, a set of user capabilities with which our product must work against have already been subconsciously defined.</p> <p dir="ltr">These are the <a href="http://mrmrs.io/writing/2016/03/23/the-veil-of-ignorance/">personal capabilities</a> of each team member (UX, design, development, testing) that has had input into the product.</p> <p dir="ltr">Unless these team members take into consideration the varying capabilities of other users (who don’t have the same capabilities as themselves), it can lead to an inferior usability experience for those user groups.</p> <p dir="ltr">For example:</p> <ul> <li dir="ltr"> <p dir="ltr">a designer that doesn’t suffer from any visual disabilities may inadvertently choose a background/foreground colour combination or typography style that inhibits the readability of text.</p> </li> <li dir="ltr"> <p dir="ltr">a developer that relies solely on visual cues to deduce meaning may not pay enough attention to semantic HTML to describe the application to users who use screen readers.</p> </li> </ul> <h3>Be aware of your surroundings</h3> <p dir="ltr">You need to acknowledge that a proportion of your users will have a disability (as demonstrated through <a href="http://www.sitepoint.com/how-many-users-need-accessible-websites/">consensus statistics</a>) that leaves them exposed to potential usability issues with your site.</p> <p dir="ltr">These disabilities can vary in severity, and the strategy you will need employ to ensure the quality of experience of these users will be proportionate.</p> <p dir="ltr">For example, a visually impaired user may be using a screen reader to interact with your site, which relies on well-constructed, semantic HTML to deduce application composition.</p> <p dir="ltr">Delivery of such an interface, will require early communication between UX designers, visual designers and developers to identify component patterns, so that their meaning can be described through the appropriate HTML structure.</p> <p dir="ltr">In contrast, a user who has motor issues may require an intuitive keyboard routing to navigate through your application.</p> <p dir="ltr">This will involve the same team members as the aforementioned, although the developer will have two roles - implementing the routing itself and advising designers by highlighting any additional routing requirements (sufficient focus highlighting, etc.) that weren’t originally perceived in the design phase.</p> <h3 dir="ltr">Taking an holistic approach</h3> <p>Traditionally, conformance in this area has been a reactive task rather than a proactive one; indeed, the term ‘web accessibility’ is defined by Wikipedia as:</p> <blockquote> <p>...the inclusive practice of removing barriers that prevent interaction with, or access to websites...</p> </blockquote> <p>Rather, fundamentally there shouldn’t be any barriers in the first place that need removing.</p> <p dir="ltr">A common example of such a retrospective task is an ‘accessibility audit’, where issues with the current product have been identified by team members or the business.</p> <p dir="ltr">This approach is nearly impossible to get right because:</p> <ul> <li dir="ltr"> <p dir="ltr">an audit is a static document; assuming the project is in active development, more often than not <strong>the audit becomes out-of-date as soon as it is written</strong>.</p> </li> <li dir="ltr"> <p dir="ltr">mitigating the risk of code conflicts during component ‘patching’ and ever-changing business requirements is tricky.</p> </li> <li dir="ltr"> <p dir="ltr">it can be a contentious subject getting buy-in from a business to remedy the issues identified; you are implying that you have delivered a product that not everyone can use.</p> </li> </ul> <p dir="ltr">The involvement of multi-disciplined teams throughout the entire project lifecycle demonstrates that accessibility is inherently a cross-cutting concern, which must be treated as such.</p> <h3 dir="ltr">Reaching enlightenment</h3> <p dir="ltr">In order to correct previous bad habits, you’ll need to be prepared to change many aspects of your project lifecycle and overall workflow to ensure you stay on top of your responsibility towards accessibility - and become proactive rather than reactive.</p> <p>In my next blog post, I’ll demonstrate how you can achieve this on your own project.</p> tag:econsultancy.com,2008:BlogPost/67700 2016-04-05T13:40:00+01:00 2016-04-05T13:40:00+01:00 What can automotive brands learn from the Tesla website? Ben Davis <h3>Few superlatives</h3> <p style="font-weight: normal;">The thing I noticed most on Tesla's website was the lack of celebratory guff.</p> <p style="font-weight: normal;">All you have to do to find out what I mean by this is look at luxury car websites. Here's an example of typical <a href="https://econsultancy.com/training/courses/online-copywriting/">copywriting</a> from other manufacturers:</p> <ul> <li>A masterpiece of intelligence (Mercedes).</li> <li>The centre of attention wherever it goes (BMW).</li> <li>Meticulous in every detail. Unrivalled as a whole (Cadillac).</li> </ul> <p style="font-weight: normal;">Okay, Tesla perhaps has enough brand cachet to avoid this marketing speak, but it still deserves praise for the functional way it sells its features. Here are some section headings:</p> <ul style="font-weight: normal;"> <li>Built around the driver.</li> <li>Seating for seven + gear.</li> <li>The touchscreen.</li> <li>Everything fits.</li> </ul> <p style="font-weight: normal;">To be fair to the competition, this kind of plain-speaking copy is actually back in fashion and many luxury sedan makers are with Tesla on this one.</p> <p style="font-weight: normal;">Check out Lexus and Jaguar for more simple and effective copy.</p> <h3>Homepage - Tesla's roots as a tech brand</h3> <p>One of the reasons for Tesla's success has been a focused and confident brand - all about selling one uniquely designed product (admittedly now expanded to three models).</p> <p>This uncompromising cool taps more into the success of tech products such as the iPhone than it does the mass market or even the performance car market.</p> <p>The website homepage (at time of Model 3 pre-order) is a perfect example of the Tesla 'tech' brand.</p> <p>No image of a car, just an option to reserve or learn more.</p> <p><img src="https://assets.econsultancy.com/images/0007/3550/Screen_Shot_2016-04-04_at_10.20.21.png" alt="tesla homepage" width="615"></p> <h3>The Model 3 page - it could be selling SaaS</h3> <p>Again, the <a href="https://www.teslamotors.com/en_GB/model3">'learn more' page </a>for the Model 3 looks for all the world like a <a href="https://econsultancy.com/blog/67408-web-design-convergence-what-why-and-does-it-matter">tech/software explainer page</a>, but for the car shots.</p> <p>Iconography demonstrating key features and an embedded Vimeo of the launch sit within a responsive page that resizes very well.</p> <p>The imagery is simple and classy, with the background video particularly quick to load.</p> <p><img src="https://assets.econsultancy.com/images/0007/3552/Screen_Shot_2016-04-04_at_11.01.26.png" alt="tesla 3 page" width="615"></p> <h3>Model S and X product pages - a triumph of scrolling sales</h3> <p>The pages showcasing the Model S and Model X are different kettles of fish, though.</p> <p>They conform slightly more to an automotive sales page; very long (I scrolled 18 folds on my mac) with detailed specs and plenty of video and imagery used to sell various features (safety, engineering, design etc.).</p> <p>Here are some points that stood out to me as inventive marketing.</p> <p><strong>Personas/testimonials to the fore</strong></p> <p>One of the criticisms that can be levied at some of the poorer automotive websites is an impersonal design.</p> <p>This can happen when people are excluded from marketing, perhaps if a site is intended for international audiences. Tesla, though, makes sure that people are right at the front on its Model S product page.</p> <p>These video testimonials make complete sense, given Tesla is pretty new in the market and many potential buyers may be unsure about taking the leap and buying one.</p> <p>On top of <a href="https://econsultancy.com/blog/65722-18-highly-effective-examples-of-social-proof-in-ecommerce/">the social proof angle</a>, these four videos each emphasise one of the USPs of the product - safety, efficiency, sustainability and driving experience.</p> <p>These selling points also help to allay certain fears for electric car functionality. Will it conk out? Will it take forever to charge?</p> <p><a href="https://www.teslamotors.com/en_GB/models"><img src="https://assets.econsultancy.com/images/0007/3556/Screen_Shot_2016-04-04_at_11.21.10.png" alt="tesla model x" width="615" height="812"></a></p> <p><strong>Cross-referenced content</strong></p> <p>I particularly liked the way the Model S product page referenced blog content that updated or added more detail on a particular topic.</p> <p>This idea of further reading for the interested customer helps to prevent bloat on the product page but also gives the impression of iterative improvement at Tesla (a company reknowned for research and development).</p> <p>Though a blog can sometimes feel like a superficial part of a website (full of hyped press releases), Tesla uses it for the right purpose, to showcase information that isn't digestible in other areas of the site.</p> <p><em>Updates and more information via the Tesla blog</em></p> <p><img src="https://assets.econsultancy.com/images/0007/3559/Screen_Shot_2016-04-04_at_11.57.47.png" alt="tesla website" width="615" height="388"></p> <p><em>Updates and more information via the Tesla blog</em></p> <p><img src="https://assets.econsultancy.com/images/0007/3560/Screen_Shot_2016-04-04_at_11.58.17.png" alt="tesla website" width="615"></p> <p><strong><em>Short</em> video</strong></p> <p>We're told time and again that long videos are not engaged with. <a href="https://econsultancy.com/blog/67684-instagram-s-new-60-second-video-limit-five-things-brands-need-to-know/">Instagram may have expanded</a> to allow a minute of video but 15 seconds is still nearer to the optimum.</p> <p>Tesla has 15-second videos of two of its smartest driving features (autopilot and autopark) that neatly show off the functionality, making it cool but not boring or salesy.</p> <p>More of this is needed from traditional car manufacturers who may be tempted to simply repurpose longer TV spots for their websites.</p> <p><iframe src="https://player.vimeo.com/video/151359427" width="500" height="281"></iframe></p> <p><em>Have you got a Tesla? Why not let us know about the buying experience below.</em></p> tag:econsultancy.com,2008:BlogPost/67682 2016-03-31T10:14:00+01:00 2016-03-31T10:14:00+01:00 A look inside Nationwide Building Society’s new CX design lab Ben Davis <h3>Are there any priorities for this new CX team? </h3> <p>For me there are three key priorities for the CX team; looking at the <a href="https://econsultancy.com/blog/67118-17-bullshit-free-quotes-about-company-culture-from-digital-organisations">culture</a>, in-house capabilities and, of course, the continued delivery of a great customer experience at every opportunity.</p> <p>We have the opportunity to foster a <strong>creative culture right across Nationwide, </strong>...leading the charge in<a href="https://econsultancy.com/blog/67430-what-does-improving-customer-experience-mean"> customer experience</a> and customer centric design, not just within the financial services industry – but across the UK.</p> <p>This means we need to build collaboration to ensure we get the right people, at the right time, working to deliver solutions in the most appropriate ways.</p> <p>Linked to this is looking at how we can continue to<strong> strengthen the in-house creative and design capabilities</strong> across the business – creating a great customer experience does not sit within one team.</p> <p>Nationwide has over 17,000 employees and each of these experts support our members in different ways.</p> <p>By strengthening our core knowledge base across the business we have the opportunity to make real and positive changes across all areas of the organisation which will allow us to continue to exceed the expectations of our members.</p> <p>Finally, we must also look at how we can support the delivery of new projects both big and small across the business.</p> <p>We are able to work with the business to <strong>break down large programmes to deliver more quickly</strong>; we can draw on our agility to get the right things in front of customers at the right time.</p> <h3>Where have you started - new products or existing interactions? </h3> <p>We have started looking at both new products and existing interactions - customers currently complete <strong>2.9bn transactions each year</strong> with Nationwide, so we have billions of opportunities to exceed expectations.</p> <p>This number is dramatically increasing each year and I’m excited about how we can ensure that we can provide even greater levels of <strong>personalisation</strong> to members.</p> <p><em>2.9bn transactions a year, with 15 different payment methods offered</em></p> <p><img src="https://assets.econsultancy.com/images/0007/3398/nationpay.png" alt="nationwide payment methods" width="615"></p> <h3>What's the roadmap for taking a siloed (and somewhat outsourced) initiative like this to the wider teams?</h3> <p>The advantage of being an in-house team is that you are embedded in the process right from the outset; we can work with the business to identify, understand and deliver against strategic opportunities.</p> <p>We are also here to challenge the business to ensure that the creative culture and best practice is shared across the organisation to make a long term and lasting impact.</p> <h3>How does a financial institution learn to 'fail quickly'? What metrics do you work to and under what constraints?</h3> <p>For our team and right across Nationwide we are looking to work in a different way <strong>with even greater agility and flexibility,</strong> and we have a real focus on bringing customers into the creative process to ensure that we deliver the right ideas and solutions in the most effective way.</p> <p>For me it is not a matter of failing quickly, but an opportunity to ensure that there is a constant process of improvement.</p> <p>Being an in-house team, we do not face the same barriers some consultancies experience. We work each and every day with decision makers from across the Society, which means <strong>we have access to the data, teams and resources exactly when we need</strong>.</p> <p>Nationwide is a mutual, this means we are owned by and run for the benefit of our members.</p> <p>This gives the team one key metric to deliver against – ensuring we provide market leading levels of customer service and satisfaction, meeting the evolving needs of our members.</p> <h3>Who shelters (and how) a design team from short-term corporate thinking?</h3> <p>As a mutual, <strong>Nationwide is able to take a longer term view</strong> on all decisions as we don’t face the short term pressures of delivering against shareholder expectations.</p> <p>Our focus is on the needs of our members.</p> <p>This view has enabled the Society to deliver long term success over the last 170 years, and our role in this is to become strategic problem solvers to ensure we continue to deliver against the rapidly changing expectations of our 15m customers. </p> <p><em>Mutuals can take a longer-term view</em></p> <p><img src="https://assets.econsultancy.com/images/0007/3399/Screen_Shot_2016-03-29_at_15.59.28.png" alt="mutual" width="615"></p> <h3>To what extent will Nationwide Studio fix 'broken windows' and change language?</h3> <p>We will of course look to deliver against any ‘quick wins’, but our real focus is to investigate the long term strategic changes which will have a lasting impact.</p> <p>As a team we will be learning from our customers, almost every day we have <strong>visitors to our customer testing facilities</strong> and this allows us to focus on what customers actually want and to deliver against their expectations. </p> <h3>What brands and businesses are you inspired by when it comes to interaction, online or off? </h3> <p>There are a lot of great businesses which are delivering fantastic interactions with customers at every touch point, and we recognise that we need to deliver against the customer’s expectations based on the best brands in the world across all industries, not just within financial services.</p> <p>The brands which stand out to me are ones with clear propositions which have customers right at the heart of what they do, organisations which have connected ecosystems so customers get a consistent experience across each channel, and finally brands which have an authentic personality which stands the test of increasingly public interactions.</p> <p><em>If you want to learn about how Econsultancy can help your brand's digital transformation, <a href="http://bit.ly/1wrXZcI">visit our hub page</a>.</em></p> tag:econsultancy.com,2008:BlogPost/67683 2016-03-30T11:06:00+01:00 2016-03-30T11:06:00+01:00 How typography will help your responsive website stand out James Hopkins <h3>Be responsive, accessible and different</h3> <p>When someone uses the term ‘accessibility’ in the context of web development, they’ll likely be referring to the practice of ensuring that users who require assistive technologies are able to use your website.</p> <p>However, the topic of accessibility is far wider ranging than the aforementioned scope. Rather, it is ensuring that <em>anyone</em> regardless of device is able to use your application.</p> <p dir="ltr">With such a wide-ranging array of internet-enabled devices (phones, tablets, etc), it’s important that your application caters for these devices in seamless way.</p> <h3 dir="ltr">“Oh, here is another big picture website…!”</h3> <p dir="ltr">Hamburger menu? Check. Full screen image? Check. Scroll prompt? Check.</p> <p dir="ltr">Did you ever get <a href="https://econsultancy.com/blog/67408-web-design-convergence-what-why-and-does-it-matter/">a sense of deja vu</a>?</p> <p dir="ltr">Chances are, the website you’re looking at is ‘<a href="https://econsultancy.com/blog/66081-responsive-web-design-15-of-the-best-sites-from-2014/">responsive</a>’ - meaning the same webpage will fit in different screen sizes nicely, with the same functionality on offer.</p> <h4 dir="ltr">But why don’t you make a separate m. website instead?</h4> <p dir="ltr">Chances are you’ve seen a URL in your address bar whilst on your mobile that is prepended with an ‘m’ subdomain.</p> <p dir="ltr">The vast majority of the time this’ll denote a standalone mobile-specific website, that is entirely separate from the desktop version.</p> <p dir="ltr">There are some major drawbacks with this model:</p> <ul> <li>Maintenance overhead and development costs associated with several disparate codebases.</li> <li>Reliance on potentially brittle device detection.</li> </ul> <p dir="ltr">In contrast, a responsive website incorporates the same underlying codebase, with its responsive nature coming from adaptations of its user interface based on environmental variables.</p> <p dir="ltr">These include screen resolution, aspect ratio, and orientation. This concept provides a leaner approach throughout the project lifecycle.</p> <p dir="ltr">In addition to the technical decisions when constructing a responsive website, design considerations are also incredibly important.</p> <p dir="ltr"><em>A typical responsive website, with hamburger menu and 'big picture'.</em></p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0005/9589/IDA.png" alt="responsive website" width="615"></p> <h3 dir="ltr">Mobile first</h3> <p dir="ltr">Another buzz word in the responsive design sphere is the term ‘mobile first’. Essentially, this means that you should be designing for the smallest device size envisaged, and progressively increasing support for larger resolutions.</p> <p dir="ltr">On larger screens such as a desktop monitor, you can have content elements side by side. There is enough room for it. You can have several items displayed almost at the same level.</p> <p dir="ltr">However on the narrowest possible screen, you have to reduce the number of columns, which forces you to organise your content in a much more linear fashion. Moreover, it forces you to think in terms of information hierarchy and single priority order.</p> <p dir="ltr">Once you work out the order, going back to a larger screen is a much simpler process. And many choose to keep this single order; even keep the hamburger menu (it’s the icon with three lines stacked up and usually reveals a site navigation in some way).</p> <p dir="ltr">They reason “you might as well put beautiful massive images on it. Or make it a video. Nice simple layout. Clear hierarchy. Job done.”</p> <p dir="ltr">Except, that is what a lot of other people are doing. How can we achieve a responsive website that doesn’t look like everyone else’s?</p> <h3 dir="ltr">It’s all about typography</h3> <p dir="ltr">The best responsive designs come with good, considered typography. As far as I am concerned, there are two factors for great typography.</p> <p dir="ltr">The first one is personality. Is the typeface appropriate for what you’re trying to communicate? You don’t warn people of death in Comic Sans (unless it’s for comic purposes obviously). Does it represent the brand? Does it have right level of authority?</p> <p dir="ltr">And the second one is semantic. Typography has to convey the right relationship between each word, sentence and paragraph.</p> <p dir="ltr">To illustrate, this example is stripped off any typographic consideration:</p> <table style="border-collapse: collapse;"> <colgroup><col width="593"></colgroup> <tbody> <tr> <td> <p dir="ltr">It’s all about typography.</p> <p dir="ltr">How personality of typeface and semantic affects how you communicate through words.</p> <p dir="ltr">“Oh, here is another big picture website…!” Hamburger menu? Check. Full screen...</p> </td> </tr> </tbody> </table> <p dir="ltr">And the same text, with some of those considerations added back in:</p> <table style="border-collapse: collapse;"> <colgroup><col width="590"></colgroup> <tbody> <tr style="height: 0px;"> <td style="vertical-align: top;"> <h3 dir="ltr">It’s all about typography</h3> <p dir="ltr"><strong>How personality of typeface and semantic affects how you communicate through words</strong></p> <p dir="ltr">“Oh, here is another big picture website…!” Hamburger menu? Check. Full screen...</p> </td> </tr> </tbody> </table> <p dir="ltr">The second example makes it clear that these are heading, subheading and extract, rather than three equally weighted paragraphs in various grammatical styles.</p> <p dir="ltr">It may seem that this is simple stuff that everyone does but awareness of relationships between content and style are critical in achieving a good responsive layout.</p> <p dir="ltr">Once style and content are tied together so they are ‘semantic’, layout can be a lot more flexible.</p> <p dir="ltr">This is the same principle as the relationship between HTML and CSS, <a href="https://econsultancy.com/blog/67625-making-your-html-accessible-for-the-visually-impaired/">which have separate functions but linked meaning</a>. HTML displays the ‘meaning’ of your content and CSS displays how it ‘looks’.</p> <p dir="ltr">Typography displays the ‘relationships’ of your content and layout changes how it ‘flows’ without changing the order.</p> <p dir="ltr">Having strong typographic principles allows you to move your content around more freely without breaking what it means.</p> <p dir="ltr">Good typography combined with clear prioritisation of mobile devices will allow you to be more flexible with layout at different screen sizes.</p> <p dir="ltr"><em>An example of bold typography from agency land.</em></p> <p dir="ltr"><a href="https://econsultancy.com/blog/67376-13-examples-of-websites-with-confident-typography/"><img src="https://assets.econsultancy.com/images/0007/0452/Screen_Shot_2016-01-06_at_09.11.42.png" alt="bold typography" width="615"></a></p> <h3 dir="ltr">Think accessibility and beyond</h3> <p dir="ltr">How can you ensure your typography is semantic and communicates what it supposed to do? I found the best way to achieve this is to think in terms of accessibility.</p> <p dir="ltr">Here are some stats around visual impairments you can consider.</p> <ul> <li>70% of UK population <a href="http://www.college-optometrists.org/en/utilities/document-summary.cfm/A60DE8E4-B6CF-49ED-8E0FE694FCF4B426">have mild vision impairment</a>.</li> <li> <a href="http://www.ageuk.org.uk/Documents/EN-GB/Factsheets/Later_Life_UK_factsheet.pdf?dtrk=true">17% (or 11m people) of the UK population is 65 or above</a> and many of them are tech savvy.</li> <li>3% (or 2 million people) of the UK population <a href="https://help.rnib.org.uk/help/newly-diagnosed-registration/registering-sight-loss/statistics">are living with sight loss</a>.</li> <li> <a href="http://www.colourblindawareness.org/colour-blindness/">4.5% has colour blindness</a>, and <a href="http://www.bdadyslexia.org.uk/">10% has dyslexia - 4% severely so</a>.</li> </ul> <p dir="ltr">To give you the sense of scale, current IE8 &amp; IE9 users in UK <a href="http://gs.statcounter.com/#desktop-browser_version_partially_combined-GB-monthly-201501-201601">are about 3.5% combined</a>.</p> <p dir="ltr">As you can see, these are not trivial numbers. And on top of making all these new users happy (and hopefully buying your products), by considering them, you can design a better responsive website.</p> <h4 dir="ltr">Semantic typography</h4> <p dir="ltr">The way to do this right is to think of semantic HTML. If it’s an article, call it an article. If it’s a button, call it a button.</p> <p dir="ltr">The same principle applies to typography, if it’s a heading, call it heading 1 &lt;h1&gt;, if it’s a subheading call it heading 2 &lt;h2&gt;, etc.</p> <p dir="ltr">It helps the browser to examine your content and really understand the position of each sentence.</p> <h4 dir="ltr">Think large and spacious</h4> <p dir="ltr">For those with minor visual impairment, having large text definitely helps. I consider 14pt average sized, as a guide. Having plenty of space that complements typography helps dyslexic audience, as well as creating a clean spacious design.</p> <p dir="ltr">With so many different devices, thinking about ‘the fold’ is pretty much replaced by mobile first, single priority order, which means you can add more space between elements; in fact, as much as you need to create the right context.</p> <h4 dir="ltr">Characterful typeface</h4> <p dir="ltr">Those with dyslexia may prefer having a font with distinct shapes for each letter. For example when d and b are just the mirror of each other, it’s hard to distinguish between them.</p> <p dir="ltr">Choose a font that reflects your brand well and works well for a dyslexic audience. Differentiate for yourself and for others.</p> <h4 dir="ltr">Make it work without colours</h4> <p dir="ltr">The principle “if it works without colours, it works anywhere”  is a good, plain old usability.</p> <p dir="ltr">Colours can be used to emphasise information and that can be a really powerful design element. However, if it works without colours, that is even more robust.</p> <h4 dir="ltr">Mind the contrast</h4> <p dir="ltr">Good contrast helps mild vision impairment and make things much easier to read for everyone.</p> <h4 dir="ltr">Consider background colour</h4> <p dir="ltr">Dyslexic audiences may find it easier to read when the page doesn’t have the strong glare of a white background. A softer tone is easier to read from and it will help add a personality to your design. Added bonus.</p> <p dir="ltr">You can see this in action at <a href="https://www.fortnumandmason.com/">Fortnum &amp; Mason's site</a>, where we’ve used soft cream tones to differentiate the atmosphere of the site and create a warm and ambient feeling.</p> <h3 dir="ltr">Be different</h3> <p dir="ltr">Taking all these factors into account, you will end up with a clear, accessible, responsive website. And it doesn’t have to look like a wider, bigger version of mobile layout.</p> <p dir="ltr">Push yourself to think differently - as long as you don’t forget the all important accessibility, your responsive website will work well and stand out from the crowd. Give it a go.</p> <p dir="ltr"><em>This blog was co-authored by Sari Griffiths, Chief Design Officer at Red Badger</em></p> tag:econsultancy.com,2008:BlogPost/67630 2016-03-16T12:07:00+00:00 2016-03-16T12:07:00+00:00 Forget AO.com, does Benefit Cosmetics offer the best ecommerce experience? Paul Rouke <ol> <li>Knowing and communicating your unique value proposition.</li> <li>Being truly, passionately customer centric.</li> <li>Harnessing social proof to make this central to the purchasing decision.</li> <li>Embracing <a href="http://www.slideshare.net/PRWD/iterative-versus-innovative-testing-exploiting-the-full-spectrum-of-testing-opportunities-paul-rouke-elite-camp-2015-final">the full spectrum of testing and optimisation</a>.</li> </ol> <p>Whenever a website is praised or wins an award, I always check to see what all the fuss is about.</p> <p>Using these four criteria as a starting point, you can begin to assess whether or not a website can truly deliver the goods.</p> <p>I am always curious to see who can join the illustrious list of true disrupter brands such as Uber and AirBnb, and as my previous post concluded, AO.com hs joined that list having disrupted the white goods industry.</p> <p>As such, when I read that Benefit Cosmetics (part of the multi-billion, multinational luxury goods conglomerate LVMH) was recently awarded '<a href="http://beauty20awards.com/who-won-the-beauty20-london-the-10-best-loved-beauty-brands-online/">Best Beauty Brand Online</a>’, I had to check it out for myself and see whether the brand is worthy of the title!</p> <p>So here goes. Will Benefit join the illustrious list of disruptive brands and cement itself as a trailblazer for the beauty industry? Let's find out.</p> <h3>1. Knowing and communicating your unique value proposition</h3> <h4><strong>Universal header area</strong></h4> <p>Landing on the homepage - or other primary landing pages - I’m extremely surprised to see that Benefit Cosmetics doesn’t dedicate <em>any</em> part of the primary header area to communicate anything tangible about its unique value proposition.</p> <p>Prime website real estate is just being neglected.</p> <p><img src="https://assets.econsultancy.com/images/0007/2800/Homepage_top_half.PNG" alt="" width="600" height="382"></p> <p>This online crime happens all the time.</p> <p>Brand X feels like it is big enough, credible enough and well known enough to not need to communicate why visitors should stick around and buy from them and not one of their competitors.</p> <p>As crowded as the beauty market is, you would think every brand would jump at a chance to communicate their USPs.</p> <p>It doesn’t matter how big or well-known you are, <strong>you should always be providing visitors with reasons to stay. </strong></p> <h4>On primary landing and decision making pages, under the navigation</h4> <p>Just as Benefit doesn’t communicate any form of its unique value proposition in the site-wide header, it doesn’t dedicate any area under or around its primary navigation for communicating what makes the brand and products special.</p> <p><img src="https://assets.econsultancy.com/images/0007/2818/bestsellers.PNG" alt="" width="601" height="339"></p> <p>As I shared in my AO.com critique, we all know about the fact that people need to see things a number of times before it typically “sinks in”.</p> <p>Never has this been more important for retailers than with your unique value and service proposition messages.</p> <p>In summary,<strong> Benefit Cosmetics is failing to communicate its value proposition clearly on key landing pages</strong><em>. </em></p> <h3>2. Being truly, passionately customer centric</h3> <h4><strong>Providing customer journeys that match different types of buyer behaviour</strong></h4> <p>The two ways to browse products on Benefit Cosmetics are to ‘shop by product’ and ‘shop by dilemma’.</p> <p>Though 'shop by dilemma' is an intriguing concept, only having two initial options to start a product search is limiting.</p> <p><img src="https://assets.econsultancy.com/images/0007/2819/product_page_top_half.PNG" alt="" width="600" height="306"></p> <p>What about shop by latest releases, shop by most popular, shop by highest rated?</p> <p>Even with a small product set compared to a retailer like AO.com, visitors will still benefit from being able to browse your range by other ways than just the type or category of product.</p> <h4><strong>Replicating the offline shopping experience</strong></h4> <p>Benefit Cosmetics is doing some really positive things in this area, not least actively encouraging visitors to visit a store.</p> <p>Often multichannel retailers are almost afraid of promoting their store finder as they want their online visitors to buy online.</p> <p>Truth is, bridging this gap (and encouraging the multichannel shopper) will in turn help create new customers who have the potential to become brand advocates.</p> <p>The terminology used in the primary navigation ‘Get Serviced’ followed by the headline ‘Pamper Yourself Pretty’ are excellent examples of using emotive language and speaking directly to the visitor.</p> <p>Creative and <a href="https://econsultancy.com/blog/65365-how-seven-ecommerce-brands-use-highly-persuasive-copywriting/">persuasive copywriting</a> is certainly an area that Benefit has prioritised as part of its online user experience and it shows.</p> <p><img src="https://assets.econsultancy.com/images/0007/2820/pamper_yourself.PNG" alt="" width="601" height="324"></p> <p>Store integration is intrinsic to the online experience.</p> <p>In the section ‘explore our services’, hovering over any of the services immediately presents you with a ‘Find a Store’ button – this <a href="https://econsultancy.com/blog/67345-23-creative-examples-of-hover-states-in-ecommerce-ux/">subtle hover state</a> change ensures visitors are drawn to what they want you to do.</p> <p><img src="https://assets.econsultancy.com/images/0007/2821/find_a_store.PNG" alt="" width="601" height="324"></p> <p>Benefit has another whole area dedicated to its customers with the ‘Wow your Brows’ page.</p> <p>From striking, emotive imagery and humanised language, to video content and specific advice tailored to women’s different styles of eyebrows, this is an extremely (and impressively) customer-centric page.</p> <p>I can't help but wonder why it doesn't promote this specialist area in the universal header!</p> <p><img src="https://assets.econsultancy.com/images/0007/2822/wowbrows.PNG" alt="" width="600" height="360"></p> <p>In addition, it dedicates a whole section of the homepage to helping fix ‘Beauty Dilemmas’.</p> <p>This once again showcases visually striking images that ooze brand personality (which is consistent throughout the whole site).</p> <p>In summary,<strong> when it comes to being truly, passionately customer centric, Benefit is doing a lot right.<br></strong></p> <h3>3. Harnessing social proof to make this central to the purchasing decision</h3> <h4>Customer satisfaction is one of the first things new visitors are presented with</h4> <p>First-time visitors to AO.com see a prominent customer satisfaction score on the homepage.</p> <p>When examining Benefit’s homepage, apart from a sub headline ‘What benebabes love most’ (which doesn’t provide you with any way to find out what or who are ‘benebabes’) and some very small hearts, there is a distinct lack of social proof used to demonstrate the popularity and advocacy of the Benefit customer base.</p> <p>Of course it has the standard social links in the footer, but visitors have absolutely no idea if Benefit has 500 or 500,000 Pinterest followers, or 250 or 250,000 Twitter followers, or 800 or 800,000 Facebook likes.</p> <p>I will let you guess the numbers behind the brand...</p> <p><img src="https://assets.econsultancy.com/images/0007/2823/footer.PNG" alt="" width="600" height="117"></p> <h4>Prominence of reviews</h4> <p>As mentioned, with the miniscule love hearts under product images it’s almost as if Benefit Cosmetics doesn't want visitors to think about or look at <a href="https://econsultancy.com/blog/9366-ecommerce-consumer-reviews-why-you-need-them-and-how-to-use-them/">the reviews</a>.</p> <p>It would be interesting to see if any research was made in this decision.</p> <p>Not only that, you have no idea whether products have seven or 700 reviews until you get to the product page.</p> <p>From my experience, I always advise retailers to clearly communicate how many reviews you have for a product prior to visitors going to that product page.</p> <p><img src="https://assets.econsultancy.com/images/0007/2824/most_loved.PNG" alt="" width="600" height="371"></p> <h4>Detailed, intelligent, informative, relevant customer reviews</h4> <p>Whilst the reviews are not prominent on the homepage, once you get on the product page Benefit has an exceptional rating and review system.</p> <p>It provides both fantastic depth of reviews and also puts the visitor in control of seeing the reviews most relevant to them.</p> <p>This shows how important Benefit take its customer reviews and the review system should be applauded, but ideally it should look to get this in front of the customer earlier in the journey.</p> <p><img src="https://assets.econsultancy.com/images/0007/2825/mascara_page.PNG" alt="" width="600" height="340"></p> <h3>4. Embracing the full spectrum of testing and optimisation</h3> <p>Unlike with AO.com (which is a brand I know truly embraces the full spectrum of optimisation), the very fact that Benefit doesn’t appear to have a testing tool installed says to me that this is one of the biggest opportunities for its next phase of growth.</p> <h4><strong>What do I mean by the full spectrum of testing and optimisation? </strong></h4> <p>Very few businesses embrace the full spectrum of opportunities on offer from A/B, multivariate and personalisation testing.</p> <p>Typically testing is quick and simple and focused on the low hanging fruit (what we at PRWD call <a href="https://econsultancy.com/blog/67245-why-mvt-doesn-t-live-up-to-the-hype-isn-t-worth-significant-investment/">iterative testing</a>).</p> <p>The biggest business growth opportunity many businesses are missing out on is the impact and growth that innovative and strategic testing can deliver for their business.</p> <h3>In conclusion...</h3> <p>In summary, Benefit Cosmetics is doing some fantastic things with its digital experience to convert visitors into customers.</p> <p>But as this quick evaluation has highlighted, there are a range of opportunities which can take it to the next level:</p> <ol> <li>Effectively communicating the unique value proposition to differentiate itself in the marketplace.</li> <li>Utilising the scale and passion of its social communities and customers to better effect.</li> <li>Most importantly, recognise that full spectrum optimisation represents the biggest growth lever.</li> </ol>