Measuring Websites With Mobile-First Optimization Tools
Performance on mobile can be particularly challenging: underpowered devices, slow networks, and poor connections are some of those challenges. With more and more users migrating to mobile, the rewards for mobile optimization are great. Most workflows have already adopted mobile-first design and development strategies, and it’s time to apply a similar mindset to performance.
In this article, we’ll take a look at studies linking page speed to real-world metrics, and discuss the specific ways mobile performance impacts your site. Then we’ll explore benchmarking tools you can use to measure your website’s mobile performance. Finally, we’ll work with tools to help identify and remove the code debt that bloats and weighs down your site.
How would you design a responsive car configurator? How would you deal with accessibility, navigation, real-time previews, interaction and performance? Let’s figure it out. Read article →
Why Performance Matters
The benefits of performance optimization are well-documented. In short, performance matters because users prefer faster websites. But it’s more than a qualitative assumption about user experience. There are a variety of studies that directly link reduced load times to increased conversion and revenue, such as the now decade-old Amazon study that showed each 100ms of latency led to a 1% drop in sales.
Page Speed, Bounce Rate & Conversion
In the data world, poor performance leads to an increased bounce rate. And in the mobile world that bounce rate may occur sooner than you think. A recent study shows that 53% of mobile users abandon a site that takes more than 3 seconds to load.
That means if your site loads in 3.5 seconds, over half of your potential users are leaving (and most likely visiting a competitor). That may be tough to swallow, but it is as much a problem as it is an opportunity. If you can get your site to load more quickly, you are potentially doubling your conversion. And if your conversion is even indirectly linked to profits, you’re doubling your revenue.
SEO And Social Media
Beyond reduced conversion, slow load times create secondary effects that diminish your inbound traffic. Search engines already use page speed in their ranking algorithms, bubbling faster sites to the top. Additionally, Google is specifically factoring mobile speed for mobile searches as of July 2018.
Social media outlets have begun factoring page speed in their algorithms as well. In August 2017, Facebook announced that it would roll out specific changes to the newsfeed algorithm for mobile devices. These changes include page speed as a factor, which means that slow websites will see a decline in Facebook impressions, and in turn a decline in visitors from that source.
Search engines and social media companies aren’t punishing slow websites on a whim, they’ve made a calculated decision to improve the experience for their users. If two websites have effectively the same content, wouldn’t you rather visit one that loads faster?
Many websites depend on search engines and social media for a large portion of their traffic. The slowest of these will have an exacerbated problem, with a reduced number of visitors coming to their site, and over half of those visitors subsequently abandoning.
If the prognosis sounds alarming, that’s because it is! But the good news is that there are a few concrete steps you can take to improve your page speeds. Even the slowest sites can get “sub three seconds” with a good strategy and some work.
Profiling And Benchmarking Tools
Before you begin optimizing, it’s a good idea to take a snapshot of your website’s performance. With profiling, you can determine how much progress you will need to make. Later, you can compare against this benchmark to quantify the speed improvements you make.
There are a number of tools that assess a website’s performance. But before you get started, it’s important to understand that no tool provides a perfect measurement of client-side performance. Devices, connection speeds, and web browsers all impact performance, and it is impossible to analyze all combinations. Additionally, any tool that runs on your personal device can only approximate the experience on a different device or connection.
In one sense, whichever tool you use can provide meaningful insights. As long as you use the same tool before and after, the comparison of each should provide a decent snapshot of performance changes. But certain tools are better than others.
In this section, we’ll walk through two tools that provide a profile of how well your website performs in a mobile environment.
Note: If can be difficult to benchmark an entire site, so I recommend that you choose one or two of your most important pages for benchmarking.
One of the more useful tools for profiling mobile performance is Google’s Lighthouse. It’s a nice starting point for optimization since it not only analyzes page performance but also provides insights into specific performance issues. Additionally, Lighthouse provides high-level suggestions for speed improvements.
Lighthouse is available in the Audits tab of the Chrome Developer Tools. To get started, open the page you want to optimize in Chrome Dev Tools and perform an audit. I typically perform all the audits, but for our purposes, you only need to check the ‘Performance’ checkbox:
Lighthouse focuses on mobile, so when you run the audit, Lighthouse will pop your page into the inspector’s responsive viewer and throttle the connection to simulate a mobile experience.
When the audit finishes, you’ll see an overall performance score, a timeline view of how the page rendered over time, as well as a variety of metrics:
It’s a lot of information, but one report to emphasize is the first meaningful paint, since that directly influences user bounce rates. You may notice that the tool doesn’t even list the total load time, and that’s because it rarely matters for user experience.
Mobile users expect a first view of the page very quickly, and it may be some time before they scroll to the lower content. In the timeline above, the first paint occurs quickly at 1.3s, then a full above-the-fold content paint occurs at 3.9s. The user can now engage with the above-the-fold content, and anything below-the-fold can take a few seconds longer to load.
Lighthouse’s first meaningful paint is a great metric for benchmarking, but also take a look at the opportunities section. This list helps to identify the key problem areas of your site. Keep these recommendations on your radar, since they may provide your biggest improvements.
While Lighthouse provides great insights, it is important to bear in mind that it only simulates a mobile experience. The device is simulated in Chrome, and a mobile connection is simulated with throttling. Actual experiences will vary.
Additionally, you may notice that if you run the audit multiple times, you will get different reports. That’s again because it is simulating the experience, and variances in your device, connection, and the server will impact the results. That said, you can still use Lighthouse for benchmarking, but it is important that you run it several times. It is more relevant as a range of values than a single report.
In order to get an idea of how quickly your page loads in an actual mobile device, use WebPageTest. One of the nice things about WebPageTest is that it tests on a variety of real devices. Additionally, it will perform the test a number of times and take the average to provide a more accurate benchmark.
To get started, navigate to WebPageTest.org, enter the URL for the page you want to test and then select the mobile device you’d like to use for testing. Also, open up the advanced settings and change the connection speed. I like testing at Fast 3G, because even when users are connected to LTE the connection speed is rarely LTE (#sad):
After submitting the test (and waiting for any queue), you’ll get a report on the speed of the page:
The summary view consists of a short list of metrics and links to timelines. Again, the value of the start render is more important than the load time. The first byte is useful for analyzing the server response speed. You can also dig into the more in-depth reports for additional insights.
Now that you’ve profiled your page in Lighthouse and WebPageTest, it’s time to record the values. These benchmarks will provide a useful comparison as you optimize your page. If the metrics improve, your changes are worthwhile. If they stay static (or worse decline), you’ll need to rethink your strategy.
Lighthouse results are simulated which makes it less useful for benchmarking and more useful for in-depth reports and optimization suggestions. However, Lighthouse’s performance score and first meaningful paint are nice benchmarks so run it a few times and take the median for each.
WebPageTest’s values are more reliable for benchmarking since it tests on real devices, so these will be your primary benchmarks. Record the value for the first byte, start to render, and overall load time.
Now that you’ve assessed the performance of your site, let’s take a look at a tool that can help reduce the size of your files. This tool can identify extra, unnecessary pieces of code that bloat your files and cause resources to be larger than they should.
Additionally, certain resources are intended to be cached and then used throughout multiple pages, such as a site-wide stylesheet. Site-wide resources often make sense, but how can you tell when a stylesheet is mostly underused?
The Coverage Tab
Fortunately, Chrome Developer Tools has a tool that helps assess the bloat in files: The Coverage tab. The Coverage tab analyzes code coverage as you navigate your site. It provides an interface that shows how much code in a given CSS or JS file is actually being used.
To access the Coverage tab, open up Chrome Developer Tools, and click on the three dots in the top right. Navigate to More Tools > Coverage.
Next, start instrumenting coverage by clicking the reload button on the right. That will reload the page and begin the code coverage analysis. It brings up a report similar to this:
Here, pay attention to the unused bytes:
This UI shows the amount of code that is currently unused, colored red. In this particular page, the first file shown is 73% bloat. You may see significant bloat at first, but it only represents the current render. Change your screen size and you should see the CSS coverage go up as media queries get applied. Open any interactive elements like modals and toggles, and it should go up further.
Once you’ve activated every view, you will have an idea of how much code you are actually using. Next, you can dig into the report further to find out just which pieces of code are unused, simply click on one of the resources and look in the main window:
In this CSS file, look at the highlights to the left of each ruleset; green indicates used code and red indicates bloat. If you are building a single page app or using specialized resources for this particular page, you may be inclined to go in and remove this garbage. But don’t be too hasty. You should definitely remove dead code, but be careful to make sure that you haven’t missed a breakpoint or interactive element.
In this article, we’ve shown the quantitative benefits of optimizing page speed. I hope you’re convinced, and that you have the tools you need to convince others. We’ve also set a minimum goal for mobile page speed: sub three seconds.
To hit this goal, it’s important that you prioritize the highest impact optimizations first. There are a lot of resources online that can help define this roadmap, such as this checklist. Lighthouse can also be a great tool for identifying specific issues in your codebase, so I encourage you to tackle those bottlenecks first. Sometimes the smallest optimizations can have the biggest impact.
You might not wake up each morning thinking about data privacy and security but, like it or not, Facebook’s recent move makes it an issue you can’t dismiss. Long before Mark Zuckerberg sat before congress in the face of the Cambridge Analytica scandal, explaining how Facebook uses personal data, the European Union started getting especially serious about data protection and privacy.
And so, on May 25 2018, the EU’s General Data Protection Regulation (GDPR) goes into effect.
In a nutshell, the GDPR legislation gives everyone in the EU greater privacy rights, and introduces new rules for marketers and software providers to follow when it comes to collecting, tracking, or handling EU-based prospects’ and customers’ personal data.
Moreover, the GDPR applies to anyone who processes or stores data of those in the EU (i.e. you don’t need to be physically located in Europe for this to apply to your business and can incur fines up to 4% of your annual global turnover or €20 million [whichever is greater] for non-compliance).
But Beyond Potential Fines, Here’s Why You Need to Care
On Tuesday April 3rd, Zuckerberg said that Facebook had no plans to extend the GDPR regulations globally to all Facebook users. But, fast-forward a few weeks later and Facebook completely changed its tune, now planning to extend Europe’s GDPR standards worldwide.
This move sets a precedent, showing all of us that no matter where we are in the world, personal data and privacy laws aren’t optional. Compliance is table stakes.
If you’re located in Europe, process lead and customer data from Europe — or just happen to believe in high standards for data privacy and security, this post will help you navigate:
What Unbounce has done to become GDPR compliant, and
Some of what you need to do to make sure your landing pages, sticky bars, and popups adhere to the new rules.
Note: This post isn’t the be-all-and-end-all on EU data privacy, nor is it legal advice. It’s meant to provide background information and help you better understand how you can use Unbounce in a GDPR compliant way.
Data Protection by Default for You and Your Customers
For several months now, Unbounce has been investing heavily in the necessary changes to be GDPR compliant as a conversion platform. We believe that to build trust and confidence with your customers, you need to make their privacy your priority.
As of the day of GDPR enforcement, you can be sure we’ve got your back when it comes to processing and storing your data within Unbounce, and giving you the tools you need to run compliant campaigns.
To see exactly what Unbounce has been doing, why it matters and where we’re at in development, check out our GDPR FAQ page.
But while we’re a GDPR compliant platform with privacy and security safeguards built into our business practices and throughout our platform, this is only part of the equation. There are still a few things you are responsible for to use Unbounce in a compliant way, including:
Obtaining consent from your visitors (lawful basis of processing)
Deleting personal data if requested (right to erasure)
Encrypting lead data at transit and in rest (using SSL) and
Signing a data processing addendum (DPA) with Unbounce
Here’s what you’re gonna want to watch for as you build landing pages, popups, and sticky bars.
Obtaining Consent From Your Visitors
Before collecting someone’s data the GDPR states you must first have a legal basis to do so. There are six lawful bases of processing under the GDPR, but if you’re a digital marketer, your use case will most likely fall into one of the following three:
Consent (i.e. opt-in)
Performance of a contract (eg. sending an invoice to a customer)
“Legitimate interest” (eg. Someone is an existing customer and you want to send them information related to a product or service they already have.)
If you are using Unbounce for lead gen, then you must gather consent via opt-in to collect, use, or store someone’s data. When building your landing pages in Unbounce, you can easily add an opt-in field to your forms with the Unbounce form builder:
Keep in mind: Your visitors must actively check your opt-in box to give consent. Pre-checked checkboxes are not a valid form of consent.
Related But Different: Cookies And The ePrivacy Regulation
In many posts you’ll see Europe’s ePrivacy regulations tied in with GDPR, but they are, in fact, two separate things. While the GDPR regulates the general use and management of personal data, cookie use is core to the ePrivacy regulation (which is why you’ll sometimes see it called the “cookie law”). ePrivacy regulations are still in the works, but it’s certain they will be about visitor consent to cookies on your site.
Last year Unbounce launched sticky bars (a discreet, mobile-friendly way to get more conversions), but they do double duty as a cookie bar, notifying your visitors about cookies.
You can design and publish a cookie bar using Unbounce’s built-in template, as shown below, embed the code across all of your landing pages using script manager, then promptly publish to every landing page you build in Unbounce. You can even have it appear all across your website.
Informing Visitors of Your Data Protection Policies
It’s not enough to just obtain consent, the GDPR also requires you to inform your customers and prospects what they are consenting to. This means that you need to provide easy access to your privacy and data protection policies (something Google AdWords has required for ages).
Sharing your privacy and data protection policies easily and transparently can help you earn the trust and confidence of your web visitors. Every visitor may not read through it with a fine tooth comb, but in a web littered with sketchy marketing practices, sharing your policies shows that you’re legit and that you have nothing to hide.
This is a great example of how doing right by your customers can also help you achieve your business goals.
The Right To Be Forgotten
At any point in time a customer or lead whose data you have collected can request that you erase any of their personal data you have stored. There are several grounds under which someone can make this request and the GDPR requires that you do so without “undue delay”.
As an Unbounce customer, simply submit an email request to our support team who will ensure that all information for a specific lead or a group of leads are deleted from our database.
As part of our ongoing commitment to supporting data privacy and security, we are inspecting alternate solutions to deletion requests, but you can rest assured that even as of today, we will fulfill deletion requests within the time limit enforced by the GDPR.
Preventing Unauthorized Access to Data
Unbounce has supported SSL encryption on landing pages for years, and we’re proud that we made this a priority for our customers before Google started calling out non-https pages as not secure and giving preferential treatment to secure pages.
Presently Unbounce customers can already adhere to the GDPR requirement to process all data securely.
When you build and publish your landing pages with Unbounce, you can force your web visitors to the secure (https) version of your pages, even if they accidentally navigate to the unsecure (http) version.
In the upper right corner you can toggle to force visitors to the secure HTTPS version of your page.
This forced redirect will ensure proper encryption of your visitor lead data in transit and at rest. And as an added bonus, it’ll keep you in Google’s good books and prevent ‘not secure’ warnings in Google Chrome.
Signing a Data Protection Addendum (DPA) With Unbounce
According to the GDPR, when you collect lead information with Unbounce, you are the data controller while Unbounce serves as your data processor. To comply with GDPR regulation when using a tool like a landing page builder or conversion platform, you need a signed DPA between you (the data controller) and the service provider (your data processor).
Without getting too deep into the weeds on this one, let me just say that if you’re using Unbounce, we’ve got you covered and that you can complete a form on our GDPR overview page to get your DPA by email.
Privacy = Trust = Great Marketing
At Unbounce we view data privacy and security as two cornerstones of great marketing. At their core they are about a positive user experience and can help make the internet a better place.
The GDPR puts more control in the hands of users to determine how their information is used. No one wants their personal data falling into the wrong hands or being used in malicious or intrusive ways. Confidence and trust in your brand is at stake when it comes to privacy, so we aren’t taking any chances. Using Unbounce as your conversion platform, you can assure your customers that you take their privacy and data security seriously.
Increased regulation around data privacy may provide short term challenges for marketers as we establish new norms, but long term they can provide a more positive experience for users — something we should always strive for as marketers.
What You Need To Know To Increase Mobile Checkout Conversions
Google’s mobile-first indexing is here. Well, for some websites anyway. For the rest of us, it will be here soon enough, and our websites need to be in tip-top shape if we don’t want search rankings to be adversely affected by the change.
That said, responsive web design is nothing new. We’ve been creating custom mobile user experiences for years now, so most of our websites should be well poised to take this on… right?
Here’s the problem: Research shows that the dominant device through which users access the web, on average, is the smartphone. Granted, this might not be the case for every website, but the data indicates that this is the direction we’re headed in, and so every web designer should be prepared for it.
However, mobile checkout conversions are, to put it bluntly, not good. There are a number of reasons for this, but that doesn’t mean that m-commerce designers should take this lying down.
As more mobile users rely on their smart devices to access the web, websites need to be more adeptly designed to give them the simplified, convenient and secure checkout experience they want. In the following roundup, I’m going to explore some of the impediments to conversion in the mobile checkout and focus on what web designers can do to improve the experience.
Why Are Mobile Checkout Conversions Lagging?
According to the data, prioritizing the mobile experience in our web design strategies is a smart move for everyone involved. With people spending roughly 51% of their time with digital media through mobile devices (as opposed to only 42% on desktop), search engines and websites really do need to align with user trends.
Now, while that statistic paints a positive picture in support of designing websites with a mobile-first approach, other statistics are floating around that might make you wary of it. Here’s why I say that: Monetate’s e-commerce quarterly report issued for Q1 2017 had some really interesting data to show.
In this first table, they break down the percentage of visitors to e-commerce websites using different devices between Q1 2016 and Q1 2017. As you can see, smartphone Internet access has indeed surpassed desktop:
Website Visits by Device
Monetate’s findings on which devices are used to access in the Internet. (Source)
In this next data set, we can see that the average conversion rate for e-commerce websites isn’t great. In fact, the number has gone down significantly since the first quarter of 2016.
Monetate’s findings on overall e-commerce global conversion rates (for all devices). (Source)
Even more shocking is the split between device conversion rates:
Conversion Rates by Device
Monetate’s findings on the average conversion rates, broken down by device. (Source)
Smartphones consistently receive fewer conversions than desktop, despite being the predominant device through which users access the web.
What’s the problem here? Why are we able to get people to mobile websites, but we lose them at checkout?
In its report from 2017 named “Mobile’s Hierarchy of Needs,” comScore breaks down the top five reasons why mobile checkout conversion rates are so low:
Here is the breakdown for why mobile users don’t convert:
20.2% — security concerns
19.6% — unclear product details
19.6% — inability to open multiple browser tabs to compare
19.3% — difficulty navigating
18.6% — difficulty inputting information.
Those are plausible reasons to move from the smartphone to the desktop to complete a purchase (if they haven’t been completely turned off by the experience by that point, that is).
In sum, we know that consumers want to access the web through their mobile devices. We also know that barriers to conversion are keeping them from staying put. So, how do we deal with this?
10 Ways to Increase Mobile Checkout Conversions In 2018
For most of the websites you’ve designed, you’re not likely to see much of a change in search ranking when Google’s mobile-first indexing becomes official.
Your mobile-friendly designs might be “good enough” to keep your websites at the top of search (to start, anyway), but what happens if visitors don’t stick around to convert? Will Google start penalizing you because your website can’t seal the deal with the majority of visitors? In all honesty, that scenario will only occur in extreme cases, where the mobile checkout is so poorly constructed that bounce rates skyrocket and people stop wanting to visit the website at all.
Let’s say that the drop-off in traffic at checkout doesn’t incur penalties from Google. That’s great… for SEO purposes. But what about for business? Your goal is to get visitors to convert without distraction and without friction. Yet, that seems to be what mobile visitors get.
Going forward, your goal needs to be two-fold:
to design websites with Google’s mobile-first mission and guidelines in mind,
to keep mobile users on the website until they complete a purchase.
Essentially, this means decreasing the amount of work users have to do and improving the visibility of your security measures. Here is what you can do to more effectively design mobile checkouts for conversions.
1. Keep the Essentials in the Thumb Zone
Research on how users hold their mobile phones is old hat by now. We know that, whether they use the single- or double-handed approach, certain parts of the mobile screen are just inconvenient for mobile users to reach. And when expediency is expected during checkout, this is something you don’t want to mess around with.
For single-handed users, the middle of the screen is the prime playing field:
Although users who cradle their phones for greater stability have a couple options for which fingers to use to interact with the screen, only 28% use their index finger. So, let’s focus on the capabilities of thumb users, which, again, means giving the central part of the screen the most prominence:
Some users hold their phones with two hands. Because the horizontal orientation is more likely to be used for video, this won’t be relevant for mobile checkout. So, pay attention to how much space of that screen is feasibly within reach of the user’s thumb:
In sum, we can use Smashing Magazine’s breakdown of where to focus content, regardless of left-hand, right-hand or two-handed holding of a smartphone:
While information is included at the top of the checkout page, the input fields don’t start until just below the middle of it — directly in the ideal thumb zone for users of any type. This ensures that visitors holding their phones in any manner and using different fingers to engage with it will have no issue reaching the form fields.
2. Minimize Content to Maximize Speed
We’ve been taught over and over again that minimal design is best for websites. This is especially true in mobile checkout, where an already slow or frustrating experience could easily push a customer over the edge, when all they want to do is be done with the purchase.
To maximize speed during the mobile checkout process, keep the following tips in mind:
Only add the essentials to checkout. This is not the time to try to upsell or cross-sell, promote social media or otherwise distract from the action at hand.
Keep the checkout free of all images. The only eye-catching visuals that are really acceptable are trustmarks and calls to action (more on these below).
Any text included on the page should be instructional or descriptive in nature.
Avoid any special stylization of fonts. The less “wow” your checkout page has, the easier it will be for users to get through the process.
Look to Staples’ website as an example of what a highly simple single-page checkout should look like:
As you can see, Staples doesn’t bog down the checkout process with product images, branding, navigation, internal links or anything else that might (1) distract from the task at hand, or (2) suck resources from the server while it attempts to process your customers’ requests.
Not only will this checkout page be easy to get through, but it will load quickly and without issue every time — something customers will remember the next time they need to make a purchase. By keeping your checkout pages light in design, you ensure a speedy experience in all aspects.
3. Put Them at Ease With Trustmarks
A trustmark is any indicator on a website that lets customers know, “Hey, there’s absolutely nothing to worry about here. We’re keeping your information safe!”
The one trustmark that every m-commerce website should have? An SSL certificate. Without one, the address bar will not display the lock sign or the green https domain name — both of which let customers know that the website has extra encryption.
You can use other trustmarks at checkout as well.
While you can use logos from Norton Security, PCI compliance and other security software to let customers know your website is protected, users might also be swayed by recognizable and well-trusted names. When you think about it, this isn’t much different than displaying corporate logos beside customer testimonials or in callouts that boast of your big-name connections. If you can leverage a partnership like the ones mentioned below, you can use the inherent trust there to your benefit.
Take 6pm, which uses a “Login with Amazon” option at checkout:
This is a smart move for a brand that most definitely does not have the brand-name recognition that a company like Amazon has. By giving customers a convenient option to log in with a brand that’s synonymous with speed, reliability and trust, the company might now become known for those same checkout qualities that Amazon is celebrated for.
Then, there are mobile checkout pages like the one on Sephora:
Sephora also uses this technique of leveraging another brand’s good name in order to build trust at checkout time. In this case, however, it presents customers with two clear options: Check out with us right now, or hop over to PayPal, which will take care of you securely. With security being a major concern that keeps mobile customers from converting, this kind of trustmark and payment method is a good move on Sephora’s part.
4. Provide Easier Editing
In general, never take a visitor (on any device) away from whatever they’re doing on your website. There are already enough distractions online; the last thing they need is for you to point them in a direction that keeps them from converting.
At checkout, however, your customers might feel compelled to do this very thing if they decide they want a different color, size or quantity of an item in their shopping cart. Rather than let them backtrack through the website, give them an in-checkout editing option to keep them in place.
When they first get to the checkout screen, customers will see a list of items they’re about to purchase. When the large “Edit” button beside each item is clicked, a lightbox (shown above) opens with the product’s variations. It’s basically the original product page, just superimposed on top of the checkout. Users can adjust their options and save their changes without ever having to leave the checkout page.
If you find, in reviewing your website’s analytics, that users occasionally backtrack after hitting the checkout (you can see this in the sales funnel), add this built-in editing feature. By preventing this unnecessary movement backwards, you could save yourself lost conversions from confused or distracted customers.
5. Enable Express Checkout Options
When consumers check out on an e-commerce website through a desktop device, it probably isn’t a big deal if they have to input their user name, email address or payment information each time. Sure, if it can be avoided, they’ll find ways around it (like allowing the website to save their information or using a password manager such as LastPass).
But on mobile, re-entering that information is a pain, especially if contact forms aren’t optimized well (more on that below). So, to ease the log-in and checkout process for mobile users, consider ways in which you can simplify the process:
Allow for guest checkout.
Allow for one-click expedited checkout.
Enable one-click sign-in from a trusted source, like Facebook.
Enable payment on a trusted payment provider’s website, like PayPal, Google Wallet or Stripe.
One of the nice things about Sephora‘s already convenient checkout process is that customers can automate the sign-in process going forward with a simple toggle:
When mobile customers are feeling the rush and want to get to the next stage of checkout, Sephora’s auto-sign-in feature would definitely come in handy and encourage customers to buy more frequently from the mobile website.
Many mobile websites wait until the bottom of the login page to tell customers what kinds of options they have for checking out. But rather than surprise them late, Victoria’s Secret displays this information in big bold buttons right at the very top:
Customers have a choice of signing in with their account, checking out as a guest or going directly to PayPal. They are not surprised to discover later on that their preferred checkout or payment method isn’t offered.
I also really love how Victoria’s Secret has chosen to do this. There’s something nice about the brightly colored “Sign In” button sitting beside the more muted “Check Out as a Guest” button. For one, it adds a hint of Victoria’s Secret brand colors to the checkout, which is always a nice touch. But the way it’s colored the buttons also makes clear what it wants the primary action to be (i.e. to create an account and sign in).
6. Add Breadcrumbs
When you send mobile customers to checkout, the last thing you want is to give them unnecessary distractions. That’s why the website’s standard navigation bar (or hamburger menu) is typically removed from this page.
Nonetheless, the checkout process can be intimidating if customers don’t know what’s ahead. How many forms will they need to fill out? What sort of information is needed? Will they have a chance to review their order before submitting payment details?
If you’ve designed a multi-page checkout, allay your customers’ fears by defining each step with clearly labeled breadcrumb navigation at the top of the page. In addition, this will give your checkout a cleaner design, reducing the number of clicks and scrolling per page.
Hayneedle has a beautiful example of breadcrumb navigation in action:
You can see that three steps are broken out and clearly labeled. There’s absolutely no question here about what users will encounter in those steps either, which will help put their minds at ease. Three steps seems reasonable enough, and users will have a chance to review the order once more before completing the purchase.
Sephora has an alternative style of “breadcrumbs” in its checkout:
Instead of placing each “breadcrumb” at the top of the checkout page, Sephora’s customers can see what the next step is, as well as how many more are to come as they work their way through the form.
This is a good option to take if you’d rather not make the top navigation or the breadcrumbs sticky. Instead, you can prioritize the call to action (CTA), which you might find better motivates the customer to move down the page and complete their purchase.
I think both of these breadcrumbs designs are valid, though. So, it might be worth A/B testing them if you’re unsure of which would lead to more conversions for your visitors.
7. Format the Checkout Form Wisely
Good mobile checkout form design follows a pretty strict formula, which isn’t surprising. While there are ways to bend the rules on desktop in terms of structuring the form, the number of steps per page, the inclusion of images and so on, you really don’t have that kind of flexibility on mobile.
Instead, you will need to be meticulous when building the form:
Design each field of the checkout form so that it stretches the full width of the website.
Limit the fields to only what’s essential.
Clearly label each field outside of and above it.
Use at least a 16-point-pixel font.
Format each field so that it’s large enough to tap into without zooming.
Use a recognizable mark to indicate when something is required (like an asterisk).
Always let users know when an error has been made immediately after the information has been inputted in a field.
Place the call to action at the very bottom of the form.
Because the checkout form is the most important element that moves customers through the checkout process, you can’t afford to mess around with a tried and true formula. If users can’t seamlessly get from top to bottom, if the fields are too difficult to engage with, or if the functionality of the form itself is riddled with errors, then you might as well kiss your mobile purchases (and maybe your purchases in general) goodbye.
Crutchfield shows how to create form fields that are very user-friendly on mobile:
As you can see, each field is large enough to click on (even with fat fingers). The bold outline around the currently selected field is also a nice touch. For a customer who is multitasking and or distracted by something around them, returning to the checkout form would be much easier with this type of format.
Sephora, again, handles mobile checkout the right way. In this case, I want to draw your attention to the grayed-out “Place Order” button:
The button serves as an indicator to customers that they’re not quite ready to submit their purchase information yet, which is great. Even though the form is beautifully designed — everything is well labeled, the fields are large, and the form is logically organized — mobile users could accidentally scroll too far past a field and wouldn’t know it until clicking the call-to-action button.
If you can keep users from receiving that dreaded “missing information” error, you’ll do a better job of holding onto their purchases.
8. Simplify Form Input
Digging a bit deeper into these contact forms, let’s look at how you can simplify the input of data on mobile:
Allow customers to user their browser’s autocomplete functionality to fill in forms.
Include a tabindex HTML directive to enable customers to tap an arrow up and down through the form. This keeps their thumbs within a comfortable range on the smartphone at all times, instead of constantly reaching up to tap into a new field.
Add a checkbox that automatically copies the billing address information over to the shipping fields.
Change the keyboard according to what kind of field is being typed in.
For starters, the keyboard uses tab functionality (see the up and down arrows just above the keyboard). For customers with short fingers or who are impatient and just want to type away on the keyboard, the tabs help keep their hands in one place, thus speeding up checkout.
Also, when customers tab into a numbers-only field (like for their phone number), the keyboard automatically changes, so they don’t have to switch manually. Again, this is another way to up the convenience of making a purchase on mobile.
Amazon’s mobile checkout includes a quick checkbox that streamlines customers’ submission of billing information:
As we’ve seen with mobile checkout form design, simpler is always better. Obviously, you will always need to collect certain details from customers each time (unless their account has saved that information). Nonetheless, if you can provide a quick toggle or checkbox that enables them to copy data over from one form to another, then do it.
9. Don’t Skimp on the CTA
When designing a desktop checkout, your main concerns with the CTA are things like strategic placement of the button and choosing an eye-catching color to draw attention to it.
On mobile, however, you have to think about size, too — and not just how much space it takes up on the screen. Remember the thumb zone and the various ways in which users hold their phone. Ensure that the button is wide enough so that any user can easily click on it without having to change their hand position.
So, your goal should be to design buttons that (1) sit at the bottom of the mobile checkout page and (2) stretch all the way from left to right, as is the case on Staples’ mobile website:
No matter who is making the purchase — a left-handed, a right-handed or a two-handed cradler — that button will be easy reach.
Of all the mobile checkout enhancements we’ve covered today, the CTA is the easiest one to address. Make it big, give it a distinctive color, place it at the very bottom of the mobile screen, and make it span the full width. In other words, don’t make customers work hard to take the final step in a purchase.
10. Offer an Alternate Way Out
Finally, give customers an alternate way out.
Let’s say they’re shopping on a mobile website, adding items to their cart, but something isn’t sitting right with them, and they don’t want to make the purchase. You’ve done everything you can to assure them along the way with a clean, easy and secure checkout experience, but they just aren’t confident in making a payment on their phone.
Rather than merely hoping you don’t lose the purchase entirely, give them a chance to save it for later. That way, if they really are interested in buying your product, they can revisit on desktop and pull the trigger. It’s not ideal, because you do want to keep them in place on mobile, but the option is good for customers who just can’t be saved.
As you can see on L.L. Bean’s mobile website, there is an option at checkout to “Move to Wish List”:
What’s nice about this is that L.L. Bean clearly doesn’t want browsing of the wish list or the removal of an item to be a primary action. If “Move to Wish List” were shown as a big bold CTA button, more customers might decide to take this seemingly safer alternative. As it’s designed now, it’s more of a, “Hey, we don’t want you to do anything you’re not comfortable with. This is here just in case.”
While fewer options are generally better in web design, this might be something to explore if your checkout has a high cart abandonment rate on mobile.
As more mobile visitors flock to your website, every step leading to conversion — including the checkout phase — needs to be optimized for convenience, speed and security. If your checkout is not adeptly designed to mobile users’ specific needs and expectations, you’re going to find that those conversion rates drop or shift back to desktop — and that’s not the direction you want things to go in, especially if Google is pushing us all towards a mobile-first world.
Monthly Web Development Update 4/2018: On Effort, Bias, And Being Productive
These days, it is one of the biggest challenges to think long-term. In a world where we live with devices that last only a few months or a few years maybe, where we buy stuff to throw it away only days or weeks later, the term effort gains a new meaning.
Recently, I was reading an essay on ‘Yatnah’, ‘Effort’. I spent a lot of time outside in nature in the past weeks and created a small acre to grow some vegetables. I also attended a workshop to learn the craft of grafting fruit trees. When you cut a tree, you realize that our fast-living, short-term lifestyle is very different from how nature works. I grafted a tree that is supposed to grow for decades now, and if you cut a tree that has been there for forty years, it’ll take another forty to grow one that will be similarly tall.
I’d love that we all try to create more long-lasting work, software that works in a decade, and in order to do so, put effort into learning how we can make that happen. So long, I’ll leave you with this quote and a bunch of interesting articles.
“In our modern world it can be tempting to throw effort away and replace it with a few phrases of positive thinking. But there is just no substitute for practice”. — Kino Macgregor
The Safari Technology Preview 52 removes support for all NPAPI plug-ins other than Adobe Flash and adds support for preconnect link headers.
Chrome 66 Beta brings the CSS Typed Object Model, Async Clipboard API, AudioWorklets, and support to use calc(), min(), and max() in Media Queries. Additionally, select and textarea fields now support the autocomplete attribute, and the catch clause of a try statement can be used without a parameter from now on.
Morten Rand-Hendriksen wrote about using ethics in web design and what questions we should ask ourselves when suggesting a solution, creating a design, or a new feature. Especially when we think we’re making something ‘smart’, it’s important to put the question whether it actually helps people first.
Charlie Owen’s talk transcription of “Dear Developer, The Web Isn’t About You” is a good summary of why we as developers need to think beyond what’s good for us and consider what serves the users and how we can achieve that instead.
Trine Falbe introduces us to Ethical Design with a practical getting-started guide. It shows alternatives and things to think about when building a business or product. It doesn’t matter much if you’re the owner, a developer, a designer or a sales person, this is about serving users and setting the ground for real and sustainable trust.
Josh Lovejoy shares his learnings from working on inclusive tech solutions and why it takes more than good intention to create fair, inclusive technology. This article goes into depth of why human judgment is very difficult and often based on bias, and why it isn’t easy to design and develop algorithms that treat different people equally because of this.
The HSB (Hue, Saturation, Brightness) color system isn’t especially new, but a lot of people still don’t understand its advantages. Erik D. Kennedy explains its principles and advantages step-by-step.
While there’s more discussion about inclusive design these days, it’s often seen under the accessibility hat or as technical decisions. Robert del Prado now shares how important inclusive design thinking is and why it’s much more about the generic user than some specific people with specific disabilities. Inclusive design brings people together, regardless of who they are, where they live, and what they can afford. And isn’t it the goal of every product to be successful by acquiring as many people as possible? Maybe we need to discuss this with marketing people as well.
Brian Schrader found an unknown feature in Git which is very helpful to test ideas quickly: Git Notes lets us add, remove, or read notes attached to objects, without touching the objects themselves and without needing to commit the current state.
For many projects, I prefer to use npm scripts over calling gulp or direct webpack tasks. Michael Kühnel shares some useful tricks for npm scripts, including how to allow CLI option parameters or how to watch tasks and alert notices on error.
Anton Sten explains why new tools don’t always equal productivity. We all love new design tools, and new ones such as Sketch, Figma, Xd, or Invision Studio keep popping up. But despite these tools solving a lot of common problems and making some things easier, productivity is mostly about what works for your problem and not what is newest. If you need to create a static mockup and Photoshop is what you know best, why not use it?
There’s a new, fast DNS service available by Cloudflare. Finally, a better alternative to the much used Google DNS servers, it is available under 184.108.40.206. The new DNS is the fastest, and probably one of the most secure ones, too, out there. Cloudflare put a lot of effort into encrypting the service and partnering up with Mozilla to make DNS over HTTPS work to close a big privacy gap that until now leaked all your browsing data to the DNS provider.
I heard a lot about iOS machine learning already, but despite the interesting fact that they’re able to do this on the device without sending everything to a cloud, I haven’t found out how to make use of this for apps, yet. Luckily, Manu Rink put together a nice guide in which she explains machine learning in iOS for beginners.
There’s great news for the Git GUI fans: Tower now offers a new beta version that includes pull request support, interactive rebase workflows, quick actions, reflog, and search. An amazing update that makes working with the software much faster than before, and even for me as a command line lover it’s a nice option.
HTTP Strict Transport Security (HSTS), especially with preloading, has long been considered one of the best security features to ensure that a browser should connect only securely to a hostname. However, advertisers have found a way to track users with HSTS and using it as a persistent cross-site identifier (known as “super cookie”). The WebKit developers reacted now, and in order to protect the privacy of their users, they weakened the reliability of HSTS by limiting the hostname scope and ignoring an HSTS state for subresource requests to blocked domains.
While Argon2 is the current best practice algorithm to use for hashing (passwords, for example), there are a couple of things developers need to prepare for. For example, it’s easy to DOS yourself using Argon2, so you need to rate limit queries.
Tim Oxley shares why he prefers to return early and avoid else wherever possible. This is something I’ve been doing at the beginning of my career, then lost at some point, but returned to it again recently. Especially the reduced complexity and simpler logic in functions is a key advantage for me here.
Amber Wilson shares some insights into what it feels like to be thrown into a complex project in order to do the styling there. She rightly says that “nobody said CSS is easy” and expresses how important it is that we as developers face inconvenient situations in order to grow our knowledge.
Ana Tudor is known for her special CSS skills. Now she explores and describes how we can achieve scooped corners in CSS with some clever tricks.
If you work with key value stores that live only in the frontend, IDB-Keyval is a great lightweight library that simplifies working with IndexedDB and localStorage.
Ever wanted to create graphics from your data with a hand-drawn, sketchy look on a website? Rough.js lets you do just that. It’s usually Canvas-based (for better performance and less data) but can also draw SVG paths.
If you need a drag-and-drop reorder module, there’s a smooth and accessible solution available now: dragon-drop.
To raise awareness for how common such situations are for all of us, James Bennett shares an embarrassing situation where he made a simple mistake that took him a long time to find out. It’s not just me making mistakes, it’s not just you, and not just James — all of us make mistakes, and as embarrassing as they seem to be in that particular situation, there’s nothing to feel bad about.
Adam Blanchard says “People are machines. We need maintenance, too.” and creates a comparison for engineers to understand why we need to take care of ourselves and also why we need people who take care of us. This is an insight into what People Engineers do, and why it’s so important for companies to hire such people to ensure a team is healthy.
You might have read the news about the first fatal crash with a self-driving car. A sad milestone that shows how unreliable this technology can be and how far away we still are from being able to rely on such systems.
We all know marketing campaigns convert best when we segment and personalize them – which is where geo-targeting can come into play. In fact, a whopping 74% of consumers get frustrated on sites where the content has nothing to do with their interests, and 86% of customers say personalization impacts their purchase decisions.
The good news is, today you can tailor almost every marketing experience to a visitor’s location and other identifiers to make offers feel more personal. So why do even the best of us continue to use blanket-style, default messaging for every visitor?
More than half of marketers struggle to execute personalized campaigns, and reasons range from not having enough data about TOFU prospects to know what to personalize—to having trouble securing the resources to execute.
But making sure everyone sees relevant, location-based offers on your website doesn’t actually need to be a huge production. In our experience, it’s way easier (and could do more for your conversion rates) than you might think.
Why geo-target website content — and the fastest way to try this
Like all forms of personalization, geo-targeting is about relevance. And I should clarify off the bat, I’m not talking about using “y’all” in your headline if you’re targeting Texans, or splitting hairs on “sneakers” vs. “tennis shoes” based on regional preference.
What I am talking about is getting way more creative and specific with your offers. If visitors see offers that feel like they’re just for them, they’re more likely to click through, and convert.
For example, imagine targeting only locals in Chicago, Philadelphia, and Seattle respectively with their own coupon codes and special hotel offers for your in-person event instead of blanketing your entire site with a generic message.
Now imagine if you didn’t need to rely on your web team to get those three offers up on the site and could do it yourself really fast?
One of the quickest ways to experiment with this type of personalization is website popups and sticky bars. The real key with these is understanding your options (and there are plenty of them!). Here are a few of my favourite examples to get you started:
Practical geo-targeting examples to try today
1. Experiment with seasonal offers by region
According to Steve Olenski of Forbes, “acknowledging [your] potential buyer’s location increases relevance, and the result is higher engagement that can translate into additional revenue.” It’s a quick win! And, with ecommerce in particular, there’s tons of opportunity to run promotions suited to specific locations.
As an example, if you sell sports equipment or apparel, you could run two or more different “winter sales” suited to the context of winter in different locations. Your ‘classic’ winter sale would appear in states like Colorado—and could feature an offer for 15% off ski gear, whereas your ‘Californian winter sale’ could showcase 15% off hiking gear.
An example of the two different “winter sale” popup offers by location.
Not only do you earn points by acknowledging your visitor’s location like this, but you also ensure each region sees an offer that makes the most sense for them. Running offers like this is wayyyy better than a single offer that’s less relevant to everyone and later wondering why it didn’t convert.
Recommended settings for this example: Frequency: Show once per visitor Trigger: On exit
2. Increase foot traffic with in-store promos by region
We’ve all seen the most common ecommerce discount popup on entry. You know the one — “signup for our newsletter for 15% off your first purchase”. And there’s a reason we’ve all seen it: it works. But, we can do better.
To take things a step further, you can target this type of offer by location. If you have physical stores in specific cities, you can offer an in-store discount in exchange for the newsletter sign up. Like this:
Example of a popup driving in-store visits, and potential for remarketing later
This can help you build foot traffic in different cities, and help you create location-specific mailing lists to promote more relevant in-store events, products, and sales to local shoppers.
Recommended settings for this example: Frequency: Show once per visitor Trigger: When a visitor scrolls 40% of the way down your page.
3. Target your event marketing to precise regions
If you’ve ever planned a party, you know how easy it is to fixate on details. Are three kinds of cheese enough? Is my Spotify Discover Weekly cool or do I need a new playlist?! None of this matters if nobody shows up. Marketing events are no different.
A well timed, geo-targeted popup or sticky bar can get your message in front of the people who will care most about your event. When you tailor event messages to your visitor’s location, you can include a more precise value prop. Targeting locals? Remind them how cost effective it is since they don’t have to travel. Targeting neighbors in a nearby state? Remind them that your conference can be a mini-vacation complete with conference-exclusive hotel discounts.
Recommended settings for this example: Frequency: Show on the first visit Trigger: Show after a 15-25 second delay on relevant URLs (you can use Google Analytics to determine the right delay for your site).
Tip: After triggering this popup on the first visit or two, set up a more subtle sticky bar for subsequent visits to keep the event top of mind, without overdoing it. You could even run the “maybe later” popup Oli Gardner’s a huge proponent of.
Hyper-personalize text on your popups
As a bonus: just as you can do with your Unbounce landing pages, you can also swap out text on your popups and sticky bars with Dynamic Text Replacement to match a prospect’s exact search terms.
This gives you a way to maintain perfect relevance between your ads and website popups in this case.
For example, you could choose to switch out the name of a product for a more relevant one in a popup. If someone searched for “House Prices in Portland”, you could automatically swap out the text in your popup to match exactly and maintain hyper relevance. You can read about a real Unbounce customer experimenting with DTR here.
On premium plans and above you can target Unbounce popups by country, region, and even city (which is wicked granular!). The possibilities for what you show, or how you show it, are nearly endless:
You can trigger: on exit, arrival, after a delay, on scroll, or on click.
And you can target: by location (geo-targeting), URL, referring URL, and cookie targeting.
The options you choose will come down to a few factors including your site, your buyers, ad standards you uphold for a great website experience, and testing.
Here’s how to setup popups and sticky bars on your site:
To get started:
Hop into your Unbounce account , and on the All Pages Screen, click “Popups & Sticky Bars” in the left menu.
In the top left, Select “+ Popup or Sticky Bar”.
Then, click “Create a Popup.”
Choose a Template (or start with a blank popup if you prefer), name your popup, and select “Start with this Template”.
Once you’ve created your popup, set your targeting, triggering and frequency. On your popup or sticky bar overview page:
Set the domain and URL paths where you want your popup or sticky bar to appear.
Choose your triggering option based on your engagement goals.
Set your frequency to choose how often your visitors will see your popup or sticky bar.
In the advanced triggers section, toggle location targeting on and choose which country, region or city you want to show (or not show) your popup or sticky bar.
For best results, personalize
As I hope I’ve illustrated, in the golden age of martech, it’s time to stop squandering valuable website visits on impersonal, generic experiences. You can now leverage useful information about where your visitors are coming from and, by extension, come up with creative offers that will be relevant for them. Small details significantly enhance customer experience, and I hope you can use the above three examples as a springboard for some experiments of your own.
How To Design Emotional Interfaces For Boring Apps
There’s a trickling line of ones and zeros that disappears behind a large yellow tube. A bear pops out of the tube as a clawed paw starts pointing at my browser’s toolbar, and a headline appears, saying: “Start your bear-owsing!”
Between my awwing and oohing I forget what I wanted to browse.
Products like a VPN service rarely evoke endearment — or any other emotion, for that matter. It’s not their job, not what they were built to do. But because TunnelBear does, I choose it over any other VPN and recommend it to my friends, so they can have some laughs while caught up in routine.
Humans can’t endure boredom for a long time, which is why products that are built for non-exciting, repetitive tasks so often get abandoned and gather dust on computers and phones. But boredom, according to psychologists, is merely lack of stimulation, the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation?
I sat with product designers here at MacPaw, who spend their waking hours designing not-so-sexy things like duplicate finders and encryption apps, and they shared five secrets to more emotional UIs: gamification, humor, animation, illustration, and mascots.
Games People Play
There’s some debate going on around the use of gamification in UIs: 24 empirical studies, for example, arrived at varying conclusions as to how effective it was. But then again, effectiveness depends on what you were trying to accomplish by designing those shiny achievement badges.
For many product creators, including Akar Sumset here, the point of gamification is not letting users have fun per se — it’s gently pushing them towards certain behaviors via said fun. Achievements, ranks, leaderboards tap into the basic human need of esteem, trigger competitiveness, and supposedly urge users to do what you want them to, like make progress, keep coming back to the app, or share it on social media.
Gamification can succeed or fail at that, but what it sure achieves is an emotional response. Our brain is packed full of cells that control the levels of dopamine, one of the major neurochemicals of happiness. When something enjoyable happens, these neurons light up and trigger a release of dopamine into the blood, but what’s even better, if this pleasant event is regular and can be predicted, they’ll light up and release dopamine before it even happens. What does that mean for your interface? That expecting an enjoyable thing such as the next achievement will give the users little shots of happiness throughout their experience with the product.
Gamification in UI: Gemini 2 And Duolingo
When designing Gemini 2, the new version of our duplicate finder for Mac, we had a serious problem at hand. Reviewing gigabytes of files was soul-crushingly boring, and some users complained they quit before they were done. So what we tried to achieve with the achievements system is intensify the feeling of a crossed-out item on a to-do list, which is the only upside of tedious tasks. The space theme, unwittingly set with the app’s name and exploited in the interface, was perfect for gamification. Our audience grew up on Star Wars and Star Trek, so sci-fi inspired ranks would hit home with them.
Within days of the release, we started getting tweets from users asking for clues on the Easter Egg that would unlock the final achievement. A year after the release, Gemini 2 got the Red Dot Award for a design that exhibits “clarity and emotion.” So while it’s hard to measure how motivating our achievement system has been, it sure didn’t leave people cold.
Another product that got it right — and has by far the most gamified interface I’ve seen — is Duolingo, an online service and mobile app for learning languages. Trying to master a foreign tongue from scratch is daunting, especially if it’s just you and your laptop, without the reassurance that comes with having a teacher. Given how quickly people lose interest in their language endeavors (speaking from experience here), Duolingo would have to go out of its way to keep you hooked. And it does.
Whenever you complete a quick 5-minute lesson, you earn 10 points. Take lessons 30 days in a row? Get an achievement. Complete 20 lessons without a single typo? Unlock another. For every baby step you take, your senses are rewarded with triumphant sounds and colorful graphics that trigger the release of that sweet, sweet dopamine. Eventually, you start associating Duolingo with the feeling of accomplishment and pride — the kind of feeling you want to come back to.
Victor Yocco has made a solid case for using humor in web design as a tool to create memorable experiences, connect with users, and make your work stand out. But the biggest power of jokes is that they’re emotional. While we still don’t fully understand the nature of humor, one thing is clear: it makes humans happy. According to brain imaging research, funny cartoons activate the reward network in the limbic system — the same network that responds to eating, music, sex, and mood-altering drugs. In other words, a good joke gives people a kind of emotional high.
Would you want that kind of reaction to your interface? Of course. But the tricky part is that not only is humor subjective, but the way we respond to it depends a lot on the context. One thing is throwing in a pun on the launch screen; a completely different is goofing around in an error message. And while all humans enjoy humor in this or that form, it’s vital to know your audience: what they find hilarious and what might seem inappropriate, crude, or poorly timed. Not that different from cracking jokes in real life.
Humor in UI: Authentic Weather and Slack
One app that nails the use of humor — and not just as a complementary comic relief, but as a unique selling proposition — is Authentic Weather. Weather apps are a prime example of utilitarian products: they are something people use to get information, period. But with Authentic Weather, you get a lot more than that. No matter the weather, it’s going to crack you up with a snarky comment like “It’s ducking freezing,” “Go home winter,” and my personal favorite “It’s just okay. Look outside for more information.”
What happens when you use Authentic Weather is you don’t just open it for the forecast — you want to see what it comes up with next, and a routine task like checking the weather becomes a thing to look forward to in the morning. Now, the app’s moody commentary, packed full of f-words and scorn, would probably seem less entertaining to my mom. But being the grumpy millennial that I am, I find it hilarious, which proves humor works if you know your audience.
Another interface that puts fun to good use is Slack’s. For an app people associate with work emergencies, Slack does a solid job creating a more humane experience, not least because of its one-liners. From loading screens to the moments when you’re finally caught up with all your chats, it cracks a joke when you don’t see it coming.
With such a diverse demographic, humor is a hit and miss, so Slack plays safe with goofy puns and good-natured banter — the kind of jokes that don’t exactly send you rolling on the floor but don’t annoy or offend either. In the best case scenario, the user will chuckle and share the screenshot in one of their channels; in the worst case scenario, they’ll just roll their eyes.
Nearly every interface uses a form of animation. It’s the natural way to transition from one state to another. But animations in UI can serve a lot more purposes than signifying a change of state — they can help you direct attention and communicate what’s going on better than static visuals or copy ever could. The movement stimulates both visual and kinesthetic learning, which means users are more likely to stay focused and figure out how to use the thing.
These are all good reasons to incorporate animation into your design, but why does it elicit emotion, exactly? Simon Grozyan, who worked on our apps Encrypto and Gemini Photos, believes it’s because in the physical world we interpret animated things as alive:
“We are used to seeing things in movement. Everything around us is either moving or changing appearance because of the light. Static equals dead.”
In addition to the relatable, lifelike quality of a moving object, animation has the power of a delightful and unexpected thing that brings us a lot more pleasure than a thing equally delightful but expected. Therefore, by using it in spots less habitual than transitions you can achieve that coveted stimulation that makes your product fun to use.
Animation in UI: Encrypto and Shazam
Encrypto is a tiny Mac app that encrypts and decrypts your files so that you can send them to someone securely. It’s an indispensable tool for those who care about data security and privacy, but not the kind of tool you would feel attached to. Nevertheless, Encrypto is by far my favorite MacPaw app as far as design is concerned, thanks to the Matrix-style animated bar that slides over your file and transforms it into a new secured entity. Encryption comes to life; it’s no longer a dull process on your computer — it’s mesmerizing digital magic.
Animation is at the heart of another great UI: that of Shazam, an app you probably have on your phone. When you use Shazam to find out what’s playing, the button you tap starts sending concentric circles outward and inward. This similarity to a throbbing audio speaker makes the interface almost tangible, physical — as if you’re blasting your favorite album on a powerful sound system.
As Blair Culbreth argues, polished is no longer enough for interfaces. Sleek, professional design is expected, but it’s the personalized, humane details that users smile at and forward to their friends. Custom art can be this detail.
Unlike generic imagery, illustration is emotional, because it communicates more than meaning. It carries positive associations with cartoons every person used to watch as a child, shows things in a more playful, imaginative way, and, most importantly, contains a touch of the artist’s personality.
“I think when an artist creates an illustration they always infuse some of their personal experience, their context, their story into it,” says Max Kukurudziak, one of our product designers. The theory rings true — a human touch is more likely to stir feelings.
Illustration in UI: Gemini Photos and Google Calendar
One of our newest products Gemini Photos is an iPhone app that helps you clear unneeded photos. Much like Gemini 2 for desktop, it involves some tedious reviewing for the user, so even with a handy and handsome UI, we’d have a hard time holding their attention and generally making them feel good.
Like in many of our previous apps, we used animations and sounds to enliven the interface, but custom art has become the highlight of the experience. As said above, it’s scientifically proven that surprising pleasurable things cause an influx of that happiness chemical into our blood, so by using quirky illustrations in unexpected spots we didn’t just fill up an empty screen — we added a tad of enjoyment to an otherwise monotonous activity.
One more example of how illustration can make a product more lovable is Google Calendar. Until recently there was a striking difference between the web version and the iOS app. While the former had the appeal of a spreadsheet, the latter instantly won my heart with one killer detail. For many types of events, Google Calendar slips in art that illustrates them, based on the keywords it picks up from event titles. That way, your plans for the week look a lot more exciting, even if all you’ve got going on is the gym and a dentist appointment.
But that’s not even the best thing. I realized that whenever I create a new event, I secretly hope Google Calendar will have art for it and feel genuinely pleased when it does. Just like that, using a calendar stopped being a necessity and became a source of positive emotion. And, apparently, the illustration experiment didn’t work for me alone, because Google recently rolled out the web version of their calendar with the same art.
Cute characters that impersonate products have been used in web design and marketing for years (think Ronald McDonald and the Michelin Man). In interfaces — not quite as much. Mascots in UI can be perceived as intrusive and annoying, especially if they distract the user from an important action or obstruct the view. A notorious example of a mascot gone wrong is Microsoft’s Clippy: it evoked nothing but fear and loathing (which, of course, are emotions, but not the kind you’re looking for).
At the same time, studies show that people easily personify things, even if they are merely geometric figures. Lifelike creatures are easier to relate to, understand the behavior of, and generally feel some way about. Moreover, an animated character is easier to attribute a personality to, so you can broadcast the characteristics of your product through that character — make it playful and goofy, eager and helpful, or whatever you need it to be. With that much-untapped potential, mascots are perfect for non-emotional products.
The trick is timing.
Clippy was so obnoxious because he appeared uninvited, interrupted completely unrelated tasks, and was generally in the way. But if the mascot shows up in a relatively idle moment — for example, the user has just completed a task — it will do its endearing job.
Mascots in UI: RememBear and Yelp
TunnelBear Inc. has recently beta launched another utility that’s cute as a button (no pun intended). RememBear is a password manager, and passwords are supposed to be no joke. But the brilliance of bear cartoons in RememBear is that they are nowhere in sight when you do serious, important things like creating a new entry. Instead, you get a bear hug when you’re done with stage one of signing up for the app and haven’t yet proceeded to stage two — saving your first password. By placing the mascot in this spot, RememBear avoided being in the way but made me smile when I least expected it.
Just like RememBear, Yelp — a widely known app for restaurant reviews — has perfect timing for their mascot. The funny hamster first appeared at the bottom of the iOS app’s settings so that the user would discover it like an Easter egg.
“At Yelp we’re always striving to make our product and brand feel fun and delightful,” says Yoni De Beule, Yelp’s Product Design manager. “We reflect Yelp’s personality in everything from our fun poster designs and funny release notes to internal hackathon projects and Yelp Elite parties. When we found our iPhone settings page to be seriously lacking in the fun department, we decided to roll up our sleeves and fix it.”
The hamster in the iOS app later got company, as the team designed a velociraptor for the Android version and a dog for the web. So whenever — and wherever — you use Yelp, you almost want to run out of recommendations, so that you can see another version of the delightful character.
If you’d like to learn how to create your own mascot, there’s a nice tutorial by Sirine (aka ‘Miss ChatZ’) on Envato Tuts+.
To Wrap It Up…
Not all products are inherently fun the way games, or social media apps are, but even utilities don’t have to be merely utilitarian. Apps that deal with repetitive tasks often struggle with retaining users: people abandon them because they feel bored, and boredom is simply lack of stimulation. By using positive stimuli like humor, movement, unique art, elements of game, and relatable characters we can make users feel a different way — more excited, less distracted, and ultimately happier.
“Accessibility is solved at the design stage.” This is a phrase that Daniel Na and his team heard over and over again while attending a conference. To design for accessibility means to be inclusive to the needs of your users. This includes your target users, users outside of your target demographic, users with disabilities, and even users from different cultures and countries. Understanding those needs is the key to crafting better and more accessible experiences for them.
One of the most common problems when designing for accessibility is knowing what needs you should design for. It’s not that we intentionally design to exclude users, it’s just that “we don’t know what we don’t know.” So, when it comes to accessibility, there’s a lot to know.
How do we go about understanding the myriad of users and their needs? How can we ensure that their needs are met in our design? To answer these questions, I have found that it is helpful to apply a critical analysis technique of viewing a design through different lenses.
“Good [accessible] design happens when you view your [design] from many different perspectives, or lenses.”
A lens is “a narrowed filter through which a topic can be considered or examined.” Often used to examine works of art, literature, or film, lenses ask us to leave behind our worldview and instead view the world through a different context.
For example, viewing art through a lens of history asks us to understand the “social, political, economic, cultural, and/or intellectual climate of the time.” This allows us to better understand what world influences affected the artist and how that shaped the artwork and its message.
Accessibility lenses are a filter that we can use to understand how different aspects of the design affect the needs of the users. Each lens presents a set of questions to ask yourself throughout the design process. By using these lenses, you will become more inclusive to the needs of your users, allowing you to design a more accessible user experience for all.
You should know that not every lens will apply to every design. While some can apply to every design, others are more situational. What works best in one design may not work for another.
The questions provided by each lens are merely a tool to help you understand what problems may arise. As always, you should test your design with users to ensure it’s usable and accessible to them.
Lens Of Animation And Effects
Effective animations can help bring a page and brand to life, guide the users focus, and help orient a user. But animations are a double-edged sword. Not only can misusing animations cause confusion or be distracting, but they can also be potentially deadly for some users.
Fast flashing effects (defined as flashing more than three times a second) or high-intensity effects and patterns can cause seizures, known as ‘photosensitive epilepsy.’ Photosensitivity can also cause headaches, nausea, and dizziness. Users with photosensitive epilepsy have to be very careful when using the web as they never know when something might cause a seizure.
Other effects, such as parallax or motion effects, can cause some users to feel dizzy or experience vertigo due to vestibular sensitivity. The vestibular system controls a person’s balance and sense of motion. When this system doesn’t function as it should, it causes dizziness and nausea.
“Imagine a world where your internal gyroscope is not working properly. Very similar to being intoxicated, things seem to move of their own accord, your feet never quite seem to be stable underneath you, and your senses are moving faster or slower than your body.”
Constant animations or motion can also be distracting to users, especially to users who have difficulty concentrating. GIFs are notably problematic as our eyes are drawn towards movement, making it easy to be distracted by anything that updates or moves constantly.
This isn’t to say that animation is bad and you shouldn’t use it. Instead you should understand why you’re using the animation and how to design safer animations. Generally speaking, you should try to design animations that cover small distances, match direction and speed of other moving objects (including scroll), and are relatively small to the screen size.
To use the Lens of Animation and Effects, ask yourself these questions:
Are there any effects that could cause a seizure?
Are there any animations or effects that could cause dizziness or vertigo through use of motion?
Are there any animations that could be distracting by constantly moving, blinking, or auto-updating?
Is it possible to provide controls or options to stop, pause, hide, or change the frequency of any animations or effects?
Lens Of Audio And Video
Autoplaying videos and audio can be pretty annoying. Not only do they break a users concentration, but they also force the user to hunt down the offending media and mute or stop it. As a general rule, don’t autoplay media.
“Use autoplay sparingly. Autoplay can be a powerful engagement tool, but it can also annoy users if undesired sound is played or they perceive unnecessary resource usage (e.g. data, battery) as the result of unwanted video playback.”
You’re now probably asking, “But what if I autoplay the video in the background but keep it muted?” While using videos as backgrounds may be a growing trend in today’s web design, background videos suffer from the same problems as GIFs and constant moving animations: they can be distracting. As such, you should provide controls or options to pause or disable the video.
Along with controls, videos should have transcripts and/or subtitles so users can consume the content in a way that works best for them. Users who are visually impaired or who would rather read instead of watch the video need a transcript, while users who aren’t able to or don’t want to listen to the video need subtitles.
To use the Lens of Audio and Video, ask yourself these questions:
Are there any audio or video that could be annoying by autoplaying?
Is it possible to provide controls to stop, pause, or hide any audio or videos that autoplay?
Do videos have transcripts and/or subtitles?
Lens Of Color
Color plays an important part in a design. Colors evoke emotions, feelings, and ideas. Colors can also help strengthen a brand’s message and perception. Yet the power of colors is lost when a user can’t see them or perceives them differently.
Because colors and their meanings can be lost either through cultural differences or color blindness, you should always add a non-color identifier. Identifiers such as icons or text descriptions can help bridge cultural differences while patterns work well to distinguish between colors.
Oversaturated colors, high contrasting colors, and even just the color yellow can be uncomfortable and unsettling for some users, prominently those on the autism spectrum. It’s best to avoid high concentrations of these types of colors to help users remain comfortable.
Poor contrast between foreground and background colors make it harder to see for users with low vision, using a low-end monitor, or who are just in direct sunlight. All text, icons, and any focus indicators used for users using a keyboard should meet a minimum contrast ratio of 4.5:1 to the background color.
You should also ensure your design and colors work well in different settings of Windows High Contrast mode. A common pitfall is that text becomes invisible on certain high contrast mode backgrounds.
To use the Lens of Color, ask yourself these questions:
If the color was removed from the design, what meaning would be lost?
How could I provide meaning without using color?
Are any colors oversaturated or have high contrast that could cause users to become overstimulated or uncomfortable?
Does the foreground and background color of all text, icons, and focus indicators meet contrast ratio guidelines of 4.5:1?
Lens Of Controls
Controls, also called ‘interactive content,’ are any UI elements that the user can interact with, be they buttons, links, inputs, or any HTML element with an event listener. Controls that are too small or too close together can cause lots of problems for users.
Small controls are hard to click on for users who are unable to be accurate with a pointer, such as those with tremors, or those who suffer from reduced dexterity due to age. The default size of checkboxes and radio buttons, for example, can pose problems for older users. Even when a label is provided that could be clicked on instead, not all users know they can do so.
Controls that are too close together can cause problems for touch screen users. Fingers are big and difficult to be precise with. Accidentally touching the wrong control can cause frustration, especially if that control navigates you away or makes you lose your context.
Controls that are nested inside another control can also contribute to touch errors. Not only is it not allowed in the HTML spec, it also makes it easy to accidentally select the parent control instead of the one you wanted.
It’s also recommended that controls be placed far enough apart to reduce touch errors. Microsoft recommends at least 8 pixels of spacing while Google recommends controls be spaced at least 32 pixels apart.
Technology today is very different than it was 20 years ago. Today, browsers can be used on any device of any size, from a small watch to a huge 4K screen. We can no longer use fixed font sizes to design our sites. Font sizes must be as responsive as the design itself.
The font itself should be easy to read. You may be wondering if one font is more readable than another. The truth of the matter is that the font doesn’t really make a difference to readability. Instead it’s the font style that plays an important role in a fonts readability.
Decorative or cursive font styles are harder to read for many users, but especially problematic for users with dyslexia. Small font sizes, italicized text, and all uppercase text are also difficult for users. Overall, larger text, shorter line lengths, taller line heights, and increased letter spacing can help all users have a better reading experience.
To use the Lens of Font, ask yourself these questions:
Is the design flexible enough that the font could be modified to a comfortable reading level by the user?
Is the font style easy to read?
Lens Of Images and Icons
They say, “A picture is worth a thousand words.” Still, a picture you can’t see is speechless, right?
Images can be used in a design to convey a specific meaning or feeling. Other times they can be used to simplify complex ideas. Whichever the case for the image, a user who uses a screen reader needs to be told what the meaning of the image is.
As the designer, you understand best the meaning or information the image conveys. As such, you should annotate the design with this information so it’s not left out or misinterpreted later. This will be used to create the alt text for the image.
Since knowing how to describe an image can be difficult, there’s a handy decision tree to help when deciding. Generally speaking, if the image is decorational or there’s surrounding text that already describes the image’s information, no further information is needed. Otherwise you should describe the information of the image. If the image contains text, repeat the text in the description as well.
Descriptions should be succinct. It’s recommended to use no more than two sentences, but aim for one concise sentence when possible. This allows users to quickly understand the image without having to listen to a lengthy description.
As an example, if you were to describe this image for a screen reader, what would you say?
Since we describe the information of the image and not the image itself, the description could be Vincent van Gogh’s The Starry Night since there is no other surrounding context that describes it. What you shouldn’t put is a description of the style of the painting or what the picture looks like.
This way, users can still get the most important information quickly but have the ability to dig in further if they wish. If the image is of a chart, you should repeat the data of the chart just like you would for text in the image.
If the platform you are designing for allows users to upload images, you should provide a way for the user to enter the alt text along with the image. For example, Twitter allows its users to write alt text when they upload an image to a tweet.
To use the Lens of Images and Icons, ask yourself these questions:
Does any image contain information that would be lost if it was not viewable?
How could I provide the information in a non-visual way?
If the image is controlled by the user, is it possible to provide a way for them to enter the alt text description?
Lens Of Keyboard
Keyboard accessibility is among the most important aspects of an accessible design, yet it is also among the most overlooked.
There are many reasons why a user would use a keyboard instead of a mouse. Users who use a screen reader use the keyboard to read the page. A user with tremors may use a keyboard because it provides better accuracy than a mouse. Even power users will use a keyboard because it’s faster and more efficient.
A user using a keyboard typically uses the tab key to navigate to each control in sequence. A logical order for the tab order greatly helps users know where the next key press will take them. In western cultures, this usually means from left to right, top to bottom. Unexpected tab orders results in users becoming lost and having to scan frantically for where the focus went.
Sequential tab order also means that they must tab through all controls that are before the one that they want. If that control is tens or hundreds of keystrokes away, it can be a real pain point for the user.
By making the most important user flows nearer to the top of the tab order, we can help enable our users to be more efficient and effective. However, this isn’t always possible nor practical to do. In these cases, providing a way to quickly jump to a particular flow or content can still allow them to be efficient. This is why “skip to content” links are helpful.
A good example of this is Facebook which provides a keyboard navigation menu that allows users to jump to specific sections of the site. This greatly speeds up the ability for a user to interact with the page and the content they want.
When tabbing through a design, focus styles should always be visible or a user can easily become lost. Just like an unexpected tab order, not having good focus indicators results in users not knowing what is currently focused and having to scan the page.
Changing the look of the default focus indicator can sometimes improve the experience for users. A good focus indicator doesn’t rely on color alone to indicate focus (Lens of Color), and should be distinct enough to easily allow the user to find it. For example, a blue focus ring around a similarly colored blue button may not be visually distinct to discern that it is focused.
Although this lens focuses on keyboard accessibility, it’s important to note that it applies to any way a user could interact with a website without a mouse. Devices such as mouth sticks, switch access buttons, sip and puff buttons, and eye tracking software all require the page to be keyboard accessible.
By improving keyboard accessibility, you allow a wide range of users better access to your site.
To use the Lens of Keyboard, ask yourself these questions:
What keyboard navigation order makes the most sense for the design?
How could a keyboard user get to what they want in the quickest way possible?
Is the focus indicator always visible and visually distinct?
Lens Of Layout
Layout contributes a great deal to the usability of a site. Having a layout that is easy to follow with easy to find content makes all the difference to your users. A layout should have a meaningful and logical sequence for the user.
With the advent of CSS Grid, being able to change the layout to be more meaningful based on the available space is easier than ever. However, changing the visual layout creates problems for users who rely on the structural layout of the page.
The structural layout is what is used by screen readers and users using a keyboard. When the visual layout changes but not the underlying structural layout, these users can become confused as their tab order is no longer logical. If you must change the visual layout, you should do so by changing the structural layout so users using a keyboard maintain a sequential and logical tab order.
The layout should be resizable and flexible to a minimum of 320 pixels with no horizontal scroll bars so that it can be viewed comfortably on a phone. The layout should also be flexible enough to be zoomed in to 400% (also with no horizontal scroll bars) for users who need to increase the font size for a better reading experience.
To use the Lens of Layout, ask yourself these questions:
Does the layout have a meaningful and logical sequence?
What should happen to the layout when it’s viewed on a small screen or zoomed in to 400%?
Is content that is related or changes due to user interaction in close proximity to one another?
Lens Of Material Honesty
Material honesty is an architectural design value that states that a material should be honest to itself and not be used as a substitute for another material. It means that concrete should look like concrete and not be painted or sculpted to look like bricks.
Material honesty values and celebrates the unique properties and characteristics of each material. An architect who follows material honesty knows when each material should be used and how to use it without tarnishing itself.
Material honesty is not a hard and fast rule though. It lies on a continuum. Like all values, you are allowed to break them when you understand them. As the saying goes, they are “more what you’d call “guidelines” than actual rules.”
Links and buttons have different behaviors and affordances. A link is activated with the enter key, typically takes you to a different page, and has a special context menu on right click. Buttons are activated with the space key, used primarily to trigger interactions on the current page, and have no such context menu.
When a link is styled to look like a button or vise versa, a user could become confused as it does not behave and function as it looks. If the “button” navigates the user away unexpectedly, they might become frustrated if they lost data in the process.
“At first glance everything looks fine, but it won’t stand up to scrutiny. As soon as such a website is stress‐tested by actual usage across a range of browsers, the façade crumbles.”
Where this becomes the most problematic is when a link and button are styled the same and are placed next to one another. As there is nothing to differentiate between the two, a user can accidentally navigate when they thought they wouldn’t.
Autocomplete is used to suggest or predict the rest of a word a user is typing. An autocomplete menu allows a user to select from a large list of options when not all options can be shown.
An autocomplete menu is typically attached to an input field and is navigated with the up and down arrow keys, keeping the focus inside the input field. When a user selects an option from the list, that option will override the text in the input field. Autocomplete menus are meant to be lists of just text.
The problem arises when an autocomplete menu starts to gain more behaviors. Not only can you select an option from the list, but you can edit it, delete it, or even expand or collapse sections. The autocomplete menu is no longer just a simple list of selectable text.
The added behaviors no longer mean you can just use the up and down arrows to select an option. Each option now has more than one action, so a user needs to be able to traverse two dimensions instead of just one. This means that a user using a keyboard could become confused on how to operate the component.
Screen readers suffer the most from this change of behavior as there is no easy way to help them understand it. A lot of work will be required to ensure the menu is accessible to a screen reader by using non-standard means. As such, it will might result in a sub-par or inaccessible experience for them.
To avoid these issues, it’s best to be honest to the user and the design. Instead of combining two distinct behaviors (an autocomplete menu and edit and delete functionality), leave them as two separate behaviors. Use an autocomplete menu to just autocomplete the name of a user, and have a different component or page to edit and delete users.
To use the Lens of Material Honesty, ask yourself these questions:
Is the design being honest to the user?
Are there any elements that behave, look, or function as another element?
Are there any components that combine distinct behaviors into a single component? Does doing so make the component materially dishonest?
Lens Of Readability
Have you ever picked up a book only to get a few paragraphs or pages in and want to give up because the text was too hard to read? Hard to read content is mentally taxing and tiring.
Sentence length, paragraph length, and complexity of language all contribute to how readable the text is. Complex language can pose problems for users, especially those with cognitive disabilities or who aren’t fluent in the language.
Along with using plain and simple language, you should ensure each paragraph focuses on a single idea. A paragraph with a single idea is easier to remember and digest. The same is true of a sentence with fewer words.
Another contributor to the readability of content is the length of a line. The ideal line length is often quoted to be between 45 and 75 characters. A line that is too long causes users to lose focus and makes it harder to move to the next line correctly, while a line that is too short causes users to jump too often, causing fatigue on the eyes.
“The subconscious mind is energized when jumping to the next line. At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line”
— Typographie: A Manual of Design
You should also break up the content with headings, lists, or images to give mental breaks to the reader and support different learning styles. Use headings to logically group and summarize the information. Headings, links, controls, and labels should be clear and descriptive to enhance the users ability to comprehend.
To use the Lens of Readability, ask yourself these questions:
Is the language plain and simple?
Does each paragraph focus on a single idea?
Are there any long paragraphs or long blocks of unbroken text?
Are all headings, links, controls, and labels clear and descriptive?
Lens Of Structure
As mentioned in the Lens of Layout, the structural layout is what is used by screen readers and users using a keyboard. While the Lens of Layout focused on the visual layout, the Lens of Structure focuses on the structural layout, or the underlying HTML and semantics of the design.
As a designer, you may not write the structural layout of your designs. This shouldn’t stop you from thinking about how your design will ultimately be structured though. Otherwise, your design may result in an inaccessible experience for a screen reader.
Take for example a design for a single elimination tournament bracket.
How would you know if this design was accessible to a user using a screen reader? Without understanding structure and semantics, you may not. As it stands, the design would probably result in an inaccessible experience for a user using a screen reader.
To understand why that is, we first must understand that a screen reader reads a page and its content in sequential order. This means that every name in the first column of the tournament would be read, followed by all the names in the second column, then third, then the last.
If all you had was a list of seemingly random names, how would you interpret the results of the tournament? Could you say who won the tournament? Or who won game 6?
With nothing more to work with, a user using a screen reader would probably be a bit confused about the results. To be able to understand the visual design, we must provide the user with more information in the structural design.
This means that as a designer you need to know how a screen reader interacts with the HTML elements on a page so you know how to enhance their experience.
Landmark Elements (header, nav, main, and footer)
Allow a screen reader to jump to important sections in the design.
Headings (h1 → h6)
Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
Lists (ul and ol)
Group related items together, and allow a screen reader to easily jump from one item to another.
Trigger interactions on the current page.
Navigate or retrieve information.
Tell screen readers what each form input is.
Knowing this, how might we provide more meaning to a user using a screen reader?
To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.
Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.
By just adding headings, the content would read as follows:
This is already a lot more understandable than before.
The information still doesn’t answer who won a game though. To know that, you’d have to understand which game a winner plays next to see who won the previous game. For example, you’d have to know that the winner of game four plays in game six to know who advanced from game four.
We can further enhance the experience by informing the user who won each game so they don’t have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.
We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.
If we translate this back into a visual design, the result could look as follows:
“If the end result is visually the same as where we started, why did we go through all this?” You may ask.
The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.
To use the Lens of Structure, ask yourself these questions:
Can I outline a rough HTML structure of my design?
How can I structure the design to better help a screen reader understand the content or find the content they want?
How can I help the person who will implement the design understand the intended structure?
Lens Of Time
Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.
Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.
“The designer should assume that people will be interrupted during their activities”
— The Design of Everyday Things
Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.
To use the Lens of Time, ask yourself this question:
Is it possible to provide controls to adjust or remove time limits?
Bringing It All Together
So now that you’ve learned about the different lenses of accessibility through which you can view your design, what do you do with them?
The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.
Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.
By looking through your design one lens at a time, you’ll be able to refine the experience to better meet users’ needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.
Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”
There are lots of ways to measure the performance of a web page and the most popular one is by far Google Analytics. But knowing exactly what images, words, or elements on your site catch your site visitor’s specific attention is not possible with these tools alone.
Sometimes, you simply want to know what makes your page great in terms of design, layout, content structure (you name it) and what prompts people to take one intentional action instead of another. You will be probably surprised to learn that there’s actually a solution to your question: heatmaps.
Unlike Google Analytics, which works with numbers and statistics, the heatmaps show you the exact spots that receive the most engagement on a given page. Through heatmaps, you will know what are the most clicked areas on a page, what paragraphs people select while scanning your content, and what is the scrolling behavior of your clients (e.g., how many went below the fold or how many reached the bottom of the page).
In this article, we will talk about why heatmaps are so efficient for your marketing goals and how they can be integrated with your WordPress site.
Why Use Heatmaps On Your WordPress Site
Before progressing to the “how to” part, you might want to know why it’s worth it to dedicate valuable time on implementing heatmaps for your WordPress site and what their actual role is.
First off, visual marketing is constantly growing as many more people now respond positively to a modern and user-friendly interface and skip a plain, non-interactive one. If a certain action requires too many steps and a hard to maneuver platform, they eventually give up, and you lose clients.
Of course, great content is still the key, but the way your site is structured and combines various elements will influence the activity of your visitors, which is either convert (engage) or leave.
Marketing experts researched this kind of behavior over time:
37% of marketers think visual marketing is the most important form of content for their business, second only to blogging (38%);
But what were heatmaps built for specifically? A heatmap can help you discover valuable and, sometimes, surprising facts about your audience.
If you add one to your WordPress site, you can:
Track your visitors’ clicks and become aware of their expectations while browsing through your site. This way, you can adjust your pages and make them catchier and more compelling.
Find out what is of interest for people. You’ll know what information they are looking for, so you can put it in the spotlight and use it to your favor.
Analyze the scrolling behavior. See how many visitors reached the bottom area of the site and how many left immediately without browsing further through the sections.
Keep an eye on the cursor movement and see what pieces of content your audience is hovering over (or selecting) in a text.
Again, using heatmaps is not only about tracking clicks for fun, it can have many implications for your business’ growth. They can influence purchases or conversions of any kind (it depends on what you want to achieve with your site).
You will know if your call-to-action buttons get the attention you intended, compared to other elements on the same page. Maybe other design elements you placed on your sales page distract people from clicking the buy button, and this can be seen on the hot spots map. Based on the results, you can change the way they look, their position, their styling, etc., hence sales increase.
Bloggers can also use the heatmaps because this way they will know how to create customer-friendly, appealing layouts for their content. Some layouts generate more traffic than others, and it’s up to you to find out which ones.
If people linger on a certain piece of information, it means it’s valuable for them, and you can use it to your favor by placing a link or a button nearby. Or you can simply create a separate post with even more information on that topic.
How To Add A Heatmap To Your WordPress Site
No matter if we are talking about plugins originally made for WordPress or third-party tools, the integration is not difficult at all. Usually, the most difficult part about heatmaps is the interpretation of the results — the conclusions along with the implications they have on your business and how to use them to your advantage.
It’s important to mention that all these tools (except for Heatmap for WordPress) work with other website builders as well, not only WordPress. They are universal; it’s just that the WordPress developers found an easy way to integrate them with the latter so that the non-coders won’t struggle much with it. To integrate them with any other website builder, such as Squarespace for instance, you need to play with the code a little bit.
So, how to set up the heatmaps on your site? Let’s use Hotjar because it does a good job overall. It is intuitive, modern, and quick to implement in WordPress.
In this case, let’s take Hotjar Connecticator plugin as an example. After installing and activating it, you need to create an account on hotjar.com, add the URL of the site you want to monitor (you can add more sites later), and copy the provided tracking code to the plugin’s page in your WordPress dashboard (as seen below).
Now, it’s time to create the heatmap, which can be done right from the Hotjar platform (you can’t customize anything on your WordPress dashboard). So, click on Heatmaps, then New Heatmap.
Next, you need to choose your Page Targeting preferences. Do you want to track the hot spots on a single page? Do you test several pages at the same time to compare their results? That works too. If you need the latter, you have some URL formats available, so you can make sure you can target all the pages from a specific category (sorted by type, publishing date, etc.) You can even write the exact words that the links contain and Hotjar starts tracking the pages.
An interesting thing about Hotjar is that it lets you exclude page elements that you don’t want to monitor by adding their CSS selectors. This way, you can avoid being distracted by unneeded things when you compare or analyze the results and can focus only on the ones that you want to test.
After you create the heatmap, the first screenshot with the hot spots will be provided only after the page starts to get visitors and clicks, so don’t expect results right away. The tool tracks all the views you had on that page since the heatmap was created so that you can make reports based on the views and the number of clicks. This kind of reports let you know you how clickable (or not) your content is.
Here’s how the first screenshot provided by Hotjar looks (the testing was done on an uncustomized version of Hestia WordPress theme):
Another awesome thing about this tool is that it provides you the option to create simple and interactive polls to ask your users why they’re leaving your page or what were the things they didn’t enjoy about your page.
Case Study: How We Improved Landing Pages On ThemeIsle And CodeinWP With Heatmaps
The theory sounds captivating, and it’s almost always easier than the practice itself. But does this method really work? Is it efficient? Do you get pertinent results and insights at the end of the day?
The answer is: Yes, if you have patience.
We love heatmaps at ThemeIsle and use them on many of our pages. The pages are mostly related to WordPress themes since the company is an online shop that sells themes and plugins for this particular platform.
One of the most popular pieces of content from CodeinWP blog is related to themes as well. We have a large range of listings, and many of them rank in top three of Google results page. Lately, we have experimented with two types of layouts for the lists: one that has a single screenshot presenting the theme’s homepage and another providing three screenshots: homepage, single post page, and mobile display.
The main thing we noticed after comparing the two versions was that quite the same number of people reached to end of the list, but the clicks distribution was different: the listing with more visuals didn’t get as many clicks in the bottom half as the one with only one screenshot. This means that the list with more visuals is more explanatory because it offers more samples from the theme’s design, which helps people realize faster which ones are appealing to them. Given this fact, there’s no need for extra clicks to see how a theme looks.
In the one-screenshot case, people dig deeper to find more details about a theme, since there’s only the homepage that they can see from the picture. Hence, they will click more to get to the theme’s page and launch its live demo.
Another example of using heatmaps is Hestia theme’s documentation page. During the testing process, we noticed that a significant number of users are interested in upgrading to the premium version after seeing the number of clicks on the word “Upgrade”, which convinced us to move the upgrade button to a more obvious place and improve the destination page that contains the premium features of the theme.
Speaking of premium features, another experiment of ours was to track the cursor movement and see what are the features people are hovering over more when checking the documentation. Based on the results, we used the most popular items on many landing pages that were seeking conversion – which, in this case, was the upgrade to the premium theme by our free users.
We also created a heatmap for our FAQ page to track the less clicked questions, which we replaced subsequently with other relevant ones. The test is still in progress, as we are trying to improve our support services and offer the customers smoother experiences with our products.
The Importance Of A/B Testing
After getting great insights from the heatmaps, you don’t have to stop there. Create alternatives for your pages based on the results and use the A/B testing method to see which ones perform better.
A/B testing is probably the most popular method with which you can compare two or more versions of the same page. The end goal is to find out which one converts better. You should try it because it definitely helps you get closer to your goals and offers you a new perspective on how your content is being consumed by your audience.
So, after using heatmaps for a while and tracking the behavior of your users, start to make a plan on how to improve your site’s usability. Create alternatives, don’t stick with only one. If you have more than one idea, put them all to test and observe people’s reactions. The goal here is to create the most efficient landing page, the one that has the best chances to convert or to receive the expected engagement.
But how does A/B testing work?
Well, there are several plugins built to make this method work on your WordPress site, but Nelio A/B Testing is the most popular based on the reviews it has on WordPress.org directory (and it’s also free). After installing the plugin, you can choose the type of experiment you want to run. It has a large range of options to compare: pages, posts, headlines, widgets, and more.
Now, starting an experiment is really easy, it takes a few minutes. When you create it, you need to add the original page you want to run tests on, the alternative you want to compare it to, and the goal (what you are trying to achieve with the experiment: get page views, clicks, or direct people to an external source). After stopping the experiments, the plugin will show you detailed results that revolve around the goal you set in the first place. So, at the end of the test, you can tell which page performed better, and you can use it on your site… until a new idea comes to your mind and you should start testing again. Because digital marketing is not about assuming and hoping that things will happen, it’s about making things happen. That’s why you should always test, test, and test again.
By the way, with Nelio A/B Testing plugin, you can create heatmaps too, but they are not as sophisticated as the plugins listed earlier and don’t deliver as many insights. But you can try it out if you want to run quick experiments and need some basic information about a page.
If you want to have a successful business or to be the author of a bold project, keep adjusting your strategies. Try new things every day, every week. To be able to adjust, it’s not enough to simply know your audience but to also test its behavior and make the next moves based on that.
Marketing is not about guessing what your customers want; it’s about finding it yourself and offering them that one thing they need. The heatmaps method will help you along the way by sketching people’s behavior on your site and highlighting what they care most about. It’s simple, fast, visual (you don’t need to dig too much into statistics to understand your audience), and fun.
Knowing what your users’ actions are when they land on your web pages could be something truly fascinating, and you can learn a lot from it.
You may have noticed that some of your Google Analytics data isn’t entirely accurate. Whether you saw a sudden, unwarranted change in user behavior, picked up on major differences after a redesign, or found some unexplainable information within a report, there are many things that can indicate issues with your data. And that’s completely normal. Google Analytics is one of the most popular (if not the most popular) platforms for monitoring site performance. It can provide tons of valuable insight and is considered by many SEOs and site owners to be an indispensable tool. But it isn’t perfect. In fact,…