Posts Tagged ‘GUI’

Ululu GUI Improved.

Posted: May 1, 2013 in Design for the user
Tags: , ,

I took the feedback for my Ululu GUI and made improvements to the menu adding all the options. I also tweeked the health bar to make it more subtle and added an energy bar and equipment slots.

Ululu GUI Improved screen 1

Ululu GUI Improved screen 2

Most of the menu optopns are just place holders. when you hover over an icon, text appears in the centre explaining what the option is.

Ululu GUI Improved screen 3

Ululu GUI Improved screen 4

The swf file can be found here.

Advertisements

I took the feedback for my mech GUI and made improvements to the information desplay so it shows what you have equiped and the characters face aswell as a mini map and an energy bar for the mech.

Mech GUI Improved screen 1

The swf file can be found here.

I then decided to remove the crosshair because it seemed out of place.

Mech GUI Improved screen 2

The swf file can be found here.

Rabbit Mech GUI.

Posted: May 1, 2013 in Design for the user
Tags: , ,

I started working on the mech GUI by getting setting out the basic layout.

Mech GUI screen 1

I then added an animation to indicate the players health, the swf file can be found here.

Ululu GUI

Posted: May 1, 2013 in Design for the user
Tags: , ,

I started by creating the basic layout and made the gear spin when you mouse over it.

Ululu GUI screen 1

The swf file can be found here.

I then added the start menu and my initial idea for the inventory.

Ululu GUI screen 2

Ululu GUI screen 3

The swf file can be found here.

I gathered user feedback for all of my GUI designs and then used that feedback to refine my idea. The menu had few criticisms besides the lack of a continue tab for quick continuation instead of having to go to load and select the save that you want to load every time. The other critique was to make it more self explanatory so that no one can get confused as to which option does what. Here is my end result:

Main Menu Final 1

Main Menu Final 2

Main Menu Final 3

Main Menu Final 4

Main Menu Final 5

Rabbit Heart Menu.

Posted: April 13, 2013 in Design for the user
Tags: , , ,

I Started by sketching some ideas I had for the start menu:

Menu UI sketch

One was inspired by start menu’s from RPG’s like Final Fantasy were they only have the logo and the options underneath:

430434-final-fantasy-xiii-xbox-360-screenshot-main-menu-s

My other design was inspired by the travel screen on Persona 4 that has images of different things in the location you have selected cycle through like a slide show:

2013-04-12-084456

I then created my design in Photoshop:

Menu ui1

menu ui 2

menu ui 3

menu ui4

menu ui 5

Here is a video of the slideshow in action:

GUI/ HUD Research.

Posted: January 29, 2013 in Design for the user
Tags: , , ,

Fighters:

Mortal Kombat:

bi4f9v

The HUD for the first Mortal Kombat was very simple just having a health bar, game timer and score counter.

Good Points:

  • Clutter free
  • All the info you need
  • Colours are defined and make the information stand out from the background.

Bad Points:

  • No variation – looks he same in every stage for every fighter.
  • The bars are very sharp and blocky staning out a bit to much making them feel like they don’t fit comfortably in the scene.

umk-s1

This is very similar to the first HUD with subtle differences, the colour of the healthbar and text have changed as well as the addition of a win counter.

The Good:

  • White text is very easy to read on any coloured background.
  • The fonts used are slightly more clear.
  • The healthbar is less bright and more subtle.
  • The win counter lets you keep track of how many games you have won

The Bad:

  • The health bars are still very blocky.
  • No variation – looks he same in every stage for every fighter.

mortal kombat 4 free download 5

This is the first entry in the series were you needed more information than your health and time allowing you to change between fighting styles and equipment.

The Good:

  • The health bars are much more refined making more of a feature of them instead of just having two rectangles float in the air.
  • The new position of the name makes it clear who is who.
  • The addition of a characters face lets the player know who they are without having to or being able to read the characters name.
  • The fighting stiles are clear and out of the way not distracting to player.
  • The addition of the face also helps the healthbar feel more costume to that character and less generic even though the name and face are the only thing that change.

