How to Design Checkout UX Like a Pro

The checkout experience is arguably the most crucial aspect of your online store. Any hiccups and the customer could get distracted, disappointed, or leave—outing your company (that pays your salary) of precious revenue. It needs to be perfect. As a user experience designer, it’s your job to ensure the checkout experience is seamless and effective. No mistakes.

In this article, I’d like to discuss checkout design and several tenets that make for the best shopping-to-payment experience. I know. When you hear “checkout design,” you’re probably jumping for joy…

…but it’s where the rubber meets the road when it comes to making money online. Without a checkout, you don’t get paid. So it better be good.

To answer this question of what makes the best checkout experience, I sought out three veteran UX designers at major ecommerce brands: ThinkGeek, Shopify, and REI. These companies see millions and millions of dollars and users pass through their checkout “lanes” daily. The three folks were:

  • Matt Chwat, Director of User Experience at ThinkGeek. Matt’s been at ThinkGeek, the Internet’s #1 largest (and nerdiest) online store, for nine years. He’s as much a front end developer as he is a UX designer.
  • Kevin Clark, Design Lead at Shopify. Kevin Clark is the Design Lead at Shopify’s Montreal-based purchase experience design team. He oversees the team responsible for the checkout experience across the ecommerce platform. As soon as a user clicks the cart icon, you’ve entered the domain of Kevin’s team. Everything from email receipts, merchant-customer interactions, to the live order status page—if you’re purchasing something on a Shopify site, odd’s are, Kevin and his team had a hand in it.
  • Catherine Ho, Senior UX Designer at REI. Formerly at Intuit, Catherine’s been with REI for two years in Seattle. She loves UX because it focuses on people and it’s both technical and creative. Her role at REI is hybrid between research and design. Her projects have included in-store devices, such as an iPod touch for the POS system, iOS apps and membership and accounts, specifically redesigning the sign-in and wishlist experiences.

Throughout my conversations with them, I noticed 5 common principles to remember when designing seamless checkouts.

1. Shopify’s three gold standards of the checkout experience: easy to understand, simple, and fast

In 2016, Kevin Clark and his team were responsible for redesigning the checkout experience for all Shopify sites. That’s almost half a million stores. As a chart-topper in the ecommerce space, expectations were high.

Working closely with the Themes team, Kevin and his team focused on the standardizing a universal Shopify checkout experience. It’s the same in all Shopify themes.

Users need to feel secure and comfortable when dealing with money. The checkout experience needed to be consistent and familiar across all online stores.

—Kevin Clark, Shopify

Beyond the foundational sense of security, the Shopify purchase experience should be easy to understand, simple, and fast.

The best way to design something as transactional and process-driven as the checkout is to test everything.

For example, to test an assumption about how many steps should be in the checkout experience, he and his team conducted a test comparing one-page, two-page, and three-page experiences — each with the same information.

Example of single page checkout:

Example of a two-page checkout:

The results showed one page felt overwhelming to the user because it presented too much information on one page, two pages divided the steps awkwardly, and three pages felt simple and easy.

The three steps are Customer Information, Shipping Method, and Payment:

We learned that by grouping relevant information together in chunks, and putting it in a logical order, you allow the user to focus on one task at a time. There is, however, a limit. You don’t want to go too far, like having a ten step checkout experience.

—Kevin Clark, Shopify

These three steps are set in stone across all sites. But other than that, store owners are permitted a handful of customizations to match their brand.

We looked at thousands and thousands of stores and determined that we can replicate almost every store’s design by giving the user five default customization choices: fonts, accent colors, button colors, header image, and the logo.

But with customizations, Kevin recommends not overdoing it:

Don’t give users so much rope that they hang themselves.

Rather, there should be controls set in place to protect a baseline experience that is consistent, familiar, and secure. An example of this is the Shopify system knows which colors to use and not use based on a contrast algorithm (i.e., light text on dark background) and adjusts for readability.

The checkout system Kevin and his team created laid the foundation for future work to be built on top of it. It’s a component-based system, so new components can be added, such as fields and button elements, and features can be modified or added, without overhauling the entire system.

2. The ultimate goal: “frictionlessness”

The father of Windows and Internet Explorer, former Microsoft-legend Steven Sinofsky currently advises companies like Product Hunt, Box, and sits on the board of Andreessen Horowitz. He is a designer at heart and a master of product development. In his post Frictionless Product Design, he pointed out the difference between minimalism and frictionless design.

He wrote that while minimalist design reduces the surface area of an experience, frictionless design is about reducing the energy required by an experience. This is especially important in checkout design.

He gives 6 principles of frictionless design:

  1. Decide on a default rather than options
  2. Create one path to a feature or task
  3. Offer personalization rather than customization
  4. Stick with changes you make
  5. Build features, not futzers
  6. Guess correctly all the time

At REI, Catherine recently implemented an example of frictionless design on a project. Her team found that when a customer is ready to add an item to their cart, signing-in sends the customer to a new webpage, thus breaking the shopping experience. To fix this, she A/B tested a sign-in widget that opened a drop down sign-in modal, keeping the experience on-page instead of sending the shopper to a new sign-in page.


