Interfaces 101: Making it Pretty

Question

I've made a few games which I've actually released into the wild. There's one particular issue I run into over and over, and that's the issue of the interface/theme of the game.

How can you make non-arbitrary, consistent decisions about the look-and-feel and interface of your game?

For example, in version one of my Silverlight chemistry-based game, I made a (bad?) decision to go witha natural, landscape-style look-and-feel, which resulted in this UI:

Then in a later iteration, I got smarter and went with a more "machiney," grungy look-and-feel, which resulted in this (final UI):

I will definitely say that my taste in UI improved through iteration. But it was a result of a lot of initially arbitrary decisions followed by a lot of tweaking.

Is there a better way to figure out how to theme your game?

---

To give a parallel in writing, when you're writing a fantasy/sci-fi novel, there are a lot of elements you need to describe. While you can arbitrarily invent objects/creatures/places/etc., you get a much more consistent world when you sit down for a few minutes and design the area, region, planet, or universe. Everything then fits together nicely, and you can ask yourself "how would this work in this universe?

Edit: It seems like I didn't explain this well. Let me simplify the question in the extreme: when I need to lay out a title screen (with background, fonts, skinned buttons) how do I decide how they should look? Green or blue? Grunge or not? Rounded or flat? Serif or sans-serif?

Take that question and explode it into your game as a whole. How do you figure out how things should look? What process do you use to make them consistent and non-arbitrary?

Look at the screenshots again. I could have stuck to grass/sky/rocks, but metal seemed more fitting to the idea of chemical reactions and atoms.

Answer 1

You seem to have conflicting styles.

Have a look at these UI's from Peggle, Ultima Underworld, Diablo 3, Starcraft 2, and Gran Turismo 5.

Notice how each UI is consistent within its theme.

Peggle is pin-ball like in all its UI elements. Everything's a meter, a lever, a nozzle, a springboard.

Ultima Underworld has UI elements are iron/steel, potions, backpacks, maps. Adventure Time.

Similar to Ultima underworld (in fact appears to be based on UW)

Futuristic, sleek, simple, minimal (protoss)

Car interior

So you see, your first design is completely inconsistent and unthemed. What an open field have to do with your game? Same goes for the metal background. Try a lab bench for the game board, and a chem lab background, with flasks and vials and rubber gloves and petri dishes.

Dr. Mario is very basically medical, bacteria, virus, medicine themed

Further the UI should have similarly-styled graphics to the game play elements. The chemical symbol balls are round and gently graded solid colors. The backgrounds/game board you chose have art styles that are completely dissimilar to the gameplay elements. The field is a vivid photograph. The metal is very detailed, while the chemical balls are smooth and relatively undetailed.

Answer 2

One thing I'm starting to realize is very important: proper use of contrast.

Look at that first picture. It's contrasty all over the place! The sky is bright, the horizon is dark, then the far grass is bright, then the bottom is dark. The tiled background wildly varies between extremely bright and extremely dark. All of this is non-information. Visual clutter. The actual important parts - the circles - are drowned out by all the contrast changes.

Now look at the second picture. The background is dark and relatively monotone. There's a bright border around the entire playing field. The tiled background is mostly dark, with thin white lines in important locations. Suddenly you can actually see the puzzle, because it's one of the most contrasty things around.

Personally, I would still tweak it a bit - I'd make the playing field look grungier as well. Those white lines to show grid divisions are important, but the human brain is really good at extrapolating straight features, and those could be a lot darker and even broken up a bit.

The big thing that jars me out of that UI is the bottom bar. It's bright, it's in your face, and it's hard to read the text. That last bit is important - the reason it's hard to read the text is, again, because of contrast. We read text partially by looking for the edge of letters, but the letters blend in unfortunately well with parts of the bottom bar.

What I would do: Rejigger the bottom bar to fit well with the main background, in terms of contrast. Make a lighter border between it and the main background to get across the fact that it's separate. Then get rid of most of the text. "Diamond" can become an actual diamond. "Atoms left" can become a pictorial view of a few atoms. "Time left" can become an hourglass or a wristwatch or a pocketwatch. "Next" can go away entirely - you say "you have to play through to see which atoms you get", but that's an annoying game mechanic. Turn it into a stack of atoms on the right, sitting on a beat-up conveyor belt, with a little visual machinery clue for which the next one in the line is. Tada! Puzzle improved, interface improved, everything looks less cluttered.

