CX Insights

How Surprising Details In Web Design Affect The User Experience

9 min read

The internet is maturing by the day. Websites in 2013 strive to be more accessible, more usable, and also more fun than ever before.

Fact is, a lot of them do so quite successfully. That is mainly for three reasons: (1) Web technologies evolve constantly, allowing for more and more advanced designs. (2) Technologies are more accessible than they used to be, empowering more people to use them. (3) People’s awareness of UX is growing, making them eager to offer more than just a working HTML site.

The user experience includes a lot of different aspects of a website – many going way beyond the site itself. For now, let’s focus on the web and how small details in your design can be an effective tool to:

  • Surprise your visitors,
  • Connect with them,
  • Engage them,
  • Entertain them, and
  • Help them remember your site in a positive way.

Navigation? Yes. Boring? No way.

There are not a lot of websites out there that don’t require their visitors to navigate through the content. Basically, any website that includes multiple content categories, or even multiple pages needs some sort of navigation.

Over the time, different standard navigation menus have been established, such as a top, or a sidebar navigation. These classical solutions are a good fit for big sites with a diverse target group as most people have learned to handle them with success and thus use them efficiently.

However, some sites get bored with a standard solution for their navigation and they come up with rather creative alternatives. Depending on both the nature of your site and your target audience, this can work very well. More even, it can add some excitement and uniqueness to your site – helping your visitors remember you.

Drag & drop to navigate

The personal design of the site offers a great experience for a very specific target group.

Jacqui takes her visitors on a “journey to the perfect cake”. The site is basically designed as one big canvas and the visitor can drag & drop the content to explore it. The personal design and the humorous tone of voice, together with the out-of-the-ordinary navigation create a great experience for a very specific target group. For those, you prefer a regular navigation, the site offers such an alternative at the bottom.

Animated navigation

When navigating through the site, the entire appearance of the design changes with carefully designed animations and sound effects.

The design company Also has chosen for a very unique design for their website. Matching the design, also the navigation is quite unique. When selecting one of the main content areas, the entire appearance of the site changes. With help of carefully designed animations, and entertaining sound effects, the site transforms into a different abstract design. The site is a lot of fun and very appealing. Only shortcoming: The site is entirely built in flash.

No clicking allowed

Have you ever navigated a site solely by your mouse movement?

The site is a design project by a Communication Design student. The site works entirely based on mouse movement. No clicks required. The idea is very clever and even though the content of the site is rather fictional and not very relevant, navigating through the site is a lot of fun. It also raises the question: Can we make navigating a website easier by reducing the number of onclick interactions?

The visual appeal matters

It’s not a secret that we respond differently to beautiful things than to those things we either have no opinion about, or even dislike. This also holds true for the web. A beautiful website is much more appealing to us than a design neutral, or badly designed one.

Things like colors and contrasts, visual elements and an overall balance of the design are important. Pictures of human faces for example have the natural power to attract our attention. Images in general are a great way to convey emotions and cater to our desires.

For a great user experience, it is important we make use of the power of visual appeal. Design can not only make a site likeable, but also fun, engaging, and trustworthy.

Eye candy for your visitors

The site offers very nice visual transitions between different content areas.

At first sight, the creative agency Legwork Studio has a very professional looking, yet simple website. Only after clicking on a link within the site and going to a different page, the artistic potential of the design is revealed. It seems like someone swipes the content off the page, before new content is built up. These quick visual effects are very appealing and break up the otherwise static feel of the design.

Reward user interactions

Images go from black & white to bright colors when hovering over them, adding a warm and personal touch to the site.

Insert Quarterly is a weblog aimed at serving original content to people who love video games. At first the site looks rather dark and sad. However, as you scroll down the page, the featured images that come with each article go from black & white to bright colors. This little detail adds a lot of warmth and character to the site and makes it a lot more appealing.

Engage through visual feedback

With the help of dynamic elements providing feedback becomes more visual, interactive, and fun.

ChiPlatform is a company that offer loyalty solutions for businesses that want to better understand, interact, and reward their customers. With the help of dynamic elements they make providing feedback more visual, interactive, and fun. In this example, a survey question is accompanied by a little character. Depending on your answer, the character will go from disappointed to very happy.

