GUI Design, Version 1

[TerranRich]

Hey guys, here is a preliminary design for a GUI for By the Sword. I sketched out the placement of the buttons and other features, and then came up with this in Photoshop:



How does it look? What things can I do to improve it? (By the way, there are no mouse-over drop-downs... they are always on the screen, the game is 800x600, and the rooms themselves will be 800x500, leaving 50-pixel-tall spaces on each the top and bottom.)

As shown above, the active button will be highlighted and the icon within turned to white instead of black. The mouse cursor will show this as well. From left to right: Walk, Look, Interact, Talk, Shoot, Inventory, Control Panel, and Info (like game info, credits, etc., like the old Sierra games had). (The gun icon is just a placeholder until I can find what will be the final design for the in-game weapon used.)

Are the icons obvious enough that players will know what they are for?

Is the font used for dialog/narration clear enough, yet still sci-fi-y enough?

[Evil]

Font looks good, but the layered chapter/by the sword thing looks misplaced and unfinished.

The buttons are clear, except for the gun. Gun doesn't look enough like a gun. Either needs to be more hand gun like or lasery. Eye looks a little to dilated IMO.

And not to question your design, but I always think that look, walk, talk are excessive. I'm a huge fan of the interact only. Walk to objects, on a character it goes into conversation, if theres no object walk to location. Makes things a lot easier and feel more professional. If you're taking the time to get back into this project, I think you should think about things like this a lot. It'll really effect everything from then on.

[TerranRich]

You know, I was thinking about doing it that way, Evil. I've seen it done many times... I know it's not hard to script. I can't recall if there are any times where you need to interact with people other than talking with them, however.

All good points, yeah I did kind of rush the top-right corner image. I know I can make something better, I just skipped over that part and never went back to it.

As for that eye, it's kind of intentional. Has to do with the pupils dilating when the brain wants to see more of an object, and fits in with the whole theme of the game in general.

Thanks!

[Monk]

hey there terran... in my opinion, and just a suggestion, i think the GUI pictures has to correspond with the main character... for example the boot mark for walk mode, is the chara is wearing boots? or the talking mode is a woman's lips, is the chara a woman? well at leas i think that what should we do when we making int GUI, but hey im no expert...

and for the graphic itself... nice one! very great for a serious adventures project! might want to reconsider the gun tho... 

more power and good luck!

[matt]

i think its great! The icons are great looking but to someone who doesnt use ags it would be a little hard to understand. If you had a help bar or if you animated the icon that your mouse is over it would be really easy!

[InCreator]

I like the gui: a bit color-poor but functional.
But spoken font totally sucks ass. I wouldn't put my eyes through torture, even for best game in the world.
Adventure games are text-heavy and what might be a cool font for logos and design, isn't cool for reading.
That's why people still use Times New Roman and 90% web pages  (of what I know) are in verdana/arial.
I suggest to find stylish, yet readable font.

[TerranRich]

I don't have a problem reading that font, really. Do other people have trouble reading that font easily? Is it really that hard on the eyes? If so, I'll try something a little less sci-fi-ish.

Yes, the character wears boots, but as far as lips go, It's really hard to find lips that look masculine. I looked everywhere on iStockPhoto for some illustrations, online on free icon sites for inspiration, and so forth, but couldn't find anything that would work for a "talk" icon.

And that "shoot" icon is just a placeholder image of a Star Trek phaser. I plan on using a pistol that looks more recognizable and not too outlandish, but I haven't obtained it yet.

And I'll consider animating the icon upon mouseover. I mean, the game is going to come with a manual, and there will be a help icon in the control panel... should I move the help icon into the top bar, and move the "game info" icon into the control panel, swapping the two?

[Mantra of Doom]

I, personally don't have an issue with the font, it isn't too fancy and all the letters are easily recognizable and the style fits with the scifi aspect of the game.

About the mouse overs, I'm not sure if this would be easy, but I think it might be cool if the image faded to white then orange... or orange then white when selected. It wouldn't be a long animation, but it would help the feeling that there are lights under that panel... some sort of futuristic touch screen

I think though, that the title of the game in the corner needs some work... maybe if you took "By the Sword' out and rendered the chapter title with the beat-up font.. or distress the text a bit with the eraser in photoshop.

[InCreator]

