2013_07_10_featured Design

How Surprising Details In Web Design Affect The User Experience

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 dontclick.it 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.

23 comments

  1. Michael - Website Design Naperville

    The hardest part of web design is grabbing the attention of your user. Making your site so they will want to return and keep coming back. You definitely have to have something that will grab their attention. Thanks for the post!

  2. Manya.pe

    Innovation will always attract people and humor will always make this return. (Who does not like fun) Obviously, you need to learn how and where to use them. In general, anything that conveys emotions will make people interested in what you show, not just the humor.

  3. Sabina Idler

    Thanks for your thoughts on the topic!

    I agree, using humor is not everything – You need to know when and how to use it. And that’s actually the most tricky part.

  4. best web design companies

    The hardest a part of net style is grabbing the eye of your user. creating your web site so that they can wish to come back and keep coming. you actually ought to have one thing that may grab their attention.

  5. Stefan

    Making your website stand out is one of the most challenging part of web design and it requires amazing ideas sometimes to get the results you wish.

  6. Ducktoes Web Design

    Very informative, thanks for sharing!

  7. Jim - Archology

    I agree with the philosophy that innovation and novelty can achieve great results in user retention and engagement. It is however, important to stress equally, that being novel and innovative is completely subjective to the user. An animated menu for example, can in one context add a great deal of value to your site’s experience and in another make you look completely unprofessional.

    Also there is no excuse for unprovoked sound on a modern website (looking at your Also example).

  8. Tucows

    We’re actively tweaking our workflow to better cater to Responsive Web Design. This article addresses some solutions to common pain points when moving to a new design/development process.

  9. Web developer

    Humor is a high-creative way to drive engagement in a meaningful and memorable way. More often, it remains a neglected aspect of web designing. Thanks for pointing it for enhancing user experience.

  10. Angel

    Nice posting about Web design. The hardest part of web design is to understand the UX design and usability.

  11. Alex T @ Web Design Philadelphia

    The core objective of a website is the attention of the visitors. Here in this post, the points you’ve enclosed are elegant and effective to grab the users’ attention.

  12. mocharlamanoj

    really superb blog…very good information

  13. Mark  

    Hi Sabina, great blog shared above. Really very useful information shared regarding web design. Thanks for sharing. Awaiting for more blogs like this.

  14. Sabina Idler

    Hi Mark,

    Thanks for your kind comments. It’s great to see people enjoy our blog! :)

  15. Alex

    Wow very cools sites, and also some credit goes to you, because you have make a collection of these sites. And off course your description is impressive.

  16. isabellasophia668

    Thanks for your thoughts on the topic!

    I agree, using humor is not everything – You need to know when and how to use it. And that’s actually the most tricky part.

  17. Website Design in Delhi

    Very usefull blogs for all web designers and web developer to learn the latest skills and trends.great blog shared above. Really very useful information shared regarding web design. Thanks for sharing.

  18. Vera Bush

    Thanks for the great information sharing.your blog is very helpful for web developers and web designers.

  19. Zsmicrotech

    Thank for great workflow web design and development & useful and helpful information share blog.

  20. satya

    Thanks for sharing the useful information with us..Keep going!!

  21. Krish

    Very good blog. Informative . Thanks For sharing

  22. website stats tool

    Very descriptive article, I loved that a lot. Will there
    be a part 2?

  23. Rosie

    The user experience is very important, I think designing out of the box is the only real way of creating something different. Meeting a brands expectations can often mean thinking as a cross between an artist and a mad scientist.

Leave a Reply

Your email address will not be published. Required fields are marked *