Jamie Geoghegan

61 Merrion Square South, <br />
Dublin 2, D02 EW25, Ireland

Main Nav

<section class="section section--body section--first">
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<p><em>When it comes to prototyping there is a range of different methods available to UX designers. From sketches on paper to fully interactive digital designs, it&#8217;s important to know which methods are suitable for different project types and the benefits they offer.</em></p>
<p>So, let&#8217;s take a look at different prototyping methods, their benefits, and how using smart collaboration they can significantly speed up the design process.</p>
<h4 id="9e38" class="graf graf--p graf-after--figure graf--trailing">Wait, what are Prototypes?</h4>
</div>
</div>
</section>
<p class="graf graf--p">A prototype is basically an early version of a product, app or website, designed for usability testing, collecting user feedback, and making fast design iterations based on this feedback.</p>
<p class="graf graf--p">The fidelity of a prototype refers to the visual appearance, the functionality, and amount of interactions included in the prototype. When choosing the correct fidelity prototype for a project its important to consider how this will affect time and cost, and the type of user feedback you want to collect.</p>
<h4 class="graf graf--h3">Why are Prototypes important?</h4>
<p class="graf graf--p">Prototyping is a key practice in the design process, it allows designers to explore their design ideas and gain empathy for the users of the product or website with the goal of improving the user experience.</p>
<p class="graf graf--p">Prototyping should be implemented early during the design stage to collect user feedback, highlight user flows and potential pain points early on. Changes made early in the design stage are much easier and cheaper to implement than during development which can cost significantly more to implement.</p>
<p>With the clients and stakeholders involved from the start, we can begin to ensure the design decisions are fully understood and approved by everyone, avoiding unnecessary delays and costs at development stage due to misunderstandings and lack of clarity.</p>
<blockquote><p>“If a picture is worth 1000 words, a prototype is worth 1000 meetings.”</p></blockquote>
<p><a href="https://uxdworld.com/2018/05/20/a-prototype-is-worth-1000-meetings/">Tom &amp; David Kelley</a></p>
<h2><img decoding="async" loading="lazy" class="aligncenter wp-image-9067 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2019/03/Paper-prototype-700x442.jpg" alt="prototyping" width="700" height="442" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2019/03/Paper-prototype-700x442.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/03/Paper-prototype-250x158.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/03/Paper-prototype-768x485.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/03/Paper-prototype-120x76.jpg 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/03/Paper-prototype-80x50.jpg 80w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/03/Paper-prototype.jpg 862w" sizes="(max-width: 700px) 100vw, 700px" /></h2>
<h4 class="graf graf--h3"><strong>Paper Prototyping</strong></h4>
<p class="graf graf--p"><a href="https://www.creativebloq.com/ux/how-prototype-websites-paper-31514246">Paper Prototyping</a> is a great low-cost way to iterate designs simply and quickly. The process typically involves sketching layouts and wireframes using device templates to create basic representations of screens for usability testing. Although primitive in appearance and <strong><em>not interactive</em></strong>, participants will begin to understand the user journeys, flows and expectations without the interactivity.</p>
<p>Paper prototyping is fast, flexible, and a great collaborative team process, allowing everyone to participate in the design process and focus on concepts and ideation. In a quick workshop, a team can accumulate a large number of design ideas and iterations. It can also be much easier to make decisions, give critical feedback, and erase or change parts of the design when working with sketches.</p>
<blockquote><p>&#8220;With a paper prototype, you can user test early design ideas at an extremely low cost. Doing so lets you fix usability problems before you waste money implementing something that doesn’t work.&#8221;</p></blockquote>
<p><a href="https://www.nngroup.com/articles/paper-prototyping/">Jakob Nielsen</a></p>
<h4 class="graf graf--h4">Paper Benefits</h4>
<ul class="postList">
<li class="graf graf--li">Easy to create with pen and paper</li>
<li class="graf graf--li">Quick to iterate</li>
<li class="graf graf--li">Low cost and affordable</li>
<li class="graf graf--li">Highly collaborative</li>
<li>Test user flows through simulating interactions</li>
</ul>
<h4></h4>
<h4>Making Prototypes Interactive</h4>
<p>Making designs into interactive prototypes can be a quick and easy process using top industry prototyping tools such as <a href="https://www.uxpin.com/prototyping">UX Pin</a>, <a href="https://marvelapp.com/features/prototyping">Marvel</a>, <a class="markup--anchor markup--li-anchor" href="https://proto.io/" target="_blank" rel="noopener noreferrer" data-href="https://proto.io/">Proto.io</a> or <a href="https://www.invisionapp.com/">InVision</a> to name a few, that allow you to simply import designs and start applying hotspots and transitions.</p>
<p>Here at Friday, we use InVision for its easy to use interface, rapid prototyping ability and library of predefined page transitions that allow us to create interactive prototypes for usability testings and iteration quickly. It&#8217;s also a cloud-based platform, allowing access and collaboration with the client from any machine anywhere.</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-9179 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-700x390.gif" alt="" width="700" height="390" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-700x390.gif 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-250x139.gif 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-768x428.gif 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-120x67.gif 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-80x45.gif 80w" sizes="(max-width: 700px) 100vw, 700px" />
<p><a href="https://support.invisionapp.com/hc/en-us/articles/115000634946">Via invisionapp.com</a></p>
<h4 class="graf graf--h3">Medium-Fidelity</h4>
<p class="graf graf--p">Medium-fidelity prototypes are interactive but with basic styling and limited functionality, typically just clickable hotspots that navigate the user through static pages. This method is highly valuable for identifying user flows and pain points, understanding user patterns, expectations and validating designs through basic interactions.</p>
<p class="graf graf--p">When user testing with medium-fidelity prototypes we can begin to target more insightful feedback, by creating tasks and scenarios for users to complete we can focus on better understanding how users are influenced by designs and how they interact with specific features.</p>
<h4 class="graf graf--h4">Medium-Fidelity Benefits</h4>
<ul class="postList">
<li class="graf graf--li">A basic functioning version of an interface</li>
<li class="graf graf--li">Validate designs through user testing</li>
<li class="graf graf--li">Understand user patterns and expectations</li>
<li class="graf graf--li">Allows clients to interact with the product at an early stage</li>
<li class="graf graf--li">User test with a wider audience</li>
<li class="graf graf--li">Target specific areas of website or app using tasks and scenarios</li>
</ul>
<h4></h4>
<h4 class="graf graf--h3">High-Fidelity</h4>
<p class="graf graf--p">A high-fidelity prototype has the appearance of the finished website or app as it would look when live. With much higher levels of detail, the prototype allows testing of UI elements, information hierarchy, layouts and interactions that are not achievable in low or medium-fidelity prototypes.</p>
<p class="graf graf--p">High-fidelity prototypes can generally be more accurate for collecting user testing data as users are able to interact more naturally with the site or app compared to low-fidelity prototypes. This might include testing specific areas or features such as navigation, button engagement, user flows and time to complete a task.</p>
<p class="graf graf--p">There are however downsides to hi-fi prototypes, the time required to produce and update designs at this level can be time consuming and make quick user testing feedback fixes hard to implement. User testing with high-fidelity prototypes can also potentially make participants feel less comfortable giving critical feedback due to the high-level look of the designs.</p>
<h4 class="graf graf--h4">Hi-Fidelity Benefits</h4>
<ul class="postList">
<li class="graf graf--li">An exact representation of the final website or app</li>
<li class="graf graf--li">Validate designs through user testing</li>
<li class="graf graf--li">More accurate for collecting user data</li>
<li>Understand user patterns and expectations</li>
<li>Target specific areas of website or app using tasks and scenarios</li>
<li>Can be used for presentation and pitches</li>
</ul>
<h4></h4>
<h4 class="graf graf--h3">Choosing the Prototype Fidelity for you</h4>
<p class="graf graf--p">When it comes to choosing the correct prototyping fidelity for your project there isn’t a &#8216;blanket solution&#8217; that suits everyone. It’s important to note that each type has its benefits and should be evaluated based on your needs.</p>
<p class="graf graf--p">If you are undertaking design sprints or just looking for a fast and collaborative solution, then low-fidelity would be best. If you already have designs and user feedback, medium-fidelity would be a good solution for validating your designs and identifying user flows and pain points through basic interaction. If your project has sufficient budget and a long time frame then you may look to evolve your prototype into high-fidelity for testing interactions, animations, or for presentations and pitches.</p>
<p>If you have a project we can help with and considering using prototyping as part of the process? <a href="https://friday.ie/contact/">Get in touch.</a></p>


Prototyping Methods for a better User Experience

<p class="p1">A website&#8217;s cookie notice is something that is often overlooked during the design process and tends to be a last minute quick design addition.</p>
<p>This can lead to them being too disruptive, poorly functioning, not in line with your website&#8217;s look and feel, or just plain ugly. But they don&#8217;t need to be.</p>
<p class="p1">By law, all websites owned in the EU or targeted towards EU citizens are expected to display a cookie notice, failing to comply risks enforcement action from regulators or even a fine.</p>
<blockquote>
<p class="p3" style="padding-left: 30px;">The Cookie Law is a piece of privacy legislation that requires websites to get consent from visitors to store or retrieve any information on a computer, smartphone or tablet.</p>
<p class="p3" style="padding-left: 30px;">It was designed to protect online privacy, by making consumers aware of how information about them is collected and used online, and <span class="s1">give them a choice</span> to allow it or not.</p>
<p class="p3" style="padding-left: 30px;"><a href="https://www.cookielaw.org/the-cookie-law/">www.cookielaw.org/the-cookie-law/</a></p>
</blockquote>
<p>GDPR brought this to the forefront in very unnecessary ways, with many websites clamoring to ensure that their users know that they &#8216;use cookies&#8217;.</p>
<p>Much of the point of GDPR may have been missed here, and it threw up some horrendously intrusive (and unnecessary) cookie notices. We&#8217;d go so far as to say that some of them have even ruined the website&#8217;s experience.</p>
<p class="p1">Here’s a look at some different approaches for implementing a Cookie Notice into your website.</p>
<h3>Header Notice</h3>
<p><strong>Klarna </strong>uses a prominent solid colour bar anchored to the top of the page with a simple but clear message and a bold button.</p>
<img decoding="async" loading="lazy" class="wp-image-4797 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Klarna-1024x578.jpg" alt="" width="1024" height="578" />
<p><strong>Nando&#8217;s</strong> also kept the message and button minimal, the cookie notice is incorporated into the page by using red to match the logo making it feel less intrusive.</p>
<img decoding="async" loading="lazy" class="wp-image-4798 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Nandos-1024x578.jpg" alt="" width="1024" height="578" />
<p><strong>Filippobello </strong>delivers a text-heavy message set in an imposing black bar that commands the user&#8217;s attention immediately when they land on the site.</p>
<img decoding="async" loading="lazy" class="wp-image-4799 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Filippobello-1024x578.jpg" alt="" width="1024" height="578" />
<h3>Footer Notice</h3>
<p><strong>Adidas </strong>have used a transparent footer bar and lots of text. The &#8216;close&#8217; button stands out against the small font size of the text, most users will simply close the notice without reading the copy.</p>
<img decoding="async" loading="lazy" class="alignnone wp-image-6869 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Adidas.jpg" alt="" width="1434" height="809" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Adidas.jpg 1434w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Adidas-250x141.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Adidas-768x433.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Adidas-700x395.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Adidas-120x68.jpg 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Adidas-80x45.jpg 80w" sizes="(max-width: 1434px) 100vw, 1434px" />
<p><strong>Selfridges </strong>has a bold and bright notice splashed across the footer of its home page, with a light-hearted cookies reference to their food hall.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Selfridges.jpg"><img decoding="async" loading="lazy" class="wp-image-4802 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Selfridges-1024x578.jpg" alt="" width="1024" height="578" /></a>
<p><strong>Hem </strong>have opted for a minimal footer notice that blends in with the colour scheme of the site, the copy is short and simple.</p>
<img decoding="async" loading="lazy" width="1434" height="809" class="alignnone size-full wp-image-6864" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Hem.jpg" alt="" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Hem.jpg 1434w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Hem-250x141.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Hem-768x433.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Hem-700x395.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Hem-120x68.jpg 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2018/07/Hem-80x45.jpg 80w" sizes="(max-width: 1434px) 100vw, 1434px" />
<h3>Floating Box Notice</h3>
<p><strong>Puma</strong>, the user is greeted with a pop-up notice box that requires immediate action, the user can either agree or just close the panel.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Puma.jpg"><img decoding="async" loading="lazy" class="wp-image-4804 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Puma-1024x578.jpg" alt="" width="1024" height="578" /></a>
<p><strong>QCTerme </strong>uses a subtle hover box that doesn&#8217;t have a close button but allows the user to either accept or view the cookie policy.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/QCTerme.jpg"><img decoding="async" loading="lazy" class="wp-image-4806 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/QCTerme-1024x578.jpg" alt="" width="1024" height="578" /></a><strong>Interword </strong>uses a similar approach to QCTerme but has incorporated the style of the box into the page design.</p>
<p><a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Interword.jpg"><img decoding="async" loading="lazy" class="wp-image-4807 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Interword-1024x578.jpg" alt="" width="1024" height="578" /></a>
<h3>Subtle Notice</h3>
<p><strong>Buzzfeed&#8217;s </strong>cookie notice commands no attention and is easy to miss set against the white background of the site. Its been given no importance on the page, it&#8217;s simply added as a box-ticking exercise to meet EU Cookie Laws.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Buzzfeed.jpg"><img decoding="async" loading="lazy" class="wp-image-4809 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Buzzfeed-1024x578.jpg" alt="" width="1024" height="578" /></a>
<p><strong>Linkedin&#8217;s </strong>cookie policy is very easy to miss, its incorporated into the sign-up window above the &#8216;Join now&#8217; button. When the user clicks join now they also agree to the cookie policy.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/LinkedIn.jpg"><img decoding="async" loading="lazy" class="wp-image-4810 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/LinkedIn-1024x578.jpg" alt="" width="1024" height="578" /></a>
<p><strong>Apple&#8217;s</strong> implementation is very subtle, a simple hyperlink in the footer.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Apple.jpg"><img decoding="async" loading="lazy" class="wp-image-4812 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Apple-1024x578.jpg" alt="" width="1024" height="578" /></a>
<h3>In-page Notice</h3>
<p><strong>Barclaycard </strong>has interestingly incorporated the cookie notice into the hero image below the navigation. The notice is in a prominent location but is blended into the hero image using a matching colour bar.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Barclaycard.jpg"><img decoding="async" loading="lazy" class="wp-image-4813 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Barclaycard-1024x578.jpg" alt="" width="1024" height="578" /></a>
<p><strong>Guinness </strong>uses a similar tactic to LinkedIn, they get the user to consent to cookies at the same time as logging in, on the Guinness website it&#8217;s when the user enters their ID.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Guinness.jpg"><img decoding="async" loading="lazy" class="wp-image-4814 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Guinness-1024x578.jpg" alt="" width="1024" height="578" /></a>
<p><strong>Zurich </strong>has done similar to Barclaycard by placing the notice below the navigation but kept the message simple and placed it within a bold blue horizontal bar.</p>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Zurich.jpg"><img decoding="async" loading="lazy" class="size-large wp-image-4815 alignleft" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2018/03/Zurich-1024x578.jpg" alt="" width="1024" height="578" /></a>
<p>Summary&#8230; are cookie notices a necessary evil?</p>
<p>Necessary? Yes. Evil? No, they don&#8217;t need to be.</p>
<p>With the right considerations, they can become a natural part of the website&#8217;s design and they don&#8217;t need to distract from the overall experience.</p>


