tag:econsultancy.com,2008:/topics/web-design Latest Design content from Econsultancy 2016-05-16T14:20:00+01:00 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> tag:econsultancy.com,2008:BlogPost/67625 2016-03-14T14:01:00+00:00 2016-03-14T14:01:00+00:00 Making your HTML accessible for the visually impaired James Hopkins <p>Put simply, the quality of the HTML you use to write your website is as important as how it looks visually. </p> <p>Sure, you’ll have been told that your “HTML must be semantic”, but what’s the underlying reason, and who does it affect if it isn’t? </p> <p>And, for that matter, what does that even mean?</p> <h3>What are semantics?</h3> <p>To understand why semantic HTML is so crucial, we first need to define what the term ‘semantics’ means in the context of a web application.</p> <p>In the general sense, semantics can <a href="https://en.wikipedia.org/wiki/Semantics">be described as</a>: </p> <blockquote> <p>...the branch of linguistics and logic concerned with meaning.</p> </blockquote> <p>When using a website, humans associate meaning with parts of the page through a variety of senses - visually (via the browser interface), aurally (if you use screen readers for example), or through touch (<a href="https://en.wikipedia.org/wiki/Refreshable_braille_display">Braille output devices</a>).</p> <h3>How do they apply to my website?</h3> <p>Since <a href="https://www.marcozehe.de/2014/02/27/why-screen-reader-detection-on-the-web-is-a-bad-thing/">you have visitors who use assistive technologies</a>, providing a quality interface for them to consume your content should be a default position. We will discuss how to do that in a later post. </p> <p>In terms of website interaction, two distinct interfaces are used to convey meaning to the user.</p> <p>The portion of your user demographic who use browsers such as Chrome or Firefox and rely solely on visual cues will be inferring the meaning of the page purely from its visual design language.</p> <p>However, users of some assistive devices such as screen readers will be reliant on the semantic nature of the HTML to deduce the same meaning.</p> <h3>Assistive devices and machine readability</h3> <p>Assistive devices can use a number of mechanisms that infer meaning from HTML. These include:</p> <ul> <li>A hierarchy-inferred representation of the page referred to as the <a href="http://www.w3.org/TR/2002/REC-UAAG10-20021217/guidelines#tech-provide-outline-view">document outline</a>. It relies upon <a href="https://www.w3.org/TR/2002/REC-UAAG10-20021217/guidelines#tech-provide-outline-view"> important structural elements</a> to build up a structure of the document that can be used for presenting the document in many different ways. <p>A typical example would be OSX <a href="http://a11yproject.com/posts/getting-started-with-voiceover/#the-web-item-rotor"> Voiceover’s ‘web rotor'</a> feature, which presents the user with a list of ‘landmarks’ within the document that allows quick navigation.</p> </li> </ul> <ul> <li>A high-level composition that includes an enriched document object model (DOM) representation, as well as objects from the user interface - referred to as the <a href="http://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/">accessibility tree</a>. <p>I highly recommend <a href="https://twitter.com/leoniewatson">Léonie Watson</a>'s article on <a href="http://www.smashingmagazine.com/2015/03/16/web-accessibility-with-accessibility-api/">Accessibility APIs</a> that goes into more depth on the subject.</p> </li> </ul> <h3>With great power, comes great responsibility</h3> <p>In essence, conveying the meaning of an application's composition regardless of device, has always been a fundamental concept of the web.</p> <p>A common pitfall which results in a website being inaccessible, arises from developers not understanding the distinction between describing meaning (the role of HTML), and describing the presentation of that meaning (the role of CSS).</p> <p>This separation between presentation and content is incredibly powerful, as demonstrated by <a href="http://www.csszengarden.com/">CSS Zen Garden</a> - a showcase of a variety of visual designs that use the same HTML structure.</p> <p>Conversely however, this also allows a fixed aesthetic to be typeset into virtually any number of HTML structures, incorporating varying levels of semantic quality.</p> <p>This can result in a disparity between what is visually displayed and what is conveyed to assistive devices.</p> <p>So next time you’re creating a new component, start by describing what you mean, not what you see.</p> <h3>How does this still work if HTML is so old?</h3> <p>The web sphere has evolved quickly due to technological enhancements, and rich internet applications that have many of the characteristics of desktop applications are commonplace nowadays.</p> <p>Since those user interfaces comprised more complex HTML structures, however, they became difficult for assistive technologies to infer their intent without using some level of heuristic analysis.</p> <p>For example, how can you signify to a screen reader that a portion of your page needs to be re-read due to some content having been dynamically updated?</p> <p>Or that a value you’ve typed in a form field is of an invalid format?</p> <p>Moreover, the HTML specifications aren’t flexible enough to include current user interface trends. The answer is mirroring the accessibility model of conventional desktop-based applications.</p> <h3>Copying the desktop application model</h3> <p>Modern operating systems include an accessibility API whose job it is to represent entities within a user interface and expose information about each to consumers such as assistive devices.</p> <p>For example, a menu button might be registered with a name ('Edit'), its state (is it pressed in or not?), and a role (a menu item).</p> <p>In order to construct this representation, <a href="http://whatsock.com/training/">accessibility APIs interface with an accessibility tree</a>, which is a composition of the current user interface.</p> <h3>Enter ARIA</h3> <p>Accessible Rich Internet Applications (ARIA) is a specification that deals with how to make dynamic applications more accessible.</p> <p>It <a href="https://www.w3.org/TR/wai-aria/introduction#co-evolution_header">co-exists alongside HTML and other markup languages</a> as an entirely separate standard, allowing it to evolve independently.</p> <p>Once previously impossible, we are now able to directly manipulate the accessibility tree through the use of a series of HTML attributes, resulting in a direct connection between HTML components and their equivalent types on the operating system.</p> <p>This allows for the potential of complete parity between the experiences of web and desktop applications.</p> <p>An <a href="https://gist.github.com/jameshopkins/0bcf1930e9f0d83c2a49">example demonstration</a> is available that demonstrates how easy it is to compose two HTML structures that could visually look the same.</p> <h3>Putting it to the test</h3> <p>To fully understand the importance of the subject, I’d implore you to choose a screen reader (<a href="http://www.apple.com/uk/accessibility/osx/voiceover/">Voiceover</a>, <a href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a>, <a href="http://www.nvaccess.org/">NVDA</a>) that is supported by your OS, and spend half an hour learning some basic navigation skills.</p> <p>After that, try reading your favourite website; if you’re a user who is able to use visual cues, then blindfold yourself and read a portion of the page, and compare the experience with the visual semantics.</p> <p>How do they relate to one another?</p> <h3>In summary...</h3> <p>When composing HTML structures, you must ensure that you describe its meaning using the correct HTML elements, and ARIA state and role flags where necessary.</p> <p>Then, and only then, should you pay attention to the presentation of those structures.</p> tag:econsultancy.com,2008:BlogPost/67591 2016-03-02T12:00:57+00:00 2016-03-02T12:00:57+00:00 Improving UX by simplifying web design: English National Opera Ben Davis <h3>Simplified navigation</h3> <p>Compare the navigation on the old <a href="https://www.eno.org/">ENO site</a> to the very much simplified nav on the new site, both shown below.</p> <p>The newly simplified menu means that to find certain pages, users must perform extra clicks.</p> <p>For example, the page about food and drink used to be accessible in one click from the header dropdown, but now takes two.</p> <p>Despite this extra clicking, it's obvious that the drastically simplified menu is a hell of a lot more manageable than the old one.</p> <p>Key pages are more prominent and there's less choice, which ultimately may have led to many users missing the most appropriate or important information.</p> <p><a href="https://econsultancy.com/blog/64246-what-s-the-point-of-user-centred-design/">Human-centred design</a> is all about presenting a manageable amount of information to the user.</p> <p>Substrakt, the agency behind the redesign, sum it up nicely.</p> <blockquote> <p>What happens on stage is just the tip of a huge iceberg, so when it comes to the website, lots of different things tend to jostle for prominence. Simple navigation is often the first casualty.</p> <p>One of the aims was to strip back the navigation and reduce content silos, angling the site towards the three main user needs (booking tickets, organising your visit and finding out more about opera).</p> </blockquote> <p>Longer pages with jump navigation allow the content room to breathe and don't overwhelm the user.</p> <p><strong><em>ENO old nav</em></strong></p> <p><img src="https://assets.econsultancy.com/images/0007/2556/eno_old_nav.gif" alt="eno old nav" width="615"></p> <p><strong><em>ENO new fixed and simplified side nav</em></strong></p> <p><img src="https://assets.econsultancy.com/images/0007/2557/eno_new_nav.gif" alt="eno new site nav" width="524" height="305"></p> <h3>Sticky 'book' buttons</h3> <p>Each opera event page includes a book button which sticks to the header when you scroll down on desktop.</p> <p>This <a href="https://econsultancy.com/blog/67561-what-are-sticky-ecommerce-elements/">sticky button</a> has been a hit with users, as Chris Unitt from One Further, who did some user testing on the project, notes.</p> <blockquote> <p>Substrakt had worked on the website for Birmingham Hippodrome, another of my clients, and we'd seen the effect of the sticky ‘book now’ button so that was a must.</p> <p>True enough, that button is being used around twice as much as the static one.</p> </blockquote> <p>This functionality isn't yet present on mobile, but will likely feature in future updates. Currently, the majority of ticket bookings are made on desktop.</p> <p><strong><em>Opera event page</em></strong></p> <h3><img src="https://assets.econsultancy.com/images/0007/2550/Screen_Shot_2016-03-01_at_16.18.52.png" alt="ENO event page" width="615"></h3> <h3> <img src="https://assets.econsultancy.com/images/0007/2549/Screen_Shot_2016-03-01_at_16.18.56.png" alt="ENO event page" width="615"> </h3> <h3>Content modelling</h3> <p>Content modelling has been used to better surface content, as Substrakt explains. </p> <blockquote> <p>Proper modelling of content (productions, performances, cast/creative, news) has made archiving and cross-linking more efficient/affective. The same content can be brought together in different ways across the site to serve different user needs.</p> <p>For instance, someone booking a ticket for The Magic Flute may want to see image galleries for the current production, whereas someone looking for general information about that opera might be interested in images from all stagings, current and past.</p> <p>..[This] means that a piece of content is less likely to get hidden away in a silo that corresponds to a department more than it does to any sensible user journey.</p> </blockquote> <h3>The quick buy</h3> <p>I expect to see more arts and entertainment websites introducing a 'Quick Buy' button.</p> <p>It lives at the top of the 'What's on' page and makes perfect sense for simplifying the journey to purchase for those reluctant to explore.</p> <p>Chris Unitt gives some context around this button, as well as the prominent 'Calendar' button at the top of the page.</p> <blockquote> <p>We carried out user testing on an early version of the site, using participants that mapped to the personas identified at the start of the project. It showed that the fundamentals were sound, but we found lots of small tweaks that would improve the user experience.</p> <p>For instance, on the What’s On page, the Calendar has been made more prominent and the Quick Buy dropdown was added for people who refuse to scroll or find it difficult to do (the fold is only dead to people who haven't done much user testing).</p> </blockquote> <p><strong><em>'Quick Buy' button on homepage</em></strong></p> <p><img src="https://assets.econsultancy.com/images/0007/2485/Screen_Shot_2016-02-29_at_15.35.23.png" alt="quick buy button" width="450"></p> <p><img src="https://assets.econsultancy.com/images/0007/2486/Screen_Shot_2016-02-29_at_15.35.43.png" alt="quick buy on ENO" width="300"></p> <h3>Mobile</h3> <p>The new simplified site with extra scrolling and reduced menu options makes perfect sense on mobile.</p> <p>As the screenshots below demonstrate, there's a clarity and focus to the content that improves both navigation and perception of the brand.</p> <p>Though mobile doesn't account for a significant proportion of bookings, there's no doubt this new approach stands ENO in greater stead as this user shift continues. </p> <p><img src="https://assets.econsultancy.com/images/0007/2504/IMG_2635.PNG" alt="eno on mobile" width="300">  <img src="https://assets.econsultancy.com/images/0007/2507/IMG_2636.PNG" alt="eno on mobile" width="300"></p> <p>For more on digital in the arts, why not read the following articles:</p> <ul> <li><a href="https://econsultancy.com/blog/67370-q-a-is-virtual-reality-the-future-of-the-royal-opera-house/">Q&amp;A: Is virtual reality the future of the Royal Opera House?</a></li> <li><a href="https://econsultancy.com/blog/63862-mobile-and-the-arts-where-to-start/">Mobile and the arts: where to start?</a></li> <li><a href="https://econsultancy.com/blog/64079-is-digital-technology-part-of-our-cultural-organisations/">Is digital technology part of our cultural organisations?</a></li> <li><a href="https://econsultancy.com/blog/63440-who-d-ve-thunk-it-colston-hall-a-delicious-flagship-website-for-the-arts/">Who'd've thunk it? Colston Hall: a delicious, flagship website for the arts</a></li> <li><a href="https://econsultancy.com/blog/63467-reflections-on-building-a-new-arts-website/">Reflections on building a new arts website</a></li> </ul> tag:econsultancy.com,2008:BlogPost/67578 2016-03-02T09:48:07+00:00 2016-03-02T09:48:07+00:00 Are freelance web designers really a dying breed? Patricio Robles <p>In <a href="http://www.sazzy.co.uk/the-elephant-in-the-room/">a blog post</a>, Sarah Parmenter described what she's seeing in the market:</p> <blockquote> <p>There’s very few freelancers that I know of, making the same living that they were making 3+ years ago. Conferences that were once a staple part of every web designers calendar have disappeared and no one from “the old days” can quite put their finger on why the web industry feels different.</p> <p>Work has dried up.</p> <p>'How can that be?' I hear you ask. 
'We have more devices than ever that need to be designed for – we’ve got more jobs than ever to do.' 
Or maybe you’re one of the lucky ones saying 'I’m busier than ever!' – judging by what I’m hearing at conferences, and what I’m seeing come in on my inbox. You’re lucky. You’re in the minority.</p> <p>Lots (and I mean lots) of people are struggling.</p> </blockquote> <p>Parmenter points to companies recruiting full-time staff, and even corralling non-design staffers into design roles. </p> <p>"What I’m hearing when I go out to speak at conferences, is that a large chunk of people at web design conferences haven’t been in the industry very long at all," she explained.</p> <p>"They actually never even chose the web industry as their profession. They’ve been sidelined into the web job from another non-web-position within the company." </p> <p>While this may be a part of the story, there are other factors that may be making life more difficult for freelance designers going forward...</p> <h3>1. Design is too important to outsource</h3> <p>More and more companies recognize that a great <a href="https://econsultancy.com/reports/customer-experience-statistics/">customer experience</a> is crucial to their success online.</p> <p>User experience is a part of customer experience, and a big one at that.</p> <p>From strategy all the way down to pixel pushing, many businesses are uncomfortable outsourcing design functions related to user experience because they are seen as being too critical to entrust to outside talent.</p> <p><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Dodo,_Natural_History_Museum,_London_2.JPG/1280px-Dodo,_Natural_History_Museum,_London_2.JPG"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Dodo,_Natural_History_Museum,_London_2.JPG/1280px-Dodo,_Natural_History_Museum,_London_2.JPG" alt="" width="800"></a></p> <h3>2. Specialization &amp; commoditization</h3> <p>Many freelance designers lack the specialized skills a growing number of companies demand in design roles.</p> <p>For example, many companies expect designers to come with a multitude of skills, such as the ability to implement functional prototypes. </p> <p>At the same time, traditional "web designers" who seek to earn a living creating Photoshop Design Files (PSD) and handing them off for implementation may find that there is less demand for their services.</p> <p>In short, designers without specialist skills will have to contend with the fact that they are often going to be seen as providers of a commodity service.</p> <h3>3. Cheap website templates</h3> <p>Thanks in part to the emergence of popular front-end frameworks like Bootstrap, there are thousands upon thousands of high-quality website templates that businesses can use to develop respectable websites and even web application front-ends on a budget. </p> <p>While many argue that such templates can't compete with a custom, handcrafted design, the reality is that cheap website templates have thrived because most consumers don't particularly care if the website they are using was based on a template or not.</p> <p>In most cases, they don't even know.</p> <h3>4. Competition from agencies and firms</h3> <p>When companies are willing to outsource design work, freelancers must contend with agencies and design shops that are frequently much more adept at playing the business development game.</p> <p>This is especially important on larger, more complex projects that may involve multiple design functions that companies are skeptical they'll be able to find in a single designer.</p> <h3><strong>So is the freelance designer soon to be a thing of the past?</strong></h3> <p>It's unlikely that the freelance designer will go away completely, and there are certainly freelance designers that continue to thrive despite the trends described above.</p> <p>But the design landscape has clearly changed and those looking to participate in a freelance capacity will likely need to adapt if they want to ensure there's a place for them in it. </p> <p><em>For more on this topic read our new <a href="https://econsultancy.com/reports/career-and-salary-survey-report-2016/">Career and Salary Survey Report 2016</a>. </em></p>