Monday, 12 December 2011

All versions summary.

Last Tuesday I got some feedback on my interface so far and it wasn't good. It seems that people preferred the first version, which was quite old, and really disliked my new direction. It was also made clear that the amount of work I've done isn't nearly sufficient to be 12 weeks worth, but I already know that.

Needless to say I've been panicking to reevaluate my direction at the last minute, and I think I've come up with a menu design I like. People were saying that interfaces are becoming more and more like a HUD, and both of my interfaces took up practically the whole screen, taking inspiration from classic RPGs like the Tales Of games. The latest version of my interface is geared towards taking up a very small amount of the screen so that you can still see the paused gameplay. Maybe even making it possible to move around while you navigate the menu.

Now I'm going to go through the various versions, what my ideas were, and how they didn't work and I'm improving on them. Here is the first version, this is the one they liked:



Inspired by designs like the Persona 4 main menu, the first version of my menu is based on the idea of stripes. The stripes originally came in diagonally as they do at the top, and each element of the menu followed that tilt, but then I changed it so that beyond the top option, the menu straightens up and heads downwards. The problem was, by having the sub-options the same colour as the top options, it made it look like they were linked, like each one had a partner. This wasn't the case, so I reversed the colours on the sub-menu.

Next I needed something to highlight the various options, so I put in a selector. So far, everything had been in black or white, but this time I went for brown. I chose this colour because it was different enough from the blacks and whites to make it stand out, but it didn't contrast so much as to ruin the dark effect of the interface. However, in hindsight, I do think it's quite ugly.

The selector was going to slide left and right along the top menu, the rightmost option would be displayed in white text and all of the ones to the left would turn black, this would show which option was being highlighted. I only animated the first option being selected on both menus.

Next, we have the drop down menu for the Party interface. I stuck with the stripes theme for displaying the health, mana and TP of the party members. I then had to break the stripes theme to fit in an EXP bar and some ugly information on strength and defence. The character portraits were temporary, obviously. John suggested, upon seeing this interface, that if I was going to use the stripes theme that I should go all out and pump up the health, mana and TP bars to take up the entire vertical stripe for each character. I went with this idea and decided to start cutting out pointless elements and colours, this was the basis for version 2.

The picture shows the latest version of Version 2, the video shows a slightly older version.

The first thing I did when I started version 2 removed the EXP, Strength and Defence stats and made the HP, MP and TP bars take up the entire player column. This cut down on wasted space and made the important interface elements really big. I then went down from 5 menu options and 5 characters to 3 menu options and 3 characters. This was to allow some space on the right hand side of the screen to show the game world. I was planning to have the camera swivel round to the front of the player and allign him to the right, when you pause the game. This would mean that you could see the character's reactions to your menu choices as you navigated the menu.

There was a lot of talk about the fact that I needed to focus more on fonts, but I didn't actually want to, so I switched to a symbol based interface to avoid it. Also I think that, originally, it worked with the simplified look, but did eventually end up looking cluttered.

The colour scheme was changed from varying shades of grey to a bold, red green and blue look. This was chosen to match up with the HP, MP and TP bars, and reduce the amount of used colours to 3. At this point, I moved away from the solid colours I'd been using and added a gradient fade at the top and bottom of the menu. I don't think this looks very good now, but I rolled with the theme and added an alternating gradient effect to the HP, MP and TP bars for each player. I also replaced the placeholder picture with a number, which is STILL a placeholder, but a much more fitting one.

I then thought that maybe I should start adding information back into the interface, which was probably my biggest mistake. I realised that the free space on the right was the only place which I'd be able to put it, so I made a 3 bar interface again, this time showing Strength, Defence and EXP in that order. I gave the profile picture placeholders colours, so that I could then link that colour into the bars on the right. I then needed a way to link this information back to the profile pictures through the HP, MP and TP bars. For this I put lines in, which were supposed to lead the eye from the profile picture, around the 90 degree turn and towards the information bars. However it had the unwanted side effect of making it look like there were splits in the status bars.

All in all, version 2 ended up being a mishmash of too much minimalism and too much information, which ended up in it being more confusing than an interface that had chosen just one direction. I still like it, aesthetically, but everybody told me that I should return to the style of the first interface. I didn't want to do this either, because I really hate the first one, so what should I do?

Here's a complete refresh of the design ideas, I give you, version 3:


The idea for this one is to take up as little room on the screen as possible. The length of the stripes at the top is random, and could be randomised each time one opens the menu. The only fixed line is the one at the bottom, and that will always be longer than the ones at the top. This forms the basis for each sub-menu, as they will drop down into the gap formed by the upside down L shape. One selects their option from the choice of four at the top, then the top 4 stripes will shrink down into the size of one, and the main menu text will change into the choice you just chose. Here's what that looks like so far:



The area underneath the word Party is a bit vague so far but i'll think of something. As you can see, there would be plenty of room to continue playing the game on the right hand side if you had enough sticks on your controller.
The colour palette is varying shades of green because I just wanted something that looked good without clashing at all, and green is my favourite colour. If there's time, I may make multiple colour variants of this menu which the player could then choose from depending on their preference.

Well, now it's back to work on that third version.

No comments:

Post a Comment