{"id":163278,"date":"2017-03-21T13:00:34","date_gmt":"2017-03-21T13:00:34","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=163278"},"modified":"2022-03-29T04:40:08","modified_gmt":"2022-03-29T04:40:08","slug":"gamification-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/gamification-wordpress\/","title":{"rendered":"Fun Ways to Add Gamification to Your Website"},"content":{"rendered":"<p>According to an <a href=\"https:\/\/variety.com\/t\/entertainment-software-association\/\" target=\"_blank\">annual survey by the Entertainment Software Association<\/a> in 2021, there are now a total 226.6 million video game players in the U.S. of all ages, growing nearly 6% from 214.4 million in 2020.<\/p>\n<p>Among other key findings from the survey: About 55% of those surveyed identify as male (vs. 59% last year) with 45% identifying as female (vs. 41% in 2020). The average video game player is 31 years old (and 80% of players are over 18), with 38% of gamers 18-34.<\/p>\n<p>ESA president\/CEO Stan Pierre-Louis said:<\/p>\n<blockquote><p>&#8220;Players across the country embrace the ability of games to inspire, provide stress relief and mental stimulation or simply bring joy through play.\u201d<\/p><\/blockquote>\n<p>It\u2019s this sort of research and the usage of words like &#8220;bring joy&#8221; and &#8220;inspire&#8221; that should pique your interest if it hasn\u2019t already. Why? Well, because games aren\u2019t just for kids anymore. As the generations who grew up with computers and video games begin to comprise more and more of our target audience, we\u2019re going to see more businesses use gamification techniques to lure in this techno-savvy and rewards-driven audience.<\/p>\n<p>If you\u2019re interested in exploring this concept of gamification and want to see how you can put this into play on your WordPress website, keep reading.<\/p>\n<ul>\n<li><a href=\"#feature\">Websites That Feature Gamification<\/a>\n<ul>\n<li><a href=\"#BuzzFeed\">BuzzFeed<\/a><\/li>\n<li><a href=\"#Papa\">Papa John\u2019s<\/a><\/li>\n<li><a href=\"#Robby\">Robby Leonardi\u2019s Resume<\/a><\/li>\n<li><a href=\"#Llama\">Salivation of the Llama<\/a><\/li>\n<li><a href=\"#Todoist\">Todoist<\/a><\/li>\n<li><a href=\"#Twitter\">Twitter<\/a><\/li>\n<li><a href=\"#WPMUDEV\">WPMU DEV<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#adding\">Adding Gamification to Your WordPress Website<\/a>\n<ul>\n<li><a href=\"#tooltips\">Tooltips<\/a><\/li>\n<li><a href=\"#progress\">Page Loading Progress Bars<\/a><\/li>\n<li><a href=\"#quizzes\">Quizzes<\/a><\/li>\n<li><a href=\"#communities\">Communities<\/a><\/li>\n<li><a href=\"#points\">Points-Based Features<\/a><\/li>\n<li><a href=\"#membership\">Membership Rewards<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 id=\"feature\">Websites That Feature Gamification<\/h2>\n<p>Businesses have been making use of gamification techniques for years and they\u2019re reaping the benefits as audiences are clearly receptive to them. For instance, think about restaurants that offer those nifty little ordering kiosks on their tables. Kinda hard to ignore those and the brightly colored games on them, right? Then there are those undeniably useful reward tracking apps your favorite retailers and fast food joints offer. Hit a certain number of points and get $25 off!<\/p>\n<p>Gamification isn\u2019t just a gimmick brick-and-mortar shops can use to entertain guests while they wait for food or to entice them back to spend more. Gamification can be used on websites as well\u2014and it\u2019s not just about offering up a literal <em>game<\/em> either. In fact, most forms of gamification are fairly simple adaptations of game mechanics.<\/p>\n<p>Curious to see how others have done this? Let\u2019s take a closer look at how gamification features can add a new layer of awesomeness to your WordPress website.<\/p>\n<h3 id=\"BuzzFeed\">BuzzFeed<\/h3>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/buzzfeed-hamburger.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" \/><figcaption class=\"wp-caption-text\">Buzzfeed is infamous for its silly quizzes.<\/figcaption><\/figure>\n<p>I think that as much as BuzzFeed wants to be seen as a news outlet, there are just some of us that appreciate BuzzFeed for its ability to provide a random diversion during the workday. That being said, they do a fantastic job creating <a href=\"https:\/\/www.BuzzFeed.com\/norbertobriceno\/satisfying-food-live\" target=\"_blank\">these quiz-like diversions<\/a>. While they don\u2019t necessarily drive the bottom line (other than to get more blog subscribers), they are effective in driving brand awareness.<\/p>\n<h3 id=\"Papa\">Papa John\u2019s<\/h3>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/Papa-Johns-1.png\" alt=\"Post image\" aria-hidden=\"true\" width=\"670\" height=\"191\" \/><figcaption class=\"wp-caption-text\">Papa John&#8217;s Rewards scheme.<\/figcaption><\/figure>\n<p>This gamification technique that <a href=\"https:\/\/www.papajohns.com\/order\/papa-rewards\" target=\"_blank\">Papa John&#8217;s<\/a> uses is pretty basic, though it\u2019s still a highly effective one since it plays on our urge to win and be rewarded for our investments. Like I said, gamification isn\u2019t always about using an actual game to engage and inspire visitors; sometimes it\u2019s enough to use visual elements reminiscent of gaming to drive the intrigue.<\/p>\n<h3 id=\"Robby\">Robby Leonardi\u2019s Resume<\/h3>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1364x1364 size-1364x1364\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/robby-leonardi.gif\" alt=\"Robby Leonardi's platform game-style website.\" width=\"1364\" height=\"879\" \/><figcaption class=\"wp-caption-text\">Robby Leonardi&#8217;s platform game-style website.<\/figcaption><\/figure>\n<p>I <a href=\"https:\/\/wpmudev.com\/blog\/illustration-inspired-wordpress-site\/\" target=\"_blank\">recently shared this example<\/a> when I was talking about the coolest examples of illustration-inspired websites. I think <a href=\"http:\/\/www.rleonardi.com\/\" target=\"_blank\">Robby Leonardi&#8217;s<\/a> resume is worth another glance though since it does a great job of using game mechanics that many of us are familiar with in order to show off his professional resume <em>and<\/em> web development and design skills.<\/p>\n<h3 id=\"Llama\">Salivation of the Llama<\/h3>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/llama.jpg\" alt=\"The Llama \u2013 and his formiddable spit \u2013 are ready to take revenge.\" width=\"600\" height=\"670\" \/><figcaption class=\"wp-caption-text\">The Llama \u2013 and his formiddable spit \u2013 are ready to take revenge.<\/figcaption><\/figure>\n<p>There really isn\u2019t much point to this website, <a href=\"http:\/\/www.lamapensacitu.com\/en\/#intro\" target=\"_blank\">Llama the Avenging<\/a>, other than to be entertaining, but it does a good job of it. From top to bottom, it uses video game-like engagements to keep the visitor wanting to scroll through, fill out the necessary details, and play along. Made by Italian agency copiaincolla, this page is an accurate reflection of their style of humor as well as their skills in web design.<\/p>\n<h3 id=\"Todoist\">Todoist<\/h3>\n<figure id=\"attachment_207882\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-207882\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/todoist-karma-1-1050x582.png\" alt=\"Todoist karma\" width=\"1050\" height=\"582\" \/><figcaption class=\"wp-caption-text\">Todoist Karma is a feature of the platform that lets users track and visualize their progress.<\/figcaption><\/figure>\n<p>Like many project management tools, <a href=\"https:\/\/todoist.com\/features\" target=\"_blank\">Todoist<\/a> has created a simplified and yet engaging interface that encourages users to fill in their ongoing tasks and then check them off upon completion. What sets Todoist apart from the others, however, is its use of goal visualization. So, rather than just say \u201cgood job!\u201d whenever a task is completed, Todoist offers Karma rewards based on how productive users are.<\/p>\n<h3 id=\"Twitter\">Twitter<\/h3>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/twitter-gamification.jpg\" alt=\"Twitter&#039;s gamification might not feel like a game as such, but it does push users to complete their profile\\.\" width=\"670\" height=\"500\" \/><figcaption class=\"wp-caption-text\">Twitter&#8217;s gamification might not feel like a game as such, but it does push users to complete their profile.<\/figcaption><\/figure>\n<p>Whenever someone creates a new Twitter account, Twitter offers a step-by-step setup guide. Questions like \u201cWhat is your username?\u201d and \u201cWhat are your interests?\u201d are asked. Once the account is live, Twitter continues engaging with the user by providing guidance in the form of <a href=\"https:\/\/wpmudev.com\/blog\/tooltips-wordpress\/\" target=\"_blank\">tooltips<\/a>. These are meant to encourage users to fill in their profiles completely (which is helpful if they weren\u2019t previously aware of those fields).<\/p>\n<h3 id=\"WPMUDEV\">WPMU DEV<\/h3>\n<figure id=\"attachment_207883\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-207883\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/wpmudev-hero-points-1050x748.png\" alt=\"wpmudev hero points\" width=\"1050\" height=\"748\" \/><figcaption class=\"wp-caption-text\">WPMU DEV gives hero points to members each time they get involved in the community.<\/figcaption><\/figure>\n<p>One of my favorite examples of gamification occurs within the comments section of this website. If you haven\u2019t noticed it before, be sure to scroll down and check out what WPMU DEV does with user profiles. You can also read more about the <a href=\"https:\/\/wpmudev.com\/earn-your-wpmudev-membership\" target=\"_blank\">Hero Points system<\/a>. Not only is this a great example of infusing some &#8220;fun&#8221; into a website with gamification, but it\u2019s also totally in-line with WPMU DEV\u2019s overall brand identity.<\/p>\n<h2 id=\"adding\">Adding Gamification to Your WordPress Website<\/h2>\n<p>Gamification can be fun, educational, drive loyalty, boost brand recognition, and do a whole lot more for a WordPress website. It\u2019s just important not to overdo it. Gamification needs to be memorable for the value it adds, and not just because you created a diversion someone can use for a couple minutes before getting back to work.<\/p>\n<p>With that said, let\u2019s talk about some practical ways you can add gamification features to your own website.<\/p>\n<h3 id=\"tooltips\">#1. Tooltips<\/h3>\n<p>Most video games will usually give you a quick overview of how to use the controller in order to navigate your way through the game. Think of <a href=\"https:\/\/wpmudev.com\/blog\/tooltips-wordpress\/\" target=\"_blank\">tooltips<\/a> in the same way. While your goal should always be to create an intuitive pathway from entry to conversion, sometimes it\u2019s helpful to add quick tips to keep your visitors moving along.<\/p>\n<h3 id=\"progress\">#2. Page Loading Progress Bars<\/h3>\n<p>Last year, I wrote a piece about <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-page-transitions\/\" target=\"_blank\">page transitions<\/a> and on how, with the right animation, you can keep visitors engaged as they wait for a page to load. Those same type of transitional animations work really well for gamification. Obviously, no one wants to sit and wait for a game (or website) to buffer, but with a short and entertaining enough animation, you may increase the likelihood that visitors stick around longer.<\/p>\n<p>Check out <a href=\"https:\/\/codebyzach.github.io\/pace\/\" target=\"_blank\">PACE<\/a> for free automatic page load process bar themes.<\/p>\n<h3 id=\"quizzes\">#3. Quizzes<\/h3>\n<p>Want to follow in the footsteps of websites like BuzzFeed and provide visitors with additional entertainment or educational value? Create quizzes, polls, and surveys to keep them engaged and give you an opportunity to gain additional insights about what more they\u2019d like to see from you. Check out the <a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" rel=\"noopener\" target=\"_blank\">Forminator<\/a> plugin for this.<\/p>\n<h3 id=\"communities\">#4. Communities<\/h3>\n<p>One of the benefits of playing video games is the opportunity to meet like-minded individuals as they explore the same landscape and universe as you. Some games even allow you to join forces and form your own virtual team, despite never having met one another in real life. If your website has a large community that would benefit from collaboration and communication, forming a membership service and community would be a great way to encourage that same team-like atmosphere.<\/p>\n<p>If you&#8217;re interested in creating a community, check out <a href=\"https:\/\/wpmudev.com\/blog\/buddypress-guide\/\" target=\"_blank\">BuddyPress<\/a>, a free social networking plugin for WordPress.<\/p>\n<h3 id=\"points\">#5. Points-Based Features<\/h3>\n<p>Further building on that idea of creating a community, if you want to take it an extra step and reward members with points, you can use a plugin like <a href=\"https:\/\/mycred.me\/\" target=\"_blank\">myCRED<\/a> to do so. For the most part, this plugin focuses on helping users devise points systems and manage visitors\u2019 points accumulation on their WordPress website. Purchase rewards, badges, games, and other related features are available through this tool as well.<\/p>\n<h3 id=\"membership\">6. Membership Rewards<\/h3>\n<p>Now, if what you\u2019re looking for is a wholly comprehensive membership rewards gamification tool, then <a href=\"https:\/\/captainup.com\/\" target=\"_blank\">Captain Up<\/a> is what you\u2019ll want. This tool comes chock-full of gamification features like badges, levels, trophies, points, currencies, and rewards. You can also use this to manage communication with your community and to promote and reward visitors for engaging with your brand on social media.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>Gamification isn\u2019t all that new of a concept. But as we discover better, more efficient ways to build websites, we now have the time to dedicate to innovative design techniques like gamification that we might not have otherwise considered.<\/p>\n<p>As always, remember to keep the user\u2019s experience at the front of your mind before introducing any new design or interactive elements to your site. Your goal should always be to improve the experience, not just to sell more. When it comes to gamification, the simpler and easier the feature, the better.<\/p>\n<p><em>Editor\u2019s Note: This post has been updated for accuracy and relevancy. <\/em><br \/>\n<em>[Originally Published: March 2017 \/ Revised: March 2022]<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>According to an annual survey by the Entertainment Software Association in 2021, there are now a total 226.6 million video game players in the U.S. of all ages, growing nearly 6% from 214.4 million in 2020. Among other key findings from the survey: About 55% of those surveyed identify as male (vs. 59% last year) [&hellip;]<\/p>\n","protected":false},"author":344989,"featured_media":163441,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[10469],"tags":[10620],"tutorials_categories":[],"class_list":["post-163278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business-marketing","tag-gamification"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344989"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=163278"}],"version-history":[{"count":12,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163278\/revisions"}],"predecessor-version":[{"id":208174,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163278\/revisions\/208174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/163441"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=163278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=163278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=163278"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=163278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}