Design Trends for Cookie Policy Notices

<blockquote><p><em>In this ever-changing digital world, creating websites, apps and content with a slick user experience is a constant challenge.</em></p></blockquote>
<p class="graf graf--p">Yes, in our ever-changing world of smartphones, laptops and other devices, creating a beautiful user experience that works seamlessly in the latest web browsers, whilst also functioning in older ones is a constant challenge.</p>
<p class="graf graf--p">A lot has been discussed about this topic, but, in short, &#8216;<strong>Graceful Degradation</strong>&#8216; and &#8216;<strong>Progressive Enhancement</strong>&#8216; both target the same goal in the user experience; they just approach that goal (literally) from opposite directions.</p>
<p class="graf graf--p">This is a nice quick post which explains the two and they each can help deliver smarter UX:</p>
<h2 class="graf graf--h3">Graceful Degradation</h2>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/12/Graceful-Degredation-100.jpg"><img decoding="async" loading="lazy" class="wp-image-3163 size-large alignleft" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/12/Graceful-Degredation-100-1024x480.jpg" alt="" width="1024" height="480" /></a>
<p class="graf graf--p">The graceful degradation approach begins with a website at its largest size, using the full functionality of modern browsers, and then removes features as the site shrinks responsively for smaller, older browsers and devices.</p>
<p class="graf graf--p">The aim of this process is to allow access to the basic content of the site whilst ensuring an optimal user experience on less capable devices.</p>
<p class="graf graf--p">Accessibility is key, ensuring all users can view your website regardless of what browser they use, the more devices and screen sizes your website works on the larger user reach it will have.</p>
<blockquote><p><strong><em>&#8220;&#8230;within the next few years, <a class="markup--anchor markup--p-anchor" href="http://thedigitalgrowthlab.com/connecting-the-next-billion-internet-users" target="_blank" rel="noopener" data-href="http://thedigitalgrowthlab.com/connecting-the-next-billion-internet-users">over 4 billion people</a> will be connected to the internet via mobile and smartphone devices. Blimey.&#8221;</em></strong></p></blockquote>
<h2 class="graf graf--h3">Progressive Enhancement</h2>
<a href="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/12/Progressive-Enhancement-100.jpg"><img decoding="async" loading="lazy" class="alignleft wp-image-3164 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/12/Progressive-Enhancement-100-1024x480.jpg" alt="" width="1024" height="480" /></a>
<p class="graf graf--p">The progressive enhancement approach builds upwards, by starting with a base level of features that work on all browsers, then adding more advanced features and functionality supported by newer browsers.</p>
<h2 class="graf graf--h3">Choosing One</h2>
<p class="graf graf--p">As a designer, wireframing and designing using the progressive enhancement method allows you to highlight the most important content that needs to be accessible on all browsers and builds a clear vision of how the site should look on all size devices.</p>
<p class="graf graf--p">Granted, this might not be the correct method for every job since every client’s goals and needs are different.</p>
<p class="graf graf--p">But remember, <a class="markup--anchor markup--p-anchor" href="http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide" target="_blank" rel="noopener" data-href="http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide">Mobile and Tablet internet usage</a> exceeded Desktop for the first time worldwide in October 2016, so there&#8217;s a strong case for it to be considered the more relevant method.</p>
<p class="graf graf--p">It&#8217;s also expected that, within the next few years, <a class="markup--anchor markup--p-anchor" href="http://thedigitalgrowthlab.com/connecting-the-next-billion-internet-users" target="_blank" rel="noopener" data-href="http://thedigitalgrowthlab.com/connecting-the-next-billion-internet-users">over 4 billion people</a> will be connected to the internet via mobile and smartphone devices. Blimey.</p>
<h2 class="graf graf--h3">Summary</h2>
<p>So:</p>
<ul>
<li><strong>Graceful Degradation</strong> &#8211; Designing with a baseline that takes advantage of the functionality available in modern web browsers, and then removes features as necessary, ensuring a functional solution for older browsers.</li>
<li><strong>Progressive Enhancement</strong> &#8211; Designing from a baseline of basic features supported by all web browsers, then adding more features as and when newer browsers support those features.</li>
</ul>
<p>&nbsp;</p>
<p style="padding-left: 30px;">Jamie Geoghan is a Senior UX and Digital Designer at Friday. He&#8217;s from London and he&#8217;s a proud Millwall fan.</p>
<p style="padding-left: 30px;"><em>Catch more of Jamie&#8217;s posts <a href="https://friday.ie/blog/author/jamie/">here</a>.</em></p>


Intelligent UX: Graceful Degradation vs Progressive Enhancement

<p class="graf graf--p"><em>While shopping online recently I found myself on the <a href="https://www.kilkennyshop.com/">Kilkenny Shop</a> website. I decided to make a list of 8 UX design improvements that I think could help enhance their customer experience.</em></p>
<p class="graf graf--p">So this isn&#8217;t a website roast. Granted, the Kilkenny Shop hasn&#8217;t got the experience you&#8217;ll find at some of the biggest eTailers such as ASOS.com or Amazon, but it does have a solid content structure and it&#8217;s easy to navigate.</p>
<h3 class="graf graf--h4" style="text-align: center;"><strong class="markup--strong markup--h4-strong">1. Increase Column Width</strong></h3>
<p class="graf graf--p">Show me more! First off, the 3 column grid is narrow and accommodates some lovely sized products shots, but it&#8217;s restricting the number of products I can see, especially on smaller screen sizes.</p>
<p class="graf graf--p">Since there is no side bar filter, the content could be expanded to 4 columns, while adding the ability to switch the grid size between more or less products on show in the results bar, <a class="markup--anchor markup--p-anchor" href="http://www.asos.com/?ic=1" target="_blank" rel="noopener noreferrer" data-href="http://www.asos.com/?ic=1">ASOS</a> have implemented this perfectly.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2945 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Shop-example.png" alt="" width="1280" height="1185" /></p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2946 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/ASOS-example.png" alt="" width="1280" height="1185" /></p>
<h3 class="graf graf--h4" style="text-align: center;"><strong class="markup--strong markup--h4-strong">2. Filter by Brand</strong></h3>
<p class="graf graf--p">Since each department contains multiple brands with up to 100 product results, it&#8217;s not enough to just have a ‘sort by name’ filter. The user needs the ability to filter by brand. This addition would greatly improve the speed it takes users to narrow down their search and buy.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2947 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Name-filter.png" alt="" width="1280" height="290" /></p>
<h3 class="graf graf--h4" style="text-align: center;"><strong class="markup--strong markup--h4-strong">3. Clearer Information</strong></h3>
<p class="graf graf--p">Important information that should be clear and stand out on this results page are the product name, price, and the ‘buy now’ button. Although the button is prominent, it’s completely overpowering the more important element &#8211; the price.</p>
<p class="graf graf--p">The price is actually the smallest detail and is almost completely lost &#8211; it should be much clearer for the user. An easy fix.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2948 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Samll-price.png" alt="" width="1280" height="450" /></p>
<h3 class="graf graf--h4" style="text-align: center;"><strong class="markup--strong markup--h4-strong">4. Categorise by Alphabetical Order</strong></h3>
<p class="graf graf--p">Pet hate of mine this one &#8211; when the product navigation isn’t categorised alphabetically.</p>
<p class="graf graf--p">When you have a large inventory of product types this is even more important. The faster people can find what they want, the quicker you can move them through to the checkout process.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2949 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/A.png" alt="" width="1099" height="508" /></p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2950 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Alphabetical.png" alt="" width="1099" height="508" /></p>
<h3 class="graf graf--h4" style="text-align: center;"><strong class="markup--strong markup--h4-strong">5. ‘Buy Now’ Button Redirect</strong></h3>
<p class="graf graf--p">This is very annoying! Yes I added the product to my cart, but I want to keep shopping! Stop dragging me to the checkout, I&#8217;ll pay when I’m ready.</p>
<p class="graf graf--p">This button should be called ‘Add to Basket’, leaving the user satisfied that it&#8217;s in the basket and free to continue shopping.</p>
<p class="graf graf--p">It&#8217;s a frustrating process as a user, having to keep clicking ‘continue shopping’ after being rushed to the checkout page, and as the seller you risk missing an opportunity to sell more.</p>
<p class="graf graf--p">Let the user shop till their hearts content and they’ll decide when its time to checkout.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2952 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Redirect-to-basket.png" alt="" width="1280" height="594" /></p>
<h3 class="graf graf--h4" style="text-align: center;"><strong class="markup--strong markup--h4-strong">6. Better Content Visibility</strong></h3>
<p class="graf graf--p">Hidden away in the thin header bar is the cart and promotion message, granted its where you would expect to find it on the page, but it needs to be bigger and clearer.</p>
<p class="graf graf--p">Users will become impatient if they have to stop and think to find links as this slows buyers down.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2953 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Small-header-bar.png" alt="" width="1280" height="192" /></p>
<p class="graf graf--p">Firstly, the users basket is squashed between the Sign in, Wishlist and Currency buttons, it doesn’t stand out at all and the white text against the grey bar can be difficult to read, especially for visually impaired users.</p>
<p class="graf graf--p">The basket could be swapped with the social media icons as they have been give slightly more prominence they need.</p>
<p class="graf graf--p">Additionally, a nice feature that could also be added is a colour change or a dropdown widget to the basket text, making it absolutely clear when the basket area has updated when the user clicks ‘buy now’, let them know they&#8217;ve “Successfully added” a product.</p>
<p class="graf graf--p">Secondly, why is the Free Delivery promotion so small? This could be largely improved by adding colour or even pulling it out in a slightly larger bar that sits below the navigation, you are trying to encourage the user to spend more money, shout it! See how <a class="markup--anchor markup--p-anchor" href="https://www.size.co.uk/" target="_blank" rel="noopener noreferrer" data-href="https://www.size.co.uk/">Size</a> do this below.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2954 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Promo-bar.png" alt="" width="1280" height="835" /></p>
<h3 class="graf graf--h4" style="text-align: center;"><strong class="markup--strong markup--h4-strong">7. Better Page Structure</strong></h3>
<p class="graf graf--p">The product page is a just mass of unstructured content and is suffering from information overload.</p>
<p class="graf graf--p">The page has a good balance of product information and caters for the quick shopper and also the shopper who needs every last product detail with other options, it just needs a better structure.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2955 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Product-example.png" alt="" width="1280" height="1185" /></p>
<p class="graf graf--p">The first thing you notice is that there is no space between the top navigation bar and the product area. This would be a perfect place to pull out the ‘Free Delivery’ promotion, creating a clear break area in the content whilst giving the user that added incentive to add more to their basket.</p>
<p class="graf graf--p">Make the photo bigger. Users love large photos with the ability to zoom in, it&#8217;s the closest they can get without physically holding the product. Bigger, better product images can increase conversions.</p>
<p class="graf graf--p">The ‘You may also like’ section has also been given too much prominence on this page and can be relegated below the product information or the fold, it automatically rotates through products and is just a distraction.</p>
<h4 class="graf graf--h4"></h4>
<h3 class="graf graf--h4" style="text-align: center;"><strong class="markup--strong markup--h4-strong">8. Pop-ups</strong></h3>
<p class="graf graf--p">Pop-ups on websites can be particularly annoying.</p>
<p class="graf graf--p">This pop out window appears when you are inactive on the site for a while. The content isn&#8217;t relative to anything I&#8217;ve recently clicked on or based on anything I&#8217;ve searched on the site, so its irrelevant to me and there is no ‘don’t show this again’ button.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2956 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/Pop-out-example.png" alt="" width="1280" height="1185" /></p>
<h3 style="text-align: center;"><strong class="markup--strong markup--h3-strong">The Solution</strong></h3>
<p class="graf graf--p">So, lets see what all this looks like when put into practice. I&#8217;ve quickly mocked up some new layouts below.</p>
<p class="graf graf--p">This one shows the department landing page reworked using the existing content with the additional filters.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2957 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/NEW-Shop.png" alt="" width="1280" height="1473" /></p>
<p class="graf graf--p">The next design shows an improved purchase process, the product being added to the basket is clear, and the user remains on the shop page offering a more seamless shopping experience.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2958 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/NEW-Shop-added-to-basket.png" alt="" width="1280" height="1473" /></p>
<p class="graf graf--p">The final visual shows the revised product page, the layout has been re-structured to improve the reading order and moving secondary content below the page fold.</p>
<p class="graf graf--p"><img decoding="async" loading="lazy" class="size-full wp-image-2959 aligncenter" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/06/NEW-Product-page.png" alt="" width="1280" height="1473" /></p>


