10 Fun Ways to Use the Element of Surprise in Your Site Design

10 Fun Ways to Use the Element of Surprise in Your Site Design

Did you know that Rick Astley’s “Never Gonna Give You Up” turned 30 this year? Even if that name doesn’t ring a bell, there’s a strong possibility you’ve unintentionally encountered the music video for it at some point, thanks to a rickroll.

Or maybe you’re more familiar with the maze game prank from about 10 years ago? You know the one I’m talking about: you’re sitting at work, your friend insists there’s a cool game you need to try, and then they egg you on to play despite having an inbox of client requests waiting for you. (That’s a totally hypothetical situation, by the way, and not one that happened to me.)

Then as you carefully make your way through the maze, thinking you’re about to beat your friend’s score, Linda Blair from the Exorcist pops up and screams way too loudly at you from your work computer.

Rickrolling and jump-scare pranks may not be the trendiest memes anymore. However, they’re both great examples of how to use the element of surprise to wow, shock, and hopefully impress your audience.

As a web developer, you know that minimalism rules the roost (as it should). In my opinion, this strategic use of white space interspersed with content provides the perfect opportunity to surprise your visitors with something unexpected. I’m not saying you need to rickroll your visitors or totally spook them with a jump-scare video. There are plenty of other ways to give them a little shake and wake them up from the tour they expect to receive through your site.

In today’s roundup, I’m going to cover 10 ways you can add the element of surprise to your WordPress website and I’ll also include some cool examples of how others have made this work for their own purposes.

10 Ways to Use the Element of Surprise in WordPress

Let’s face it. Visitors know what to expect nowadays in terms of a website. Big header design. Hamburger menu on mobile. Contact and About pages. Maybe a testimonials widget.

There isn’t really anything too exciting about encountering the predictable website experience. But there’s absolutely nothing wrong with it either. Visitors appreciate consistency and predictability. But wouldn’t it be cool to lure them in with this expectation and then to be able to surprise them with a random element that makes them think, “Well, that was really different/fun/awesome”?

There are a number of ways to use the element of surprise in web design. Too much of it would obviously be a bad move in terms of UX, but finding just the right hint of it (and one that meshes well with your brand’s identity) might kick your visitors’ interest up more than a few notches.

Here are some ideas:

1. Include a hidden message within your designs

I’m continually surprised by how many companies hide images within their logos. The FedEx arrow and Amazon A-to-Z are probably the most well-known examples of this.

Element of Surprise - Amazon logo
The Amazon logo’s A-to-Z “smile”

If you’re at a point where you’re designing a website, however, it’s likely too late to do anything about adding a hidden message within your logo. Until it’s time for a rebrand, think about how you can infuse a hidden message or brand-related image into your site’s designs, photos, mascots, or even text.

2. Sweeten the deal in a popup or hello bar

For e-commerce companies, there are a number of opportunities to give something away for free or at a discounted price. But, as you know, it won’t make much of an impact (or a difference on your bottom line) if you throw those deals at every single person as soon as they enter your site.

That’s why we have perfectly-timed popups as well as unobtrusive hello bars to handle those deal sweeteners for us. PinkBlush takes advantage of both in the hopes of appealing to visitors in either or both special offer locales.

Element of Surprise - PinkBlush
PinkBlush’s use of surprising discounts.

3. Add a humorous touch to your bios

The About page on a website can get very dry, very quickly. It’s not anyone’s fault really. Most people lean towards the “I’m Dave and I write code for a living”-style bio, which is fine enough. It’s succinct and accurate and doesn’t force visitors to read through Dave’s paragraph-long description about how he went to Rutgers, moved to Colorado, but then decided the East Coast is the best coast (because it is).

Now, whether your goal is for people to actually read your team’s bios or not, this page is an awesome place to showcase the fun side of the people behind it. Take for instance what Wistia does. Type the word “dance” and you’ll get to see this fun little animation for yourself.

Before:

Element of Surprise - Wistia Before
Wistia’s team before you type out the “dance” command.

After:

Element of Surprise - Wistia After
Wistia’s team after you type out the “dance” command.

4. Create a non-traditional scrolling effect

Everyone knows what a static web design looks like and I’d say that most people are familiar with parallax scroll now, too. So, if you’re a fan of scroll-triggered movements, this is a great one to play with.

One of my favorites is from Made by Few. If you scroll down the home page, you might think it’s just a traditional static website, but then whoops! Your mouse or finger accidentally goes haywire and you notice that the crowd of people sway back and forth and all around as you do.

Element of Surprise - Made by Few
Made by Few’s swaying crowd.

5. Get a celebrity endorsement

If you’re thinking there’s no way you’ll be able to get someone like Britney Spears to endorse you as her WordPress developer of choice, then you’re probably right. However, that doesn’t mean that you or your clients won’t someday stumble upon a really cool celebrity or influencer endorsement opportunity.

BBC reported on a few examples of how small businesses were able to use big-name endorsements to help grow their businesses, something that likely shocked their site’s visitors as much as it did the people running those companies. Here’s the video Action Bronson shot for The Christmas Steps in exchange for a free meal and time in their kitchen:

