Search

hannahbalesblog

Games Design @ Hull School of Art and Design

Tag

User Interface

Games Design – User Interface Research and Design Process

User Interface Research

Tom & Jerry Game

As my aim is to create a 2.5D platformer game which includes famous cartoon IP-tie-ins I decided to research a game I used to play all the time with my cousin as a child. The game was great for 2 players as the aim was to beat the other player by chasing them or placing traps around the environment. As an example if Jerry turned the television on and Tom walked past it, Tom’s attention would be on the television for a few seconds giving Jerry the opportunity to attack Tom. I’m looking at a game where the player can only progress forward and many mini-game options will also be available as well as the main campaign.

The H.U.D for this game is nice and simple, however, I’m not really sure if I like the position in which the icons are placed. My favourite H.U.D aspect in this would have to be the health bar; the more damage the player takes equals the more damage to the character icon and health bar (a nice interactive feature). Also the power-up selection is nicely displayed as most games have power-ups in the main menu and it is usually awkward to work whereas this uses controller commands. If I was to improve this I would maybe put everything in the middle where the screen splits. From left to right Jerry’s Power-ups, Jerry’s Health Bar, Timer, Tom’s Health Bar, Tom’s Power-ups. I would do this so that the player doesn’t have as much confusion of where to look and it doesn’t take them as long to take in all of the information, therefore giving them more time to play.

User Interface Research 001.jpg

Image Source: http://www.gamefaqs.com/ps/915844-tom-and-jerry-in-house-trap/images/215

The Warriors

User Interface Research 002

Image Source: http://www.joblo.com/movie-news/10480

This game may not be aimed at children, however, I decided to discuss this game because of the unique health bar system. At first glance you may think that the health bar is the red bar underneath the players name, it is not though. The health bar is represented by the coloured circles under the players feet. I like this mechanic as you don’t have to look to the top of the screen to examine your health, you can still look at your player and continue to play the game as normal; also the bar changes colour to what we know as the three colours of health that we automatically know (green=healthy, orange=damaged, red=nearly dead). So with the health bar being so uniquely placed under their feet, you must be wondering what the red bar is. Well the red bar under the character name is a special power meter; when the player has earned enough points the character gets some sort of adrenaline rush and can fight faster and stronger, as well as taking less damage.

Flappy Bird

A very popular game that was released for mobile devices has a simple user interface that I think would have a chance to be good for my game. It is simple and easy to use although with my game being slightly more complex I would have to consider applying more aspects. The reason I like this H.U.D is because it shows a tutorial really simple and quick at the beginning and the points system is large and bold at the top of the screen.User Interface Research 003

 

Image Source: http://androidwidgetcenter.com/articles/flappy-bird-is-an-extremly-addictive-game-with-super-simple-graphics-and-gameplay/

The Original Super Mario Bros.

User Interface Research 004.jpg

Image Source: https://www.youtube.com/watch?v=UKgKQ5wgSVY

User Interface Research 005.jpg

Image Source: http://www.joystickdivision.com/2009/12/new_super_mario_bros_wii_1080p.php

Going back to a great classic that is still popular to this day. This game has a nice user interface that is easy to read and very simplistic. Although there are a few numbers involved everything is easy to read and even if you can’t pay attention to the time limit you still have little gestures from the music warning you how long you have. The original had all of your stats in a line across the top of the screen whereas the classic decided to put health/lives and number of coins at one side and the point system and time limit at the other. Having to look from left to right constantly can be annoying, however, in my opinion I believe that they did this in knowing most people look more at the health and coins rather than the time limit and points. Sometimes you’re too busy playing the game to even notice.

Gex: Enter the Gecko

This is just one of the many of my favourite PlayStation one games as it was so random yet so fun. Thinking back to most of the old games I used to play I realised that some only have H.U.D designs that only appear when necessary. For example this Gex game has no H.U.D whilst playing, but if you get hurt by an enemy your health bar will appear and take away what is needed. Also if you collect an item the number you have collected will show up on screen for a few seconds. A great feature that I haven’t seen since PlayStation One game is the camera icon. This game allows the player to change the type of camera they want to play with (Automatic/Manual). When the player presses the camera buttons to adjust the angles of which they play in the camera icon will appear at the bottom right of the screen so they know what camera they are using.

User Interface Research 006.jpg

Image Source: http://www.vizzed.com/videogames/game.php?id=34617