8 UX Design Improvements for the Kilkenny Shop

<p><em>Getting your organisation&#8217;s tone of voice and personality across online is vital to achieving that personal and friendly experience.</em></p>
<p>A customer&#8217;s first impression of a business most often comes through their website or social media channels.</p>
<p id="9157" class="graf graf--p graf-after--p">Creating your organisation&#8217;s tone of voice starts with your target audiences. Once you understand your customer or market you will maximise your sales proposition.</p>
<p class="graf graf--p graf-after--p">Who are you selling to or trying to appeal to? Why should they come to you for your service or buy your product? What do you do better than the other guys, your competition?</p>
<p id="56d6" class="graf graf--p graf-after--p">I&#8217;ve taken a look at a selection of brands and businesses that have mastered their tone of voice online and connect with their audiences on a personal level and in a consistent way.</p>
<h3>AYR</h3>
<p><a href="https://www.ayr.com/" target="_blank" rel="nofollow noopener"><strong>Ayr</strong></a> are a women’s fashion brand who have established a fun and conversational personality online with their cool, informal language.</p>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-2609" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2017/01/1-KfL3Ne0VK3NrHZAtIc2aKA.jpeg" alt="Brand personality online" width="1400" height="791" />
<div class="postArticle-content js-postField js-notesSource js-trackedPost" data-post-id="815f86af8444" data-source="post_page" data-tracking-context="postPage" data-scroll="native">
<section class="section section--body section--first section--last">
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<p id="6ead" class="graf graf--p graf-after--figure">AYR’s cool, laid back tone of voice carries through onto their social media. They communicate with their followers using a casual writing style, which adds personality and value to what they&#8217;re selling.</p>
<figure id="f9c3" class="graf graf--figure graf-after--p">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*1goh6ar_PHT3ZAVR1ipm9w.jpeg" data-width="1440" data-height="814" data-action="zoom" data-action-value="1*1goh6ar_PHT3ZAVR1ipm9w.jpeg" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="40"></canvas><img decoding="async" loading="lazy" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*1goh6ar_PHT3ZAVR1ipm9w.jpeg" alt="Brand personality online " width="800" height="452" data-src="https://cdn-images-1.medium.com/max/800/1*1goh6ar_PHT3ZAVR1ipm9w.jpeg" /></div>
</div>
</figure>
<h2 class="graf graf--p graf-after--h2" style="text-align: center;">DOG STUDIO</h2>
<p id="ad3f" class="graf graf--p graf-after--p"><a class="markup--anchor markup--p-anchor" href="http://www.dogstudio.be/" target="_blank" rel="nofollow noopener" data-href="https://medium.com/r/?url=http%3A%2F%2Fwww.dogstudio.be%2F"><strong class="markup--strong markup--p-strong">Dog Studio</strong></a> aren’t shy when it comes to conveying their mission statement and messages online! The Belgium based digital agency has adopted an off-the-cuff tone of voice that feels like you are talking to a friend. They don’t take themselves too seriously with the odd expletive thrown in for shock value.</p>
<figure id="879c" class="graf graf--figure graf-after--p">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*LfHwTf6oUOA2R6b3aYcY3A.jpeg" data-width="1440" data-height="779" data-action="zoom" data-action-value="1*LfHwTf6oUOA2R6b3aYcY3A.jpeg" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="40"></canvas><img decoding="async" loading="lazy" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*LfHwTf6oUOA2R6b3aYcY3A.jpeg" alt="Brand personality online " width="800" height="432" data-src="https://cdn-images-1.medium.com/max/800/1*LfHwTf6oUOA2R6b3aYcY3A.jpeg" /></div>
</div>
</figure>
<p id="4047" class="graf graf--p graf-after--figure">Their ‘ballsy’ lighthearted personality goes further in their ‘Join the team’ section where they communicate with the user in a very down to earth manner:</p>
<blockquote>
<p class="graf graf--p graf-after--figure"><em>We already crave you crazy motherf*****&#8230;</em></p>
</blockquote>
<figure id="58dc" class="graf graf--figure graf-after--p">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*n_Z44uQS4SEb8mDxpujMhA.jpeg" data-width="1440" data-height="560" data-action="zoom" data-action-value="1*n_Z44uQS4SEb8mDxpujMhA.jpeg" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="27"></canvas><img decoding="async" loading="lazy" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*n_Z44uQS4SEb8mDxpujMhA.jpeg" alt="Brand personality online " width="800" height="311" data-src="https://cdn-images-1.medium.com/max/800/1*n_Z44uQS4SEb8mDxpujMhA.jpeg" /></div>
</div>
</figure>
<p id="fecf" class="graf graf--p graf-after--figure">Their contact page features a series of <em>‘drop us a line’</em> messages that appear as if someone is typing them to you as you watch. Staying true to their personality they feature some hilarious and tongue in cheek lines.</p>
<figure id="1a93" class="graf graf--figure graf-after--p">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*w6GcNBe-ugYNK0WanZF0oA.jpeg" data-width="1440" data-height="560" data-action="zoom" data-action-value="1*w6GcNBe-ugYNK0WanZF0oA.jpeg" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="27"></canvas><img decoding="async" loading="lazy" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*w6GcNBe-ugYNK0WanZF0oA.jpeg" alt="Brand personality online " width="826" height="321" data-src="https://cdn-images-1.medium.com/max/800/1*w6GcNBe-ugYNK0WanZF0oA.jpeg" /></div>
</div>
</figure>
<p id="747c" class="graf graf--p graf-after--figure">Interestingly, they don’t carry this tone of voice into their social media posts where they have the most interactions with followers.</p>
<h2 class="graf graf--p graf-after--h2" style="text-align: center;">PADDY POWER</h2>
<p id="d563" class="graf graf--p graf-after--p"><a class="markup--anchor markup--p-anchor" href="http://www.paddypower.com/bet" target="_blank" rel="nofollow noopener" data-href="https://medium.com/r/?url=http%3A%2F%2Fwww.paddypower.com%2Fbet"><strong class="markup--strong markup--p-strong">Paddy Power</strong></a><strong class="markup--strong markup--p-strong">,</strong> the Irish bookmaker’s have set themselves apart from the rest of the crowd with their distinctly laddish, cheeky and witty personality and tone of voice. This success is down to the company knowing exactly who its target audience is, young men.</p>
<figure id="d9fd" class="graf graf--figure graf-after--p">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*cY58n1wK26yKTLnpTnH65g.jpeg" data-width="1440" data-height="650" data-action="zoom" data-action-value="1*cY58n1wK26yKTLnpTnH65g.jpeg" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="32"></canvas><img decoding="async" loading="lazy" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*cY58n1wK26yKTLnpTnH65g.jpeg" alt="Brand personality online " width="862" height="389" data-src="https://cdn-images-1.medium.com/max/800/1*cY58n1wK26yKTLnpTnH65g.jpeg" /></div>
</div>
</figure>
<p id="ac87" class="graf graf--p graf-after--figure">They keep their punters entertained with topical, ballsy, and controversial content to keep them engaged and coming back for more. Paddy Power’s global marketing director, Christian Woolfenden was quoted saying</p>
<blockquote>
<p class="graf graf--p graf-after--figure">“…if we don’t get complaints we’re quite disappointed.”</p>
</blockquote>
<figure id="1094" class="graf graf--figure graf-after--p">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*lefSMOC2oN3k6dlTnG1idw.jpeg" data-width="2143" data-height="560" data-action="zoom" data-action-value="1*lefSMOC2oN3k6dlTnG1idw.jpeg" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="17"></canvas><img decoding="async" loading="lazy" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*lefSMOC2oN3k6dlTnG1idw.jpeg" alt="Brand personality online " width="800" height="209" data-src="https://cdn-images-1.medium.com/max/800/1*lefSMOC2oN3k6dlTnG1idw.jpeg" /></div>
</div>
</figure>
<p id="10b4" class="graf graf--p graf-after--figure">True to form, their social media is just as controversial and provoking. This tweet below in response to journalist and TV personality Piers Morgan.</p>
<figure id="fa76" class="graf graf--figure graf-after--p">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*cH4uTSyX2_MGgHNiTiqeSw.jpeg" data-width="634" data-height="471" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="55"></canvas><img decoding="async" loading="lazy" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*cH4uTSyX2_MGgHNiTiqeSw.jpeg" alt="Brand personality online " width="634" height="471" data-src="https://cdn-images-1.medium.com/max/800/1*cH4uTSyX2_MGgHNiTiqeSw.jpeg" /></div>
</div>
</figure>
<p id="1ca7" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">So, who are you?</strong></p>
<p id="7be0" class="graf graf--p graf-after--p">Whatever type of brand or business you have, the important thing is that it has its own personality that is recognisable and memorable so that people respond to it. Once you’ve established your brand’s tone of voice, keep it consistent from your website through to your social media and even your emails, they should all follow the same tone.</p>
<p id="52ba" class="graf graf--p graf-after--p graf--last">Does your website need a makeover or an injection of brand personality? <a class="markup--anchor markup--p-anchor" href="https://friday.ie/contact/">Give us a shout</a>, we’d love to help.</p>
</div>
</div>
</section>
</div>


Brand Personality Online

