Hello again from the Conifer team!

At long last, we’re finally back with a new edition of ‘Jon rambles for too long about some esoteric game design topic (and along the way mentions AtG once or twice)’. Today’s lucky recipient of this most distinguished spotlight is the game’s user interface, or “UI”. I know this topic might sound roughly as exciting as watching paint dry, but I really do encourage you to stick around because once you’ve seen things with your own eyes I think you’ll understand why our bold claim of AtG’s UI being “revolutionary” isn’t just pre-release marketing hype.

It may also come as a relief that this update is actually a 3-for-1 deal where ‘Jon waxing poetically about his eternal love for UI and the beautiful soul it hides from the big, bad world’ is reinforced by two additional features.

The second member of our update trifecta is a fairly detailed bullet point outline of what’s new and cool with AtG’s UI, and provides the most bang for your buck if you only have a couple minutes to spare. I’ve attached it to the end of this article, so to check it out just scroll to the very bottom of this article and then back up until you see “UI Feature Outline” in big, bold text.

The real the star of our show though is this hands-on video preview of the UI (total of 66 minutes, split into 2 parts roughly a half hour long):

 

 

The old “seeing is believing” mantra sums up UI perfectly, and so much so that even a designer and UI fanboy like me can’t do it justice simply by describing it. So even if you don’t normally watch game videos I strongly encourage checking this one out. If you’re in a hurry skip ahead to the 11-minute mark, as that’s when we introduce AtG’s secret weapon.

The rest of this article makes up the final member of our trifecta, and is a dive deep into a number of UI-related topics that include: why good UI has never been (and never will be) the kind of ‘sexy’ bullet point that helps sell magazines, why in spite of that developers should still care, what makes UI design so difficult, where the idea for AtG’s Adaptive Tooltips came from, some of our UI design ‘rules’, and a look at the design process behind a few UI features we’ve put a lot of thought into so that players won’t have to.

…

 

Discipline of Shadows

The first thing that came to mind when I started writing an update about UI was “Won’t this sound boring to most people?” An encouraging start, I know! But given what we had to show off I remained confident in the idea, and the second thought I had was “Why?” It’s a complicated question to be sure, but the simplest way to approach it is to put ourselves in the shoes of each of the two stakeholders: players/press, and developers/ownership.

From the player’s perspective UI is something that might as well live in the ether, as it’s forever out of sight and out of mind. Even truly terrible game UI is rarely identified and lambasted as such. Players who bear the brunt of it rarely play for more than a couple hours, whereas everyone who sticks around eventually grows accustomed to it, eventually reaching the point where they genuinely don’t even see the flaws any more.

Ultimately, the mythical “perfect” UI from any player’s perspective would be labeled such precisely because it’s so intuitive that it becomes completely invisible. Our ability to learn, adapt, and tune things out is part of why we enjoy games at all and helps us in many other ways, but motivating us to pressure profit-driven companies into fixing endemic flaws in their consumer products certainly isn’t one of them!

But what about the developers? Unfortunately, a large number simply don’t find UI very much fun to work on. Most programmers want to spend their time building systems and solving interesting problems and not on tedious, never-ending polish and bugfixing (there’s no better example of the ninety-ninety rule in game development). Most artists want to express themselves by creating something beautiful and admired, not something where recognition is inversely correlated with quality, and many of those who do actually enjoy working on UI still approach it like any other art task, striving for beauty and admiration.

But someone ends up stuck making the UI for every game, whether they like it or not, and as you’d expect the end result is usually something well-architected and beautiful, but not necessarily intuitive or feature-rich from the perspective of those actually playing the game.

Crafting a good UI requires putting yourself in the shoes of your players and actually experiencing your creation as they would. This requires a certain degree of skill and know-how, but far more important is simply the dedication it takes to spend months or even years playing your own game over and over again, then come back the next day and tackle whatever new tedious bit of polish you think might make the game 0.0001% better. With a smile, preferably.

To be sure, there are amazing graphic designers and user experience (UX) specialists out there… but the problem is these talented individuals already command far higher salaries outside of game development. And because the value provided by UI is intangible the same is true of its impact on sales, and without that data even supportive members of management will be fighting an uphill battle making the case for adding those big salaries to the books.

So in the end there’s rarely pressure from below or above to make UI a priority, and so it remains trapped in stagnant purgatory.

 

 

What UI Don’t Know Can Still Hurt You

Okay, so only a few people actually care about UI. What’s the big deal?

