How to Use the Element of Surprise in Website Design
The best movies rely on surprises and plot twists to keep the viewer hooked through the film’s end.
Some of the most memorable movies of the past have managed to stay in the spotlight due to their creativity when it comes to elements of surprise.
The shocking ending of “The Sixth Sense” keeps people coming back for more and continues to generate memes over two decades later.
The psychology behind this phenomenon is easy to understand – our brains are more receptive to surprise encounters.
You’ll notice that most viral ad campaigns often come with an unexpected element that grabs the most attention.
The same applies to just about everything related to marketing – including copywriting, image design, logos, and of course, websites.
Your website must get the basics right such as a clean dashboard, UI, interface – along with attractive features that can make their experience more memorable.
And if you want to spice things up for your viewer, you should incorporate something ‘unexpected’ into the design interface of your website.
The trick is to trigger the brain’s pleasure centre with stimuli that keep visitors returning for more surprises.
You can’t provide them with the same old tactics and hope to keep them hooked.
So how can you apply the element of surprise to website design?
Here are a few design elements that you can incorporate into your website to keep things interesting for visitors.
Include a Hidden Message in Your Design
Many successful companies with massive revenue streams have one thing in common – they incorporated images within their logos.
Take a look at the Amazon logo, and you’ll see the A-to-Z arrow, which indicates that they do just about everything.
This may be not easy to do if you’re at an advanced stage in website design. Changing the logo often requires rebranding your business.
With that said, there are other ways of infusing a hidden message within your site’s designs, pictures, and even text.
Add a Perfectly Timed Pop Up or Hello Bar
Most eCommerce companies provide their users with numerous incentives to keep coming back and continue their browsing sessions. This often includes massive discounts and even freebies.
But those deals lose their impact if they appear just as soon as the person enters your website.
This is why most eCommerce sites are now using perfectly timed pop-ups and non-obtrusive hello bars to keep users engaged.
You can hire website design services to add perfectly timed banners to your website. If you’ve got a WordPress website, you should use a plugin to help you do the same.
Use the Powers of Parallax Scrolling
Static website design is practical and gets the job done.
But if you want to get more creative, we recommend creating a non-traditional scrolling effect with parallax scrolling.
This particular technique in web design creates an illusion of depth and action in an otherwise 2D design.
You can add some variety to your pictures or incorporeal more practical applications by showing something important.
Make sure to use it sparingly to add a subtle element of depth that can make the foreground stand out.
Our favourite example of this is Dogstudio’s website, where a beautiful animated 3D dog sits at the centre of the page.
The animated canine rotates and scales as you scroll down the parallax page. It’s lighting also changes as you hover over Dogstudio’s recent project.
Check it out here.
Add a Humorous Touch to Your Bios
The About Us section of your website allows you to interact with your audience and present a more human side of your business to them.
But far too many businesses prefer to give a rather dull, to-the-point bio that doesn’t engage their viewers.
While it’s perfectly all right to use a brief and to-the-point paragraph for your readers, it doesn’t show them the fun side of the people behind your team.
Here’s a good idea.
You can use animation effects on your pictures for fun and creative results. So if the viewer moves the mouse pointer on your team member’s picture, it animates into a relevant meme.
The visitor will get curious and see if other pictures on the About Us page respond the same way. Even if the animation doesn’t directly influence your sales, it will, at the very least, create a memorable experience that keeps viewers engaged and coming back for more.
Provide Some Entertainment
WordPress websites now make it possible for you to provide entertainment to visitors.
The truth is, Gen Z viewers have minimal attention spans, and they need to stay engaged – otherwise, they lose interest. This is where gamification comes in.
One example of this is the cool game involving a dinosaur you can play on Google Chrome whenever you lose your connection to the internet.
This relatively simple game has been known to keep many players engaged for several hours – even when their internet connection has been restored.
Try to add anything that will get your visitors to maximise their browsing sessions on your website without getting bored with it.
Get an Endorsement from an Influencer
While the chances of getting a shoutout from someone like Keanu Reeves is pretty slim, you can work with an Instagram celebrity or influencer for an endorsement opportunity.
Many small businesses use endorsements from celebrities to boost their sales. This usually shocks their site’s visitors into completing their call to action.
Just make sure to choose the proper celebrity endorsement for your brand.
Keep in mind that some of these endorsements may cost you a lot – or it may cost you nothing.
Some celebrities are more than happy to give you a shoutout if they’ve previously collaborated with you on a project.
Use Animated CTA Buttons
Most websites provide their users with a predictable call-to-action browsing experience. They arrive at the website, do some quick reading, and scroll to the call-to-action and contact forms.
You probably know that most of them are more than happy to convert even if you don’t add fancy animated buttons to the CTAs to create an incredible experience.
So what happens when you add a surprise element? That essentially tells your viewers that there may be more pleasant surprises awaiting them.
One example of animated CTA buttons and login forms is this cute owl from Readme.com
As you start typing your password, the owl mascot closes its eyes. Try it! Now that’s just memorable, even if you don’t plan on buying anything yet.
Hide Something Cool in Your Source Code
In website design, developers like writing clean and simple code to ensure a smooth and seamless experience for visitors.
This is why most people prefer to use pre-written JavaScript and CSS libraries to ensure their website comes with features that work.
However, you can hide some cool, surprising elements in your website – as a fun way to keep your visitors engaged.
It may only be for your entertainment, but it’s a surprising way to add something engaging that only a few tech-minded individuals will come to appreciate.
Many websites hide fun things throughout the site that thrill audiences as they discover them. This is also a great way to go viral.
Google is very good at doing this. For instance, if you type “do a barrel roll” into the search engine, the entire screen will do a barrel roll in front of your eyes.
Or if you search “Zerg rush”, you’ll see several O’s from Google descending from the top of the screen, slowly skewing your view of the search results as you battle through the ‘O’s to view results.
Why do you think Google goes through such efforts to create exciting experiences?
Because Google understands that the element of surprise stimulates the senses and turns ordinary user experiences into something more memorable.
This drives more visitors to their website and boosts the bottom line.
Make Your Website More Accessible
Nowadays, most people will visit your website through their smartphones, which means you should optimise your website for users on those devices.
Although this isn’t necessarily a surprise element, it can contribute to a positive overall user experience.
It is also a good idea to make your website accessible for people with disabilities. About 26% of adults in the US live with a disability.
However, not many websites come with accessibility features. This means that millions of visitors are struggling to browse the web correctly.
People with disabilities should be able to understand, navigate, and interact with your website – just like everyone else.
Web accessibility applies to various disabilities that affect people across the itinerant, this includes:
- Cognitive
- Neurological
- Speech
- Auditory
- Visual
- Physical
This has led to a surge in ADA-based web accessibility lawsuits.
Check out the official guide from Google here to learn how you can do an accessibility review of your website.
Use an Unconventional Font Style
We’ve been trained to read serif fonts on print and screen. But you can break the conventional design rule by introducing a different font style entirely.
Try to be bold with new fonts – it will catch many users by surprise.
And if you think about it, it makes sense. Serif fonts were initially designed to be used for decorative purposes.
If you’re not a big fan of Serif fonts, you can shop around for other fonts that are just as versatile and blendable as the rest of your website design.
Pro tip: Try pairing up two different font styles to give your website design more character and personality.
Minimalism
Users have come to expect websites to be full of pop-ups, colours, and designs. But you can provide them with a surprise by using a more minimalist layout.
A minimalist layout stands apart from the crowd by minimising clutter and making the website more straightforward to use.
This way, your users will be introduced to the products and services right away.
You can then experiment with all kinds of design experiments, such as fade-in effects, chatbots, animations, and other interactive elements to improve the website’s user experience.
Using White Space
White space (also known as negative space) is the area between design elements of your website. These elements include buttons, images, text, and icons.
White space is used to provide balance to content on a website and promotes a natural flow for the user to find it easier to navigate. This makes it easier to find information.
There are two types of whitespaces: macro and micro.
Macro is the space between the elements of text, icons, images, and graphics. This is the most common type of whitespace.
Micro is the space that exists between more minor elements such as letter spacing and line heading. This distinction isn’t directly apparent, but it’s just as important because it improves readability.
Interactive Hero Content
Hero graphics is a relatively new trend in graphic design, but one that works well. Instead of using a stock photo, you can add subtle animation to video footage to improve the user’s experience.
If you’re on WordPress, you can use several plugins to help you achieve this with ease.
A Word of Caution – Surprise Isn’t Always Good
Although we’ve emphasised the importance of the element of surprise in website design, it is just as important to point out that it shouldn’t destroy the user experience.
While Readme. Co’s little owl is surprising to see; it’s not confusing and does not detract from the overall experience. There is no disruption to flow, and it and everything is easy to understand even though the content is being presented uniquely and unexpectedly.
The element of surprise makes the visitors more engaged and leads to an improved user experience.
Wrapping Up
If we were honest with you, not all businesses would be innovative and intriguing, but they continue to exist because there is always a need for their products and services.
Just because you’re creating a website for a lawyer doesn’t mean the entire site experience has to be boring and non-creative.
Try to become creative with the element of surprise. Just make sure it is relevant with the context. Don’t force something into the website design that shouldn’t exist there.
Author Bio: Dave Brown leads a team of web designers at Content Development Pros. You can find out more about him on the official website.
