DISCOVER

Every movement begins with a moment.

Finding UX Inspiration in a Game Design Tool

Posted 27 April 2016 9:00 AM by Jens Dietrich @MoxieUSA, @ApertureSilence

What Super Mario Maker’s level editor can teach us about creating learnable interfaces and encouraging quality user-generated content.

Game development is a time-consuming and costly affair. Even when iterating on an existing design, with the engine locked down, the vast content creation effort required for the desired longevity and value remains a challenge. One way around this is to enable your player community to create the content for you. After all, why spend costly time and resources churning out content when you can simply put the tools into your users’ hands?

For one, level design is quite difficult. At minimum, it requires a thorough understanding of the game’s mechanics and design principles, how to achieve flow and how to avoid edge cases that can be exploited or cause a player to get stuck. Moreover, most level editors are complex by necessity, intended for internal use by professionals with a background in programming. Simplifying these tools to make them learnable for the interested layman usually involves hiding or stripping out functionality. Even Little Big Planet, until recently the most successful console game series built on user-generated content, suffered from this issue. While an average user could put together a basic level after spending a few hours with the editor, doing anything elaborate required a degree of investment and effort only a fraction of the user base was willing to make. Conversely, when Nintendo finally threw up its hands to exclaim, “We’re sick of making Mario levels, why don’t YOU do it?” the response was enormous. Within one week of Super Mario Maker’s Japanese launch, over a million levels had been uploaded. Where its predecessors failed, the Super Mario Maker level editor succeeded spectacularly — and in a wide array of ways.

Staggering the toolset

Not allowing full access to the palette of level types and course elements from the start is one of Super Mario Maker’s more controversial design choices. After initial boot, you’re limited to the original Super Mario Bros. tile-set and mostly World 1 elements. New tools unlock every day or after you have placed a sufficient number of course elements in a level. While I can relate to the frustrations of power users (who have been quite vocal about their consternation), I am convinced that, for the average person, the limitation is beneficial. It is a way to avoid option shock and help you focus on the basics. It also poses the challenge of crafting an entertaining level in the iconic style without resorting to gimmicks. To me, the pacing felt nearly perfect. By the time I finished designing a level, the next batch of tools had unlocked, which I would then try out in the next level. After making a level a day for the first week (though not all good enough to upload), I had unlocked the full toolset and felt utterly proficient with it.  

Leveraging decades of shared Mario experience

Super Mario Maker has a built-in advantage over its competitors: it’s a Mario game, the kind that we’ve been playing regularly since 1992. The tropes and machinations of the series are so well established that players don’t need to be educated on how Chain Chomps work or what a P block does. The tutorial smartly communicates only a set of ground rules and lets you discover the rest through a combination of experimentation and core knowledge. Starting out, you’re told how to place course elements, how to combine two elements by dragging one over the other and how to toggle to an alternate version of an element by “shaking” it with the stylus. Once you’ve learned that you can shake a green Koopa Troopa to change it to its more aggressive red brethren, its easy to deduce that the same logic applies to any other course element with variants. Dragging a Super Mushroom onto any character to enlarge them, attaching wings to make flying enemies or shoving anything into a Bill Blaster to create a constant barrage of it — such concepts seem intuitive because Nintendo was able to so closely match the internal logic of the editor to the gameplay logic of the platformer.

Fun interactions and feedback

If you’re a fan of the SNES classic Mario Paint, you can expect Super Mario Maker to wrap you in a fuzzy nostalgia blanket. In fact, Super Mario Maker initially started out as a new Mario Paint game, and that lineage is immediately obvious — from its animated title card to the fly-swatting mini-game. As with Mario Paint, Nintendo has again taken great care to make its menus fun. Information is chunked sensibly, transitions are elegant and playful animations abound. Easter eggs hidden throughout provide incentive for users to thoroughly explore the interface. Sound effects coinciding with certain user actions (e.g., placing a course element) are tuned to be in key with the catchy background music, creating a kind of continuous remix and a satisfying feedback loop. Interactions that occur during potentially frustrating moments are especially well thought out. For instance, if you must delete all your work and start with a fresh stage, you don’t just select “delete” from a menu; instead, you hold down a “nuke” button while a meter fills, the screen shakes, and a rocket rises from the button, flies up off the screen, and comes back down to blow your level to smithereens. That’s the degree of levity I desire when throwing away a bunch of hard work.

Tinkering access

When you come across a particularly ingenious level, you don’t have to frustratedly wonder how it was achieved. Any published level can be downloaded by other users, who can then take it apart to make sense of whatever brilliant clockwork logic it employs. Having access to everyone else’s designs, and the ability to deconstruct them, may well be Super Mario Maker’s most powerful learning tool. There is no shame in taking inspiration from one’s peers, and I always find it enlightening to see the editor used for novel puzzles or challenges, environmental storytelling, Rube Goldberg devices or anything that’s not traditionally done in Mario. One smart safeguard against plagiarism: though you can download a copy of any level to your local drive, you can never republish that file on your account.

In teaching its users how to make Mario, Super Mario Maker also teaches the absolute necessity of disparate disciplines bolstering each other to create a harmonious user experience. Without the presentation layer, the menu layouts and interaction design would come across as merely efficient. The subtle animations and sound cues, which for most other designs would be a “nice to have,” are so much in the forefront here that they become the most memorable and pleasant aspect of the UI. Yet none of this would be enough if Nintendo hadn’t first solved the problem of how to intuitively communicate the functionality of the toolset and if it hadn’t made smart strategic decisions on how to pace its reveal. Such coherence is rarely achieved without close-knit teams, inter-discipline collaboration and a truly holistic approach.