The data analytics showed no difference in traffic or drop-offs, so they kept it. Visitors could sign in and continue shopping from the same page without losing their sense of place. This is an example of Sinofsky’s #2 principle: Create one path to a feature or task. Instead of creating a fork in the road to sign in or continue shopping, the user’s path is unilateral.

It’s worth mentioning Sinofsky’s #5 principle here as well: Build features, not futzers. What the heck is a “futzer?”

A futzer is the word “futzing” (which probably sounds more familiar to you) cleverly disguised as a noun. It’s a thing that causes pointless fiddling around and wasted time.

This is where designers get tripped up. How do you determine the difference between a feature and a futzer? As Sinofsky alludes, it requires a delicate balance of giving the user what they want but not so much that it overwhelms them.

A great way to illustrate this is to look at the top reasons shoppers abandon their shopping carts. I’d like to highlight two cart abandonment studies and pull insights from both.

In the first study (2013), payment processing company Worldpay surveyed why people left their online shopping carts without paying.


Six of the reasons given are related to this balance between features and futzers. Check it out:

  1. “Website navigation too complicated” … Too many futzers.
  2. “Process was taking too long” … Too many futzers.
  3. “Excessive payment security checks” … Too many futzers.
  4. “Concerns about payment security” … Not enough features.
  5. “Delivery options were unsuitable” … Not enough features.
  6. “Price presented in a foreign currency” … Not enough features.

In other words, companies are losing revenue because shoppers leave when there are too many futzers and not enough features.

In a similar study performed in 2016 by Baymard Institute usability researchers found that 27% of US online shoppers abandoned their carts solely due to a “too long / complicated checkout process.

Baymard’s benchmark database revealed that the average US checkout flow contains 23.48 form elements displayed to users by default. However, the results of the study demonstrated it’s possible to reduce the average checkout length by 20-60%.

The qualitative 1:1 moderated usability testing and eye-tracking research of the checkout study showed that an ideal checkout flow can be reduced to as little as 12 form elements (7 form fields, 2 checkboxes, 2 drop-downs, and 1 radio button interface).

How many form elements does your checkout have? Anything more than 12 may indicate the presence of futzers in your checkout flow. How do you cut down the number of form elements? Unique testing is the ultimate answer, but, for now, the next steps will suffice.

3. Maintaining Data

Here’s a question to ask your checkout designers: how are you leveraging data throughout the checkout process?

Matt at ThinkGeek believes the best checkout experiences collect only the necessary data and then maintain that data all the way through the end of the transaction:

This is especially important for account holders. Don’t ask for email again, and pre-fill the name when you already have it.

If your database has information about a customer, use it to reduce the number of fields he or she has to fill out. Amazon’s One-Click purchase feature is a prime example of this.


By knowing the customer’s data, it can correctly “guess” the user’s preferred shipping mode, address, and payment details with zero added effort from the user. With a one-click-one-sale checkout, there are no opportunities for chokepoints.

Shopify maintains data with “checkpoints.” Meaning, if a user proceeds through Shipping but drops out during Payment, the collected data is maintained and the user can pick up their journey right where they left off.

4. Forgiving Design

The final common thread between all three brands was the idea of “forgiving design”—where the designer’s goal is to prevent any mistakes in the checkout process. Instead of being strict on mistakes, great checkouts let users get away with being, for lack of a better word, lazy.

Below are three examples of “forgiving design” in the checkout flow: 1) adding gift cards and discounts, 2) disabling the “Submit” button, and 3) inputting phone numbers.

In the first example, all three brands have gift cards and discounts—well-established tools for closing sales online. But typically, it’s not always clear where to input the codes or redeem the cards.

According to Kevin Clark:

Usually, they’re two separate fields and people mismatch them all the time.

At Shopify, a significant engineering effort allowed users to paste in a gift card or discount code into the same field and the system sorts it out automatically. It’s impossible to make a mistake.

Second, sometimes shops will disable or “gray out” the submit/continue button until a user completes all required fields.

Should you do this? It’s a heated debate in the UX community about whether to leave the submit/continue button enabled, but according to the unofficial research of one user on Stack Exchange, around 5% or less of a small sampling of websites keep the submit/continue button disabled.

At Shopify, ThinkGeek, and REI, the submit/continue button is always enabled, even with missing information. Why? For three reasons:

  1. It prevents user confusion. The “grayed out” button tells a shopper something is wrong but doesn’t indicate where exactly and sends the user on a blind hunt for the error. An active button would convey clickability which would then result in a simple message (often in red) on the field needing a valid input.
  2. It’s accessible. In some instances (rare), a user may have Javascript disabled in their browser which would prevent the dynamic state change of the button from disabled to enabled.
  3. It prevents developer error. A valid use case or input that should have activated the submit/continue button could have been missed (i.e., internationality), trapping the shopper with no options but to refresh or exit.

Warby Parker does a great job in turning what would usually be an annoyance into a chance to cleverly express some brand personality.

The ThinkGeek checkout page maintains an active “Go to checkout” blue button even when fields are empty.

The “Continue” blue button is active on the empty REI checkout page.

All Shopify stores keep the blue “Continue to shipping method” button active at all times.