<p><strong><em>Should you use a hamburger menu on desktop screens? Is it clean design or bad UX? Let&#8217;s find out.</em></strong></p>
<p>Welcome to the first in a series of posts in a showdown of design trends vs usability. The idea is to look at some common web design trends and identify whether they have a negative or positive impact on usability and by extension <strong><a href="https://friday.ie/expertise/user-experience/ux-design-dublin/">user experience</a></strong>.</p>
<p>First up is a navigation design trend that first appeared about five years ago and was popularised by Facebook&#8217;s mobile app. The 3 lined menu or as its more commonly known; the hamburger menu.</p>
<p>Now as I&#8217;m sure you are aware, it appears in pretty much every responsive website (mobile) and a significant proportion of mobile apps.</p>
<p>The benefits of a hamburger menu are obvious in a mobile environment where having a full navigation menu is simply unpractical. What&#8217;s intriguing is its evolution from a mobile usability best practice to a common form of desktop navigation.</p>
<p>This is the focus of this post. I will explore the arguments for and against using hamburger menus on a desktop website and more importantly perform my own research through user testing using <strong><a href="https://usabilityhub.com/">UsabilityHub</a>.</strong></p>
<h3>Previous Research &amp; Commentary</h3>
<p>Admittedly, the topic of using hamburger menus on desktop has been widely debated among designers and UX experts. Most of the arguments come down to clean, minimalist design vs usability.</p>
<h3>Arguments for:</h3>
<p><a href="http://usabilitygeek.com/making-case-for-desktop-hamburger-menu/" target="_blank" rel="noopener">UsabilityGeek</a> cite one <a href="https://sivers.org/jam" target="_blank" rel="noopener">study&#8217;s</a><strong> </strong>findings that when users are given too many options, they are 10 times less likely to act. Thus by having a strong CTA within the hamburger menu it helps to point users down the conversion path:</p>
<blockquote><p>By keeping the navigation simple, eliminating extraneous options and providing a clear objective, you are pointing your users in the right direction toward making a conversion.</p></blockquote>
<p>Hamburger menus also fit in well with clean, minimalist design. When paired with strong visual elements and a clear call to action it can help users perform desired actions.</p>
<p>Also, by having the main navigation hidden behind a hamburger menu it allows designers to be more creative with white space, large images and direction.</p>
<p>I wrote a previous article on <strong>designing for conversions</strong> where I mention some key design principles such as direction and whitespace that when used effectively can increase conversions. Using a hamburger menu allows you to utilise the principles more effectively.</p>
<h3>Arguments Against:</h3>
<p>The majority of research and commentary against hamburger menus focuses on user experience. The hamburger menu inherently adds an extra step for for a user to navigate to a given page. Any UX professional will tell you that adding unnecessary steps to a user journey is a huge no no.</p>
<p>The Nielsen Norman Group, widely respected as leading industry experts on UX &amp; usability have done extensive research on navigation trends. Some of their findings include:</p>
<blockquote><p><span style="line-height: 1.5;">For desktop sites, demoting your main content categories into a drop-down menu makes it harder for users to discover your offerings. <a href="https://www.nngroup.com/articles/killing-global-navigation-one-trend-avoid/" target="_blank" rel="noopener">Source</a>.</span></p></blockquote>
<blockquote><p>Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases. <a href="https://www.nngroup.com/articles/hamburger-menus/" target="_blank" rel="noopener">Source</a>.</p></blockquote>
<blockquote><p>On a large screen, hiding the chrome significantly affects discoverability and interaction cost, with virtually no improvement to the content-to-chrome ratio. <a href="https://www.nngroup.com/articles/content-chrome-ratio/" target="_blank" rel="noopener">Source</a>.</p></blockquote>
<p>Another point to consider, particularly if your website audience is predominately over 45, is that only 52% actually understand what a mobile hamburger menu is according the Catalyst Group. And this is for mobile!</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-2275 " src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/08/Catalyst-Mobile-Hamburger-Menu-Graph-1024x497.png" alt="Catalyst-Mobile-Hamburger-Menu-Graph" width="585" height="284" />
<h3>Hypotheses &amp; Test Design</h3>
<p>A lot of the articles and blog posts I read when researching the topic had strong opinions both for and against hamburger menus but very few had evidence to back up their claims. So I felt it necessary to gather some data from user testing to back up any points I make.</p>
<p>To conduct this research I decided to use some of UsabilityHub&#8217;s services. They provide a suite of usability tests that you can use to test pretty much any element of web design.</p>
<p>Their user pool also provide very detailed feedback on the tasks they&#8217;re set. Very useful if you don&#8217;t want to annoy people on your mailing lists.</p>
<p>For the purposes of this post, I focused on 2 types of test; Navigation Tests and Preferences Tests.</p>
<p>The site I used for the testing was <a href="http://thispage.amsterdam" target="_blank" rel="noopener">thispage.amsterdam</a> which uses a hamburger menu. I edited the site to create a version with a top navigation, keeping to the colour scheme of the site and using the same font (and font size).</p>
<h3>Navigation Tests</h3>
<p>Navigation tests are used to identify how effectively users navigate around your website. <span style="line-height: 1.5;">As the hamburger menu is ubiquitous among mobile design I don’t expect users to have difficulty finding the menu. However, it is still important to test this for the sake of being thorough. </span></p>
<p>Before users start the test they are given a set of instructions and are required to confirm that they understand the task. For both navigation tests I asked users to find the contact page of the site. A high res screenshot of each site was uploaded to UsabilityHub&#8217;s interface where all click locations are recorded.</p>
<img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-2301" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/Nav-Test-Instruction-300x274.png" alt="Nav Test Instruction" width="300" height="274" />
<h4><span style="line-height: 1.5;">Test #1 &#8211; With Hamburger Menu:</span></h4>
<p>Step 1:</p>
<p><span style="line-height: 1.5;"><img decoding="async" loading="lazy" class="aligncenter wp-image-2308 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/with-burger-menu-923x1024.png" alt="with burger menu" width="923" height="1024" /> </span></p>
<p>Step 2:</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-2311 " src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/burger-menu-test-with-burger-2-1-1024x524.png" alt="burger menu test - with burger 2" width="932" height="477" />
<p>&nbsp;</p>
<h4><span style="line-height: 1.5;">Test #2 &#8211; With Top Nav Menu (1 Step):</span></h4>
<h3><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-2307" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/burger-menu-test-with-top-nav-842x1024.png" alt="burger menu test with top nav" width="842" height="1024" /></h3>
<h3>Preference Test</h3>
<p>Preferences tests are quite self-explanatory. Users are asked to pick between 2 options based on a question. Essentially its an A/B test.</p>
<p>This is the important test. It puts the two variants of menus beside each other and asks users to decide what menu they prefer and why.</p>
<p>Based on the previous research I have discussed I would expect the top menu navigation to be more preferable.</p>
<h4>Instructions:</h4>
<img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2303" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/Prefernce-instruction.png" alt="Prefernce instruction" width="349" height="270" />
<p>&nbsp;</p>
<h4>Test #3:</h4>
<h3><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2302" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/preference-test.png" alt="preference test" width="1775" height="761" /></h3>
<h3>Results &amp; Conclusion</h3>
<p>A total of 171 unique participants took part in the tests, check out the results below:</p>
<h3>Navigation Tests</h3>
<h4><span style="line-height: 1.5;">Test #1 Results &#8211; With Hamburger Menu:</span></h4>
<img decoding="async" loading="lazy" class="aligncenter wp-image-2316" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/burgertest-results.png" alt="burgertest results" width="632" height="417" />
<p>&nbsp;</p>
<img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2294" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/Test-1-Results-with-Burger-1.png" alt="Test 1 Results with Burger 1" width="854" height="711" />
<p>&nbsp;</p>
<p>&nbsp;</p>
<img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2295" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/Test-1-Results-with-Burger-2.png" alt="Test 1 Results with Burger 2" width="851" height="438" />
<p>&nbsp;</p>
<p>As expected the majority of users (83%) had no problem locating the hamburger menu. A couple of users got a bit confused and clicked the &#8220;MCTRAX&#8221; featured image thinking it was some sort of menu.</p>
<p>The interesting result here is how long users took to complete the task. The average (successful) test duration was 43.6 seconds* which is higher than I would have expected. However, once users found the hamburger menu it only took them 4.7 seconds to find the contact page.</p>
<p><em>*Please note this time includes the time taken to read the instructions, which was 14 seconds on average.</em></p>
<p>(View the demographic report<a href="https://friday.ie/wp-content/uploads/2016/09/Burger-Menu-Test-1-With-Burger-Menu-Demographics.jpg" target="_blank" rel="noopener"> here</a> and full results <a href="https://usabilityhub.com/tests/69eaeb6cced0/results/8747a875d007" target="_blank" rel="noopener">here</a>)</p>
<h4><span style="line-height: 1.5;">Test #2 Results &#8211; With Top Nav Menu (1 Step):</span></h4>
<img decoding="async" loading="lazy" class="aligncenter wp-image-2317" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/top-nav-results.png" alt="top nav results" width="746" height="406" />
<p>&nbsp;</p>
<img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2297" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/Test-2-Top-Nav-Heatmap.png" alt="Test 2 - Top Nav Heatmap" width="849" height="821" />
<p>&nbsp;</p>
<p>The top navigation menu had a higher success rate of 91% but the key point here is the test duration. Users took an average of 25.7 seconds* to find the contact page link in the top menu.</p>
<p>This means that users completed the task 42% quicker than the hamburger menu test. This is particularly alarming if you consider how impatient internet users are. <a href="https://blog.kissmetrics.com/loading-time/?wide=1" target="_blank" rel="noopener">40% of people </a>will abandon a page if it takes more than 3 seconds to load.</p>
<p>I know that stat is not directly linked to navigation but it highlights that time is of the essence!</p>
<p>(View the demographic report <a href="https://friday.ie/wp-content/uploads/2016/09/Burger-Menu-Test-2-With-Top-Nav-Demographics.jpg" target="_blank" rel="noopener">here</a> and full results <a href="https://usabilityhub.com/tests/8974ceff9606/results/18619a583a59" target="_blank" rel="noopener">here</a>)</p>
<h3>Preference Test Results</h3>
<p>&nbsp;</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-2315" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/burger-test-results.png" alt="burger test results" width="645" height="432" />
<p>&nbsp;</p>
<p>As you can see from the above we clearly have a winner. 85.9% of testers preferred the top menu navigation. Users took nearly a minute to make their decision which shows they thought about it carefully.</p>
<p>What&#8217;s interesting is the reason people gave for their choice. The below word cloud illustrates why the top nav performed better:</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-2300" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/Test-3-Preference-Word-Cloud-With-Top-Nav.png" alt="Test 3 - Preference Word Cloud With Top Nav" width="364" height="326" />
<p>&nbsp;</p>
<p>Here are some of the full responses.</p>
<blockquote><p>Requires one less click for navigation. Also easier to know what other options are available.</p></blockquote>
<blockquote><p>More noticeable vs. the other choice which I have to click for the menu to show up</p></blockquote>
<blockquote><p>Menu is immediately accessible, more easier to navigate on the website</p></blockquote>
<p>&nbsp;</p>
<p>With the hamburger menu, as expected people noted that the design looked cleaner and more aesthetic:</p>
<img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2299" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/09/Test-3-Preference-test-results-responses.png" alt="Test 3 - Preference test results responses" width="541" height="310" />
<p>&nbsp;</p>
<p>(View the demographic report <a href="https://friday.ie/wp-content/uploads/2016/09/Burger-Menu-Test-3-Preference-demographics.jpg" target="_blank" rel="noopener">here</a> and full results <a href="https://usabilityhub.com/tests/5151e0edb1ac/results/274c94a6b351" target="_blank" rel="noopener">here</a>)</p>
<h3>A Final Word</h3>
<p>So what have we learned from these tests?</p>
<ol>
<li>Top navigation menus are easier to use than hamburger menus</li>
<li>Top navigation menus are quicker to use than hamburger menus</li>
<li>Users prefer top navigation menus to hamburger menus</li>
</ol>
<p>So you should definitely never use a hamburger menu on desktop right? Not necessarily. There are a couple of things that I must recognise:</p>
<ol>
<li>The data set is relatively small</li>
<li>The demographics were quite broad and differed for each test</li>
<li>Only 1 website was used for the test</li>
</ol>
<p>The most important thing to consider is your own website goals and your audience. So when making a decision whether to use a hamburger menu or top nav it is imperative to test on <strong>your </strong>target audience.</p>
<p>&nbsp;</p>
<p>[ratings]</p>


Design Trends & Usability: The Hamburger Menu On Desktop

