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.