Lastly, the third example of forgiving design is phone numbers. One user posted the following problem on Stack Exchange:

Currently on my website users are required to input their phone number in a very specific format (555-555-5555). If you forget the dashes it breaks. Does anyone have a good suggestions for how to be more flexible with allowing users to input in any way they choose, but still allowing the system to validate if it is a real phone number. How are phone extensions handled?

Unforgiving design requires this specific format (i.e., number of characters, dashes vs. periods, spaces). Forgiving design allows users to input it how they want and let the system figure out what the number is.

By allowing for maximum flexibility in typing a phone number, the user is less likely to “make mistakes.”

Another user responded with how to fix this, using forgiving design:

The best approach for user experience is to let the user type in the phone number using the format they are most comfortable with. Don’t break it into separate fields, don’t force a mask, let it be typed freeform. Then, after the user has finished entering the field (by leaving the field for submitting the data), format the number into a standard format for your purposes.

Since you are talking about a Web site, you can do the format on the blur event using the Google libphonenumber project. This tool handles international phone numbers and a wide variety of formats.

The reason this approach is better for the user experience is that it allows the user’s mental model to remain unchanged and allows them to say, “Don’t Make Me Think.” Masking and separate fields force a mental model of phone numbers onto users and requires more thinking.

Similar to the gift cards example, phone numbers should be accepted in any format so that shoppers can proceed “without thinking” or wondering if they were correct.

Forgiving design allows you to reduce the number of fields in your checkout flow, thus helping to eliminate the complaint that 1 in 4 shoppers voiced in Baymard’s checkout usability study (too long / complicated checkout process)

5. Common checkout design mistakes to avoid

Finally, the three ecommerce experts each mentioned and cautioned against three simple errors they’ve encountered when designing checkouts:

Mistake #1: Don’t include an order review. Put yourself in the shoes of a customer who tediously fills out their information only to find themselves doubting they ordered the right item or quantity. Not seeing a chance to review their order before purchase will lead them to bail and start over, or worse, give up. REI keeps the shopper informed throughout the entire checkout process with a floating “Order Summary” box and a clear opportunity to review before placing the order.

In addition to displaying the order summary on the right perpetually throughout the checkout process, REI incorporates a final review alongside placing the order.

Mistake #2: Unhelpful error messages. It’s easy for a customer to enter information incorrectly in the checkout forms. Rather than just displaying “Invalid” or similar unspecific copy, use adaptive error messaging. ThinkGeek’s error messages update live from “This field is required.” to “Please enter a valid [blank]” to show the customer where and why the error is occuring.

ThinkGeek adapts its error messages to indicate more specific instructions.

Mistake #3: Not mobile-friendly. If you’re selling online, this is a no-brainer. Please. If you have an online checkout, don’t put your customers through the pain of zooming in and out, panning around, and squinting at an unresponive checkout.

Takeaways and action items

Checkouts are a part of every ecommerce experience. As the final step before a product is purchased, you don’t want anything to go wrong. I was glad to hear from Matt, Kevin, and Catherine about the five principles they follow to design their customers’ online shopping path:

  1. For the best checkout experience, make sure your checkout design is consistent, familiar, and secure. Does your checkout give the user a sense of familiarity and security?
  2. The ultimate goal is frictionlessness. Go over Sinofsky’s 6 principles and assess your checkout experience, paying special attention to #2 and #5. Are there any features missing or can any futzers be removed?
  3. As your user goes through the purchasing process, maintain their data to make it easy and intuitive. But remember, if you can’t guess correctly every time, don’t guess. What data do you already have that you can use to save the user keystrokes and streamline the purchase process?
  4. Use forgiving design so that users don’t feel like they’ve made a mistake. It’s worth the extra effort to build in forgiving functionality when you see increased conversions. Do you have analytics plugged into your checkout? Where is the greatest point of abandonment? How can you remove this obstacle?
  5. Avoid simple mistakes. Even the best designers are not invincible to overlooking details, especially when it comes to something as “boring” as checkout design. Periodically, go through the your site’s checkout process in incognito mode on a desktop, tablet, and mobile device and ask yourself, “Could this be easier? Simpler? More intuitive?”


YouTube Unveils 1St New Logo Since Launch

Yesterday YouTube launched a major UI revision to all its channels, from mobile, to games consoles. At the same time it’s made the first significant revision to its logo since its launch 12 years ago. The revised logo has been made live on mobile and desktop, and will begin to appear across all channels in the coming days.

Some companies are for ever launching redesigns, others release minor iterative tweaks on a regular basis. YouTube is one of the latter—you’d be forgiven for missing their updates—the change to the logo however is more substantial.

One of the most charming elements is the logo change animation, that sadly won’t be used anywhere but design blogs.

Every choice that has been made feels right

YouTube has dropped the red, rounded box—that vaguely resembled an old-style TV screen—surrounding the ‘Tube’ part of its name, and in the process redesigned the text. The rounded red square now sits to the left with a play icon. It’s an extremely smart move. The play icon, has become synonymous with YouTube; it is more minimal, and more flexible than the full logotype. The play button brands any video as YouTube wherever a YouTube video is embedded. However, the play button does not sit well with the original YouTube logo (the two rounded squares being incompatible in a single mark). The logo redesign unifies the universally recognized UI element, with the larger corporate logotype.