Keep your visitors entertained

There is no rule that says when people are online, they must be helped to reach their goals. At least not all the time. Sometimes, you are allowed to distract people – especially when offering them something fun they would otherwise not go looking for.

Also, the internet doesn’t have to be serious all the time. Even big companies or serious causes can use humor to reach out to their target group.

More and more of the time we spend online is invested in serious business, such as finding information, or doing transactions. A little joke, a funny game, or maybe a really unexpected advertising campaign can be welcome distractions.

Grant your visitors a break

An interactive gimmick that entertains people is a welcome distraction for website visitors.

The Walt Disney Company has a rich tradition of bringing great stories, characters and experiences to the world. With Create a monster, you can create, download, and share your own custom monster. The only purpose of this gimmick is to entertain and connect people. A great alternative to solely consuming information.

Serious business can be fun

Fun and surprising details can enliven a website and make visitors smile.

Google is one of the biggest companies worldwide. There is no doubt they are doing serious business. However, they also have an entire team of illustrators and engeneers dedicated to Google Doogles. Doodles are the fun and surprising changes that are made to the Google logo to celebrate holidays, anniversaries, and the lives of famous artists, pioneers, and scientists. The idea behind Doodles is to “enliven the Google homepage and bring smiles to the faces of Google users around the world”.

Humor is oh so powerful

Humor can be a powerful tool to get people engaged with content they would otherwise ignore.

Dumb Ways to Die is a public service announcement campaign by Metro Trains in Melbourne, Australia to promote rail safety. The campaign covers a very serious topic – in a not so serious way. (Make sure you visit the site to see what I mean by ‘not so serious’.) The result: The campaign went viral through sharing and social media starting in November 2012. More than 53 million people have watched the video on Youtube since. Humor can be a powerful tool to get people engaged with content they would otherwise ignore.

Present your content the right way. Be creative.

Right, the main goal online is still to provide some kind of information. We hear it a lot lately: “Content is king.” But that doesn’t mean content has to be boring? Actually, the way you present your content can be just as important – if not more so – than the content itself.

If you offer information on a certain topic, or a product, or a service – chances are the same, or similar content is also available somewhere else. The way you present yourself and your content is crucial if you want to stand out – for being recognized – and most importantly for being remembered.

Be creative and add just enough details to your site to make sure people will enjoy your site, tell their friends about it, and keep it in good memory.

Details can loosen up content

Subtle animations can make visitors curious and encourage them to engage with your content.

Specless helps companies optimize ad campaigns for multiple devices. In a visual and very attractive step-by-step illustration they explain how their product works. The colored icons already work well to attract attention. However, when hovering over any of them, a fun little animation is triggered. This animation might not be necessary to present the information. But it does make visitors curious and encourages them to get engaged, rather than only scanning the content briefly.

Do things differently

Surprise your visitors with a fun detail that no one else has thought of before.

There is not much better than surprising your visitors. Be it with the excellence of your content, a beautiful design – or like the weblog Easy Living Mom with a fish hook. Where other sites have a boring “back to top” link, here you can get hooked and pulled back up to the beginning of the site. Together with the parallax scrolling effect that lets fish swim across the background as you scroll down the page, the fish hook link is very authentic.

Match your content & visual message

Make sure your content presentation matches your content and the message you want to communicate.

I mentioned this before. The way you present yourself has a big impact on how people perceive you and whether or not they want to do business with you. People are looking for human relationships, even if they visit your site using a technical and medium. The software company Atlassian is a great example of how a big company keeps a human touch and becomes tangible for its visitors. The leadership team presents themselves as nodders, showing a sense of humor and inviting their visitors to interact with them – if only symbolically by hovering over them to make their heads nod.

Sabina Idler
Sabina was technical writer & UXer @Usabilla for 5 years before she started her own UX research and consultancy firm; UXkids. With UXkids, Sabina leverages her academic research expertise, know how in child development, and strategic vision to help companies build successful digital products for children. You can connect with Sabina on Linkedin or follow her on Twitter.