As I hinted at above, UI is really just a subset of “User Experience”, a field which encompassing not just games or even software but every single man-made object we interact with throughout our lives.

Installing new carpet that feels like walking on a cloud (and happens to be in your favorite color) has a very real effect on your quality of life, even if the bristly mustard-colored stuff you replaced it with never seemed so bad. A pair of headphones that fits so well you can’t even tell they’re on is a similarly huge upgrade over a pair that was always a bit too tight and got uncomfortable after a while, even though you might have owned the latter pair for years and never really gave it much thought. Hell, even replacing a noisy fan with a quieter one can improve one’s environment and therefore mood.

Just because we don’t think about something affecting us that doesn’t mean it doesn’t affect us. Games take this a step further because learning and acquiring information the road to mastery is, in many ways, the whole point. This is especially true of strategy games, where both the challenges and the satisfaction of overcoming them is often elevated.

But that road to mastery quickly stops being fun if you start getting the feeling you’re lost without a map or anyone around who might be able to give you directions. Strategy games are fundamentally about making tough, meaningful decisions, and to feel confident in and responsible for them you need information. Without it you’re just stabbing in the dark, and it becomes easy to blame the game for any misfortune which befalls you, and from there it doesn’t take much to just give up and never play again.

And that outcome is bad for everyone whether you’re the player himself, the dev who likely loses sales, a fan of the game who wants it to succeed, or even someone who’s not but might have become one had more people been talking about it.

On the flip side, there are several very real, if subtle advantages to investing seriously in UI. Gamers who’ve had an interest in the genre but bounced off of other titles within it might give yours a shot if they hear it’s easier to get into. UI is a lot like a AI: neither has an impact you can easily measure, but go the extra mile and people will notice. Many will become your biggest supporters and lifelong customers, but even those who don’t are likely to speak fondly of your game any time it, a similar game, or even the genre as a whole comes up in conversation – and for not just a couple weeks or months but years to come.

“Making a better UI” also shouldn’t be misinterpreted as “simplifying your game to make it easier”, and in fact the opposite is true. Information is just information and there are no rules or limits on how it can be presented. Packaging it in the right – or simply, a better – way actually creates room for more depth and complexity. This can result in an amusing bit of irony where the biggest beneficiary of a more intuitive UI isn’t the casual player who’s still probably won’t play for more than a few hours, but instead the hardest of the hardcore, and the one most likely to scoff at the idea of spending precious development resources on UI!

 

 

A Problem of Perspective

Remember that mythical “perfect UI” we talked about above that’s invisible to the player? Well, when we say “the player” what we really mean is every player. And that’s not only total newbies to the genre and top-10 ladder players, but people who simply will not read a block of text more than two sentences long, people who are colorblind, people who have screens so enormous the corners (AKA the best place to put UI) falls outside their field of vision… okay, I think you get the picture.

The biggest challenge by far though is balancing the interests of new players against those of experienced ones, especially when designing a strategy game. You can try to imagine yourself in the shoes of either group you’ll never actually be able to see things as either one does. You’re too close to the game to have a chance at noticing most of the issues that will trip up newbies, and although your perspective is much closer to that of the veterans the depressing truth is that the best players will only only be far better than you, but you’re also too close to the game to see things from their perspective.

Experts don’t have any preconceived notions about how things should work. If it’s possible to open up the diplomacy screen and check in with every leader every turn and use a loophole in the trade AI to exploit them for a bit of cash, then, well, that’s how your game plays! At that point it doesn’t matter what your intention was. This example obviously a problem that extends beyond just UI design, but it still highlights the disadvantage you as the UI designer are at.

To be honest, this is one part of UI design where there really is no substitute for experience, skill, and intuition. But even that only makes it possible to create a good UI, not guaranteed. The most important ingredient is dedicated playtesting and iteration and the massive time investment that entails, and even then there will still always be one more thing you could add or tweak. You just eventually reach a point where it’s time to put a bow on things and actually ship something people can play.

Alright, that’s enough metaphysical navel-gazing, let’s bring things back to the game this article is purportedly related to!

 

Meanwhile, Back at Conifer HQ

There’s a lot of potential to do more than what’s been done already – it’s just a matter of actually doing it. Fortunately, I’m one of those people lucky enough to have been born with both a passion and at least some aptitude for UI design. I think we really raised the bar for strategy game UI with Civ 5, but not being some sort of all-powerful Game Development God working all by my lonesome on Mount Olympus there was never an opportunity to lock myself in a room for two months and focus exclusively on UI.