Sometimes the hardest process in design is not spotting mistakes, but recognizing when you have something that works; the play button icon works on every level, and building their identity around it might be the smartest thing YouTube have done in some time.

YouTube’s old logo (left), and their new logo (right).

The text itself has also been redesigned. The new letterforms are slightly more rounded, with tapered spurs, resulting in a more contemporary, and more legible wordshape.

It is an excellently crafted logotype, carried out by an in-house team lead by creative director Christopher Bettig. Every choice that has been made feels right, and YouTube’s aging logo suddenly feels fresh and interesting again.


11 Ways Breadcrumbs Bolster UX Design

Website breadcrumbs enhance user experience encouraging users to dig deeper into your site’s hierarchy, while also telling visitors exactly where they are on any given page. Google’s breadcrumb schema is another valuable reason to setup breadcrumbs. But the design factor is always tricky so it helps to study examples and gather ideas.

These are some of my favorite breadcrumb styles and they should provide a nice starting point for new design projects.

1. Wayfair

Wayfair’s website does a lot right and their entire UX is phenomenal page to page. One thing I really like is their breadcrumb style because it’s not too large, yet also not too small and not obtrusive either.

You’ll find these crumbs on product pages and category pages so they follow you around the whole site. This lets you jump a category or two from any detailed page.

And the breadcrumb bar gets its own little section under the navigation with a different BG color. Not obtrusive but not hard to find either. A great design style and one of my personal favorites.

2. Google Support

Another obvious mention is Google since they’re known for incredible UX work. You’ll find breadcrumbs on most Google products with tiered pages and one of the best is the Google Support site.

Their support pages offer advice on everything from schema to analytics and the Search Console tool. Each page has breadcrumbs and these crumbs occupy a similar space as the page heading so they’re clearly visible.

Again notice how these links blend in nicely without jumping off the page. They feel very natural in the design and this should always be the goal with your breadcrumbs.

3. MSDN Docs

There’s a real unique breadcrumb feature in the MSDN Docs that I really like. It has all the typical design features like arrow icons and categorical links, but the final link in the chain has a custom dropdown with extra pages.

I’ve never seen this before on any breadcrumb design but it’s incredibly valuable to the user. Typically it’d require another navigation menu to access these links but with a site like Microsoft there are so many pages to go through.

Not to mention documentation can be rather complex so it’s not the easiest stuff to create breadcrumbs for. This technique is brilliant and well worth using if you have a complex hierarchy on your site.

4. Apple

On the Apple website I’ve seen tons of breadcrumbs across many pages like the online shop pages and product pages. But one minor detail that caught my eye is the footer link area with a small breadcrumb above their bottom links.

Apple is a huge company with a lot of pages and resources. This breadcrumb would be worth adding towards the top of the page too but it certainly doesn’t hurt to being near the bottom.

I’d encourage designers to try this out and see how it works. Footer breadcrumbs certainly aren’t the norm but they do help with visual navigation.

5. TechRadar

The majority of breadcrumbs that I find are usually on company sites or ecommerce shops. But blogs often have their own breadcrumbs too and one good example is the TechRadar article page.

Each breadcrumb is pretty small featuring a link directly to the head category & a copy of the article’s title. For this type of blog it’s tough to justify breadcrumbs because there isn’t much of a hierarchy.

But this works well if you don’t have another place to add the article’s category onto the page.

6. TutsPlus

For a much more detailed breadcrumb design check out the TutsPlus blog. Each article features a small breadcrumb at the very top of the page including the primary and secondary categories.

I like this design a lot because it blends naturally into the headline of the page. So instead of duplicating the headline in a breadcrumb and in a heading tag, this combines it all into one element so the <h1> heading is part of the breadcrumb.

Note this doesn’t use proper Google schema so it doesn’t appear with breadcrumbs in search. But considering that barely affects CTR I value the design and on-page usability far more than SEO benefits (or lack thereof).

7. Coolspotters

Traditional breadcrumbs usually stick with a few text symbols like the forward slash or the right arrow bracket (>). These work because they’ve been used for decades and users are familiar with them.

But I always like to see other breadcrumb design trends like on Coolspotters. They use custom breadcrumb links that have arrows built into the link elements.

You can find plenty of open source breadcrumb styles just like these for your own site. It’s a great way to jazz up this very traditional page element.

8. MarketWatch

Getting back to basics is the online news site MarketWatch. All of their internal posts feature breadcrumb navs with right pointing arrow icons fairly small text.

In this case I think the small text works well. It’s not exactly difficult to use the breadcrumbs but they do feel smaller and less significant than the rest of the page.

Blogs and news sites work better with smaller breadcrumbs because the real focus is the content. Still it’s nice to fit them in somewhere and this design is a great example.

9. Amazon

Everyone loves Amazon for their huge inventory and free shipping. But they also have a fantastic site and there’s no way I could pass over their breadcrumb design.