<p class="graf--p">UX design in the world of e-Commerce is forever changing, providing a constant challenge for web designers who must constantly assess the current trends and stay ahead of the competition to ensure the customer is delivered a seamless shopping experience.</p>
<p class="graf--p">Here’s a look at some of my current favourite e-commerce design trends.</p>
<h3 class="graf--h3">1. Large Backgrounds</h3>
<p class="graf--p">Customers love images, not text, and can be put off by too much information. It will no doubt lead them to focus on the pictures if they don’t have time to read. A key factor in a customer&#8217;s purchase decision is in their initial impression whilst browsing your store.</p>
<p class="graf--p">Large pictures and video backgrounds create beautiful engaging websites. They can encourage potential customers to make a purchase the moment they arrive on your website. E-commerce stores use this technique extensively to create a clean, professional look and make their products more desirable.</p>
<figure class="graf--figure"><img decoding="async" loading="lazy" class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*93B44uy7EcG654HGQtLfMA.jpeg" alt="E-Commerce UX" width="800" height="470" data-image-id="1*93B44uy7EcG654HGQtLfMA.jpeg" data-width="1758" data-height="1034" /></figure>
<figure class="graf--figure"><img decoding="async" loading="lazy" class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*FqN3kvD1ZMsFlrxevXYY1Q.jpeg" alt="E-Commerce UX" width="800" height="470" data-image-id="1*FqN3kvD1ZMsFlrxevXYY1Q.jpeg" data-width="1758" data-height="1034" /></figure>
<p class="graf--p">The use of large backgrounds doesn’t need to be limited to the home page. Implementing them on product pages with interactive images and videos can be a great way to improve the shopper&#8217;s experience on your site. This is how <a class="markup--anchor markup--p-anchor" href="https://www.bugaboo.com/" data-href="https://www.bugaboo.com/"><strong class="markup--strong markup--p-strong">Bugaboo</strong></a> have implemented this feature.</p>
<h3 class="graf--h3">2. Responsive Typography</h3>
<p class="graf--p">Typography is a major part of developing a brands visual identity and attracting shoppers towards products within the online store. With more and more users consuming content via mobile devices, responsive typography has become a great asset in allowing large text designs to maintain a consistent look across all size devices.</p>
<p class="graf--p">Responsive typography allows the font size to change relative to the viewpoint. It is best used on headings that need to stay consistent in its environment.</p>
<p class="graf--p">Whereas non-responsive typography allows the text to break based on where the edge of the container sits and is more relevant to body copy where a sentence can span across as many lines as it needs on any screen size.</p>
<figure class="graf--figure"><img decoding="async" loading="lazy" class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*Caa4erKzt4KBzZiNEbSgoQ.jpeg" alt="E-Commerce UX" width="800" height="470" data-image-id="1*Caa4erKzt4KBzZiNEbSgoQ.jpeg" data-width="1758" data-height="1034" /></figure>
<p class="graf--p">See how <a class="markup--anchor markup--p-anchor" href="http://www.nastygal.com/home" data-href="http://www.nastygal.com/home/"><strong class="markup--strong markup--p-strong">Nasty Gal</strong></a> has implemented large, flexible typography simply and effectively.</p>
<h3 class="graf--h3">3. Hidden Menus</h3>
<p class="graf--p">Over the last few years, minimalism has continued to be one of the most consistent web design trends, focusing on clean, simple and easy to navigate aesthetics and giving prominence to imagery and large backgrounds.</p>
<p class="graf--p">Many designers believe that the hamburger icon has achieved universal status and brands should no longer be afraid to hide their navigation as users associate the icon with being a menu or list and will interact with it.</p>
<p class="graf--p">One of my personal favourite websites to find an example of this is <a class="markup--anchor markup--p-anchor" href="http://www.etq-amsterdam.com/" data-href="http://www.etq-amsterdam.com/"><strong class="markup--strong markup--p-strong">EtQ</strong></a>.</p>
<figure class="graf--figure"><img decoding="async" loading="lazy" class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*vaOqfHY1Cf7TJyDcg4FqEg.jpeg" alt="E-Commerce UX" width="800" height="470" data-image-id="1*vaOqfHY1Cf7TJyDcg4FqEg.jpeg" data-width="1758" data-height="1034" /></figure>
<p class="graf--p">However, research has proven that demoting the main navigation into a drop-down menu reduces engagement, dwell time and even affect sales on both desktops and on mobile! It’s been reported that some mobile sites are now moving away from the hamburger menu in favour of a mini nav that is front &amp; centre.</p>
<h3 class="graf--h3">4. Cards</h3>
<p class="graf--p">Cards are great for organising sections or products in a clutter-free and user-friendly way. They simplify navigation and improve UX, allowing users to easily access information at a glance and distinguish between topics.</p>
<p class="graf--p">The greatest benefit of adopting the cards layout is they work extremely well with responsive web design which is why they are very popular in e-commerce websites.</p>
<p class="graf--p">This has been implemented by <a class="markup--anchor markup--p-anchor" href="http://www.reserved.com/pl/pl/" data-href="http://www.reserved.com/pl/pl/"><strong class="markup--strong markup--p-strong">Reserverd</strong></a> and <a class="markup--anchor markup--p-anchor" href="http://www.randco.com/" data-href="http://www.randco.com/"><strong class="markup--strong markup--p-strong">R+Co</strong></a> to great effect.</p>
<figure class="graf--figure"><img decoding="async" loading="lazy" class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*9JKUSi92zl5qCuxIXmwfVA.jpeg" alt="E-Commerce UX" width="800" height="470" data-image-id="1*9JKUSi92zl5qCuxIXmwfVA.jpeg" data-width="1758" data-height="1034" /></figure>
<figure class="graf--figure"><img decoding="async" loading="lazy" class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*AYmZtjh0aCzRD4Z_uGHWuA.jpeg" alt="E-Commerce UX" width="800" height="470" data-image-id="1*AYmZtjh0aCzRD4Z_uGHWuA.jpeg" data-width="1758" data-height="1034" /></figure>
<h3 class="graf--h3"></h3>
<h3 class="graf--h3">5. Dynamic Searching</h3>
<p class="graf--p">This year has seen the rise of the dynamic search feature on e-commerce sites using JavaScript and Ajax to display search results instantly. This is best implemented on sites with large inventories as it allows customers to browse your store quickly without loading every search result page separately.</p>
<p class="graf--p">This seamless search method differs from the likes of Google’s autocomplete. It displays suggested words and phrases based on trending or previous user searches and then requires the user to click to search.</p>
<p class="graf--p">Check out <strong class="markup--strong markup--p-strong">JadoPado</strong>.</p>
<figure class="graf--figure"><img decoding="async" loading="lazy" class="graf-image alignnone" src="https://cdn-images-1.medium.com/max/800/1*FiRxIkXiH9FBPYCQXEEPTg.jpeg" alt="E-Commerce UX" width="800" height="470" data-image-id="1*FiRxIkXiH9FBPYCQXEEPTg.jpeg" data-width="1758" data-height="1034" /></figure>
<p class="graf--p">These are just a handful of the most common design trends we’ve seen so far this year. Let us know your thoughts and what your most/least liked design trends of 2016 are below.</p>


5 e-Commerce UX Design Trends of 2016