Well, fast forward a few years to when AtG is first starting up and things have changed a bit. While I’m still no deity of any mythical mountain, I’m now at least a minor spirit in charge of that one hill people sometimes use for sledding. But hey, at least it’s my hill! Anyways, as supreme overlord of my little mound of dirt I decided this would be the game where I’d hunker down and see how far we could push the envelope.

Naturally, I dove into the deep end of this concrete pool head-first by tackling the most difficult – but also most impactful – challenge of all: making it so that learning the game was, you know, not nigh-impossible for a human adult of above-average intelligence.

At the same time though, I absolutely didn’t want to achieve this by simply “dumbing things down” and making the game mechanics themselves simpler. You see, that’s cheating. And I’m no cheater. So where do we go from here then? My starting point was the UI design tenet which shapes pretty much everything I’ve ever made: don’t put more on the screen than you absolutely have to.

The problem is that every player has their own opinion as to what ‘has’ to be visible. And to complicate things further, that opinion will inevitably change as they become more experienced. What we needed was a UI that not only adapted to different types of players, but could also ‘evolve’ with them.

 

 

Laying the Groundwork

In some games not only can you mouse over UI elements to get a basic tooltip, but if you keep the cursor there a little bit longer the tooltip will ‘transform’ into a far more detailed one. I’d considered this approach for AtG, but I didn’t like that there were some pretty big holes in it: not only does it force experienced players to endure that delay hundreds or even thousands of times, but neither is it really ideal for the new players who are apparently expected to get everything they need within that 3-second window.

But I could tell there was still some untapped potential in the concept, it was just a matter of rearranging the pieces in just the right way. And then it hit me: why not make the trigger condition position-based instead of time-based?

Virtually all computer programs use what I like to call “ghost” tooltips that can be seen but not interacted with, but there’s no reason why that has to be the case. Let’s say a tooltip remains fixed in place after appearing and then remains so as long as the cursor is over either it or its ‘parent’ control… suddenly each tooltip is just another UI control like any other. I knew this could be something big, something that could transform the ethereal into the corporeal. Over several months that tiny spark would not only catch fire but eventually mature into an unstoppable inferno: AtG’s Adaptive Tooltips system.

From there it was just a matter of how we could best take advantage of the system. While cramming tooltip-laden panels and buttons into the tooltips of existing panels and buttons would come in handy, I felt that there was the potential for something truly revolutionary if we took things a step further and made it possible for individual words to have their own tooltips. Have no idea what “Apprentices” are, how they work, or if they’re even worth worrying about? If words can have tooltips then it becomes trivially easy to find answers for not only those questions, but virtually any question.

Of course, that was easier said than done. Getting this feature online and fully functional took several weeks, mainly because much of the UI system had to be rewritten to not only allow for individual blocks of text to masquerade as UI controls, but to do so while still contained within other UI controls. If one of those parent UI controls is hidden, or moved, or told to allow clicks to pass ‘through’ to controls behind them, then so too must the text be.

We ran into several other technical hurdles along the way, none more aggravating than ironing out the endless parade of issues related to overlapping tooltip stacks. Sometimes a tooltip halfway down would think it was the one on top and everyone else above him would just vanish. Or you’d click on a button deep within a stack of tooltips, but some other part of the UI would think it was being clicked on. I probably spent the equivalent of two full weeks tracking everything down, and let me tell you, I was pretty sour by that point.

A couple weeks is just a drop in the bucket compared with the amount of time it takes to flesh out a truly polished UI. With the foundation for the Adaptive Tooltips system now in place it was time to zoom back out and focus on the design.

 

 

Inside Santa’s Workshop

At this point it’s probably best to switch gears and focus more on the sorts of high-level design principles that helped shape AtG’s UI, rather than a blow-by-blow account of every decision we made. After all, life is too short, this article already too long, and we’ve only scratched the surface with the tooltip system, let alone the rest of the UI.

One of the most important traits for a UI designer to have is contextual awareness. How should everything fit together? How does it right now? What do players actually care about? What do they not care about? If I move this piece to there does it make the tower stronger or weaker?

No decision is made in vacuum, and losing the forest for the trees can have far-reaching consequences. Even a seemingly-benign choice like what background color to use can reverberate throughout your game.

A good real-world example of this in AtG was our choice to make the ‘fog of war’ tiles you haven’t yet revealed look like parchment paper. What at first appeared to be a single decision would eventually balloon into dozens. A paper background means the screen usually dominated by a light, warm color. Anything we place over the top of the world that we want to stand out now needs to be dark. Well, if every background panel and popup in the game is going to be dark that means our text needs to be light.