The Bad:

  • The position of the names and faces would have been more out of the way if they were in the large gap above the health bar. Notice in this image how one of the fighters is almost touching the name tag this could take the player out of the game for a second to quickly read without really thinking about it (minor nit pick I know).
  • The spear going through the techniques is uneventful you could have used different aspects of the stile or weapon to back the text like a fist or a kick to relate to the word more than using the same spear for everything.
  • There is a lot of waisted space above the healthbar.

mortal-kombat-ps-vita-screenshots-6

This is the latest instalment to the Mortal Kombat series, instead of different fighting stiles and weapons you have an X-ray meter which will allow you to perform a powered up version of a special attack at the lower nodes on the bar but if its full you can perform the characters X-ray attack.

The Good:

  • The Health bar looks even smoother and flows across the screen subtly not drawing too much attention to itself.
  • the names of the characters have gone back to the health bar which saves space and uses a clear font and colour to help it stand out.
  • The characters face also makes a return and moves position optimising the space usage and allowing the health bar to move further up wasting less space than the previous example.
  • The X-ray bar doesn’t draw too much attention to itself allowing better immersion.

The Bad:

  • There is no variation, it would have been nice for slight tweaks in appearance to go with the stage you fight on.
  • The lightning bolt on the X-ray meter seems a little out of place to me I might have gone with an X or something relating to the characters speciality.
  • The X-ray meter may have been better located under the health bar in a smaller form to keep all the players information In one spot instead of two since there is only three things they need to be concerned with, the time, there health and the X-ray meter.

Overall you can clearly see how the UI in Mortal Kombat has evolved from two rectangles to a much more aesthetically pleasing design with images. They also added new features which are necessary with the new game mechanics but overall the UI gives the player the information they need and nothing ells; this allows it to look good without drawing to much focus to itself.

Blazblue:

relius

Unlike Mortal Kombat Blazblue’s HUD is much more flashy with bright colours which compliments the characters anime look. There are seven different things the player needs to take notice of but six of them are at the top which keeps the space usage down and it looks very neat with each bar or token having its own space.

The Good:

  • The information is very clear and spaced out.
  • Character pictures with their name under them
  • The stile of the HUD compliments the artwork.
  • The dip in the health bar. This gives the player a clear indication when a character is at 35% health or below, they specifically chose 35% because reducing your opponent  to 35% or below is a requirement to use your astral finish which is a characters instant kill attack.

The Bad:

  • There is no variation apart from a bar at the bottom of the screen it would have been nice to see a change to compliment the stage.

persona4arena_477701

Made by ARC System Works, the same people who made Blazblue, you can clearly see that they have used the same HUD as the starting point for this games which is good because Blazblue is a solid fighting game and displays its information well but bad because it doesn’t let this title stand out as much as something completely different using similar fighting mechanics.

The Good:

  • The information is very clear and spaced out.
  • The stile of the HUD compliments the artwork.
  • The characters have a picture and an image of their individual personas to go with them. This is a nice touch because the personas act like a tag partner for the character to execute a powerful attack then leave.
  • The stile also fits in with the menu style from the Persona 4 RPG which this fighter is based on making fans of the series feel at home.

The Bad:

  • The character names have a title above them like “Spunky Dragon with Deadly Legs” this serves no purpose besides a fun fighter title which could have been used in the menu screen but didn’t need to take up space on the HUD.
  • The stile always mimics Persona 4’s even when your using characters from other entry’s in the Persona series like Persona 3. this seems a wasted opportunity to pay homage to the games all the characters came from instead of just one.

Here is an interesting video I found explaining why the display of fighters is always the same with health bars at the top and a clock in the center:

FPS:

Killzone 2:

928377_20090220_screen001

This is the layout for the online mode in Killzone 2, the single plays is slightly different not needing some of the information.

The Good:

  • All the information has some opacity allowing you to see through it so it never obscures your view.
  • The colour pallet is very monochrome using very few colours to fit with the environment and tone of the game.

The Bad:

  • Your information is in four different areas you could have shifted the ammo under the energy bar and moved the radar to the bottom right to save space and not have something in every corner of the screen.

 1-holodeck

PSZone_12_06_Dirge_of_Cerberus_03

Final Fantasy VII: the Dirge of Cerberus was a spin-off game from the RPG Final Fantasy VII but very little in the HUD design shows that which is a shame for fans looking to immerse themselves in the same world.

The Good:

  • Gives you all the information you need.
  • Easy to understand colour code.