Medievil PlayStation One

User Interface Research 007.jpg

Image Source: https://www.youtube.com/watch?v=IOSWM3IlhXw

This game was very spooky at the time, however now we see it as fun and quirky. The H.U.D on the other hand was easy to read as it showed pictures as well as numbers/words. From left to right you have your weapon that is currently selected (and how much ammo you have left), your shield strength, your health bar, level percentage/progress and the amount of coins you have collected. This game introduced a quick weapon select option in which you press a shortcut key to switch weapons quickly.

The Tomb Raider Game Series

In the first original Tomb Raider Games there wasn’t much of a H.U.D. Again stats would only appear when needed. Most people used the pistols in Tomb Raider which are usually unlimited ammo so there was no need for an ammo count (unless using shotgun or desert eagle etc.) and the health would appear when damaged. I do like the way that some of the original Tomb raider games had a sprint/slash stamina bar as now in most RPG games made currently in 2016 we have a stamina bar. In the new Tomb Raider games (‘Tomb Raider’ and ‘Rise of the Tomb Raider’) there is not a health bar as when Lara is in pain the screen goes red around the edges and is covered in blood as these games are known to be more graphic also you can unlock unlimited sprint in the skills menu. The weapon select is now different as there is a larger variety of weapons and we now have to limit ourselves with ammo and no weapon is unlimited. Using the d-pad the player can choose what weapon to use and what else to use along with it; for example you can use a bow but you have many choices such as lighting the bow on fire, using a poisonous bomb or attaching an explosive to it.

User Interface Research 008.jpg

Image Source: http://moarpowah.com/2013/03/22/the-retrospective-tomb-raider-1/

User Interface Research 009.jpg

http://tombraiders.net/stella/walks/TR9walk/details/ammo-select.html

Below are my designs for user interface within my game:

IMG_0061[1]
Quick Start-up Screen Mock-ups
For a game interface you have to take into consideration the Start-up screen as well as the H.U.D. Here are some quick sketches to where I want each aspect of the start-up screen to be positioned.

Font and Game Cover Research <—— Here is a word document that features more of my research about other games start-up screens and what type of font I want to use for my final game.

IMG_0062[1]
User Interface – Head-Up Display Designs
I played around with where I wanted the aspects of the H.U.D placing around the screen. When doing this I considered where the player prefers to look, how other games show their H.U.D and why also I looked at where is best for the player to look when they are needing to focus a lot on their game rather than the H.U.D.

IMG_2468
Getting closer to a final design

Here is my first final design. I wanted to create something that was easy for the player to understand for the target audience and also very decorative. I started with a quick design an developed the design further in Illustrator. The design feature (from top to bottom) a time limit/score, power-ups, special abilities gauge, character icon and a health bar. I really like the design, however, to improve it I would rather have the H.U.D across the top or on the right as the players attention is on the left trying to control the character and avoid objects and collect collectibles. On the other hand the designs are quite consistant and very colour coordinated.

Tom &amp; Jerry HUD
Tom & Jerry H.U.D Mock-up
Scooby Doo HUD
Scooby Doo H.U.D Mock-up
Garfield HUD
Garfield H.U.D Mock-up

The H.U.D Mock-ups above are going be used as my final. I like the way that each H.U.D is colour coordinated as it gives a slightly new touch to the players experience throughout the change in levels. I really like these H.U.D designs as they all have a black outline so they will stand out from the background, they are easy to read and feature no reading (just images). I feel like it could be improved, some could argue that the H.U.D is too big and too much of a distraction whereas you could understand that it is no distraction, however it is just easier to understand.

Overall I feel that I have done a really good job and I am looking at progressing further with all of my designs.

 

Games Design – RPG Research

Role Playing Games are incredibly popular, most games feature Role-Playing. RPG’s are my favourite so I believe that it is a great way to be immersed within a game. An RPG (Role Playing Game) is when the player gets to play as a character in a game that goes on epic adventures, meets new people, fights enemies, explores new places and more; and to add to the list of opportunities you can also play online with other players or interact with an amazing storyline. Most games usually are better in one sector than the other for example ‘The Last of Us’ has been known for it’s amazing story but the gameplay hasn’t had the best of reviews whereas Skyrim has great gameplay but not a very long or good storyline.

Games with a Good Story

The Last of Us

The Last of Us 005

