C’mon & Play Me Like a Game: Playful Elements in Web Design

C'mon & Play Me Like a Game: Playful Elements in Web Design

Are you a serious person in real life? Maybe you are a backslapper feeling at ease in any company. Sometimes you need to tell a joke or two to become the heart of the party. The same trick works in web design. Nobody likes moody, always whining people no matter how talented they are.

Positive emotions are especially important on the web. What do most visitors come here for? Fun? Entertainment? Information? Work? The reasons are varied, but we don’t think that depression is in the list.

Let’s imagine a typical process of a visitor’s onsite stay. The web becomes simpler and more intuitive each day. Everything is directed toward the user’s convenience. Site owners take into consideration today’s busy lifestyle and try to give the customers whatever they need as quickly as possible.

Using Fun Elements in Web Design

Such an approach is absolutely justified on most websites, where people come knowing exactly what they want to get. But the fact is that not all websites are dedicated to speedy actions, some show or teach new technologies, information, tell about new company products or services. Would you like the user miss the most interesting part of the journey? Just let this sink in for a minute… We guess you will answer something like this “Like hell!” So, even at this stage of our narration we understand that swiftness doesn’t fit each and every website.

For the utmost visibility we can draw a parallel with real life. We are always in a hurry. Firstly we want to get a good education, then apply for a decent job, then earn a lot of money to buy a house, a car, to get married, to bring up kids and so on and so forth. Getting older we understand that we’re racing around in a vicious circle at the lightning speed that doesn’t leave us a single chance to enjoy such simple things as careless childhood, just hanging around with friends, we didn’t notice how our kids turned into adult people.

Yes, it’s a sad truth about the circle of life, which we understand when it’s too late. We are old, sick and feeble to make up leeway. Many, especially Eastern religions, state that the aim of our life is not the achievement itself but the way we should pass to reach it. Does this make sense to you?

Sorry if the above words upset you, in fact we just aimed to make you think about not depriving your customers the enjoyment of emotional design.

Fun Element
Image credit: Bigstockphoto

Here some developers will say that a playful, humorous approach doesn’t match all corporate designs. If you want to know our viewpoint, we believe that such an attitude can be applied to every design, be it a financial company or a toy store. Thus, some clients want their websites to look solid and serious. In this case, the designer should meet all their requirements as the customer is always right.

But the goal of our blog post is to help interested developers and convince their customers to make their designs more playful, cheerful, positive and humorous. We even gathered a collection of free UI elements that will give any webpage a more welcoming, friendly and engaging look. You can use ready-made templates for the purpose also.

If you are not sure that playful designs are really cool, here are the arguments to uphold our position.

Why should you let the users play?

  1. Need to motivate the users for investigation? Let them play. Playing is the most natural motivation. Everybody knows how to play, you don’t need any instructions. Why? Because all of us were learning through playing games during childhood. Nobody needs additional reasons to play because it’s the activity we take pleasure in.
  2. A playful environment is the way of overcoming technological barriers and eliminating people’s knowledge gaps. What are the most frequent users’ reactions when they face an unfamiliar interactive tool or a new technology? Hesitation, confusion or anxiety (maybe all at once). But what if it’s just a playground? What would they feel then? Maybe curiosity? When we are having fun, we lose our fear of the unfamiliar and are quite happy to pick up the unknown objects and experiment with them. By the way, it’s a good life hack to teach the older users (that are not on friendly terms with new technologies) new tricks without making them notice that they are being taught right now. Why should you bother? The reason is quite mercantile. Would you like to broaden your targeted audience? This is not the worst way of doing that.
  3. Psychological background. It’s human nature to learn how to play a new game by either experimentation or watching and mimicking others. We don’t want to say that learning by mimicry is something that typically happens with interactive applications. But when people watch others, who look like they’re having fun, playing with cool-looking apps, they’re bound to take a peek over their shoulder and then check out the app on their own.

Playful
Image credit: Bigstockphoto

But it doesn’t stop there, either. Would you like to know more tips on playful design? Then, we continue…