<blockquote><p><i><span style="font-weight: 400;">You may have heard of user centric design but what about conversion centric design&#8230;</span></i></p></blockquote>
<h3>What is a conversion?</h3>
<p><span style="font-weight: 400;">We’ll start with the basics; conversions are <em><strong>&#8220;any desired actions that a user performs after receiving some form marketing messaging&#8221;</strong></em>. These conversions can come in many forms but we typically associate them with actions such as purchases, bookings, quotes, signups etc. </span></p>
<p>These can fluctuate broadly across industries but ultimately it’s an action that contributes to your bottom line to some degree. So naturally, you want your website to be designed in a way to maximise these actions.</p>
<h3><span style="font-weight: 400;">Influencing Behaviour</span></h3>
<p><span style="font-weight: 400;">From an academic point of view, marketing boils down to 3 key elements of attitudinal psychology:</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">Cognitive</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Affective</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Conative</span></li>
</ol>
<p><span style="font-weight: 400;">In layman’s terms, marketers are trying to influence their target audience at different stages of the purchase cycle. Cognitive refers to whether or not an individual can recognise a product or brand. So the typical associated marketing goals here are to drive brand recognition and awareness. </span></p>
<p><span style="font-weight: 400;">Affective refers to a consumer’s emotions or feelings about a particular product or brand. These can be influenced by cultural and moral factors as well as a person&#8217;s beliefs and values. Brands can try to evoke certain emotions in their content strategy or advertising to shape these perceptions.</span></p>
<p><span style="font-weight: 400;">Conative refers to the likelihood that an individual will undertake a specific action or behave in a certain way towards a brand. This typically refers to purchase intent.</span></p>
<p><span style="font-weight: 400;">Although all three are interconnected, generally when we speak of designing for conversions we want to directly influence people to perform actions. So the third stage is the important one here, we want to influence people’s conation.</span></p>
<p>As a digital agency, we work on many different web-based projects with a wide variety of clients with different needs. From the outset, we try to understand what the most important business goals for any given client are.</p>
<p>Getting the goals right at the start is critically important and sometimes this is not a simple as it sounds. The key goals will narrow down exactly what could and should be included in design to deliver the <strong><a href="https://friday.ie/expertise/user-experience/ux-design-dublin/">best possible user experience</a>.</strong></p>
<p><span style="font-weight: 400;">Speaking of UX, it certainly is a hot topic of late. Lots of agencies are adopting user centric design to streamline services making completing tasks or finding information for their customers quick and easy. All this sounds great and forward thinking but it can actually work to the disadvantage of the business in some cases which I will delve into.</span></p>
<p><span style="font-weight: 400;">The difficulty arises when trying to strike a balance between aesthetic design and good UX with sales and marketing objectives (conversions). However, there is no reason why this equation can’t be solved with the right approach and processes.</span></p>
<p><span style="font-weight: 400;">For example, some designers like to use burger menus on desktop to hide the navigation giving more space for images and design elements. </span></p>
<p><span style="font-weight: 400;">This could potentially cause significant UX problems with your site. This is not to say burger menus should be avoided at all costs, but rather you should test if </span><b>your users </b><span style="font-weight: 400;">will be comfortable with it.</span></p>
<p><i><span style="font-weight: 400;">Here’s an example of how NBC news introduced a burger menu in 2014 and had to add instructions because no-one could find it. </span></i></p>
<p><i><span style="font-weight: 400;">They ended up removing it entirely and returning to standard navigation. Lesson learned — think before you munch that cheeseburger.</span></i></p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1974 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2014-03-03-at-8.03.18-PM-1024x565.png" alt="NBC burger menu" width="1024" height="565" />
<p>&nbsp;</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1975 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/screen-shot-2014-02-12-at-10-18-05-am.png" alt="NBC Bad UX" width="942" height="600" />
<p><span style="font-weight: 400;"><br />
Or at the other end of the scale Marketing &amp; Sales Managers may want a full-screen popup to encourage users to sign up for a free trial. Be careful with this, you will drive users away if you are too intrusive.</span></p>
<p><em>Here’s an example of how conversion design can go over the top. This popup appeared on the homepage of a marketing agency’s website after about 10 seconds. </em></p>
<p><em>Obviously, inquiries are a key marketing objective for this company but surely a prospective client would want time to read the content on the page? Plus if they want to contact you they will probably look for the contact us page.</em></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Some designers (or client stakeholders) feel strongly that their ideas and concepts are best. While they often are creative and impressive they may not necessarily help the business achieve the objectives.</p>
<p>Sometimes new technology such as 3D graphics or complex transitions &amp; animations can look impressive but don’t really help the user or the business at the end of the day. You should always strive to find the “Sweet Spot” of the three players.</p>
<img decoding="async" loading="lazy" class="aligncenter size-full wp-image-1979" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/1-HqIjrUJqraB-nbwN7pUldg.png" alt="how to align business goals with design" width="800" height="480" />
<h3>Principles of Design — How they apply to conversions</h3>
<p>I recently attended an inbound marketing conference where one of the speakers was Oli Gardner the Co-Founder of <strong><a href="http://unbounce.com" target="_blank" rel="noopener">unbounce.com</a>.</strong> He has written extensively about conversion optimisation for landing pages and about design principles in particular. He talks about conversion-centric design as opposed to user-centric design.</p>
<p>Where user-centric design which aims to help users find info ASAP conversion-centric design does the opposite in some ways. It strips away unnecessary distractions to increase the likelihood that a user will complete the desired action.</p>
<p>Obviously, there are many principles of design but I want to talk about 4 principles that can be utilised to increase conversions.</p>
<h3><b>1. Direction</b></h3>
<p><span style="font-weight: 400;">If you want someone to go somewhere, point them in the right direction. Directional cues help to guide users to concentrate on certain areas of a page (your CTA). For example, using arrows can be effective in some circumstances like on landing pages that direct users to forms.</span></p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1984 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/design-to-increase-conversions-directional-cues.png" alt="conversion centric design - directional cues" width="560" height="370" />
<p>&nbsp;</p>
<img decoding="async" loading="lazy" width="978" height="445" class="aligncenter size-full wp-image-7813" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1.png" alt="" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1.png 978w, https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-250x114.png 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-768x349.png 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-700x319.png 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-120x55.png 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-80x36.png 80w" sizes="(max-width: 978px) 100vw, 978px" />
<p>&nbsp;</p>
<p>Or you could take a more subtle approach and use eye direction, finger pointing, lines and curves to direct users attention to the desired area.</p>
<p><em>Here’s an example of how eye direction leads you to the free trial or video</em></p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1985 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/kinhr.jpg" alt="directional cue with eye direction" width="1856" height="1280" />
<p>&nbsp;</p>
<h3>2. Whitespace</h3>
<p><span style="font-weight: 400;">Ever look at a web page and there’s too much going on? It’s probably due to a lack of whitespace (too much content). Increasing the amount of blank space (it doesn’t have to be white) around your CTA will help it stand out. Just look at how simple Google is. </span></p>
<p><span style="font-weight: 400;">Below you can see how the Download button stands out due to the space around it and contrasting colours.</span></p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1980 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/call-to-action-best-practices.png" alt="CTA best practice - using whitespace" width="1180" height="500" />
<p><span style="font-weight: 400;"><br />
Trivago also copy Google approach quite well<br />
<img decoding="async" loading="lazy" class="aligncenter wp-image-1989 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-15.02.15.png" alt="trivago whitespace" width="1308" height="513" /><br />
</span></p>
<h3>3. Encapsulation</h3>
<p>Encapsulation refers to using a container to highlight a point of interest. The idea is to create a sense of tunnel vision to focus the user&#8217;s attention on your CTA. In practice this could be something like putting a contrasting border around a form.</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1990 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-15.04.29.png" alt="encapsulation for conversion design" width="1181" height="601" />
<h3>4. Colour &amp; Contrast</h3>
<p>Colour and contrast are very important to make key links or buttons stand out and be found easily. You need to be as clear as possible and do the thinking for your audience. The dominant colour of your web page will influence what works best.</p>
<p>Similarly appropriate font colour, weight and size can impact your conversion rate. I’m not going to list all of the colour pairings but here are a few examples:</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1982 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/color-contrast.png" alt="color contrast" width="600" height="360" />
<p>&nbsp;</p>
<img decoding="async" loading="lazy" class="aligncenter size-full wp-image-1981" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/cc-promo-3.png" alt="cc-promo-3" width="400" height="370" />
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Another point to mention is colour actually affects us emotionally. So bear this in mind when making a decision.</span></p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1983 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/color-guide-630x551.png" alt="colour emotion guide" width="630" height="551" />
<p>&nbsp;</p>
<h3>Tools to Help You Design For Conversions and Improve UX</h3>
<p>Now we can’t expect all marketers to know everything about design and vice versa. However, there are handy tools which marketers can use to help illustrate their concerns to designers and management.</p>
<h3>A/B Testing</h3>
<p>A/B testing is great way to quickly discover whether your site’s design is optimised for conversions. By asking users simple questions about your current design vs designs that incorporate the principles I’ve mentioned, you can arm yourself with data.</p>
<p>You can then take this data to your boss, CFO, manager etc. and tell them “X amount of people found this change beneficial” this could lead to X percent more sales. Now you’re speaking their language, and you’ll get that extra budget you need.</p>
<h3>Question Test</h3>
<p><strong><a href="http://www.usabilityhub.com" target="_blank" rel="noopener">Usability Hub</a></strong> have some great tools to perform some basic UX testing (And it’s free if you participate in other users tests!) The question test allows you to show users one of your web pages and ask for example “what would you expect to do on this site?” See below:</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1987 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-11.14.33.png" alt="usability hub" width="646" height="740" />
<p>&nbsp;</p>
<p>You can use this test to discover any weakness in your websites design or to test out a new landing page you have created. Any major flaws will be quickly identified.</p>
<h3>Click Test</h3>
<p>Say for example you think that changing the colour of a signup button or moving it to a different place that you feel is more prominent will increase conversions. You can set up a click test and compare how easily users found the button.</p>
<p>To set it up just take a screenshot of the current page upload it, then upload a slightly edited version with the changes (if you don’t have any photo editing software you can use <a href="https://pixlr.com/editor" target="_blank" rel="noopener">https://pixlr.com/editor</a>)</p>
<h3>Edit Any Web Page Like a Word Doc.</h3>
<p>One of my favourite tools which can help you to edit web pages with absolutely no coding experience, is this nifty piece of javascript. Simply paste the below code into the address bar any web page you are on (retype <strong>javscript:</strong> after you paste it. Chrome is weird.)</p>
<blockquote><p><strong>javascript: document.body.contentEditable = ‘true’; document.designMode = ‘on’; void 0</strong></p></blockquote>
<p>And voila! You can now mess around with any web page as if it was a word doc. Change the text, increase spacing, delete sections, move buttons. You can then use your edited page to perform some of the tests I mentioned without having to get designers or developers on board.</p>
<p>Here’s an example of what you can do:</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-1986 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-10.42.02.png" alt="netflix lols" width="760" height="878" />
<p><span style="font-weight: 400;">So to round up there are some key questions you need to ask yourself to understand whether you are getting as many conversions as possible:</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">Is my conversion rate high enough?</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Does my website meet key design principles?</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Is my website design and content focused on the primary action I want the user to take? </span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Have I tested my website with my target audience?</span></li>
<li style="font-weight: 400;">Are the next action points clear for the user?</li>
</ol>
<p>If you answered no to any of these question you may want to consider a website redesign or UX audit at the very least. User experience is one of our specialities so don&#8217;t hesitate to <strong><a href="https://friday.ie/contact/">get in touch.</a></strong></p>
<p>&nbsp;</p>
<p>[ratings]</p>


UX and Conversion Centric Design – Striking a Balance

<p>More than a handsome design or even fulfilling a business objective, a successful website with a great UX must meet the needs of users. It’s simple&#8230; the user needs content. And if you can afford your users simple access to this content, you can count on them to return to your site for years to come.</p>
<p>Take a quick scan through the general facts about people in <strong><a href="https://uxmag.com/articles/the-psychologists-view-of-ux-design" target="_blank" rel="noopener">The Psychologist&#8217;s View</a></strong> of UX Design and keep these in mind while examining my list of the 10 UX things I hate about your website. Give yourself a website audit. Are you an offender?</p>
<h3>1. Your message sucks</h3>
<p>You don’t have long to show people what your website is about so a good first impression is essential. When people land on your homepage, they’ll look for something short and bold that can tell them more about you. One strong leading message in which you state what you do, how you do it and what makes you unique is a great key to success. Why we need look no further than our own <strong><a href="https://friday.ie/" target="_blank" rel="noopener">homepage</a></strong> for a fine example.</p>
<h3>2. Can you say that in English?</h3>
<p>&#8220;<em><strong>The user needs content</strong></em>&#8221; but it&#8217;s important that when they find it, they understand it. Use plain language as a part of your user-centered design. Talk to people like they are real people. People love this. Check you are using clear and concise language and don&#8217;t speak to your audience like they&#8217;re a demographic being sold something. If you can, incorporate a story. People love stories. There&#8217;s something about stories that engage us like nothing else. Our client Nesta Storage allow their customers to share their personal experiences, offering a fresh insight into how the Nesta process works.</p>
<h3>3. Infinite scroll</h3>
<p>Ah, the good old infinite scroll where it’s impossible to reach footer. If your website has a footer and an infinite scroll is implemented, then content should never auto-load. Use a &#8216;Load More&#8217; button instead which gives more control or you can enhance the user experience more by adding some clever filtering as per the <strong><a href="http://www.dublintown.ie/whats-on" target="_blank" rel="noopener">DublinTown.ie</a></strong> website.</p>
<p>Some sites move their footer links into a burger style menu, making it accessible from the main navigation. But beware of changing tried n&#8217; tested design functions &#8211; you definitely don’t want to confuse your visitors by fiddling with your hierarchical navigation and footer link locations so reinforce common user habits where possible.</p>
<h3>4. Popup newsletter subscriptions</h3>
<p>Sure, a nicely designed popup window may bag you a few more subscribers for your newsletter database, but I’m not sure it’s worth the traffic you&#8217;ll lose when visitors abandon your site in exasperation.</p>
<p>A better alternative is a mini or modal popup that appears off-centre/on leaving the page, so that valuable content is not blocked while the user is viewing it (see a live example of this on the Invision blog <strong><a href="http://blog.invisionapp.com/design-for-the-human-brain/" target="_blank" rel="noopener">here</a></strong>). Receive extra brownie points if you employ a special cookie to stop this modal popup from appearing if the user has closed it on a previous page!</p>
<h3>5. Crap imagery</h3>
<p>There is no excuse for using images such as the ones below. These guys don&#8217;t actually work for your company now do they?</p>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1838" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/02/ux_imagery-2.jpg" alt="ux_imagery" width="767" height="299" />Scattered-round-the-place generic stock photography for the sake of it helps no one, so by extension, it won&#8217;t help you. If you can, show pictures of <em>your</em> customers, <em>your</em> people, <em>your</em> products, <em>your</em> location. Or have a professional create visuals that directly relate to what you do. Do your website a favour and give it a fresh face.</p>
<h3>6. Above the fold&#8230;</h3>
<p class="p1">We&#8217;re all sick of the phrase so let’s go ahead and bin the myth of ‘above the fold’ right now and forever more. However, let’s agree that the fold continues to exist as a concept. <span class="s1">Users scroll when there is reason to; if what we see at the top is promising; if we deem it worth the hassle. </span>
<p class="p3"><span class="s2">This is no excuse to cram all your essential content into a browser size area. Be clever and fill this space with interesting info and compelling content which will draw the user in.</span></p>
<h3>7. &#8230;And cramped page layout</h3>
<p>Why do people love to read stuff on <strong><a href="https://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.g9kz7y1jj" target="_blank" rel="noopener">Medium</a></strong>? Well apart from their choice selection of informative/compelling thoughts and stories, they have a deep understanding of how people consume blog posts. Hence, their template is perfectly crafted to attract the human eye &amp; can turn a lengthy 20-minute article into a blissful reading experience.</p>
<a href="https://medium.com/@luckyshirt/dear-guy-who-just-made-my-burrito-fd08c0babb57#.wl9rojg5k" target="_blank" rel="attachment noopener wp-att-1823"><img decoding="async" loading="lazy" class="alignleft wp-image-1823 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/02/ux_style.jpg" alt="ux_style" width="767" height="246" /></a>
<p>It&#8217;s never too late to improve the design of your pages. Present your content in the best possible way so readers take pleasure in reading it. Clean lines and spacing between text and in and around elements will make them want to stay longer and more inclined to interact with your website.</p>
<p>Use a clean light background colour to avoid overloading visual nerves. Create space to let your content breathe and shine. Crank up the margins and paddings around everything. Increase font size (and line height): 16px is the minimum size Smashing Magazine recommends for body copy. The font you use also influences how legible your content is: think simple, not fancy.</p>
<h3>8. Links opening in the same window</h3>
<p>Are you looking to direct users <em>away</em> from your website? Interested in <em>higher</em> bounce rates in your monthly site stats? If so, just open links to other websites in the same window.</p>
<p>Don&#8217;t send away your hard-earned traffic. You&#8217;re raising the chance that people will get distracted and forget to come back to you.</p>
<p>So check your website&#8217;s hyperlinks now, making sure that:<br />
→ internal links open in the same window<br />
→ external links open in a new one.</p>
<h3>9. Sluggish load times</h3>
<p>Speed is more important than ever. Sitting around waiting for pages to load builds frustration, and if it takes too long your guests won’t hang around. Obviously this is influenced by the connection speed of the user, so some of it is out of your control. So get onto Google Analytics to find out what percentage of your users have different types of internet connections and in turn a better idea of how fast your pages need to load. If it takes more than 4 or 5 seconds you’re in trouble as most will give up after the 4th second. Take measures to ensure your website loads in no more than 2.</p>
<h3>10. What does that say?</h3>
<p>Images play an important role, so it can be a clever move to place text on top to leverage the attention-grabbing aspect of the photo. But this endeavour commonly backfires, when the contrast between the text and the background is <strong>too low</strong>.</p>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1846" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/02/UX_text_images-1.jpg" alt="UX_text_images" width="767" height="668" />
<p>Some measures you can take: overlay the entire photograph with a translucent black (or colour can work too) so the white text on top pops out; add an opaque box behind the text, which will still be legible while showing the image behind; and blurring the image removes the detail so your text is crisp and clear, an effect widely used across Apple iOS devices.</p>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1848" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2016/02/UX_text_images2.jpg" alt="UX_text_images2" width="767" height="331" />
<p>If you&#8217;ve got any &#8216;faux-pas&#8217; that wreck your user experience when browsing the web, we&#8217;d love you to add to the list. And as always, if you need any advice or assistance with your website, <strong><a href="https://friday.ie/contact/">we are here</a></strong> to help :)</p>


UX – 10 things I hate about your website

<p>We&#8217;ve had fierce fun conceptualising, designing &amp; building a microsite of the freakiest faux pas we come across daily in the digital marketing arena. We compiled them into The 7 Deadly Sins of Digital Marketing and we brought characters from a selection of classic 50&#8217;s &amp; 60&#8217;s horror movies back to life using a little anaglyph 3D, parallax and subtle animated action. Then we posted 100 pairs of 3D specs around the country to unsuspecting folk. We&#8217;ve had a wicked response to the piece on social channels so far.</p>
<p>If you haven&#8217;t seen it yet, view our <a title="The 7 Deadly Sins of Digital Marketing" href="https://friday.ie/3d/2d/" target="_blank" rel="noopener"><strong>7 Deadly Sins of Digital Marketing</strong></a> and if you fancy your very own pair of retro 3D glasses, tell us and we will send you some. SHARE &amp; SCARE people, and have a very Happy Halloween.</p>
<h3 style="text-align: center;"><a href="https://friday.ie/3d/" target="_blank" rel="noopener">Click here to view our 3D microsite</a></h3>


7 Deadly Sins of Digital Marketing in 3D

<p>At the best of times, selling can be challenging. Selling online particularly so.</p>
<p>You have to get everything right: your marketing, your product, your pricing, information and fulfilment. If you are selling products and services selling on a website, you need a good user experience and more and more, a good mobile experience.</p>
<p>We&#8217;re working on some exciting eCommerce projects in the Friday studio right now and putting our experience of buying online and designing great user experiences to good use.</p>
<p>Here is a compilation eCommerce operations who employ some nifty features and functions that give their customers a seamless experience buying online. Mobile phones at the ready please.</p>
<h3>Helbak.com</h3>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1441" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2015/09/helbak.jpg" alt="helbak" width="767" height="517" />
<p>Let’s start with a Danish company who sell simple everyday-use ceramics. I like this site because of it’s overall minimal design and classic use of typography. It translates smoothly from desktop down to mobile.</p>
<p>No frills here, just a clean and stylish layout with beautiful photographs and a timeless design. It&#8217;s user experience is it&#8217;s simplicity. <strong><a href="http://www.helbak.com" target="_blank" rel="noopener">www.helbak.com</a></strong></p>
<h3>Firebox.com</h3>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1439" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2015/09/firebox.jpg" alt="firebox" width="767" height="600" />
<p>Hundreds of goodies &amp; gadgets. While away your bus journey to and from work, routing through Firebox&#8217;s impressive range of gift items.</p>
<p>The best feature about this site is the subtly organised and clever layer design of the burger menu which ensures you’ll never get lost browsing their very appealing product offerings. <strong><a href="http://www.firebox.com" target="_blank" rel="noopener">www.firebox.com</a></strong></p>
<h3>Farmdrop.co.uk</h3>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1449" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2015/09/farmdrop.jpg" alt="farmdrop" width="767" height="517" />
<p>Sticking with burger menus &#8211; Farmdrop, as well as selling lots of locally fresh organic veg &amp; food items, win our hearts with the icons they use to represent food categories in their menu.</p>
<p>These add to your mobile user experience visually and big buttons allow for no-nonsense link selection. Their add to cart feature is nice too and throws up + | &#8211; buttons so you can easily edit your quantities. Shame they only deliver to London. <strong><a href="http://www.farmdrop.co.uk" target="_blank" rel="noopener">www.farmdrop.co.uk</a></strong></p>
<h3>Canopy.co</h3>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1445" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2015/09/canopy.jpg" alt="canopy" width="767" height="600" />
<p>Everyone loves Amazon, right? But their product database is so big. Get help from Canopy, a community of guys &amp; girls who pick the best of the bunch and group them into ‘hand-curated issues’ you can browse through &amp; be inspired by.</p>
<p>A nice feature is their BACK TO TOP button. Scroll down and notice the logo at the top changes to an up arrow which is always present on the sticky menu. TOP buttons are known to get in the way &amp; cover up content on mobile so this a clever solution. <strong><a href="http://www.canopy.co" target="_blank" rel="noopener">www.canopy.co</a></strong></p>
<h3>Evolutionfresh.com</h3>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1443" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2015/09/evolution.jpg" alt="evolution" width="767" height="517" />
<p>For those into nutrition, or just healthy food porn, check out Evolution Fresh &#8211; producers of wholesome juices and yogurt. They have put much effort into the aesthetics of their ecommerce site, with stylish photography and colourful watercolour icons to list the ingredients.</p>
<p>Their filter system is great, which is attached to the bottom of the screen. It really helps you find what you’re looking for. <strong><a href="http://www.evolutionfresh.com" target="_blank" rel="noopener">www.evolutionfresh.com</a></strong></p>
<h3>Indochino.com</h3>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1448" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2015/09/indochino.jpg" alt="indochino" width="767" height="600" />
<p>Staying on the topic of filters, Indochino use a filter bar that sticks to the top with the burger menu bar for quick access.</p>
<p>It’s a joy to use, as options include icons and colours &#8211; that assist you in your quest for the perfect suit, or other item of men’s clothing. <strong><a href="http://www.indochino.com" target="_blank" rel="noopener">www.indochino.com</a></strong></p>
<h3>Lush.co.uk</h3>
<img decoding="async" loading="lazy" class="alignleft size-full wp-image-1447" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2015/09/lush.jpg" alt="lush" width="767" height="517" />
<p>&nbsp;</p>
<p>While sweet smelling air fills your nose passing by a Lush store, their ecommerce website is a feast for the eyes. A few features stand out. They take full advantage of their very active social accounts &#8211; click the chat symbol to find out WHAT’S BEING TALKED ABOUT for all the latest.</p>
<p>Their shop/store search facility is simple and it works. It retrieves the closest Lush shops to you with GoIP and displays their contact numbers and opening hours together in one place. A wonderful mobile eCommerce user experience all round. <strong><a href="http://www.lush.co.uk" target="_blank" rel="noopener">www.lush.co.uk</a></strong></p>
<p>It&#8217;s a great time to be a consumer &#8211; because it&#8217;s so important to get the customer experience right, we get to benefit from improvements in design, tech and UX enhancements.</p>


Smart examples of Mobile eCommerce user experience

<p><em>Advice on how to give solid constructive feedback in order to get results and build a strong relationship with your agency.</em></p>
<p>Giving feedback is clearly an important part of any client/agency relationship. And with any project, the process and steps involved from planning to creative to delivery.</p>
<p>But very often people can assume that the feedback process begins towards the end of the project cycle, when in fact, it is an important part of each step of the process.</p>
<p>We always involve and collaborate with our clients at every step if the process, in order to have a clear, smooth delivery and to get the best possible outcome.</p>
<p>Here are some essential tips to help with giving good feedback.</p>
<h3>Clarity</h3>
<p>Start with a clear brief! A no-brainer it may seem but it&#8217;s important to be clear about a project&#8217;s objectives; business goals, visuals, and functionality. If you don’t know what you want, we probably won’t be able to figure it out for you.</p>
<p>If your brief has clear outcomes for delivery: for example &#8211; understanding your target audience or a good offer – that’s a good starting point and builds a solid reference point for creative feedback. Read Dave’s post on the subject <strong><a href="https://friday.ie/blog/the-essential-website-development-checklist/">here</a></strong>.</p>
<h3>Be interested</h3>
<p>We want to build relationships that have trust, a mutual love for the project, respect for timings and possibly have a few laughs along the way.</p>
<p>The best feedback we get is from people who care. If you lack interest, it will send a ‘not bothered’ message to the designer which can understandably rub off on him/her also. There are lots of things you can learn from the designer so embrace this part of the process.</p>
<h3>Be constructive</h3>
<p>Saying &#8216;I don&#8217;t like it&#8217; is unhelpful. Instead, give reasons why you don&#8217;t like something and how you would like it to be different. A good designer will welcome constructive feedback.</p>
<p>Don&#8217;t give feedback for feedback&#8217;s sake. It&#8217;s tempting to feel like you have to say something to your designer, but unless it&#8217;s constructive then it can cause harm to the design.</p>
<p>Don&#8217;t be vague. Be specific about what you would like to see changed on draft artwork. Avoid ambiguous phrases like ‘make it pop’, ‘why isn’t the logo bigger?’ etc. You can check out other real-life and hilarious examples here <strong><a href="http://theoatmeal.com/comics/design_hell" target="_blank" rel="noopener">Oatmeal &#8211; Design Hell</a></strong>.</p>
<h3>Process / Tools</h3>
<p>Just as important as giving feedback, is taking your designer&#8217;s feedback. They want to create something special for you so you should consult with them on the best approach and understand that while you know your business, they know web design and UX. If you find a designer who stands up and justifies their ideas, you have found a great designer.</p>
<p>Having a discussions face to face or over the phone is far more constructive than sending comments back and forth through email. However tools like <strong><a href="http://www.invisionapp.com" target="_blank" rel="noopener">InVision</a></strong> makes it really easy to create a process that encourages problem solving and collaborative feedback. We use it all the time: it&#8217;s a pure pleasure to use and our clients love it!</p>
<h3>Too many cooks</h3>
<p>Avoid &#8216;design by committee&#8217; at all costs. It’s a recipe for disaster. The end result shouldn&#8217;t please everyone so don’t mass mail everyone in the company, their family members and friends in order to make a more informed decision.</p>
<p>Carefully hand pick 2 or 3 people to share design iterations with but appoint one gatekeeper, who has ownership of the project and can make the final call. Approvals on design should be made throughout the journey. There is nothing more frustrating than getting multiple conflicting comments from different members of a team on a project.</p>
<p>In the event of conflicting views on your side, call on your designer&#8217;s expertise. Their opinion as an outsider can make them extremely valuable.</p>
<p><iframe loading="lazy" title="The Process (a.k.a. Designing The Stop Sign) - ORIGINAL HD" width="500" height="281" src="https://www.youtube.com/embed/RnZyc5LrVEs?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p>It’s not difficult to give good feedback.</p>
<p>Remember to be involved at every step of the process, give constructive communication and, of course, always respect your designer’s expertise!</p>
<p>Doing so will result in a successful outcome and happy faces. :)</p>