Many product pages have a set of breadcrumbs near the very top navigation. This is always super long because Amazon’s categories get deep. This is valuable for consumers to see which categories might be worth browsing, and valuable for designers/webmasters to study Amazon’s massive product structure.

But if you scroll down on each product page you’ll find a “product information” or “product details” section with best sellers listings.

This feature uses breadcrumb links to show where the product has sold the best and encourages visitors to click through to those related categories.

Amazon’s breadcrumbs are admirably lengthy so they’re worth studying if you have a site with a very deep hierarchy.

10. Etsy

The massive online DIY/crafts ecommerce site Etsy is constantly advancing their design. It was founded in 2005 and looking at the site now you can see they’ve made some big changes over the past 10+ years.

If you check out any category page you’ll find small breadcrumbs in the top-left corner. These aren’t as prominent compared to the sidebar navigation which really feels like the primary way to search.

But a nice added effect is the total item listing inside the category. Etsy lists how many total items are for sale in each subcat as you dig deeper into the site.

One thing I will complain about is the lack of breadcrumbs on product pages. This seems like a real oversight to the UI and I hope they add that going forward.

11. LinuxInsider

This breadcrumb design isn’t particularly beautiful but it does have a feature that grabs my attention.

You’ll notice a “Next article” link near the top of each LinuxInsider post. This appears directly next to the breadcrumb so it feels like part of the navigation.

Users who interact with breadcrumbs typically want to dig around in those crumb categories so this extra link makes sense. Anyone interested in Linux software may want to jump right to the next article in that category.


Adobe Reveals the Secrets of Email

Adobe shared the results of its 3rd annual consumer email survey today, and while some of the findings are extremely predictable—nobody likes spam—others are downright shocking: for example, business email is 36 times more popular than social message services like Slack. Yeah, let that one sink in…

In fact email, that clunky relic of the early days of the web is actually the most popular form of communication online and its popularity is increasing year on year. And not just amongst the more mature, one of email’s biggest user groups, according to Adobe, is millennials.

Should Businesses Use Email?

Businesses should be using any marketing channel that reaches their target demographic, and with email usage increased across the board according to Adobe’s study, every target demographic uses email.

0% check their email on a smartwatch

Drilling down into the results, smartphones are the most popular way of checking email, with 81% of us doing it regularly. However, when it comes to work email, 62% stick to a laptop or desktop. Tablets continue to slide, with only 6% of personal email and 4% of work email checked on them. Of the people Adobe surveyed, 0% check their email on a smartwatch.

So the choice is clear: if you’re marketing to customers in their personal time focus on mobile-friendly design, for business customers laptops and desktops give you more design freedom.

Designing Good Email

Some of the most interesting findings in the Adobe survey relate to the type of email that marketers send to customers.

Of no surprise to anybody in Adobe’s survey is the fact that 40% of emails are deleted without being read. What will reassure you is that among B2C consumers the preference for being contacted by email (as opposed to SMS, or post, for example) is increasing year on year.

61% of consumers say that email is their first choice when being contacted by brands, but almost everyone says that too many brands focus on promotions, when what they really want to receive is quality, information-driven content.

26% of respondents stated that they did not believe that “Inbox Zero” was possible

On average 82% of work emails are opened, compared to 60% of personal emails.

By far the most complained about element of email communication is frequency. Daily emails are seen as too pushy. Emails that don’t match the recipient’s interests, were also singled out for criticism.

Regardless of age group or gender, personalised email was considered desirable and a major factor in not clicking the ‘Unsubscribe’ link.

The UX of Email

According to Bridgette Darling, Adobe’s Product Marketing Manager and expert on email, one of the key trends highlighted by Adobe’s survey is that we are all developing a healthier relationship with email.

Users tend to check email every few hours, but we’re getting better at ring-fencing the times when email is appropriate. That’s partly due to improved email applications, with improved spam filtering, but it’s also a shift in attitude. If you’re reaching out to customers then email is increasingly a positive and productive way to do it.

Users report checking email on average 5.4 hours per working day, reduced from 7 hours per working day last year.

Millennials treat “Inbox Zero” as a goal to be achieved, making their inboxes neat, organised, and checked regularly. Despite this, only half of respondents reported ever reaching “Inbox Zero”. 26% of respondents stated that they did not believe that “Inbox Zero” was possible.

Users over 34 are also developing better habits, restricting the times that they check email. Fewer people are checking work email outside of standard office hours.

Fewer respondents than last year said they were checking their email in bed, although the younger you are, the more likely you are to be scanning your inbox while in your pyjamas.

For respondents under 25, personal email caused more anxiety than work email

Interestingly women check their email marginally more often, but feel that they don’t check enough. Men feel that they check too often.

Terrifyingly 28% of under-25s admit to checking email while driving!

When receiving email, most users over 35 said they felt indifference. For respondents under 25, personal email caused more anxiety than work email.

Email Beats Slack

The big story in online messaging in the last few years is the growth of tools like Slack. These tools do seem to be liked by close working teams, such as developers. However the popularity of such tools is greatly over-estimated.

In 2016, Slack and similar tools had a 2% share of business communications, this year that dropped to 1%. 80% of respondents said they use email in a  professional capacity, compared with just 18% who use video conferencing.