6. Add some entertainment

Gamification isn’t going anywhere in web design, especially as millennials’ spending power increases and Generation Z moves up into the consumer class. So, if you missed WPMU DEV’s coverage on how to add gamification to your WordPress site the first time around, be sure to check it out now.

Or you can take inspiration from the random, space bar-activated dinosaur game you can play whenever you lose Internet connectivity:

Element of Surprise - Google dinosaur game
Who doesn’t wish the Internet would go down more just for another chance to play?

7. Give your calls-to-action an unexpected animation

Talk about a predictable experience. You know your visitors will eventually arrive at your site’s calls-to-action and contact forms. And you know that many of them will be willing to convert even if you don’t add a touch of something unexpected to the experience.

But what if you did? Wouldn’t that be a great way to make them stop and wonder what other surprises you have in store for them?

ReadMe has added this type of “surprise” animation to their contact forms and it’s pretty freaking cool.

Their owl mascot points his finger at each of the input fields as you fill them out on the Registration page.

Element of Surprise - ReadMe Registration
ReadMe’s owl shows you which fields you’re working on.

The owl then gets a little cheeky on the Login page when he closes his eyes as you type in your password.

Element of Surprise - ReadMe Password
ReadMe’s owl won’t peek while you type out your password.

8. Hide something in the source code

As a web developer, you know that the key to building websites that perform well is to write clean code. That’s why you often use pre-written CSS and JavaScript libraries to streamline the process and ensure you’re adding coded functionality and features that work.

But how much fun is that for you? Sure, your visitors will reap the benefits of your beautifully-coded sites, but it’s basically just the same ol’ thing for you, day in and day out.

So, for this suggestion, I’m thinking this is a good opportunity for you to break out of your rut and throw some fun into the source code of your websites. It might not need to happen on every site and it might only be just for your own, but it’s still a fun way to add something surprising that maybe only a few other tech-minded individuals will discover and appreciate.

Coca-Cola does this:

Element of Surprise - Coca-Cola source code
Coca-Cola’s secret source code message.

As does PayPal:

Element of Surprise - PayPal source code
PayPal’s secret source code message.

So does Kanye West:

Element of Surprise - Kanye West source code
Kanye West’s secret source code message.

9. Hide something in plain sight

If you like the idea of these digital Easter eggs, but want something you can share with visitors on the actual website, take a look at what Kickstarter has done:
Element of Surprise - Kickstarter Scissors
Have you ever spotted Kickstarter’s Easter egg before?

If you scroll to the bottom of the site, you’ll see that scissors icon in the bottom left. Click on it until the surprise message appears:

Element of Surprise - Kickstarter Contact Form
Kickstarter’s definitely found a unique way to get new subscribers.

If you think about it, that’s a pretty smart way to use an Easter egg on your site. Sure, it could be solely for entertainment purposes, but Kickstarter made the big reveal be… a contact form? Yep, it’s a contact form and probably one that many more people are willing to sign up for because of the unique way it was delivered to them.

Like Hubspot’s Laura Filton said:

“I feel like Easter eggs are part of the ‘developer’ personality. These are very smart people who love solving puzzles, and the intricacies of their work isn’t ever fully appreciated by most of the customers using their product. So by hiding an Easter egg, they can reward the customers who do take that extra initiative to really dig in and appreciate the software—and what goes into making it.”

10. Throw something random in for the heck of it

This last one I just recently discovered and I’m honestly still surprised by it because how much time I spend inside Asana every day. However, now that I know it’s there, I am so grateful for it. It’s such a seemingly insignificant surprise and contributes nothing to improve my experience in using the productivity app, but it makes me so ridiculously happy.

Here is what Asana has done:

Go into My Profile Settings. Click over to the Hacks tab and toggle on the Tab+B hack.

Element of Surprise - Asana Tab+B
Don’t ignore Asana’s Tab+B hack.

Reload Asana to apply the changes… and then hit Tab+B as many times as you want.

Element of Surprise - Asana tabbies
Is Asana’s surprise necessary? No. Is it absolutely wonderful? Yes.

Even if you’re not a fan of cats, you can’t help but giggle at the new tabby (get it: Tab-B/tabby) that shows up on your screen with each execution of Tab+B.

Wrapping Up

In all honesty, not every business idea is going to be mind-bogglingly innovative or intriguing and, yet, there is still a need for those services or products. Just because you’re designing a WordPress site for an accountant or for dog water bottles doesn’t mean the entire on-site experience needs to be as vanilla as the business behind it.

That said, a great way to add a little pep to your WordPress site is to infuse it with the element of surprise. Of course, it needs to be relevant within the context. What worked for the brands above might not work for you, so take some time to figure out which elements on your site would be ideal to play around with.

Remember: you never want to frustrate, confuse, or annoy your visitors. Adding an element of surprise just for the shock factor could totally backfire, so use this design element wisely and think about how it can positively affect their experience.

Suzanne Scacca
What’s the best “shock” you’ve received when visiting a website? Let us know in the comments!