Free: Assessment Does your website build trust with buyers and bring in revenue?

Score My Website
Close

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.
Score My Website
inbound-marketing-strategy-playbook-cover

Free: Assessment

3 UX and Design Details for Delighting Your Customers

By Joe Rinaldi

3 UX and Design Details for Delighting Your Customers


design-details-featured.jpgThink about that feeling you get when wearing new clothes for the first time, or when you pay an even dollar amount while getting gas. How about when you perfectly separate an oreo like a skilled surgeon?

That sudden surge of excitement and joy is “delight” and it’s a feeling that carries over from your day-to-day life to your experiences on the web.

“Customer Delight” has become one of the most common buzzwords within the digital marketing realm, but that doesn’t mean it should be taken lightly. It’s what makes people fall in love with your product and makes the experience that much more memorable (and worth talking about).

In this article I want to help you understand you some of the little ways you can delight your visitors, and show off some companies that are doing everything completely right.

1. Work in a Bit of Brand Personality

Your brand's personality is everything that makes your company unique and different from your competitors. It’s an important part of your company and should be felt throughout your entire website.

You can add in a splash of personality in a number of different ways on your site.

InVision does a good job of subtly adding personality to their site in the example below.

Desing-Details-InVisionApp.gif

Notice how  when you click off the InVision web blog tab, the title text changes to a little reminder to come back to the site. Something as little as this puts a smile on your visitors’ faces  and also playfully gets them to come back to your page.

MailChimp is another great example. In their style guide, they describe the brand’s tone as “fun but not silly”, “informal but not sloppy”, and “weird but not inappropriate." 

Design-Details-MailChimp.gif

As you make your journey throughout the different pages on their site this tone becomes increasingly clear through the imagery they use as well as their conversational voice.  

Design-Details-MailChimp2.png

2. Simple Animations & Transitions

There’s a lot of debate about whether animations on websites are purely aesthetic or they serve a greater purpose.

I’ve always be a strong believer of the latter when they’re used in an appropriate way.

Page transitions and animated GIFs are great ways of captivating your audience and pulling their attention to a specific section on a page. Motion and animation makes it easier for us to explain complex concepts when showcasing products.

Animated GIFs are becoming a valuable tactic for many product-based companies because it help demonstrate functionality. This demonstration helps potential users visualize themselves actually using the app or product.  

Take Wistia, for example on their tour page they use GIFs to showcase different areas of their software. This gives their users a strong idea of what they can expect when using the product before they even sign up.

Design-Details-Wistia.gif

 

On top of animations and GIFs, a number of big brands sites are using page transitions (such as elements fading in) and parallax scrolling.

One of my favorite examples is the tour page for Campaign Monitor's “Monitor” App.

Design-Details-Campaign-Monitor.gif

As you scroll throughout the page you’re followed by an iPhone that is constantly rotating and changing screens to showcase the different advantages of the app and how you can use it.

Something like this takes people “along for the ride” and illustrates your value. It shows them exactly what they’re getting, in turn, eliminating many of their questions and concerns they may have about making a purchase.

3. Interactive Page Content

I’m sure most people can agree with me; there’s just something about a website with  a box that toggles, a switch that flips, or a draggable slider features that make me feel like I’m using a physical object.

These elements might be used to show an additional blurb of information or switch between different product offerings, or they might be purely stylistic. Regardless, they’re one of your most effective tools when it comes to delight.

Take BellRoy for example.

Design-Details-Wallet.gif

They’re a company that prides themselves on offering the thinnest wallets regardless of how many cards or cash you carry and hey really drive  this point home on their product page.

The wallet company uses an interactive slider that allows you to choose the number of cards in your wallet and compare what it would look like in one of their productsalong side an average wallet.

This is not only a great example of using interactivity on a website, it perfectly highlights one of the product’s biggest selling points.

CSS Weekly, on the other hand, takes a purely aesthetic approach with interactive content on their subscribe form.

Design-Details-CSS-Weekly.gif

As soon as you hover over the subscribe area you’re greeted by four friendly-ooking guys cheering you on as you start typing.

Even if I was having second thoughts about subscribing, I’d want to hit subscribe just to see what they’d do next.

How Can I Start Adding “Delight” to My Site?

Remember, as subtle and simple as these elements of  “delight” may seem, it isn’t something that shouldn’t just be added onto a site as an afterthought or without reason.

It has to work hand-in-hand with a site’s functionality and purpose. A site will reach its full potential when all three of these key ingredients are blended and baked together.

Here area couple of tips for you to start delighting your visitors:

For Brand Personality --> Start with  Microcopy

When adding  brand personality to your website, start with your microcopy.

Using clever microcopy can go a long way for your company's overall tone. This can be anything from instructional text to form labels.

User Onboarding includes some friendly content when having users sign up for their email course. Talking to your visitors in this way humanizes your brand and reminds visitors that they’re working with real people.

Design-Details-User-Unboarding.png

Some other simple ways to sprinkle your brand across your site is to:

Take Advantage of Free Tools for Animations & Transitions

Don’t worry if your design expertise doesn’t go much further than opening up MS paint.

Animations like those in this article have become increasingly more simple to implement on sites due to the vast array of online tools and softwares that are out there.

Use Heat Maps and Analytics to Find Opportunities for Interactive Content

If you’re looking to add some extra punch to your site by using interactive content, start by dissecting the heat maps or analytics of your high traffic pages.

You can gain a lot insightful information from this and it will give you a clear roadmap of where to start brainstorming.

For example, maybe you have a tour page that’s too long, causing prospects to fall off before reaching your form or offer.

Try solving this issue by condensing some of the less important content with expandable tabs that show more information when clicked. Use online resources such as CoDrops, CodePen or CSSDeck for inspiration when looking for interactive elements.

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.

Topics:

Web Design
Marketing Strategy
Published on December 28, 2015

Recent Articles

Website Conversions in 2023 — STOP, START, KEEP
January 25, 2023 • 5 min read
How Much Does a Website Design or Redesign Cost in 2023?
November 21, 2022 • 9 min read
8 of the Best Business Website Designs to Inspire You in 2023
November 17, 2022 • 7 min read
Take It From an Expert: You Probably Don’t Need a New Website
November 16, 2022 • 4 min read
What Does a Great Inbound Marketing Website Look Like in 2023?
November 14, 2022 • 12 min read
Your 2023 Website Strategy Must Include These 6 Things
November 4, 2022 • 9 min read
4 Ways To Recession-proof Your Website In 2023
November 1, 2022 • 5 min read
8 Best Content Management Systems for Digital Marketing in 2023
October 1, 2022 • 9 min read
12 Essential Tips for Improving Your Web Design in 2023
September 13, 2022 • 16 min read
What Is a Learning Center and Why Does My Website Need One?
July 28, 2022 • 6 min read
23 of the Best Examples of Business Blog Design
May 30, 2022 • 13 min read
5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
11 Pricing Page Examples for Business Websites (Updated for 2023)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read