Photo sources:

Screenshot taken from http://www.giantbomb.com/videos/quick-look-super-mario-maker/2300-10664/

Share:

Add your comment

 
 

 

Comments

  • Smitty said:
    4/27/2016 1:46 PM

    Good article. Tileset unlocking in SMB was much too slow. You should share those levels you made.

  • La said:
    5/2/2016 12:23 PM

    Fly Swatter game returns?!! YESSSS!

Archive

Syndication

Tagcloud

#crisis #socialmediacrisis #socialmedia #digitalmarketing #socialmarketing #strategy #influencers #communication #pr #media #ideation #creation #content #planning #culture Snapchat Snap Inc. advertising marketing social media community management brand millennials authenticity Spectacles Wearables customer customer service Paid Media Podcasts Content Sponsored Ads Content Marketing #content #marketing #media #analytics #digitalmarketing #ideation #creation #production DecisionIQ strategy big data personalization Humanizeit Facebook Facebook Live Video Instagram Stories ftc guidelines social influencer social influencers social media influencers social media broadcasting live video Processing prototype prototyping user experience ux technology programming coding java ideas design visual arts mix reality mixed realities data tutorial sketch Twitter Carousel Ads Ad Exchange Programmatic FBX Disney virtual reality projection mapping RFID Tumblr Voice Tone Axure wireframing UX software collaboration Measuring Usability UX Best Practices Designing User Journeys Stop counting clicks Designing for completion Designing for satisfaction Dieter Ram and User Experience Less is more Less but better Influencer Marketing learnability user interface user-created content gaming maker editor Super Mario Maker Nintendo digital media chat bots messaging mobile applications automation F8 Mark Zuckerberg Business F8 Conference Email office agency communication Slack Facebook at Work meetings productivity Wearable tech Healthcare Experience Patient Experience Service Design Strategy Creative Moxie VR Six Flags Six Flags Over Georgia theme parks Samsung Samsung Gear Samsung Galaxy VR headset Oculus Rift Playstation VR roller coasters Dare Devil Drive Websites Web dev development digital reactions emotion analytics dislike social metrics clicks Brands Consumers CPG Retail Consumer Marketing Consumer Insights Super Bowl Commercials Football Cultural Phenomenon Game adtech martec auto-responders automated marketing Experience Design Interaction Design Ecosystem iOS Healthkit Ad blocking Forbes Condé Nast GQ interactive media ad-light hashtags hashflags audience visual emojis campaign management 1-to-1 marketing omnichannel CES CES 2016 Oculus Sony PlayStation uSens HTC special mapping hand tracking games PetBot WonderWoof BowTie Pets OTT digital distribution Netflix Reed Hastings on-demand #yearahead #2016 #newyear #2016predictions #digitalstrategy #modernism user-generated content UGC Consumer Connection Integrated Marketing Manufacturers Accessibility usability engagement rate disability awareness creative process creativity fail fast hiring ideas imperfectionist perfectionist personnel progress test and learn fast casual restaurants social media campaigns QSR social strategies in-store promotions in-store social media promotions successful social media campaigns Logos Typography Branding #CPG #Retail #ConsumerInsights #CRM #ConsumerDirect #Seamless #OmniChannel #MoxieMakers #frontierism #intelligence #architecture insight moments Unit3C FutureX lab innovation open house Q&A UnitFilms 48in48 General Assembly Non-Profit Ponce City Market Branded design technical design style guide wireframes brand guidelines Consumer Products Interactive Marketing GIF social campaign modern marketing Cannes Lions new media pop culture meme Web Accessibility QA media media buying mobile apps targeting wires Advertisers Apple Store EasyPay self-checkout app mobile payment Sporting Events Sitecore CMS delivery Content Marketing Strategy Brand Content Marketing Content Strategy Brand Content Strategy Social Content Strategy Cannes humanity what3words life saving dot Agency Partnership Agency Relationship Competitive Review Millennial Marketers email marketing omni-channel digital marketing esp email service provider process WCAG 2016 Planning Connected Omni AR Commerce Social Innovation Create Content Strategy OMMA MediaPost Internet Week TV & Video Media Planners Creative Conundrum real-time scalability Customization smartphone loyalty advocacy live streaming content democracy Open Source Node.js Cheerio Handlebars Hyperquext MongoDB Atlassian Stash PhantomJS Shopping On-demand economy Sharing economy Everything on demand Instant delivery iPhone App Amazon Now Build Automation DevOps Native Advertising Machina Forrester SXSW Machine Learning Data Streams Web search results Data Platforms ROI Instagram Purchase Behavior Like Content Consumer Channel Role and Purpose ExactTarget Salesforce Cloud Responsys Oracle Silverpop IBM Agency Culture Innovation and Technology Client Relationships Platform Partnerships Ever-evolving Digital Age geo-fencing tablet Android second-screen Austin FOMO Meerkat scaleable vector graphics Flash animation interactivity code browsers uber-savvy consumers integrated digital-connectedness Valentine's Über Bloom that Open Table Waze marketing research google music art sports illustration sculpture food green entertainment movies photography real time marketing cheat sheet smart homes vine print 3d printing street art painting fashion influencer movie billboard outdoor mobile wallet toys film halloween history space films cars anniversary
×

PLEASE PROVIDE YOUR INFORMATION
TO DOWNLOAD THE PAPER.

Error: All fields are required.
×
THANK YOU.
YOUR DOWNLOAD IS NOW AVAILABLE.