When playfulness is appropriate?

As we have already mentioned above, it is possible to include some elements of play into any design, but there are many website categories where a playful style is a perfect fit. They are: music, movies, gaming, entertainment websites, interactive installations, kids’ toys and apparel stores, kids’ channels, real estate agencies, restaurant websites. Even some solid brands like Nike, for instance, have figured out their benefits of playfulness and interactive experience, which considerably boosts UX and conversions as the result.

Bear with us as the story goes on. We are getting more specific now.

What do we mean by playful experience?

Surely no diapers and pacifiers are implied. Just kidding. Serious sentences are coming next. A playful interactive experience starts at the point when people forget for a while about their tasks and engage in interactions for the sake of the experience or exploration. Play is an activity people engage in for enjoyment rather than practical purposes. Of course, later, users recollect what they were going to do onsite and return to the original purpose. But they get better UX, which may convert them into your loyal customers, which is important if you want your business to thrive for a long time.

But be careful!

Not all users want or have time to play games. Letting your visitors play too much, you risk losing all your conversions. So, playful features should not affect those customers who just want a hassle-free, quick journey to their intended goals. Though, even taking into account the users that are not in the mood for playing with you, playful user experiences demonstrate an unobtrusive way of expanding a user experience. Introducing the element of play, you can expose customers to new products and, generally, extend their time of stay onsite. This potentially strengthens their bond with a brand. And best of all: offering customers an enjoyable experience increases the likelihood they’ll return in the future many times. Plus, there is also the marketing benefit of increased viral potential. When people enjoy a fun, playful user experience, they tend to tell their friends about it.

Did we convince you that e-commerce sites could benefit from playful user experiences? We hope so. Now let’s go further and consider some business sectors not associated with playfulness at all, like online banking, for instance.

Most first-time investors prefer to seek personal advice from a banker rather than use their bank’s website to make an investment on their own. And we understand them very well. All these reputable environments might make the visitors feel small and lost when trying to wade through the large amounts of data available on a website. A direct personal contact and friendly professional advice would probably seem much more reassuring, wouldn’t it? We believe that a playful, interactive tool that a website initially presents as a learning aid for first-time investors could help to overcome customers’ intimidation. It may be the tool introducing different bank employees with unique areas of expertise, who could make investment recommendations to the clients.

Investors could perhaps visually explore the history of a certain investment and get a banker’s view on that investment, carrying on virtual conversations with the bank clerk of their choice. A customer could ask a banker to further explain a recommendation and interact with visual representations that accompanied a banker’s explanation. With the banker’s explanations of their recommendations, customers could explore further investment options, maintaining full control over the depth and time scale of the information they see.

The reality is that the possibilities for applying playfulness to applications are endless. You only need a bit of inspiration and imagination. On this tool’s example we can clearly observe that the app, not initially intended for making an actual investment might encourage customers to make an investment, based on a banker’s recommendation. This approach could help to eradicate customers’ initial apprehension of making an online investment. Even the most prudent customers who ultimately choose to approach their banker in person would become better informed and more confident through using this tool.

It’s just the tip of the iceberg; the possibilities for applying playfulness to applications are infinite. If you are one of the current designers re-branding themselves from interaction designer to user experience designer, you’ll adopt the technique.

Fun Game
Image credit: Bigstockphoto

Supposing, we assured you that a playful design can considerably improve the user experience. Would you like to know what elements will help you create such UI? Here they follow:

Playful UI elements

  1. Bright colors. Experiment with hues and their combinations, this will impart a fresh, trendy look to your design.
  2. Uncommon shapes. You can use buttons, labels, stickers, badges and other design elements of nontrivial forms to draw visitors’ attention to additional information.
  3. Big fonts and elements. Size matters. It makes the content more legible.
  4. Unexpected animation effects. They definitely make the layout more dynamic, interactive and interesting to investigate.
  5. Hover effects. They help to keep the page uncluttered and give all necessary explanations.
  6. Sliders. Beautiful sliders let you show as much content as you wish right on the home page.
  7. Interactivity. When all design objects respond to your actions, this adds interest to website viewing.
  8. Humorous/cartoon style. Smiles make our life longer, so make your customers smile more often. But please note that humor is a tricky thing. It shouldn’t offend anybody.
  9. Small/easy riddles (like fun captchas). Replace regular boring captcha numerals with quick funny tests.
  10. Make contests with prizes for winners. Most people are venturesome by nature, so they will take part in your competition with great pleasure, especially if there is a chance to get a reward.
  11. Discounts, limited time offers, giveaways. All people like to save or get something for free, so they will never miss the chance.
  12. Actions can be boring. Plain, straightforward actions can be tedious for people who have time and desire to have some fun.
  13. Include minimal texts. They should be comfy for quick scanning and render all main ideas at once.
  14. Make it easy to try again. If the visitor failed to complete some action on your site, don’t leave them frustrated, give them another chance to succeed.
  15. Don’t cheat. All promises should be kept accurately; otherwise nobody will believe you again.
  16. Try to fit the game into the player’s lifestyle. Every website has its targeted audience, so it’s possible to predict which games they like to play.
  17. Engaging online photos and videos. A picture is worth a thousand words. So how many words is a video worth?
  18. Interactive online quiz. It may be optional, for those who enjoy such things.

We hope that these simple tips will help you add some playfulness to your designs. Have you heard enough? So, let’s pass to the visual part of our blog post.

Free Fun UI Elements

Weather Widget
Weather Widget

Free Neon Buttons PSD
Free Neon Buttons PSD

Login Form UI element
Login Form UI element

Flatic User Interface Kit
Flatic User Interface Kit

En Vogue UI Kit
En Vogue UI Kit

UI Kit
UI Kit

UI Kit
UI Kit

Nagham Music iOS 7 App
Nagham Music iOS7 App

Thallium GUI Kit
Thallium GUI Kit

UI kit with Cold Colors
UI Kit with Cold Colors

Modern Touch UI Kit
Modern Touch UI Kit

Simple & Sweet Calendar Widget
Simple & Sweet Calendar Widget

City Break UI Kit
City Break UI Kit

User Card
User Card

File Manager App Kit
File Manager App Kit

Mini Slider Interface
Mini Slider Interface

Polaris UI
Polaris UI

Noisy Buttons
Noisy Buttons

CSS Windows 8 Metro Buttons
CSS Windows 8 Metro Buttons

Form Alert Interface
Form Alert Interface

Weather App UI
Weather App UI

Metro UI PHP Generator
Metro UI PHP Generator

Metro Twitter Feed
Metro Twitter Feed

Dashboard UI Elements PSD
Dashboard UI Elements PSD

Free Button Set
Free Button Set

Pretty WordPress Login Box
Pretty WordPress Login Box

Very clean UI elements
Very clean UI elements

Shelby Web UI Kit v1
Shelby Web UI Kit

Profile Settings UI Element
Profile Setings UI Element

Light Video Player PSD
Light Video Player PSD

Author Box UI Element
Author Box UI Element

Stylish Pop-up Content Box
Stylish Pop-up Content Box

Various PSD Sliders
Various PSD Sliders

Stitched UI Set
Stitched UI Set

Sleek pagination PSD
Sleek pagination PSD

BootMetro – Metro style web framework
BootMetro

Free PSD dropdown menu
Free PSD Dropdown Menu

Pretty little notification boxes
Pretty little notification boxes

Social Buttons
Social Buttons

Metro UI CSS
Metro UI CSS

CSS Image Stacks
CSS Image Stacks

Stack Image Slider PSD
Stack Image Slider PSD

CSS & HTML 3D Slider
CSS & HTML 3D Slider

Conclusion

Now that you’ve heard our standpoint on the matter, we would like to know what you think about playful design. Do you agree that a portion of good humor is appropriate on any website? Do you think that online game playing is good for user experience? Do you use this technique in your designs?

Maybe you have successful personal experience of playful design. If you have your own playful design tips or just thoughts on the topic, please share them in the comments section.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.