If you do need to use text, there's two ways to guarantee contrast. First, put your text on something which is, itself, low-contrast. If it's got a dark background, use light text. If it's got a light background, use dark text. If you can't do that (and sometimes you just can't), don't hesitate to use the outer glow effect. It's a great way to provide the right border contrast no matter what your text is on.

When you're playing with interfaces, open up an image editor, swap it to monochrome, and try two things: blur, and edge detect. When your UI is monchrome blurred, your vision should automatically gravitate to the important areas. When it's on edge-detect, the important areas should be highlighted. Examples:

Compare these two. The first one is nearly unreadable - sure, some of the gems are visible, but many of them aren't. On the second one, the grid stands out instantly, as does the dialog box. While there's only one gem on the board, you can instantly see where it is.

The first one massively emphasizes the grid edges. Some of the gems are nearly invisible. The second emphasizes those still (and more than I personally would), but it also emphasizes the border of the puzzle very strongly, and the gem is significantly more (though still not perfectly) visible.

This method isn't a panacea by any means, but it can help you track down things that should be fixed. Just keep in mind that human vision is based around edges and contrast, and design your UI to be readable by humans.

Answer 3

(I'm gonna come at this from a color theory perspective)

I think that your question isn't about how to make an attractive GUI, I think you're really pointing at is "How do I choose the experience I want to give my players?"

And this is mostly a psychological answer. You mention choosing blue or green or red, and it's not really about the colors, it's about the emotions the colors make you feel when you see them.

If you have a game that is red(the background is a chade of red, the player is wearing red or uses a red game piece, the fonts all are a readable shade of red) how do you think you would feel if you played this game? And it doesn't even matter what the game is.

You'd feel like the game was either very angry or some sort of Valentines Day game.

This is where the decision making process comes in. If you want your player to feel like they are conducting a science experiment in your chemisty game, perhaps making everything clean and simple. Maybe something that emphasises the color white.

If you want your player to feel like they are doing some sort of manufacturing job, where they feel like they are getting down and dirty with the science, then maybe your second picture, or emphasizing the colors yellow and black together.

If you want your player to feel as tho they are at one with the chemistry, like it's an extension of themselves and all living things, then your first picture could be a good start. An emphasis on light blues and light greens and natural tones like brown.

It really does come down to the raw emotion that you expect your player to feel.

Answer 4

Short answer: There is no short answer.

Design is a huge field, with tons of books, articles, and as mentioned, libraries that cover this question. Colour-scheme, fonts, styles, layout, use of whitespace, negative spaces, textures, colours and their meanings in different cultures, why comic sans is evil and should never be used. There's courses, books, blogs, research papers, and websites dedicate to these sort of things. There's not going to be a simple answer to this, since the question is asking a lot.

That said: Frankly, your best option is to hire a designer to help you out. If that is out of your budget, make friends with a designer to help. If that's not possible, you might have to go it alone for a while.

So a few tips. For colour schemes, use something like a Colour Scheme Designer. Spend some time learning about how colours work together, and generally, try to only pick a few colours, don't go overboard. The limit should be about 3 colours.

For fonts, well, there's whole articles and papers of research (here's one about serif vs sans serif). Again, the general rule is to pick, at most, two fonts. A good choice is to pick a font that is not the default, but still looks nice. If it's an option, Helvetica is a pretty nice, but there's plenty of other good ones out there.

For style and/or theme, this one is even harder to answer. I think the biggest tip here is to be consistent with your style. Don't try to blend nature with scifi, or sketchy line art with his res 3d poly models. This mostly means finding one artist to do ALL the art, or doing it yourself (in the case of large companies, this is why there's an art lead). Theme is something you'll have to play with, unless you have a set theme in mind before you begin. Honestly, it might change as time goes on and you have more of the game done. Chances are pretty good that theme will change over the course of development, in fact.

Overall, while design can be taught, some people just... aren't that good at it (much like programming). This is where having a design friend to help comes in handy.

Answer 5

EDITED:

Ok, I've rewritten this, now that I understand the question better.

The reason I got confused is because you tried to give a parallel in writing, but the example you have is not parrallel at all. The design of a UI is a question of presentation. The content of a book is about the actual substance.

So, looking at UI design as a question of presentation, you have to think about what you want to present. I mean, of course you are trying to present your game, but what else? Do you want it to appear professional? Fun? Dark? Light?

As an example, I will look at the two images you posted, and tell you the impressions I get from them.

The first one, there are some obvious aspects of it we can look at. It is lighter than the second image, of course. Add that to the fact that you chose an image of a field with depth (as the field tilts away from the viewer) and the feeling is one that is much more expansive. It feels more free, it feels more light-hearted.

When you look at the second image it is, of course, much darker. It also has a background that is a flat image perpindicular to the line of sight of the viewer, taking away that sense of continuing depth the first image had. Add that the only real depth cues come from the shading on the diamond plating, and it brings that background image up very close to the camera. All these add together to give it a much darker, more claustrophobic feel to it.

So now, what can you do with the two themes? Well, the first theme is something that could be good if what you want to do is make it feel more casual. It gives a sort of sense like what the player is doing right now with the game pieces is not all that is going on in the world. The second image gives it more of a sense of urgency. The "known world" of the game is much smaller, and it puts more emphasis on what the player is doing.

Answer 6

Is this really about 'making it pretty'? That's a subjective thing, and I happen to think the first screenshot looks better than the second.

Picking a theme is not rocket science really - you know the key content or purpose of your game, and can keep that in the front of your mind when choosing every other aspect to go with it.

Answer 7

One thing nobody else seems to have mentioned so far: ask some of the people who are going to play the game for their feedback. UI designers spend a great deal of time showing designs to users and finding out what's right or wrong with them, whether they're designing a game, a word processor or a flight deck.