About font: It isn't the most horrid one to read, and anything's better than leaving font to default (there's WAY too much same old font in AGS games), but "kerning" or horisontal spacing or however it's called is way too big IMO. It's, like, too wide. Other fonts usually have letters together. Here, even a short word makes a loooong line. That's what makes it uncomfortable for me. Maybe you can fix it without font change? Probably not in AGS though.

EDIT: noticed that it's really not spacing, but letter themselves are horisontally very long (wide).

[Monk]

If you remember the lips style like on the pop-art comic by andy warhol,or those classic 'john and jane' style comic those lips are masculine.. But its just a thought.. Or maybe you could make the talk button graphic display a full jaws instead just mouth/lips?

As for the help button, if i am the player of the game,i think i prefer help button better than a game info!

[TerranRich]

I'm definitely going to swap the game info and help buttons. You make a good point.

I'll try to find some more masculine lips. :p As for the font, I don't know, is the width of the letters too much of an issue? I'll look around for better, not-as-wide fonts for dialog/narration text.

I'll have a Version 1a soon.

[Matti]

As for the font, I don't know, is the width of the letters too much of an issue? I'll look around for better, not-as-wide fonts for dialog/narration text.

Personally I don't have a problem with that font at all. In fact, I really like it since it's both readable and stylish. Yes, the letters are a bit wide but I wouldn't call that an issue.

As for the chapter-thingy on the right:

You could move "By the sword" up and make "Chapter 1: A good Ship" to ONE line and put it beneath the title. Now it looks a bit messy.

[TerranRich]

matti: That's exactly what I did with my latest edit, which is now below:



I changed the bottom text to a random color to show that different characters have different colors for their text (like many games do). I also hand-drew the mouth (does it look too cartoonish for a serious sci-fi adventure game?), re-did the pistol to reflect the final design of the actual in-game object, and made the iris of the eye icon a little more apparently (lighter).

I also fixed the top-right corner, putting the game title in the top-left corner of the area, and the chapter # and subtitle in the bottom-right corner of the available area.

I originally tried giving the chapter info some color, but it seems to look better in grey. How looks it now?

[Layabout]

Seriously aren't we past the point of having 20 (exaggeration) different ways to interact in an adventure game?

The simple interface has worked for so many present adv games, why not assimilate to the future?

[Evil]

I agree with Layabout. But I can understand why some people want to stick to a more classical format.

Your new layout is much better. The stroke on the sliders could be a little thinner. There are still some continuity issues between the boot, eye, mouth, and bag. Gun is much more obvious.

Text looks better. The chapter text look out of place still. Maybe it's to tall?

[TerranRich]

Why is the Sierra-style interface suddenly undesirable? I think you guys have been spoiled by the simpler interfaces of today's games.

Honestly, I was thinking also about doing left-click for look, right-click for interact/talk, and perhaps middle-click to open up inventory.

I may end up doing that. Like I said, this is Version 1. There are other Versions to come, so this isn't final. It was just a concept.

But seriously, I see so many games using the LucasArts interface, with "Push", "Open", "Close", etc... Isn't that far worse? i think having Walk, Look, Interact, and Talk is far better than the standard 6 or 8 commands in a LucasArts interface. And I see more than enough games with that interface get great reviews. I don't think the interface matters as much as everybody thinks it does. It does matter, but it's not the end of the world if I don't comply with the simpler standards of today.

[Evil]

I just think if you're going to start this really big project back up you should think about the professional aspects. I think, like Lay said, that we have really come past this style GUI. If you're doing an homage to Sierra or Lucas Arts all of those interaction buttons would be great.

I guess it also depends on if you're doing a highly interactive game or a more movie like story based game. Look at these games where there is so much "video like" gameplay, where you've got to hit the B button really quickly or you die or something. It's not something that's really respectable, but I think the industry can't combine movie like gameplay and extreme interactivity.

[TerranRich]

Well, I've taken everything into consideration, and I decided on a whole different approach.

Here is Version 2 of my GUI design:



Basically, left-click walks (if on a walkable area) or looks, while right-click does the secondary interaction (take, use, open, close, talk, press button, or anything else). My only problem is with some objects where you could use them or try to take them. This way, only one would be possible. I'll either have to reconsider multiple interactions and whether they're needed, or come up with another solution where right-click would simply cycle through the available interactions for an object.

I moved some things around and changed a few of the icons. And I put some sample text at the bottom in white, the narrator's color. (All other characters have other colors.)

How does it look now? How's the mouse diagram?

[Mantra of Doom]

I like this version the best. I would like to see the "walk" change to "look" if over a hotspot and the "open" change to whatever action is available... or cycle through if there is more than one alternate action. Possibly a help screen/tutorial might be in order, but I think it would be easy to get into throughout the game and continuing into the other games if it is a series.

[TerranRich]

I believe I said that above. Left-click either walks (on walkable areas) or looks (on objects, hotspots, etc.), while the right-click interacts (whether it is talk, take, use, open, etc.).

The rightmost button (the question mark) is for in-game help. It'll just bring up a dialog (in the form of a GUI) that shows what each button does, and a basic run-down of how to play the game. The game will come with a manual (in PDF form if downloaded, printed form if purchased) that will explain more.

As you can see, I eliminated the "Shoot" interaction, and plan on having it be an inventory item instead... what it should have been all along. I doubt any items will be interacted with in more than one manner. Maybe you do one interaction first, then another, but never two at the same time.