The Bad:

  • Very boring, the display doesn’t show off any of the characters characteristics or pay homage to the classic design of the original.
  • The weapon information at the bottom seems to take up to much room on the screen and could be simplified.

Platformer:

Little Big Planet:

Little-big-planet-2-race

lbpsm

The display in Little Big Planet is perfect for its type of game were you have no health, no ammo and just collect score bubbles. It clearly shows who’s in the lead and your score multiplier. The menu is also very easy to navigate with each section represented by an image and all the costume pieces, stickers, materials and collectables been represented as thumb nails. This system has been so good it has been used in every Little Big Planet game and never changed with the exception of adding new icons for additional content.

RPG/ J-RPG:

Final Fantasy XIII:

Final-Fantasy-XIII-Battle-08

top

Final Fantasy XIII has a very different UI from any of the previous games giving the player a time bar which they fill with attacks but the more powerful the attack the more time it takes to perform. This is a very good idea and works fine, they also allowed you to switch between classes in a battle to gain different skills and abilities.

The Good:

  • Easy to read and navigate.
  • Health is displayed simply and is displayed in a step like the menu.
  • It remembers what commands you imputed last turn if you wish to repeat a combination of commands quickly.

The Bad:

  • You can not customise the colour of the bars which was possible in many of the other Final Fantasy Games.
  • Auto attack is to cleaver taking away from the games depth and strategy and reducing most battles to just spamming the X button.

Final Fantasy VII: crisis Core:

crisis-core-final-fantasy-vii-20070512014056916-550x

Final Fantasy VII: crisis Core is another spin-off title of the RPG Final Fantasy VII, but this game goes down the action RPG route having a real time battle system where you can evade the attacks by dodging blocking or just running out the way. The design is more true to the Final Fantasy VII look having each skill you equip take the form of a meteria and add to the available skills the player has in the bottom right of the screen. The colour scheme makes everything stand out and the slot machine in the top left is a decent size so you can tell what numbers or characters your getting.

The Good:

  • Pays homage to some of the elements of the original.
  • Is very clear and presents all the information boldly.

The Bad:

  • All the information is all around the screen.
  • It takes up more space than is probably needed.

Ni No Kuni: Wrath of the White Witch:

gaming_ni_no_kuni_wrath_of_white_witch_8

Ni No Kuni has a very clear UI which takes the forms of speech bubbles above a still of the character and changes to who ever you have selected. The status of your team and familiars are clearly displayed and easy to navigate.

The Good:

  • The stile of the UI compliments the artwork.
  • Everything is displayed clearly.
  • Character stills change depending on who you have selected.
  • The more in-depth brake down of a characters status in the bottom right is helpful when you need to do quick selections at the start of a battle.

The Bad:

  • The more in-depth brake down of a characters status in the bottom right can make the status display in the top left useless at times.

Persona 3:

persona-3-490

Persona 3 is the first game in the Shin Megami Tensei series to use this style of battle UI having the characters status displayed on the right side of the screen clearly using a side shot of each character making names useless. In the bottom left you have a weal with all the command options on.

The Good:

  • Clear presentation and easy to understand.
  • The rush feature makes all of your party do a standard attack until you turn it off making re-visiting areas with weaker shadows you no longer need strategy for a breeze.
  • The stile of the UI compliments the artwork.
  • The menu disappears after the commands are chosen so it doesn’t obscure your view of what is going on.

The Bad:

  • If you are in a rush you may spin round the command weal too fast and pick the wrong command by accident.
  • The only visual indication of who’s turn it is in the status is the characters head is moved slightly to the left. The game compensates for this by placing the camera behind the character who’s turn it is.

Persona 4:

xlarge

Persona 4 builds on Persona 3’s UI and improves it changing the weal into a more traditional menu style and additional antithetical tweaks.

The Good:

  • At the start of every battle the outline of a TV screen will appear framing your main character this is a nice touch considering you are fighting inside the TV world and makes it feel like your a viewer on the outside looking into what’s going on.
  • There is a clear indication if you look over at the party’s status as to who’s turn it is.
  • The stile of the UI compliments the artwork.
  • The menu disappears after the commands are chosen so it doesn’t obscure your view of what is going on.
  • Clear presentation and easy to understand.

The Bad:

All of my previous complaints were fixed in this title.