How to give good feedback to your creative agency

<p>Following on from my last post <strong><a title="UX for mobile" href="https://friday.ie/blog/user-experience-for-mobile/">User Experience for Mobile – Take care of your audience</a></strong> I want to bring up the concept of mobile-first thinking. Traditionally, website designers and their customers approach a new website project focusing on it’s desktop iteration, the mobile version becoming an extra goal that is completed at a later date. Now there’s an increasing trend in the marketplace to flip this process and commence with mobile concerns first, before building up to tablet &amp; desktop models. If you still consider mobile web design a niche industry, you need to change your thinking. Mobile is no longer the future nor is it a trend. It’s right now. As the statistics prove, the web has completely broken out of it’s computer-shaped box and into our pockets &amp; handbags.</p>
<p>So why use this method? Read on to find out.</p>
<h3 style="text-align: center;">RISING TO THE CHALLENGE</h3>
<p>I switched to using Adobe Illustrator to design websites a long time ago &#8211; it&#8217;s a great tool for resizing for different screen sizes and being resolution independent, it&#8217;s perfect for creating retina graphics. It was an unnatural concept after having used Photoshop for all my designing years, but now, when I revisit old Photoshop documents in order to make changes to past client site designs, I find it frustrating and I know that I’ll never go back. So recognising that same feeling when first trying mobile-first website design was a good indication that I had room to improve and had another opportunity to master more methods. It’s clear that the approach of mobile-first is a tougher competitor but you’ve got to surrender a bit of comfort for the sake of becoming a superior designer!</p>
<h3 style="text-align: center;">THE HEADACHE</h3>
<p>There are different ways to make design decisions but when planning a user experience for desktop, you don’t have to decide what is the most important thing when you have tonnes of space to put stuff. There are no real hard choices to be made. But when you design &amp; build for mobile the opposite happens. You have very little room, and so the decision-making process is much much harder.</p>
<p>Designing for mobile means simplifying. Sounds easy but it’s not. To create a simple experience; to reveal your content &amp; actions in a way the user will understand; to choose their position so they appear as and when they are needed and not when they aren’t, makes the job a tough one. The screen is tiny, you really have to work hard to figure out what needs to be there: primary content, secondary content, actions &amp; other extra information. Think 2 things: user-experience and enhancement. And ONLY offer up additional information, (the frilly bits) to people when you know their devices can handle it.</p>
<h3 style="text-align: center;">PROGRESSIVE ENHANCEMENT</h3>
<p>So instead of ‘degrading’ a website design for smaller displays, rewrite the important parts of the layout. Then progressively enhance it for serving a rich experience to more capable devices. Consider your vital content. Cut back the content material to it’s most essential components for your mobile experience. It’s a worthwhile exercise: you can display this information in an even stronger way as you deliver it to the desktop design.</p>
<p>To be honest, mobile-first design is not fun and it&#8217;s not easy. You are hit with constraints from the word go. But it’s the way I prefer to work, and crafting a successful web experience that is mindful of user context and device features the best way that I can (no matter how challenging) is really very satisfying.</p>


