top of page
Search

Interfacing users

  • Writer: Alex Hockley
    Alex Hockley
  • Jun 10, 2015
  • 5 min read

User interface is an essential part of any game. Each genre has it's own set of rules and things that must be included. For instance, a first person shooter should always include how bullets are left in your gun. A lot of factors make up a good UI, factors like setting, theme, tone, style etc. Science fiction games often have a very sleek and crisp UI because it's the future, whereas a lot of traditional RPG's feature more classical typography and style, like things written on parchment and the like. These are both examples of signifiers that change the way we see things. They give us sub-conscious cues that familiarise us to the setting and immerse us into the world, even if UIs are not exactly realistic. All that being said, here are some of my favourite UIs from games in no particular order. Enjoy.

med_gallery_7_68_169861.png

Above is a screenshot of the very old game, Heroes of Might and Magic III. HOMAM III is an isometric strategy RPG set in ye olde medieval times in a far away fantasy land called I-Don't-Know. It involves resource management, unit micro-management and travelling your little hero around picking up a lot of stuff and fighting dudes. It's awesome. BUT, we're not here to talk about the game. We're here to talk about the UI. I like this particular UI because it immediately highlights the part of the screen you will be looking at the most... the isometric view of the world. "That's not exactly what I had in mind when you said you would be talking about UI" I hear you shout (somehow), but fear not! This is a design choice of this particular UI. A design choice with a very specific and very obvious purpose. Everything on this screen is sized according to importance and how often you will be looking at it while playing this game. The next biggest thing on the screen is all the details of your current game. A portrait of your hero, a shortcut to your home base, your army size, all of the little buttons you may or may not need to press while playing, everything. Following this observation, you will notice (hopefully) that the next most prevalent thing on the screen is the minimap, followed by your resources down the very bottom. If my description wasn't enough, here is a visual explanation.

smart arse.png

So, to recap, more screenspace means more important, right? Well, with this particular game, yes. Good on you.

The next UI I'm going to show you is from a classic FPS. Some of you may of heard of it. Some of you may have even played it (lucky you). It's a game called Halo: Combat Evolved.

halo-09.png

Isn't it beautiful? Ahhh nolstalgia... Anyway. Immediately, right off the bat, we know this is a science-fiction, future space game. How? Because of the title. But more seriously, because of the colour scheme, the simple iconography the giant moon/planet etc etc. But there's a word in there that I would like to focus on. Iconography. Symbols. Remember earlier when I said 'familiarity'. If not, go back up and find that word. Look at the symbols in this image. There are easily recognisable shapes that directly correspond to mechanics in the game, and they don't need to be explained. There is a shield icon, that translates to your character's shield. A cross that (is currently) yellow to symbolize your players health bar. Can anyone tell me any other symbols that could correspond to something? What? I don't know how blogs work...? Who am I talking to? In any case, there ARE more symbols that can be easily recognised. Like a bullet for your ammo count, a grenade for your grenade count, a line of bullets for how many are in your current magazine. There is something else. The radar down the bottom left. You know it's a radar simply by looking at it. It is animated in the game to further indicate its radar-like functionality. These are all things the game does not need to tell you. Why don't they need to tell you? Because they are common, familiar icons, easily recognisable in almost any setting given enough context. The context here being that you are holding a gun.

"But these are all obvious!" I (don't) hear you cry (because I know how blogs work now). That's kind of the point. They are all obvious. Even to people who have not been brought up playing games, these things are obvious. A shield icon means a shield, just as a bullet means a bullet. So let's go for something a little more abstract.

payday2_win32_release_2013_07_30_17_19_40_988.jpg

This is a screenshot of a game I like to call (because it's the name) Payday 2. This one is a little more complicated. It's lacking that iconography from the previous example. What means what in this?? I'm confused and I don't like change. Well, it's not COMPLETELY devoid of icons. There are a few. They are a little less familiar, sure, but they are still there. There's the little exclamation mark right next to your objective. There's a little box with some bullets on it, some things that look like cable ties next to a number. You get a rough idea. However, there is no cross for your health. There is no shield for your armour. There is only numbers, no bullet icons. You need to be told where things are and what they mean. That's not exactly the best way to go about UI design, but it's not inherently bad either. The HUD still looks clean, sleek and effective. A mod was made that changes the UI a bit, and I'll show you a picture.

hoxhud.jpg

WHOA! What the hell is that?? Why is there so much stuff on my screen? I'm confused and I don't like change. Suddenly, there is too much. The icons you see above in yellow are unique to the game, and are not accessible to people unfamiliar with the game's in-built iconography. HOWEVER, this UI does give more clarity (and in game you can customise what you do and don't see, which is always a nice touch). There are still not clear idicators of everything, but now we have a clear kill-counter displayed inder each player's name. We still have those cable ties and now some grenades as well. But still, too much remains immediately unclear. There could have been a lot more thought put into the design of this game's UI.

In conclusion, dear reader(s), a user-interface in a game should be clear, concise and obvious. Players should not have to ask what anything means or where any information is. It's not 100% necessary to include everything in your UI, depending on the mechanics of the game (Payday 2 does not include a radar or minimap, because you don't need one in the game), and each should have it's own style and flair. Just be careful when designing one that you are giving the right amount of information to the player. Too little, and players have to ask where everything is, too much and your screen will start to look cluttered and messy. Keep it simple and clear. Until next time.


 
 
 

Opmerkingen


Featured Posts
Recent Posts
Archive
Search By Tags
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page