Known for its great storyline, The Last of Us has had so many good reviews. Released in 2013 by the Developers Naughty Dog the game was a smash hit. Below are just two of the great reviews:

Review 001Review 002

Also watch the Game Trailer here: https://www.youtube.com/watch?v=W01L70IGBgE

I have played some of the game and I must say it has such a good storyline mainly due to the way in which the characters interact. There are two main protagonists (Joel and Ellie).

********************SPOILERS*************************

The story starts with getting to know Joel. We find out that he has a daughter, but all of a sudden an apocalypse begins with people starting to go crazy (almost zombie-like). Unfortunatley Joel loses his daughter and the story moves on. We next see Joel with a new friend and to gain access to weapons they have a task to complete for a team called The Fireflies; this task is to take Ellie to the designated location and this is where the adventure begins. Throughout the game we see things happen to Ellie and Joel that scare us, make us happy, make us sad and make us angry, however, most of the game is a stealth game so I would also say that is a mechanic that adds to the storyline being more interesting. Also the game is well-known for its environment design. The first apocolyptic game to feature so many plants and wildlife. An example of this would be the finding of giraffes at a university.

Bioshock Infinite 

Bioshock Infinite 001.jpg

Another game released in 2013 which has such a crazy but good storyline. If you like games that make you think well this game will blow you mind. Although a lot people didn’t give it a chance considering Bioshock 1 & Bioshock 2 were quite repetitive the developers improved there game and made the story more interesting throughout. Even though there is a set storyline no one really knows some of the other little details that could either hint towards another game or reveal more of the story. Bioshock Infinite is clever in the way that it gives the player a chance to invent their own theory to the end of the game and as a community many people who liked this game came together to discuss how they feel the game makes sense.

