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

Main Nav

<div class="paragraph-large">
<p>As humans, we tend to make broad stroke assumptions about things. This can be very useful in our everyday lives for making time-efficient decisions.</p>
<p>In business, however, using a ‘common sense’ approach can often lead to undesirable outcomes.</p>
</div>
<p>When considering how to best serve a certain user group, our clever brains often tell us that the most obvious answer is the correct one. Often, it is, but sometimes it isn’t.</p>
<p>Weighty decisions about product or marketing investment shouldn’t be made based on hunches. That’s why we’re always shouting about user research and quality user data.</p>
<p>Looking broadly at different generations and the assumptions we make about them, we can see how commonly held beliefs only paint a part of a larger picture.</p>
<h2>1. Baby Boomers (born 1946-1964):</h2>
<p>Growing up alongside the beginnings of television and landline telephones, baby boomers experienced the first widespread access to lots of what we might now consider ‘old-school’ technology.</p>
<p>Their formative years didn’t really see the introduction of the modern computer at all, so adapting to advancing technology has come later in their lives.</p>
<p>As a result, <strong>it’s easy to draw the conclusion that older individuals tend to spend a lot less time online than younger generations, and do so with great difficulty.</strong></p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-14911 size-full" src="https://www.api.friday.ie/wp-content/uploads/2024/03/homer-any-key.jpeg" alt="" width="640" height="427" srcset="https://www.api.friday.ie/wp-content/uploads/2024/03/homer-any-key.jpeg 640w, https://www.api.friday.ie/wp-content/uploads/2024/03/homer-any-key-250x167.jpeg 250w, https://www.api.friday.ie/wp-content/uploads/2024/03/homer-any-key-120x80.jpeg 120w" sizes="(max-width: 640px) 100vw, 640px" />
<p>Let’s be honest, we’ve all seen baby boomers exhibit a lack of tech literacy. Hell, the phrase ‘OK Boomer’ was hugely popular in recent years to point the finger at the &#8216;out of touch.&#8217;</p>
<p>Broadly speaking, of course they need a little more hand holding than most, but don’t be so quick to write them off as ubiquitously struggling to keep up.</p>
<p><strong>In reality, their behaviours are becoming more and more online oriented.</strong> Their presence on Facebook and Youtube is significant, with <a href="https://www.statista.com/statistics/309166/boomer-senior-social-networks/" target="_blank" rel="noopener">67% and 78% respectively being active on those platforms</a> back in 2020. They’re increasingly shopping online since the pandemic (90%), and their online activity is trending upwards more than any other age group (3.6% increase per year).</p>
<p>Sure, they might find navigating modern interfaces difficult, but we must ask why that is the case. Do we blame a younger user when they get confused using something unfamiliar? It’s much more likely that the digital environment largely ignores the needs of the elderly, rather than that they’ve an innate inability to adapt.</p>
<p>We need to be embracing an inclusive and accessibility-first approach to how we design and communicate our products, particularly to older users.</p>
<p>Plus, they have the largest purchasing power of any generation, so reaching and empowering them to embrace technology is good for everybody.</p>
<p>(Stats from Statista, Marigold Engage, PYMNTS)</p>
<h2>2. Gen X (born 1965-1980):</h2>
<p>Gen X grew up with significant technological advancement. Video games, Walkmans, VHS and word processing to name a few, they essentially experienced the advent of personal computing and the emergence of several key technologies that laid the foundation of our current digital landscape.</p>
<p>Personally, <strong>I often lump them in with baby boomers when it comes to technology, and that perception comes from my own life experiences.</strong></p>
<p>A few weeks ago, a Gen X friend of mine was struggling to get the time and date to read correctly on their new smartwatch, and they’d tried extensively to no avail. It was sorted in 5 minutes by a fellow Millennial.</p>
<p>Our own anecdotal experiences can lead us to some black and white thinking about groups of people. We’re all guilty of it in all aspects of our lives.</p>
<p>We then assume that we know what our customers want based on first hand experience, but that simply isn’t accurate on a larger scale.</p>
<p>Are Gen Xers actually hesitant to adapt to new technology? Are they less savvy than their younger counterparts? It’s not uncommon to hear these kinds of generalisations, but let’s not forget they largely established the likes of Google and Amazon, and built the bridge between analog and digital.</p>
<p>According to LinkedIn,<strong> a surprising <a href="https://www.linkedin.com/pulse/why-gen-x-worth-your-time-methods-mastery/" target="_blank" rel="noopener">quarter of Gen X are on Tik Tok regularly</a>, and 90% of them are on some sort of social media.</strong> Of course there are exceptions, which again is why user research is so important for a realistic view and effective strategy.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-14912 size-full" src="https://www.api.friday.ie/wp-content/uploads/2024/03/gen-x-ellipses.webp" alt="" width="640" height="624" srcset="https://www.api.friday.ie/wp-content/uploads/2024/03/gen-x-ellipses.webp 640w, https://www.api.friday.ie/wp-content/uploads/2024/03/gen-x-ellipses-250x244.webp 250w, https://www.api.friday.ie/wp-content/uploads/2024/03/gen-x-ellipses-120x117.webp 120w" sizes="(max-width: 640px) 100vw, 640px" />
<p>Their adaptability shouldn’t be underestimated. Sure, my dad may like to text with a copious amount of ellipses, but someone the same age working in tech their whole lives may have a much firmer grasp on the actual building blocks of the tech we use daily than anyone his junior.</p>
<p>So don’t be fooled by your limited life experience, no matter how convincing it might be. Test those hypotheses!</p>
<p>(Stats from LinkedIn, Hubspot)</p>
<h2>3. Millennials (born 1981-1996):</h2>
<p>Having been born in 1994, I’m at the tail end of the millennial spectrum, bordering on a “Zillennial” really. My childhood had dial up internet and snake on my parents’ indestructible Nokia. Into my adolescence we transitioned to broadband, not so smart smartphones and the beginnings of social media.</p>
<p><strong>It’s with Millennials that we started to hear of ‘tech dependency,’</strong> the overarching sentiment being that they&#8217;re inept in the ‘real-world’ of face-to-face communication and unable to detach themselves from their online lives.</p>
<p>We’ve been hearing it our whole lives, deemed lazy and entitled for playing video games for hours on end, or getting anxiety about having to make a phone call.</p>
<p>Now, I consider myself very capable and understand most technology intuitively, and broadly millennials as a whole are very comfy in the digital realm. I am also likely addicted to my phone in a less than healthy way, but far from helpless with tasks that require some real-world interaction.</p>
<p>So are all Millennials really dependent on technology? The reality of such questions is always much more nuanced than we might like.</p>
<p>In short, yes, Millennials are more tech dependent than previous generations, but to what degree? How do we define who is and isn’t addicted to their phones when there’s only<strong> about an hours difference between average screentimes of Gen X, Millennials and Gen Z.</strong></p>
<div id="attachment_14940" style="width: 710px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14940" class="wp-image-14940 size-large" src="https://www.api.friday.ie/wp-content/uploads/2024/04/average-screen-time-by-generation-1-700x651.webp" alt="" width="700" height="651" srcset="https://www.api.friday.ie/wp-content/uploads/2024/04/average-screen-time-by-generation-1-700x651.webp 700w, https://www.api.friday.ie/wp-content/uploads/2024/04/average-screen-time-by-generation-1-250x232.webp 250w, https://www.api.friday.ie/wp-content/uploads/2024/04/average-screen-time-by-generation-1-120x112.webp 120w, https://www.api.friday.ie/wp-content/uploads/2024/04/average-screen-time-by-generation-1.webp 725w" sizes="(max-width: 700px) 100vw, 700px" /><p id="caption-attachment-14940" class="wp-caption-text">Graph courtesy of https://whatsthebigdata.com/average-screen-time-stats/</p></div>
<p>The point I suppose, is that the notion of tech dependency is slowly losing its meaning.</p>
<p>Looking back on my own childhood, the Overton window has shifted dramatically when it comes to how much online activity is acceptable in day-to-day life. The assumption that Millennials are streets ahead of older generations in terms of online addiction and tech literacy is less and less true as the years fly by.</p>
<h2>4. Gen Z (born 1997 &#8211; 2013):</h2>
<p>The first truly digital-first generation. With no frame of reference for what a world without an unlimited information machine in their pocket was like, the stereotypes are naturally more extreme than with Millennials.</p>
<p><strong>Short attention spans and social media addiction, you’ve probably heard the rumours.</strong> To be honest, it’s going to hard for Gen Z to beat the extremely online allegations.</p>
<p>The detrimental effects of constant social media exposure are well documented, and one might assume that it’s rotting young people’s brains outright. It’s a mixed bag in reality.</p>
<p>Reports of boosted social connection, self-expression and access to health services are amplified by social media, but one can’t just decide to reap the positive benefits only. Social media is a complicated beast.</p>
<p>As for short attention spans, long form media such as podcasts proves popular among young people looking to escape the scrolling loop. A reported 82% of listeners also report not doing anything else while they listen, contrary to the multi-tasking teen stereotype, and 80% report doing so specifically for relaxation. Detaching from the online world is part of many Gen Zs daily habits.</p>
<p>Technology has been baked into their DNA. Gen Z are merely utilising the tools provided to them, can we really shame them for that?</p>
<p>One study finds that <strong><a href="https://www.edelman.com/insights/unleashing-power-gen-z" target="_blank" rel="noopener">only 12% want to be influencers,</a> and a hopeful 70% are part of a social or political cause</strong>. They’ve been handed a very uncertain world to navigate, to paint them all with the same self-obsessed Tik Tok brush is unfair and inaccurate.</p>
<p>They’re engaged in real world issues, they just view it through the lens they have been provided; technology.</p>
<p>(Stats from emarketer.com, Edelman)</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-14914 size-full" src="https://www.api.friday.ie/wp-content/uploads/2024/03/gen-z-meme.webp" alt="" width="500" height="616" srcset="https://www.api.friday.ie/wp-content/uploads/2024/03/gen-z-meme.webp 500w, https://www.api.friday.ie/wp-content/uploads/2024/03/gen-z-meme-250x308.webp 250w, https://www.api.friday.ie/wp-content/uploads/2024/03/gen-z-meme-120x148.webp 120w" sizes="(max-width: 500px) 100vw, 500px" />
<h2>So why is any of this important?</h2>
<p>Broad generalisations help us make sense of a chaotic world. I’d probably be right in assuming that a poorly lit alleyway isn’t a safe place to hang around at night.</p>
<p>Where it’s not useful is when we make decisions about how to serve customers based on their belonging to a certain broad demographic, like their age.</p>
<p>You might think you intuitively know your audience, but groups of users are endlessly complex.</p>
<p>For example, a good starting point might be that you can reach zoomers on Tik Tok, but how do you communicate with them?</p>
<p>You might find that your potential audience might actually include their parents too, and your messaging just won’t appeal to both groups effectively without some fine-tuning.</p>
<p>When we design interfaces, we need to consider accessibility standards so everyone can use it, regardless of their age. Tailoring your product to a younger tech-savvy audience only isn’t just a bad idea, <a href="https://www.friday.ie/blog/navigating-eu-accessibility-what-the-eu-accessibility-act-means-for-websites/">it might soon be legally questionable to ignore how everyone, regardless of their abilities, can use it effectively.</a></p>
<p>Luckily, we at Friday know how to get to the root of user behaviour, on both the micro and the macro scale. If you need help in understanding how the hell to give users what they need, get in touch with us to collaborate on whatever it is you’re working on.</p>
<p>Unless you’re just a clueless old boomer&#8230; (kidding!)</p>


Challenging Assumptions: How different generations actually use technology

<div class="paragraph-large">
<p data-trid="211">From 28 June 2025, a new set of rules will apply in the European Union aiming to make things easier for everyone navigating online, especially for people with disabilities.</p>
<p data-trid="213">The European Accessibility Act of EAA focuses on improving the accessibility of products and services by standardising accessibility rules across member states.</p>
<p data-trid="215">The goal is to ensure that everyone, regardless of their abilities, can use and enjoy things like websites, apps, and other products without unnecessary barriers.</p>
</div>
<p data-trid="217">Accessibility is crucial for fostering inclusive online experiences.</p>
<p data-trid="217">It ensures that digital content and services can be seamlessly accessed and used by everyone, regardless of their abilities.</p>
<p data-trid="218">The average person without a disability often takes for granted the relative ease of using the internet or mobile apps, however, the narrative differs significantly for millions of individuals living with disabilities across the EU.</p>
<p data-trid="219">According to <a href="https://www.consilium.europa.eu/en/infographics/disability-eu-facts-figures/" data-trid="220">Eurostat estimates</a>, in 2022 27% of the EU population had some form of disability. That’s 101 million people or 1 in four adults.</p>
<p data-trid="221">This data highlights the need for a more inclusive digital landscape that accommodates and caters to the diverse needs of a substantial portion of the European population.</p>
<img loading="lazy" decoding="async" class="size-large wp-image-14873 aligncenter" src="https://www.api.friday.ie/wp-content/uploads/2024/02/Frame-19-700x357.png" alt="" width="700" height="357" srcset="https://www.api.friday.ie/wp-content/uploads/2024/02/Frame-19-700x357.png 700w, https://www.api.friday.ie/wp-content/uploads/2024/02/Frame-19-250x128.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/02/Frame-19-768x392.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/02/Frame-19-120x61.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/02/Frame-19.png 1176w" sizes="(max-width: 700px) 100vw, 700px" />
<h2>Understanding the Act</h2>
<p>The EAA aims to make sure that the things we use daily, like products and online content are user-friendly for everyone, no matter where they are in Europe or what abilities they have.</p>
<p>The key objectives and provisions of the EAA include:</p>
<ul>
<li><strong>Making things Accessible for everyone: </strong>The primary objective of the EAA is to ensure that rules about accessibility are the same across the EU. This means that everyone, especially those with disabilities can access and use things like computers, the internet, phones and services easily.</li>
<li><strong>Ensuring Accessibility for Essential Everyday Items</strong>: The EAA focuses on everyday things we use a lot, such as computers, ATMs, e-books, and services from banks. The goal is to make sure these things are accessible to everyone, no matter what.</li>
<li><strong>Designing for everyone: </strong>The EAA encourages the adoption of inclusive design principles.  This entails designing products and services to be as usable as possible by individuals irrespective of their age, or ability</li>
<li><strong>Digital Services for Everyone: </strong>It also looks at digital services, like websites, e-commerce platforms and apps. The rules make sure these digital services are easy to use for people with disabilities.</li>
<li><strong>Clear rules for everyone:</strong> The EAA sets clear rules that countries and businesses must follow. These rules are there to make sure that everyone has a fair chance to use different products and services, and that accessibility is a top priority across the whole of the EU.</li>
</ul>
<p>The EAA will apply to several products and services including:</p>
<ul>
<li>Computers and Phones</li>
<li>ATMs and Banking Services</li>
<li>E-books and Online Reading</li>
<li>Electronic Communication</li>
<li>Ticketing Machines and Public Transportation Services</li>
<li>Websites and Apps from the Government</li>
<li>Healthcare Services Online</li>
<li>E-commerce and Online Shopping</li>
<li>Educational Platforms</li>
<li>Entertainment Platforms</li>
</ul>
<p>The EAA brings important benefits for everyone.</p>
<p>For individuals with disabilities, the EAA ensures that everyday things are designed in a way that everyone can use allowing for equal opportunity and greater independence.</p>
<p>For businesses following the EAA means a wider customer base, and builds a positive reputation by being inclusive for all. The EAA ultimately fosters a more inclusive environment for everyone.</p>
<h2><span class="">How does the EAA impact your website?</span></h2>
<p>The EAA affects both government and private businesses. For public entities, including government agencies and municipalities, it means they have to ensure accessibility in their digital services, websites and buildings.</p>
<p>Private companies that offer products and services falling under the scope of the legislation, such as manufacturers, retailers, and service providers, also need to follow rules to ensure their digital content, devices, and services are accessible to everyone.</p>
<p>These rules include making websites and apps understandable and usable for everyone, and companies have to stick to these rules within a certain time. If they don&#8217;t, they might face penalties.</p>
<p>The EAA does not provide technical accessibility standards for businesses to comply with and it is up to individual member states to decide how to achieve these aims, it is assumed that most will adhere to the Web Content Accessibility Guidelines (WCAG) 2.2 level AA.</p>
<p><strong>WCAG 2.2</strong></p>
<p>WCAG is a set of web accessibility guidelines published by the World Wide Web Consortium.</p>
<p><a href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/">WCAG 2.2</a> consists of 26 guidelines organised under four principles, perceivable, operable, understandable and robust. The guidelines provide a framework for creating accessible websites and digital content. WCAG for example ensures that a website is keyboard accessible for users who cannot operate a mouse to interact with the site. It also ensures the site is readable by setting appropriate font sizes, and sufficient colour contrast.</p>
<p>In conclusion, the European Accessibility Act represents a significant leap towards a more inclusive and accessible digital future in the EU, promoting equal opportunities for all its citizens.</p>
<p>Businesses and entities operating in the region must take proactive measures to ensure compliance, fostering an environment where accessibility is not just a legal requirement but a shared commitment to inclusivity and diversity.</p>
<p><strong data-trid="698">If you need help ensuring your website meets the EAA accessibility requirements, <a href="https://www.friday.ie/contact/" data-trid="700">get in touch</a>.</strong></p>


Navigating Accessibility: What the EU Accessibility Act means for websites

<div class="paragraph-large">
<p>Friday Agency is excited to publish their inaugural <a href="https://www.friday.ie/ux-in-ireland/">UX in Ireland</a> research report. Drawing insights from over 100 relevant business leaders and practitioners, the report highlights perspectives on the maturity of User Experience Design (UX) within various industries.<span class="Apple-converted-space"> </span></p>
</div>
<p>UX maturity, a measure of sophistication in design and research, significantly influences brand perception, customer conversion, retention, and overall success.<span class="Apple-converted-space"> </span></p>
<p>Conducting this study annually aims to provide valuable comparative data for ongoing analysis of UX adoption and the state of the nation.</p>
<p><strong><a href="https://www.friday.ie/ux-in-ireland/">Read the Report</a></strong></p>
<div style="width: 1920px;" class="wp-video">
<video class="wp-video-shortcode" id="video-14848-1" width="1920" height="1080" preload="metadata" controls="controls"><source type="video/mp4" src="https://www.api.friday.ie/wp-content/uploads/2024/01/intro.mp4?_=1" /><a href="https://www.api.friday.ie/wp-content/uploads/2024/01/intro.mp4">https://www.api.friday.ie/wp-content/uploads/2024/01/intro.mp4</a></video></div>

Friday publishes the inaugural UX in Ireland research report

<div class="paragraph-large">
<p class="p1">With the amount of UX tips and tricks readily available at our fingertips, it&#8217;s hard to believe how many websites and other interfaces are still drowning in cognitive noise.</p>
<p class="p1">… but here we are.</p>
</div>
<p class="p1">In a misguided attempt to catch our attention, we still see interfaces that overburden the users&#8217; cognitive load (the amount of mental effort required by the user to absorb new information) by cramming way too much information and irrelevant visuals into any available real estate.</p>
<p>These additional and unnecessary elements are usually referred to as &#8216;cognitive noise&#8217;.</p>
<p class="p1">In this post, we&#8217;ll delve into the concept of cognitive noise and why it needs to be managed.</p>
<h3 class="p1"><b>Understanding Cognitive Noise:</b></h3>
<p class="p1">Cognitive noise in UX design is the static that disrupts the smooth transmission of information from the screen to the user.</p>
<p class="p1">Think of navigating a website with excessive cognitive noise as similar to trying to read a book at a dance rave &#8211; the distraction would be overwhelming. You probably won&#8217;t be able to focus on the plot and will have to keep going back over the same sentence again and again, trying to absorb it.</p>
<p class="p1">Realistically, you’re not going to commit to this scenario for very long and are more likely to ditch the book and grab a glow stick.</p>
<p class="p1">Now, imagine reading that same book in a quiet library, with soft lighting and minimal disturbances. The experience is immersive, allowing you to focus on the narrative without the strobe light-induced chaos.</p>
<p>&nbsp;</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-14825" src="https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-250x111.png" alt="" width="744" height="330" srcset="https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-250x111.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-700x311.png 700w, https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-768x341.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-120x53.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library.png 1277w" sizes="(max-width: 744px) 100vw, 744px" />
<h6><em>&#8220;Navigating a website with cognitive noise is like trying to read a book at a rave.&#8221;</em></h6>
<p>The point is, that a rave isn&#8217;t an appropriate atmosphere for reading a book and the surroundings don&#8217;t match the task at hand. The surroundings make it more difficult to focus by adding cognitive noise, like flashing lights, loud music, and people shouting.</p>
<p>The target audience for a rave isn&#8217;t people who want to read a book and it isn&#8217;t the task that the atmosphere is designed for. Whereas a library should be designed to be conducive to reading, after all, people come to a library to read.</p>
<h3>Necessary Noise</h3>
<p>There will always be some noise in a library, things that might distract but are part of its functioning like the phone might ring or there might be flyers on the table for an upcoming event.</p>
<p>These things will be considered. The phone will probably be on a low volume and the flyers will likely be in a neat pile. If not, the library could start to look and feel chaotic and noisy, and a lot of its target audience would probably stop visiting.</p>
<p>The same goes for interfaces &#8211; there is a level of noise that is unavoidable and acceptable.</p>
<p>But, if it&#8217;s just full of useless information and distracting visual elements, users will look elsewhere for a product that has considered their experience and has optimised the signal-to-noise ratio.</p>
<h3 class="p1"><b>Signal-to-noise Ratio</b></h3>
<p>Generally, Signal-to-noise ratio (SNR) is a term used when referring to audio, but it can also be applied to measuring cognitive noise in UX/UI design.</p>
<p class="p1">It&#8217;s a measure that compares the level of a desired signal (the information the user wants/needs to complete a goal) to the level of background noise (anything unnecessary that distracts the user from completing that goal).</p>
<p class="p1">So for example, a website that prioritises visual distractions over intuitive navigation and relevant information has a low SNR. In contrast, a site that prioritises the users’ goal/journey and uses appropriate visuals to enhance that experience, has a higher SNR.</p>
<h3 class="p1"><b>The University of Terrible UX</b></h3>
<p class="p3"><span class="s1"><a href="http://UAT.edu">UAT.edu</a></span> (University of Advancing Technology) was for a long time held up as a shining example of bad UX design, until its redesign in 2020.</p>
<p class="p3">While the approach to the site&#8217;s navigation was certainly…innovative…it made for a horrible user experience.</p>
<p>&nbsp;</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-14818" src="https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-250x147.png" alt="" width="749" height="440" srcset="https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-250x147.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-700x412.png 700w, https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-768x452.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-120x71.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020.png 1519w" sizes="(max-width: 749px) 100vw, 749px" />
<p>&nbsp;</p>
<p class="p3">Every aspect of the navigation was animated. To find the content you were looking for, you had 2 options, both of which were literal games of cat and mouse.</p>
<p class="p3">You could either:</p>
<p class="p3">A: Follow 20-ish images swirling around a man&#8217;s head, reading the text overlaid on each and trying to click the right one before it disappears behind him.</p>
<p class="p3">Or, B: If you are a very fast reader and incredibly patient, you could wait, ready to immediately click the menu options at the bottom of the page that randomly jump up into view for about 1 second at a time.</p>
<h3 class="p1"><b>The New and Improved University o</b><b>f Terrible UX</b></h3>
<p class="p3">With all of that said, in 2020 UAT launched their new, redesigned website.</p>
<p class="p3">So, surely the overuse of animation and strange navigation patterns are now a thing of the past right?</p>
<p class="p3">Wrong.</p>
<p class="p3">The website has come up with a new and improved way of being incredibly distracting and difficult to navigate.</p>
<p>&nbsp;</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-14820" src="https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1-250x127.png" alt="" width="731" height="371" srcset="https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1-250x127.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1-768x391.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1-120x61.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1.png 1788w" sizes="(max-width: 731px) 100vw, 731px" />
<p>&nbsp;</p>
<p class="p3">Now there is, at least, a clear call to action to choose what type of degree you want more information about, but it is overlaid on a looping video of students posing and flexing for the camera, with ever-changing colours that slide in and out while you try to read the white text.</p>
<p class="p3">Not to mention the annoying animated hover states on cards, the second irrelevant video of said posing students that twirl in and out of view and course a horizontal scroll that makes it easier than ever before to accidentally navigate to whatever webpage you were on previously.</p>
<p class="p3">While the new version of the site is, to be fair, easier to navigate than the old one, the design is still overly noisy, disorganised and distracting.</p>
<p class="p3">It&#8217;s a clear case of a low signal-to-noise ratio, which seems outdated for a university that teaches students to “innovate for the future”.</p>
<h3 class="p1"><b>Minimum clutter, maximum impact</b></h3>
<p class="p1">If UAT is the rave from our initial analogy, then the University of the Arts London (UAL) is the library.</p>
<p class="p1">The homepage features a clean layout, with a simple, but effective colour palette. The strong, professional imagery of the students’ work gives the site its personality while also setting a professional tone and suggesting high standards of work.</p>
<p>&nbsp;</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-14831" src="https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-250x135.png" alt="" width="711" height="384" srcset="https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-250x135.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-700x378.png 700w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-768x414.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-1536x829.png 1536w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-120x65.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1.png 1790w" sizes="(max-width: 711px) 100vw, 711px" />
<p>&nbsp;</p>
<p class="p1">Simple animations are reserved only for hover states, so there are no distracting moving elements vying for our attention, making it much easier to see what is available on the site.</p>
<p class="p1">This website has a high signal-to-noise ratio. It is much easier for a user to complete a specific task on this site or to even just browse because  the navigation and information are forthcoming and not overshadowed by clutter.</p>
<h3 class="p1"><b>Cleaning Up the Clutter</b></h3>
<p class="p1">In conclusion, the battle against cognitive noise is an ongoing challenge in the ever-evolving landscape of UX design.</p>
<p class="p1">Enjoyable and effective user experiences are created by embracing simplicity and decluttering digital spaces, rather than cramming as much as possible into a small space.</p>
<p class="p1">Design that balances intuitive navigation and minimal cognitive noise, while still portraying brand personality, is key to a successful interface. And if your design doesn&#8217;t achieve this, then it&#8217;s probably time for a spring cleaning to declutter for your users.</p>
<p class="p1">After all, less noise will translate to a better user experience, reduces your bounce rates, and increases conversion.</p>
<p><strong>If you need help identifying the signal from the noise for an improved <a href="https://www.friday.ie/expertise/user-experience/">user experience</a>, <a href="https://www.friday.ie/contact/">get in touch</a> with our team.</strong></p>


Cutting Through the Clutter: Cognitive Noise in UX Design

<div class="paragraph-large">
<p>It’s an exciting week for the Irish design industry, and not just because Christmas is around the corner…</p>
<p>The Irish Government have just <a href="https://www.gov.ie/en/press-release/6a866-action-plan-for-designing-better-public-services-launched-by-minister-donohoe/" target="_blank" rel="noopener">announced</a> a progressive roadmap for embedding design in the public service. <a href="https://www.gov.ie/en/publication/1e3e2-action/" target="_blank" rel="noopener">The Action Plan for Designing Better Public Services</a> was launched by Minister Paschal Donohoe and is a successor to the ‘Our Public Service 2020’ framework.</p>
</div>
<p>The primary objective of the plan is to enable all public service organisations to embrace and embed design thinking as a core part of their approach over the next two years.</p>
<p>It is encouraging to see terms like ‘UX’, ‘Journey Mapping’ and ‘doublediamond processes’ referenced in a Government roadmap. This is real recognition of the value and benefits good design can have on the public sector and beyond. What also stands out is the clear distinction drawn between paying lip service to design and adopting an effective design approach.</p>
<a href="https://www.gov.ie/en/publication/1e3e2-action/" target="_blank" rel="noopener"><img loading="lazy" decoding="async" class="aligncenter wp-image-14801 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/12/DS.png" alt="" width="2000" height="942" srcset="https://www.api.friday.ie/wp-content/uploads/2023/12/DS.png 2000w, https://www.api.friday.ie/wp-content/uploads/2023/12/DS-250x118.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/12/DS-700x330.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/12/DS-768x362.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/12/DS-1536x723.png 1536w, https://www.api.friday.ie/wp-content/uploads/2023/12/DS-120x57.png 120w" sizes="(max-width: 2000px) 100vw, 2000px" /></a>
<p>There are three focus themes within the action plan:</p>
<hr />
<h5><b>Demonstrate Design Commitment </b></h5>
<p>The first theme covers the actions required that demonstrate commitment to implementing the discipline of design by providing the necessary investment, funding and resources that are required to deliver real progress and change.</p>
<ol>
<li>Encourage Design Integration</li>
<li>Establish Design Funding</li>
<li>Leverage Design Expertise<a href="https://www.ops.gov.ie/designprinciples/"><br />
</a></li>
</ol>
<hr />
<h5><b>Increase Design Capability</b></h5>
<p>The following actions aim to democratise design by making skills, tools, and training accessible to all, ensuring everyone can contribute their unique talents to enhance public services.</p>
<ol>
<li>Develop Design Resources</li>
<li>Enhance Design Skills</li>
<li>Foster Collaborative Experiences</li>
</ol>
<hr />
<h5><b>Foster a Design Culture</b></h5>
<p>Actions to foster a design culture throughout our public service, fostering a community that integrates design into daily language and behaviours, promoting collaboration and advocacy.</p>
<ol>
<li>Promote Design Successes</li>
<li>Facilitate Design Challenges</li>
<li>Foster a Design Community<a href="https://assets.gov.ie/255872/e6feb71e-0199-4061-894e-6f8e80bafad1.pdf"><br />
</a></li>
</ol>
<hr />
<p>This plan envisions Ireland as a global exemplar of design-led public service transformation, emphasising the importance of a design approach in creating a more efficient and inclusive future.<span class="Apple-converted-space"> </span></p>
<p>Overall, <a href="https://www.gov.ie/en/publication/1e3e2-action/" target="_blank" rel="noopener">the plan</a> appears comprehensive, well-researched, and strategic, providing a solid foundation for the integration of design principles into the Irish public service, something everyone will benefit from.</p>
<p>This is a shot in the arm for the Irish design industry as a whole. The value of good design has been recognised at a Government level and this should have a knock on effect in the private sector over time.</p>
<p>At Friday, we’ve had the pleasure of collaborating on a number of public service design, research and marketing projects in 2023 and we look forward to continuing this work into 2024 and beyond.</p>
<p>Our observations indicate a shift in the design maturity within the public sector and this new Action Plan will have more substantial influence.<span class="Apple-converted-space"> </span></p>
<p>The future of Irish design looks bright.</p>


Government Announce a Roadmap for Embedding Design in the Public Service

<div class="paragraph-large">
<p>From a quick back of a napkin calculation over lunch, the UX team at Friday discovered that we have collectively sat through over 500 hours of user testing (that&#8217;s 20 days without sleep!). Our team has conducted user testing on many, many apps and websites, either during the redesign process or as part of UX audits.</p>
</div>
<p>It’s fascinating looking at the patterns of human behaviour that emerge by observing people using apps and websites.</p>
<p>We figured it would be fun to compile some of the most common issues that regularly pop up across user testing.<span class="Apple-converted-space"> </span> There are many myths about what end users want or expect from an app or website &#8211; most of these are based on pure assumptions and personal bias. We hope to dispel some of these myths.<span class="Apple-converted-space"> </span></p>
<p>&nbsp;</p>
<h5><b>1. Where’s the Home button?</b></h5>
<p>Everyone knows that when visiting a website, if you click the logo it will bring you back to the homepage, right?<span class="Apple-converted-space"> </span></p>
<p>Wrong. This is something we always observe in user testing when we prompt participants to go back to the home screen. You’d be surprised how many people use the back button in the absence of a home button. The tech-savvy will use the logo but we would hazard a guess that somewhere in the region of 50-60% of people will not know this. Implicit as well as explicit links are needed until everyone is categorised as ‘tech savvy’!</p>
<p>&nbsp;</p>
<h5><b>2. What does this company actually do?</b></h5>
<p>The opening title on your website holds immense significance as a communication tool. It serves as the stage-setter, introducing users to your identity, purpose, and approach. Ambiguity often leads to users navigating away. While I won&#8217;t delve into perfecting the art of writing titles for the hero area of a website, I will say that a few minutes into testing, it&#8217;s not uncommon for a user to ask “What does this company actually do?”.</p>
<p>Consider these two homepage examples from within the same industry, providing a similar service. Examining the first one on the left, does its title readily reveal its product/service or even industry? On the other hand, Cognosis (right) takes a more explicit approach. Their message conveys a simple mission of aiding business growth. In a single line, users discern if they&#8217;re in the right place and can proceed accordingly. If your brand is not a household name, be clear and direct about who you are and what you do.</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14567" src="https://www.api.friday.ie/wp-content/uploads/2023/08/compare-1.png" alt="" width="1769" height="1474" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/compare-1.png 1769w, https://www.api.friday.ie/wp-content/uploads/2023/08/compare-1-250x208.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/compare-1-700x583.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/compare-1-768x640.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/compare-1-1536x1280.png 1536w, https://www.api.friday.ie/wp-content/uploads/2023/08/compare-1-120x100.png 120w" sizes="(max-width: 1769px) 100vw, 1769px" />
<p>&nbsp;</p>
<h5><b>3. Don’t make me read!</b></h5>
<p>Another observation we often note is how much people don’t like to read, users will scroll and scan the page looking for something that is a visual match with the expectation they have in their head. In most cases, users might read buttons, calls to action or titles (if they are short) but they will not read any more than a couple of lines of text unless there is a clear task and they have motivation to do so.<span class="Apple-converted-space"> </span></p>
<p>In our experience, the younger the audience the less patient they are when it comes to reading. Sorry, but unfortunately nobody wants to read your 15,000-word mission statement! Designing for scan reading is key to conversion.</p>
<p>&nbsp;</p>
<h5><b>4. Icons (for everything)</b></h5>
<p>While icons can enhance usability, communication, and aesthetics, overusing icons can lead to various issues and challenges. An assumption might be made that everyone knows what a square with a dot in the middle of it is! The reality is that there is a very small set of truly universally recognisable icons. Sometimes you’ll need to add some text beside an icon to help communicate it better but is this the right solution? We see it all the time, incomprehensible icons simply get ignored, so it&#8217;s worth making sure your icons make sense and that means testing.</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14576" src="https://www.api.friday.ie/wp-content/uploads/2023/08/icons-scaled.jpg" alt="" width="2560" height="1178" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/icons-scaled.jpg 2560w, https://www.api.friday.ie/wp-content/uploads/2023/08/icons-250x115.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/icons-700x322.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/icons-768x353.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/icons-1536x707.jpg 1536w, https://www.api.friday.ie/wp-content/uploads/2023/08/icons-2048x942.jpg 2048w, https://www.api.friday.ie/wp-content/uploads/2023/08/icons-120x55.jpg 120w" sizes="(max-width: 2560px) 100vw, 2560px" />
<p>&nbsp;</p>
<h5><b>5. Burger menus</b></h5>
<p><a href="https://www.friday.ie/blog/not-such-a-tasty-burger-the-case-against-hidden-menus-in-web-design/">Mary discussed burger menus a few years ago</a>; how they can be a bit of a blind spot for users and raise issues with content discoverability. Burger menus are often a necessary evil on mobile apps and websites. They have a clear function of housing navigation that simply cannot be presented out front because of space constraints. It is amazing how little people actually use them, at least in our user testing, people are much quicker to scroll to find what they are looking for (see my next point). It&#8217;s like users see them as a last resort for navigation when all else fails.<span class="Apple-converted-space"> </span></p>
<p>Take note: Never, ever use a burger menu on a desktop website, you have the space for navigation, use it!</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14568" src="https://www.api.friday.ie/wp-content/uploads/2023/08/website-navigation-hamburger-menu-icons-set-flat-website-menu-icons-with-rounded-and-sharp-edges-mobile-app-menu-icons-set-of-ui-ux-design-elements-app-burger-icons-stock-eps10-vector.jpg" alt="" width="800" height="340" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/website-navigation-hamburger-menu-icons-set-flat-website-menu-icons-with-rounded-and-sharp-edges-mobile-app-menu-icons-set-of-ui-ux-design-elements-app-burger-icons-stock-eps10-vector.jpg 800w, https://www.api.friday.ie/wp-content/uploads/2023/08/website-navigation-hamburger-menu-icons-set-flat-website-menu-icons-with-rounded-and-sharp-edges-mobile-app-menu-icons-set-of-ui-ux-design-elements-app-burger-icons-stock-eps10-vector-250x106.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/website-navigation-hamburger-menu-icons-set-flat-website-menu-icons-with-rounded-and-sharp-edges-mobile-app-menu-icons-set-of-ui-ux-design-elements-app-burger-icons-stock-eps10-vector-700x298.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/website-navigation-hamburger-menu-icons-set-flat-website-menu-icons-with-rounded-and-sharp-edges-mobile-app-menu-icons-set-of-ui-ux-design-elements-app-burger-icons-stock-eps10-vector-768x326.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/website-navigation-hamburger-menu-icons-set-flat-website-menu-icons-with-rounded-and-sharp-edges-mobile-app-menu-icons-set-of-ui-ux-design-elements-app-burger-icons-stock-eps10-vector-120x51.jpg 120w" sizes="(max-width: 800px) 100vw, 800px" />
<p>&nbsp;</p>
<h5><b>6. Everybody Scrolls</b></h5>
<p>When it comes to mobile website design, navigation can be tricky. We have looked at the dreaded burger menu and there still seems to be a high level of anxiety about what is ‘above the fold’ coming from website owners, a concept that goes back to the beginning of the printing press.<span class="Apple-converted-space"> </span></p>
<p>When it comes to above the fold, sure, we need to ensure the most engaging content is visible, but users will and do scroll. Scrolling is the most common navigation action a user will take, people are much more inclined to scroll in order to find what they are looking for over going into a menu.</p>
<p>When it comes to above ‘the fold’, use discipline. Cramming as much as possible above the fold will result in poor engagement, users won’t know where to look, which leads me beautifully on to my next point…</p>
<p>&nbsp;</p>
<h5><b>7. Options: Don’t make me think!</b></h5>
<p>You know when you go to a restaurant and they hand you a multi-page menu that is like a short novel, you can’t make a decision and end up panic ordering the cauliflower and squid risotto (and later regretting it).<span class="Apple-converted-space"> </span></p>
<p>Too many options cause what we call increased cognitive load and this usually ends in user frustration. We’ve always noticed when a user is presented with more than 3 or 4 options at any one time, they get flustered. A flustered user often walks away. Keep it simple.</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14569" src="https://www.api.friday.ie/wp-content/uploads/2023/08/convert-website-visitors-3a.jpg" alt="" width="1200" height="700" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/convert-website-visitors-3a.jpg 1200w, https://www.api.friday.ie/wp-content/uploads/2023/08/convert-website-visitors-3a-250x146.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/convert-website-visitors-3a-700x408.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/convert-website-visitors-3a-768x448.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/convert-website-visitors-3a-120x70.jpg 120w" sizes="(max-width: 1200px) 100vw, 1200px" />
<h5><b>8. Put it in a Carousel</b></h5>
<p>While carousels can seem like a good way to display a variety of content in a limited space, they come with several pitfalls that can negatively impact user experience. Contrary to belief, just because you have a carousel doesn’t mean users will engage with it, in fact, they have low engagement and interaction rates.<span class="Apple-converted-space"> </span></p>
<p>Unfortunately, very few users will get to see the 23rd frame of your carousel but they will notice how long the screen takes to load. In our experience, most users just scroll past them unless something really catches their eye. Vitaly Friedman from Smashing Magazine created this nice little chart showing how fast engagement rates fall on the second and third slides in a carousel.</p>
<div id="attachment_14565" style="width: 1355px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14565" class="wp-image-14565 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/08/1692271189974.png" alt="" width="1345" height="1000" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/1692271189974.png 1345w, https://www.api.friday.ie/wp-content/uploads/2023/08/1692271189974-250x186.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/1692271189974-700x520.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/1692271189974-768x571.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/1692271189974-120x89.png 120w" sizes="(max-width: 1345px) 100vw, 1345px" /><p id="caption-attachment-14565" class="wp-caption-text">Credit: Vitaly Friedman, Smashing Magazine</p></div>
<h5></h5>
<h5><b>9. Meeting Expectations</b></h5>
<p>Every user testing session and task begins with asking the participant what they expect before they start. Based on this input, we’ll have a good idea if we’re going to get positive feedback or not. If we can meet the users expectations through intuitive interactions, trust-building, and ultimately a positive user experience, thats a win, it’s as simple as that.<span class="Apple-converted-space"> </span></p>
<p>The only way to establish user expectations is research.</p>
<p>&nbsp;</p>
<h5><b>10. Positive Moments</b></h5>
<p>Sometimes life can be mundane, especially when you have your head stuck in a screen. We talk about how good UX can be achieved by meeting users&#8217; expectations, great UX is about exceeding them. A simple way to do this is to consider designing for emotional delight. Sounds a bit fluffy? Just bear with me!</p>
<p>A simple, maybe subtle and unexpected animation, message or sound that makes the user smile. Humour goes a long way and helps lift your<span class="Apple-converted-space"> </span>brand&#8217;s personality. We’ve seen faces light up with well-thought-out micro-interactions or interface feedback that leaves the user with a positive impression, this reflects on the brand.</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14570" src="https://www.api.friday.ie/wp-content/uploads/2023/08/2.gif" alt="" width="800" height="200" /> <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14571" src="https://www.api.friday.ie/wp-content/uploads/2023/08/3.gif" alt="" width="800" height="200" /> <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14573" src="https://www.api.friday.ie/wp-content/uploads/2023/08/a.gif" alt="" width="800" height="200" /></p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14574" src="https://www.api.friday.ie/wp-content/uploads/2023/08/4-1.gif" alt="" width="800" height="200" /></p>
<p>Hopefully, these points will help you avoid some of the most common pitfalls in UX design. Do <a href="https://www.friday.ie/contact/">get in touch</a> if you need help with <a href="https://www.friday.ie/expertise/user-experience/usability-testing/">user testing</a> or any area of <a href="https://www.friday.ie/expertise/user-experience/ux-research/">UX research</a> and <a href="https://www.friday.ie/expertise/user-experience/ux-design-dublin/">UX/UI design</a>.</p>


10 Things We’ve Learned From Over 500 Hours of User Testing

<div class="paragraph-large">
<p>We&#8217;re delighted to share that we&#8217;ve been nominated again in this year&#8217;s Digital Media Awards for Best Integrated Campaign and Best Website.</p>
<p>Following our win for <a href="https://www.friday.ie/blog/friday-win-best-in-e-commerce-at-the-spider-awards/">Best in eCommerce</a> at the Spider Awards earlier this year, we&#8217;re hoping to add to that in a couple of weeks&#8217; time.</p>
</div>
<h3><b>Best Integrated Campaign</b></h3>
<p>We are excited that our digital strategy and marketing work with the brilliant team at <a href="https://www.iqeq.com">IQ-EQ</a> has been nominated here.</p>
<p>This category recognises brands and businesses that demonstrate successful results across different digital channels using best practices, innovation and excellence in promoting, advertising, and communicating their services or products.</p>
<h3><b>Best Website</b></h3>
<p>Friday Agency has also been nominated in the best website category for our work with leading games developer, <a href="https://www.starbreeze.com/">Starbreeze</a>.</p>
<p>The category recognises best practices in navigation, UX and UI design, use of content and the positive results related to the overall user experience.</p>
<p>These nominations are further testament to the talent and hard work of the Friday team and our brilliant clients who put their trust in our people and process.</p>
<p>The event takes place on Friday, 29th September in the Clayton Burlington hotel.</p>


Friday nominated again at the DMAs, including Best Integrated Campaign

<div class="paragraph-large">
<p>Websites are the central supporting pillar of most online presences and often the first brand touchpoint. When building a website there are generally two options &#8211; a template or page builder, or a custom design and build. But which option is best?</p>
</div>
<p>The wide availability of templates and page builders has made it easier and faster to set up a website. While on the surface this seems positive, it may not be the best approach.</p>
<p>Web templates and page builders may be quick, but they have several drawbacks. The designs can be generic with less room to customise and functionality can be limited.</p>
<p>On the other hand, a custom web design can help your business stand out from all the digital noise. It&#8217;s tailored to your brand&#8217;s unique vision, values, and goals. You have the freedom to choose your colour scheme, fonts, and overall aesthetic in line with your brand.</p>
<p>A custom website can also be designed with the user experience in mind something we at Friday value greatly, thus ensuring that visitors can easily find the information they need and navigate the site with ease.</p>
<h2>Disadvantages of Template Websites</h2>
<h3>Predetermined Design</h3>
<p>While templates offer speed and convenience, they can be limiting by confining you to a predefined design. These templates often provide only minimal room for customisation, making it challenging to seamlessly integrate them with your unique brand identity.</p>
<h3>Excess Code</h3>
<p>Templates are designed with a broad spectrum of businesses in mind, encompassing a diverse array of features to cater to a wide audience.</p>
<p>However, this inclusivity can result in an abundance of options, some of which might align with your requirements while many others may not.</p>
<p>Consequently, this can introduce unnecessary bloat and surplus code into your website, potentially impeding its performance and speed. This is bad for the user and for your SEO.</p>
<img loading="lazy" decoding="async" class="size-large wp-image-14547 aligncenter" src="https://www.api.friday.ie/wp-content/uploads/2023/08/hal-gatewood-tZc3vjPCk-Q-unsplash-700x467.jpg" alt="" width="700" height="467" srcset="https://www.api.friday.ie/wp-content/uploads/2023/08/hal-gatewood-tZc3vjPCk-Q-unsplash-700x467.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2023/08/hal-gatewood-tZc3vjPCk-Q-unsplash-250x167.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2023/08/hal-gatewood-tZc3vjPCk-Q-unsplash-768x512.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2023/08/hal-gatewood-tZc3vjPCk-Q-unsplash-1536x1024.jpg 1536w, https://www.api.friday.ie/wp-content/uploads/2023/08/hal-gatewood-tZc3vjPCk-Q-unsplash-2048x1365.jpg 2048w, https://www.api.friday.ie/wp-content/uploads/2023/08/hal-gatewood-tZc3vjPCk-Q-unsplash-120x80.jpg 120w" sizes="(max-width: 700px) 100vw, 700px" />
<p>&nbsp;</p>
<h2>Advantages of Custom Websites</h2>
<h3>Design Tailored to Your Brand</h3>
<p>With a custom website, the level of customisation and personalisation is virtually limitless. Designers can work closely with clients to ensure that every aspect of the website aligns perfectly with their brand guidelines, effectively conveying their core beliefs and values.</p>
<p>Custom websites enable businesses to maintain consistent branding across all digital platforms. From the logo and colour scheme to the typography and imagery, every element can be carefully tailored to reinforce the brand identity and leave a lasting impression on visitors.</p>
<h3>User Experience-Optimised Design</h3>
<p>A custom website can be designed with your user in mind. For any website, <a href="https://www.friday.ie/expertise/user-experience/" data-trid="232">UX</a> will play a pivotal role in ensuring user satisfaction and improving the UX design of a website can enable a business to increase its conversion rate by &#8220;as high as 400%&#8221; (<em>Source: <a href="https://www.forrester.com/report/The+Six+Steps+For+Justifying+Better+UX/-/E-RES117708" target="_blank" rel="noopener">Forrester Research</a></em>).</p>
<h3>Increased Search Performance</h3>
<p>Search engine optimisation (SEO) is the practice of optimising a website to improve its ranking on search engines. The better your SEO, the higher your site will rank.</p>
<p>Many factors can help SEO, and keeping them in mind when designing and building your custom-coded website will ensure that it is built perfectly to maximise your search ranking.</p>
<h3>Ability to Evolve in Response to Business Changes</h3>
<p>As your business grows, its digital platforms must adapt along with that growth. A custom experience makes it easier to add new features or changes as you need.</p>
<h3>Custom functionality</h3>
<p>Different businesses require their websites to perform various tasks, whether it&#8217;s an e-commerce solution, a location finder to show all business locations, or custom functionality not included with the base CMS.</p>
<p>A pre-built theme will limit you to the basic functionality of the CMS. To extend its capabilities, you&#8217;ll need to add plugins.</p>
<p>However, plugins can add a lot of unnecessary code to your site, as you may only need to use a small portion of their functions. With a custom site, your developer can build the exact functionality you need without any unnecessary code or plugins.</p>
<h3>Flexible CMS functionality</h3>
<p>Most business websites run on a content management system (CMS) to allow for easy content changes across the site. However, with a base install and template, you will be limited to only changing what the template allows.</p>
<p>Your developer can make all content editable and add custom content types to suit your business needs.</p>
<h3>So</h3>
<p>In a dynamic digital landscape, the choice between templates and custom design for your website is pivotal. While templates provide a quick start and have their place for small sites where you want something up and running pronto, they can stifle your brand&#8217;s uniqueness and compromise user experience.</p>
<p>On the other hand, custom websites align closely with your vision, offering limitless customisation, optimised user experience, and enhanced SEO performance.</p>
<p>A custom-built user experience will resonate with your audience, reinforce your values, and empower your business.</p>
<p>If you are ready to stand out <a href="https://www.friday.ie/contact/">get in touch</a> and embrace the power of custom web design.</p>


The Power of a Custom Web Experience

<p class="p1">The Three-Click-Rule is an unofficial usability heuristic that feeds into the notion that we should be counting clicks to measure usability. It states that if users don&#8217;t find the information they are looking for within three clicks, they will get frustrated and leave the website.</p>
<p class="p1">However, in recent years, the notion that usability can be accurately measured by the number of clicks needed has been widely debunked.</p>
<p class="p1">Yet, this myth still manages to pop up from time to time and presents a challenge for UX designers when advocating for intuitive navigation.</p>
<p class="p1">So, we are going explore the origins of the 3-click myth and shed light on why reducing clicks doesn’t automatically lead to a better user experience.</p>
<h3 class="p2"><b>The origin of the 3-click-rule</b></h3>
<p class="p1">The origin of this ‘rule’ is fairly ambiguous, but the first apparent definition appears in Jeffrey Zeldmans’ book ‘Taking Your Talent to the Web’ (2001)</p>
<p class="p1">Zeldmans reasoning for this rule comes down to the users’ very real need for instant gratification. But, there’s no evidence to show that this rule even addresses that need. Zeldman himself says that it’s more of a suggestion than an ironclad rule. So, why he put the word ‘rule’ in the title is questionable.</p>
<h3 class="p2"><b>Applying the 3-click-rule</b></h3>
<p class="p1">If we look at websites from 2001, when this ‘rule’ was in effect, we are confronted with sprawling navigation bars and pages full of text links. Somebody is clearly trying to get us from A to B in under 3 clicks (at the expense of aesthetics).</p>
<div id="attachment_14505" style="width: 543px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14505" class="wp-image-14505 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/07/icq.png" alt="" width="533" height="342" srcset="https://www.api.friday.ie/wp-content/uploads/2023/07/icq.png 533w, https://www.api.friday.ie/wp-content/uploads/2023/07/icq-250x160.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/07/icq-120x77.png 120w" sizes="(max-width: 533px) 100vw, 533px" /><p id="caption-attachment-14505" class="wp-caption-text">2001 homepage for ICQ.com</p></div>
<p class="p1">But what happens when you have to fish through a load of options to find what you’re looking for?</p>
<p class="p1">It slows you down, you are overwhelmed with choices and you waste time searching for the right option. It&#8217;s known as <i>the paradox of choice </i>and it&#8217;s the perfect recipe for user frustration.</p>
<h3 class="p1"><b>The Paradox of Choice in Action</b></h3>
<p class="p2">The paradox here is that while users are most attracted to the idea of having lots of choices,  it’s actually easier to make a choice when faced with fewer options.</p>
<p class="p3">A study titled <em>&#8220;When choice is demotivating: Can one desire too much of a good thing?&#8221;</em> (<a href="https://psycnet.apa.org/record/2000-16701-012">Iyengar, S. S., &amp; Lepper, M. R.</a>, 2000) demonstrates this nicely.</p>
<p class="p3">In this study, researchers set up a tasting display of 24 different jars of jam in a supermarket. All of that selection appealed to a large number of shoppers, with 60% stopping to taste the options. They then reduced the display to 6 options the following day and attracted fewer people.</p>
<p class="p3">But there&#8217;s a plot twist.</p>
<p class="p3">Guess which display resulted in more sales than the other? Well, it turns out that people are 10 times more likely to make a purchase when presented with fewer options.</p>
<p>&nbsp;</p>
<div id="attachment_14502" style="width: 762px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14502" class="wp-image-14502" src="https://www.api.friday.ie/wp-content/uploads/2023/07/jam-graphic.png" alt="" width="752" height="451" /><p id="caption-attachment-14502" class="wp-caption-text">The jam experiment results</p></div>
<h3 class="p1"><b>The paradox of choice vs. The 3-click-rule</b></h3>
<p class="p2">So how does all of this relate to the usability of a website, app or any digital screen?</p>
<p class="p2">Well, the 3-click rule suggests displaying all (or most) options upfront. But, now we know that this will overwhelm our users and lead to fewer conversions. So, it would be better to throw that rule in the bin and display only a few options at a time, allowing for a few more clicks.</p>
<p class="p2">It&#8217;s important to note, these extra clicks should be meaningful, they should lead the user down the path to their desired content. Also, we aren’t going to get rid of the rest of the options, we are going to categorise the options into 6(ish) logical groups.</p>
<p class="p2">Why 6? Because people only have the capacity to remember 7 pieces of new information at a time. So, we aim for 6 to make it as easy as possible, and it allows for an addition that may come at a later date.</p>
<p class="p2">So in terms of our jam metaphor &#8211; we might first let the user choose which fruit they want their jam to be made from, and then show them only the jams made from that fruit. This way the user can quickly narrow down their options to ones that are relevant to them and their goal.</p>
<p class="p2">But there are many categorisation options and their suitability for the job depends on the site, its purpose and its target audience. So, how do we choose the right categories?</p>
<p class="p2">Simple answer, we ask the user.</p>
<h3 class="p1"><b>User research for an intuitive navigation</b></h3>
<p class="p2">Arguably the best way (but not the only way) to find out user expectations of content categorisation is through a card-sorting exercise. We can even use this to find out what they would expect the names of the categories to be.</p>
<p class="p2">We can then develop an information architecture based on these categories. After that, we can conduct tree testing to validate the new navigation and find areas that need improvement.</p>
<p class="p2">By including our users in the design process, we ensure that our navigation is intuitive and user-centric.</p>
<div id="attachment_14504" style="width: 724px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14504" class="wp-image-14504 " src="https://www.api.friday.ie/wp-content/uploads/2023/07/jam-cards.png" alt="" width="714" height="405" /><p id="caption-attachment-14504" class="wp-caption-text">Example of a card sort</p></div>
<h3 class="p1"><b>Categorisation for larger websites </b></h3>
<p class="p2">Categorisation for a larger website, with more content and pages, can be a bit more complex. In these cases, categorisation will likely require more levels. To explain this a bit better, I’m going to go back to our jam metaphor one more time.</p>
<p class="p1">On a jam company’s website, the primary user goal is to buy jam from an already limited number of options. So, naturally, the user should achieve their goal with a small number of clicks.</p>
<p class="p1">Finding the same jam on a supermarket website that stocks it among hundreds of other products is a different story.</p>
<p class="p1">On the supermarket site, jam is just a small piece of the information architecture puzzle. Here, we have to look at more layers in terms of parent, child and grandchild categories, as well as filters.</p>
<p class="p2">So the user flow to a particular strawberry jam might look like this:</p>
<p class="p2">Homepage &gt; Pantry &gt; Preserves and Spreads &gt; Jams &gt; Desired jam.</p>
<h3>Meaningful clicks</h3>
<p class="p2">The user now has at least 4 clicks to achieve their goal on the supermarket site, but each click is meaningful. They are on an intentional journey, narrowing their options and getting closer to the content they want, in the least overwhelming way possible.</p>
<p class="p2">If we applied the 3-click-rule here, we would get the user to a page displaying every brand and type of jam that the store has to offer, putting them in the exact situation we are trying to avoid, where only 3% of our website visitors will actually buy jam.</p>
<p class="p2">Now that might not seem like a big deal in terms of jam because people will probably buy the rest of their groceries and a sale will still be made.</p>
<p class="p2">But what about on a hotel booking website, where the user is there to make one single big purchase?</p>
<p class="p2">If we make users fish through every hotel in the world, in the interest of saving clicks, we are going to lose them to a more intuitive website.</p>
<p class="p2">And that is exactly why we should not be counting clicks as a measure of the usability of a website, app or any digital screen.</p>
<h3 class="p1"><b>What to keep in mind</b></h3>
<p class="p2">If you take anything away from reading this, let it be this:</p>
<ul class="ul1">
<li class="li2">The 3-click rule is a myth.</li>
<li class="li2">Users prefer to make a few extra clicks than to decode tonnes of information.</li>
<li class="li2">Stop counting clicks and start making each click count.</li>
</ul>
<p>Also, if you like jam (or award-winning work), check out the experience we created for Follain at: <a href="http://www.follain.ie">www.follain.ie</a>.</p>
<p><strong>If you&#8217;re interested in improving your websites <a href="https://www.friday.ie/expertise/user-experience/">user experience</a> through intuitive navigation, get in touch with <a href="https://www.friday.ie/contact/">Friday</a></strong></p>


Counting Clicks: Why Fewer Clicks Doesn’t Guarantee Better User Experience

<p>User Experience (UX) is a fundamental component of successful digital marketing strategies. And rightly so.</p>
<p>From e-commerce websites to mobile apps, <a href="https://www.friday.ie/expertise/user-experience/">UX</a> plays a pivotal role in ensuring user satisfaction, influencing purchasing decisions, and ultimately determining whether customers become loyal advocates or turn to the competition.</p>
<p>As an agency, we’re consistently highlighting the essential role of UX in <a href="https://www.friday.ie/expertise/digital-marketing/">digital marketing</a>, including its impact on user-centric marketing, trust and credibility, SEO, and the ability to drive customer loyalty.</p>
<p>We firmly believe (and why wouldn’t we?) that if you&#8217;re spending money to get users to your brand experience then you should give them the best one possible.</p>
<p>I’ll say it more than once in this blog post, but I can’t help myself: it’s a no-brainer.</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14476" src="https://www.api.friday.ie/wp-content/uploads/2023/07/no-brainer.jpeg" alt="no-brainer" width="624" height="351" srcset="https://www.api.friday.ie/wp-content/uploads/2023/07/no-brainer.jpeg 624w, https://www.api.friday.ie/wp-content/uploads/2023/07/no-brainer-250x141.jpeg 250w, https://www.api.friday.ie/wp-content/uploads/2023/07/no-brainer-120x68.jpeg 120w" sizes="(max-width: 624px) 100vw, 624px" />
<h3><strong>User-Centric Marketing</strong></h3>
<p>In the modern digital landscape, a shift towards user-centric marketing has become imperative. Gone are the days of a purely product-centric approach.</p>
<p>User-centric marketing is a strategy that prioritises the needs, preferences, and behaviours of the consumer above all else.</p>
<p>Instead of making assumptions about what customers want (often based on complacency or ego), businesses leverage data and insights to gain a deeper understanding of their target audience.</p>
<p>The UX process utilises usability testing, user research, analytics deep dives, UX audits and other core activities to take you out of your own building and into the minds of your customers.</p>
<p>This knowledge allows us to create personalised experiences that resonate on an individual level.</p>
<p>Unfortunately, not enough businesses recognise the importance of focusing on the user and their experience throughout the marketing journey. UX lies at the heart of this approach, aiming to provide users with seamless, efficient, and enjoyable experiences when interacting with digital products or services.</p>
<h3><strong>Every Touchpoint</strong></h3>
<p>When businesses prioritise UX, they simplify the path to conversion and address the user&#8217;s needs at every touchpoint.</p>
<p>By doing so, they create a frictionless experience that makes it easier for potential customers to navigate through their website, understand the product or service, and ultimately make a purchase.</p>
<p>This user-centric approach has been proven to significantly improve conversion rates, resulting in higher business success.</p>
<p>There is no simpler way to put this: If your website converts better then EVERY digital marketing channel converts better.</p>
<p>It <em>is</em> that straightforward.  A no-brainer, if you will (sorry!).</p>
<p>To implement user-centric marketing effectively, businesses must understand their customers&#8217; needs, pain points, and motivations.</p>
<p>By developing a comprehensive understanding of their target audience, businesses can create valuable solutions that address specific challenges or desires. Moreover, effective communication of these solutions is key to establishing a meaningful connection with customers.</p>
<h3><strong>Why Listen to Users?</strong></h3>
<p>At its core, UX is all about enhancing the overall experience for customers. By prioritising the needs and wants of customers, businesses improve their satisfaction and engagement levels.</p>
<p>This, in turn, leads to increased conversions, repeat business, and positive word-of-mouth.</p>
<p>Businesses need to cut through the noise and deliver relevant and tailored experiences now. Today&#8217;s consumers are inundated with marketing messages, making it, at best, noisy and annoying. Consumers are tuning out&#8230;</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14477" src="https://www.api.friday.ie/wp-content/uploads/2023/07/giphy.gif" alt="" width="480" height="320" />
<p>By leveraging customer data and analytics, businesses can gain insights that enable them to customise interactions, products, and services to match individual preferences. This personalised approach resonates with customers, leading to higher engagement and conversion rates.</p>
<p>UX serves as the bridge that connects businesses with their customers in the digital world. It encompasses every aspect of a user&#8217;s interaction with a digital product or service, ensuring that they find value in what businesses provide.</p>
<p>A good UX design goes way beyond aesthetics; it focuses on creating intuitive and user-friendly interfaces, delivering seamless navigation, and providing relevant content.</p>
<p>From the moment users land on a website to navigating through products or services and reaching the final checkout, the entire customer journey should be smooth and enjoyable.</p>
<p>UX design utilises data-driven decision-making to continually refine and improve the user experience, aligning it with the evolving needs and expectations of customers.</p>
<p>So don’t be a data denier… we have enough of those! Let the data lead the way.</p>
<h3><strong>Building Trust and Credibility</strong></h3>
<p>In the digital (and mostly faceless) world, building trust and credibility is more challenging yet more important than ever.</p>
<p>Establishing trust through UX design is crucial to creating meaningful connections with users.</p>
<p>A user-friendly and intuitive website not only enhances the user experience but also builds confidence in the brand. When users find a website easy to navigate, aesthetically pleasing, and functional, they develop trust in the brand&#8217;s credibility.</p>
<p>Transparency is another critical factor in building trust. In an era of data breaches and online scams, customers are increasingly concerned about their privacy. Businesses must be clear about their privacy policies and how they handle customer data. Making these policies easily accessible and understandable contributes to establishing trust.</p>
<p>Just try not to make your user’s privacy journey too annoying or intrusive. Far too many are doing this and websites are losing revenue there.</p>
<p>A study titled &#8220;<em>The Impact of Privacy Laws on Online User Behaviour</em>&#8221; (<a href="https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3774110">Goethe University</a>, revised 2022) found that the enforcement of privacy laws like the EU&#8217;s General Data Protection Regulation (<a href="https://gdpr-info.eu/">GDPR</a>), which mandates the use of cookie notices, had a negative effect on user quantity and usage intensity on websites.</p>
<p>The study suggests that these effects could translate into revenue losses for websites. Let that sink in.</p>
<h3><strong>Relevant Content</strong></h3>
<p>Providing high-quality and relevant content is another way to build trust and credibility.</p>
<p>Regularly updating a blog, resources, and social media platforms with informative and valuable content not only helps in ranking better on search engines but also establishes the brand as an industry expert.</p>
<p>Customers are more likely to trust a brand that consistently provides helpful and authoritative content. Of course, this also lends itself well to your <a href="https://www.friday.ie/expertise/digital-marketing/search-engine-optimisation/">SEO</a> efforts.</p>
<p>Leveraging social proof is another powerful strategy for building trust and credibility. Customer reviews, testimonials, case studies, and endorsements can significantly influence potential customers&#8217; perceptions of a brand. Positive reviews serve as proof of a brand&#8217;s reliability and trustworthiness, thereby enhancing credibility.</p>
<h3><strong>Consistency</strong></h3>
<p>Consistency is also crucial in building trust and credibility. Consistency across all platforms and touchpoints helps establish a credible brand identity.</p>
<p>Whether it&#8217;s on the website, social media channels, or email campaigns, maintaining consistency in branding, messaging, and tone of voice reassures customers and strengthens the brand&#8217;s identity.</p>
<p>UX can provide a consistent experience while digital marketing uses these same insights for consistency of messaging.</p>
<h3><strong>Influence on SEO</strong></h3>
<p>In recent years, search engines have started giving more weight to user experience in their ranking algorithms.</p>
<p>They understand that websites that offer a good user experience are more likely to provide value to users. As a result, these websites are rewarded with higher rankings in search engine results pages (<a href="https://www.semrush.com/blog/serp/">SERPs</a>).</p>
<p>User engagement metrics play a significant role in determining the quality and relevance of a website. Metrics such as session duration are believed to influence a website&#8217;s search engine ranking.</p>
<p>When users have a positive experience on a website and engage with its content, it sends positive signals to search engines, indicating that the website is valuable and relevant.</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14479" src="https://www.api.friday.ie/wp-content/uploads/2023/07/make-google-happy.jpg" alt="" width="575" height="320" srcset="https://www.api.friday.ie/wp-content/uploads/2023/07/make-google-happy.jpg 575w, https://www.api.friday.ie/wp-content/uploads/2023/07/make-google-happy-250x139.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2023/07/make-google-happy-120x67.jpg 120w" sizes="(max-width: 575px) 100vw, 575px" />
<h3><strong>Mobile</strong></h3>
<p>Mobile optimisation is another aspect where UX and SEO intersect. Search engines have prioritised mobile-first indexing.</p>
<p>This means that search engines primarily consider a website&#8217;s mobile version when determining its rankings. Having a mobile-friendly UX is no longer optional but necessary to rank well in search results and provide a positive experience for mobile users.</p>
<p>Website speed is another critical factor that affects both UX and SEO. A slow-loading website not only frustrates users but is also frowned upon by search engines.</p>
<p>Speed is a confirmed ranking factor (for now), and it directly impacts user experience. Users typically leave a website if it takes too long to load, which increases the bounce rate and signals to search engines that the website might not provide a satisfying user experience.</p>
<h3><strong>Navigation</strong></h3>
<p>A clear and logical navigation is crucial for both UX and SEO. A well-structured website with intuitive navigation allows users to find what they&#8217;re looking for quickly and easily.</p>
<p>This positive user experience leads to increased engagement, lower bounce rates, and longer session durations, all of which contribute to better SEO performance. Moreover, search engine bots can crawl and index a website more efficiently when its navigation is clear, leading to improved visibility in search results.</p>
<p>UX and SEO are no longer separate entities but intertwined components of a successful digital marketing strategy.</p>
<p>By aligning UX with SEO best practices, businesses can create a more enjoyable user experience, drive organic traffic to their websites, and ultimately improve their search engine rankings while doing so!</p>
<h3><strong>Driving Customer Loyalty</strong></h3>
<p>A positive user experience can be a significant factor in driving customer loyalty.</p>
<p>When your customers find a website or app easy to use, visually appealing, and pleasant, they are more likely to return and make repeat purchases.</p>
<p>By continually improving and updating the UX, businesses can foster a loyal customer base that not only remains engaged but also becomes brand ambassadors, recommending them to others.</p>
<p>To drive customer loyalty through UX, businesses must focus on creating delightful experiences at every touchpoint.</p>
<p>This includes designing intuitive user interfaces, optimising website performance, and personalising interactions based on individual preferences.</p>
<p>By consistently delivering exceptional user experiences, businesses can build trust, foster loyalty, and establish long-term relationships with their customers.</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-14478" src="https://www.api.friday.ie/wp-content/uploads/2023/07/giphy-1.gif" alt="" width="450" height="253" />
<h3><strong>No-Brainer</strong></h3>
<p>As the digital landscape continues to evolve, the role of UX in digital marketing becomes increasingly crucial.</p>
<p>User-centric marketing, built upon a foundation of exceptional UX design, empowers businesses to prioritise customer needs, enhance satisfaction, and drive revenue. It is a no-brainer. No, really.</p>
<p>By building trust and credibility, influencing SEO, and fostering customer loyalty, businesses can position themselves for success in the digital realm.</p>
<p>Investing in UX is not just an option but a <strong>necessity</strong> to thrive in today&#8217;s highly competitive digital marketplace.</p>
<p>By prioritising the user and delivering exceptional experiences, businesses can unlock the true potential of their digital marketing efforts and cultivate strong, lasting relationships with their customers.</p>
<p>Of course, you can also generate a sh*tload more revenue along the way.</p>
<p><em><strong>Reach out to <a href="https://www.friday.ie/contact/">Friday</a> today to see how UX and Digital Marketing can transform your ROI.</strong></em></p>


The Crucial Role of UX in Digital Marketing

<p class="graf graf--p"><em>For most, data privacy, consent, and the laws that govern it are about as appealing as watching paint dry. But are the tools we use every day that are designed to help control our consent really working?</em></p>
<p class="graf graf--p">Getting around the web is often a pain in the ass.</p>
<p class="graf graf--p">Newsletter pop-ups, display ads, and location alerts  &#8211; not fun.</p>
<p class="graf graf--p">And this pain manifests not least in the form of Consent Management Tools and their pop-up controls or Cookie banners. We&#8217;ve all been clicking, or at times ignoring some form of OK, Accept, Reject, etc almost every day for 5 years.</p>
<h3>Consent with the GDPR</h3>
<p class="p1">The GDPR is now 5 years old. It is a necessary and important EU directive that sets out laws and guidance on how personal data is controlled, stored and processed.</p>
<p class="p1">In front of that personal data sits the consent to have it in the first place, and that&#8217;s what this post is about.</p>
<blockquote><p><em>&#8220;Most people are simply not thinking about their privacy or data rights. They just want to move on with their lives.&#8221;</em></p></blockquote>
<h3><strong>Transparency</strong></h3>
<p class="graf graf--p">One of the core principles of the GDPR regulation is that it requires companies to provide consent notices to consumers in <em>“concise, transparent, intelligible and easily accessible form, using clear and plain language.”</em></p>
<p class="graf graf--p">But what are the design principles that ensure those notices and their user interfaces are clear and transparent?</p>
<p class="graf graf--p">Can organisations that design for a myriad of things &#8211; web, mobile, wearables, voice assistants, connected cars and every sort of IoT device really live up to these ever-changing laws and principles?</p>
<h3 class="graf graf--p">Do consent tools even work?</h3>
<p class="graf graf--p">As is our nature, we tested this out.</p>
<p class="graf graf--p">In a set of usability tests with 20 people on a compliant consent tool pop-up, we found that the majority of users, 70%, clicked to Accept cookies.</p>
<p class="graf graf--p">When asked why they chose their action, answers from those who accepted included <em>&#8220;That&#8217;s just what I always do&#8221;</em> and <em>&#8220;&#8230;it&#8217;s the fastest way to get rid of it.&#8221;</em></p>
<p class="graf graf--p">The problem is clear. Human nature prevails, and as <a href="https://dictionary.apa.org/cognitive-miser" target="_blank" rel="noopener">cognitive misers</a>, through simple repetition, we follow the path of least resistance.</p>
<p class="graf graf--p">Most people are simply not thinking about their privacy or data rights, they just want to move on with their lives.</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-14463" src="https://www.api.friday.ie/wp-content/uploads/2023/06/consent-accept-250x133.png" alt="" width="500" height="266" srcset="https://www.api.friday.ie/wp-content/uploads/2023/06/consent-accept-250x133.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/06/consent-accept-700x373.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/06/consent-accept-768x409.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/06/consent-accept-1536x817.png 1536w, https://www.api.friday.ie/wp-content/uploads/2023/06/consent-accept-120x64.png 120w, https://www.api.friday.ie/wp-content/uploads/2023/06/consent-accept.png 1586w" sizes="(max-width: 500px) 100vw, 500px" />
<p>&nbsp;</p>
<p class="graf graf--p"><strong>But do consent tools <em>actually</em> work?</strong></p>
<p class="graf graf--p">We tested this too.</p>
<p class="graf graf--p">Out of a quick straw poll selection of 12 random websites (May 2021), we found that just 7 of them (58%) did not fire cookies when Marketing Cookies were declined.</p>
<h3 class="graf graf--p">Good Cookie?</h3>
<p class="graf graf--p">When it comes to content streamers and IoT stuff, many of these services need to collect data from you to give you a better user experience.</p>
<p class="graf graf--p">For example, Netflix.</p>
<p class="graf graf--p">When you’re milling around thinking about what to watch next, content streamers use first-party cookies and data to show you content that you might like based on your viewing history, gender, etc.</p>
<p class="graf graf--p">If Netflix kept showing you the same viewing options every day, including things that you’ve already watched that would get annoying.</p>
<p>While this use of personal data improves the user experience, there are other ways your data is used from deciding what content to produce to more grey areas such as <a href="https://www.wired.co.uk/article/netflix-data-tracking-privacy" target="_blank" rel="noopener">how data is shared with 3rd parties</a>.</p>
<p>In the case of Netflix, the only opt-out is to stop using the service.</p>
<div id="attachment_14461" style="width: 936px" class="wp-caption alignnone"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14461" class="wp-image-14461 " src="https://www.api.friday.ie/wp-content/uploads/2023/06/path-of-least-resistance-250x131.jpeg" alt="" width="926" height="485" srcset="https://www.api.friday.ie/wp-content/uploads/2023/06/path-of-least-resistance-250x131.jpeg 250w, https://www.api.friday.ie/wp-content/uploads/2023/06/path-of-least-resistance-768x401.jpeg 768w, https://www.api.friday.ie/wp-content/uploads/2023/06/path-of-least-resistance-120x63.jpeg 120w" sizes="(max-width: 926px) 100vw, 926px" /><p id="caption-attachment-14461" class="wp-caption-text">The path of least resistance. (<em>Michael Sankey</em>)</p></div>
<h3 class="graf graf--p">Privacy by Design</h3>
<p class="graf graf--p">Despite the clear challenges of getting consent, education for those who process and store personal data is critical.</p>
<p class="graf graf--p">I spoke some time ago at a webinar hosted by the brilliant <a href="https://fpf.org/">Future of Privacy Forum</a> who invited me to give a talk on consent transparency and designing for trust.</p>
<p class="graf graf--p">Interesting takeaways included:</p>
<ul>
<li class="graf graf--p">The biggest challenge to increasing User Experience transparency may be encouraging people to make deliberate decisions from a UX design perspective.</li>
<li class="graf graf--p">Designers’ colour and shape choices in User Interface design can be subtle ‘dark patterns.’ These dark patterns might even prevent, e.g., colourblind users from understanding the options at hand.</li>
<li class="graf graf--p">Organisations should ask themselves whether they should be collecting certain data in the first place.</li>
<li class="graf graf--p">Organisations need to take steps to prevent user manipulation, both by UX/UI (e.g., cookie banners) and by algorithms.</li>
</ul>
<p>There&#8217;s a link to the webinar at the end of this post.</p>
<h3>What should change</h3>
<p>This is usually the part where you get &#8216;the answer&#8217; but there isn&#8217;t a definitive one or at least one that will make browsing websites and apps a little less annoying.</p>
<p>Google plans to phase out cookies with its <a href="https://privacysandbox.com/">Privacy Sandbox</a> but consent banners are not going to go away soon, so they may continue to annoy.</p>
<p>But, the real message here is that regardless of what level of consent users and consumers give (or how engaged they are when they do it), as businesses, data controllers and data processors, the responsibility lies with us to <strong>ask for, use </strong>and<strong> store their data responsibly</strong>.</p>
<p>There are two things I would advise:</p>
<ul>
<li>Understand where your greatest data risks lie and ensure that your processes around processing and controlling that data are airtight.</li>
<li>Educate and train your staff on the laws and best practices around data protection, particularly how they relate to your greatest risks.</li>
</ul>
<p>&nbsp;</p>
<p>Thank you for reading.</p>
<p>&nbsp;</p>
<p class="graf graf--p">But wait, there&#8217;s more:</p>
<ul>
<li>A piece I contributed to in the Sunday Business Post on the Death of Cookies: <a href="https://www.businesspost.ie/tech/will-google-kill-the-cookie/">https://www.businesspost.ie/tech/will-google-kill-the-cookie/ </a></li>
<li>You can check out a recording of my keynote with the Future of Privacy Forum here: <a class="markup--anchor markup--p-anchor" href="https://fpf.org/blog/event-recap-dublin-privacy-symposium-2021-designing-for-trust-enhancing-transparency-preventing-user-manipulation/" target="_blank" rel="nofollow noopener" data-href="https://fpf.org/blog/event-recap-dublin-privacy-symposium-2021-designing-for-trust-enhancing-transparency-preventing-user-manipulation/">https://fpf.org/blog/event-recap-dublin-privacy-symposium-2021-designing-for-trust-enhancing-transparency-preventing-user-manipulation/</a></li>
<li>Note: Consent Tool Usability Tests were conducted in May 2021.</li>
</ul>
<p>And if you want to go full geek, check out this 30-minute piece on GDPR after 5 years from Voice of ESG. It has some sound advice at the end on engaging in training and awareness for your team.</p>
<p><iframe title="Spotify Embed: Special: 5 years GDPR in the EU" style="border-radius: 12px" width="100%" height="152" frameborder="0" allowfullscreen allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy" src="https://open.spotify.com/embed/episode/5xXR5MvBjalaZOLOA2a1tW?si=x072yDeGTjWCT3Rlcfg1XQ&#038;utm_source=oembed"></iframe></p>


Clickety-click: 5 Years of Consent with the GDPR

<p>It&#8217;s incredible how much technology has transformed human behaviour over the past two decades. I’ve found this to be particularly evident through carrying out hundreds of hours of user testing over the years. There is a clear change in people&#8217;s tolerance and patience levels when faced with frustrating interfaces, apps or websites that have confusing navigation or long loading times.</p>
<p>These days, people expect seamless, intuitive experiences that they don’t need to think about too much.</p>
<p>UX research and design have been undervalued in the past, but because of these changes in human behaviour and user expectations, businesses are now recognising opportunities and investing.</p>
<p>There are two main options when it comes to integrating UX into any business &#8211; building your own in-house UX team or collaborating with a UX agency. I’m going to take a look at each scenario. I’m sure I’ll be accused of bias (something UX professionals try to avoid) so I’ll keep this as objective as I can.</p>
<p>There is a place for both, and the choice depends on considerations such as scale, ambition, budget and the product roadmap. On many occasions, we have helped transition our clients to build their own UX and design teams and often continue to support them with extra capacity and consultancy.</p>
<h4><b>When should a business build an in-house UX team?</b></h4>
<p>Building an effective UX team has its challenges but it is very worthwhile when done right and for the right reasons. In my opinion, scale is the main justification for this approach. If you have a clear vision with a roadmap that includes comprehensive UX requirements, this might be the way to go.</p>
<p>In-house UX designers will be the strongest guardians of your brand. They should have broad familiarity and razor-sharp focus across your entire product suite and communications, but there is always the risk of overfamiliarity, which can lead to bias or blinkering. A strong research-based ethic with discipline is needed.<span class="Apple-converted-space"> </span></p>
<p>One piece of advice I’d give anyone taking this approach is to start with strong UX leadership. Without this foundation, it will be very difficult. UX professionals also work better as part of a UX team; it’s a broad discipline so hiring one UX professional to cover strategy, research, UX design, UI Design, UX writing, information architecture, testing and delivery is a mistake. I’ve never met anyone with all of these skills at a high standard.</p>
<h5><b>Key considerations when building an in-house UX team</b></h5>
<ol>
<li>You’ll need a high level of design maturity across the business. This needs to come from the top down.</li>
<li>There should be a strong ambition for the business and a clear product roadmap for the long term that has an ongoing requirement for a UX team.</li>
<li>You need to start with foundational UX leadership that can build the right multidisciplinary team and structures.</li>
<li>You’ll need the budget to invest in, recruit and retain the UX talent needed to build an effective team.</li>
<li>Enough time and resources will be required to onboard and develop the UX team and create processes, SOPs and team culture.</li>
</ol>
<p>The state of the UX and tech industry in Ireland and beyond shows a skills shortage of experienced UX designers and researchers. This remains in 2023. It is a highly competitive market, and there is fierce competition for top talent. HR and staff retention are not easy, you need a very attractive proposition.</p>
<h4><b>When should a business work with a UX agency?</b></h4>
<p>For a lot of businesses, working with an experienced and established UX agency is often a more efficient and cost-effective way to manage UX projects without a lot of the risks associated with hiring and building a UX team from scratch.</p>
<p>If the product roadmap is less defined towards the longer term, requires a multi-disciplinary approach, and needs to start making progress quickly, hiring a UX agency can be a much smarter more cost-effective choice with a lot less risk.</p>
<h5><b>Benefits of working with a UX agency</b></h5>
<ol>
<li>A UX agency will have an existing multidisciplinary team with a broad set of skills and expertise.</li>
<li>There will be close collaboration between research, design, analytics, content creation, development, and project management professionals.</li>
<li>A UX agency will already have an evolved design culture, processes, and team dynamic, which will bring efficiency to any project.</li>
<li>An agency can provide an objective perspective on your product or service, which can be valuable in identifying blind spots and areas for improvement.</li>
<li>UX agencies have a wide range of experience across multiple industries, providing best practices and proven methodologies to your project.</li>
<li>A UX agency can plug into and enhance your existing team as support for research and design.</li>
<li>Costs are reduced by only paying for the work you need.</li>
</ol>
<p>Ultimately, the decision between building an in-house UX team or collaborating with a UX agency like Friday will depend on the unique needs and goals of the business. It may also be possible to combine both approaches, with an in-house team providing ongoing support and a UX agency brought in for specialised projects or to supplement the in-house team&#8217;s skills and capacity.</p>
<p><a href="https://www.friday.ie/contact/">Talk to us</a> about your requirements, and we’ll help you work out if collaborating with an agency or building your own UX team is the right path for your business.</p>


Should you work with a UX Agency or build your own in-house UX Team?

<p><em>In the digital landscape, there are many ways for businesses to get users to click where they want them to click. A positive user experience can leave a lasting good impression on users to keep them coming back. Designers know how users tend to behave on the internet, and so, unfortunately, they can exploit these behaviours to get them to do things they may not want to.</em></p>
<p>Deceptive Design, otherwise known as &#8220;Dark Patterns,&#8221; is a user interface designed to trick users into behaving against their own interests.</p>
<p>You’ve probably come across it in your own online activity. Subtle (and not so subtle) user manipulation is fairly commonplace, and quite often utilised by some of the biggest names in tech. Being able to recognise the different types of deceptive designs that appear across the web is the first step in avoiding them, so let’s take a look at some examples.</p>
<p>&nbsp;</p>
<h3>Deceptive Design in the Wild</h3>
<h5>Disguised Ads</h5>
<p>‘Disguised ads’ are when a part of the user interface is made to look like another functional part that a user might want to click on, like navigation or a search result. Google has been increasingly guilty of this practice over the years. The likelihood of clicking an ad (that Google benefits monetarily from), and an almost visually identical search result is very high. Coupled with the fact that 3 or 4 ads at the top of the screen will push actual search results down the page beyond the fold, it’s even harder to recognise them for what they are.</p>
<p>It wasn’t always this way. Google was one of the first to clearly label its ads and seemed to be a leader in transparency in this area. Over the years they have slowly blended their ads into the search results, making them harder and harder to differentiate. Take a look at the timeline of design changes over the years below by Ginny Marvin, and read the <a href="https://searchengineland.com/search-ad-labeling-history-google-bing-254332?utm_campaign=socialflow&amp;utm_source=twitter&amp;utm_medium=social">full article</a> for a more in-depth analysis.</p>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="en">Color fade: A history of Google ad labeling in search results <a href="https://t.co/guo3jc4kwz">https://t.co/guo3jc4kwz</a> <a href="https://t.co/LMYqhmgfyE">pic.twitter.com/LMYqhmgfyE</a></p>
<p>— Ginny Marvin (@GinnyMarvin) <a href="https://twitter.com/GinnyMarvin/status/757606109322633216?ref_src=twsrc%5Etfw">July 25, 2016</a></p></blockquote>
<p><script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script></p>
<p>&nbsp;</p>
<h5>Forced Continuity and Roach Motels</h5>
<p>Before the subscription model took over digital services, you could simply pay for something once and you’d own it forever. In the modern streaming and software landscape, subscription model payments are almost ubiquitous.</p>
<p>There was a brief time period where one could avail of a free trial without entering credit card details, but no more. Under the guise of ‘seamless user experience,’ companies started to demand credit card details up front, to alleviate the &#8216;hassle&#8217; of entering these details later on.</p>
<p>In reality, the service provider is relying on the tendency for users to forget about the subscription, and have it charging away in the background into the future. It’s industry standard now, and likely here to stay. Ultimately, if you’re confident in the value your product brings, a free trial without card details shouldn’t be an issue.</p>
<p>The situation is worsened by the tactic known as ‘Roach Motel,’ in which a service is easily signed up for, sometimes even by accident, but then very hard to cancel. I shouldn&#8217;t have to call a customer service number and stay on hold just to cancel my subscription!</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-14347 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35.png" alt="Screenshots showing the process for cancelling an online course subscription membership" width="1294" height="1414" srcset="https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35.png 1294w, https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35-250x273.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35-700x765.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35-768x839.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/04/Screenshot-2023-04-19-at-17.07.35-120x131.png 120w" sizes="(max-width: 1294px) 100vw, 1294px" />
<p>&nbsp;</p>
<h5>Privacy and Data Consent</h5>
<p>Social Media is known for the dopamine-exploiting ‘slot-machine’ tactics that get users compulsively refreshing their social media feeds. Facebook&#8217;s deceptive design tactics don&#8217;t stop there either. ‘Privacy Zuckering’ is when “you are tricked into publicly sharing more information about yourself than you really intended to.” It was coined in Facebook&#8217;s early days, aptly named after the founder. They were notorious for getting access to your contacts list, which you had probably shared with them without realising.</p>
<p>The online privacy landscape has been evolving over the last 5 years. Following the GDPR introduction in 2018, European companies are required to seek consent when collecting certain data about users and are getting creative with how they discourage you from fully exercising your privacy rights.</p>
<p>Often, opting into maximum data exposure is the default, or framed as a feature of the product; a benefit you can avail of that will result in a ‘more personalised ads experience,’ which certainly sounds like it’s for the user’s benefit and not the company’s&#8230; (it’s not). Other times, the action to reject or to configure data consent settings is harder to access, and the wording used in these messages is finely tuned to lead you down the path of least resistance and accept more data consent than you normally would.</p>
<p><em>Privacy Zuckering definition from: </em><a href="https://www.deceptive.design/types/privacy-zuckering"><em>https://www.deceptive.design/types/privacy-zuckering</em></a></p>
<div id="attachment_14330" style="width: 710px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14330" class="wp-image-14330 size-large" src="https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-700x414.png" alt="Screenshots of mobile website's cookie consent user interface" width="700" height="414" srcset="https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-700x414.png 700w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-250x148.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-768x455.png 768w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-1536x909.png 1536w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-2048x1212.png 2048w, https://www.api.friday.ie/wp-content/uploads/2023/03/Cookie-Consent-Deceptive-Design-120x71.png 120w" sizes="(max-width: 700px) 100vw, 700px" /><p id="caption-attachment-14330" class="wp-caption-text">Common website cookie consent UI, where the option to reject is distanced from the user by more taps and scrolling, while the option to accept all is immediately front &amp; centre.</p></div>
<p>&nbsp;</p>
<h5>Other Examples</h5>
<p>This is a non-exhaustive list of the kinds of deceptive designs you can find in the wild. The term &#8220;dark pattern&#8221; was coined by <a href="https://www.deceptive.design/">Henry Brignull</a> in 2010, and more recently changed to &#8220;deceptive design&#8221; to be more inclusive and easy to understand. His is the go-to source for definitions and examples of deceptive design you should be aware of, both as a user and a business owner.</p>
<p>Once we know what deceptive design is, an important question to ask then is; why are they such a bad idea?</p>
<p>&nbsp;</p>
<h3>How Deceptive Design hurts your business</h3>
<ol>
<li><em>Users are becoming more and more aware</em> of the kinds of deceptive tactics that companies employ to influence more clicks, more conversions, and more data consent. If a user feels deceived by something they initially sought help from, it leaves a sour taste and a lasting negative impression in their mind, and they’ll be much less likely to engage with that service again.</li>
<li><em>A loyal customer is much more valuable than a new one</em>. Loyal users will continue to use your services into the future, creating repeat business. They might rave to their family and friends. Deceptive design practices might gain you a short-term business win but is a net negative when considering the lasting brand perception it can create with customers, especially for small businesses trying to gain momentum.</li>
<li>Although most deceptive design is not explicitly illegal (yet..), <em>you might run the risk of breaching data and consumer protection laws</em> depending on the nature of the deceit. All in all, it creates a frustrating and off-putting user experience, and your energy is better placed in business practice that creates value for your customers and earns their trust legitimately.</li>
</ol>
<p>&nbsp;</p>
<h3>If Deceptive Design is such a bad idea, why do we see it all the time?</h3>
<p>It’s true, deceptive design is still hugely prevalent on the internet for several reasons.</p>
<ul>
<li>Big tech companies usually get away with it. They can rely on large established customer bases and brand recognition for continued business.</li>
<li>There is sometimes pressure on designers from stakeholders who don’t understand the negative long-term effect of employing deceptive design patterns. They see competitors doing the same things and think it must be working. Designers have a responsibility to advocate for better UX, for both the user and the long-term health of the business, but it often falls on deaf ears.</li>
<li>The pressure from stakeholders comes from a short-sighted approach to boosting revenue, and the capitalist mindset of ever-soaring growth and returns. It doesn&#8217;t place users&#8217; interests at the forefront.</li>
<li>There is also likely an assumption by companies that users don’t care they’re being duped, won’t even realise, or blame themselves for certain mishaps. It can be true in some cases, but with an ever-increasing tech-savvy population, these practices just aren&#8217;t sustainable.</li>
</ul>
<p>&nbsp;</p>
<h3>So how do you build trust with your users in a sustainable way?</h3>
<p>Deceptive Design is often hard to define, as all design has the intent to persuade.</p>
<p>Persuasive design is the art of getting users to do what you want, without being deceptive. We&#8217;ve written on the topic before. Read Dave&#8217;s article on the <a href="https://www.friday.ie/blog/how-to-be-persuasive-the-6-principles-of-influence/">6 Principles of Influence</a> developed by Dr Robert Cialdini and our post on <a href="https://www.friday.ie/blog/persuasive-design-how-to-make-shit-happen/">effective persuasive design</a> in action.</p>
<p>Ultimately, the details lie in human psychology, and how you communicate with users in a convincing manner. While there is no moral obligation to be 100% ethical in your design and business practice, your own experience will likely tell you how frustrating it is to be duped, the impression it left on you as a result, and ultimately why deceptive design should be avoided at all costs.</p>
<p>If you want your customers to enjoy a <a class="c-link" href="https://www.friday.ie/expertise/user-experience/" target="_blank" rel="noopener noreferrer" data-stringify-link="https://www.friday.ie/expertise/user-experience/" data-sk="tooltip_parent">positive user experience</a> throughout their journey with you, get in touch with us.</p>


Deceptive Design and How it Hurts your Business

<p>We have seen the emergence and exponential growth of User Experience (UX) as a key design discipline over the last 10-15 years.</p>
<p>Services like banking, mobile phone carriers, travel and music retail have become commodities with the only differentiator aside from price being user experience. Quite often the only interface a user has with a brand is via their mobile app or website. Customers are choosing to put their money where they have the best experience with the least amount of friction.</p>
<p>Companies like Revolut, Apple, Airbnb and Starbucks have made good UX/CX their USP and it’s paying off in spades. User centred design thinking is an obvious strategy for a businesses to employ.</p>
<h4><b>What is UX Theatre?</b></h4>
<p>A problem we’re seeing is how some businesses have employed &#8220;user-centred design&#8221; as a buzzword sometimes without a full understanding of its meaning, process and value. In some cases, executives can misinterpret UX design as a euphemism for &#8220;thinking from a customers perspective” while avoiding actually talking to their users.</p>
<p>As UX design filters from big tech all the way down to startups and SMEs we see the emergence of what has become known as UX Theatre. This is when designers are asked to act as if they are doing the work of UX design but the teams are not given the means to implement it. UX Theatre is to design what greenwashing is to climate change. Fur coat and no knickers! It’s simply lip service to UX design.</p>
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-14209" src="https://www.api.friday.ie/wp-content/uploads/2022/11/theatre.png" alt="" width="1900" height="1136" srcset="https://www.api.friday.ie/wp-content/uploads/2022/11/theatre.png 1900w, https://www.api.friday.ie/wp-content/uploads/2022/11/theatre-250x149.png 250w, https://www.api.friday.ie/wp-content/uploads/2022/11/theatre-700x419.png 700w, https://www.api.friday.ie/wp-content/uploads/2022/11/theatre-768x459.png 768w, https://www.api.friday.ie/wp-content/uploads/2022/11/theatre-1536x918.png 1536w, https://www.api.friday.ie/wp-content/uploads/2022/11/theatre-120x72.png 120w" sizes="(max-width: 1900px) 100vw, 1900px" />
<p>Examples of this phenomenon include talking about users instead of listening to them. Copying competitors instead of looking at customer needs. Roleplaying the users instead of observing them. Usability testing as an afterthought instead of being part of and informing the design process.</p>
<p>This can lead to poor outcomes that manifest themselves as assumption based design solutions that are led by the business for the business and not the user.</p>
<p>Users often don’t know what they want but they are usually pretty clear about the problems they need us to solve. Design thinking will help uncover these if we ask the right questions and are given the time and resources to solve them.</p>
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-14204" src="https://www.api.friday.ie/wp-content/uploads/2022/11/IoPkza2_d.webp.png.webp" alt="" width="760" height="366" srcset="https://www.api.friday.ie/wp-content/uploads/2022/11/IoPkza2_d.webp.png.webp 760w, https://www.api.friday.ie/wp-content/uploads/2022/11/IoPkza2_d.webp.png-250x120.webp 250w, https://www.api.friday.ie/wp-content/uploads/2022/11/IoPkza2_d.webp.png-700x337.webp 700w, https://www.api.friday.ie/wp-content/uploads/2022/11/IoPkza2_d.webp.png-120x58.webp 120w" sizes="(max-width: 760px) 100vw, 760px" />
<p>Another practice that can be common place is where the results of user research are effectively ignored when they don’t align with the assumptions or expectations of the stakeholders. These practices are not only damaging to the business and its users but can also be a waste of time and money while being demoralising for a design team at the same time.</p>
<h4><b>How has UX Theatre become a problem?</b></h4>
<p>Budget and time restraints can be reasons for UX lip service but the focus needs to be on creating the most effective process around the budget and timeline available instead of a poor process with most of its corners cut.</p>
<p>Recruitment for UX can be misguided, it’s all too common to see single roles advertised that encompass a multitude of disciplines such as UX research, UX design, UI design, Service and Information Design. Unfortunately, for the most part, these unicorns don’t exist and hiring one person as a multi-disciplinary ‘UX team’ is not going to have the desired effect.</p>
<h4><b>Who is responsible?</b></h4>
<p>It’s too easy to blame the stakeholders. Of course they&#8217;ll jump on the UX bandwagon when they see the success of others. The penny still hasn’t dropped for a lot of them because they don&#8217;t understand the process, how could they?</p>
<p>Why should a stakeholder be the main advocate of good design process? The truth is the finger needs to be pointed at designers. It’s a designers job to educate, collaborate and ultimately communicate the value of the process and execution of an informed UX strategy.<span class="Apple-converted-space"> </span></p>
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-14205" src="https://www.api.friday.ie/wp-content/uploads/2022/11/pointing.jpg" alt="" width="2134" height="768" srcset="https://www.api.friday.ie/wp-content/uploads/2022/11/pointing.jpg 2134w, https://www.api.friday.ie/wp-content/uploads/2022/11/pointing-250x90.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2022/11/pointing-700x252.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2022/11/pointing-768x276.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2022/11/pointing-1536x553.jpg 1536w, https://www.api.friday.ie/wp-content/uploads/2022/11/pointing-2048x737.jpg 2048w, https://www.api.friday.ie/wp-content/uploads/2022/11/pointing-120x43.jpg 120w" sizes="(max-width: 2134px) 100vw, 2134px" />
<p><span class="Apple-converted-space">Stakeholders are often the loudest voice in the room and are too often left unchallenged by designers, when this happens, unfortunately the tail can end up wagging the dog. </span></p>
<h4><b>How can UX Theatre be prevented?</b></h4>
<p><span class="Apple-converted-space">Designers need to take responsibility for across their own area of expertise, this includes project processes, having the users back, challenging assumptions right down to design team recruitment. Designers need to work closely with and bring the stakeholders on this journey and build trust.</span></p>
<p>There simply isn’t enough narrative on how UX can impact the financial performance of a product or service. Money talks! Designers need to get better at communicating the data and proof points if we’re going to inspire long-lasting change across tech.</p>
<p>Our ability to communicate the value and potential financial gain from designing for the user will speak volumes to the stakeholders. Sure, push back often gets pushed back but thats ok, the message has zero chance of getting through if we don’t educate and collaborate.<span class="Apple-converted-space"> </span></p>
<p>We can help our clients and businesses improve if we approach UX Theatre from the perspective of critique instead of criticism. By calling out UX Theatre we can show how testing and research help us design effective solutions to existing customer problems as well as providing benefits for the business. We can encourage the move from “I think” to “we saw” and “we heard.” We need to preach the gospel of UX.</p>
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-14206" src="https://www.api.friday.ie/wp-content/uploads/2022/11/Tweet.png" alt="" width="1090" height="362" srcset="https://www.api.friday.ie/wp-content/uploads/2022/11/Tweet.png 1090w, https://www.api.friday.ie/wp-content/uploads/2022/11/Tweet-250x83.png 250w, https://www.api.friday.ie/wp-content/uploads/2022/11/Tweet-700x232.png 700w, https://www.api.friday.ie/wp-content/uploads/2022/11/Tweet-768x255.png 768w, https://www.api.friday.ie/wp-content/uploads/2022/11/Tweet-120x40.png 120w" sizes="(max-width: 1090px) 100vw, 1090px" />
<p>A meaningful focus on customer satisfaction makes an important contribution to the profitability of many businesses. It’s time stakeholders walked the walk but its up to designers to show them how its done.</p>
<p>If you&#8217;d like to find out more about how we can help your stakeholders realise the value of UX for their business, do <a href="https://www.friday.ie/contact/">get in touch</a>, we&#8217;d be delighted to start a conversation.</p>
<p>For more on this topic, how to communicate the competitive advantage a good user experience provides and how to advocate the needs of your users throughout your organisation, checkout the book <a href="https://boagworld.com/products/user-experience-revolution/" target="_blank" rel="noopener">User Experience Revolution</a> by Paul Boag. A good read.</p>


UX Theatre: Fur coat and no knickers!

<p class="graf graf--p">Thankfully, for the most part, the pandemic is behind us, leaving a strange 2-year black hole in the timeline of our lives. While normality for most was put on standby, we saw the transformation of businesses and how customers experience products and services.</p>
<p class="graf graf--p">There was an acceleration in everything from working from home to digital subscriptions, online shopping, food delivery services and video calling — if you look back, the impact has been staggering.</p>
<p class="graf graf--p">Most of these products and services already existed but the pandemic acted like a steroid injection of digital transformation and mass adoption. Customers are now a lot savvier, their expectations have risen around websites, apps and the overall brand and product experience.</p>
<h4 class="graf graf--h4">Dated Practices</h4>
<p class="graf graf--p">Assumptions made in the boardroom using outdated demographic data or a hunch someone on the marketing team has is no longer a way to create a successful product or service. This type of thinking has and will usually lead to failure. We’ve been banging this drum for a long time and we have to keep banging. You’d be amazed how much we see businesses, from large multinational enterprises to SMEs still taking this approach. Excuses we hear range from the lack of time, budget or our old favourite “we already know what our customers want”.</p>
<p class="graf graf--p">Direction on product development needs to come from your customers — they know what they want and they will be happy to tell you if you just ask them. Not properly listening to or involving your customers in your design process will mean your competitors will out-smart, out-rank and out-sell you.</p>
<div style="width: 100%; height: 0; padding-bottom: 52%; position: relative;"><iframe loading="lazy" class="giphy-embed" style="position: absolute;" src="https://giphy.com/embed/yoJC2yftYP4kP6Ku40" width="100%" height="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<h4 class="graf graf--h4">The winds of change</h4>
<p class="graf graf--p">This had been bubbling a few years before the pandemic, influence was starting to filter down, fueled by the success of design-focused companies. Wider adoption of research and user-focused design processes used to create and promote digital as well as physical products was beginning to have a wider impact.</p>
<p class="graf graf--p">Brands who had focused on research around their customer or users experience had started to surface as the winners while others have been floating along with limited or no growth. A new standard has been set. Users&#8217; tolerance and patience for friction within a brand experience has been almost wiped out.</p>
<h4 class="graf graf--h4">Stand out from the crowd</h4>
<p class="graf graf--p">In a world dominated by multinationals, brands need a point of differentiation, a unique selling point. Maybe brands offering similar products look to pricing as a way to establish their USP but this is just a race to the bottom.</p>
<p class="graf graf--p">An example of this in Ireland is the telco, Eir. They offer what is probably the cheapest TV package on the Irish market at just €10 a month when added to your broadband package — price is their standout USP but as we all know, their issues with customer experience have been well publicised. So it is difficult to imagine they have any other sales tools they can use to establish an alternative USP to price. They have boxed themselves into a corner by not focusing on good customer experiences.</p>
<p class="graf graf--p">The point is that experience is more important than price. Sure, your pricing needs to be affordable but if your customers like the experience, they will be happy to pay a premium. Look at companies like Dyson, Revolut, Sky or Apple.</p>
<blockquote class="graf graf--blockquote graf--startsWithDoubleQuote"><p>“Don’t find customers for your products, find products for your customers.”<em class="markup--em markup--blockquote-em"><br />
&#8211; Seth Godin</em></p></blockquote>
<h4 class="graf graf--h4">Be Inclusive</h4>
<p class="graf graf--p">If you want to build inclusive products that work for everyone, you simply have to follow a human-centred design process that is grounded in research. Data analytics is extremely important but listening to what real people actually want is the most valuable data you can collect.</p>
<p class="graf graf--p">I’m not talking about sending out a quick survey and maybe carrying out a bit of user testing on a prototype of your product. You need to invest in bringing the customer on the design journey with you, work smart by digging deep into every nuance of the customer journey and experience both online and offline — sweat the small stuff as well as the fundamentals, a collection of micro insights will be greater than the sum of its parts. Challenge assumptions, validate ideas, optimise the customer&#8217;s journey and increase conversions. This will translate into revenue, higher profits, and will grow your business.</p>
<p class="graf graf--p">Customer expectations are higher than ever, good experiences are rewarded with customer trust, loyalty and referrals. If you are not already listening very carefully to your customers and involving them in every area of your offering, someone else will do it and they will win.</p>
<p class="graf graf--p">Inclusive design takes time and effort but the investment will pay off in multiples. Talk to us if you want to know how we can help you with research-focused design, marketing and digital transformation.</p>


If you’re not listening to your customers, you will most likely fail.

<p class="graf graf--p"><strong>I don’t think there is another industry that has embraced acronyms quite like marketing. A handy short-cut for those who understand them and for those who don’t (and are afraid to ask) they are beyond useless. When it comes to marketing and digital performance the 2 biggest acronyms in town these days are CRO and UX.</strong></p>
<p class="graf graf--p">CRO (Conversion Rate Optimisation) and UX (User Experience) are two of the most important areas of focus that drive success online. These terms are used interchangeably, they work together with the same goals but it is important to note that they are not the same thing.</p>
<h3 class="graf graf--h4"><strong class="markup--strong markup--h4-strong">What is CRO?</strong></h3>
<p class="graf graf--p">CRO is a process that focuses on increasing the percentage of website visitors who take a specific action. This action can be anything from buying a product, signing up to a service, webinar or newsletter. CRO takes an holistic look at the full user or customer journey from first engagement all they way past the point of purchase or conversion and optimises for a better conversion rate.</p>
<p class="graf graf--p">To calculate your conversion rate, you simply divide the number of conversions by the total number of web page visitors. Lets say a web page gets 10,000 visits a month and on average 400 of these visitors end up buying a product, thats a 4% conversion rate — not bad for many industries.</p>
<blockquote class="graf graf--blockquote"><p>(400 ÷ 10,000) x 100 = 4%</p></blockquote>
<p class="graf graf--p">There are hundreds, if not thousands of ways to improve your conversion rate. Every site needs a CRO strategy, you start by looking at the product or service you are offering, do people want it? Is there a value proposition? Is there a strong brand? You optimise and test your content &amp; messaging, user journeys, your ads and how they are targeted. Refine and test your calls to action, landing pages, SEO, SEM and your websites loading speed… the list is endless.</p>
<p class="graf graf--p">The foundation of any CRO activity is looking at analytics and user feedback. We explore website analytics and learn about the traffic, its performance and look for opportunities. Ideas are brainstormed, prioritised and turned into a roadmap that goes through a cycle of test and iterate where necessary. This is an ongoing process that UX will play a big part in.</p>
<h3 class="graf graf--h4"><strong class="markup--strong markup--h4-strong">What is UX?</strong></h3>
<p class="graf graf--p">Users don’t come away from an online purchase remembering how the funnel made them feel, they will recall the website and brand experience — this is where UX comes in.</p>
<p class="graf graf--p">UX is a supplement to CRO that aims at easing the user journey by improving the design of the website or App so that is intuitive, enjoyable, seamless and simple. UX removes the friction through research to find empathy with the user and understand the users perceptions and expectations, these insights give design direction from real users or customers, not assumption.</p>
<p class="graf graf--p">Where CRO will focus on the numbers and the business goals, UX will be an advocate of the user which will help drive the numbers and business goals by working to help the user achieve their goals. CRO tells you ‘what’ is happening, where UX helps explain ‘why’ it is happening and presents actionable solutions.</p>
<p class="graf graf--p">Gavin and I had a good chat to see if we could come up with an analogy to explain the difference between UX and CRO. This is what we mustered when applying the principles of CRO and UX to a glass of water.</p>
<figure class="graf graf--figure"></figure>
<blockquote class="graf graf--blockquote graf--startsWithDoubleQuote"><p>“CRO will bring you to the water and tell you that you need to drink it, while UX will make drinking the water as easy and enjoyable as possible.”</p></blockquote>
<img loading="lazy" decoding="async" width="2121" height="917" class="aligncenter size-full wp-image-13645" src="https://www.api.friday.ie/wp-content/uploads/2022/01/water.png" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2022/01/water.png 2121w, https://www.api.friday.ie/wp-content/uploads/2022/01/water-250x108.png 250w, https://www.api.friday.ie/wp-content/uploads/2022/01/water-700x303.png 700w, https://www.api.friday.ie/wp-content/uploads/2022/01/water-768x332.png 768w, https://www.api.friday.ie/wp-content/uploads/2022/01/water-1536x664.png 1536w, https://www.api.friday.ie/wp-content/uploads/2022/01/water-2048x885.png 2048w, https://www.api.friday.ie/wp-content/uploads/2022/01/water-120x52.png 120w, https://www.api.friday.ie/wp-content/uploads/2022/01/water-80x35.png 80w" sizes="(max-width: 2121px) 100vw, 2121px" />
<p class="graf graf--p">Not perfect but hopefully you get the idea!</p>
<h3 class="graf graf--h4"><strong class="markup--strong markup--h4-strong">Hand in hand</strong></h3>
<p class="graf graf--p">CRO should not or cannot be carried out without UX and visa versa, each feeds and compliments the other. If you invest in CRO without investing in UX you may drive people to your website but risk driving them into a brick wall, they are less likely to convert if the experience is poor. Likewise, you can have great UX on your website but without good CRO few will get to experience it.</p>
<p class="graf graf--p">CRO and UX is an ongoing process, the world changes as does user behaviour and thats why a continuing cycle of analyse, test and iterate is needed for ongoing success.</p>
<p class="graf graf--p">At Friday, our digital performance team work alongside our UX team to get the most out of your campaigns and online presence. Talk to us today about how we can use CRO with UX to attract and convert customers for you.</p>


CRO & UX  -  What’s the Difference?

<h4>Whether you run a business that has an app or website that is either core to, or part of the sales process you will want to keep a close eye on the conversion rate on an ongoing basis. Is the software, content and interface doing its job? Can users find the content and functions they need and are they converting? How can it be improved?</h4>
<p>It may be that you don’t know if your website or app needs minor updates or a major redesign, best not to make assumptions around this as it can be costly. There’s no such thing as a perfect user experience, there’s always room for improvement and discovering where the improvements can be made is where a UX audit can be invaluable.</p>
<p>Research carried out by Forester in 2017 shows that, on average, every €1 invested in UX brings €100 in return. They also found that a well-designed user interface could raise your website’s conversion rate by up to a 200%, and better UX design could increase conversion rates up to 400%.</p>
<h3>The Process of a UX Audit</h3>
<p>A UX audit will go through a series of steps that will help uncover any usability issues. This will provide actionable recommendations that will help eliminate any issues and improve the overall user experience and conversion rate. The process of a UX audit will vary depending on the goals, budget and time allotted. This could range from a day or two to several weeks. During a UX audit, the auditor uses a variety of tools, research methods and metrics to find out where the software is or is not working. The most effective UX audit would include quantitative and qualitative research that involves users, this would include usability testing, interviews or surveys.</p>
<p>As part of a UX audit, a UX professional would usually carry out what is known as a heuristic evaluation of the software. User experience pioneers Jakob Nielsen and Rolf Molich published an article in the early 1990’s which contained a set of principles, or heuristics, that industry specialists soon began to adopt as a benchmark to systematically determine the usability of an interface. In the absence of enough time or budget for user research, a heuristic evaluation may be central to the audit process.</p>
<p>&nbsp;</p>
<h3>10 Usability Heuristics for User Interface Design</h3>
<p>As experts, we go through a checklist of criteria to find flaws and areas that can be improved based on the following principles.</p>
<h4>#1: Visibility of system status</h4>
<p>The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.</p>
<div id="attachment_12374" style="width: 799px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12374" class="wp-image-12374 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/image.png" alt="" width="789" height="272" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/image.png 789w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-250x86.png 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-700x241.png 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-768x265.png 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-120x41.png 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-80x28.png 80w" sizes="(max-width: 789px) 100vw, 789px" /><p id="caption-attachment-12374" class="wp-caption-text">A progress bar tells the user something is happening and indicates how long it might take. This builds trust and patients.</p></div>
<p>&nbsp;</p>
<h4>#2: Match between system and the real world</h4>
<p>The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.</p>
<div id="attachment_12381" style="width: 1404px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12381" class="wp-image-12381 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/cal.png" alt="" width="1394" height="896" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/cal.png 1394w, https://www.api.friday.ie/wp-content/uploads/2021/07/cal-250x161.png 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/cal-700x450.png 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/cal-768x494.png 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/cal-120x77.png 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/cal-80x51.png 80w" sizes="(max-width: 1394px) 100vw, 1394px" /><p id="caption-attachment-12381" class="wp-caption-text">Familiarity with something in the real world, the Mac calculator is not too far from the old Casio model we all used in school.</p></div>
<p>&nbsp;</p>
<h4>#3: User control and freedom</h4>
<p>Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process, a bit like the undo command that is common on a PC.</p>
<div id="attachment_12387" style="width: 1312px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12387" class="wp-image-12387 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/undo.png" alt="" width="1302" height="699" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/undo.png 1302w, https://www.api.friday.ie/wp-content/uploads/2021/07/undo-250x134.png 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/undo-700x376.png 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/undo-768x412.png 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/undo-120x64.png 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/undo-80x43.png 80w" sizes="(max-width: 1302px) 100vw, 1302px" /><p id="caption-attachment-12387" class="wp-caption-text">The undo feature Google added in Gmail gives the user 5 seconds to stop an email from sending (after they press send), might come in handy!</p></div>
<p>&nbsp;</p>
<h4>#4: Consistency and standards</h4>
<p>Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions and reduce learning.</p>
<div id="attachment_12382" style="width: 1209px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12382" class="wp-image-12382 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/jakobs-law-utility-nav.jpg" alt="" width="1199" height="525" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/jakobs-law-utility-nav.jpg 1199w, https://www.api.friday.ie/wp-content/uploads/2021/07/jakobs-law-utility-nav-250x109.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/jakobs-law-utility-nav-700x307.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/jakobs-law-utility-nav-768x336.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/jakobs-law-utility-nav-120x53.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/jakobs-law-utility-nav-80x35.jpg 80w" sizes="(max-width: 1199px) 100vw, 1199px" /><p id="caption-attachment-12382" class="wp-caption-text">Don’t reinvent the wheel, users will find familiar interfaces that follow convention much easier to use.</p></div>
<p>&nbsp;</p>
<h4>#5: Error prevention</h4>
<p>Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.</p>
<div id="attachment_12378" style="width: 3407px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12378" class="wp-image-12378 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal.png" alt="" width="3397" height="1704" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal.png 3397w, https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal-250x125.png 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal-700x351.png 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal-768x385.png 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal-1536x770.png 1536w, https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal-2048x1027.png 2048w, https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal-120x60.png 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/5ccb5076df86e7441a9f761b_modal-80x40.png 80w" sizes="(max-width: 3397px) 100vw, 3397px" /><p id="caption-attachment-12378" class="wp-caption-text">Users need to fully understand the outcome of their actions.</p></div>
<p>&nbsp;</p>
<h4>#6: Recognition rather than recall</h4>
<p>Minimise the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.</p>
<div id="attachment_12384" style="width: 2654px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12384" class="wp-image-12384 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08.png" alt="" width="2644" height="1468" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08.png 2644w, https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08-250x139.png 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08-700x389.png 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08-768x426.png 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08-1536x853.png 1536w, https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08-2048x1137.png 2048w, https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08-120x67.png 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/Screenshot-2021-07-28-at-09.37.08-80x44.png 80w" sizes="(max-width: 2644px) 100vw, 2644px" /><p id="caption-attachment-12384" class="wp-caption-text">In Phtoshop, Adobe present the users with a list of recently worked on files, this helps the user from having to go rooting for them.</p></div>
<p>&nbsp;</p>
<h4>#7: Flexibility and efficiency of use</h4>
<p>Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.</p>
<div id="attachment_12379" style="width: 1210px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12379" class="wp-image-12379 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/130870-phones-feature-what-is-apple-pay-and-how-does-it-work-image1-qjaxkx6zrb.jpg" alt="" width="1200" height="800" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/130870-phones-feature-what-is-apple-pay-and-how-does-it-work-image1-qjaxkx6zrb.jpg 1200w, https://www.api.friday.ie/wp-content/uploads/2021/07/130870-phones-feature-what-is-apple-pay-and-how-does-it-work-image1-qjaxkx6zrb-250x167.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/130870-phones-feature-what-is-apple-pay-and-how-does-it-work-image1-qjaxkx6zrb-700x467.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/130870-phones-feature-what-is-apple-pay-and-how-does-it-work-image1-qjaxkx6zrb-768x512.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/130870-phones-feature-what-is-apple-pay-and-how-does-it-work-image1-qjaxkx6zrb-120x80.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/130870-phones-feature-what-is-apple-pay-and-how-does-it-work-image1-qjaxkx6zrb-80x53.jpg 80w" sizes="(max-width: 1200px) 100vw, 1200px" /><p id="caption-attachment-12379" class="wp-caption-text">Payment applications like ApplePay and Google Pay help users quickly pay for something online without having to enter their payment and personal details again and again.</p></div>
<p>&nbsp;</p>
<h4>#8: Aesthetic and minimalist design</h4>
<p>Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.</p>
<div id="attachment_12380" style="width: 2040px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12380" class="wp-image-12380 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/Busy.png" alt="" width="2030" height="1035" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/Busy.png 2030w, https://www.api.friday.ie/wp-content/uploads/2021/07/Busy-250x127.png 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/Busy-700x357.png 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/Busy-768x392.png 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/Busy-1536x783.png 1536w, https://www.api.friday.ie/wp-content/uploads/2021/07/Busy-120x61.png 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/Busy-80x41.png 80w" sizes="(max-width: 2030px) 100vw, 2030px" /><p id="caption-attachment-12380" class="wp-caption-text">Less is more. Users like consuming information at a glance. Clean design minimalist design helps with this.</p></div>
<p>&nbsp;</p>
<h4>#9: Help users recognise, diagnose, and recover from errors</h4>
<p>Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.</p>
<div id="attachment_12386" style="width: 1210px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12386" class="wp-image-12386 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/twitter_Eg3hXdQWoAI0Dgq.jpg" alt="" width="1200" height="675" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/twitter_Eg3hXdQWoAI0Dgq.jpg 1200w, https://www.api.friday.ie/wp-content/uploads/2021/07/twitter_Eg3hXdQWoAI0Dgq-250x141.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/twitter_Eg3hXdQWoAI0Dgq-700x394.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/twitter_Eg3hXdQWoAI0Dgq-768x432.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/twitter_Eg3hXdQWoAI0Dgq-120x68.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/twitter_Eg3hXdQWoAI0Dgq-80x45.jpg 80w" sizes="(max-width: 1200px) 100vw, 1200px" /><p id="caption-attachment-12386" class="wp-caption-text">Help users solve a problem, give them as much informartion as posisble without technical jargon.</p></div>
<p>&nbsp;</p>
<h4>#10: Help and documentation</h4>
<p>It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.</p>
<div id="attachment_12383" style="width: 1608px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12383" class="wp-image-12383 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/monday.png" alt="" width="1598" height="989" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/monday.png 1598w, https://www.api.friday.ie/wp-content/uploads/2021/07/monday-250x155.png 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/monday-700x433.png 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/monday-768x475.png 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/monday-1536x951.png 1536w, https://www.api.friday.ie/wp-content/uploads/2021/07/monday-120x74.png 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/monday-80x50.png 80w" sizes="(max-width: 1598px) 100vw, 1598px" /><p id="caption-attachment-12383" class="wp-caption-text">A smart, predictive search can help users find answers to their questions quickly.</p></div>
<p>&nbsp;</p>
<h3>The Output of a UX Audit</h3>
<p>A UX audit should also take into account the content, layout and the user flow through the interface and uncover any blocks or hurdles that users may have to get past in order to complete a task.<br />
There is no universal format for a UX audit report, each one is tailored to the process employed for the project. It may consists of some or all of the following.</p>
<ul>
<li>Usability review / heuristic evaluation</li>
<li>Information architecture review</li>
<li>Data analytics</li>
<li>Revised User flows</li>
<li>Review of language, clarity, and Calls to action</li>
<li>Conversion optimisation</li>
<li>Content review</li>
<li>Visual design review</li>
<li>Suggested updates mapped out in a priority matrix</li>
</ul>
<p>At the end of a UX audit, you should receive a comprehensive report with clear and actionable recommendations and advice. The key suggestions from this audit can be mapped out in a priority matrix that will identify the quick wins or low hanging fruit that will have the highest impact on UX with lowest amount of design or development effort — we start from there and work our way through the findings to maximise ROI as quickly as possible.</p>
<div id="attachment_12391" style="width: 1010px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-12391" class="wp-image-12391 size-full" src="https://www.api.friday.ie/wp-content/uploads/2021/07/image-1.png" alt="" width="1000" height="800" srcset="https://www.api.friday.ie/wp-content/uploads/2021/07/image-1.png 1000w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-1-250x200.png 250w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-1-700x560.png 700w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-1-768x614.png 768w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-1-120x96.png 120w, https://www.api.friday.ie/wp-content/uploads/2021/07/image-1-80x64.png 80w" sizes="(max-width: 1000px) 100vw, 1000px" /><p id="caption-attachment-12391" class="wp-caption-text">Priority Matrix</p></div>
<p>A UX audit is an essential process for any software product, app or website. A well-executed review will help businesses fix problems quickly, improve retention and boost conversions.</p>
<h4><strong>Interested in running a UX audit on your app or website?</strong></h4>
<p>Please, get in touch to see how we can help.</p>


What is a User Experience Audit and how is it Useful?

Why design systems are important: A single source of truth

<p>Imagine meeting someone for the first time, they found you confusing and had trouble understanding you and answering your questions. They might walk away from the engagement thinking you were complex, inarticulate, demanding and robot like. Not a great start, first impressions last.</p>
<p>Online forms are what connects many businesses to their customers. It’s often the first contact customers make, so we should make a good impression and keep the engagement simple, logical and as human as possible.</p>
<p>Form design is one of the cornerstones of UX and conversion rate optimisation (CRO). This is the point of conversion for many campaigns where marketing teams spend a lot of time and money on driving potential customers towards buying their product or service. If a user gets this far, the chance of conversion if high, so it’s important we remove as much friction as possible.</p>
<h3>How can I make forms more effective?</h3>
<p>A user will look at a form to see if the effort matches their motivation. A quick glance will tell them if the process is going to be easy or not. A poorly designed form will give the user a perception of complexity, even if this is not the case.</p>
<p>If there are a lot of fields, use multi-step forms to spread them over a number of pages, group related fields into logical sets like “your details’, ‘your booking’ and ‘payment’ — we call this chunking, or dividing fields into semantic groups.</p>
<img loading="lazy" decoding="async" width="1480" height="688" class="aligncenter size-full wp-image-11583" src="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage1.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage1.jpg 1480w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage1-250x116.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage1-700x325.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage1-768x357.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage1-120x56.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage1-80x37.jpg 80w" sizes="(max-width: 1480px) 100vw, 1480px" />
<h3>What information should I ask for on a form?</h3>
<p>Only ask for the information you really need. Think about the data you are asking for, if it is all 100% necessary and within GDPR guidelines.</p>
<p>What you are asking for should make sense to the user based on what they are buying, they will already have an expectation of the data you need. Do you really need the users date of birth for them to buy a pair of socks?</p>
<p>If the user doesn’t understand why you are asking for personal information they may not complete the form. If you have to ask for sensitive or unexpected information, clearly explain the reasons why.</p>
<p>Reducing the amount of data you ask for will save users time and make them feel more comfortable.</p>
<h3>What is best practice in form design?</h3>
<p>There are dozens of best practice design conventions that make forms easier to fill out and increase conversions. I’ll cover some of the main ones below.</p>
<h4>Use a single-column layout</h4>
<p>Give your form a simple vertical flow, don’t have the users eyes zig zagging all over the screen. Multi-column form layouts can be prone to misinterpretation, users can skip fields where they actually have data to input because they do not notice them, especially on mobile.</p>
<img loading="lazy" decoding="async" width="1480" height="688" class="aligncenter size-full wp-image-11581" src="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage3.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage3.jpg 1480w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage3-250x116.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage3-700x325.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage3-768x357.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage3-120x56.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage3-80x37.jpg 80w" sizes="(max-width: 1480px) 100vw, 1480px" />
<p>&nbsp;</p>
<h4>Don’t ask users to repeat fields</h4>
<p>We’ve all come across it, we’re asked to enter a new password twice to verify it and what we end up doing is copying and pasting the text into the second field, it defeats the purpose. Instead of asking users to confirm a password, let them see it, you can use a toggle to display the password as they type.</p>
<h4><img loading="lazy" decoding="async" width="1480" height="688" class="aligncenter size-full wp-image-11582" src="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage2.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage2.jpg 1480w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage2-250x116.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage2-700x325.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage2-768x357.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage2-120x56.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage2-80x37.jpg 80w" sizes="(max-width: 1480px) 100vw, 1480px" />Avoid Drop-down Menus</h4>
<p>Through years of usability testing we have found that using drop-down menus for the wrong input types can lead to slower form completion time and validation errors which increase the likelihood of form abandonments. In general, avoid drop-downs when there are fewer than 5 or more than 10 options.</p>
<p>Radio buttons or checkboxes work well for less than 5 options and if you have over 10 options like a choice of country, try using an open text field with auto-complete, it saves the user time and frustration.</p>
<h4>Use Placeholders</h4>
<p>Don’t assume the users know what information you are asking for on each field, give them a hint, this should help with any questions that might arise.</p>
<img loading="lazy" decoding="async" width="1480" height="688" class="aligncenter size-full wp-image-11580" src="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage4.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage4.jpg 1480w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage4-250x116.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage4-700x325.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage4-768x357.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage4-120x56.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage4-80x37.jpg 80w" sizes="(max-width: 1480px) 100vw, 1480px" />
<h4>Try not to split fields</h4>
<p>It should not be necessary to split fields like First name and Last name, one field for both will do, this will save the users time and clicks. If you need to split them later this should be easy enough to do in the database or even in Excel.</p>
<img loading="lazy" decoding="async" width="1480" height="463" class="aligncenter size-full wp-image-11578" src="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage7.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage7.jpg 1480w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage7-250x78.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage7-700x219.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage7-768x240.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage7-120x38.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage7-80x25.jpg 80w" sizes="(max-width: 1480px) 100vw, 1480px" />
<h4>Language</h4>
<p>One area of UX design that often gets overlooked is copywriting, designers are usually not good copywriters (myself included). UX copywriting makes experiences more efficient, by helping readers navigate their way to their desired outcome. Copy should be concise, friendly and written in plain English. It’s UX design, but with words. When it comes to error messages and form validation don’t be a robot, help the user by keeping the copy clear and easy to understand. Help the user solve the problem.</p>
<p>I could go on —</p>
<ul>
<li>always mark mandatory fields with an astrix</li>
<li>align labels top-left for best readability</li>
<li>don’t use CAPs</li>
<li>use conditional logic to shorten your forms</li>
<li>use autofocus on active fields…</li>
</ul>
<h3>What is good UX for submitting and providing form feedback?</h3>
<p>If the user has gone to the trouble of completing your form, you need to give them good feedback, reassurance that it worked and be clear about what happens next.</p>
<h4>Use clear and obvious action buttons</h4>
<p>Don’t make the mistake of being a robot again by putting a label like ‘Submit’ or ‘Send’ on the action button, this tells the user nothing about what is going to happen. Set the expectation, tell them what they are about to do. This clarity is essential for great calls to action, they go a long way in making a form more compelling and trustworthy.</p>
<img loading="lazy" decoding="async" width="1480" height="688" class="aligncenter size-full wp-image-11577" src="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage5.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage5.jpg 1480w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage5-250x116.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage5-700x325.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage5-768x357.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage5-120x56.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage5-80x37.jpg 80w" sizes="(max-width: 1480px) 100vw, 1480px" />
<h4>No one enjoys waiting</h4>
<p>When it comes to loading and submitting data, your form should be lightning fast. Make sure you have a well resourced server and use Google Lighthouse to check your forms performance and accessibility.</p>
<p>If you have to keep a user waiting after submission, provide some feedback to show them something is happening behind the scenes. A simple animation will do this while distracting them from the time passing. You can also use some clever animations to keep them amused and the time will pass quickly.</p>
<h4>Celebrate success</h4>
<p>When a form has been submitted, tell the user it worked (or not). Show them a message of success but also let them know what happens next. Will they get an email? Will their concert tickets be posted to them? — set the expectation.</p>
<img loading="lazy" decoding="async" width="1480" height="688" class="aligncenter size-full wp-image-11576" src="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage6.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage6.jpg 1480w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage6-250x116.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage6-700x325.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage6-768x357.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage6-120x56.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2021/01/BlogImage6-80x37.jpg 80w" sizes="(max-width: 1480px) 100vw, 1480px" />
<h3>What is the number one thing I can do to improve the UX of my forms?</h3>
<p>None of this is rocket science but all of it will go a long way to maximising your online conversions. You can take all of our advise but the one thing that all UX comes back to in the end is test, test, test! If you don’t carry out usability testing, you won’t know if a form is working to its full potential.</p>


Form UX: Better Forms for More Conversions

<p><span style="font-weight: 400;">Web accessibility is all about inclusivity. It’s the idea that everyone, regardless of limitations, should have the same opportunity to view content on the web like everyone else. These limitations include visual, auditory or physical disabilities. Making your website accessible will become ever more crucial in 2021.</span></p>
<p><span style="font-weight: 400;">Although building a site that fully caters to these limitations is a time-consuming process, there are a few easy wins we can do that will make using the website a bit easier for users with disabilities.</span></p>
<p style="text-align: center;"><em><strong>&#8220;The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.&#8221;</strong></em></p>
<p style="text-align: center; margin-top: -20px;"><span style="font-weight: 400;">&#8211; Tim Berners-Lee, W3C Director and inventor of the World Wide Web.</span></p>
<h2><span style="font-weight: 400;">Why Web Accessibility will be crucial in 2021</span></h2>
<p><span style="font-weight: 400;">In 2019, Dominos lost a lawsuit to a blind man who was unable to order food on their website or mobile app even though he was using a screen reader. Although a huge win for disability advocates, it’s a warning sign for companies that if your digital platforms are not accessible enough then you could face legal repercussions.</span></p>
<div id="attachment_11086" style="width: 1034px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-11086" class="wp-image-11086 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/09/the_dominos_effect.png" alt="Graph of The Dominos Effect on lawsuits regarding accessibility" width="1024" height="785" srcset="https://www.api.friday.ie/wp-content/uploads/2020/09/the_dominos_effect.png 1024w, https://www.api.friday.ie/wp-content/uploads/2020/09/the_dominos_effect-250x192.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/09/the_dominos_effect-700x537.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/09/the_dominos_effect-768x589.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/09/the_dominos_effect-120x92.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/09/the_dominos_effect-80x61.png 80w" sizes="(max-width: 1024px) 100vw, 1024px" /><p id="caption-attachment-11086" class="wp-caption-text">Web accessibility court cases slow on the lead up to the Dominos case, then quickly increases afterwards.</p></div>
<p><span style="font-weight: 400;">Ireland, among other EU entities, currently only require public sector websites to meet a specific accessibility standard but this is likely to extend to other sectors in the coming years.</span></p>
<p style="font-weight: 400;">Regardless of the possible legal repercussions of your site not being accessible, you’re simply losing out on revenue by not including some level of accessibility.</p>
<p><span style="font-weight: 400;">In a survey, it was determined that 71% of web users with disabilities will leave your site if it’s too difficult for them to use. 82% are willing to pay more for the same products if the competitor’s site is more accessible.</span><span style="font-weight: 400;"> </span></p>
<p><span style="font-weight: 400;">It can be very difficult to meet full compliance with all web accessibility rules unless a website is specifically designed to do so. However, following the points below can help your site reach some level of web accessibility.</span></p>
<h2><span style="font-weight: 400;">Good Colour Contrast</span></h2>
<p><span style="font-weight: 400;">When we talk about colour contrast in the context of a web page, we are talking about the colour difference between the colour of text and the background colour that appears behind it. Having good colour contrast on your web page ensures all users, even those who are visually impaired, will be able to read the page’s content with ease.</span></p>
<p><span style="font-weight: 400;">A classic example of good colour contrast, and one you will see most commonly around the web, is black text on a white background. An example of bad colour contrast is having light grey text over a white background.</span></p>
<p><span style="font-weight: 400;">As a general rule, you want a dark colour over a light colour or vice versa.</span></p>
<div id="attachment_11090" style="width: 1210px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-11090" class="wp-image-11090 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/09/good-vs-bad-contrast.png" alt="Examples of good contrast versus bad contrast" width="1200" height="1200" srcset="https://www.api.friday.ie/wp-content/uploads/2020/09/good-vs-bad-contrast.png 1200w, https://www.api.friday.ie/wp-content/uploads/2020/09/good-vs-bad-contrast-250x250.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/09/good-vs-bad-contrast-700x700.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/09/good-vs-bad-contrast-150x150.png 150w, https://www.api.friday.ie/wp-content/uploads/2020/09/good-vs-bad-contrast-768x768.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/09/good-vs-bad-contrast-120x120.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/09/good-vs-bad-contrast-80x80.png 80w" sizes="(max-width: 1200px) 100vw, 1200px" /><p id="caption-attachment-11090" class="wp-caption-text">Good contrast left VS Bad contrast right</p></div>
<p><span style="font-weight: 400;">A common issue with colour contrast also arises when text is shown over an image. The background image could have all sorts of colours resulting in some words in the text having food contrast, and others having bad contrast.</span></p>
<p><span style="font-weight: 400;">You can check if two colours have good enough colour contrast for visually impaired users by using a comparison tool like the one on </span><a href="https://webaim.org/resources/contrastchecker/"><span style="font-weight: 400;">WebAIM (Web Accessibility in Mind).</span></a></p>
<h2><span style="font-weight: 400;">Add Alt Text on Images</span></h2>
<p><span style="font-weight: 400;">Image alt text is used to describe an image on a web page. It’s the text equivalent of the image. Aside from some SEO benefits, alt text can also be read by screen readers which visually impaired users would be using to read out aloud content on a web page.</span></p>
<p><span style="font-weight: 400;">If an image does not have an alt text, screen readers cannot determine what the image represents which can be detrimental for visually impaired users if the image holds strong significance in the context of the webpage.</span></p>
<p><span style="font-weight: 400;">When a screen reader comes across an image without alt text it will either skip over the image entirely or try to read out the image URL, which wouldn’t be great if the image file was called something like my-image437829403728.jpg!</span></p>
<p><span style="font-weight: 400;">There are a few important points to take note of when writing alt text for images:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Alt text should be concise. Aside from a few rare cases, alt text should be no longer than a single sentence.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">If the image is purely decorative (like a background image) then alt text is not required as it holds no significance in relation to the content of the web page.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Avoid using phrases like “An image of…” or “A picture of&#8230;”. If it’s being added to alt text, the implication is that it’s being used to describe an image so adding that extra wording is redundant.</span></li>
</ul>
<p><span style="font-weight: 400;">For example, in the image below we can see it’s a picture of an avocado. Simply setting the alt text as “Avocado” would be considered bad alt text. For good alt text, we’d need to describe the scene in more detail, something like “Avocado cut in half on a chopping board beside a knife, with oranges in the background”.</span></p>
<div id="attachment_11089" style="width: 1930px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-11089" class="wp-image-11089 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/09/avocado.jpg" alt="Avocado cut in half on a chopping board beside a knife, with oranges in the background" width="1920" height="1280" srcset="https://www.api.friday.ie/wp-content/uploads/2020/09/avocado.jpg 1920w, https://www.api.friday.ie/wp-content/uploads/2020/09/avocado-250x167.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2020/09/avocado-700x467.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2020/09/avocado-768x512.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2020/09/avocado-1536x1024.jpg 1536w, https://www.api.friday.ie/wp-content/uploads/2020/09/avocado-120x80.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2020/09/avocado-80x53.jpg 80w" sizes="(max-width: 1920px) 100vw, 1920px" /><p id="caption-attachment-11089" class="wp-caption-text">“Avocado cut in half on a chopping board beside a knife, with oranges in the background”</p></div>
<h2><span style="font-weight: 400;">Don’t Rely on Colours Alone to Convey Information</span></h2>
<p><span style="font-weight: 400;">There are many types of colour blindness which can affect people&#8217;s ability to perceive low contrast colours, getting certain colours mixed up, or simply not being able to identify a colour at all.</span></p>
<p><span style="font-weight: 400;">If we rely too heavily on using only colour to convey information, we make it very difficult or impossible for a colour blind user to get that information. To get around this, it is best to use a combination of colour, text and icons to get our information across.</span></p>
<p><span style="font-weight: 400;">For example, on Google Maps Traffic map, non-colour blind users can clearly see the red and green lines which we would correlate with fast traffic and slow traffic. </span></p>
<p><span style="font-weight: 400;">If we use </span><a href="https://apps.apple.com/us/app/sim-daltonism/id693112260?mt=12"><span style="font-weight: 400;">Sim Daltonism</span></a><span style="font-weight: 400;">, a tool used to imitate how a colour blind user would view a webpage, trying to figure out the information the map is trying to tell is much more difficult to interpret.</span></p>
<p><span style="font-weight: 400;">What Google has done right is to add a legend to the bottom of the map. Now, even if a user can’t perceive the red and green lines, they can use the legend at the bottom of the map and determine which shades of contrast mean fast or slow traffic.</span></p>
<div id="attachment_11088" style="width: 924px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-11088" class="wp-image-11088 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/09/color-blind-map.png" alt="Google Maps traffic with Protanopia colour blindness" width="914" height="649" srcset="https://www.api.friday.ie/wp-content/uploads/2020/09/color-blind-map.png 914w, https://www.api.friday.ie/wp-content/uploads/2020/09/color-blind-map-250x178.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/09/color-blind-map-700x497.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/09/color-blind-map-768x545.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/09/color-blind-map-120x85.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/09/color-blind-map-80x57.png 80w" sizes="(max-width: 914px) 100vw, 914px" /><p id="caption-attachment-11088" class="wp-caption-text">Google Maps traffic with Protanopia colour blindness</p></div>
<h2><span style="font-weight: 400;">Use Logical Page Headings</span></h2>
<p><span style="font-weight: 400;">If you’ve ever used a text editor you may have noticed that in the text format dropdown there are a bunch of numbered headers, Header 1, Header 2, Header 3, etc… It may come as a surprise that those numbers mean more than applying different font sizes to text. Screen readers and assistive technologies use them to navigate around the page and to determine what the page is all about!</span></p>
<p><span style="font-weight: 400;">Because of this, it’s important that those headers are organised in a way that makes sense in the context of the web page.</span></p>
<p><span style="font-weight: 400;">The most important heading is the &lt;h1&gt; (Header 1) tag which should state the topic of the page. There should only be one &lt;h1&gt; tag per page.</span></p>
<p><span style="font-weight: 400;">Headings that are higher or the same tag level indicate a new section. Headings with a lower rank indicate a subsection. Skipping tag levels should be avoided if possible.</span></p>
<p><span style="font-weight: 400;">In the screenshot below we see the page is about Music Genres and a </span><i><span style="font-weight: 400;">&lt;h1&gt;</span></i><span style="font-weight: 400;"> is used. We then have a section about Rock music (</span><i><span style="font-weight: 400;">&lt;h2&gt;, Header 2</span></i><span style="font-weight: 400;">) which also has subgenres of rock music, glam and blues (</span><i><span style="font-weight: 400;">&lt;h3&gt;, Header 3</span></i><span style="font-weight: 400;">).</span></p>
<p><span style="font-weight: 400;">The next title is Jazz, a &lt;h2&gt; tag and is higher than the previous &lt;h3&gt; title; it tells us that Rock section is finished.</span></p>
<div id="attachment_11087" style="width: 492px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-11087" class="wp-image-11087 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/09/Screenshot-2020-08-31-at-17.15.01.png" alt="Example of heading hierarchy using Music Genres as an example" width="482" height="462" srcset="https://www.api.friday.ie/wp-content/uploads/2020/09/Screenshot-2020-08-31-at-17.15.01.png 482w, https://www.api.friday.ie/wp-content/uploads/2020/09/Screenshot-2020-08-31-at-17.15.01-250x240.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/09/Screenshot-2020-08-31-at-17.15.01-120x115.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/09/Screenshot-2020-08-31-at-17.15.01-80x77.png 80w" sizes="(max-width: 482px) 100vw, 482px" /><p id="caption-attachment-11087" class="wp-caption-text">Music genre header hierarchy</p></div>
<h2><span style="font-weight: 400;">Web Accessibility Benefits Everyone</span></h2>
<p><span style="font-weight: 400;">It’s very likely you have, in some way, benefitted from something that was originally intended to cater specifically for people with disabilities. </span></p>
<p><span style="font-weight: 400;">SMS texting was originally intended for deaf people to communicate in lieu of the telephone, automatic doors and stair ramps for people with physical disabilities, and typewriters (and in turn, keyboards) for blind people to write without having to scribe letters.</span></p>
<p><span style="font-weight: 400;">Good colour contrast can help reduce eye strain. Users with bad internet connections who can’t load that 2MB image benefit from alt text on images. Users who have monochrome screens to increase productivity and fight </span><a href="https://medium.com/better-humans/how-to-make-your-iphone-black-and-white-and-why-you-should-42e70deb92c7"><span style="font-weight: 400;">screen addiction</span></a><span style="font-weight: 400;"> benefit from conveying information with more than just colour. Logical page headers help with quick page comprehension. </span></p>
<p><span style="font-weight: 400;">When designing for inclusivity, it doesn’t just benefit those with disabilities, it can benefit everyone.</span></p>
<h2><span style="font-weight: 400;">Conclusion</span></h2>
<p><span style="font-weight: 400;">According to the </span><a href="https://www.w3.org/TR/WCAG20/#conformance-reqs"><span style="font-weight: 400;">Accessibility Guidelines Working Group (AG WG)</span></a><span style="font-weight: 400;">, it is not recommended in general that a website meets the highest level of accessibility conformance as this greatly affects design and functionality, and in some cases may not even be possible. </span></p>
<p><span style="font-weight: 400;">That being said, it’s still important to try to make the web a more accessible place and hit those accessibility conformance goals whenever possible. </span></p>
<p><span style="font-weight: 400;">With the stricter accessibility requirements regime for the public sector being introduced in both </span><a href="https://www.levelaccess.com/blog/aoda-reporting-deadline-what-happens-if-your-website-isnt-compliant/"><span style="font-weight: 400;">North America</span></a><span style="font-weight: 400;"> and </span><a href="https://www.ics.ie/news/eu-accessibility-legislation-keeping-the-public-sector-accessible#:~:text=Existing%20websites%20will%20have%20to,such%20as%20hospitals%20or%20universities."><span style="font-weight: 400;">the EU</span></a><span style="font-weight: 400;">, no doubt similar requirements will eventually become the norm. </span></p>
<p><span style="font-weight: 400;">In a survey by WebAIM, </span><span style="font-weight: 400;">only <a href="https://webaim.org/projects/screenreadersurvey8/#progress">40% of 1224 users</a> think that web accessibility has improved</span><span style="font-weight: 400;">. </span><span style="font-weight: 400;"><a href="https://webaim.org/projects/screenreadersurvey8/#reasons">72% think this is due to a lack of awareness</a> or lack of accessibility skills/knowledge</span><span style="font-weight: 400;">. In the 2019 Frontend Tooling Survey, of 3005 developers surveyed, </span><a href="https://www.ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results.html#web-accessibility"><span style="font-weight: 400;">63% don’t use any tools for accessibility testing</span></a><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">Although web accessibility has been gaining more awareness over recent years, it’s clear that in many cases, web accessibility is merely an afterthought or not considered at all. </span></p>
<p><span style="font-weight: 400;">Research has shown that this can be a costly mistake as 82% of online shoppers with disabilities will happily pay more for products if your website is more easily accessible than cheaper alternatives. This doesn’t just increase revenue, it increases brand loyalty.</span></p>
<p><span style="font-weight: 400;">If a web user has any sort of disability, right now it’s a roll of the dice whether they’ll be able to fully or partially easily access the functionality or information of a website. As web accessibility awareness grows we’ll hopefully see the web becoming a more inclusive place.</span></p>


Parking area allocated for wheelchair users

Web Accessibility & Why its Crucial in 2021

<p><em><span style="font-weight: 400;">Dark user interfaces (UI) have become very popular with users over the last few years. We have seen some of the most popular apps and services like Android, MacOS, Spotify, Instagram, Gmail and Netflix that have been designed with a Dark mode in mind. Let&#8217;s talk about what factors should be considered when choosing between a dark UI vs a light UI and what is best for your users.</span></em></p>
<p><span style="font-weight: 400;">As designers, we face the dilemma of whether to use a dark UI or light UI not only when creating a product but also when using an application on your phone. We can all agree that a dark UI looks cool and stylish. However, using dark interfaces can be the wrong way to go for your users.</span></p>
<img loading="lazy" decoding="async" width="1864" height="1234" class="aligncenter size-full wp-image-10955" src="https://www.api.friday.ie/wp-content/uploads/2020/07/Dark-vs-Light.png" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2020/07/Dark-vs-Light.png 1864w, https://www.api.friday.ie/wp-content/uploads/2020/07/Dark-vs-Light-250x166.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/07/Dark-vs-Light-700x463.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/07/Dark-vs-Light-768x508.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/07/Dark-vs-Light-1536x1017.png 1536w, https://www.api.friday.ie/wp-content/uploads/2020/07/Dark-vs-Light-120x79.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/07/Dark-vs-Light-80x53.png 80w" sizes="(max-width: 1864px) 100vw, 1864px" />
<h3><b>Things to consider when making a decision between a dark or light UI</b></h3>
<p>Quite often, the decision to opt for a darker UI is based on personal preferences rather than a solid understanding of what is right for the product. But the decision to choose between a dark UI or light UI should be <a href="https://medium.com/@CanvasFlip/dark-ui-vs-light-ui-how-to-make-the-right-choice-5ddde9baabdb/" target="_blank" rel="noopener noreferrer">well-thought-out</a>. Instead of assuming what might be good for your product, answering the following questions might be the right place to start: <em>What is the purpose of your content? Is it going to be a more visual product or a text-heavy one?</em></p>
<p class="first-sentence-half" style="text-align: left;"><span class="nd-word">The </span><span class="nd-word">background </span><span class="nd-word">you </span><span class="nd-word">choose </span><span class="nd-word">for </span><span class="nd-word">your </span><span class="nd-word">layouts </span><span class="nd-word">will </span><span class="nd-word">influence </span><span class="nd-word">the </span><span class="nd-word">readability </span><span class="nd-word">of </span><span class="nd-word">your </span><span class="nd-word">product. </span><span class="nd-word">Readability </span><span class="nd-word">should </span><span class="nd-word">be </span><span class="nd-word">considered </span><span class="nd-word">above </span><span class="nd-word">all </span><span class="nd-word">else, </span><span class="nd-word">in </span><span class="nd-word">particular, if </span><span class="nd-word">the </span><span class="nd-word">text </span><span class="nd-word">is the most important part</span><span class="nd-word"> </span><span class="nd-word">of </span><span class="nd-word">the </span><span class="nd-word">content </span><span class="nd-word">on </span><span class="nd-word">the </span><span class="nd-word">website </span><span class="nd-word">or </span><span class="nd-word">the </span><span class="nd-word">app you&#8217;re working on. Simply put, p</span><span class="nd-word">oor </span><span class="nd-word">readability </span><span class="nd-word">is </span><span class="nd-word">one </span><span class="nd-word">of </span><span class="nd-word">the </span><span class="nd-word">main </span><span class="nd-word">reasons </span><span class="nd-word">for </span><span class="nd-word">bad </span><span class="nd-word">usability.</span></p>
<img loading="lazy" decoding="async" width="2048" height="1109" class="aligncenter size-full wp-image-10967" src="https://www.api.friday.ie/wp-content/uploads/2020/07/better-to-read-01-scaled.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2020/07/better-to-read-01-scaled.jpg 2048w, https://www.api.friday.ie/wp-content/uploads/2020/07/better-to-read-01-250x135.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2020/07/better-to-read-01-700x379.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2020/07/better-to-read-01-768x416.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2020/07/better-to-read-01-1536x832.jpg 1536w, https://www.api.friday.ie/wp-content/uploads/2020/07/better-to-read-01-120x65.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2020/07/better-to-read-01-80x43.jpg 80w" sizes="(max-width: 2048px) 100vw, 2048px" />
<h3><b>Is it harder to read on a dark UI?</b></h3>
<p>The amount of text on a website is also a critical factor for your background decision. Lighter backgrounds are prefered for large bodies of text. Especially when users are likely to stay reading for a longer period of time. That&#8217;s why text-heavy news websites and blogs usually use a white background.</p>
<p>A dark UI can be a good option for highly visual projects that don&#8217;t involve a lot of reading. In this case, it&#8217;s preferable because such UI brings the focus to the visuals. For cases when you want users to focus on a particular area and admire its design, a dark background will allow you to create a distraction-free layout and keep user attention on the item.</p>
<h3><b>Which is better for your eyes &#8211; light or dark UI?</b></h3>
<p>Although dark mode can help minimize eye fatigue, the glare from your screen can still be a problem. Dark mode can be very helpful for people who are especially sensitive to light. Yet, for others, the setting can make it even more <a href="https://www.nngroup.com/articles/dark-mode/" target="_blank" rel="noopener noreferrer">difficult to manage</a>.</p>
<p>Everyone&#8217;s eyes are different, people with certain kind of colour blindness may find it <a href="https://www.vice.com/en_us/article/ywyqxw/apple-dark-mode-eye-strain-battery-life" target="_blank" rel="noopener noreferrer">harder to use</a>. It may also be more difficult for people with astigmatism (when your eyes do not focus light evenly, causing blurred vision from a certain distance). They may find it harder to read white text on black than the other way around, part of this has to do with the light levels.</p>
<p>The decision to use dark mode comes down to how it makes your eyes feel. If you feel it helps you, go for it.</p>
<img loading="lazy" decoding="async" width="1200" height="600" class="aligncenter size-full wp-image-11011" src="https://www.api.friday.ie/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600.png" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600.png 1200w, https://www.api.friday.ie/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-250x125.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-700x350.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-768x384.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-120x60.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-80x40.png 80w" sizes="(max-width: 1200px) 100vw, 1200px" />
<h3><b>User Environment</b></h3>
<p>When we talk about the user environment, we&#8217;re not just talking about where the user is using the platform, but also when. As you would probably expect, dark interfaces are ideal for night-time or evening environments, whereas lighter ones are suited for the daytime. The harsh bright light of a smartphone can cause discomfort when viewed in a darkened room, and the muted aesthetic of a dark UI will not show up as well in brightly lit areas.</p>
<p><span style="font-weight: 400;">The vast majority of entertainment apps tend to opt for dark-themed UI designs and for a good reason. Most entertainment-related activities occur in the evening. Netflix or Amazon Prime is usually watched at night time so we can all say that a dark UI works well in dark environments. </span></p>
<h3><strong>What style does your target audience prefer?</strong></h3>
<p>The first step in designing a UI for your product is to <a href="https://usabilitygeek.com/light-dark-ui-usability-perspective/" target="_blank" rel="noopener noreferrer">know your users and their preferences</a>. Different users have different tastes and different expectations. It is essential to start with researching the competition. Research of close competitors will give you an understanding of which design solutions have already been applied by other players on the market, as well as the factors influencing design solutions.</p>
<h3 id="toggling-themes">Toggling between dark and light mode</h3>
<p>Some companies have adopted the approach of letting the system decide for you when to turn off and on the dark mode, basically, switching between the two when it thinks is best. Another approach is to let the user make up their own mind and have control with just the click of a button based on their needs. That said as a designer, there is already plenty to be done when it comes to designing a site in normal mode, without the addition of a whole new site too. While yes, the core elements are the same, it will still need to be re-worked and altered to sufficiently adapt to dark mode.</p>
<img loading="lazy" decoding="async" width="800" height="600" class="aligncenter size-full wp-image-11012" src="https://www.api.friday.ie/wp-content/uploads/2020/07/daily-ui-day-15-on-off-switch-large.gif" alt="" />
<h3><b>When a dark UI works well</b></h3>
<p><span style="font-weight: 400;">So here’s a shortlist of when a darker UI should be used:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Whenever there are more visuals/videos to watch and little text</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">When there are few elements on the design and there is a good bit of white space</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">When you want to watch a movie or play video games</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Apps that require less effort on reading</span></li>
</ul>
<img loading="lazy" decoding="async" width="2048" height="1109" class="aligncenter size-full wp-image-10961" src="https://www.api.friday.ie/wp-content/uploads/2020/07/netflix-scaled.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2020/07/netflix-scaled.jpg 2048w, https://www.api.friday.ie/wp-content/uploads/2020/07/netflix-250x135.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2020/07/netflix-700x379.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2020/07/netflix-768x416.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2020/07/netflix-1536x832.jpg 1536w, https://www.api.friday.ie/wp-content/uploads/2020/07/netflix-120x65.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2020/07/netflix-80x43.jpg 80w" sizes="(max-width: 2048px) 100vw, 2048px" />
<h3><b>When to stay away from a dark UI</b></h3>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">When your website will be used mostly in the daytime (This can be informed by your analytics and user research)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Products that most of the content is based on reading a lot of text websites or apps that include a lot of elements on the screens</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Whenever you need to use different colour elements throughout the website or product</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;"><span style="font-weight: 400;">B2B websites that include a lot of components, widgets and forms</span></span></li>
</ul>
<h3>Dark or light?</h3>
<p>A simple question with a much more difficult answer. The decision to jump into the <strong>&#8216;dark side&#8217;</strong> should be approached with care. Before making a final decision, we should clearly understand not only the benefits but also the downsides of dark interfaces and whether or not it suits the content we would like to deliver. Even when we think that dark layouts can have a lot of benefits for products and websites, designers should understand their users and take them into consideration when designing.</p>


Dark UI vs. Light UI – Which is best for your users?

<p id="e8b8" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">There are a multitude of UX myths out there and the pattern seems to be that many of them have been carried over from the 90’s and 00’s when our technology was very different. We didn’t have smartphones, internet speeds were slow and the number of people using the internet in 2000 was <a href="https://ourworldindata.org/internet" target="_blank" rel="noopener noreferrer">10% of what is is today</a>. Until Don Norman coined the term “user experience”, it was only adopted by a few of the big tech companies as something called Human–computer interaction (HCI).</p>
<p id="21a8" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">Let me dispel some of these myths that cause so much debate, confusion and frankly waste time for clients,  UX designers and software developers.</p>
<p id="d564" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">Time to take out the trash!</p>
<h3 id="2304" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">1. UX is expensive</strong></h3>
<p id="b6bb" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">There is a famous quote that sums up and obliterates this myth.</p>
<blockquote class="ih ii ij">
<p id="755c" class="gv gw ap ik gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">“If you think good design is expensive, you should look at the cost of bad design.”<br />
— Ralf Speth, CEO of Jaguar</p>
</blockquote>
<p id="8014" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">Until recent times interfaces would be designed based on a designer and developers assumptions combined with the stakeholders opinions. Users were not consulted and testing was usually only carried out on the technical side.</p>
<p id="15a1" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">Sure, in-depth user research and analysis can take time and effort but it’s almost always worthwhile. Budgets do not need to run high in order to carry out user research. It could be done in the form of a user survey, informal interviews and/or usability testing. A good UX designer will have the tools to match most budgets or project timelines. Skipping research and going straight to design should never be an option, your product will suffer and the time and effort to make it right will be multiples of the initial proposed user research costs. Numerous <a class="cm di il im in io" href="https://theamericangenius.com/tech-news/ux-critical-every-1-invested-ux-yields-2-100-return/" rel="noopener nofollow noreferrer">industry studies</a> have stated that every euro spent on UX brings in between €2 and €100 in return through performance optimisation and savings on design, content and development to fix a bad interface, not to mention the lost revenue due to user friction.</p>
<h3 id="fd26" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">2. Users don’t scroll</strong></h3>
<p id="d539" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">Another one from the ’90’s. Lets think about this, when was the last time you landed on a website and didn’t scroll? Scrolling is perfectly natural to us all, there is nothing unusual about it. The thinking that users do not scroll ends up producing websites and apps that have a very cluttered “above the fold” areas that look so busy, users will want to scroll past them, this is what we call a high cognitive load. User don&#8217;t deal well with too many choices. With so many screen sizes and devices ‘the fold’ is no longer possible to define.</p>
<p data-selectable-paragraph=""><img loading="lazy" decoding="async" class="aligncenter wp-image-10883 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/06/tenor.gif" alt="" width="498" height="498" /></p>
<p id="91a4" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">Chartbeat, a data analytics provider, <a class="cm di il im in io" href="https://blog.chartbeat.com/2016/08/10/scrolling-in-the-deep/" target="_blank" rel="noopener nofollow noreferrer">found that</a> “The portion of the page below the fold is viewed for nearly three times as long as the top of the page.”</p>
<h3 id="d7bd" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">3. Users will read all your text</strong></h3>
<p id="8cee" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">There is a little bit of ego in this one, some will make the assumption that users will enthusiastically read their lengthly mission statement with keen interest. Unfortunately not, most users have very short attention spans, they will land on a web page and quickly scan it for the headings that are relevant to them before they begin to read. If the copy below the heading does not satisfy them within a couple of lines they will stop reading and move on. Well structured and concise page content broken up into bite sized chunks with very clear headings perform best — see how this article is structured? Easy.</p>
<h3 id="7815" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">4. You don’t need content to start design</strong></h3>
<p id="211d" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">Content is the bricks and mortar of an interface. Content will shape the design, functionality and structure of the interface. Design should always be content led, the process of creating content will focus the mind on the goals and objectives of any interface and will cause the project direction to evolve organically. The process of content creation will inspire ideas for other content, it forces the team to really think about how the interface and how users engage with the content.</p>
<p data-selectable-paragraph=""><img loading="lazy" decoding="async" class="aligncenter wp-image-10882 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/06/joshua-hoehne-8nOnIx4Mq64-unsplash-scaled.jpg" alt="" width="2048" height="1365" srcset="https://www.api.friday.ie/wp-content/uploads/2020/06/joshua-hoehne-8nOnIx4Mq64-unsplash-scaled.jpg 2048w, https://www.api.friday.ie/wp-content/uploads/2020/06/joshua-hoehne-8nOnIx4Mq64-unsplash-250x167.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2020/06/joshua-hoehne-8nOnIx4Mq64-unsplash-700x467.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2020/06/joshua-hoehne-8nOnIx4Mq64-unsplash-768x512.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2020/06/joshua-hoehne-8nOnIx4Mq64-unsplash-1536x1024.jpg 1536w, https://www.api.friday.ie/wp-content/uploads/2020/06/joshua-hoehne-8nOnIx4Mq64-unsplash-120x80.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2020/06/joshua-hoehne-8nOnIx4Mq64-unsplash-80x53.jpg 80w" sizes="(max-width: 2048px) 100vw, 2048px" /></p>
<p id="a5c7" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">We are often asked to use dummy or placeholder during design and development as waiting for content to be created can slow the process down. In theory this makes sense if the content structure is not going to change but in the two decades I have been working in interface design I have never been involved in a project where using dummy content resulted in no design or development changes.</p>
<p id="85ab" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">Create your content first and the design and development stages of the project will run smoother. The results of this will mean less changes, lower costs, faster turnaround, less stress and a better product.</p>
<h3 id="af70" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">5. If it works for a competitor, it will work for you</strong></h3>
<p id="5670" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">There are a variety of proverbs I can insert here but I’ll leave you think of your own. Just because your very successful competitor is doing something does not mean it will work for you, it may not even be working for them. Sure, lift ideas from your competitors but make sure you test and validate their effectiveness first with your own user base.</p>
<h3 id="2a14" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">6. Icons enhance usability</strong></h3>
<p id="410a" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">Don’t get me wrong, icons are a great way of communicating something quickly and universally without users having to read but this only works if the icon is recognisable. If it&#8217;s not, we’ll need to add a text label to explain what it is. Now the user has to look at the icon and read the label which defeats the purpose of the icon and slows the user down. As Martin LeBlanc put it “A user interface is like a joke, if you have to explain it, it’s not very good.” The simple rule is, if an icon needs a label, don’t use an icon.</p>
<p data-selectable-paragraph=""><img loading="lazy" decoding="async" class="aligncenter wp-image-10887 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/06/icons.png" alt="" width="1366" height="376" srcset="https://www.api.friday.ie/wp-content/uploads/2020/06/icons.png 1366w, https://www.api.friday.ie/wp-content/uploads/2020/06/icons-250x69.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/06/icons-700x193.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/06/icons-768x211.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/06/icons-120x33.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/06/icons-80x22.png 80w" sizes="(max-width: 1366px) 100vw, 1366px" /></p>
<h3 id="dd01" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">7. Design has to be original</strong></h3>
<p id="60ce" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">Most non-conventional interface designs usually carry usability issues. People like familiarity, an interface that is structured in a familiar way will perform better than one that is not. There are a lot of UX conventions that are repeated across websites and apps because they work, users understand them and they provide a good user experience. Don’t try and reinvent the wheel — colour, fonts and photography can usually provide the design originality you want.</p>
<h3 id="51e1" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">8. White space is wasted space</strong></h3>
<p id="6e57" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">In the same way silence gives us time to think, focus and concentrate — white space in a design does something similar. It gives content room to breathe, to stand out in a way users can focus and comprehend it easily. This brings us back to cognitive load, if we throw too much at a user they will become confused and frustrated. White space is your friend, don’t be afraid to use it liberally. Look at the simplicity of this webpage, few distractions and lots of white space (especially on desktop where we can afford the space).</p>
<p data-selectable-paragraph=""><img loading="lazy" decoding="async" class="aligncenter wp-image-10888 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/06/bad.png" alt="" width="1900" height="1153" srcset="https://www.api.friday.ie/wp-content/uploads/2020/06/bad.png 1900w, https://www.api.friday.ie/wp-content/uploads/2020/06/bad-250x152.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/06/bad-700x425.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/06/bad-768x466.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/06/bad-1536x932.png 1536w, https://www.api.friday.ie/wp-content/uploads/2020/06/bad-120x73.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/06/bad-80x49.png 80w" sizes="(max-width: 1900px) 100vw, 1900px" /></p>
<h3 id="4a27" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib"><strong class="bk">9. UX design is the same as User Interface design</strong></h3>
<p id="3d47" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">I wrote <a class="cm di il im in io" href="https://friday.ie/blog/whats-the-difference-between-ux-user-experience-and-ui-user-interface-design/" rel="noopener nofollow noreferrer">a piece about this</a> a while back as there is a lot of confusion around this both inside and outside the industry. First, let’s just define each.</p>
<p class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">UX or user experience design is grounded in research with the goal of understanding user behaviour in order to design an interface that will address the users goals, motivations and pain points. UX is the design of the how it feels to use something, the flow, the functionality, the wording all working together to create a smooth and clear experience.</p>
<p class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">UI design is design of the interfaces aesthetics &#8211; the colours, fonts, imagery and layouts. It sets the visual tone, style, look and feel.</p>
<p id="b0e8" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">While some UX designers may also do some UI design and visa versa, this is not always the case and less so as time goes on, they are both very different areas of expertise but collaborate very closely, one cannot work without the other.</p>
<blockquote class="ih ii ij">
<p id="baf9" class="gv gw ap ik gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">“UI is the saddle, the stirrups, &amp; the reins. UX is the feeling you get being able to ride the horse.”<br />
— Dain Miller, Web Developer</p>
</blockquote>
<p data-selectable-paragraph=""><img loading="lazy" decoding="async" width="1678" height="884" class="aligncenter size-full wp-image-10884" src="https://www.api.friday.ie/wp-content/uploads/2020/06/toptal-blog-image-1513007406573-201f3896bd3ec49768d7127ad2f96b6b.png" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2020/06/toptal-blog-image-1513007406573-201f3896bd3ec49768d7127ad2f96b6b.png 1678w, https://www.api.friday.ie/wp-content/uploads/2020/06/toptal-blog-image-1513007406573-201f3896bd3ec49768d7127ad2f96b6b-250x132.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/06/toptal-blog-image-1513007406573-201f3896bd3ec49768d7127ad2f96b6b-700x369.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/06/toptal-blog-image-1513007406573-201f3896bd3ec49768d7127ad2f96b6b-768x405.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/06/toptal-blog-image-1513007406573-201f3896bd3ec49768d7127ad2f96b6b-1536x809.png 1536w, https://www.api.friday.ie/wp-content/uploads/2020/06/toptal-blog-image-1513007406573-201f3896bd3ec49768d7127ad2f96b6b-120x63.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/06/toptal-blog-image-1513007406573-201f3896bd3ec49768d7127ad2f96b6b-80x42.png 80w" sizes="(max-width: 1678px) 100vw, 1678px" /></p>
<h3 id="812f" class="ho hp ap bx bw hq hr hs ht hu hv hw hx hy hz ia ib">10. Usability Testing is not always necessary</h3>
<p id="3405" class="gv gw ap bx gx b gy ic ha hb id hd he ie hg hh if hj hk ig hm hn dx" data-selectable-paragraph="">If just one user research method is going to employed in a project it should be usability testing. It will probably reveal why you should have done more pre-design user research.</p>
<p id="4216" class="gv gw ap bx gx b gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn dx" data-selectable-paragraph="">Observational  is the most powerful user research method we have, watching users interact with your interface usually brings up all kinds of surprises and exposes any assumptions. It doesn’t have to always be carried out under lab conditions, it can be done casually over a cup of coffee with a few friends or colleagues that have not been exposed to the project. I wrote <a class="cm di il im in io" href="https://friday.ie/blog/time-spoke-importance-usability-testing/" rel="noopener nofollow noreferrer">another piece</a> about this a couple of years ago.</p>
<hr />
<p data-selectable-paragraph="">There are many other UX myths and more will be revealed as technology and UX practice evolves, I&#8217;ll come back and update this in a couple of year and see where are at with &#8216;the fold&#8217;!</p>
<figure class="fy fz ga gb gc gd dq dr paragraph-image">
<div class="ge gf gg gh ai">
<div class="dq dr ir">
<div class="gn r gg go">
<div class="is gq r">
<div class="gi gj s t u gk ai av gl gm"></div>
</div>
</div>
</div>
</div>
</figure>


10 UX Myths – Time to take out the trash!

<p>Surprisingly, this is my first post to mention toasters more than once, you’ll see why later. In my last post, I discussed <a href="https://friday.ie/blog/how-to-be-persuasive-the-6-principles-of-influence/">How to be Persuasive and The 6 Principles of Influence.</a> Being persuasive is one thing, but how do we actually change behaviour and influence someone to do something and take the action to convert?</p>
<p>The focus of UX design can often be centred around user research and the usability of an interface, how simple and intuitive it is to use. This ultimately increases the user&#8217;s ability to complete a task but just because a user has the ability to do something, doesn’t mean they’ll do it.</p>
<p>In 2009, B.J. Fogg, a social science research associate at Stanford University developed a very simple behaviour model that illustrates the three elements that need to be present at the same time in order to persuade someone to do something.<span class="Apple-converted-space"> </span></p>
<p>I’m going to get a little bit geeky here but bare with me, its very simple. <b>Behavioural</b> change requires a sufficient amount of <b>ability</b> and <b>motivation</b> along with a <b>prompt</b> in order to persuade someone to do something. It is only when all 3 elements of the model are present at the same time that the behaviour can happen.</p>
<h4><b>1. Motivation</b></h4>
<p>Motivation is what makes the user want to complete a task. This is the background story, what drives them to do something. This could be something as simple as a user who loves to eat toast needing a new toaster because their old one has broken.</p>
<h4><b>2. Ability<span class="Apple-converted-space"> </span></b></h4>
<p>In order for a user to perform a task they must have the required ability, the easier the task the higher the ability they’ll have. Ability can range from the user requiring time, money, mental or physical capacity to complete a task. In UX it can be the ability to fill in a form easily or when it comes to the toaster, does the user have enough money (ability) to buy the toaster?</p>
<h4><b>3. Prompt</b></h4>
<p>Without an appropriate prompt, the behaviour will not occur, even if high ability and motivation are present. A prompt or trigger can be something that reminds or reveals an opportunity for the user to carry out the desired behaviour at an appropriate time.</p>
<p>A prompt can also help with motivation. Let’s say a user is in the market for a new toaster but they don’t have enough money to buy one. Then, they see a social media ad for half price toasters, this is the prompt that motivates them to buy the toaster because the prompt reveals that they now have the financial ability to buy the toaster.<span class="Apple-converted-space"> </span></p>
<p>Fogg’s Behaviour Model can be used to quickly test the effectiveness of any desired behaviour by asking three simple questions:</p>
<ol>
<li>Is the user motivated enough to do what you want them to?</li>
<li>Does the user have the required ability to carry out the task?</li>
<li>Has the user been reminded to perform the desired behaviour at the right time?</li>
</ol>
<img loading="lazy" decoding="async" class="aligncenter wp-image-10700 size-large" src="https://www.api.friday.ie/wp-content/uploads/2020/02/graph-700x595.png" alt="" width="700" height="595" srcset="https://www.api.friday.ie/wp-content/uploads/2020/02/graph-700x595.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/02/graph-250x213.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/02/graph-768x653.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/02/graph-1536x1306.png 1536w, https://www.api.friday.ie/wp-content/uploads/2020/02/graph-120x102.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/02/graph-80x68.png 80w, https://www.api.friday.ie/wp-content/uploads/2020/02/graph.png 2014w" sizes="(max-width: 700px) 100vw, 700px" />
<p>Any call to action can be checked against this model to predict its effectiveness, be they toaster ads or otherwise. Remember, for a behaviour to happen, the three elements have to happen at the same time: motivation, ability, and trigger.<span class="Apple-converted-space"> </span></p>
<h2><b>B = MAP</b></h2>
<p>Graham recently gave a talk at the <a href="http://3xedigital.com">3XE Digital</a> UX Conference in Dublin around this very topic. He gave some good examples of Fogg&#8217;s behaviour model in practice.</p>
<h4>Prompt with low motivation</h4>
<p>In this example a user is prompted to signup for a newsletter, while the ability is high, motivation is low due to lack of any value being offered. Why would a user want to signup to this newsletter?</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-10702 size-gallery-panel" src="https://www.api.friday.ie/wp-content/uploads/2020/02/Graham-Carroll-3XE-Digital-CRO-UX.001-1260x620.jpeg" alt="" width="1260" height="620" />
<h4>Prompt with high motivation but low ability</h4>
<p>This example creates motivation by offering users a 20% discount on their next order if they signup for the newsletter, great! However, the ability is low as users are asked to enter their date of birth without a reason and it does not tell the user what format the date of birth should be in. Ability will be low because of this.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-10703 size-gallery-panel" src="https://www.api.friday.ie/wp-content/uploads/2020/02/Graham-Carroll-3XE-Digital-CRO-UX.002-1260x620.jpeg" alt="" width="1260" height="620" />
<p>The following error message doesn&#8217;t help either!</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-10704 size-gallery-panel" src="https://www.api.friday.ie/wp-content/uploads/2020/02/Graham-Carroll-3XE-Digital-CRO-UX.003-1260x620.jpeg" alt="" width="1260" height="620" />
<h4>Prompt with high motivation and high ability</h4>
<p>This is what a successful prompt looks like, motivation is high because of the value on offer in return for signing up and ability is high because the user simply has to enter their email address.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-10705 size-gallery-panel" src="https://www.api.friday.ie/wp-content/uploads/2020/02/Graham-Carroll-3XE-Digital-CRO-UX.004-1260x620.jpeg" alt="" width="1260" height="620" />
<p>This is all very simple and obvious stuff but you&#8217;d be surprised how many marketers overlook testing calls to action against this model.</p>
<p>The great man himself, BJ Fogg, explains the simple formula for the behaviour model in this 2 and half minute video if you’d like a quick recap:</p>
<div class="youtube-responsive-container"><iframe id="myFrame" src="https://www.youtube.com/embed/jsbF9z6adAo" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>


Persuasive design: How to make shit happen

<p id="185c" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">The art of effective persuasion in humans is a fairly rare quality. Those who possess it often have a natural balance of charisma, charm and authority. This generation has been brought up to question everything so effective persuasion is getting more and more challenging with time.</p>
<p id="d012" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">Fortunately innate powers of persuasion are not required for effective marketing or UX design, just a little bit of psychology. Persuasive design uses communication and design methods to influence human behaviour and increase motivation. When combined with good usability this can maximise potential conversions in a very powerful way.</p>
<p id="a78f" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">All the way back in 1984 when Tina Turner was asking us ‘What’s love got to do with it?’ and Freddy Kruger was freaking us all out in the first Nightmare on Elm Street movie, Dr Robert Cialdini wrote a booked called <em class="hd">Influence: The Psychology of Persuasion</em>. This is widely hailed as seminal book on conversion optimisation in marketing. In the book, Cialdini outlined the 6 Principles of Influence that are more relevant today than they were 36 years ago. Let’s run through them briefly.</p>
<p id="2ae2" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph=""><strong class="gr he">1. Liking</strong></p>
<p id="9d0c" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">Most of the time we like people who like us — we react positively to genuine praise, rapport and common ground. A good brand that is honest, respectful, seeks empathy and is well presented will form relationships with its customers and have more perceived credibility.</p>
<p id="45a9" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph=""><strong class="gr he">2. Scarcity</strong></p>
<p id="b804" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">We all understand FOMO or fear of missing out, this can be a powerful motivator. Research has found that loss language is far more effective than highlighting potential gains. This could be in the form of a time limited offer or limited product availability.</p>
<div id="attachment_10550" style="width: 786px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10550" class="wp-image-10550 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/01/1dFJz5tQ6JzDcKkXnUoCoTw.png" alt="" width="776" height="866" srcset="https://www.api.friday.ie/wp-content/uploads/2020/01/1dFJz5tQ6JzDcKkXnUoCoTw.png 776w, https://www.api.friday.ie/wp-content/uploads/2020/01/1dFJz5tQ6JzDcKkXnUoCoTw-250x279.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/01/1dFJz5tQ6JzDcKkXnUoCoTw-700x781.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/01/1dFJz5tQ6JzDcKkXnUoCoTw-768x857.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/01/1dFJz5tQ6JzDcKkXnUoCoTw-120x134.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/01/1dFJz5tQ6JzDcKkXnUoCoTw-72x80.png 72w" sizes="(max-width: 776px) 100vw, 776px" /><p id="caption-attachment-10550" class="wp-caption-text">Limited time online offer creating scarcity</p></div>
<figure class="fu fv fw fx fy fz cx cy paragraph-image">
<div class="ga gb de gc ak">
<div class="ga gb de gc ak">
<div class="cx cy hf">
<div class="gi r de gj">
<div class="hg r">
<div class="gd ge dg t u gf ak fa gg gh"></div>
</div>
</div>
</div>
</div>
</div><figcaption class="ax dl hh hi hj cz cx cy hk hl as dj" data-selectable-paragraph=""></figcaption><div class="ga gb de gc ak">
<div class="cx cy hf">
<div class="gi r de gj">
<div class="hg r"></div>
</div>
</div>
</div>
</figure>
<p id="9128" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph=""><strong class="gr he">3. Reciprocity</strong></p>
<p id="2765" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">This one is the simple principle of giving what you want to receive. There are many ways to have reciprocity work for you. Small acts of kindness will be remembered, be it treating others with respect, going the extra mile and doing a good deed can all win you points with other individuals.</p>
<p id="0873" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">As an organisation you could enhance the customer experience by giving customers a discount, gift, free shipping, being environmentally aware or not having limiting return policies.</p>
<div id="attachment_10549" style="width: 1420px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10549" class="wp-image-10549 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/01/1oA6fDZ_ovju3Sbs8tBY5bQ.png" alt="" width="1410" height="734" srcset="https://www.api.friday.ie/wp-content/uploads/2020/01/1oA6fDZ_ovju3Sbs8tBY5bQ.png 1410w, https://www.api.friday.ie/wp-content/uploads/2020/01/1oA6fDZ_ovju3Sbs8tBY5bQ-250x130.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/01/1oA6fDZ_ovju3Sbs8tBY5bQ-700x364.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/01/1oA6fDZ_ovju3Sbs8tBY5bQ-768x400.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/01/1oA6fDZ_ovju3Sbs8tBY5bQ-120x62.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/01/1oA6fDZ_ovju3Sbs8tBY5bQ-80x42.png 80w" sizes="(max-width: 1410px) 100vw, 1410px" /><p id="caption-attachment-10549" class="wp-caption-text">Reciprocity is demonstrated for those who are environmentally aware.</p></div>
<p id="652a" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph=""><strong class="gr he">4. Social Proof / Consensus</strong></p>
<p id="e0d5" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">We are usually open to things that have been tried and tested by those we trust — friends, family, media or the influencers that we respect. One of the most powerful persuasive techniques online comes in the form of social influence…because it works.</p>
<div id="attachment_10548" style="width: 1344px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10548" class="wp-image-10548 size-full" src="https://www.api.friday.ie/wp-content/uploads/2020/01/1HRp4-NNkXmcPOez0ze3Leg.png" alt="" width="1334" height="1174" srcset="https://www.api.friday.ie/wp-content/uploads/2020/01/1HRp4-NNkXmcPOez0ze3Leg.png 1334w, https://www.api.friday.ie/wp-content/uploads/2020/01/1HRp4-NNkXmcPOez0ze3Leg-250x220.png 250w, https://www.api.friday.ie/wp-content/uploads/2020/01/1HRp4-NNkXmcPOez0ze3Leg-700x616.png 700w, https://www.api.friday.ie/wp-content/uploads/2020/01/1HRp4-NNkXmcPOez0ze3Leg-768x676.png 768w, https://www.api.friday.ie/wp-content/uploads/2020/01/1HRp4-NNkXmcPOez0ze3Leg-120x106.png 120w, https://www.api.friday.ie/wp-content/uploads/2020/01/1HRp4-NNkXmcPOez0ze3Leg-80x70.png 80w" sizes="(max-width: 1334px) 100vw, 1334px" /><p id="caption-attachment-10548" class="wp-caption-text">Independent reviews provide social proof.</p></div>
<p id="2a0d" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph=""><strong class="gr he">5. Consistency</strong></p>
<p id="ee13" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">Customer loyalty is hugely important, if a customer has made a commitment to consistently do something with you there is a good chance they will stick to it as they will need to make a counter decision to stop doing it. Look at a service like Spotify, users signup and in a lot of cases unless they have a very good reason and make the effort they are unlikely to cancel the contract.</p>
<p id="2c02" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph=""><strong class="gr he">6. Authority</strong></p>
<p id="6864" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">When it comes to convincing someone about something it’s important to establish yourself as an expert or reference someone who is when making a statement. You can see this in a lot of online marketing with headlines that include phrases like “research shows”, “experts say”, or “scientifically proven”.</p>
<p id="d16a" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">After all, these 6 principles have been developed by Dr Robert Cialdini, the Regents’ Professor Emeritus of Psychology and Marketing at Arizona State University!</p>
<p id="88b5" class="gp gq bz at gr b gs gt gu gv gw gx gy gz ha hb hc" data-selectable-paragraph="">Let’s not forget about ethics, Cialdini is clear that these principles should come from a place of good, with influence being authentic, genuine, and leading others to making positive decisions, not only for themselves, but for everyone else. Use these principles the right way and reap the rewards.</p>


How to be Persuasive: The 6 Principles of Influence

<p>Our award-winning team here at Friday are proud to announce that we have won the much-coveted ‘Best Website’ Award at the annual Spider Awards. The award went to our work for the <a href="https://friday.ie/work/rkd-2/">RKD Architects</a> website that launched earlier this year.</p>
<p>This year marks the 24th anniversary of the prestigious Spider Awards. As the longest-running digital awards programme in Ireland, dedicated to recognising companies and individuals driving digital excellence in every aspect of their ethos.</p>
<p>RKD is one of Ireland’s largest and leading architectural firms. They employ design as a strategic tool, creating impeccably versatile spaces that work hard to meet the needs of the people who use them.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-10344 size-full" src="https://www.api.friday.ie/wp-content/uploads/2019/11/spidersFriday-e1574771593193.jpg" alt="" width="900" height="522" srcset="https://www.api.friday.ie/wp-content/uploads/2019/11/spidersFriday-e1574771593193.jpg 900w, https://www.api.friday.ie/wp-content/uploads/2019/11/spidersFriday-e1574771593193-250x145.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2019/11/spidersFriday-e1574771593193-768x445.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2019/11/spidersFriday-e1574771593193-700x406.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2019/11/spidersFriday-e1574771593193-120x70.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2019/11/spidersFriday-e1574771593193-80x46.jpg 80w" sizes="(max-width: 900px) 100vw, 900px" />
<p>Our website brief was to represent the new RKD brand digitally by bringing the user into a new experience of simplicity through visual communication. Our aim was to tell RKD’s story by showing the incredible work that they do and the talented people who do it.</p>
<p>There is no need to choose between creating an informative or aesthetically pleasing design—both can be achieved simultaneously. Key to this is keeping rich content concise as well as visual.<span class="Apple-converted-space"> </span></p>
<blockquote><p>“Friday’s research-driven approach and their ability to creatively and constructively challenge helped us to identify assumptions early on and to maintain our focus on the user experience.”</p>
<p><strong><em>Barra Heavey, Director of Marketing, RKD Architects.</em></strong></p></blockquote>


Friday wins much coveted Best Website Award at the Spiders

<p>After working in UX design for many years (do I sound old?), you start to see patterns emerge. Mistakes, misconceptions, assumptions and bad processes employed by design professionals, project managers, developers and clients alike. So if I was to give some tips to someone starting out building a new website I would base these tips around the common mistakes I see being made. This list is not exclusive or ranked in terms of importance but it’s a good basis for starting a new web project.</p>
<p>&nbsp;</p>
<h4 style="padding-left: 40px;">1. Research is Key</h4>
<p style="padding-left: 40px;">Until you intimately know your users and their goals, motivations, situations and frustrations, you won’t be able to deliver a great and effective user experience. Ultimately, user research is the difference between designing based on guesswork and assumptions, and creating something that solves an actual real user problem. Without research, there is no UX design.</p>
<h4 style="padding-left: 40px;">2. Challenge Assumptions</h4>
<p style="padding-left: 40px;">You know your customers but don’t fall into the trap of making design decisions based on your own assumptions that have not been challenged or validated, this brings us back to research being key. You are not your user. Spend a little research time early on in the project rather than risk releasing something that may not meet your users needs. Fixing a problem in development costs 10 times as much as fixing it in design, and 100 times as much if you’re trying to fix the problem in a product that’s already been released.</p>
<h4 style="padding-left: 40px;">3. Understand the Difference Between UX and UI Design</h4>
<p style="padding-left: 40px;">UX is how it feels to use your website, UX design is to create the experience. UI design is to design how it looks &#8211; colours, shapes, photography. They are closely linked but UI design is part of the UX design process. <a href="https://friday.ie/blog/whats-the-difference-between-ux-user-experience-and-ui-user-interface-design/">More about this here.</a></p>
<h4 style="padding-left: 40px;">4. Create your Content First<b><br />
</b></h4>
<p style="padding-left: 40px;">Form follows function. Your content will shape the design and functionality of your website, don’t start design until you have your content ready.</p>
<h4 style="padding-left: 40px;">5. Focus on the first 80% of users<b><br />
</b></h4>
<p style="padding-left: 40px;">If you aim to create a product that fits the needs of everyone who uses it you will more than likely fail, first you need to focus on the common needs of the first 80% of your users, everyone after that is an edge case and trying to fulfil the needs of edge cases will often have a negative effect on the experience of the first 80%. We call it feature bloat, historically Microsoft Word is a good example of software that has lacked simplicity because it was trying to be all things to all users.  This is not to say we ignore the edge cases, we just need to get things right for the majority of users first.</p>
<h4 style="padding-left: 40px;">6. Put Mobile First</h4>
<p style="padding-left: 40px;">Too often business owners spend all their time judging websites on a big screen when the majority of their users will be using a smartphone. We always design for mobile-first.</p>
<h4 style="padding-left: 40px;">7. Optimise Readability</h4>
<p style="padding-left: 40px;">Less is more &#8211; keep content concise, use headings and sub-headings so users can quickly scan your website for the content that is relevant to them. All content and functionality needs to add value and have a clear purpose. Users are time poor with low attention spans so cut down the waffle and get to the point quickly. The days of welcome messages, mission statements and long introductions are long gone. Concise well-structured content makes for a much more efficient, effective and enjoyable user experience.</p>
<h4 style="padding-left: 40px;">8. Avoid Relying on a Mobile Burger Navigation</h4>
<p style="padding-left: 40px;">Discoverability is cut by 50% when a websites key navigation elements are hidden behind a burger navigation. Burger menus can be hard to avoid but key calls to action should be front and centre on your mobile website and not just behind a burger menu. <a href="https://friday.ie/blog/not-such-a-tasty-burger%E2%80%8A-%E2%80%8Athe-case-against-hidden-menus-in-web-design/">Mary has lots more to say on this here.</a></p>
<h4 style="padding-left: 40px;">9. Focus on Performance</h4>
<p style="padding-left: 40px;">You may not link the two but website performance is user experience. Think of the last time a website you visited was too slow to load, you may have closed the tab after a few seconds and moved on. This is where good developers come in, they may not make the best UX designers but a good developer will build a website that is optimised to run fast and ensures the server it&#8217;s hosted on is managed to be fast and secure. Your users will thank you and Google will also thank you by taking performance into account when they are ranking your website.</p>
<h4 style="padding-left: 40px;">10. Give Users Feedback</h4>
<p style="padding-left: 40px;">Users need to know that your site works, when a user does something like click a button, add a product to the cart or submit a form you need to tell them it worked. Give the user feedback via subtle animations, colour changes and simple text notifications to tell them it worked. Micro-interactions communicate to the user that everything is ok.</p>
<h4 style="padding-left: 40px;">11. Create Calls to Action That Set Expectations</h4>
<p style="padding-left: 40px;">A button with the title ‘Click Here’ tells a user nothing about what happens when they click the button. Try and set expectations with button labels like ‘Add to Cart’, ‘Book now’ or ‘Register today’.</p>
<h4 style="padding-left: 40px;">12. Test, Test and Test again<b><br />
</b></h4>
<p style="padding-left: 40px;">After research, <a href="https://friday.ie/blog/time-spoke-importance-usability-testing/">testing is the most important aspect of the UX lifecycle</a>. Test, iterate and test everything again from your ideas, prototypes, designs, betas to your live product &#8211; the cycle never ends but the road leads to success.</p>
<p>UX design is all about having an open mind, listening to your users and avoiding assumptions in order to gain real user empathy. If we understand exactly how our users feel then we are well placed to come up with a design solution that meets their needs and therefore is a success.</p>


12 UX Design Tips to Help you Build a Better Website

SEO & UX: The Perfect Partners

<p class="graf graf--p">I’m Dave, the UX director at the Friday Agency. Sitting beside me is Gavin and Martin, good guys and both very experienced digital marketing professionals. Naturally, we work very closely together and like to have the occasional laugh at the expense of each other! They provide me with a wealth of statistical information around user behaviour. I like to think I provide them with more attitudinal research-based user insights. This brings up all kinds of great discussions around usability. While we interpret data differently from our own perspectives, we all have the same goal in mind — to gain user empathy through research and not assumptions.</p>
<h4 class="graf graf--h4">Office banter</h4>
<p class="graf graf--p">A good discussion started last week about the use of title case vs sentence case in both digital marketing and UX design. Before I go into how I think the lads are wrong let me explain a couple of things.</p>
<p class="graf graf--p">Title case means that the first letter of each word is capitalised, except for certain small words such as articles and short prepositions. With sentence case, only the first word and proper nouns have initial capitals, the Queens English so to speak!</p>
<p style="padding-left: 40px;"><strong class="markup--strong markup--blockquote-strong">Title case: </strong></p>
<p style="padding-left: 40px;">Gavin and Martin Think They are Right, Dave has Other Ideas.</p>
<p style="padding-left: 40px;"><strong class="markup--strong markup--blockquote-strong">Sentence case: </strong></p>
<p style="padding-left: 40px;">Gavin and Martin think they are right, Dave has other ideas.</p>
<p class="graf graf--p">Spending a lot of time working in Google Ads, Gavin and Martin need to write attention-grabbing headlines in 30 characters or less. Research has found that using title case for Google Ads is more effective for getting users attention, fair enough. The issue I have is that the lads seem to apply the same logic to almost all titles, subtitles, headings and sub-headings, lists and bullet points. This willy nilly approach upsets me, its all over the place — no rules, no control — it&#8217;s literary anarchy!</p>
<p class="graf graf--p">There is no doubt that title case works well online for headings, it gives a visual hierarchy to different text elements and helps guide the reader. You don’t want users starting with a sub-heading. My feeling is that title case works when there is less than 10–12 words, after that it just gets messy and hard to read. To my horror Gavin suggested that sub-titles should also be in title case, this is where I draw the line. There is no way the sub-text legibility in the Google Ad below benefits from being in title case… no way, sorry Gav!</p>
<p>&nbsp;</p>
<img loading="lazy" decoding="async" width="750" height="143" class="aligncenter size-full wp-image-9342" src="https://www.api.friday.ie/wp-content/uploads/2019/06/1gKbN40Wahe3K0qkQJo0ZmA.png" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2019/06/1gKbN40Wahe3K0qkQJo0ZmA.png 750w, https://www.api.friday.ie/wp-content/uploads/2019/06/1gKbN40Wahe3K0qkQJo0ZmA-250x48.png 250w, https://www.api.friday.ie/wp-content/uploads/2019/06/1gKbN40Wahe3K0qkQJo0ZmA-700x133.png 700w, https://www.api.friday.ie/wp-content/uploads/2019/06/1gKbN40Wahe3K0qkQJo0ZmA-120x23.png 120w, https://www.api.friday.ie/wp-content/uploads/2019/06/1gKbN40Wahe3K0qkQJo0ZmA-80x15.png 80w" sizes="(max-width: 750px) 100vw, 750px" />
<figure class="graf graf--figure"></figure>
<h4 class="graf graf--h4">A/B testing</h4>
<p class="graf graf--p">So, being the research nerds that we are, we decided to do some A/B testing around this. We created 2 almost identical Google Ads for our UX services. The only difference was that the sub-title was title case in one and sentence case in the other. We wanted to see which ad had the highest click-thru rate.</p>
<div id="attachment_9340" style="width: 610px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-9340" class="wp-image-9340 size-full" src="https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA.png" alt="" width="600" height="78" srcset="https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA.png 600w, https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA-250x33.png 250w, https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA-120x16.png 120w, https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA-80x10.png 80w" sizes="(max-width: 600px) 100vw, 600px" /><p id="caption-attachment-9340" class="wp-caption-text">Sub-title in title case</p></div>
<p>&nbsp;</p>
<div id="attachment_9340" style="width: 610px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-9340" class="wp-image-9340 size-full" src="https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA.png" alt="" width="600" height="78" srcset="https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA.png 600w, https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA-250x33.png 250w, https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA-120x16.png 120w, https://www.api.friday.ie/wp-content/uploads/2019/06/1jYvY4FzLSVSihw5qZN0MtA-80x10.png 80w" sizes="(max-width: 600px) 100vw, 600px" /><p id="caption-attachment-9340" class="wp-caption-text">Sub-title in sentence case</p></div>
<figure class="graf graf--figure"><figcaption class="imageCaption"></figcaption></figure>
<figure class="graf graf--figure"><figcaption class="imageCaption"></figcaption></figure>
<p class="graf graf--p">To our surprise, there was only a 0.5% difference in performance between the two ads in favour of title case, marginal and inconclusive for most but huge for the likes of Amazon. This may hint that title case will grab slightly more attention but doesn’t offer us any insights into legibility. To be fair to Gav and Martin, we do it not because everyone else does — but because it gets higher click-through-rates and therefore more revenue for our clients!</p>
<p class="graf graf--p">This got me thinking about what the ‘rules’ are around this for marketing or UX. I did a bit of reading on the subject and it seems there are no rules. It’s highly subjective. There is a general consensus that titles do get more attention in title case but the jury is out on whether longer titles or sub-titles in title case are easier to read. Studies have found the difference in reading efficiency between title and sentence case is actually quite minimal. My views might be based on aesthetics, it looks choppy and for me it is harder to read but you may not agree.</p>
<h4 class="graf graf--h4">Laying down the law</h4>
<p class="graf graf--p">The hypothesis that I offer is that title case has a high level of prominence but the legibility suffers as a result, you’d never read a full book in title case, would you? The use case depends on what you want to achieve, do you want attention or have easy to read text.</p>
<p class="graf graf--p">I found a great example below. These are different notification popups on iOS and Android screens. As you can see on the left Apple have a policy of title case on titles while Google uses sentence case throughout. While they are different messages, you can’t tell me the iOS message is easier to read, can you?</p>
<figure class="graf graf--figure"></figure>
<img loading="lazy" decoding="async" width="735" height="604" class="aligncenter size-full wp-image-9339" src="https://www.api.friday.ie/wp-content/uploads/2019/06/1JK5LEHfHgufxivS9AMmD0w.png" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2019/06/1JK5LEHfHgufxivS9AMmD0w.png 735w, https://www.api.friday.ie/wp-content/uploads/2019/06/1JK5LEHfHgufxivS9AMmD0w-250x205.png 250w, https://www.api.friday.ie/wp-content/uploads/2019/06/1JK5LEHfHgufxivS9AMmD0w-700x575.png 700w, https://www.api.friday.ie/wp-content/uploads/2019/06/1JK5LEHfHgufxivS9AMmD0w-120x99.png 120w, https://www.api.friday.ie/wp-content/uploads/2019/06/1JK5LEHfHgufxivS9AMmD0w-80x66.png 80w" sizes="(max-width: 735px) 100vw, 735px" />
<p class="graf graf--p">While there are plenty of well-established rules for how to use title case, there are few rules about when to use it. Everything seems to be subjective and based on assumption. It’s the wild west out there! Somebody needs to take charge and make decisions.</p>
<p class="graf graf--p">I am going to do what no UX designer should ever do, I’m going to make the rules based on my own opinions and assumptions. From this day forward I will be known as the self-appointed Sheriff of sentence capitalisation.</p>
<h4 class="graf graf--h4">Sheriff Dave’s 4 Golden Rules for Sentence Capitalisation</h4>
<ol class="postList">
<li class="graf graf--li">Only use in main titles</li>
<li class="graf graf--li">Only use in titles shorter than 12 words</li>
<li class="graf graf--li">Never use in sub-titles, lists, bullets or anything that is not a main title (see point 1)</li>
<li class="graf graf--li">Digital marketers may not be the best guide on the appropriate use of title case</li>
</ol>
<p class="graf graf--p">Take it or leave it.</p>
<p class="graf graf--p">What do you think? Am I the Sheriff or are Gavin and Martin entitled to put a bounty on my head?</p>
<img loading="lazy" decoding="async" width="400" height="308" class="aligncenter size-full wp-image-9347" src="https://www.api.friday.ie/wp-content/uploads/2019/06/giphy.gif" alt="" />


Making the Case for Using Title Case or sentence case in UX Design and Digital Marketing

<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 loading="lazy" decoding="async" class="aligncenter wp-image-9067 size-large" src="https://www.api.friday.ie/wp-content/uploads/2019/03/Paper-prototype-700x442.jpg" alt="prototyping" width="700" height="442" srcset="https://www.api.friday.ie/wp-content/uploads/2019/03/Paper-prototype-700x442.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2019/03/Paper-prototype-250x158.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2019/03/Paper-prototype-768x485.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2019/03/Paper-prototype-120x76.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2019/03/Paper-prototype-80x50.jpg 80w, https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-9179 size-large" src="https://www.api.friday.ie/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-700x390.gif" alt="" width="700" height="390" srcset="https://www.api.friday.ie/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-700x390.gif 700w, https://www.api.friday.ie/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-250x139.gif 250w, https://www.api.friday.ie/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-768x428.gif 768w, https://www.api.friday.ie/wp-content/uploads/2019/04/Screen-Recording-2018-08-23-at-08.47-AM-120x67.gif 120w, https://www.api.friday.ie/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><em><strong>It&#8217;s Time to Step Away &amp; Put Your Users at the Centre of Your Content Strategy</strong></em></p>
<p>For many businesses, creating content can be an arduous task. Usually this is because in-house resources are rather tight when it comes to creating content on a regular basis. Or sometimes, the skillset simply isn’t there. However, another barrier I come up against, or more slows the process down in the beginning, is the lack of understanding in the value of creating content. When I say “value” I do mean revenue!</p>
<p>For an Ecommerce business, for example, the primary goal is transactions and revenue generated. It’s totally understandable. You’re in business to make money!</p>
<p>Where’s the value in creating content? Oh yeah, for SEO. I did that in the beginning, but it took up too much time and I didn’t see the return I wanted.</p>
<p>If you have been creating content (or none at all in many cases), with the sole purpose of your business revenue goals in mind, rather than the user, you could be in for a bumpy ride down the rankings.</p>
<p>Graham said it perfectly in his blog “<a href="https://friday.ie/blog/building-trust-into-the-customer-experience/"><em>your customer’s goals should be your goals</em></a>.”</p>
<div style="width: 100%; height: 0; padding-bottom: 75%; position: relative;"><iframe loading="lazy" class="giphy-embed" style="position: absolute;" src="https://giphy.com/embed/xUNd9GIay1fKQTSWIM" width="100%" height="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<p><a href="https://giphy.com/gifs/soultrain-soul-train-don-cornelius-xUNd9GIay1fKQTSWIM">via GIPHY</a></p>
<h2><b>Google’s Algorithm Update (March 2019)</b></h2>
<p><span style="font-weight: 400;">On March 12th Google confirmed that it had made an <a href="https://searchengineland.com/googles-march-2019-core-quality-update-stories-of-recovery-314347">update to its core algorithm</a>. Targeting predominantly those that fall under the Your Money Your Life (YMYL) category, essentially websites that fall under the health segment. As a result a lot of websites saw their traffic deteriorate dramatically. Phew! I hear you say. But wait there’s more.</span></p>
<p><span style="font-weight: 400;">The algorithm update seemed to favour and reward websites that had content optimised to Google&#8217;s E-A-T standards. These standards put an emphasis on the overall Expertise,</span> Authority and Trustworthiness of a site. The higher Google scores you in these areas, the greater the reward.</p>
<p><span style="font-weight: 400;">Although many of the websites initially affected were health centric, there were a large number of other sites across a variety of industries affected by the update. I think it’s important to read between the lines here. Google’s goal, from a user point of view, is to return the most relevant search results to a user’s query. It’s that simple. With artificial intelligence becoming more advanced and user’s expectations of search evolving, your content has to go beyond trying to rank just for those high volume, high value keywords.</span></p>
<h2><b>Content Experiences</b></h2>
<p><span style="font-weight: 400;">Content marketing, it’s about simply creating &amp; distributing, right? Unfortunately not. It’s about creating an experience. A </span><a href="https://hub.uberflip.com/blog/what-is-content-experience-definition"><span style="font-weight: 400;">content experience can be defined as</span></a><span style="font-weight: 400;">, the environment in which it lives, and how it engages users to take action on your site. </span></p>
<p><span style="font-weight: 400;">In layman&#8217;s terms, it is the experience you get, both good and bad, when you interact with a piece of content.</span></p>
<h3><b>What’s A Content Environment?</b></h3>
<p><span style="font-weight: 400;">The environment in which it lives. Essentially the aesthetics of the content. It relates to the overall presentation of the content. Is it structured in a digestible and easy to navigate format? Is it in line with the brand? It’s all about creating attractive content that users want to consume and engage with and ultimately give them a positive user experience. It is about integrating relevant copy, image and video with good quality UX.</span></p>
<h3><b>Engaging Users</b></h3>
<p><span style="font-weight: 400;">You want your content to serve a purpose, for both you and the user. It is important to create content that is as relevant as can be to the user’s query. Once you’ve given them a positive user experience, the next step is for them to engage with you (all going well). </span></p>
<p><span style="font-weight: 400;">The more personal the experience the better. User’s want to feel as if the messaging has been tailored to them. If you want to bring your user on a content journey, or simply want to generate leads, then make sure your CTA’s are relevant and natural. Think about what is relevant, and better yet, what fits contextually.</span></p>
<h2><b>Creating A Content Experience</b></h2>
<p><span style="font-weight: 400;">Creating incredible content isn’t about finding high volume keywords and churning out a long-form blog once a month. To create an experience, you need to begin by diving deep into that particular topic and consider all the possible needs your potential customers may have related to that topic.</span></p>
<p><span style="font-weight: 400;">Remember, you don’t have one type of customer. Your content has to satisfy a wide range of user needs. These needs can be transactional, but also informational.</span></p>
<p>For me, a content experience doesn&#8217;t have to begin when a user visits your site. It can now begin on the search engine results pages. With SERP features like Featured Snippets, it gives businesses an opportunity to entice and engage users before they even click. As users enter the top of the funnel and begin their research, you can seize the opportunity to be top of mind.</p>
<p><span style="font-weight: 400;">Consider an online retailer selling laptops. Now consider all the different types of information a user might search for around the keyword “laptops”.</span></p>
<p><span style="font-weight: 400;">They may be interested in;</span></p>
<ul>
<li style="font-weight: 400;"><strong>Brands</strong></li>
<li style="font-weight: 400;"><strong>Software</strong></li>
<li><strong>Comparisons</strong></li>
<li style="font-weight: 400;"><strong>Reviews</strong></li>
<li style="font-weight: 400;"><strong>Storage</strong></li>
<li style="font-weight: 400;"><strong>Speed</strong></li>
<li style="font-weight: 400;"><strong>Use cases &#8211; for designers, college students</strong></li>
</ul>
<p><span style="font-weight: 400;">User research is a crucial part of developing a content strategy. There are numerous data sources you can use to help research what type of content to create. It’s about thinking outside the box. </span></p>
<ul>
<li><strong>Focus Groups</strong></li>
<li><strong>Customer Personas</strong></li>
<li><strong>Your Employees</strong></li>
<li><strong>Keyword Research</strong></li>
<li><strong>Forums</strong></li>
</ul>
<h3><b>Focus Groups</b></h3>
<p><span style="font-weight: 400;">If you can, start with a research focus group. This is particularly beneficial in highly competitive, niche markets where there might not be many product or service variations. Getting your customers in front of you can reveal a lot about their needs.</span></p>
<p><span style="font-weight: 400;">At Friday, one of the first steps we take in the beginning of any project is carrying out user research. Whether it’s driving a UX project, a new web build or a content strategy, research helps create that roadmap. </span></p>
<p><a href="https://friday.ie/blog/importance-of-ux-research/"><span style="font-weight: 400;">Don’t base your decisions on assumptions</span></a><span style="font-weight: 400;">, it’s far more beneficial to just ask.</span></p>
<h3><b>Customer Personas</b></h3>
<p><span style="font-weight: 400;">If you can’t access a focus group, then try and get into the minds of your customer personas. What way do they think? What needs do each of them have? It’s not just about providing a product or service that they need. They may have had a particular thought process justifying why they need it. They may have gone through a series of events which led them to come looking for your product. Whatever the needs, each user has their own unique situation.</span></p>
<h3><b>Employees</b></h3>
<p><span style="font-weight: 400;">Talk to the people that deal with your customers on a daily basis. They will have a wealth of insights into what your customers needs are. </span></p>
<h3>Keyword Research</h3>
<p><span style="font-weight: 400;">This should all be supported with in-depth keyword research. In particular, more long-tail keywords and queries. As long as it makes contextual sense. Start with your core keywords and work out. </span></p>
<p><span style="font-weight: 400;">Gathering, grouping and categorising all of this data can then help mapping out your content pillars and calendar. The real work begins when it comes to creating and publishing.</span></p>
<h3>Forums</h3>
<p>Get on to forums relevant to your industry. See what everyone is talking about. They can be a goldmine of information. If you can&#8217;t get in front of your customer&#8217;s this is the next best thing.</p>
<h2><b>Expertise + Brand = Trust (A Winning Formula)</b></h2>
<p><span style="font-weight: 400;">When you gain trust, you build valuable, long-lasting relationships. </span></p>
<p><span style="font-weight: 400;">Creating content that covers the length and breadth of a particular topic showcases your knowledge, experience and expertise. When your content is in-depth and consistently provides users with exactly what they want, it will positively effects for your brand</span></p>
<p><span style="font-weight: 400;">When you build your brand and establish yourself as the expert, you’re not only gaining the trust of the user, but you’re also gaining the trust of Google. </span></p>
<p><span style="font-weight: 400;">From an SEO perspective, even if you’re not appearing in first position, if your brand is strong enough, and recognised as an authority in a particular field, users are more likely to click on your search result. Why click on a result from a brand you know nothing about, when you know you’ll get exactly what you want from the link in position 3?</span></p>
<h2><b>User Intent</b></h2>
<p><span style="font-weight: 400;">Does your page solve the user’s problem? Does it meet, and hopefully, go beyond their expectations? When you’re content matches the intent of the user, you’re providing them with positive user experiences. </span></p>
<p><span style="font-weight: 400;">We don’t just love positive user experiences, Google loves them too. Positive user experiences translate to positive user signals. It’s these <a href="https://www.searchmetrics.com/glossary/user-signals/">user signals</a> that can benefit your organic visibility. Examples of these signals are; </span></p>
<ul>
<li><strong>Click Through Rates</strong></li>
<li style="font-weight: 400;"><strong>Length of Time on Site</strong></li>
<li style="font-weight: 400;"><strong>Lower Bounce Rates</strong></li>
<li style="font-weight: 400;"><strong>Number of Pages Visited</strong></li>
</ul>
<p><span style="font-weight: 400;">Of course, these metrics are case dependent. Sometimes a user gets what they need and leaves. There’s no need for any further action. For example, looking for the contact number of a business.</span></p>
<h2><b>So What Next?</b></h2>
<p><span style="font-weight: 400;">Making the shift to creating high quality, user-centric content will pay dividends in the long-run. We’re living in a digital world saturated with advertisements and what sometimes feels like too many options.</span></p>
<p>Why would you want lots of options, when there could be one choice that solves everything?</p>
<p><span style="font-weight: 400;">If you want to avoid slugging it out in the trenches with growing numbers of competitors and rise to the top, then you need to put your efforts into positively strengthening your brand. You need to gain the trust of your target audience. Once you have that, a lot of the work is done for you in terms of consumers deciding whether to choose you or your competitors.</span></p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-9153 size-full" src="https://www.api.friday.ie/wp-content/uploads/2019/04/the-cream-always-rises-to-the-top.jpg" alt="the-cream-always-rises-to-the-top" width="642" height="361" srcset="https://www.api.friday.ie/wp-content/uploads/2019/04/the-cream-always-rises-to-the-top.jpg 642w, https://www.api.friday.ie/wp-content/uploads/2019/04/the-cream-always-rises-to-the-top-250x141.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2019/04/the-cream-always-rises-to-the-top-120x67.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2019/04/the-cream-always-rises-to-the-top-80x45.jpg 80w" sizes="(max-width: 642px) 100vw, 642px" />
<p><span style="font-weight: 400;">How do you get there? Start by giving your users exactly what they want, and then give them more. There’s potential customers out there, that you didn’t even know you had. Give them positive, unforgettable experiences and become ‘the’ expert in what you do.</span></p>
<p><strong>If you&#8217;re curious about creating a user-centric content strategy or would like to know more, then feel free to <a href="https://friday.ie/contact/">get in touch with the team at Friday</a>. </strong></p>


It’s Time To Start Creating User-Centric Content

<p class="graf graf--p">We’re keenly aware of how important mobile layout is when focussing on the key content and end goal users want to experience. To help with this we have gradually adopted the <a class="markup--anchor markup--p-anchor" href="https://friday.ie/blog/mobile-first-thinking/" target="_blank" rel="noopener noreferrer" data-href="https://www.api.friday.ie/blog/mobile-first-thinking/">mobile-first strategy</a> in our approach to wire-framing and UI design, and, in particular, mobile navigation.</p>
<p class="graf graf--p"><a href="https://dribbble.com/shots/2454262-Ham-Burger-Menu-Experiment" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" class="aligncenter wp-image-8875 size-full" src="https://www.api.friday.ie/wp-content/uploads/2019/02/menu-bar.gif" alt="Burger Menus" width="800" height="600" /></a></p>
<p class="graf graf--p">For the past few years, it feels like the accepted solution to handling the main website navigation on mobile has been to hide it with what’s called a “burger menu” typically 3 lines or three dots that indicate a hidden menu. We create a nice burger icon, a slick animation to reveal the full menu… lovely stuff! It looks clean and tidy, and all of the “messy” stuff is hidden away in a drawer.</p>
<blockquote><p>&#8220;a combo navigation is 1.5 times more likely to be interacted with than a fully hidden menu&#8221;</p></blockquote>
<p class="graf graf--p">However, as we’ve been focussing more and more on <a class="markup--anchor markup--p-anchor" href="https://www.api.friday.ie/expertise/user-experience/ux-design-dublin/" target="_blank" rel="noopener noreferrer" data-href="https://www.api.friday.ie/expertise/user-experience/ux-design-dublin/">UX principles</a> here in the studio, and the science behind users actions, we’ve zeroed in somewhat on the specifics of a mobile navigation, and the best way to handle it from a <em class="markup--em markup--p-em">user experience</em> perspective rather than an <em class="markup--em markup--p-em">aesthetic</em> perspective.</p>
<h2 class="graf graf--h3">Out of Sight, Out of Mind.</h2>
<p class="graf graf--p">Studies show that hidden navigations are far less discoverable than visible ones. Sounds obvious, but it is critical.</p>
<p class="graf graf--p">On a mobile view, unless your main site navigation is very concise (2/3 links), it’s unlikely that you’ll be able to have a fully visible navigation. The usual design pattern here would be a combination of visible and hidden, i.e. showing your key navigation items at all times, hiding secondary navigation items under a “more” menu.</p>
<p class="graf graf--p">Statistics show that a combo navigation is <a href="https://www.nngroup.com/articles/hamburger-menus/">1.5 times more likely to be interacted with</a> than a fully hidden menu.</p>
<p>&nbsp;</p>
<img loading="lazy" decoding="async" width="500" height="495" class="aligncenter size-full wp-image-8876" src="https://www.api.friday.ie/wp-content/uploads/2019/02/charts.gif" alt="" />
<p class="graf graf--p"><a href="https://www.nngroup.com/articles/hamburger-menus/">Source</a>.</p>
<p class="graf graf--p">We wouldn’t recommend a hidden/burger navigation on desktop screens (you should have enough screen real estate to accommodate a visible menu here), but stats show that hidden menus are half as likely to be interacted with on Desktop than visible navigations.</p>
<h3 class="graf graf--h3 graf--empty"></h3>
<h2 class="graf graf--h3">In Practice.</h2>
<p class="graf graf--p">Taking these statistics and the best way to address them will depend on your use case. While it’s unavoidable that hiding the navigation will have detrimental effects on its usability, perhaps the design already accounts for this, and CTA’s for the main areas of your site are clearly visible within page content.</p>
<p class="graf graf--p">In fact, if your user <em class="markup--em markup--p-em">needs</em> to access the menu in order to access a key area of your site, then that’s a problem in itself. Your website content should allow for multiple entry points into key areas of your site.</p>
<p class="graf graf--p">Take an e-commerce site as an example. The end goal here would be to guide the user through a purchase seamlessly. To that end, the homepage should have products displayed, and/or a clear CTA to the shop, outside of the navigation entirely.</p>
<p class="graf graf--p">So once you’ve made sure that your main site sections are accessible by other means, it’s time to look at the menu. As it’s unlikely you’ll fit everything in, how do you choose what to show and what to hide?</p>
<p class="graf graf--p">If your website isn’t task orientated (i.e. e-commerce/register etc.), your site&#8217;s analytics would be a great place to start. What pages get the most traffic? The most conversions? Let the users tell you what areas they want access to quickly and fuss-free.</p>
<img loading="lazy" decoding="async" width="338" height="589" class="aligncenter size-full wp-image-8877" src="https://www.api.friday.ie/wp-content/uploads/2019/02/friday_menu.gif" alt="" />
<p class="graf graf--p">On this site, for example, we identified that our <a class="markup--anchor markup--p-anchor" href="https://friday.ie/work/" target="_blank" rel="noopener noreferrer" data-href="https://www.api.friday.ie/work/">Work</a> and <a class="markup--anchor markup--p-anchor" href="https://friday.ie/contact/" target="_blank" rel="noopener noreferrer" data-href="https://www.api.friday.ie/contact/">Contact</a> pages were the most visited, and where most time was spent. So we’ve included those in our visible navigation. It was also felt that <a class="markup--anchor markup--p-anchor" href="https://friday.ie/expertise/" target="_blank" rel="noopener noreferrer" data-href="https://www.api.friday.ie/expertise/">Expertise</a> was a key site section that we wanted users to be able to access without fuss, so Expertise was added to the visible navigation also.</p>
<p class="graf graf--p">This combo navigation appears on 320px screens and below, so small / older handsets (<a class="markup--anchor markup--p-anchor" href="http://gs.statcounter.com/screen-resolution-stats/mobile/worldwide" target="_blank" rel="noopener noreferrer" data-href="http://gs.statcounter.com/screen-resolution-stats/mobile/worldwide">less than 10%</a> of today’s mobile users). As our Main navigation contains 5 links, we chose to make all links visible where space allowed on larger handsets.</p>
<img loading="lazy" decoding="async" width="373" height="649" class="aligncenter size-full wp-image-8878" src="https://www.api.friday.ie/wp-content/uploads/2019/02/visible_menu.png" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2019/02/visible_menu.png 373w, https://www.api.friday.ie/wp-content/uploads/2019/02/visible_menu-250x435.png 250w, https://www.api.friday.ie/wp-content/uploads/2019/02/visible_menu-120x209.png 120w, https://www.api.friday.ie/wp-content/uploads/2019/02/visible_menu-46x80.png 46w" sizes="(max-width: 373px) 100vw, 373px" />
<p class="graf graf--p">We’ve noticed positive results since changing from a fully hidden mobile navigation to a combo nav. Comparison year on year, within a 3 month period, we have recorded a 10.4% increase in users visiting the <a class="markup--anchor markup--p-anchor" href="https://friday.ie/expertise/" target="_blank" rel="noopener noreferrer" data-href="https://www.api.friday.ie/expertise/">Expertise page </a>from our homepage since we switched to using a visible mobile navigation.</p>
<p class="graf graf--p"><strong>If you feel your mobile navigation isn’t performing as well as it could, let us perform a <a class="markup--anchor markup--p-anchor" href="https://friday.ie/expertise/user-experience/" target="_blank" rel="noopener noreferrer" data-href="https://www.api.friday.ie/expertise/user-experience/">usability audit</a> and guide you on how to improve it. Get in touch <a class="markup--anchor markup--p-anchor" href="https://friday.ie/contact/" target="_blank" rel="noopener noreferrer" data-href="https://www.api.friday.ie/contact">here</a>.</strong></p>


Not Such a Tasty Burger - The case against hidden menus in UX Design.

<p><em>Trust is critical to creating a positive user or customer experience, particularly on digital channels. But it takes trust to create trust — and that’s not always easy…</em></p>
<p class="graf graf--p">The level of trust we hold in society, in general, is always changing. There’s been a collapse of trust in many places — governments, the media, fake news, advertising, Brexit, etc.</p>
<p class="graf graf--p">Edelman has just published their 2019 <a href="https://www.edelman.com/trust/trust-barometer">Trust Barometer</a>, and it reveals some pretty interesting data in that people’s trust has shifted most notably towards their employers.</p>
<p class="graf graf--p">Here’s a stat for you to chew on from the report:</p>
<blockquote class="graf graf--pullquote graf--startsWithDoubleQuote"><p><strong class="markup--strong markup--pullquote-strong"><em class="markup--em markup--pullquote-em">“Globally, 75% of people trust “my employer” to do what is right — significantly more than NGOs (57%), business (56%) and media (47%)”</em></strong></p></blockquote>
<img loading="lazy" decoding="async" class="alignnone wp-image-8797 size-full" title="trust barometer" src="https://www.api.friday.ie/wp-content/uploads/2019/01/ezgif.com-resize.gif" alt="trust barometer" width="738" height="417" /><br />
<em>There&#8217;s a 16-point gap between the more trusting &#8216;Informed Public&#8217; and the far-more-sceptical Mass Population, marking a return to record highs of trust differences.</em>
<figure class="graf graf--figure"></figure>
<h3 class="graf graf--p"><strong class="markup--strong markup--p-strong"> Building Trust with your Customers</strong></h3>
<p class="graf graf--p">So how does this relate to creating trust with our customers?</p>
<p class="graf graf--p">In business, there’s been a rebalancing of the relationship between organisations and their customers for some time. Customers now hold knowledge and power in their hands — simply by what they say about their experience of your product, and we see this play out in real time on review sites and social media posts.</p>
<p class="graf graf--p">We say here that <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">‘your customer&#8217;s goals should be your goals’</em></strong>. Think about that for a moment&#8230; if your commercial objectives don’t take account of your customer’s needs then you’ve got a problem.</p>
<blockquote class="graf graf--pullquote graf--startsWithDoubleQuote"><p><strong class="markup--strong markup--pullquote-strong">“It takes Trust to establish Trust”</strong></p></blockquote>
<p class="graf graf--p">High on the list of trusted sources is the good old word-of-mouth referral. By focussing more of your attention on existing customers and users, there is an opportunity for them to become your advocates &#8211; doing this will, in turn, add more power to your marketing.</p>
<p class="graf graf--p">How do we re-establish that trust? What are the things that allow us to measure trust?</p>
<p class="graf graf--p">In the digital world, here are some of the things that count most:</p>
<ul class="postList">
<li class="graf graf--li">Promoting positive online reviews and testimonials.</li>
<li class="graf graf--li">Clear communication: show you’ve thought of the user, use language that you know resonates with them.</li>
<li class="graf graf--li">Your website: it should be fast, well designed, secure, and easy to find information.</li>
<li class="graf graf--li">Highlight the key People involved in the business.</li>
<li class="graf graf--li">Be consistent with your service and product design.</li>
<li class="graf graf--li">Open and transparent privacy — a good opportunity to earn trust.</li>
<li class="graf graf--li">Advertise your work and who you work with.</li>
</ul>
<p class="graf graf--p">Of course, there’s nothing new here and we’ve been banging the drum on these things for some time.</p>
<p class="graf graf--p">Ease-of-use, speed, convenience, accuracy and honesty all play a part in creating a positive user experience. But we need to engage much more with the customer and look to improve their experience based on insights and regular feedback.</p>
<p class="graf graf--p">And therein lies the constant challenge for us as UX practitioners — making the case for the work and process that is necessary to find out what customers really want, and then asking our clients to trust in us to answer those needs.</p>
<h3 class="graf graf--p"><strong class="markup--strong markup--p-strong">Building Trust in the UX Process</strong></h3>
<p class="graf graf--p">As UX designers, our job is to create trust with your customers.</p>
<p class="graf graf--p">We do this by finding out what they actually want; using research, data analytics, sample surveys and focus groups. (<a class="markup--anchor markup--p-anchor" href="https://friday.ie/blog/importance-of-ux-research/" target="_blank" rel="noopener" data-href="https://www.api.friday.ie/blog/importance-of-ux-research/">Read Dave’s post on why research is so important</a>).</p>
<p class="graf graf--p">The hard part is convincing our own customers and clients first. For example, we are often invited to closed tenders that don&#8217;t include scope for research, or we are pitching for projects where we’re asked for creative without having access to an audience or user information.</p>
<p class="graf graf--p">Too often businesses make sweeping assumptions on what their customers really want, and this is largely led by commercial objectives and exec level opinions. But in reality, it’s almost impossible to effectively connect with your customers when you don’t actually fully understand what their needs are.</p>
<p class="graf graf--p">Our answer to overcoming these challenges lies in us providing education and fact-based evidence to challenge our customers, and then work to get that buy-in (trust) from their stakeholders.</p>
<p class="graf graf--p">Building trust takes effort — creating a good user experience isn’t just about boosting sales and winning design awards. It’s about building a real relationship with your customers where you deliver value that will endure beyond what you simply say, or whatever channels and platforms you build.</p>
<p class="graf graf--p">Maintaining trust demands a commitment from businesses to keep earning it from their customers across all touch points.</p>
<p class="graf graf--p">So for our clients, it’s our responsibility to educate them on the advantage of good UX, and the evidence and process they need to trust and engage in. Watch what happens when you build a customer-centric approach into your strategy.</p>
<p class="graf graf--p">Remember, <strong>it takes trust </strong>to<strong> create trust</strong>.</p>
<p class="graf graf--p">Thanks for reading.</p>
<p class="graf graf--p"><em class="markup--em markup--p-em">I’ll be talking more about trust and UX at the 3XE User Experience Design Thinking conference in Dublin on May 16th 2019. </em><a class="markup--anchor markup--p-anchor" href="https://3xedigital.com/" target="_blank" rel="noopener" data-href="https://3xedigital.com/"><em class="markup--em markup--p-em">Check it out here</em></a><em class="markup--em markup--p-em">. </em></p>
<p class="graf graf--p"><em class="markup--em markup--p-em">You can download the Edelman 2019 Trust Barometer directly </em><a class="markup--anchor markup--p-anchor" href="https://www.edelman.com/trust-barometer" target="_blank" rel="noopener" data-href="https://www.edelman.com/trust-barometer"><em class="markup--em markup--p-em">here</em></a><em class="markup--em markup--p-em"> (very interesting geopolitical metrics).</em></p>


Building Trust into the Customer Experience

<h4 id="66c8" class="graf graf--h4 graf-after--figure">Without research, there is no UX</h4>
<p class="graf graf--h4 graf-after--figure">Design is a solution based around an interpretation of a problem. Before design work begins we must identify, define and validate the problems that need to be solved. Problems that are highlighted to a designer are often from the clients own perspective and may not always reflect the end users views.</p>
<p class="graf graf--h4 graf-after--figure">In other cases, the designer will interpret a problem, but this is only their own point of view and may not match the users&#8217; feelings. Clients and designers, regardless of their viewpoint or experience do not have assumed empathy with users.</p>
<h4 id="59ed" class="graf graf--h4 graf-after--p">Who are the UX experts?</h4>
<p id="bef6" class="graf graf--p graf-after--h4">We have studied and been working in UX design for many years. Recently there has been an increase in the awareness of the benefits good UX can bring to a product or service. As UX professionals we find the biggest pushback regarding UX research is usually down to time and/or budget constraints. Quite often there can be presumptions that as UX experts we can perfect the UX of their interface while working in a vacuum. If only this was the case.</p>
<p id="2e78" class="graf graf--p graf-after--p">There is no such thing as a UX expert. If anything the only UX expert is the user of a particular product or service, they know what works for them and what they want. A good UX professional will be an expert on the process, techniques and research required in order to find out what the user wants from a particular UI. They will have mastered how to gain user empathy and the key to this is research, it is the foundation of any good UX lifecycle.</p>
<h4 id="c8d6" class="graf graf--h4 graf-after--p">Assumptions can be the enemy of good UX</h4>
<p id="7888" class="graf graf--p graf-after--h4">An assumption is an informed guess. It might be biased and is definitively unproven. We all make assumptions every day, we have to. Assumptions are based on our own experience of the world and the more experience of the world we have the more accurate our assumptions might be. Most ideas for a business start life as a solution to a problem, this business idea stems out of the assumption that others will have the same problem.</p>
<p class="graf graf--p graf-after--h4">Assumptions are good and are often the birthplace of creativity. Where an assumption can be bad is when it is not properly challenged or validated, not everyone perceives the world in the same way.</p>
<blockquote><p>“Your assumptions are your windows on the world. Scrub them off every once in a while, or the light won’t come in.”<br />
― <strong class="markup--strong markup--blockquote-strong">Isaac Asimov</strong></p></blockquote>
<p>A client may come to us with the assumption that they need us to create a new website with an improved design to drive more online sales. Through research, we might discover that the brand messaging is misleading or that the client has been targeting the wrong market demographics. All projects need to start with an open mind. Our design goal is to create a solution that is truly relevant to its users.</p>
<p>A mantra that we use within the Friday Agency and with our clients is <em><strong>“we don’t care what you think!”</strong></em>. All input is valuable, but the only assumption made throughout the UX research stage of a project is that nobody on the project team including the client is the end user.</p>
<h4 id="c43e" class="graf graf--h4 graf-after--p">UX Research</h4>
<p id="2a27" class="graf graf--p graf-after--h4">There is no one size fits all UX research process. Every project requires a different approach and set of tools that are tailored around the product/service and overall project goals. In all cases, we need to gain empathy for the client and more importantly their user base. Research doesn’t have to be extensive or expensive but should never be avoided.</p>
<p id="84c0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Client empathy:</strong> First off we need to understand the business behind the product or service, who the team is behind it and what their motivations are. We need to understand the brief we have been given and what the clients&#8217; expectation is. We need to understand the product or service ‘as-is’. The problems it is designed to solve, how it works and how effective it is.</p>
<p id="9426" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">User empathy: </strong>User empathy is the key to creating a good user experience. In order to gain empathy, we must understand our target audience intimately; what makes them tick, their goals, motivations and frustrations. It’s time to forget everything we know and listen. UX research encompasses a variety of qualitative and quantitate research methods to identify issues, requirements and add context, focus and insight into the design process.</p>
<blockquote id="1bb7" class="graf graf--blockquote graf--startsWithDoubleQuote graf-after--p"><p>“Research is formalised curiosity. It is poking and prying with a purpose.”<br />
― <strong class="markup--strong markup--blockquote-strong">Zora Neale Hurston</strong></p></blockquote>
<p id="1434" class="graf graf--p graf-after--blockquote">Here are some of the research techniques we use at the Friday Agency throughout the UX lifecycle. They are a mix of attitudinal and behavioural as well as qualitative and quantitative research methods. These are crossed checked against each other for better validation.</p>
<ol class="postList">
<li id="7fc8" class="graf graf--li graf-after--p">Heuristic Evaluation</li>
<li id="1b51" class="graf graf--li graf-after--li">Stakeholder Interviews</li>
<li id="8785" class="graf graf--li graf-after--li">Competitor Analysis</li>
<li id="2085" class="graf graf--li graf-after--li">User Interviews</li>
<li id="f772" class="graf graf--li graf-after--li">Focus groups</li>
<li id="4bb3" class="graf graf--li graf-after--li">Analysis of analytics</li>
<li id="0ef0" class="graf graf--li graf-after--li">Analysis of reviews</li>
<li id="50a2" class="graf graf--li graf-after--li">Online Surveys</li>
<li id="8c2d" class="graf graf--li graf-after--li">Usability testing</li>
<li id="ffdb" class="graf graf--li graf-after--li">A/B Testing</li>
<li id="4c27" class="graf graf--li graf-after--li">Personas &amp; scenarios</li>
<li id="12cb" class="graf graf--li graf-after--li">Card sorting &amp; affinity diagrams</li>
</ol>
<h4 id="2f14" class="graf graf--h4 graf-after--li">Tales of the unexpected</h4>
<p id="2ee5" class="graf graf--p graf-after--h4">It’s well documented that in medicine, some of the biggest discoveries have been made while monitoring the unexpected side effects of the testing of new drugs. Viagra surfaced during clinical trials of a cardiovascular drug in the early 1990s. Looking for a solution to one problem can uncover an unexpected solution to another.</p>
<p id="ba6d" class="graf graf--p graf-after--p">One of the greatest things that can come out of UX research is the unexpected, what we were not looking for. This can sometimes be terrifying to clients but is always both enlightening and positive. We have been involved in projects where a clients entire business strategy has changed as a result of UX research, something came to light that may have been overlooked or assumed and the new knowledge helped transform their business for the better.</p>
<p id="c02d" class="graf graf--p graf-after--p graf--trailing">We’ve all heard that knowledge is power but don’t forget that research is an investment in knowledge.</p>


Why research is essential to the UX lifecycle

<p class="graf graf--p">The role of the marketer is becoming increasingly challenging. Customers no longer take notice of push advertising and will only engage with a company when, where and how it suits them. People aren’t just buying products or services, they are buying an experience. Unless you have a store presence, these ‘experiences’ are more often than not, online.</p>
<p class="graf graf--p">As a marketer you are, no doubt aware that the website is still the most important marketing channel for the majority of businesses today and the competition for the customers&#8217; ever-decreasing attention span is cut throat. So the online experience for your customer must be top notch.</p>
<h3 class="graf graf--p"><strong class="markup--strong markup--p-strong">What is User Experience Design?</strong></h3>
<p class="graf graf--p">The goal of <a class="markup--anchor markup--p-anchor" href="https://www.usertesting.com/blog/what-is-ux-design-15-user-experience-experts-weigh-in/" target="_blank" rel="noopener" data-href="https://www.usertesting.com/blog/what-is-ux-design-15-user-experience-experts-weigh-in/">User experience design</a> (UX) in business is to “improve customer satisfaction and loyalty through the utility, ease of use and pleasure provided in the interaction with a product.” To put it another way, if your website doesn’t provide an easy and pleasurable experience for your customers or potential customers then they’ll be gone in two clicks. Don’t make it so easy for your competitors.</p>
<h3 class="graf graf--p"><strong class="markup--strong markup--p-strong">The ROI of UX</strong></h3>
<p class="graf graf--p">Some interesting stats: <a class="markup--anchor markup--p-anchor" href="https://www.forrester.com/report/The+Six+Steps+For+Justifying+Better+UX/-/E-RES117708" target="_blank" rel="noopener" data-href="https://www.forrester.com/report/The+Six+Steps+For+Justifying+Better+UX/-/E-RES117708">Forester</a> Research (paid report) shows that, on average, every dollar invested in UX brings 100 dollars in return. That’s an ROI of a whopping 9,900 percent. The <a class="markup--anchor markup--p-anchor" href="https://www.dmi.org/blogpost/1093220/182956/design-driven-companies-outperform-s-p-by-228-over-ten-years--the-dmi-design-value-index" target="_blank" rel="noopener" data-href="https://www.dmi.org/blogpost/1093220/182956/design-driven-companies-outperform-s-p-by-228-over-ten-years--the-dmi-design-value-index">Design Management Institute</a> has found that design-centric companies (such as Apple, Coca-Cola, and IBM) outperformed the S&amp;P index (which indicates the industry’s average performance) by 228% over a 10-year period from 2003 to 2013.</p>
<p class="graf graf--p">OK, so your business is not going to be the next Apple but there is clear statistical evidence to prove that a well-executed website will yield a very positive return on investment.</p>
<blockquote>
<p class="graf graf--h3 graf--startsWithDoubleQuote" style="padding-left: 30px;"><strong>“UX design is an investment, not an overhead.”</strong></p>
</blockquote>
<p class="graf graf--p">So maybe you know your website is totally outdated and hampering business. You have some ideas that could fix it, but how should you approach getting the website a UX overhaul. Who do you need to convince?</p>
<p class="graf graf--p">The people in your organisation who are concerned with sales and with making financial decisions are a good audience for your UX idea. Before you start the conversation and possibly suffering the indignity of having your bright idea of investing in UX being shot down in a meeting, follow these tips.</p>
<h4 class="graf graf--p"><strong class="markup--strong markup--p-strong">1. Web analytics</strong></h4>
<p class="graf graf--p">You can back up your argument with stats from your <a class="markup--anchor markup--p-anchor" href="https://en.wikipedia.org/wiki/Web_analytics" target="_blank" rel="noopener" data-href="https://en.wikipedia.org/wiki/Web_analytics">web analytics</a>. Especially look at what’s happening when people reach a critical point — perhaps a conversion — and see if people are dropping off. This drop off suggests the user has encountered a problem and are not carrying through. It’s the job of the user experience designer to find out what the problem is.</p>
<h4 class="graf graf--p"><strong class="markup--strong markup--p-strong">2. Research</strong></h4>
<p class="graf graf--p">There is a wealth of untapped information in every organisation about their websites’ users, i.e. the customers. People such as front-line sales or customer service staff probably have a litany of comments from customers about the problems with your company’s website. Truth be known, everyone in the company probably has an opinion of things that are wrong with it.</p>
<p class="graf graf--p">Tap into this and record all these issues in your research. Essentially, anything that makes the <a class="markup--anchor markup--p-anchor" href="https://en.wikipedia.org/wiki/User_journey" target="_blank" rel="noopener" data-href="https://en.wikipedia.org/wiki/User_journey">user journey</a> (eg. from homepage to checkout page) a bad experience.</p>
<p class="graf graf--p">If you can get to talk to your customers first hand then that&#8217;s even better. This is your strongest weapon against any dissenters. Whatever people think about what you have to say, this isn’t just your opinion, this is what the customer is saying.</p>
<p class="graf graf--p">Anything that makes this customer journey difficult, frustrating or simply doesn’t work, is costing you money and losing revenue opportunities.</p>
<blockquote>
<p class="graf graf--h3" style="padding-left: 30px;"><strong>&#8220;Design isn’t finished until somebody is using it.&#8221;</strong><br />
<strong><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 16px;">— Brenda Laurel, PhD, Independent Scholar</span></strong></p>
</blockquote>
<h4 class="graf graf--p"><strong class="markup--strong markup--p-strong">3. Testing the users</strong></h4>
<p class="graf graf--p">Taking this one step further would be employing what is known as <a class="markup--anchor markup--p-anchor" href="https://en.wikipedia.org/wiki/Usability_testing" target="_blank" rel="noopener" data-href="https://en.wikipedia.org/wiki/Usability_testing">usability testing</a> to drive your point home. This involves putting real users in front of your website and ask them to complete a couple of simple tasks like e.g, ‘buy a shovel’. This will require them to make the journey from home page, locating the product page, finding the earth-moving category, picking out a shovel and completing the transaction at checkout. Ask your testers to talk you through their journey as they do it live. You want them to tell you what they’re thinking, what are they looking for, what they expect to see, what they’re trying to find but can’t. It’s a good idea to write a usability test script so that all your testers are answering the same questions making it easier for your statistical analysis.</p>
<h4 class="graf graf--p"><strong class="markup--strong markup--p-strong">4. Competition</strong></h4>
<p class="graf graf--p">Look at what your competitors are doing. Analyse how they present themselves and their products online. Take the customer journey yourself and see how it compares to yours. Is it easier, clearer to follow? Slick design, great images and an altogether better look &amp; feel can indicate that a competitor has engaged UX design in developing their website. Remember, people are basically just like Magpies. We like bright shiny new things and will make a judgment about a company within seconds of visiting their website. Your competitor could be attracting better clients because of their cool new website that is just a pleasure to visit. It delights the user.</p>
<h4 class="graf graf--p"><strong>5. Getting management support</strong></h4>
<p class="graf graf--p">According to Jared Spool, one of the foremost thinkers in UX today says, “you need to find out what your bosses are already convinced of. If they are good at what they do, they likely have something they want to improve. It’s likely to be related to improving revenue, reducing cost, growing customer numbers….or increasing shareholder value.</p>
<p class="graf graf--p">Good UX can help with all those things.”</p>
<p class="graf graf--p">Once you know what that is, frame your work within that context.</p>
<blockquote>
<p class="graf graf--h3 graf--startsWithDoubleQuote" style="padding-left: 30px;"><strong>“For every dollar invested in UX yields a return of $2 to $100.&#8221;</strong></p>
</blockquote>
<h3 class="graf graf--p"><strong class="markup--strong markup--p-strong">What next?</strong></h3>
<p class="graf graf--p">So you’ve identified the problems with your website and you’ve validated these insights with research and data. What next?</p>
<p class="graf graf--p">Present your findings to key stakeholders outlining your research findings and how the analytics is showing resultant loss of opportunities. Give examples of where the issues and the pain points on the customer’s journey lie. You will need to be able to demonstrate how solving <a class="markup--anchor markup--p-anchor" href="https://en.wikipedia.org/wiki/Web_usability" target="_blank" rel="noopener" data-href="https://en.wikipedia.org/wiki/Web_usability">usability</a> problems will lead to measurable improvements in return on investment. There are numerous other benefits to improving your websites’ usability. Think of the possibility of reducing support calls, converting, retaining customers and improving the response to customer inquiries.</p>
<h3 class="graf graf--p">Show don’t tell.</h3>
<p class="graf graf--p">All your arguments need to be backed up with data. Data from your analytics, user feedback from testing, stats from online sources, comparable case studies. There’s a wealth of information out there you can use to back up your argument. You may find yourself in a room with people who think they know what’s best for the website or brand because they are more senior. Remember, data should overrule opinions no matter who has them.</p>
<h3 class="graf graf--h3">Scare them, Inspire them, Start small.</h3>
<p class="graf graf--p">In his book, <a class="markup--anchor markup--p-anchor" href="https://www.amazon.com/User-Experience-Revolution-Smashing-eBooks-ebook/dp/B06XZZQ38R" target="_blank" rel="noopener" data-href="https://www.amazon.com/User-Experience-Revolution-Smashing-eBooks-ebook/dp/B06XZZQ38R">User Experience Revolution</a>, Paul Boag outlined steps to help to get management buy-in.</p>
<h4 class="graf graf--p"><strong class="markup--strong markup--li-strong">1. Scare your management</strong></h4>
<p class="graf graf--p">Nothing motivates people more the threat of something being taken away. The most obvious being loss of business to competition. Don’t just scare them, offer a solution otherwise they’ll feel overwhelmed.</p>
<h4 class="graf graf--p"><strong class="markup--strong markup--p-strong">2. Inspire Management </strong></h4>
<p class="graf graf--p">Give them some idea of what the future looks like. inspire them to what is possible. It could be a series of workshops before a big flash event. A big relaunch.</p>
<h4 class="graf graf--p"><strong class="markup--strong markup--p-strong">3. Give management a simple next step</strong></h4>
<p class="graf graf--p">The greatest of journey’s starts with a single step. The harder the journey, the greater resistance you’ll get. Ask them to take a small step towards the bigger project and they will be far more likely to say yes.</p>
<h3 class="graf graf--p">Thumbs Up from The Board</h3>
<p class="graf graf--p">So everybody liked your presentation and you’ve been given the green light, what are your options?</p>
<p class="graf graf--p">You may be given the option to fix the issues in-house or to engage a UX design agency to do it for you. Coming from an agency I’m always going to recommend the agency route but budget, resource and time constraints don’t always make that a viable option. But look, the ultimate aim is to delight customers. You won’t find too many bosses not wanting to make their customers happy. They may be willing to loosen the purse strings if you’ve adequately demonstrated that UX design is an investment, not an overhead.</p>
<h3 class="graf graf--p">Outsource to a UX Designer/Agency</h3>
<p class="graf graf--p">Engaging with a specialist UX agency or UX designer is one route. Keeping it in-house is another. The work you’ve already done on research will inform the UX designer/agency but it is always a good idea to have them independently conduct <a class="markup--anchor markup--p-anchor" href="https://en.wikipedia.org/wiki/Usability_testing" target="_blank" rel="noopener" data-href="https://en.wikipedia.org/wiki/Usability_testing">usability testing</a> with real users which will involve having users follow customer journey whilst recording the issues and pain points encountered.</p>
<h3 class="graf graf--h4">The UX Process</h3>
<figure class="graf graf--figure"><img decoding="async" class="graf-image aligncenter" src="https://cdn-images-1.medium.com/max/800/1*nLMKSk-ZTZa6rhAqAP13eg.png" data-image-id="1*nLMKSk-ZTZa6rhAqAP13eg.png" data-width="792" data-height="306" /></figure>
<p class="graf graf--p"><a href="https://friday.ie/blog/importance-of-ux-research/">Armed with the research</a>, the UX agency will usually follow a process similar to the illustration above.</p>
<h3 class="graf graf--p">Go It Alone</h3>
<p class="graf graf--p">If you have a list of basic, easy to fix UX problems that need to be solved, you could have some in-house techie or employ a freelance guy to do it on the cheap. This is not an option I’d recommend as it may not yield the results you’d promised management. Or the young techie in the beanie who skateboards to work has just wrecked your website and compromised customer’s data security. Not a good look for you.</p>
<p class="graf graf--p">If you have no budget to engage a UX designer/agency, there are always some low hanging fruit in terms of quick fixes you can focus your attention on. These are the quick fixes that are straightforward enough to implement and should provide some results.</p>
<h3 class="graf graf--p">Fix The Copy</h3>
<p class="graf graf--p">For example, many companies design for themselves rather than their users. Often words that make sense to the company don’t make sense to their customers and these can end up causing confusion. If you happen to sell spades, call a spade a spade and not an excavation solution even if, as a marketer, you think the latter description makes you product sound more sophisticated.</p>
<h3 class="graf graf--p">The agency route</h3>
<p class="graf graf--p">If the entire website needs to be dragged out into the backyard and set alight with a match then find a UX agency who will take a far deeper, more strategic approach to designing your new website. As with most good UX agencies, We at <a class="markup--anchor markup--p-anchor" href="https://friday.ie/" target="_blank" rel="noopener" data-href="https://www.api.friday.ie/">Friday</a> follow a process and collaborate closely with our clients with the goal of providing a best-in-class web experience for their customers.</p>
<p class="graf graf--p">The investment in UX design can dramatically improve the image of a company and yield a major return.</p>
<p>If you plan to invest in your website, <a href="https://friday.ie/contact/">Talk to us</a></p>
<p class="graf graf--p">You may even sell more spades.</p>


How To Convince Your Boss To Invest in User Experience (UX) Design

<p>Every year, companies are leaving millions of Euros on the table by not creating well thought out information architecture. Money is lost because customers are not able to navigate around their websites and leave unsatisfied and go elsewhere to find the services they need elsewhere.</p>
<h3><strong>What is Website Navigation?</strong></h3>
<p>Moving from page to page through a website, you are using the website navigation. It’s not something people think too much about but getting the navigation wrong is like expecting someone to find their Hotel in a new city without a map.</p>
<p>Users can easily get lost trying to find what they are looking for. Frustration sets in and in two clicks they’re gone to your competitor&#8217;s website. There are graveyards full of abandoned shopping carts.</p>
<p>Website Information Architecture is important in helping you design a site such that the user can achieve their goals and get where they are going with as little effort as possible.</p>
<h3><strong>So what is Information Architecture?</strong></h3>
<p><a href="https://www.iainstitute.org/what-is-ia" target="_blank" rel="nofollow noopener">Information architecture </a>(IA) is the creation of a structure for a website, application, or another project, that allows us to understand where we are as users, and where the information or content we want is in relation to our position.</p>
<p>Much like the architectural plans of a building, IA describes the skeleton of the project. Content, Visual elements, functionality, interaction and navigation are built according to IA principles. IA principles are the guides to good IA such as the principle of front doors.</p>
<p>This principle states that one must assume at least half of the website’s visitors will come through some page other than the home page. Learn more about IA principles <a href="https://www.designprinciplesftw.com/collections/eight-principles-of-information-architecture" target="_blank" rel="nofollow noopener">here</a>.</p>
<blockquote><p>“Every year, companies are leaving millions of Euros on the table by not creating well thought out information architecture.”</p></blockquote>
<p>From the point of view of the team or teams designing and building of a website, the IA provides the important role of keeping everyone on the same page during development.</p>
<p>Much like you find on a building site where all the contractors be they builders, plumbers or electricians, everyone needs a blueprint to follow. The AI informs the client, the project manager, the UI designer, the developer and the content creator what information goes where.</p>
<h3>IA as part of the Design Process</h3>
<p>Here at <a href="https://friday.ie/" target="_blank" rel="nofollow noopener">Friday</a>, IA fits into our process as follows:</p>
<ol>
<li>Client brief</li>
<li>Discovery / research</li>
<li>Information Architecture</li>
<li>Wireframes</li>
<li>Prototyping</li>
<li>Design</li>
<li>Build</li>
</ol>
<p>It’s important to note that throughout the process the IA is a fluid document and may change to make improvements to the overall user experience. When changes are made, it is vital to make amendments to the original IA document so that designers, content creators and developers are kept abreast of any changes.</p>
<blockquote><p>“Getting navigation wrong is like expecting a person to find their Hotel in a new city without a map”</p></blockquote>
<p>The structure depends on a number of factors. First of all, the specific needs of the target audience are paramount as user satisfaction is the priority of IA. If you are considering a redesign then a look at traffic stats will give you an indication of how people are using the site and what path they take to get to where they are going.</p>
<p><a href="https://en.wikipedia.org/wiki/Heat_map" target="_blank" rel="nofollow noopener">Heat mapping</a> can also help by offering you a visual image of where users are moving around the site.</p>
<p>You have to think about the user journey and consider how you can simplify it. Consolidating pages such as products and services might shorten the user&#8217;s journey. Also, consider how you label menus and buttons.</p>
<p>Your users shouldn’t have to think about what’s behind the next click, it should be intuitive.</p>
<h3>Are IA and UX the same thing?</h3>
<p>AI would be best described as a particular part of the <a href="https://en.wikipedia.org/wiki/User_experience" target="_blank" rel="nofollow noopener">User Experience</a> (UX) process. IA is the description the content structure of the design which will then produce a wired skeletal frame or blueprint (known as wireframes) of the project.</p>
<p>These are the basic building materials on which a UX designer builds the project.</p>
<p>Good IA makes a product easy to use providing its combined with good design thinking. <a href="https://en.wikipedia.org/wiki/Design_thinking" target="_blank" rel="nofollow noopener">Design thinking</a> is a method for the practical, creative resolution of problems using the strategies designers use during the process of designing.</p>
<p>The two together will give the product a strong user experience.</p>
<p>IA is the content and information plans on which UX is built. UX design takes the plans to another level, providing a useful, relevant, meaningful and enjoyable experience. Achieving these goals and meeting business goals is the difference between apps and websites that succeed and those that fail.</p>
<p>And remember, if you fail, try two more times to show failure is statistically significant.</p>
<p>If you&#8217;re looking to invest in web design, <a href="https://friday.ie/contact/">talk to us.</a></p>


No Information Architecture? You’re Wasting Money.

<p>I&#8217;m going to bring it back to basics for my blog post this week, being so immersed in the world of design and development I sometimes forget that what comes out of my mouth can sound like a load of jargon to some people. The general misunderstanding around the difference between UX (user experience) and UI (user interface) both inside and outside the industry is something that has bugged me for a while. People seem to use these terms interchangeably, without trying to distinguish them in any way. So its time to set the record straight.</p>
<h3>User Experience (UX)</h3>
<p>To most, user experience or UX is a bit of buzzword. It&#8217;s a relatively new phrase for something that has been around for longer than its name. Wikipedia put it well &#8211; &#8216;user experience design is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.&#8217;</p>
<p>User experience comes first in the design process for almost anything displayed on a computer screen. The goal for a user experience designer is to eliminate friction and pain points users may come across when trying to complete a task on a website or App. The process for the user should be as clear, smooth and simple as possible.</p>
<p>As an example, let&#8217;s say we are redesigning an e-commerce website, we identify through website stats that people are having difficulty completing a purchase at the checkout stage and are leaving the website before they pay for anything. Users have given us feedback that they are confused about what they should enter into the checkout form and the wording it displays. This tells us that the checkout process has a poor user experience resulting in abandoned shopping carts.</p>
<p>A user experience designer will spend a lot of time working on strategic planning, competitor analysis, customer analysis, content development, wire-framing, prototyping and usability testing to ensure that the interface works for the user. This process all takes place before a UI designer begins using colour, fonts, photography and design elements to create what the final interface will look like.</p>
<p>Starting UI design without first carrying out UX design would be like starting construction of a building without any well-thought-out blueprints.</p>
<h3>User Interface (UI)</h3>
<p>If user UX design is the creation of how something will work, UI design is the creation of where something works. Its the design of the actual interface users will see when they are using a website or app.</p>
<img loading="lazy" decoding="async" width="990" height="320" class="alignnone size-full wp-image-6875" src="https://www.api.friday.ie/wp-content/uploads/2018/05/UIvsUX2.jpg" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2018/05/UIvsUX2.jpg 990w, https://www.api.friday.ie/wp-content/uploads/2018/05/UIvsUX2-250x81.jpg 250w, https://www.api.friday.ie/wp-content/uploads/2018/05/UIvsUX2-768x248.jpg 768w, https://www.api.friday.ie/wp-content/uploads/2018/05/UIvsUX2-700x226.jpg 700w, https://www.api.friday.ie/wp-content/uploads/2018/05/UIvsUX2-120x39.jpg 120w, https://www.api.friday.ie/wp-content/uploads/2018/05/UIvsUX2-80x26.jpg 80w" sizes="(max-width: 990px) 100vw, 990px" />
<p>UI design is carried out after the UX process has been completed. This is where we take sketches from the UX process along with a style brief and start applying graphic design techniques to apply look and feel and create finished artwork of what the interface would look like. We design compositions of buttons, headings, borders, links and shapes using colour, photography, brand elements, typography and styling that result in a finished artwork of the user interface.</p>
<blockquote>
<p id="6fb3" class="graf graf--p graf-after--figure"><strong>UI</strong> — “What should be the colour of this button?”</p>
<p id="0b3c" class="graf graf--p graf-after--p"><strong>UX</strong> — “Do we need this button? If yes, why? What should be the position of this button?”</p>
</blockquote>
<h3>Designers</h3>
<p>I still see job listings by agencies looking for UX designers to create finished artwork or UI designers to design prototypes. Generally speaking, in the same way that web designers tend not to write code, UX designers would usually not style and UI designers would not usually plan an interface (there are exceptions to that rule). Instead, the two would usually work very closely together sharing ideas and knowledge to deliver the best possible finished result for the user.</p>
<p>It&#8217;s like Doctors and Nurses or Builders and Architects.</p>
<p>I hope that makes sense, if not let me know in the comments below, I might be too close to this to explain it well.</p>


Whats the difference between UX and UI design?

<p>Before I start &#8211; upon proofreading this post, Graham pointed out that I made an assumption that people reading this post would understand what usability testing is, he was right. Usability testing is a technique used in UX design to evaluate a product by testing it on users before it is launched. Users are asked to complete tasks on an app or website, typically while they are being observed by a researcher, to see where they encounter problems or confusion. Makes sense?</p>
<p id="0e81" class="graf graf--p graf-after--figure">A big part of our process is discovery, we spend a lot of time getting under the skin of our clients and their customers so we can work out how we can create something really effective &#8211; be it a website, app or marketing campaign. Our approach is centred around what works under the client&#8217;s customers as this in turn usually works for the client.</p>
<p id="fe88" class="graf graf--p graf-after--p">As an agency, we are advocates for the end user. Our goal is to make everything we create as easy to use as possible and a big part of this is talking to the users about what they want, how they perceive what we have created and if they find it easy to use. The user&#8217;s opinion usually takes priority and ignoring their input is a mistake that is still made too often.</p>
<h4 id="b16b" class="graf graf--h4 graf-after--p">Making Assumptions</h4>
<p id="f129" class="graf graf--p graf-after--h4">At Friday we work hard to align marketing and user experience. Marketing gives the user a push in the direction of a product or service and good user experience makes sure the user&#8217;s journey is as smooth as possible, they both need to be sharp and working together as they rely on each other. The only way to know if the journey is smooth is to ask the user — we try not to make assumptions and we always keep an open mind. Assumptions can be the enemy of good marketing and UX if they are not properly validated.</p>
<p id="5ce6" class="graf graf--p graf-after--p">Often the people working on a project can be working in a vacuum of familiarity being guided by the opinions of the people with the loudest voices or most influence. This can create a false reality and the focus moves away from what the end user actually wants.</p>
<p id="bef0" class="graf graf--p graf-after--p">We have seen it time and time again, a client is so sure about what they are offering that they skip asking for input from the only people who matter, the customers. This is a big mistake and can be a very costly one.</p>
<h4 id="aa1d" class="graf graf--h4 graf-after--p">Usability Testing</h4>
<p id="44dd" class="graf graf--p graf-after--h4">Usability testing would usually be carried out on a working prototype and/or a beta version of a website or app. We start by writing up a usability testing script where questions and key tasks are mapped out to ask the user to navigate through. We then recruit 5–7 users from a targeted demographic that is aligned with the client&#8217;s customer base.</p>
<p class="graf graf--p graf-after--h4">Each user would join us for a 30–40 minute session where we watch them interact with the material, complete tasks while asking them to articulate what they are seeing, what they think and what they expect. We record their face, the screen and take notes on any pain points they have throughout the user journey.</p>
<p class="graf graf--p graf-after--h4"><img loading="lazy" decoding="async" class="aligncenter wp-image-4459 size-large" title="unislim usability testing" src="https://www.api.friday.ie/wp-content/uploads/2018/02/uni-1-1024x640.jpg" alt="" width="1024" height="640" /></p>
<p class="graf graf--p graf-after--h4">You would be amazed how valuable this exercise can be to any digital project, we have discovered problems in key areas of websites and apps that everyone presumed were perfect. It can be a real eye-opener and only when you see it in action can you fully realise its value and how fundamental it is to the UX process.</p>
<h4 id="06aa" class="graf graf--h4 graf-after--p">A False Economy</h4>
<p class="graf graf--h4 graf-after--p">Some level of usability testing is essential to the success of any digital project but unfortunately it can and has been overlooked in the past. There are 3 main reasons some clients have given us for wanting to skip usability testing, the first is that they say they already know the product works (we have just addressed this), the second is that it takes time and will slow the project down and the 3rd is the cost of usability testing.</p>
<p class="graf graf--h4 graf-after--p">The truth is that usability testing is actually designed to avoid overruns of cost and time as well as ensure what is created actually works at launch. Making changes at the design stage is much easier than after development has been completed, you will save both time and money here.</p>
<blockquote>
<p id="718d" class="graf graf--p graf-after--p"><em>It doesn’t make any sense to wait for your actual customers to find problems with your website or app?</em></p>
</blockquote>
<p class="graf graf--p graf-after--p">In a lot of cases you have one opportunity to make a sale or conversion online, if there is an issue with UX the user will probably turn away, never to return. <a href="http://whatusersdo.com/blog/12-fascinating-ux-user-testing-stats-to-help-your-business-case/" target="_blank" rel="noopener">Recent research</a> has found that 92% of consumers have had a poor customer experience online – one-third of these people will abandon a purchase because they couldn’t find the information they needed. Not only do you run the risk of missing a sale or conversion but a poor or frustrating experience can cause reputational damage, people talk, especially online.</p>
<p id="c6dc" class="graf graf--p graf-after--p graf--trailing">You can probably tell by now that <a href="https://friday.ie/expertise/user-experience/usability-testing/">usability testing</a> is something we feel very strongly about, it is a fundamental part of our process and I know we can’t do the best job possible without users contributing to the end results. Imagine if drug companies didn’t run clinical trials on drugs before doctors started prescribing them or if automobile manufacturers didn’t test drive their cars before releasing them into the forecourts. Madness, right?</p>
<p>&nbsp;</p>


It’s time we spoke about the importance of usability testing!

<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://www.api.friday.ie/wp-content/uploads/2017/12/Graceful-Degredation-100.jpg"><img loading="lazy" decoding="async" class="wp-image-3163 size-large alignleft" src="https://www.api.friday.ie/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://www.api.friday.ie/wp-content/uploads/2017/12/Progressive-Enhancement-100.jpg"><img loading="lazy" decoding="async" class="alignleft wp-image-3164 size-large" src="https://www.api.friday.ie/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>When it comes to User Experience (UX), most people will already know what a micro-interaction is, without knowing what a micro-interaction is. When you hover over the title of an article on a blog and the text changes colour, you know, or assume, it is a link that can be clicked. Similarly, when you hover over a button on a website and it changes colour, you know that when you click the button, something will happen. It&#8217;s these little visual cues, as well as many other subtle indicators, that make up the wonderful world of micro-interactions.</p>
<p>Consider the following scenario; you&#8217;re trying to log in to your favourite website, you have typed in your username and password and you&#8217;ve clicked the &#8220;Log In&#8221; button. What now? In most cases, you will see some indication that you are currently being logged in or an error warning to say you&#8217;ve entered the incorrect login details. These indicators are also examples of micro-interactions.</p>
<h3>What are micro-interactions?</h3>
<p>The term micro-interactions was coined by Dan Saffer, who subsequently wrote a book on them called <a href="http://shop.oreilly.com/product/0636920032496.do" target="_blank" rel="noopener">Microinteractions, Designing with Details</a> which is well worth a read.</p>
<p>Micro-interactions are the functional, interactive details of a product. These details can greatly enhance the UX when using a product or can be terribly detrimental to the users&#8217; experience. In the example of the website login above, if there is no indication that the user has entered their details correctly or incorrectly, how will they know what action to take next and how will they know whether they can complete the task they planned to work on? Micro-interactions are not necessarily features, but they definitely matter.</p>
<p>Saffer defines the four main components of micro-interactions as:</p>
<ol>
<li>Trigger &#8211; What starts the micro-interaction. This can be the click of a mouse by the user, something that happens automatically within the system or something that is caused by an external interaction.</li>
<li>The Rules &#8211; When the interaction begins, something happens and the rules define what that is.</li>
<li>Feedback &#8211; This provides an indication to the user that something has happened and what the outcome of that action is.</li>
<li>Loops and Modes &#8211; These define the nature of the interaction; does it repeat, what happens over time?</li>
</ol>
<h3>Where to use them?</h3>
<p class="graf graf--p">Micro-interactions are everywhere. From logging into a website or adding a product to your online shopping cart to switching on an appliance or when your bread has finished toasting. All of these examples of human interactions with a system and feedback being provided can be considered micro-interactions.</p>
<p>With regard to micro-interactions specifically on websites and mobile apps, there are many instances where a well-implemented micro-interaction can greatly improve the UX. One of the more important instances is when building forms on the web.</p>
<p>It is imperative that the end user knows what details they are required to input and that they are given easily-digested feedback once they have entered information or submitted the form. Feedback such as email address or date format and allowable characters in a password should always be made clear to the user, and not just after they have entered their details and clicked &#8220;Submit&#8221;.</p>
<p class="graf graf--p">Aside from entering information into forms, another vitally important use of micro-interactions is when a user has clicked a button. In most, if not all instances, when a user has clicked a button an action will take place. When the user has clicked a button, or before that, when they have hovered over a button, they should be given some feedback to indicate if there is an action taking place or if an action has finished.</p>
<p class="graf graf--p">The below buttons show possible designs for some of the different states of a button. The states shown are the default, hover, active, error and success.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-3198 size-full" src="https://www.api.friday.ie/wp-content/uploads/2018/01/button-states.png" alt="" width="1100" height="60" />
<p class="graf graf--p">Some examples of both well implemented and poorly implemented micro-interactions are outlined below.</p>
<h3>The Good</h3>
<p>One website I particularly like when it comes to UX and their use of micro-interactions is Amazon. When making a purchase of any item on Amazon the user is given feedback at every step in the process and it&#8217;s perfectly clear what information is required from the user at the address entry and checkout stages.</p>
<p>Once an item has been added to the user&#8217;s cart, there is a very clear and concise message displayed to confirm the user&#8217;s action.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-3183 size-full" src="https://www.api.friday.ie/wp-content/uploads/2018/01/added-to-cart.png" alt="" width="1179" height="92" />
<p>&nbsp;</p>
<p>When adding a new shipping address placeholders are used within the form input fields to indicate to the user what information would be suitable.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-3184 size-full" src="https://www.api.friday.ie/wp-content/uploads/2018/01/address-security-access-code.png" alt="" width="489" height="68" />
<p>&nbsp;</p>
<p>If the user enters incorrect details or omits required details, a message is displayed showing what details are missing and the form fields that require the user&#8217;s attention are highlighted.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-3182 size-full" src="https://www.api.friday.ie/wp-content/uploads/2018/01/add-card-validation.png" alt="" width="799" height="314" />
<h3>And The Bad</h3>
<p>Up until November of last year, Twitter displayed a character count when a user was composing a new Tweet. The indicator was a number showing how many characters had been entered and the colour of this number would change to red when the user approached the character limit. Most users knew that a Tweet has a maximum of 140 characters so they knew when they had reached the character limit. It didn&#8217;t seem like it would make a huge difference to users if this was changed so as part of an update to their platform, which allowed users to enter 280 characters in a Tweet, they also changed the character counter to a circle that would fill with a blue line as characters were entered. Again this indicator changed colour to red when the user approached the 280 character limit.</p>
<p>The new circular indicator took away the instant feedback that users had become accustomed to when writing a tweet. They no longer knew how many characters they had available before reaching the character limit.</p>
<img loading="lazy" decoding="async" class="aligncenter wp-image-3185 size-full" src="https://www.api.friday.ie/wp-content/uploads/2018/01/tweet-character-count-circle.png" alt="" width="592" height="205" />
<p>As a result of this seemingly small change, there was a huge backlash among the Twitter community which was well documented both on the Twitter platform and among online publishers, such as <a href="http://mashable.com/2017/11/07/twitter-character-count-circle/#K.x7fXORcOqj" target="_blank" rel="noopener">Mashable</a>. This example shows that not only can a micro-interaction help to provide feedback to the user but these micro-interactions can become an element of consistency that users demand when using a website or an app.</p>
<h3>In conclusion: Why micro-interactions are important for UX</h3>
<p>Micro-interactions play an essential role in a user&#8217;s understanding of computer systems. They give the user feedback, both good and bad, on what the current status of the system is, what the result of their actions will be or what has already happened as a result of their action and tells them what they should do next.</p>
<p>This feedback can add an element of personality to a user&#8217;s experience when interacting with a website or app. They can be used to take away the dull, negligible aspect of using computer systems and make it far more enjoyable and memorable. This is their greatest contribution to User Experience.</p>


Micro-Interactions And Their Role in UX

<p class="graf graf--p">Over the years I have written a post or two about our process for planning, designing and developing a website or app. It’s always evolving as technology changes, we learn new techniques and come across fresh challenges. I find looking back at how I used to do things is a bit like looking at old photos of myself &#8211; cringe! Time highlights how experience has given us new tools, expertise and knowledge that we didn’t have before, such as the content first approach.</p>
<p class="graf graf--p">While the core of our process hasn’t changed dramatically, what is always changing is what’s happening inside each of the main stages. What I find is that the sequence of events is critical to the success of a web project. Each stage feeds the next and working ahead without completing a previous step can often have a negative effect on the project and the quality of the output.</p>
<h2 class="graf graf--h3">Prioritise Content First</h2>
<p class="graf graf--p">Content is the life blood of a website or app, it’s what your audience come for, whether it&#8217;s a brochure, eCommerce, data capture, information or entertainment. Content creates the design, functionality and purpose of your website or app. Form follows function and the function is usually based on the content.</p>
<p class="graf graf--p">It’s not uncommon for us to be asked by some clients to begin the UX and design process before the content is ready, a requirement usually created by project time constraints. The problem with this is that we are creating the information architecture, wireframes and design by guessing what the content might be and how much of it there is. Using “lorem ipsum” as placeholder text and through wireframes and dummy images in design is no substitute for actual content. In fact its not uncommon to still see placeholder text go unchecked on a live website. It&#8217;s a mistake to create content to fit a design. You make a shoe that fits the foot, not find a foot that fits the shoe.</p>
<p class="graf graf--p">From experience the design first approach will usually result in multiple design changes being required after the website or app has been built. This is a counter productive way of working and can effect the project timings and the budget. We also find that if the design is not tailored to suit the content it can often end up looking less bespoke, more generic and not fit for purpose.</p>
<h2 class="graf graf--h3">Why Content First?</h2>
<p class="graf graf--p">When we use a content first process we are taking the content centre stage, this ensures we consider the opportunities, constraints and implications of content on our designs. We can think about how to display the actual content so it’s easy to digest, especially on mobile. The content will inform and drive the design and that’s when good UX design takes the delivery and communication of content to the next level of experience.</p>
<p class="graf graf--p">Content creators should be closely involved in the planning stages of any project and they should work closely with the UX designers, project managers and developers. It’s key that everyone understands what is expected and what the common vision is.</p>
<h2 class="graf graf--h3">Jamie&#8217;s Story</h2>
<p class="graf graf--p">Jamie, one of our UX designers here in the studio told me a story about a client he was working with when he was in a previous company, the client had a new product they wanted to launch online and he asked Jamie to work with him on creating a promotional landing page for the product. Their initial conversation went something like this.</p>
<blockquote class="graf graf--blockquote"><p><strong class="markup--strong markup--blockquote-strong">Client:<br />
</strong><em>“I need a design for a web page that explains how our new subscription product works, I want to put it live next week.”</em></p></blockquote>
<blockquote class="graf graf--blockquote"><p><strong class="markup--strong markup--blockquote-strong">Jamie:<br />
</strong><em>“No problem, can we get together and look at your content. I can sketch a wireframe and then I’ll come up with a first draft of the design.”</em></p></blockquote>
<blockquote class="graf graf--blockquote"><p><strong class="markup--strong markup--blockquote-strong">Client:<br />
</strong><em>“I don’t have any content yet, I was hoping you could design something that I could look at before I work on the content.”</em></p></blockquote>
<blockquote class="graf graf--blockquote"><p><strong class="markup--strong markup--blockquote-strong">Jamie:<br />
</strong><em>“But if I don’t know what the content and functionality is, how can I create a design for it?”</em></p></blockquote>
<p class="graf graf--p">I have heard people suggest that the choice between content or design first is an eternal question, like &#8220;which came first, the chicken or the egg&#8221;? This simply isn’t the case, it&#8217;s always content first, there is no debate.</p>
<h2 class="graf graf--h3">Best Practice</h2>
<p class="graf graf--p">Copy should be written with an idea of how it will be displayed on-screen. It should be written with many questions in mind — should there be a more concise version of the content for mobile devices? Does it need accompanying graphics or icons to get the point across? How will a piece of content work with the other content on the rest of the page? When it comes to images, if we are supplied images after the site has been designed are they going to work and fit into our layout and will they work across responsive screens?</p>
<p class="graf graf--p">All this detail needs to be worked out through close collaboration between the UX designers and the content creators and the final wireframes should always feature content that is as close to approved as possible in order for a final design to begin in earnest.</p>
<p class="graf graf--p">Timings can be a challenge for any project, it may sound like a good idea to work on content and design in parallel and in isolation to save time but from experience the opposite is true, it&#8217;s simply counter-productive. Using actual content (both text and images) throughout the design process will inform and guide design decisions and result in designs that scale well and communicate effectively as the content intends. Everybody wants the best possible output.</p>
<p class="graf graf--p">What is your process? How do you handle content creation in the mix of UX, design and development? Let us know in the comments below.</p>


The “Content First” Approach to Creating Your Website

<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 loading="lazy" decoding="async" class="size-full wp-image-2945 aligncenter" src="https://www.api.friday.ie/wp-content/uploads/2017/06/Shop-example.png" alt="" width="1280" height="1185" /></p>
<p class="graf graf--p"><img loading="lazy" decoding="async" class="size-full wp-image-2946 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2947 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2948 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2949 aligncenter" src="https://www.api.friday.ie/wp-content/uploads/2017/06/A.png" alt="" width="1099" height="508" /></p>
<p class="graf graf--p"><img loading="lazy" decoding="async" class="size-full wp-image-2950 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2952 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2953 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2954 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2955 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2956 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2957 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2958 aligncenter" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="size-full wp-image-2959 aligncenter" src="https://www.api.friday.ie/wp-content/uploads/2017/06/NEW-Product-page.png" alt="" width="1280" height="1473" /></p>


8 UX Design Improvements for the Kilkenny Shop

<p class="graf graf--p"><em>Great design isn’t just about simple aesthetics or about pleasing the client, but rather it’s about pleasing the end user. User experience invokes emotion and happy users make happy customers, which in turn makes happy and successful clients.</em></p>
<p class="graf graf--p">UX as a discipline is a massive field that industry leaders have been investing in for some time now, often hiring teams of UX specialists to work alongside their designers and developers to advance their digital products.</p>
<p class="graf graf--p">Whether you’re running a large online presence such as Amazon or Apple, or a much smaller one, we at Friday believe that the same principles of UX theory should be applied and scaled to benefit even the smallest online presence.</p>
<p class="graf graf--p">UX design is a core service provided by Friday, and a vital component of that offering is usability testing.</p>
<p class="graf graf--p">There are a plethora of UX research methods that are well documented and proven to give solid results. The range of methods can be divided into two broad categories; <strong><em class="markup--em markup--p-em">Qualitative</em></strong> and <strong><em class="markup--em markup--p-em">Quantitative</em></strong>.</p>
<p class="graf graf--p"><strong class="markup--strong markup--p-strong">Quantitative Research</strong> refers to statistical or numerical analysis of data obtained through surveys, card sorting exercises, or the analysis of existing data such as Google Analytics and/or A/B testing.</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-2919" src="https://www.api.friday.ie/wp-content/uploads/2017/06/fr-election.jpg" alt="" width="610" height="407" /><br />
<em>Quantitative data from an Exit Poll during the 2017 French Presidential Election. Source CNBC.</em>
<p class="graf graf--p"><strong class="markup--strong markup--p-strong">Qualitative Research</strong> is essentially exploratory research, including interviews, focus groups, eye-tracking, and of course Usability testing. To simplify the key differences, Qualitative tells us the “<em class="markup--em markup--p-em">What?</em>” and Quantitative gives the “<em class="markup--em markup--p-em">Why?</em>”.</p>
<p class="graf graf--p">It’s best to employ as many research methods as possible, the restraints will be budget and resources. There really is no excuse not to perform any level of user research on your website.</p>
<p class="graf graf--p">Here we will focus on the Quantitative method of Usability testing, which is a relatively quick and cheap method, but one that we’ve seen first hand can generate incredibly useful and often surprising results.</p>
<p class="graf graf--p">It will often highlight the issues that may be preventing your app or website from reaching its full potential with your user base.</p>
<blockquote>
<p class="graf graf--p">Simply put, usability testing always pays off. We&#8217;ve never experienced a situation that hasn&#8217;t benefited from it.</p>
</blockquote>
<h3 class="graf graf--h3">Usability Testing Process</h3>
<p class="graf graf--p">When we perform a usability test, first we will gather a group of people who match the profile of the target audience, (for example this might be women between the ages of 30 and 55 who shop online regularly ), and ask them to perform a specific action on the website.</p>
<p class="graf graf--p">Each user will perform the test in a controlled and monitored environment. They will be asked some background questions first to identify their position in the target market, age/gender/ occupation/internet usage etc.</p>
<p class="graf graf--p">They will then be made aware that they will be recorded for the purpose of the test and that this recording will not be shared with anybody outside of the project. We will explain that we are testing a product and not the testers themselves, and we will ask them to articulate their thought process as they navigate through the process. This will often mean progressing through a website slower than they might normally do in order to articulate each step of the process.</p>
<p class="graf graf--p">Clear impartial objectives will be given, which will vary depending on the product being tested and the particular component of the website that the test needs to focus on. For example, this might be to find a certain product on the site and complete the checkout process in order to test the organisation of products on a site and the ease of the checkout process.</p>
<p class="graf graf--p">While the user is performing this task, we will record both the screen and their facial expression, and take detailed notes on each step and pain point encountered by the tester. This will often uncover interesting issues in the process that might not have been noticed by a client or designer that are very familiar with the product being tested.</p>
<p class="graf graf--p">It&#8217;s important that the user is not steered or asked any leading or rhetorical questions.</p>
<p class="graf graf--p">As a general rule, 5 separate usability tests are enough to provide accurate test data for comparison (<a class="markup--anchor markup--p-anchor" href="https://www.nngroup.com/articles/how-many-test-users/" target="_blank" rel="noopener noreferrer" data-href="https://www.nngroup.com/articles/how-many-test-users/">source</a>). Once the tests have been performed and compiled, patterns can be identified where issues are present. For example perhaps 4 of the 5 users had clear difficulty finding the product on the site, indicating that the product organisation and presentation would need to be looked at.</p>
<p class="graf graf--p">Information can then be gathered and pooled using methods such as card sorting which helps to group and prioritise issues.</p>
<p class="graf graf--p"><img loading="lazy" decoding="async" class="alignnone wp-image-2922 size-large" src="https://www.api.friday.ie/wp-content/uploads/2017/06/card-sorting-ux-friday-1024x768.jpg" alt="" width="1024" height="768" /><br />
<em>A Card Sorting session in action at Friday Agency studios.</em></p>
<h3 class="graf graf--h3">Cost</h3>
<p class="graf graf--p">Usability costs can be low if you can gather 5 friends or colleagues unfamiliar with the product to volunteer their time. You can also recruit existing customers by offering them a reward or voucher for their time. A usability test generally takes about an hour per tester.</p>
<p class="graf graf--p">In terms of the invaluable results that usability testing produces the investment is really quite small and should be considered as a key component of a digital product rather than an additional cost.</p>
<h3 class="graf graf--h3">Benefits</h3>
<p class="graf graf--p">Simply put, usability testing <em class="markup--em markup--p-em">always</em> pays off. We&#8217;ve never experienced a situation that hasn&#8217;t benefited from it.</p>
<p class="graf graf--p">Without usability testing, the design of a website will be dictated by a collaboration between designer and client. Both will approach the project with bias, be they aesthetic or assumptions on how the user will understand the product.</p>
<p class="graf graf--p">The only sure fire way to ensure that you can understand how your user is experiencing your service is to perform usability testing.</p>
<p class="graf graf--p">Analysing users behaviour, assumptions and pain points will reveal issues that you may not know existed, or didn’t think were relevant enough to warrant attention. Actually seeing a user&#8217;s frustration as they struggle to perform a task on the website can be a real eye-opener. If people are frustrated by your website they’re unlikely to proceed, and you could be losing customers because of some basic (and often easily fixed) usability issues.</p>
<p class="graf graf--p">We recently performed a usability test where users actually got so frustrated with the unclear pricing information on a website that they said they would abandon their cart in a real-life scenario. Seeing real-life users articulating such frustration gave us the undeniable proof that something needed to change here. In the end, it was a simple re-wording of the pricing information that completely transformed the user&#8217;s attitudes.</p>
<p class="graf graf--p">Usability testing will always indicate patterns and pinpoint the pain points of a users experience. That, in turn, will lead to solutions to resolve these pain points and ultimately lead to a good user experience for your customers.</p>


Usability Testing. Sounds fancy, why should we?

<p>Over the years we have approached UX design using a variety of different processes and techniques in order to perfect our service. That’s the beauty of working in a relatively new and fast-moving industry, to a certain extent you need to learn through trial and error, you learn from how other people work and take away what you think will work for you, your clients and their users. We are never finished learning and developing our process, we are always improving how we work.</p>
<h3>Not to be confused with content first design</h3>
<p>Before I launch into an article about content led responsive website design I want to be clear that this is not about content first design. Content first is a methodology that sits alongside form follows function. The structure and layout of a website or app will be determined by the content it is going to display. Designing software without content is a flawed process, if the content comes first then the layout and UX will flow from this. All clear? Great, let&#8217;s get to the topic in question.</p>
<h3>Mistakes of the past (and present)</h3>
<p>It was about 6 or 7 years ago when responsive web design became the standard. For us, the process of creating a great user experience across the variety of devices and screens sizes has improved dramatically. New technology has helped along the way with better usability testing, responsive grids, frameworks and a more fine-tuned process. Designers are getting better at this by working more closely with developers but there are 2 issues I am seeing come up again and again. The first is that there are UX designers still not designing for mobile first, I continue to be stunned by this fact and you can read my rant about this <a href="https://friday.ie/blog/designing-websites-mobile-first-for-a-better-user-experience/">here</a>. The only time you should start designing desktop first is when the majority of your users are using desktop PC’s and in most cases, this is a very small amount of websites.</p>
<p>The other key mistake I see UX designers making is designing websites using the same 3 fixed size templates for mobile, tablet and desktop. Mobile sizes have changed since the days of the 4&#8243; phones, there are phones the size of small tablets and tablets the size of big phones, tablets range from 7.9&#8243; all the way up to 12&#8243;, this is around where laptops and desktop screen begin and they can go beyond 80&#8243;. So in terms of pixels, you can be sure your website will be viewed on screens with any width from about 320 pixels all the way up to desktop monitors with 5,000 pixels running across the screen. Designing for 3 fixed sizes of mobile, tablet and desktop simply isn’t good enough anymore.</p>
<h3>What screen sizes do we design for?</h3>
<p>The answer is that you shouldn’t design for any screen size. The layout should be fluid and the content should decide the layout of the screen. When the content needs space, give it space. When the content won’t fit, change the layout. When the content is breaking, add a breakpoint. Start by designing for the smallest mobile (320 px) and see how the content adapts by quickly testing your designs with a wider and wider canvas until it reaches a point where it needs a new layout to adapt to the increase in screen space. Pick 3–4 break points from the smallest up to your max screen size. Using this technique your website will look good on all devices now and into the future. Use the screens real estate but also use the white space to highlight the content and calls to action.</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-2898" src="https://www.api.friday.ie/wp-content/uploads/2017/05/all.png" alt="" width="620" height="313" />
<p>The website examples above are displayed on a large 5.5&#8243; iPhone 7 Plus. The phones here are displaying website content that was designed for a much smaller 4&#8243; phone that was more popular maybe 3 or 4 years ago. You can see the content sits in a narrow single column where in some cases there is only about 50% of the screens real estate being utilised. If they let the content decide the layout you would have a much richer and more engaging user experience with less scrolling.</p>
<h3>Bootstrap and other frameworks</h3>
<p>Some developers have become reliant on frameworks with older pre-defined breakpoints like Bootstrap and Foundation. Unfortunately, these frameworks can age and become obsolete very quickly. You can change the breakpoints but people are lazy and tend to use the defaults that were set maybe 3 or 4 years ago. Good testing will highlight the issues very quickly and you will be found out but with little effort and good collaboration between designers and developers you can future proof a website in a way that won’t come back to haunt you.</p>
<p>Your clients probably won’t thank you, they probably won’t even notice but at least they won’t come back to you in 3 years time complaining that their website looks crap on the brand new 24 ft holographic cinema screen that they just set up in their back garden.</p>
<p>Let us know what you think, what&#8217;s your process and how do you work?</p>


Responsive UX Design: Let the content lead the layout

<p><em>Artificial Intelligence (or AI) is a bit of a buzz word these days. Although the subject of AI is very broad, for the purpose of this post I will just touch on a couple of familiar examples that have developed online in particular.</em></p>
<h3>Chatbots</h3>
<p>Chatbots are probably the most talked about area of AI at the moment and are popping up across a lot of social media and messaging applications.</p>
<h3>So what is a chatbot?</h3>
<p>The basic idea behind chatbots is that they mimic the conversation that you are most likely to have with a real human and thus automate the process that old style phone customer support / custom service provided.</p>
<p>Think of those annoying calls where you sat in a queue and were reminded that &#8216; Your call is important to us&#8217;.</p>
<p>With a chatbot, the whole question / answer process could be automated via their Facebook messenger, getting you the information you need, in no time at all.</p>
<p>That&#8217;s the concept in theory anyway.</p>
<p>Take Dominos pizza as an example. They are pushing the concept that you can, <a href="https://anyware.dominos.com/">order anyware</a> (sic), from their common social media apps e.g. Twitter, Facebook, etc.</p>
<p>Taco Bell are another company that are doing something similar via Slack &#8211; check out their <a href="https://www.tacobell.com/feed/tacobot">TacoBot</a>.</p>
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2737" src="https://www.api.friday.ie/wp-content/uploads/2017/02/tacobot_preview.gif" alt="" width="730" height="452" />
<p>As side from the food industry, the e-commerce main players, such as Amazon, are now investing heavily in <a href="https://aws.amazon.com/lex/">developing new bots</a> that will help your shopping experience.</p>
<p>Check out their AWS service, called <a href="https://www.youtube.com/watch?v=7uG9cuxNo5k">LEX</a> &#8211; it lets you build your own conversation bots.</p>
<h3>So that&#8217;s it&#8230; the bots are in charge?</h3>
<p>Not exactly. As good as the technology is becoming, chat bots are still far from being a perfect science.</p>
<p>The way they work is basically to learn the most common responses to give based on a bunch of data that it is thrown at them.</p>
<p>The more data they consume, the more they learn.</p>
<p>This concept falls short when the data that they are consuming is not the correct data.</p>
<p>The most recent high profile example of this was Microsoft Tay Twitter Bot. The bot was meant to learn from the people it chatted with on Twitter but bold users quickly learned they could corrupt it’s mind &#8211; <a href="http://www.theverge.com/2016/3/24/11297050/tay-microsoft-chatbot-racist">it became a racist in less than 24 hours</a>.</p>
<img loading="lazy" decoding="async" class="alignnone size-large wp-image-2735" src="https://www.api.friday.ie/wp-content/uploads/2017/02/tay-1024x576.png" alt="" width="1024" height="576" />
<p>&nbsp;</p>
<p>One major flaw with the current range of chatbots is that they are not good at understanding human emotions.</p>
<p>The guys over at Intercom have a <a href="https://blog.intercom.com/bots-versus-humans/">nice article</a> where they suggest that we shouldn&#8217;t be striving for a end result where people can&#8217;t tell the difference between chatbots and humans.</p>
<p>They feel that the bots would be great for answering simple, repetitive questions but if you need something trickier answered, then you should be routed to a real person.</p>
<p>They probably sum it up best by saying:</p>
<blockquote><p>Chatbots are best left to handling computation. Things that require empathy or emotion, on the other hand, are still better handled by a human.</p></blockquote>
<p>Check out their blog article and podcast for their take on <a href="https://blog.intercom.com/talking-trends-in-product-with-intercoms-paul-adams-and-emmet-connolly/">AI trends for 2017</a>.</p>
<h3>AI in website design</h3>
<p>Wouldn’t it be great if your website could design and build itself? Well obviously not so great for our line of business… but there are some companies that are attempting to go down that route.</p>
<p><a href="http://TheGrid.io">TheGrid.io</a> is one such company that promises that. The have an AI engine that will build your site design based on the content.</p>
<p>Initially there was a lot of people that signed up for their beta release but they were over a year late on launching the product which left a lot of people very unhappy.</p>
<p>I’ve had a look at some sites that were designed by the grid and honestly it doesn’t look like they will be creating a web revolution anytime soon.</p>
<p>Wix is another company that is moving into the AI design (or Artificial Design Intelligence) industry.</p>
<p>Wix has been around for a good while now and was used by a lot of people looking to get a site up and running fast. Their design options were pretty limited when they first launched but it looks like they have their foot on the gas when it comes to branching into the <a href="http://www.wix.com/blog/2016/06/wix-artificial-design-intelligence/">AI design area</a>.</p>
<p>As with anything that isn&#8217;t bespoke, there are always compromises.</p>
<p><iframe loading="lazy" title="Wix.com Introducing Wix ADI | Artificial Design Intelligence | The Future of Website Building" width="500" height="281" src="https://www.youtube.com/embed/YrERmaDZNl0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>AI in SEO &amp; Digital Marketing</h3>
<p>This is a huge area so I&#8217;m not going to go into too much detail but AI has already replaced the traditional online advertising and search methods.</p>
<p>Back in November 2015, Google announced that they will veer away from using algorithms that were hand-coded by developers and start using machine-learning AI to determine a sites SERP (Search engine results page) value. Check out <a href="https://montfort.io/google-rank-brain-what-is-it-and-how-will-it-affect-seo/">RankBrain</a> for more details about how this works.</p>
<p>In online advertising, AI is now being used to to help companies achieve more accurate and effective ad placement.</p>
<p>Traditional, marketers would measure clicks and conversions for their search or display ads and use customer actions to determine success.</p>
<p>With the help of AI and machine learning, the likes of Google and Facebook, are optimising our campaigns to help us get the most conversions out of our ads, without relying so much on guesswork.</p>
<h3>The future</h3>
<p>AI has come along way from the <a href="https://www.theatlantic.com/technology/archive/2015/06/clippy-the-microsoft-office-assistant-is-the-patriarchys-fault/396653/">Microsoft Clippy</a> days (remember him!)&#8230; but it is definitely going to be integrated in a lot more of the web over the next few years.</p>
<p>As with all new technologies, I don&#8217;t think it will be the end of the designer and developer but will rather gives us new tools to work with, allowing us to create more creative and innovation websites.</p>
<p>Tell us what you think in the comments section below.</p>


Artificial Intelligence In Website Design & Digital Marketing

<p><em>Usually, when we talk about user experience at Friday it’s about making content, screens and actions work seamlessly for users. But is our compulsive experience of using of screens (and in particular, smartphones) killing us?</em></p>
<p>Smartphone addiction is hardly a new phenomenon. I&#8217;m sure you&#8217;ve seen some stats: the average mobile phone user checks their device 150 times a day and 94% of 18-24 year-olds feel uncomfortable when not carrying their phones with them.</p>
<p>By technology’s nature, our smartphones alert us, let us share our personal content, they sometimes even ring with a call. We get edgy when other people hold our phones &#8211; in many ways they&#8217;ve become our conscious and subconscious.</p>
<p><em>Update July 2017: Nice post by Una Mullally and how she <a href="https://www.irishtimes.com/opinion/una-mullally-i-hate-my-iphone-but-i-cannot-live-without-it-1.3140876">cannot live without her iPhone</a>&#8230;</em></p>
<p>We know it’s a problem when:</p>
<ul>
<li>people are spending 3, 4 and 5 hours a day using their phones.</li>
<li>panic sets in when we&#8217;re without our phones or the battery dies.</li>
<li>we start to recognise issues and talk about cutting down our usage.</li>
</ul>
<p>The effects are also well known. We’re more and yet less connected than ever &#8211; socially networked, but less social in the &#8216;real world&#8217;. Look around you when you’re next on a bus or train commute &#8211; everyone has their head’s bowed.</p>
<p>And device use before and in bed has been proven to lead to poor sleep and insomnia &#8211; but yet we still do it.</p>
<p>https://youtube.com/watch?v=6Mwpmjf6cwE</p>
<h3>Danger</h3>
<p>Most importantly, we&#8217;ve developed the habit of using our phones in situations that are dangerous.</p>
<p>I was walking across the junction of O’Connell Street and Westmoreland Street in Dublin as I often do while going for the dart home. It’s a tricky mess of cars and people and made particularly dangerous recently by the <a href="http://www.luascrosscity.ie/">Luas Cross City</a> roadworks.</p>
<p>One day, a young boy was walking across the road, earplugs in, eyes glued to his phone and strolling carefree across the street against a red light. A taxi screeched to halt, inches from the boy and blared its horn. The kid looked up, mouthed an expletive and kept on walking returning to his screen.</p>
<p>Scenes like this play out every day now, but it can go wrong in the blink of an eye, as it did in the heartbreaking case of <a href="http://www.irishtimes.com/news/crime-and-law/courts/coroner-s-court/girl-15-texting-when-killed-by-truck-inquest-hears-1.2728389">Nikita Dunne</a>.</p>
<h3>Designing for Humans</h3>
<p>Insurance companies and car manufacturers are helping by introducing features like Car Mode which takes app features into safer voice-activated and touch-friendly controls.</p>
<p>Speaking Mind also has a nice app which essentially turns your smartphone into a radio, reading out content so you don’t have to look at it when driving or walking (currently only available in the US).</p>
<p>Ultimately I think we can help make a better user experience through technology but we can all play a part as people by making smarter choices.</p>
<p>I like how Rex Harrison puts it in <a href="http://www.bookdepository.com/The-UX-Book-Rex-Hartson-Pardh-S-Pyl/9780123852410?ref=grid-view">The UX Book</a>…</p>
<blockquote><p><em>&#8220;the focus should be on designing for the human rather than focussing on technology. ‘Human centred design&#8217; is a good description…&#8221;</em></p></blockquote>
<p>I leave you with another video, this one is from the artist Moby where he looks at the subject of smartphone addiction with music and clever animation.</p>
<p><iframe loading="lazy" title="Moby &amp; The Void Pacific Choir - &#039;Are You Lost In The World Like Me?&#039; (Official Video)" width="500" height="281" src="https://www.youtube.com/embed/VASywEuqFd8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>&nbsp;</p>


User experience – when the experience is too much

<figure id="f3d4" class="graf graf--figure graf-after--h3">
<div class="aspectRatioPlaceholder is-locked"></div>
</figure>
<p id="04a4" class="graf graf--p graf-after--figure">Design is going through a resurgence of appreciation and as a design focused agency, this makes us very happy! We are finally reaching a time where the value of design is starting to be realised by the business mainstream and this allow us to work using a smarter process that clients now buy into.</p>
<p class="graf graf--p graf-after--figure">Businesses from law firms and restaurants to grocery stores and banks are employing design in a way they never did before. The public are starting to demand it and business owners are starting to take notice.</p>
<img loading="lazy" decoding="async" class="alignnone wp-image-2423 size-full" src="https://www.api.friday.ie/wp-content/uploads/2016/11/0f0e3bd33a8d0f69eeddc793e61ef1b3.jpg" alt="design led companies " width="1280" height="800" />
<p>In the past, design had been undervalued. It was seen by some as a luxury, and was usually reserved for the few who understood its business potential. Businesses focused on their product or service and not so much on their brand or customer experience. They still made a profit and probably didn’t realise the potential of employing design through the user journey both offline or online.</p>
<h3 class="graf graf--h2 graf-after--p">When design becomes a priority</h3>
<div class="postArticle-content js-postField js-notesSource js-trackedPost" data-post-id="781339d22992" 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="0652" class="graf graf--p graf-after--h3">Imagine there was a burst pipe in the head office of your business. This is an emergency, right? You call a plumber immediately, don’t question them and pay whatever it takes to fix the issue as quickly as possible. This is a no brainer.</p>
<p id="cd35" class="graf graf--p graf-after--p">So, if a business has poor branding, design and in turn a substandard customer experience, why is this not seen as an such a pressing issue? Why do some businesses cut corners on design, leave their websites out of date and lack attention to detail in all corners of their business activity?</p>
<blockquote id="0298" class="graf graf--blockquote graf--startsWithDoubleQuote graf-after--p"><p><strong class="markup--strong markup--blockquote-strong">“If you think good design is expensive, you should look at the costs of bad design.”<br />
</strong> —  Dr Ralf Dieter Speth</p></blockquote>
<p id="2d9f" class="graf graf--p graf-after--blockquote">A business may still run and even make a profit without good design, if a business has never employed design thinking they will never know the added value it can bring.</p>
<p id="09e8" class="graf graf--p graf-after--p">I&#8217;m not saying you should throw money at design without questioning it, you need to be smart about what what your goals and objectives. Unlike a burst water pipe needing to be fixed, good design can be subjective. What may look ugly to one person, may look adequate to another or great to someone else. What is not as subjective is consistency of design application and this is where a lot of companies fall down.</p>
<p id="7f79" class="graf graf--p graf-after--p">A business can employ watered down design, maybe create a good brand/logo with brand guidelines and let the admin people apply the new branding across the company while probably ignoring the guidelines. Application of good design should always be managed by someone who has experience in and understands design. This is where a good agency comes into the mix.</p>
<h3 class="graf graf--h2 graf-after--p">Design led companies</h3>
<p id="56ff" class="graf graf--p graf-after--h3">In recent years design led companies have shown the world how design can enhance their brand, create loyalty and extract maximum potential from a product. Sometimes the product may not even be the best in terms of features but if its well designed with a focus on the detail of customer and user experience it can stand out from the competition. <a class="markup--anchor markup--p-anchor" href="https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/" target="_blank" rel="nofollow noopener" data-href="https://medium.com/r/?url=https%3A%2F%2Fwww.wired.com%2F2015%2F01%2Fairbnbs-new-head-design-believes-design-led-companies-dont-work%2F">AirB&amp;B is a good example</a>, they sell experiences and have perfected the customer experience as much as they can along the way through design and careful attention to detail.</p>
<p id="936e" class="graf graf--p graf-after--p">Since the 1970’s <a href="http://www.apple.com/" target="_blank" rel="noopener">Apple</a> has always been design-led, and this has come from the top down. Its a huge part of the company culture. From the days of Steve Jobs arrogant insistence on his vision being executed to the tiniest detail to today where Jonny Ive pretty much oversees all visual aspects of every Apple product in both software and hardware. Apple is now the biggest company in the world. You can be pretty sure there are few people working in Apple that do not have at least a basic appreciation of design.</p>
<p id="2951" class="graf graf--p graf-after--p">Due to the remarkable success of design-led companies, design has evolved beyond products. Design thinking is at the core of effective company strategy. Companies are learning how to think like designers, and apply design principles to all areas of their business and its workings. The only way this can happen is if it comes from the top. If a MD or CEO does not use design thinking it will be very hard to create a design led company culture.</p>
<h3 class="graf graf--h2 graf-after--p">Research led User Experience</h3>
<p id="adfc" class="graf graf--p graf-after--h3">While user experience (UX) has been around since the dawn of time its only in recent years that it has come to the forefront of digital design and a new process is still evolving. We are a research driven agency and its part of our culture to have all design decisions qualified through research. Large companies are now insisting on research driven user experience work to be carried out on their websites, Apps and UI’s before final visual design starts.</p>
<blockquote id="04c9" class="graf graf--blockquote graf--startsWithDoubleQuote graf-after--p"><p><strong class="markup--strong markup--blockquote-strong">“Like all forms of design, visual design is about problem solving, not about personal preference or unsupported opinion.”<br />
</strong><em class="markup--em markup--blockquote-em">— Bob Baxley</em></p></blockquote>
<p id="e1ff" class="graf graf--p graf-after--blockquote">When it comes to design everyone has an opinion, who is to say which opinion is the right one? In some cases it can often seem to be the person in the room with the loudest voice or the person paying the bill. As rude as it may sound we have often had to tell clients that it doesn’t matter what they think. The only people that matter are the users, the customers. They are the ones using the product so they are the only voice that really matters. Its not us as the design agency or the client, we are not the target market. Ignoring user feedback is a huge mistake but listening to their views and needs can give valuable insights.</p>
<figure id="1d42" class="graf graf--figure graf--layoutOutsetLeft 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*brD73cZp-Z0XW8kwoQzdFw.jpeg" data-width="948" data-height="487" data-action="zoom" data-action-value="1*brD73cZp-Z0XW8kwoQzdFw.jpeg" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="37"></canvas><img loading="lazy" decoding="async" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-2.medium.com/max/600/1*brD73cZp-Z0XW8kwoQzdFw.jpeg" alt="design led companies " width="600" height="308" data-src="https://cdn-images-2.medium.com/max/600/1*brD73cZp-Z0XW8kwoQzdFw.jpeg" /></div>
</div>
</figure>
<p id="927f" class="graf graf--p graf-after--figure">UX doesn’t have to be expensive or time consuming. With research there is nothing to debate, it creates proof and makes for quick decisions, meetings don’t turn into debates and the end product will always perform better.</p>
<blockquote id="c0bc" class="graf graf--blockquote graf--startsWithDoubleQuote graf-after--p"><p><strong class="markup--strong markup--blockquote-strong">“Design based on data brings us back to the essence of design and will leave out all unnecessary decoration.”<br />
</strong><em class="markup--em markup--blockquote-em">— Jeanne de Bont</em></p></blockquote>
<p id="e074" class="graf graf--p graf-after--blockquote">This culture is slowly starting to trickle down to SME’s and budgets are slowly increasing to allow the design work to be done the right way using a comprehensive process.</p>
<h3 class="graf graf--h2 graf-after--p">Iterative design</h3>
<p id="db97" class="graf graf--p graf-after--h3">Another great change in how the design process is changing is the iterative approach. We are coming to the end of the days where a product is created, the design work is done, its released everybody walks away and its left unchanged.</p>
<figure id="e515" 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*lQeBBPsNTRfjZWiXT6JgNQ.png" data-width="900" data-height="257" data-action="zoom" data-action-value="1*lQeBBPsNTRfjZWiXT6JgNQ.png" data-scroll="native"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="20"></canvas><img loading="lazy" decoding="async" class="progressiveMedia-image js-progressiveMedia-image alignnone" src="https://cdn-images-2.medium.com/max/800/1*lQeBBPsNTRfjZWiXT6JgNQ.png" alt="design led companies " width="800" height="228" data-src="https://cdn-images-2.medium.com/max/800/1*lQeBBPsNTRfjZWiXT6JgNQ.png" /></div>
</div>
</figure>
<p id="9195" class="graf graf--p graf-after--figure">The process of <strong class="markup--strong markup--p-strong">‘Research — Design — Test — Build’</strong> should be a repeating cycle of continuous development. You’ll never get it 100% right the first time. Even if you do how will you know unless you do the research and testing.</p>
<p id="6782" class="graf graf--p graf-after--p">Iterative design is in some respects starting to replace planning documentation. Iterative prototyping is a good route if you want your project to hit the ground running. Prototyping allows designers and developers to quickly transform their creative vision into a reality, and then perfect it through iterations. This approach can be a hard sell especially to clients who are used to the traditional waterfall way of working but it works and we have found that people quickly adjust and like working in this way. This approach can save clients time, money and resources. The process makes exploring what the user needs and how to get it to them generally much quicker than documentation.</p>
<p id="df97" class="graf graf--p graf-after--p">The future is bright and good design is starting to get the recognition it deserves. Its refreshing to see clients demanding that design done the right way, using right the process. Designers have spent years trying to push this process and its starting to become expected. Long may it last, at the moment it does feel like there is no turning back.</p>
<p id="f94a" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What do you think? Let us know in the comments section below.</strong></p>
</div>
</div>
</section>
</div>


Why design led companies are winning

<p>The IIA Net Visionary Awards celebrate what is most effective in digital technology &#8211; showcasing work that has transformed brands and organisations in Ireland.</p>
<p>Friday are delighted to have won in all 3 of our nominated categories at this year&#8217;s highly entertaining awards show in the RDS.</p>
<p>We picked up awards for Best Website for our work on the <a href="http://www.stpatrickscathedral.ie">St Patrick&#8217;s Cathedral</a> website, Best Social Media for the satirical General Election &#8216;Tinder&#8217; app, <a href="http://www.tder.ie">TDer.ie</a> and Best eCommerce for our work on the new user experience for <a href="http://www.iclothing.com">iClothing.com</a>.</p>
<blockquote><p><em>&#8220;We&#8217;re delighted to get recognition in the 3 categories, and especially against the calibre of other nominees.&#8221; said David Jackson, Director of User Experience. &#8220;We have to say particular thanks to the teams at St Patrick&#8217;s Cathedral and iClothing for trusting Friday to deliver the vision&#8221;.</em></p></blockquote>
<img loading="lazy" decoding="async" class="alignnone wp-image-2372 size-full" src="https://www.api.friday.ie/wp-content/uploads/2016/10/IMG_9760-e1476102588498.jpg" alt="IIA Net Visionary Awards Winners 2016" width="1276" height="1116" />
<p>IIA CEO Joan Mulvihill was worthy winner of the Net Visionary of the Year 2016. We congratulate Joan and wish her the best of luck as she steps down from 7 great years at the organisation.</p>
<p>Friday&#8217;s winners on the night were:</p>
<ul>
<li>Best Website &#8211; &#8220;Most joyous to look at and splendid to use&#8221; for <a href="http://www.stpatrickscathedral.ie" target="_blank" rel="noopener">St Patrick&#8217;s Cathedral</a>.</li>
<li>Best Social Media Campaign &#8211; for General Election satirical online campaign &#8216;<a href="http://www.tder.ie" target="_blank" rel="noopener">TDer</a>&#8216;.</li>
<li>Best eCommerce Execution by a Retailer &#8211; for <a href="http://www.iclothing.com" target="_blank" rel="noopener">iClothing.com</a>.</li>
</ul>
<blockquote><p><em>Graham Carroll, Client Services Director at Friday added: &#8220;Part of our manifesto at Friday is to change the fortunes of the organisations we work with. It&#8217;s brilliant when our work is recognised &#8211; proving the effectiveness of user experience and creativity is really important to us and our clients success.&#8221;</em></p></blockquote>
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2376" src="https://www.api.friday.ie/wp-content/uploads/2016/10/FullSizeRender-1.jpg" alt="IIA Net Visionary Awards Winners Friday Agency" width="640" height="640" />
<p>&nbsp;</p>
<p>&nbsp;</p>
<blockquote class="twitter-tweet" data-lang="en">
<p dir="ltr" lang="en" style="text-align: center;">The <a href="https://twitter.com/bonkers_ie">@bonkers_ie</a> Best eCommerce <a href="https://twitter.com/hashtag/DotieNetVis?src=hash">#DotieNetVis</a> award goes to <a href="https://twitter.com/iclothing">@iclothing</a> ! <a href="https://t.co/YScz1bNFo1">pic.twitter.com/YScz1bNFo1</a></p>
<p style="text-align: center;">— Irish Internet Assoc (@iia) <a href="https://twitter.com/iia/status/784499785189494784">October 7, 2016</a></p>
</blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<blockquote class="twitter-tweet" data-lang="en">
<p dir="ltr" lang="en" style="text-align: center;">Congratulations to <a href="https://twitter.com/FridayAgency">@FridayAgency</a> winner of Best Website Design for <a href="https://t.co/JxIk9GxXD5">https://t.co/JxIk9GxXD5</a> at the <a href="https://twitter.com/hashtag/DotieNetVissponsored?src=hash">#DotieNetVissponsored</a> by <a href="https://twitter.com/blacknight">@blacknight</a></p>
<p style="text-align: center;">— IE Domain Registry (@IEDR_dot_ie) <a href="https://twitter.com/IEDR_dot_ie/status/784497099740151808">October 7, 2016</a></p>
</blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<blockquote class="twitter-tweet" data-lang="en">
<p dir="ltr" lang="en" style="text-align: center;">The <a href="https://twitter.com/blacknight">@blacknight</a> Best Website Design goes to <a href="https://twitter.com/FridayAgency">@FridayAgency</a> at <a href="https://twitter.com/hashtag/DotieNetVis?src=hash">#DotieNetVis</a> ! well done guys ! <a href="https://t.co/pKHXXd1W6f">pic.twitter.com/pKHXXd1W6f</a></p>
<p style="text-align: center;">— Irish Internet Assoc (@iia) <a href="https://twitter.com/iia/status/784497128680857600">October 7, 2016</a></p>
</blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>


Friday score hat-trick at the IIA Net Visionary Awards

<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 loading="lazy" decoding="async" class="aligncenter wp-image-2275 " src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter size-medium wp-image-2301" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-2308 size-large" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-2311 " src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter size-large wp-image-2307" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter size-full wp-image-2303" src="https://www.api.friday.ie/wp-content/uploads/2016/09/Prefernce-instruction.png" alt="Prefernce instruction" width="349" height="270" />
<p>&nbsp;</p>
<h4>Test #3:</h4>
<h3><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-2302" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-2316" src="https://www.api.friday.ie/wp-content/uploads/2016/09/burgertest-results.png" alt="burgertest results" width="632" height="417" />
<p>&nbsp;</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-2294" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter size-full wp-image-2295" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-2317" src="https://www.api.friday.ie/wp-content/uploads/2016/09/top-nav-results.png" alt="top nav results" width="746" height="406" />
<p>&nbsp;</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-2297" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-2315" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-2300" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter size-full wp-image-2299" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" 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 loading="lazy" decoding="async" 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 loading="lazy" decoding="async" 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 loading="lazy" decoding="async" 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 loading="lazy" decoding="async" 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 loading="lazy" decoding="async" 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 loading="lazy" decoding="async" 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>Everything UX designers do should be based around making the experience for users as fast as possible.</p></blockquote>
<p>If you were to boil down the purpose of a UX designer into one concise sentence it should be “A UI designer who works to save the end user time”. It’s as simple as that, everything designers do should be based around making the experience for users as fast as possible. If it’s not easy, intutive, simple, clean and clear its not going to be quick.</p>
<p>Users will complain if what they want to do online takes longer then expected and things will only take a long time if the user doesn’t understand something or cannot find what they are looking for.</p>
<p>I could write a book on this but to make things easy and quick for the people reading this I am just going to list 10 mistakes UX designers make that waste your time and create a bad user experience.</p>
<h3>1. Newsletter popups</h3>
<img loading="lazy" decoding="async" class="alignnone wp-image-2153 size-full" src="https://www.api.friday.ie/wp-content/uploads/2016/06/newspop.jpg" alt="UX time wasting - news popup" width="673" height="340" />
<p>I’m starting with my biggest gripe, I go to a website to find out about a product and before I can blink a giant popup covers the homepage asking me to signup for the company newsletter so I don’t miss out on anything. I’m already missing out on what I came to the website for. First impressions last and the first thing I am presented with is slightly annoying me. This is a guess but I don’t think I’d be exaggerating by saying that I’m not alone here, dare I say 99% of users would agree with me? You can still have a newsletter signup on your homepage, just don’t force me to interact with it if I don’t want it.</p>
<h3>2. Instructional overlays</h3>
<img loading="lazy" decoding="async" class="alignright wp-image-2151 size-medium" src="https://www.api.friday.ie/wp-content/uploads/2016/06/instructional-169x300.jpg" alt="UX time wasting - instructional overlay" width="169" height="300" />
<p>Often the first time we open a new mobile app a semi-transparent overlay appears over the UI giving us instructions on how it use it. Sometimes this can be necessary but not always if the UI was designed to be intuitive. Before you add something like this ask yourself why this is necessary and if it can be avoided by tweaking the UI to make it more user friendly.</p>
<p>Mandatory fields that don’t need to be<br />
Every now and again I fill out a form that has mandatory fields that I just can’t fill out for various reasons, make sure that any mandatory field you add to a form is both required and applicable to all users. Anyone from Ireland will tell you that we didn’t have postcodes until last year, yet every form online requires a Postcode.</p>
<h3>3. Meaningless icons</h3>
<img loading="lazy" decoding="async" class="alignnone wp-image-2150 size-full" src="https://www.api.friday.ie/wp-content/uploads/2016/06/icons.png" alt="UX time wasting - meaningless icons" width="672" height="65" />
<p>A picture says a thousand words… icons are great and can be used to create a really intuitive, visual and uncluttered UI but key to this is that users understand the meaning of the icons you use. Users have a limited visual vocabulary when it comes to icons so only use icons that are obvious and everyone understands. Nobody will interact with an icon if thye don’t get it. Stick to the conventions and it should be fine. A fancy navigation may make your site or App stand out, but it may confuse users.</p>
<h3>4. Sliders that don’t slide with touch</h3>
<img loading="lazy" decoding="async" class="alignnone wp-image-2154 size-full" src="https://www.api.friday.ie/wp-content/uploads/2016/06/OwlCarousel.jpg" alt="UX time wasting - Carousel" width="590" height="289" />
<p>Sliders are often overused but are a fact of life on websites, especially on mobile where sometimes all the content we want to present to users won’t fit on one page without it looking ridiculous. On desktop we are used to clicking a little arrow to move to the next slide but sometimes on mobile these arrows are too small for our big fat fingers, mobile uses multitouch so I should be able to slide the slider with my finger, there is no excuse for this not being enabled.</p>
<h3>5. Asking users for too much information</h3>
<p>Users are lazy and impatient when they are online. When asking users to fill out a form only ask them for the information you really need, most of the time its just their name and email. Ask yourself, do you really need their home address and phone number, will you be calling them or posting anything to them? Users are far for likely to fill out a form if its quick and easy.</p>
<h3>6. Make the most common action the most obvious</h3>
<p>Users often move around a website without reading everything they click, instead, they click what they feel is or should be obvious. See below, this is a payment popup that I interact with regularly for a service we use. Every time I pick Visa and MasterCard from the dropdown and I intuitively click on ‘Close’ because it looks like it should be the ‘Pay now’ button, it&#8217;s bigger, darker and stands out. I have literally made the same mistake dozens of times over the last year or two.</p>
<p>A small ‘x’ in the top right would work for close and making the big grey ‘Close’ button a big green ‘Pay Now’ button would make a big difference to the UX, problem solved!</p>
<h3>7. Canned email replies</h3>
<p>Keep auto responses to a minimum. Sometimes they help but I don’t need you to send me an email everytime I do something online. For example when I unsubscribe from a email list and I get sent an email to say I have unsubscribed from the list, need I say any more?</p>
<h3>8. Use video but not exclusively</h3>
<p>Online video is very powerful, with broadband and mobile data speeds getting better, video can easily be accessed quickly by more and more people. I see lots of businesses using video exclusively on their websites to explain their product or service and not having much text alternative for those who don’t want to or can’t watch a video.</p>
<p>Your users could be on a bus or in a office without headphones, they might not have the bandwidth or might just want a few lines of text summarising what you do instead of a 3 minute video presentation.</p>
<h3>9. For input, show the appropriate keyboard on mobile</h3>
<img loading="lazy" decoding="async" class="alignnone wp-image-2152 size-full" src="https://www.api.friday.ie/wp-content/uploads/2016/06/keys.jpg" alt="UX time wasting - mobile keyboards" width="672" height="117" />
<p>This one is easy. You know when you are on a touch devise and you tap a text entry field and your keyboard pops up? If you tap into a field that requires a number but a text keyboard pops up, you have to find the buttons that switches the keyboard to numbers, all a bit painful. A simple line of code on the form field stating the input type <em>&lt;input type=”email”&gt;</em> would make the correct keyboard popup and keep everyone happy.</p>
<p>A well built website with a bit of attention to detail from the developers will make sure the appropriate keyboard pops up to make it faster for inputting text, email addresses or numbers. Developers, all you need to know is <a href="http://mobileinputtypes.com">here</a>.</p>
<h3>10. Links too small for your fingers</h3>
<p>Responsive websites have been around for a long time at this point but we still come across websites where the links have tiny tap targets that are just too small for our fingers. Fingers are just not as precise as a mouse pointer is on desktop. The rule of thumb (pardon the pun) is that are area around a tap hotspot should be at least 44 x 44px. Please, don&#8217;t make me use my pinky!</p>
<p>Thats it, I could go on, its good to get this stuff out of your system, let us know how UX designers are wasting your time in the comments below.</p>


10 ways UX designers can waste your time

<p><em><span style="font-weight: 400;">Let&#8217;s be honest &#8211; most web users don&#8217;t like filling out forms, but they are crucial to the way we interact online. </span></em></p>
<p><span style="font-weight: 400;">Forms are an important part of user experience and are often directly attached to business goals and conversions like buying something, signing up for a newsletter, registering for an event or submitting an enquiry. </span></p>
<p><span style="font-weight: 400;">I often run into websites, apps and pages that get everything right and then fail at the last hurdle with their forms.</span></p>
<p><span style="font-weight: 400;">It is so important to remove friction from the process and guide the user in a way that makes the experience as user-friendly as possible.</span></p>
<p><span style="font-weight: 400;">So I want to give a few tips and demonstrate the best way to validate, handle errors and ultimately increase conversion.</span></p>
<h3>1. Instant negative feedback</h3>
<p>I find it quite frustrating seeing all those red input fields when a form submission has errors. I would recommend saying something nice rather than pointing what&#8217;s wrong from the outset.</p>
<h3 style="font-weight: 400;"><strong>DON’T</strong></h3>
<p><span style="font-weight: 400;">&#8230;tell the user they are wrong from the very first moment they start filling out the field. Email fields are a common example, it comes across as a bit rude saying that you have incorrectly entered your email address when you haven&#8217;t finished typing.</span><br />
<video src="https://www.api.friday.ie/wp-content/uploads/2016/06/badfeedback2.mov" autoplay="autoplay" loop="loop" width="450" height="auto"></video></p>
<h4 style="font-weight: 400;"><strong>DO</strong></h4>
<p><span style="font-weight: 400;">&#8230;say something nice instead. Perhaps use a green border, a tick next to it, or even a little message.</span><br />
<video src="https://www.api.friday.ie/wp-content/uploads/2016/06/goodfeedback.mov" autoplay="autoplay" loop="loop" width="330" height="auto"></video></p>
<h3>2. Immediate feedback</h3>
<p>The timing of validation is very important. With only a few tweaks the form suddenly seems much more intelligent. I would suggest initial validation when the user has moved the cursor from the field.</p>
<h4 style="font-weight: 400;"><strong>DON’T</strong></h4>
<p>&#8230;tell the user the field is correct<strong> </strong>when they are still typing. It&#8217;s much better to let the user signal they have finished.<br />
<video src="https://www.api.friday.ie/wp-content/uploads/2016/06/timingbad1.mov" autoplay="autoplay" loop="loop" width="250" height="auto"></video></p>
<h4 style="font-weight: 400;"><strong>DO</strong></h4>
<p>&#8230;wait until the user tabs or clicks onto the next field. After that you can provide them with positive or negative feedback.<br />
<video src="https://www.api.friday.ie/wp-content/uploads/2016/06/timinggood.mov" autoplay="autoplay" loop="loop" width="260" height="auto"></video></p>
<h3>3. No feedback when I update a field</h3>
<p>There is one exception where <em>immediate feedback</em> validation is not the best practise. It&#8217;s when the field has already been validated and the user decides to change the text they input. In this case I would recommend giving feedback immediately.</p>
<h4 style="font-weight: 400;"><strong>DON’T</strong></h4>
<p>&#8230;ignore updated input text, for example, if there is already a feedback message displayed it might not update once the user has edited the field. Take phone numbers for example:<br />
<video src="https://www.api.friday.ie/wp-content/uploads/2016/06/subsequentfeedbackbad.mov" autoplay="autoplay" loop="loop" width="420" height="auto"></video></p>
<h4 style="font-weight: 400;"><strong>DO</strong></h4>
<p>&#8230;update the feedback once the field has been edited.<br />
<video src="https://www.api.friday.ie/wp-content/uploads/2016/06/subsequentfeedback.mov" autoplay="autoplay" loop="loop" width="420" height="auto"></video></p>
<h3>4. Unhelpful error messages</h3>
<p><span style="font-weight: 400;">If validation fails, the application should provide a clear, short message containing ways to correct the errors. Clearly indicating which fields have errors is essential. Here you can provide intelligent response messages that disappear when the requirements are met.</span></p>
<h4><strong>DON’T</strong></h4>
<p><span style="font-weight: 400;">&#8230;let the user guess what&#8217;s missing.</span><br />
<video src="https://www.api.friday.ie/wp-content/uploads/2016/06/passwordbad.mov" autoplay="autoplay" loop="loop" width="450" height="auto"></video></p>
<h4><strong>DO</strong></h4>
<p><span style="font-weight: 400;">&#8230;help the user fill out the form correctly. Here&#8217;s how instant feedback can indicate whether the user has created a strong enough password.</span><br />
<video src="https://www.api.friday.ie/wp-content/uploads/2016/06/passwordgood.mov" autoplay="autoplay" loop="loop" width="450" height="auto"></video></p>
<h3>5. Confusing server side validation</h3>
<p><span style="font-weight: 400;">Server Side validation should always be done, as it is very important for security reasons. Client side validation can be bypassed by hackers. </span><span style="font-weight: 400;">Sometimes a form will spit back error messages that are unclear,<strong> </strong>try to make them as accurate as possible.</span></p>
<h4><strong>DON’T</strong></h4>
<p><span style="font-weight: 400;">&#8230;provide unclear error messages, where the user is not sure which field is wrong.</span></p>
<a href="https://www.api.friday.ie/wp-content/uploads/2016/06/Screen-Shot-2016-06-10-at-11.58.04.png"><img decoding="async" class="alignnone size-medium wp-image-2061" src="https://www.api.friday.ie/wp-content/uploads/2016/06/Screen-Shot-2016-06-10-at-11.58.04.png" alt="Screen Shot 2016-06-10 at 11.58.04" width="600" height="auto" /></a>
<h4><strong>DO</strong></h4>
<p><span style="font-weight: 400;">&#8230;give the user some hints next to the field how to fill it out correctly.</span></p>
<a href="https://www.api.friday.ie/wp-content/uploads/2016/06/Screen-Shot-2016-06-10-at-11.52.36.png"><img decoding="async" class="alignnone size-medium wp-image-2062" src="https://www.api.friday.ie/wp-content/uploads/2016/06/Screen-Shot-2016-06-10-at-11.52.36.png" alt="Form Validation" width="600" height="auto" /></a>
<blockquote><p>&nbsp;</p>
<p>When designing registration forms, keep in mind that they are for the user and the smoother the registration process, the more delighted your customers will be.</p>
<p><a href="http://designmodo.com/ux-tips-registration-forms/">Armen Ghazarian</a></p></blockquote>
<p>&nbsp;</p>
<p>If you need help with form and conversion optimisation <a href="https://friday.ie/contact/"><strong>get in touch</strong></a> with us, we are happy to help :)</p>
<p>[ratings]</p>


5 Things I Hate about Form Validation

<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 loading="lazy" decoding="async" class="aligncenter wp-image-1974 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1975 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter size-full wp-image-1979" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1984 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" width="978" height="445" class="aligncenter size-full wp-image-7813" src="https://www.api.friday.ie/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1.png" alt="" srcset="https://www.api.friday.ie/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1.png 978w, https://www.api.friday.ie/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-250x114.png 250w, https://www.api.friday.ie/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-768x349.png 768w, https://www.api.friday.ie/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-700x319.png 700w, https://www.api.friday.ie/wp-content/uploads/2016/05/Screen-Shot-2016-05-19-at-14.59.16-1-120x55.png 120w, https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1985 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1980 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1989 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1990 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1982 size-full" src="https://www.api.friday.ie/wp-content/uploads/2016/05/color-contrast.png" alt="color contrast" width="600" height="360" />
<p>&nbsp;</p>
<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1981" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1983 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1987 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="aligncenter wp-image-1986 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1838" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft wp-image-1823 size-full" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1846" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1848" src="https://www.api.friday.ie/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

<h3 class="graf--h4">It’s 2016 — how users behave</h3>
<p class="graf--p">I want to cover a topic that Ash already <a href="https://friday.ie/blog/mobile-first-thinking/">touched off last year</a>, the reason I&#8217;m writing a similar post it is because I still see designers taking the wrong approach to design. We are now 2 years past the tipping point where mobile web browsing overtook desktop PC’s as the most common way users access websites. In 2015 mobile usage has soared above 2 billion users, that&#8217;s over a quarter of the world’s population. By now, every website should be mobile friendly (<a class="markup--anchor markup--p-anchor" href="https://googlewebmastercentral.blogspot.ie/2015/04/faqs-april-21st-mobile-friendly.html" data-href="https://googlewebmastercentral.blogspot.ie/2015/04/faqs-april-21st-mobile-friendly.html">or Google will penalise you in its search rankings</a>), this is a given but in a lot of cases, the process used to design a responsive website is the same as it was 5 or 6 years ago.</p>
<p class="graf--p">The old ways die hard, creating a mobile-friendly responsive website has long been part of the web design and development process but how designers approach designing for the best possible user experience hasn’t changed much. A designer might start designing a website for desktop browsers first, even though it is not the most common way most users will access the website — it&#8217;s just how they have always done it.</p>
<p class="graf--p">Some designers use a website design process called (*buzzword warning!!) ‘Graceful Degradation’. Using this approach they start by designing a website for the largest possible screen size that will contain all content, images, features and functionality for the best possible user experience in a desktop browser. They then start shifting and removing page elements as they work through designing for smaller screens and slower bandwidth, only being careful to keep the website functional. It’s almost inevitable that the mobile website will be a watered down, compromised user experience when placed beside the desktop website.</p>
<h3 class="graf--h4">New year, new ways</h3>
<p class="graf--p">It’s a new year and a good reason to put learnings from life experience into practice. Mobile first design is in my view the only way to create the most responsive websites. I have a new buzzword for you, ‘Progressive enhancement’. Progressive enhancement is where you put your best foot forward on the mobile platforms, providing users with an amazing experience that both looks great and functions perfectly on their device, serving lean and concise content with the features and functionality they need.</p>
<p class="graf--p">The next step is to bring this design to the desktop, unlike graceful degradation where the designer decides on what to cut out to water down the product they can instead work on making it even more robust.</p>
<p class="graf--p">We’ve all heard the expression ‘content is king’, well this is very much the case when it comes to mobile <a class="markup--anchor markup--p-anchor" href="https://friday.ie/expertise/user-experience/ux-design-dublin/" data-href="https://www.api.friday.ie/ux-design-dublin/">UX design</a>, the content will inform the layout, functionality and site style. Mobile first often lends itself to a linear layout, designing mobile first will force a designer to make important decisions about the content hierarchy and what is to be displayed or hidden. The most important content is usually on the top of the screen, followed by the next and so on. This is unlike a desktop approach where you can put two blocks of content side by side for equal impact.</p>
<p class="graf--p">Often we see websites full of waffle, too much text to crawl through, people don’t read websites, they scan them for relevant information. Who wants to read a 400 word mission statement on your homepage? The mobile first approach will help us keep content in check simply because there simply isn’t enough room for waffle, this can only have a positive effect on the user experience across all devices.</p>
<p class="graf--p">The mobile-first principle can also apply to how your site is built from a technical point of view. Using the old ways we would have loaded all the content from the full desktop page and hidden what we are not showing on mobile, this results is a unnecessarily long load time. Using a mobile-first development approach we load only what we need on the mobile platforms with the rest loading on an as-needed basis. This leads to faster load times and a better user experience.</p>
<p class="graf--p">Progressive Enhancement is not religion, it works in a lot of cases of UX web design but there are always exceptions and we look at every project individually before deciding on an approach. For example a recent project we worked on was designing a new responsive MS SharePoint intranet for AIB, a resource that would always be accessed primarily on desktop PC’s by over 15,000 users on a daily basis so obviously we used a desktop first approach.</p>
<h3 class="graf--h4">The challenge</h3>
<p class="graf--p">The aim of mobile first responsive web design is not to reverse the underlying problem, creating a poor desktop experience instead of a poor mobile experience. Both mobile and desktop solutions will benefit, your users will be happy and sales, engagement and goal conversions will follow.</p>
<p class="graf--p">Designing for mobile first is far from a natural transition, it&#8217;s not comfortable. Designing on mobile is restrictive in terms of space but its a challenge that needs discipline, especially when it comes to content, it&#8217;s not easy but it does give you a better result in the end. If you are not convinced, give it a go and let us know what you think.</p>


Designing websites mobile first for a better user experience

<blockquote><p><em>We&#8217;re all users. And the experience we have when we interact with products, devices, and screens plays a vital role in their success. </em></p></blockquote>
<p>For me writing about User Experience is both exciting and slightly unnerving.</p>
<p>It’s exciting because, more than ever, the user experience process is critical to effective digital execution across the full gamut of devices and screens.</p>
<p>There’s also a growing expectation from clients to solve their marketing problems through design and user experience.</p>
<p>It’s slightly unnerving because although Friday is fast establishing a reputation as a specialist UX marketing agency, there are no definitive industry standards yet to which I can claim us to be experts.</p>
<h3>The Apple Effect</h3>
<p>In many ways, Apple has set the standard in user experience.</p>
<p>There is often debate around whether Apple’s business model is hardware or software but for me, their entire business centres around user experience.</p>
<p>From their products, software, their stores and their packaging &#8211; looking good and working well has helped to create an unrivalled trust and desire for their brand.</p>
<p>And it has propelled Apple’s rise to becoming one of the biggest companies in the world.</p>
<img loading="lazy" decoding="async" class="p-image-1560" src="https://www.api.friday.ie/wp-content/uploads/2015/12/UX3.jpg" alt="user experience" width="767" height="318" /><br />
<em>According to our analytics, there&#8217;s a 42% chance that you&#8217;re reading this post on an Apple device</em>
<div>
<h3>Why is UX so important?</h3>
<p>As an agency, much of our work history comes from designing and building websites and digital experiences for the screen.</p>
<p>While we have always been always passionate about user experience, in the past quite often things like costs, deadlines, and a lack of understanding client-side meant we often had to compromise on the UX process.</p>
</div>
<p>All projects should allow for at the very least a basic level of real-world user testing as part of the process. Although not ideal, where deadlines or budget does not allow us to follow a comprehensive process, we use our experience to validate planning and design decisions.</p>
<div>
<p>At our core, we want to deliver a usability that works for users and delivers on our clients&#8217; marketing goals, that&#8217;s clear. But having a good user experience is no longer a choice: users demand it and the success of your business can hinge on it.</p>
<p>There is more to UX design than it generally sounding like a good idea and creating some wireframes. People are &#8216;<a href="https://en.wikipedia.org/wiki/Cognitive_miser" target="_blank" rel="noopener">cognitive misers</a>&#8216; &#8211; they become accustomed to things working to the point that they don&#8217;t really need to think about it. Driving a car, riding a bike, and using a smartphone app or a website.</p>
<p>In the digital world, when standards have been set so high for technology and content; users, customers, and stakeholders expect that standard every day.</p>
<p>Take booking an airline flight. Whatever the airline, you have expectations that their website will load quickly, that it&#8217;s visual style, content and layout will look and feel right, and that you can easily find and book a flight destination without too much effort.</p>
<p>And provided the price is right a not unreasonable expectation. Right?</p>
<p>But it&#8217;s when something goes wrong with the experience, trust breaks down (or is never established). We have all been there and been frustrated by it. Slow to load, poor navigation, errors&#8230; grrr!</p>
<p>Our expectations are set high and when they&#8217;re not met, we can take ourselves elsewhere in a matter of seconds.</p>
<h3>The UX Process</h3>
<blockquote><p><em>“People’s behaviour makes sense if you think about it in terms of their goals, needs, and motives.”</em></p></blockquote>
<p>—Thomas Mann</p>
<p>This is not a post detailing UX process (this will follow soon) but a brief look at key steps in a typical design project that are used to deliver a successful user experience. It is important that clients not only understand the process but then play an active part in it and sign off at each stage.</p>
<p>The following details the process that Friday uses to deliver a digital solution: for example a website, or a smartphone app.</p>
<ul>
<li><strong>Planning &amp; Strategy</strong><br />
Planning is key and provides the rationale for the approach taken throughout the rest of the process. It will include a series of workshops to understand business requirements, user and technology needs. This stage can include a range of steps including research, user surveys, focus groups, mood boards, analytics, content review &amp; competitive analysis.</li>
<li><strong>Wireframing</strong><br />
Visual work starts by taking the planning output and using information architecture, sketches to build wireframe layouts. In some cases, user testing can start here by creating interactive high-level UX prototypes.</li>
<li><strong>Design</strong><br />
At the design stage artwork is created for all key users scenarios in all relevant placements, devices or screens.</li>
<li><strong>Build</strong><br />
During the build stage, a beta or prototype is developed based on the visuals and functionality of the design.</li>
<li><strong>QA</strong><br />
When the build process is complete, the project moves to quality assurance and testing where it is tested to ensure it&#8217;s visual is sound and it works as planned. User testing will often occur here.</li>
<li><strong>Feedback / UAT</strong><br />
Before launch, the project is opened up to the client for user acceptance testing where it is again tested and any issues addressed before release.</li>
</ul>
<h3>Trust</h3>
<p>As users, the trust we have in our ability to use something has a critical role in whether or not we make a decision to continue using it, engage or buy it.</p>
<p>Trust must be established quickly, or users will quickly abandon your product, service or content. As businesses, it&#8217;s important to understand trust and the role trustworthiness plays in user experience and particularly when it comes to conversion rates.</p>
<p>And we&#8217;ve seen a clear shift in the demand for UX planning and design from clients as they now understand it&#8217;s advantage and it&#8217;s value.</p>
<div class="video-container">
<p>&nbsp;</p>
</div>
</div>


User Experience – Designing for Trust

<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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1441" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1439" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1449" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1445" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1443" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1448" src="https://www.api.friday.ie/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 loading="lazy" decoding="async" class="alignleft size-full wp-image-1447" src="https://www.api.friday.ie/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>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 loading="lazy" decoding="async" class="alignnone wp-image-1007 size-full" title="User experience stat" src="https://www.api.friday.ie/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>
