Case Study: FV2 HUD

Case study of my work designing the HUD (heads up display) for FarmVIlle 2. I based my learnings on previous social game experience on FarmVIlle and other Zynga games. I optimized for usability and tried to maintain a clean, uncluttered experience.

FarmVille 2: Avoiding the HUD Arms Race

Challenge

Most social games are plagued by a certain disease: The longer the game is live, the more obnoxious (and unusable) the UI gets—especially in the HUD. I call this the Arms Race principle; an escalation of visual one-upmanship as every new feature tries to outshine the rest.

With FarmVille 2 I had the chance to start a UI/UX system from scratch, and I was determined that the HUD wouldn't suffer the same fate. We needed to design something that would remain clean and usable, even as the game evolved in ways we couldn't anticipate. The real challenge is designing for problems that haven't happened yet.

In recent years the FarmVille 1 HUD became an information disaster, as everything clamors to be most important.

We needed to design a something that would remain clean and usable, even as the game evolved in ways we couldn’t anticipate.

Approach

An Arms Race happens because of a weak system, not because of malicious intent (after all, no one wants an overcrowded HUD). There is simply an over-accumulation of new things, and nowhere obvious for them to go. The typical approach is to stick them wherever they fit, as they arrive.

So instead, we took a two-pronged approach: reduce the number of new items asking for HUD space, and build extensible systems in the HUD to accommodate future needs.

Solution

Part one: reduce the number of items asking for HUD space.

One big area of improvement was feature entry points. Since our mantra was "everything on the board, whenever possible" it made sense to restrict feature entry points to on-board, 3D objects. Not only does it keep the HUD clean, it's a more immersive experience as well.

Tools were another area we optimized: original FarmVille has six tool buttons, five of which are flyouts that reveal 29 (29!!) additional buttons. Clearly this wasn't optimal UX: the user had to memorize where 30 options were or go hunt-and-peck for them. Worst than that, the groupings of buttons doesn't seem logical.

By having interactions grounded on the board, FarmVille 2 still only has three button hiding seven options.

By keeping entry points on the board, being smart about default actions, and combining like functions, we were able to reduce our HUD tools to three buttons, hiding a grand total of seven options. The HUD is clean, and the user doesn't need to wade through endless tools—the same tool will milk the cow as water the crops, with a single click.

Promotional content was also guilty of HUD-clogging, interspersed with feature entry points and appearing randomly in front of gameplay. Clearly this was a case of plunking down content wherever there was room for it.

For FarmVille 2, we anticipated this problem and built a rotating HUD slot that displays eligible promotions, one at a time. By consolidating all of the temporary promotional content we dramatically reduced the number of items in the HUD—plus, now users know to look there for special deals.

When we designed the FarmVille 2 HUD, we made clear distinctions about what type of information can go where, and built systems to be extensible.

Part two: Build extensible systems

The promo slot is also a great example of building an extensible system. Leadership wanted a one-off icon plopped in the HUD; we delivered a solution that would accommodate any number of future promotions with ease—even though they insisted there wouldn't be any. Minimal additional dev cost, but the benefits have been huge as we've reused that spot constantly since launch.

Another systemic HUD solution that helped avoid an Arms Race was the Powerup Bar. As part of the game's first major addition, suddenly we needed to be able to surface a powerup: a Prize Shovel that would boost your farm's output for a limited time. Previous to this our game didn't have the notion of a powerup; where would we put it?

We needed somewhere in the HUD to surface the Prize Shovel—our only powerup. The Farm Status area was a natural choice.

Instead of waiting until more powerups were introduced before devising a surfacing system, we anticipated the problem and solved it proactively.

All the initial suggestions smacked of Arms Race: put it on the right side where there's space, add an icon by the tools, etc. But we decided to add it to the "farm status" area of the HUD. Again, despite the ask for a one-off solution, we insisted on an extensible module in the event that we had another powerup in the future. When we had the sudden need for additional powerups a few months later, surfacing was a non-issue since we'd planned for it.

Outcome

The FarmVille 2 HUD learned from the lessons of its predecessor and let the farm be the star.

The HUD is scarcely changed from it’s previous incarnation at launch. We still don’t have right side quests, extra tools, or additional rows of commodities—by social game standards, FarmVille 2 has a pristine HUD. This is the result of a combination of smart design and vigorous defense of against the Arms Race, and the upside is that the user benefits from a less distracting, more intuitive experience.