If AtG instead had light panels and dark text it wouldn’t make the game unplayable or anything, but it would make things just a little bit tougher for some people. Even if each incremental upgrade or downgrade only grows or shrinks your audience by a tiny amount those little slivers eventually add up.

 

Button Color

Something else I’d like to talk about that our choice of background color also had an effect on is our buttons. Another big “Jon Shafer UI Design Rule” is that anything you can click should share a clear and consistent style visually distinct from everything else in the game. We decided to make all buttons in AtG either solid gold or at the very least have a gold rim around them (e.g. the Profession buttons in the Study Screen).

So why gold in particular? There are actually several reasons. Even long before we came up with the current art style I liked the idea of making all of our buttons look like some kind of metal. Why metal? Between the bronze age and the invention of plastic most man-made items we manipulated with our hands were metal, be they weapons, tools, or toys, and as a result whenever we see a shaped metal object a tiny voice deep inside tells us it must be something we can use. This was definitely not the case for the stone buttons in our old UI, and given how, uh, non-interactive most rocks are I doubt that voice was whispering anything nice about them into our ear!

After the gold buttons had been in for a while we actually considered changing them to silver or iron because we was worried gold was too close to the parchment background, but in the end we kept it for a few reasons. For one, most of the time when you push a color closer to white or gray the more indistinct and unimportant it seems. If asked what white reminds us of “blank pages and empty walls” is more likely to be someone’s answer than “interesting thing I want to use or learn about”. With silver now off the board, iron isn’t far behind, mainly because it just doesn’t have nearly the appeal of gold, a metal that’s universally desirable not only throughout time but across cultures.

I also came to realize that the gold buttons not standing out as much over the top of the paper fog may not actually be a bad thing. The only buttons which don’t have some kind of dark panel behind them are part of the basic World Screen, which of course is what you’re looking at 95% of the time. It won’t take long for players to familiarize themselves with this screen and its contents, and the fact that the buttons don’t ‘pop’ as much actually improves the overall feel of the game.

This is a good reminder of the fact that few rules in UI design are hard and fast, although I feel pretty strongly that the “consistent, distinct style for buttons” rule I talked about is one of them, and unfortunately many devs break with gleeful abandon. This is usually done in an attempt to make their UI more “beautiful”, but in a tragic twist of irony for most new players the thing they notice the most about the UI is that it’s nearly impossible to tell anything apart.

 

Don’t Cross the Streams

Which brings me to our next ‘rule’: UI is UI and the world is the world, and trying too hard to blur that line usually only makes it harder to learn your game. It’s great if a creature’s posture changes with its mood, but you probably also want to stick a big icon over their head to make sure it’s crystal clear. Because otherwise it probably won’t be, and not only will many players be in the dark as to what individual creatures are up to but they may mistakenly conclude things are just random and downgrade their opinion of the game generally.

That’s not to say your UI has to look gaudy and ugly. I think the on-map unit flags in AtG look quite nice on the map, despite packing quite a bit of info and being completely out of scale with other map elements. But we made it that size for a reason, and had we instead tried to push things too far by making them in-scale with everything else on the map we’d be spending time on something only the developers care about. On the whole players are very accepting, and most don’t even notice or think twice about incongruities which keep developers up at night.

 

 

Leave Room to Breathe

Another similar rule is that smaller isn’t always better. While you probably don’t want half the screen to be covered in UI at all times in map/world-based game, today’s monitors have enough pixels that you don’t need to cram everything together so tightly that it looks like it came out the other side of a trash compactor. A UI needs room to breathe, and negative space is an essential tool for establishing a hierarchy of importance.

This rule also has an important corollary: Don’t be afraid of text. Many games try to save space by replacing words with icons wherever possible, but this is a huge no-no in my book. A lot of the time these ‘naked’ icons appear inside tooltips, but unless the tooltips work like AtG’s there’s no way for you to actually figure out what it is. Once you have it memorized, sure, those extra few pixels are nice, but the price paid is completely disproportionate with the payoff.

But what if those few pixels here and there do add up into something veteran players legitimately care about? Well, then just make two versions! Yes, this requires work, but so does everything! If building a good UI that works well for all types of players is actually one of your priorities then these sorts of features start looking like really smart investments.

 

Consistency and Learning