Mobile-first Thinking

<p>User experience (UX), a term that hasn’t been used widely in the past, is now EVERYWHERE.</p>
<p>A frequently overlooked aspect of design is the good old user interface. Whether intuitive or ridiculous, interfaces are everywhere. On our TV sets; in the cockpits of airplanes; on the watches we wear on our wrists and more obviously, on the websites and apps we engage with daily.</p>
<p>Why is it likely to find a disheartened user behind the interface of a mobile website? Well it&#8217;s early days&#8230; we have a way to go before we get it just right. But it’s our job as designers to challenge the current issues with mobile web design while thinking of new solutions to offer you a quality user experience. Take care of your mobile audience by considering the following points.</p>
<h3>Declutter the mobile user experience</h3>
<p><strong>Prioritise your content.</strong> Obvious, sure but it can&#8217;t be overstated. Sidebars for &#8216;filling in the gap&#8217; extraneous items become a thing of the past. Anything that does not help the user to achieve their main goal can be removed completely, or placed further down the page if absolutely necessary.  Hide the non-essential info. You can still keep hidden information accessible using a feature (like a dropdown menu or accordion feature) that allows the user to expand &amp; collapse the goods upon request.</p>
<p>Your content is key but analyse your potential customer &amp; choose the essential bits for your mobile site. Place the most significant info at pole position. Every business has a purpose so it’s important to make this instantly clear to your visitors.</p>
<p>I most often use my phone to find a company’s contact information on the run so ensure your details are easily available. They don’t have to be flashing &amp; jumping up &amp; down at the top of the screen, but they should be accessible within a click or two from the main navigation.</p>
<h3>Speed matters</h3>
<p>A mobile site’s <strong>performance matters</strong> to everyone, and these days we expect a website to load within a couple of seconds. We’re all familiar with the sense of frustration that comes when trying to access info quickly on our phone, resulting in visions of it smashing to pieces against the nearest wall. Don’t push potential customers to other sites that load faster. Ensure your website has the best loading speed (learn how in <a title="Speed up your website" href="https://friday.ie/blog/tips-speed-up-your-website/"><strong>this blog post by Ziggy</strong></a> on the subject).</p>
<img decoding="async" loading="lazy" class="alignnone wp-image-1007 size-full" title="User experience stat" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2015/01/imagery21.jpg" alt="user experience stat" width="767" height="300" />
<p>Handling navigation is one of the most challenging aspects of responsive design. <strong>The burger menu</strong> is now globally recognised and is widely used in mobile design because it is an environment where each pixel counts, due to smaller screen sizes and is essential for navigating content on any mobile screen.</p>
<p>Keeping the burger menu visible at all times (i.e.: by initiating a ‘sticky’ menu) provides maximum accessibility to your navigation and is highly recommended (try out FRIDAY’s sticky menu for size from your mobile now).</p>
<p><strong>Use margins</strong> of at least 10 pixels on either side when displaying text to maximise space usage on a mobile device. <strong>Large headings</strong> will make it easier for the user to scroll up &amp; down and scan the page to digest only whats relevant if there is alot of content. Consider too the fact that you will most likely have to increase the <strong>size of buttons &amp; clickable areas</strong> and space out text links, to compensate for our sometimes fat and clumsy fingertips instead of the precision tip of a cursor.</p>
<p>It goes without saying that the best designs are very carefully considered. But remember there is no such thing as a perfect UX because there is no such thing as a perfect human being. Don&#8217;t worry about making your mobile app or mobile site perfect. Instead put the effort into always making it better. If we’re constantly making it better, we’re going in the right direction.</p>
<p>If you&#8217;re interested in finding out more, check out the video below on optimising mobile user experiences by a nice guy called Luke Wroblewski.</p>
<div class="video-container"><iframe loading="lazy" src="//www.youtube.com/embed/Y-FMTPsgy_Y" width="670" height="503" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>


User experience for mobile – take care of your audience

<p>We all want to get the best impact and value from our marketing. With the fast pace of change that we see across digital marketing, it can be a challenge for businesses and marketers to keep up.</p>
<p>A good web presence should be an investment, one that adds value to your business.</p>
<p>There are areas where many businesses fall behind but there are opportunities to not only catch up but to get ahead. And so follows the key areas across technology, design and content that can help businesses to future-proof their digital marketing.</p>
<h3>Be Responsive</h3>
<p>Technology is ever evolving and this includes how people view websites and content on the web. As we enter 2015, responsive web design is perhaps the biggest factor in future-proofing a website. As new devices emerge, a responsively designed website will be ready for anything. If you don’t have one, now is the time to optimise your user’s browsing experience by creating a flexible and dynamic website, which allows you to stay ahead of the trend.</p>
<p>Mobile web traffic usage is currently averaging at 50% and global mobile data traffic grew 81% in 2013 &#8211; read the CISCO report <strong><a href="http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html" target="_blank" rel="noopener">here</a></strong>.</p>
<h3>Retina Ready</h3>
<p>With the evolution of device displays, the amount of users using Retina-enabled devices continues to grow at a rapid rate. Website analytics can help you assess how many users are coming to your site using these devices. Your website may have been built recently but check if it’s graphics, buttons, gradients, patterns etc. appear less sharp and more blurry on a Retina screen. If they do, high-resolution versions or SVGs* can easily replace these, ensuring your site looks at it’s very best as more users adopt high-resolution mobile technology. The latest iMac has a 5K Retina display, that is more pixels than a digital cinema screen. The future of PC screens too will be a HiDPI-enabled one (the non-Apple word for Retina).</p>
<p>*Scalable Vector Graphics (.svg) have been around for a long time but are often overlooked. They are resolution independent and their scaling capabilities mean that they are truly future-proof.</p>
<h3>A Flexible CMS</h3>
<p>WordPress is the most popular CMS and blogging system in use on the web. It powers over 60 million websites worldwide as well as being one of the most expandable content platforms available. There are thousands of plugins available that can add custom functionality to your website so it is FRIDAY&#8217;s choice of CMS. Read more about the power of WordPress in <a href="https://friday.ie/blog/web-design-weapon-choice-wordpress/" target="_blank" rel="noopener"><strong>Ziggy&#8217;s post here</strong></a>.</p>
<h3>Fresh Content</h3>
<p>Unless you&#8217;ve had your head in the sand for the last number of years, you will be aware of the importance of publishing quality content about your business or brand. Remember to write for your audience, not for search engines but optimise your content with keywords as you go. Google creates algorithms that mimic human behaviour and it notices the relevance and quality of your content first.</p>
<p>A blog can be a great source of content and it serves as a free platform for you to share info, thoughts and insights. With good content, you can get more people to link to your site and talk about your brand. We recommend you create a content marketing strategy to help you plan and schedule regular post uploads.</p>
<h3>Social</h3>
<p>You should be using every channel at your disposal to direct your audience where you want them to go (your choice should remain relevant to the business and it&#8217;s potential clients.. ie: while a children&#8217;s clothes store won&#8217;t find many customers on LinkedIn, a business consultancy will). Of course, it makes sense to use incentives to encourage participation, while making sure that a) it’s easy and b) the user has something to gain. But the era of free social marketing is over: social networks have to make money and they can’t do this by continuing to offer their audience engagement platforms to brands for free. Although social media isn’t going anywhere anytime soon, it&#8217;s a good idea to start to adjust your strategy. Use these channels to direct your audience back to your own website or newly launched app or microsite, and in doing so, you will create a long-term home for your community. It&#8217;s more than any social network can offer.</p>
<p>Read how Taco Bell recently used <strong><a href="http://www.adweek.com/news/technology/taco-bell-explains-its-social-media-blackout-and-how-it-lit-mobile-orders-within-hours-161094" target="_blank" rel="noopener">this original idea</a></strong> to launch their new online app. This is the future of social marketing.</p>
<h3>Design For Emotion</h3>
<p>Think of emotion as a bridge or a messenger. Draw inspiration from the little sparks or connections in the relationship between you and your clients. Then create new connections that can help you sell, promote or educate. Because of the exponential rise in smartphone usage, people engage in content in a more visual way. Through the use of photography and video, people can relate to people more. People ignore design that ignores people. So use human faces to catch attention, guideline of sight, engage, visualise emotions, create appeal, trust and authority, and if possible to make people smile.</p>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-868" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2014/11/people1.jpg" alt="people" width="767" height="246" />
<p>Recently we met with a client who took 1.5 years to redevelop their name and identity. They used focus groups to identify strengths and issues with their brand as it currently stands and learned that they have a huge opportunity to appeal to the driving emotions of their target audience. We are looking forward to extending this into the design and build of the website which will launch their new brand.</p>


Future-Proof your Digital Marketing

<p><em>Developing a brand identity for your </em>own<em> startup agency is and should be a considerable undertaking. From the outset, we made a conscious decision to use full team collaboration.</em></p>
<p>We formed a tight huddle, gathered our new family for a briefing and set to work.</p>
<p>Brainstorming is fun but can quickly become laborious. We came up with some wonderfully meaty concepts, but nothing we could all bite into. Voices were raised and opinions challenged (in hindsight bringing us closer together as a new group), but we shared a hunger to hit the streets with something original yet unconventional.</p>
<p>We wanted a buzz, we wanted to create a feeling so we altered our tack and approached the project from a fresh angle.</p>
<p>We wrote a new brief, examined our company values, had countless break-out sessions and narrowed it down to something we were all really excited about. In the end FRIDAY was born out of the lyrics to a song and was devoured by all.</p>
<p>But you know that elated feeling you get at the end of a busy week? We craved this energy every day! In essence, it encapsulated how we wanted to be viewed and understood.</p>
<p>So we ran a survey to gauge how the name FRIDAY might be received (a positive split of mostly yes’s, with some no’s &amp; maybe’s from the industry &amp; the public got us giddy) then shook hands and set off on the road to visualisation.</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-585 size-full" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2014/09/bp6.jpg" alt="bp6" width="768" height="344" />Keeping the team together for this phase was essential and those without design skills did not shy away. We wanted a visual that was sure of itself, that exuded our energy &amp; wide-eyed creativity and the great work we produce. But because of the strength of the word FRIDAY our mark should be simple.</p>
<p>Each contributor’s vision and every scribble and scrawl was considered. With a deadline jumping up and down and waving it’s arms, we quickly caught up and hit it. Our final mark was simple but had endless possibilities. It was bold but timeless. It made a brave statement. FRIDAY, we fell in love!<img decoding="async" class="alignnone size-full wp-image-6242" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2014/09/FRIDAY-48.jpg" alt="" />This branding exercise netted us a great looking identity that is balanced and works very well within several different applications and across all types of media.</p>
<p>It has been just a few months since the launch of FRIDAY but we’re growing up and moving forward fast. Every day, we learn more about who we are and the value we give with the work we do.</p>
<p>If you have any thoughts on the FRIDAY brand, let us know below. But FRIDAY, we’re still in love.</p>


Author: Jamie Geoghegan

Prototyping Methods for a better User Experience

Design Trends for Cookie Policy Notices

Intelligent UX: Graceful Degradation vs Progressive Enhancement

8 UX Design Improvements for the Kilkenny Shop

Brand Personality Online

Design Trends & Usability: The Hamburger Menu On Desktop