Analysis: 'Socially Awkward' - Peripheral Visions, Divisions

[Continuing his series on social games, game designer Patrick Dugan argues that "social games on Facebook have awful UI design by any common standard of the term." Here's "Socially Awkward IV".] The real estate bubble popped in 2007, just in time for the bubble in social games and Treasury bonds to swoop up and save us all, with a brief intermission in 2008. It wasn't long before social games began utilizing their real estate like a grungy Manhattan landlord, every cabinet of visual registry must by utilized for maximum LTV [lifetime value]. If there's a bit of empty space, or maybe if we could add another layer, yeaaahh, just add that layer right there, we'll stuff our game UI with money-making icons that just can't lose like Santa stuffing stockings on one of his jolly meth binges. How else do you think he visits the children of the world in one night? Let's face it, preferably here early in the essay before I get side-tracked on inane, tangential metaphors: social games on Facebook have awful UI design by any common standard of the term. I know "it's different this time" because it's a new audience that doesn't have brains or taste like all the people who played video games before Facebook, but it's still terrible to stuff the majority of the screen with screaming side-bar icons, pop-ups, cross-promotion banners, and whatever other hyphenated abomination the CPI-LTV arbitrageurs lurking in the balance sheet dungeon can conceive-of. Where's the game in all that noise? Breaking it down by the numbers, the screen real estate of a Facebook "canvas app" embedded into the sophomoric web design of Facebook (with all due respect to Zuck, who was a sophomore when he designed it): - 20% of the screen is lost to white space from the left, right and bottom white fringes of the Facebook web design - 5% of the screen is taken up by the blue bar at the top of the screen with the notifications and whatnot - 5% of the screen is taken up by Facebook ad objects - 7.5% of the screen is taken up by the developer's own cross-promotion banner - 7.5% of the screen is taken up by the developer's bottom ad banner, possibly cross-promoting a specific game that they want to pump traffic into to balance their net DAU across their whole portfolio, or one of those now obsolete progress bars that encourages you to Like the game, submit your mail, give publishing rights, or whatever the platform config du jour happens to be. Facebook is now getting enough right in that regard that more companies are using that space for cross-promo. That leaves us with about 55% of the screen, a voting majority, for the actual Flash client embed - though recently Facebook announced a feature where developers can opt to take the land back. Still, what we do with our reservations says a lot. Here's where it gets just monstrous: - Every game just has to use a neighbor panel, so people can accidentally click on their friends pages or on an invite pop-up prompt, and generate LTV through their visit or invitations. Nobody has ever considered a more elegant way of providing menu access to your friends' game shards other than a left-to-right queue listing people by order of level. I'm not saying nobody has built a better mousetrap yet, I'm saying nobody has even tried, at least going from published games I've played. Bam! 10% of the screen, lost to a static UI panel. We're down to 45%. - every game has the same top-screen UI listing, at all times, because YOU NEED TO KNOW: your current balance for soft and hard currencies, your current experience and progress to the next level, probably an energy bar (that energy is so hot right now, energy) and whatever else the designers wanted to cram in, in an an attempt to vertically stack complexity into the game via secondary resources that just introduce dependency delays in the same ol' harvesting systems. These are fairly thin UI elements crowding the balcony seats, so let's say they involve 3% of the screen. But wait, there's more! - Side-bar icons -- because what's a game without incessant screaming icons in the corner of your eye suggestively offering the latest promotion of once-in-a-lifetime, valid while supplies last, virtual decorative items. And quests, gotta have quests. If we don't fill the left-side of the screen with icons, we won't get as big of a revenue spike when we release our Cinco de Mayo items, and we won't get people coming back to finish our awesome quest content. That's just statistics. It is scientifically impossible to make more money with a sleeker UI design. Here's my mathematical proof: I gift often. You're welcome. I figure those icons take 2% of the screen, so we're down to 40% Now fill your game with tons of stuff to click, add foraging so every time you click on something you get even more stuff to click on, soft currency, XP, whatever. The percent of the screen that is single-layer game world will fluctuate between 40% and 15%. It's a real clutter-fuck. You may be thinking "what about full-screen?" and my answer to that is: yes. Full-screen should be a part of the game-loop for social games. All the cool kids migrating to mobile-social games get it automatically but it's a smaller screen. I'm a big believer in cross-platform, which is to say I'm platform agnostic and atheism is another religion. In a cross-platform world, you have to design your product for a whole spectrum of engagement and find your whales diving in the deep end. Encourage your players to use full-screen. Intrinsic benefits are best, a game that allows you a heightened capacity of skill or response with a full-screen view, a game that rewards you with sumptuous immersion, perhaps even an entire source of information that would not be visible in windowed mode -- if you want to get crazy. At the very least, throw some extrinsics on it, make it a quest to go into full-screen mode and do some stuff that is much more fun and easy in full-screen mode. I’ve seen a lot of games try that, Little Cave Hero being the last I can remember (2.5 pixel-art ftw), but in my personal playing experience full-screen does not become part of the habit. Some portion of your players will take to it and these folks may well correlate to your best customers, the portion will probably be bigger if there’s a real tactical edge to going full-screen. But obviously full-screen isn't a panacea, unless you're on the mobile version, in which case it's the default. For Facebook, you still get the canvas window by default. How can we improve our UI design without losing the statistical edge from the current "best practice?" Here are a few ideas: - Only display game elements when they are needed, as far as I can tell energy is the only thing that needs to be a consistent HUD object. - Have in-game characters or objects provide the same function as side-bar icons based on context. - Make the neighbor panel thinner, relegate all GUI objects co-located on the panel to context-sensitive mouse-cursor transformations. What about the classic Move-Sell-Action-Cancel button? We can't use the right-click, I'd say either a ring that furls out from a click-and-hold or you keep this button and the store button as your only two GUI objects on the panel. Sleek. Maybe both. What about Collections/Achievements, Quest Logs, Inventory, things of that nature? Make them into object functions. Why don't I have a collection repository in CityVille? Why don't I have Quests come out of city hall? I'm sure they have a lot of data on that decision, but maybe in a flurry of A/B testing option Q was never considered. There was a study a few years ago on psychosis, they used World of Warcraft players who used a second screen as their study group... something like that. Apparently having to process information coming in from your periphery leads to a psychotic breakdown over time because of the cross-mojonation of the information processing. Eventually a soccer mom will fry her pre-frontal cortex trying to click on foraged XP stars while simultaneously choosing which friendly side-bar icon she should click for her next quest. Then she'll quietly put the kids into the oven, freezer, and safety deposit box, so fraught with multi-tasking she could be tucking them in, and when the cops arrive she'll request they staff her police station so she doesn't have to spend five bucks to increase her Community Score. In the land of the blind leading the blind, the one-eyed contrarians win. [You can also read the rest of Dugan's series about Metal Gear Solid 2 predicting Facebook, the industry's Wall Street envy and The Joy of Vector Meme.]