The Future of Email Design

Adobe announced Experience Cloud back in March. It’s a suite of marketing tools designed to use the power of Adobe’s Sensei AI technology to deliver improved customer experiences.

Adobe Marketing Cloud, and Adobe Analytics Cloud, which both form part of Adobe Experience Cloud, integrate with Adobe Creative Cloud—it’s amazing they ever see the Sun over in San Jose—meaning web designers can utilise existing skills to design enterprise level email campaigns.

Adobe is working on predictive images for email with Ignite, a system for scoring images based on how frequently emails are opened, read, acted upon, and more. Just as subject lines can be scored, soon image scores will allow us to send email finely tuned to appeal to different demographics.

In future, we’ll also see multi-lingual campaigns via Experience Cloud, so that companies that sell in multiple languages can co-ordinate their campaigns more easily.

It is far cheaper for businesses to hold on to existing customers than it is to attract new ones. The personalised nature of email means that once we’ve established a relationship, it’s relatively simple to maintain that customer relationship with intelligent email design.

Many people have predicted that email will fall away as messaging services take over, but it seems that at least for now, that simply is not the case. Email continues to be the way most customers prefer to be contacted, and is the best way to build a loyal customer base.


How to Use Zoho SalesIQ to Start a Live Chat & Track User Behavior in WordPress

Online businesses, esepcially online shops, are a great way to generate consistent revenue, while also cutting costs. After all, besides the general maintenance of your website, there really isn’t much upkeep when it comes to eCommerce shops. At least not when you compare it to the work required to keep a brick-and-mortar shop actively open on a daily basis. However,…. Continue Reading

The post How to Use Zoho SalesIQ to Start a Live Chat & Track User Behavior in WordPress is written by Lindsay Liedke and appeared first on WPKube.

5 Ways the Floating Action Button Boosts UX

A Floating Action Button (FAB) is a circled icon floating above the user interface. Its shape, position, and color ensure it stands out from the rest of a UI. FAB was popularized by the release of Google’s Material Design principles in 2014. Since this release, the FAB user interface element has been widely adopted in web and mobile design.

Although the FAB may be seen as a small, seemly insignificant UI component, its effects can be important. Given that the pattern is used correctly, it’s meant to be instantly identifiable and accessible.

Floating Action Button in Android app

1. Represent a Hallmark Action

Ideally, FAB should highlight the most relevant or frequently used actions, it should be used for the actions that are the primary characteristics of your app. If you’re going to use FAB in your app, the design of the app must be carefully considered and the user’s possible actions must be boiled down to a single prominent feature. For example, a music app may have FAB that represents ‘Play/Stop’. An Instagram-like app might have a FAB that represents ‘Take a Photo’.

A floating action button represents the primary action in an application. Pausing or resuming playback on this screen tells users that it’s a music app.

According to research by Steve Jones, FAB demonstrates a slight negative usability impact when users first use the button. However, once users successfully complete a task using the FAB, they are able to use it more efficiently than a traditional action button.

2. Be a Way-Finding Tool

FAB is a natural cue for telling users what to do next. Research by Google shows that, when faced with unfamiliar screens many users rely on FAB to navigate. Thus, FAB is very useful as a signpost of what to do next.

The use of a Floating Action Button in Twitter encourages you to post content

3. Provide a Set of Actions

In some cases, it is appropriate for the button to spin out and expose a few other options as can be seen in the Evernote example below. The FAB can replace itself with a sequence of more specific actions and you can design them to be contextual to your users. As a rule of thumb, provide at least three options upon press but not more than six (including the original floating action button target).

Also keep in mind that these actions must be related to the primary action the FAB itself expresses, and be related to each other: do not treat these revealed actions as independent as they could be if positioned on a toolbar.

Don’t: ‘Where I am’ action isn’t relevant to create content actions.

4. Be Context Aware

Context plays an important role in user interaction. Sometimes users want to consume content, sometimes they want to perform actions. It all depends on context. Using some contextual behavior could bring the best of FAB to the UX of any app. Let’s consider Google+ as an example. Google+ shows the button when the user is engaging with the stream, and hiding it when that engagement is reversed. These two states rely on context : when users are engaging with a social stream, a primary action is to scroll, hence there’s no need for FAB, and when users stop scrolling, they might want to post something.

5. Connect Two States Together

FAB is not just a round button, it has some transformative properties that you can use to help ease your users from screen to screen. When morphing the floating action button, make transition between two states in a logical way. The animation in the examples below maintain the user’s sense of orientation and help the user comprehend the change that has just happened in the view’s layout, what has triggered the change, and how to initiate the change again later on if needed.

Image credit: Ehsan Rahimi

Image credit: Dribbble


Some might say that FAB is bad UX. It’s tempting to say that because users and designers aren’t used to it. We are used to familiar toolbars and the concept of FAB is still fairly new to us. We all know how that new things are hard, but at the same time they encourage a more carefully designed user experience. Used correctly, FAB can be an astoundingly helpful pattern for the end-user.  


Essential Design Trends, September 2017