From what I understand I believe that the game starts with you being in a rowing boat with two twins explaining to you your task. You stop near a lighthouse and in this lighthouse is a secret way of transportation into the city of Columbia (a floating city in the sky. See more here in my previous blog post: https://hannahbalesblog.wordpress.com/2015/10/12/games-design-character-design-2k-games-gavin-goulden/) Once in this city you explore and continue your task which is to find a girl of the name Elizabeth and bring her back. At the end of the game you find out that elizabeth is really your daughter from an alternate universe kind of. I say kind of because within this game there are so many universes. Within one part of the game elizabeth explains it as there are constants and variables (constants which are events that happen in every world and variables which are events that can have multiple outcomes). As an example throughout the game series the environment consists of a unique environment such as underwater and Columbia in the sky also you have the antagonist that is really a protagonist in this case a Big Daddy or Songbird and then you have Booker and Jack, multiple Elizabeth’s and the main antagonist. Same events but different outcomes. Elizabeth “You. Me. Songbird. Columbia. Sometimes things are different, yet the same.”

Watch this video for a more in depth description and be careful it contains a lot of spoilers.

 

Bioshock Infinite 003Bioshock Infinite 002

 

 

 

 

 

 

 

 

 

Bioshock Infinite 005

Bioshock Infinite 004

 

 

 

 

 
Bioshock Infinite 007Bioshock Infinite 006

Games with Good Gameplay (controls – character or vehicle)

Far Cry 3

Far Cry 001.jpg

The story for Far Cry 3 is quite repetitive, however, it is known for it’s bad guy as many people really liked Vaas. I really like the gameplay as the character is easy to control and so are all of the vehicles. Having a wide range of vehicles is great and later on in the game you get a flying suit which is a huge life saver. My favourite method of transportation is the hang glider as it is easy to control and you can travel quite far quite quickly, although it takes a while to get the hang of landing the vehicle I finally managed.

The controls are  basic and by basic I mean they are controls you would already assume; for example (If playing via Xbox) most games consider ‘B’ as Crouch, ‘A’ as Jump and ‘X’ as Reload, these are the controls Far Cry 3 uses. I also like the way in which the Far Cry game series keeps the controls consistent throughout.

Tony Hawk Games (Pro Skater 2)

Tony Hawk 001.jpg

All of the Tony Hawk games are great and you either learn all of the tricks or button bash; either way the game is still fun. Anyone new to the game can learn how to play within 5 mins of gameplay as it is that easy. that is why the game is called pro skater (the more you play the better you get). Tony Hawk has got 15 skateboarding games (not including remakes) and the more popular they got the better as he even got to feature celebrity friends such as Bam Margera, the game series has lasted between 1999 and 2015. I love the game as you could free roam, do missions and complete challenges. The customization was great but overall the controls are so simplistic and I love that.

Games with Good User Interface

Please find below the link to one of my posts from my blog. This post is about game with a good user interface.

https://hannahbalesblog.wordpress.com/2016/01/05/games-design-user-interface-and-user-experience/

Bibliography – Games Design – User Interface and User Experience

Crash of the Titans PlayStation 2 Game Cover Image Source: http://www.njsoft.dk/ps2listenj.htm

Crash of the Titans PlayStation 2 Loading Screen and Gameplay Video Source: https://youtu.be/0oLUwYrma58

Batman Arkham Knight Image Source: http://www.technobuffalo.com/2015/10/26/batman-arkham-knight-on-steam-again/

Batman Arkham Knight (Left Image) Detective Mode Image Source: http://www.gamereactor.eu/reviews/9076/Batman+Arkham+City/

Batman Arkham Knight (Right Image) Environment Image Source: http://gamerant.com/batman-arkham-knight-gotham-city-next-gen/

Batman Arkham Knight (Left Image) Harley Quinn Image Source: http://gematsu.com/2015/06/batman-arkham-knight-harley-quinn-trailer

Batman Arkham Knight (Right Image) Harely Quinn Detective Mode/Mayhem Mode Image Source:  https://nickverboon.wordpress.com/tag/batman/

Fallout 4 Vault Boy Image Source: http://www.ibtimes.co.uk/fallout-4-pc-cheat-code-list-god-mode-noclip-mode-spawn-items-more-1528013

Fallout 4 Dog Meat Companion Image Source: http://www.fallout4levelingguide.com/gameplay/character-creations-dog-meat-vats-shelter-and-crafting-review/

Fallout 4 Pip-Boy Image Source: http://www.latinone.com/articles/25125/20151009/fallout-4-news-release-date-pipboy-edition-pc-requirements-installation-size-everything-else-gamers-need-to-know.htm

Oddworld Inhabitants Abe’s Oddysee Image Source: http://romhustler.net/rom/psx/oddworld-abes-oddysee-u-slus-00190

Abe’s New ‘N’ Tasty Image Source: https://store.xbox.com/en-GB/Xbox-One/Games/Oddworld-New-n-Tasty/2cff3e15-d760-4061-82a8-1f16b61f9caa

Abe’s Exoddus Image Source: http://www.oddworldforums.net/archive/index.php/t-19340.html

Oddworld – Munch’s Oddysee Image Source: https://en.wikipedia.org/wiki/Oddworld:_Munch%27s_Oddysee

Abe’s Oddysee vs Abe’s New ‘N’ Tasty Gamespeak Menu Video Source: https://youtu.be/G6jhDBhAU6g

Elder Scrolls iv Oblivion User Interface Image Source: https://www.reddit.com/r/Games/comments/1d57md/why_is_it_that_japanese_games_have_such_peculiar/

The Original Street Fighter Image Source: http://bestgeekeverpr.blogspot.co.uk/2015/05/the-7-games-in-street-fighter-series.html

Street Fighter User Interface Designs Video Source: https://youtu.be/8cchlIyO_IU

 

Games Design – User Interface and User Experience

UI = User Interface

UX = User Experience

The normal definition of a User interface is anything in the device you are using that you can interact with, for example a computer UI would be the display screen, the mouse/touchpad, the keyboard and everything that is interactive on the screen. The User Experience on the other hand is what the person interacting with the product thinks about whilst being immersed within the world of that device such as what the layout looks like, what the typography is like, what the interactions are like etc.

Within a game UI and UX are active at all times. The UI of a game can include a lot of things such as the start-up screen, each of the options on the start-up screen, the pause menu, the H.U.D, the controller and console itself are even included. The UX is how immersed in the game the gamer feels, play-ability, flow, fun, competitiveness, fairness etc.

Examples of a Good User Interface

Crash Bandicoot002.jpg

Crash Bandicoot – Crash of the Titans

The original Crash Bandicoot Series was the best but the new series I find has a great User Interface. One of the main reasons I like this game for UI is because during the loading screen there is a slight interaction that keeps you amused for those two minutes of waiting. The video below shows the game and if you look at point 0:39 you can see the loading screen, the screen is interactive and if you move the controller thumb-stick the paw prints move. It may only be a little thing but I find interaction on a loading screen is essential and should be used in more games.

*************************SPOILERS*************************

I know some people are still waiting to play Arkham Knight so if you haven’t played it yet I suggest you either skip this part or don’t watch the videos.

**********************************************************

Batman-Arkham-Knight

Batman: Arkham Knight

Batman Arkham Knight is really good with UI and UX. As soon as I played this game I didn’t want to come off of it because you have so much that is interactive and enjoyable yet it is still easy to access and understand. First of all you can play as different people within this game and each character has there own mode. (It is known as ‘Detective Mode’).

Batman has a detective mode that you get used to so well because it has been in the whole game series. With the press of one button you can reveal lots of information that is needed throughout a fight or through a stealth mission. Enemies that turn orange have a gun and blue enemies just fist fight, also when looking at one enemy in particular you can see their heart rate to know how scared they are and how likely they are to fight back or cower in fear. You can also see the weapon they are holding. I find it very useful for finding weak spots in walls, vents you can crawl through, secret areas and collectibles.

Harley Quinn has a different campaign which is all about fighting therefore her ‘Detective Mode’ is a little different. When in detective mode rather than the screen being misty and blue Harleys screen goes red/pink. Flat surfaces have writing on them that relate to her personality (See example above) which I find very interesting to look at as it is a way of showing that you are playing as her and you know how she feels and what she is thinking. All of the enemies in this campaign have guns so they are all the same colour (pink/red) also Harley Quinn has an extra feature that Batman doesn’t have which is called ‘Mayhem Mode’. In this mode Harley can run faster, take less damage and kill an enemy with one swing of her bat.

Also what is really good about this game is the in-game hints. The hints are helpful for all of the shortcuts as most of the game consists of using shortcuts such as the D-pad (Xbox One). If you can’t remember what button to press when the time is needed the shortcut will pop up at the bottom of the screen.

Vault Boy.jpg

Fallout 4

The game Fallout 4 is another great example for UI and UX. The interaction with the famous Pip-Boy has been one of the best User Interfaces as it pauses the game and everything you need is all in that one place. also you have a pet companion that you can command to do certain things such as search areas for items of interest and injure an enemy. Whilst playing the game you meet a lot of people across the way (good and bad). Some people you meet give you tasks/objectives/missions to complete and if you helkp them out they offer to help you and therefore you gain a bigger variety of choice in choosing a companion. I find that choosing a companion is great as you gain an emotional attachment to them as they have their own background/story, they have a variety of interactions such as talking, trading and commands also your relationship between you and them can change depending on the choices you make.Dogmeat.jpg

Pet Dog Companion known as ‘Dogmeat’

Pip-Boy.jpg

The Pip-Boy

Access Stats, Inventory, Data, Map and even a Radio.

OddWorld Abe Series

Abe’s Oddysee, Abe’s Exoddus, Oddworld Munch’s Oddysee, Abe’s New N Tasty

One of my favourite game series is the Oddworld Series created by Oddworld Inhabitants. I liked all of the games but I haven’t played Munch’s Oddysee because it’s a completely different game compared to the other games. I have recently played New ‘N’ Tasty and it is great (a remake of the original Abe’s Oddysee). The game series is great because it has an easy to use menu, a gamespeak menu so you can learn how to speak as the character and the story is great.

The gamespeak is a great feature as not many games feature something like this. Pressing certain buttons activates abe’s speaking and using this helps to acknowledge the other Muddokens and get further in the game. As well as being informative I find gamespeak quite fun as Abe is a funny character that you really get to know.

Examples of a Bad User Interface

Oblivion.jpg

Elder Scrolls iv – Oblivion

Oblivion is a great game but the user interface is very complex, especially for a beginner. Everything is seen as symbols and it’s difficult to learn all of them also all you can see is lots of numbers and words. Most of the User Interface is ignored by the player as it takes too long to sort all of your inventory, magic and more. Luckily the game is paused when you look at your User Interface.

Street Fighter.jpg

Street Fighter

The video below explains that fighting games have developed the H.U.D and stuck with a certain H.U.D. The H.U.D for the first Street Fighter was not successful enough as both health bars are in the middle whereas now the health bars are at the players side so it is easier to view it via their peripheral  vision.

Create a free website or blog at WordPress.com.

Up ↑