Our final rule is a simple one: Be consistent. As new players are learning your game they’re subconsciously building a mental map of how things fit together, what that icon over there means, which screen contains X and which contains Y, and so on.

By establishing everywhere in the game that red text indicates something negative or bad but then make one exception for the announcement which appears at the top of the screen when you win a battle you damage the player’s faith in their mental map. They usually compensate by erasing something, leaving a gap that may never be filled in. The player would have actually been better off had you not attached ANY color to that announcement text. Preventing these sorts of traps is rarely difficult, and usually only requires establishing a clear style guide early on and being diligent about sticking to it.

An even better (or worse) example is sometimes found in more complex games with lots of screens. In providing multiple ways to navigate to the same screen or accomplish the same task might think you’re doing players a favor, but much of the time these good intentions backfire. When learning one of these bad boys building that mental map takes much longer but is even more important, but if the player discovers that there are two or even three ways to get to the same screen that map starts to unravel quickly. They’ll start looking for locations they remember being next to those they’ve erased next to one of the others, further undermining the map. The end result is often players simply giving up, or ‘quarantining’ much of the UI and never venturing outside of the few areas of their map they still have trust in.

But like most UI design rules this is a “soft” one that’s more guideline than dogma. Including hotkeys could be thought of as providing multiple entry points, but they’re not only accepted and often expected, but I can’t even think of any drawbacks aside from the time it takes a developer to add them.

A less clear-cut example from AtG is our inclusion of two independent methods for training a clan in a profession: while in the Clans Screen clicking on one of the ‘clan cards’ will open a new screen showing all the professions it can be trained in. The Clans Screen also has a button at the bottom you can click which allows you to pick the profession first and then the clan. So why offer both? Because even though the end result is the same the actual process involved in getting there is not. Sometimes you know you need an explorer and it’s just a matter of figuring out which clan is the best fit, and others you have an idle clan that needs something to do but you don’t have anything in mind yet.

Will some players be confused by this? Without a doubt. But UI design is an art, and like all art you sometimes just have to go with your gut and accept that it won’t – and can’t – be for everyone.

 

 

***

 

Phew… Alright, I think that’s probably a good stopping place for now,  I do truly enjoy working on and talking about UI, though if you’ve actually still reading this that’s probably pretty obvious! If you haven’t already I encourage you to check out the video we just posted showing the UI in action.

‘Til next time!

– Jon

 

***

 

UI Feature Outline

 

Adaptive Tooltips – Links

• The key feature of AtG’s UI
• Tooltips Within Tooltips – “like Wikipedia, except with tooltips”
• Even words can have tooltips
• Confused or interested? Dig deeper to learn more
• Simpler on the surface, but more powerful under the hood
• Makes it easy to see how things “fit together”

 

Adaptive Tooltips – Customization

• Complex tooltips are broken up into expandable panels
• Customize in ‘real time’, instead of from an options screen
• Allows the UI to evolve with you as you learn
• Game-Wide Memory, by type (e.g. Professions VS Structures)

 

Other UI Features

• Hotkey Hint Display when mousing over button or pressing ALT
• Can use WASD keys to move camera (along with traditional controls)
• Upgraded versions of Civ 5’s ‘Notifications’ and ‘New Turn Banner’
• ‘Floating Text’ appears when a resource is produced or spent on a map tile
• Colored ‘Sticky Notes’ can be attached to Clans or map tiles
• Cursor color changes subtly when mousing over something with a tooltip
• In-game Patch Notes, its contents filtered using the date you last played
• Localization Framework now makes (unofficial) translations possible

 

Other Customization Options

• Screen Complexity Filter
• Grid Intensity
• Increase/Decrease usage of Icons in Text
• Can Disable… Button Flash, Turn Banner, Tooltip Sound, Cursor Tint, Hotkey Hints

 

Look & Feel

• More modern style that’s less skeuomorphic
• Light stone replaced by dark wood + watercolor
• Rounded corners
• Cleaner fonts for text

 

Layout

• Less dense, more balanced
• Grouped more logically, e.g. Notifications next to the End Turn Button
• Buttons emerge from screen edge

 

New Fog of War

• Old ‘watercolor paper’ looked anachronistic
• Now looks like parchment
• Better fit thematically
• Less repetitive, more visually interesting

 

Better Color Usage

• All buttons are gold, making it easy to see what is and is NOT clickable
• Profession Button colors now match their Discipline
• Icon panel color in Study & Training Screens hint at type/effect
• Important words now colored by type, e.g. object names, concepts