Sometimes you can just look at new website projects and see what designers are thinking. You can feel the mood. This month’s trends reflect that concept with bold color choices, a collapse of the traditional hero header style that’s been popular for a while and dark animated patterns that are just a bit mysterious.

What do you think? Are you ready for thinner typography options, more elaborate detailing and icon-style logos? You might be after seeing some of these design projects.

Here’s what’s trending in design this month:

1. Rainbow Colors

When you hear “rainbow colors,” the first thing that comes to mind is probably not good design. There are too many glaring examples of garish projects with rainbow-themed color palettes that are overwhelming and, quite frankly, design disasters.

Today’s rainbow colors are anything but disastrous. They are classy, simple and provide just the right amount of color to a surprising number of projects. Rainbow palettes aren’t just for small websites either; big brands including the Github Universe Conference, Southwest Airlines and London Grammar’s Spotify channel all use interesting rainbow patterns.

Even more interesting is that every design uses the same color concept in very different ways.

  • Rainbow text elements in a dark aesthetic: Github uses a simple dark aesthetic with rainbow colored text and user interface elements to draw the eye from key information (such as the date) to the main call to action (ticket sales). The rainbow gradient is simple and subtle, while setting mood of opportunity and optimism. This seems like just the right combination to encourage users to register for a conference.
  • Southwest Airlines takes another approach with rainbow background elements and text fill in a lighter container element. The rainbow accent provides a visual reference point for a site that has content that could be construed as boring. Color gives the case study a little more life to help encourage clicks.
  • London Grammar uses a giant rainbow orb to draw users into the sound-mixing experience collaboration with Spotify. The rainbow blob shifts and moves with a slow animation that feels like gel in water. The colors move and merge and it is something you could look at all day if you aren’t careful. The gamification aspect of the colored element is also interesting, but the color is definitely what draws users in first.

2. Collapse of the Hero Header

The oversized photo or slider hero header has been a website design staple for years. But there’s a trend to get away from the pattern with more designers opting for a more minimal above the scroll structure with more elements and a less constructed feel.

The result seems to be a trend with more white or light headers that have a smattering of parts floating around. This trend gets somewhat mixed reviews. Some of the visuals are interesting, but overall there seems to be an overall lack of focal point for users and clearly defined set of actions to take.

What’s nice about the collapse of the hero header is that the minimal approach makes users look. It is different. The question is whether there is enough messaging to carry their interest for long or if users will respond positively to a less visual website experience.

This is a trend to watch, because it is likely in the early stages of evolution. Designers are ready to do something different with the tops of pages (and understandably so). This iteration of projects is just the first step toward something new. Some designers might be perturbed by the odd combination or parts of elements above the scroll in most of these design concepts so far. It remains to be seen where the trend goes next, but it is worth keeping an eye on for sure.

3. Dark Animated Patterns

This might be the most fun trend in website design right now: Dark animated effects layered on top of dark color schemes. The dark on dark concept is mysterious, visually interesting and really makes the user look and engage with the design.

Plus, it can work in so many different ways. There’s no set to the size or type of animation or what the effect does. Each of the examples below use dark animated effects in different ways that all encourage some sort of interaction from automated movement to mouse over effects to flashes of surprise (you’ll have to click the links to find that one).

While these design look really cool, they can pose some challenges as well. Not all users are keen on such a dark aesthetic. It might not render well in all environmental conditions. These designs definitely look and function better on desktop screens than smaller devices.

But the design trend does have a place for designers that want to create something a little different, with a certain mood and trendy aspect.

There’s also something about combinations of dark hues without a lot of color that just draws you in. (It’s kind of unexplainable.)

To make the most of the dark on dark trend, make sure to use enough variance in dark hues to make sure elements can be seen and that movements are discernable. Use rich blacks with plenty of undertones to set the right mood for each project.

While the examples below all completely lack color, consider a contrasting hue other than white for key points of emphasis. (A colored call to action button would really stand out with the amount of contrast all the black imagery provides.)

The other commonality with this trend is in the simplicity of the animations used. None of the movement is overly complex. It is as simple and streamlined as the color palette, which is a key contributor to the overall success of the design trend.


The shift in color usage showcased by this month’s trends is both interesting and effective. Rainbow colors are a lot of fun and uplifting while minimal white and dark patterns both provide plenty of room for introspection and reflection. Color choices really do connect to how designers feel about a project.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.


Popular Design News of the Week: August 21, 2017 – August 27, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

5 Amazing Hamburger Menu Trends to Emulate


12 Extensions that will Make any UX Designer’s Life Easier


Google Drops Support for HTTP on Chrome


Preact : A Smaller, Faster React Alternative


Simplicity in UX Design


Coming Soon Page Design: How to Make it Awesome and Successful


Pastel Colored Ocean in CSS (a Calm Place to Slow Down)


JavaScript is Eating the World


Skeuomorphism, Flat Design and the Rise of Type Design


Medium’s New Logo: A Review


19 Slack Groups for Designers & Developers


Facebook Design’s Desktop Kit


Studio Vs Freelance: The Pros and Cons


Visura – Think Linkedin Combined with Squarespace for Creatives


Don’t Overthink. Just Do.


If Celebrities were Pantone Colours


