This is the final GUI/HUD design I created for the Rabbit Exo-Suit after user feedback.
The main changes I’ve made since the user a feedback are to the visual aspects of the design, the initial thing you notice different to the original is that a lot more is going on. I’ve put cables, lights and buttons to make it feel more like inside of cockpit, and I think it looks a lot better. I have also but all the information that will change on monitors, these are the health, energy and portrait of Ululu, I decided to scrap the power cell in favour of it being on a monitor to fit in with the other aspects. I planned to have the monitor that displays Ululu change colour depending on her health, like its green at the moment which would represent full health and red would be close to death.
This design doesn’t have too much functionality, you can only use the hit button to decrease the health of the Exo-Suit. I would also like view outwards to go red when you take damage so you don’t have to always look to the health bar to see that you are low on health. Overall I am happy with the look of my GUI/HUD but would like to fill the right hand side with something as it seems a little empty, And what like it to have more functionality.
This is the final GUI/HUD design I created for Ululu after user feedback.
The main change I’ve implemented to the design is that I’ve fully removed the compass from on screen, I wanted it to be more minimal to not take away from the gameplay. I’ve also made the bag smaller and changed the design of the health and stamina to make it look more like the heart and ears from the development blog.
When you click on the heart and ears they fade slightly each time, which is what I would want it to look like when she is getting hit or losing stamina.
When you hover over the bag an animation occurs where the bag move up slightly and the slots and weight/space bar slide onto the screen.
When you click on the bag it opens up the full bag, I’ve reduced the number of slots the bag has and made it smaller and lowered the opacity to make it less intrusive from the player. For the design in general I wanted it be as little as possible on screen to not take away from the gameplay and I think I’ve achieved that with my design.
So I completed my user feedback forms over the Easter holiday and when I got back I got some of my peers (Thanks guys) to user test my GUI/HUD for Ululu and the rabbit exo-suit. In the end I got 7 user feedback forms filled out and I felt that was enough to move on and develop my designs further.
I received a lot of positive comments and constructive criticism which is always very useful, and these are the designs I had user tested:
Heart goes gradually grey to black as Ululu gets damaged, will be same for stamina (Ears):
When you hover over the bag this appears, 2 quick selection slots and a bar to show how much space is left in your bag:
Full bag opens when you click it:
When you hover over the compass in the bottom left more detailed one appears:
(Ignore green circle that’s to trigger damage) Screens to display Ululu portrait and ammo:
Health bar and power cell for rabbit ‘stamina’:
I’ve read all the feedback from the user feedback forms now and these are the main points that I could think about and change or improve.
- More detail behind the bag?
- Incorporate more together, health and compass near each other?
- More detailed compass
- Smaller compass
- Opacity lower on bag and compass?
- Bag on click too intrusive?
- Make everything feel more apart of the game.
- Mini map?
- Too many bag slots?
Some of the feedback I expected, especially with the compass which was just a place holder really, but has given me some things to think about when I improve my design.
- View too small? Claustrophobic?
- Ululu’s health too small? is it needed?
- Make the health bar look better.
- Cross-hair too thick.
- More colour?
- More robot looking things, circuits, cables, monitors etc.
- Make it look overrun
- Animations to screens?
- Add way to shoot and lose bullets.
Again a lot of what i expected, the main thing was that the colour was too grey and boring so that is something I am defiantly going to change. Another idea I like and will be using is to have it very overrun will cables and monitors.
Now that Ive got all my main points I can improve on I will start redesigning my GUI/HUD’s.
To start thinking about the GUI for Rabbit Heart i started to jot down a few notes alongside some drawings to help me think of what i might want to include in it..
Rabbit Exo-Suit Ideas:
I also drew some different types of hearts and rabbit ears..
I will be coming up with some prototypes this week both for Ululu and the rabbit exo-suit.
Rabbit Heart is a game concept being developed by Paul and Gareth for educational purposes, it’s to show students concept work and what is needed when developing a game. From what i have researched it is a free roaming open world puzzle game with action elements to it. You play as lead protagonist Ululu who is a young girl that has crashed her spaceship on a strange unexplored planet, armed only with her laser pistol she goes exploring. Whilst exploring she finds a giant rabbit exo-suit that reminds her of her toy rabbit that she has lost, she somehow activates it and it comes with her. Ululu can go into the rabbit exo-suit and control it, the cockpit is located in the chest and that’s why the game is called rabbit heart.
There are two different player modes, one is where you are playing as Ululu in third person. The other is when you are inside the rabbit exo-suit which is a first person pilot view. The inventory system is a key aspect of the game, Ululu has a rucksack that can only carry so many items, so the player will have to swap out items and leave certain items that they deem less important. Some other notes i wrote down are as followed:
- Ululu is a bad shot
- No combat experience
- Rabbit suit is a good shot
- Different HUD’s for each player mode
- When in rabbit suit see Ululu’s reflection and emotions/reactions *DOOM*
From my research i will design some HUD’s for each player mode and maybe design a menu system.
*Rabbit Heart Blog*
Diablo 3 is an action role playing game with an Orthographic view and was developed and published by Blizzard entertainment. To move your character around the map you point and click, it’s also the same in combat where you point and click on the enemy to attack so you kind of interact with the environment. In the top right corner of your screen whilst playing will be the mini map and it also tells you where you are, I like the way the mini map is translucent to not fully interfere with your view. Underneath the mini map shows your objectives and some information on what you need to do for example, time limits or how many of something you need to collect.
To the left of the screen is where the chat window is located, this shows all the conversations had with other players or NPC’s, If you miss something an NPC has said you can scroll back through to read it which is very useful. If you have any party members or creatures summoned they portrait will appear in the top left and will show how much health they have.
At the bottom of the screen is where all the main information of the GUI/HUD is located. The red orb at the left of the bar is the health orb and the orb to the right is your resource pool this is different for each character for example the wizards resource is arcane power and the barbarians is fury, each is a different colour and deplete when you use your abilities. In the center of the bar you have your hot keys you can have spells or abilities mapped to the keys 1, 2, 3 and 4 and then you have two mapped to each mouse click, you can also map a portion to the Q key for quick use. Also on this bar is your buttons for viewing your inventory, equipment, journal and general settings. I think the GUI/HUD is really good and I like the way it feels integrated with the game, I think the reason it does this is because of the stone gargoyle and angel they fit really with the game and give it a dark feel.
Far Cry 3 is an open world first person shooter developed by Ubisoft for Xbox 360, PlayStation 3 and PC. I really like the GUI for Far Cry 3 and one of the reasons for that is that a lot of the information displayed is in the bottom left hand corner and it isn’t spread out all over the screen, obviously some information has to be displayed in other places but the majority of it whilst out of combat is in the bottom left corner. In that corner you have a mini map which shows interesting things in close proximity to your character, like collectables, enemies and objectives. Also in the bottom left corner you have your health and Armour bar’s, the health bar is unusually a yellow orange colour and when you are low on health it flashes red, the Armour bar is blue. The amount of healing items you have on you is also displayed in that corner as well as how far you are away from your objective.
Whilst in combat the HUD will change a little bit because you will have a weapon equipped, and this will bring up a crosshair to make is easier to hip fire. Then in the bottom right of the screen it will show how much ammo you have for the weapon you currently have equipped and how many molotovs or grenades you have. Also if you are close to an enemy and detect you an indicator will appear, it starts out white and the arrow will get bigger and bigger until you are detected if you do not hide, this indicator shows you which detection the enemy is located. The indicator will turn red when they start attacking you. I think the GUI/HUD for Far Cry 3 is very good and really like the indicator system and how when you aren’t using your weapon the ammo bar isn’t there because it isn’t needed.
The War Z is an open world zombie survival MMO developed by Hammerpoint interactive. The GUI features the necessary requirements for what you would expect it to look like, with all the information that is needed for the player. In the top right hand side of the screen is the sight and sound bars, this indicates how much noise you are making and how visible you are to zombies. As you would expect the higher the red bar is the more likely you are to be detected by a zombie, these bars will go up if you are sprinting and will go down if you are in prone or crouched down. To the left center side of the screen is the chat screen, this is where you can see everyone who is talking on the server if they are talking in global you can see it where ever you are, if they are talking in proximity you have to be close to them.
At the bottom of the screen there are six slots that are mapped to the corresponding number key, the first slot is for your primary weapon which is normally a rifle or shotgun, the second slot is for your secondary weapon either a pistol or melee weapon. The next for slots can have what ever the player wants to have there to use quickly, this can be food, water, antibiotics, painkillers, binoculars etc.
In the bottom left of the screen is where the health bar is, also here is the food, water and stamina bar as seen above. When the player has full health the silhouette is fully red, if the player takes damage it goes down like a health bar from the head to the feet. The food and water bar’s slowly go down as the player plays and are replenished by eating and drinking as you would expect, the stamina bar goes down when you player sprints. I think the GUI is fit for purpose and is easy to understand, I think it would be better if there was less on the screen it should be more immersive , especially for a game based around survival.
The gears of war 3 GUI is a very good example of a minimal interface that works really well. Whilst playing the campaign this is what you will see on your screen, just the weapon you currently have equipped, the amount of ammo you have altogether and how many bullets you have in the clip. Another thing you’ll see on the screen is that when you reload a little white bar goes across where the ammo is and if you hit reload again in a certain marked area you’ll do what is called an active reload and this will add bullet damage and reload your weapon quicker, this allows the player to interact with the GUI. You change weapon with the D pad and it comes onto the screen in the middle and shows you each weapon you have in each slot but you can continue you run around while you do so.
When you take damage online or single player a picture of the gears of war logo will come on the screen and the more intense red it gets the more damage you have taken, this is in place instead of a health bar but it also shows which direction you are taking damage from. The GUI does change when you are playing multiplayer, depending what game mode you are on you will have the score in the top left hand corner and when a player dies it shows it in the bottom left hand corner.
I’ve always liked the GUI’s for the gears of war games because there isn’t too much going on to divert your eye from the gameplay and i think the way it looks when you take damage is very clever.
The GUI for Dark Souls has a lot of the features you expect from an RPG. In the top left hand corner you have a health bar which is the red one like in most games and you have a stamina bar which is the green one also like most games, every class and character in the game has the same. Underneath these bars it shows little images of what buffs the player has on them so you know by the visuals, and if you don’t have any buffs you wont have anything there. Next to the health and the stamina bar is a number and this tells you how much humanity you have which is used to get better loot, the more humanity you have the better loot you will get, when you die you lose all your humanity. This also indicates if you are in human form or undead form, if its lit up you are human, if its greyed out you are undead.
In the bottom right of the screen is the number of souls you currently have, Souls are the currency in Dark Souls and are used to buy weapons, armour, items, spells and they are also used to level up your character. The bottom left of the screen is where you can see the weapons you have equipped and clicking left and right on the D pad to whatever you have set as your second weapon. Also in the bottom left shows you have items you have and pressing X on a Xbox pad uses this item, its for potions and other items of that nature, you can cycle through your items by pressing down on the D pad.
The start menu in dark souls is in real time and doesn’t pause the game, so if you are in a fight the enemy will keep attacking you. From this menu you can see all your stats and equipment and change out your set up and stuff which most start menu’s for an RPG should do but with it been in real time makes it unique.
I think the GUI for Dark Souls is good because it shows you all the information you need to know on the screen and helps the player, if it wanted to be more immersive they could get rid of the visual D pad and just have it pop up when you press on the D pad rather then it been there all the time. Also the health bar could go in favour of the screen just getting more red the more damage you take but because you don’t regenerate health it is probably needed to be there. I think if the GUI was changed to be more immersive it would make it more difficult for the player and that isn’t needed because the game is already very difficult.