30 Useful User Onboarding Tools


The Grid (the Much-hyped AI Website Builder) is Near Industry-low in Customer Satisfaction


What Happens to Creativity as We Age?


“Dark UX” Design is Everywhere Online and It’s Turning You into a Sleep-deprived Internet Addict


Four Psychology Principles Every UX Designer Should Know


Interface Font Family


Why Blockchain Needs Design




Branding the Moon: Play Among the Stars


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.


Comics of the Week #404

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Doesn’t count


Don’t like waiting


Dumpster organizer

Can you relate to these situations? Please share your funny stories and comments below…


5 Rules for Using Memes in Your Content

What is a meme? Now, maybe you’re a bit out of the loop. Maybe you have a job, a couple of kids, and not a lot of time to browse the Internet’s most ephemeral form of content. Maybe you’re single, but prefer outdoor hobbies, like hiking or friendship. But someone in a meeting just said that it would be cool if you started using memes on your company site, and you’ve gotta figure out how.

We’ve got your back. We’ve. Got. Tips.

But back to the original question: Memes are viral ideas and behaviors. They spread from person to person, bringing joy and irritation in equal measure. Memes performed offline (thought documented online) include planking, the apparently mis-named “Harlem Shake”, and “dabbing” which is a word I’ve begun to use as an invective.

Online-only memes take a thousand different forms. But the most common, the “classic” online meme, is the image meme. Image memes have adopted a fairly standard format, with a recognizable image in the background, and large, white, bold text. These memes are used to tell jokes, commiserate and celebrate shared experiences, tell stories, and more.

Actual Advice Mallard

Sharp-eyed readers will notice that this article is about using memes in your content, rather than in your site’s actual design. Unless your site is dedicated to memes, don’t use them in the actual design. It’ll make your site look dated inside of a month, if not at launch. Keep them in the content, if you’re going to use them at all. The only exception to this rule would be easter eggs. Finding an amusing meme where you didn’t expect one can be fun.

You know, if you’re into that. Which is my next point.

1. Know Your Audience

Look, not everyone is into memes, and of those who are, not everyone is into the same memes. While people in all age ranges can be found on meme sites, the usual demographic is millennials and younger. But the memes millennials will share (and can relate to) will be drastically different from those a teenager might share and relate to.

Then there’s the international issue. Meme culture varies from country to country, in my personal experience. The memes shared by my Canadian friends and American friends are usually fairly similar. Mexican memes are a whole different ballgame, while still sharing similarities in terms of the format. Basically, you’ll want to look into your target demographic, and see what they post online.

2. Know your memes

Okay, the thing you need to understand about memes is that people can get really attached to them, and take them very seriously. Some people go so far as to tell their most private stories and thoughts to thousands or millions of strangers in meme form, which makes using the right meme for the job all the more important for them. For example: there’s literally a pair of memes (Foul Bachelor Frog, and Foul Bachelorette Frog) that people use to tell stories of their grossest behavior when they’re at home alone.

Foul Bachelor Frog

If you use memes wrong on your site, you don’t just run the risk of looking a bit out of the loop. It can be interpreted as a sign of laziness, and even incompetence. If you can’t research a simple meme, how can you do anything else for them? Also, one or two memes out there that never had anything to do with politics before have become weirdly politicized lately, and you don’t want to accidentally use one of those.

Fortunately, research is easy. There’s a huge database of memes called Know Your Meme, which covers everything from the classics to the most esoteric niche memes out there.

3. It’s OK to use older memes

Don’t worry about always using the newest memes to communicate with the kids out there. I mean, stay away from older performance memes, like planking. Those are dead and buried. However, it’s generally regarded as acceptable to use older image memes, because they’re tied to specific ideas and shared experiences. This gives them a much longer shelf life.

Indeed, using the right older meme can actually hit people with a weird feeling of nostalgia. Nostalgia sells. Just ask Hollywood.

4. Don’t oversaturate your content with memes

Unless your website is dedicated to memes, you’ll probably want to limit the number of memes in each post, or on each page. Even on meme sites, few stories are told entirely through memes, unless the stories are very short. Anything that requires more detail is usually a few paragraphs of text, with memes acting as a form of visual title and subheadings.

Heck, I’m writing a whole article about memes, and I’m keeping the number rather low. They’re best used for emphasis.

5. Time your memes right

Using a meme at the wrong time can make people feel like you’re not taking them seriously. For example, let’s examine the right way, and the wrong way to use “Minor Mistake Marvin”. Here’s the right way:

I launched a website without checking all the links.

See? A fairly minor mistake anyone could make. It would be fine to use this meme in your apology.

Now here we have the wrong way to use it:

We forgot to apply corrosion inhibitors to the water, people got lead poisoning.

If the company which made this mistake were to use this meme, or any other, people would rightfully be very, very annoyed with them. I could go on, but I think I’ve made my point, here.


With these tips in hand, using memes in your content should be simple enough. As long as you’ve done your research, the basic concepts and usage of memes are pretty simple things. The only real complexity comes from the shear amount of memes and sub-memes. Sub-memes is a word now.

Lastly: Avoid rage comics. Those were never funny.