Need feedback for Verb Coin GUI

Sughly · Thu 09/12/2010 02:52:17

Hey all, here's the verb coin I've been working on for my game 'Anna's Room'. It's gone through a few stages now and I've gotten to the stage where I can't tell if it's successfully simple, or ugly simple. I liked the idea of keeping it straight forward and not too flashy, but now I'm not so sure. I've included a screenshot of it being used in game to give you an idea of how it fits with the look of the game (but please ignore the cursor, it's temp and extremely ugly

).

The pics are (from left to right) idle, 'use', 'look', 'talk to', and 'telekinesis'. Feedback will be greatly appreciated!

Gilbert · Thu 09/12/2010 03:19:53

I think apart from 'use', the functions of the other icons aren't obvious enough, mainly because they match the style of the characters in-game.

Whereas the design of the character is nice, when you extract individual facial components and display them separately, they're not very recognisable. It's really hard (for me at least) to tell the eye and the mouth, in both the highlighted and not highlighted versions. I even mistakenly thought the curve representing the nose as the mouth. I'll say a speech bubble works better in this case (with '...' added inside it for the highlighted version). For the eye... Well I cannot think of a way to make it more obvious, so I'll leave it to other people.

The highlighted version of the telekinesis icon is okay IMO, but the one that's not highlighted is not understandable as it's just a head. I think you can add one of those "sound wave" lines like in the highlighted to each side of the head (so when it's highlighted there are two lines on each side).

It depends on your preference though, as I think it's also okay to have the not highlighted icons difficult to comprehend, but the highlighted ones should be obvious, so one way of fixing it is to keep all these icons, but add a doted line to the highlighted eye and a small speech bubble to the highlighted mouth to make them more obvious.

ddq · Thu 09/12/2010 03:24:34

I agree, Use is very clear, Telekinesis is when it's highlighted, Look is a little harder, and I could barely tell Talk the first time I looked at it.

Sughly · Thu 09/12/2010 03:53:11

Ah yep, no you're both very right. It's so obvious now! I think I looked at them and thought of that at some point, but obviously let that thought slip by the way side. I'll work on them and put up some new pics when I'm done. Oh and that thought bubble idea is great - I remember considering that when I was drawing them, but wasn't sure how to do the active/non-active. Your suggestion is so simple it's embarrassing!

EDIT: apart from the icon critique, dooes the actual setup work? Look ok? I'm not sure if it does or not, not sure if it's too... pink. And puffy. Or maybe pink and puffy works? Oh and if someone has an idea for the 'look' icon, fire away!

Ryan Timothy B · Thu 09/12/2010 03:58:39

A magnifying lens for the look would be fine for me. A lens is completely understandable as 'examine/look'.
As for the purple verb coin GUI, perhaps maybe a darker drop shadow to help separate it from the background.

On a side note, those backgrounds and character art are absolutely amazing man. I love your style.

Actually, with that cartoony look, it would be really nice if the descriptive text when hovering over something would quickly float upward from under the bottom bar when it hovers over something. While being at a high transparency and fade to opaque. And then fade to transparent and under the bottom bar when you move the mouse off. I'd really like to see that.

Sughly · Thu 09/12/2010 04:35:54

Haha, thanks Ryan! Again, magnifying glass... so simple, but man, why didn't I just think of that -_-. Well, this is why I put this up here I guess, and I'm glad I did!

As for the suggestions, they sound real nice! I'm still very much a programming newbie and I'm slowly scraping my way through. I haven't even considered animations like that, but now that I stop to consider it they wouldn't be particularly difficult to do... hmmm. I'll have to look into it! Would make a really subtle yet effective difference. Thanks again!

Ryan Timothy B · Thu 09/12/2010 04:44:05

It would be really cool if it raised up at a seemingly fast speed, and once it reached its height, it drops about 6 pixels. That way it kinda looks like a cartoony bounce.

If you ever need any help on stuff like that, I'd be more than willing to help you out. Even if making a basic new game just to feature the particular code you need help with.

Also now that I think of it, the verb coin should probably fade in and out very quickly as well.

Sughly · Thu 09/12/2010 05:45:10

Hmmm... it's more than likely I'll stumble on one or two things, so I'll definately be at least pm'ing you over some of these suggestions. I'll tackle them in a day or two when I have some other things ironed out, so expect some hassling then! Thanks again Ryan, your support is awesome

Sughly · Thu 09/12/2010 07:04:41

Ok so here are some new ones. I'm still not sure about the telekinesis one, kind of tricky. Looked a bit weird with just one set of lines in the non-active state, so went for three in the active instead but it might be a bit much. I also increased the size of the higlighted ones too to try and help make them pop a bit more. The first row are the old ones for comparison...

Now for the new ones...

Looking at them now, you guys were spot on with the speech bubble and the magnifying glass.

Pinback · Thu 09/12/2010 07:58:25

Looks good, changes work well- although I might suggest to go for something like a brain for the telekinesis, I thought that icon was listen at first:)

Technocrat · Thu 09/12/2010 08:09:23

When I first saw it, I thought the telekinesis icon was a banana in a house - took a few moments to think! I'd probably also go for something more brain-like as well, something psychonautsy.

But very, very nice!

Khris · Thu 09/12/2010 08:13:41

Love your art!

On a more technical aspect of the GUI, I'd suggest to move the look button to the middle and make the other three surround that. That way, when the verb coin pops up, look is already selected; players will thank you for not having to move the mouse every time they're going to select the most heavily used action.

Gilbert · Thu 09/12/2010 08:49:29

I like the edits!

One problem I see is that, the highlighted look icon is not that much different in contrast with the non-highlighted one. I'll suggest adding something inside the looking glass (for example a letter 'A') to make it more interesting.

This is a quick paint-over to show what I mean:

Ryan Timothy B · Thu 09/12/2010 09:21:14

Quote from: Khris on Thu 09/12/2010 08:13:41
On a more technical aspect of the GUI, I'd suggest to move the look button to the middle and make the other three surround that.

Interesting idea. I like it.

I like the A in the magnifying lens too.

Sughly · Thu 09/12/2010 10:25:22

@Gilbet: Ah yea, I'm diggin the A in the magnifying glass too. I realised there wasn't much of a difference but was worried about doing too much to it. That letter though might just be subtle enough.

@Technorat: Haha, banana in a house! Man it really does... haha! Ah well, I'll try something. I'm not happy with that one anyways, needs a makeover I think and sticks out as a black sheep amongst the others.

@Khris: Thanks! Yeah I had thought about a similar arrangement, but I didn't want to seem like I was forcing that option all the time either, so I opted for a 'one short click = look action' scenario. Maybe that's not enough though? I'm not sure any more! Haha, thanks for the suggestion though.

Thanks all for the feedback! Much appreciated

Ali · Thu 09/12/2010 11:23:27

I like the drawings (and your art style in general), though they have a strangely hieroglyphic quality which is not immediately decipherable.

I would suggest bolder lines, because a quick glance at the verb coin doesn't really show up the difference between each button. And I don't think the player should have to scrutinise the GUI too much when they start playing.

Quote from: Ryan Timothy on Thu 09/12/2010 09:21:14
Quote from: Khris on Thu 09/12/2010 08:13:41
On a more technical aspect of the GUI, I'd suggest to move the look button to the middle and make the other three surround that.
Interesting idea. I like it.

I'm not sure about this, you wouldn't want a button to appear under the mouse when opening a verb coin, in case you changed your mind about clicking.

Sughly · Thu 09/12/2010 12:22:53

Quote from: Ali on Thu 09/12/2010 11:23:27
I like the drawings (and your art style in general), though they have a strangely hieroglyphic quality which is not immediately decipherable.

I would suggest bolder lines, because a quick glance at the verb coin doesn't really show up the difference between each button. And I don't think the player should have to scrutinise the GUI too much when they start playing.

Yeah that's a fair point. I think this more or less hits the nail on the head as to why it doesn't really sit well with me yet. I'll have to try that, along with some other suggestions tomorrow, and I'll be sure to put something new up here too. Thanks Ali!

tzachs · Thu 09/12/2010 12:32:40

It's much clearer now than it was before (and I also really dig the style).

The telekinesis now stands out to me as a little less clear than the others.
How about switching it with a drawing of a brain?

Khris · Thu 09/12/2010 12:45:52

Quote from: Ali on Thu 09/12/2010 11:23:27
I'm not sure about this, you wouldn't want a button to appear under the mouse when opening a verb coin, in case you changed your mind about clicking.

But all you need to do is move the mouse outside the verb coin in that case. And how often is this going to happen compared to how often the player is going to look at something?

Quote from: Sughly on Thu 09/12/2010 10:25:22Thanks! Yeah I had thought about a similar arrangement, but I didn't want to seem like I was forcing that option all the time either, so I opted for a 'one short click = look action' scenario. Maybe that's not enough though? I'm not sure any more! Haha, thanks for the suggestion though.

In that case, why not remove look from the verb coin?

Monsieur OUXX · Thu 09/12/2010 13:06:13

Quote from: Khris on Thu 09/12/2010 12:45:52
Quote from: Ali on Thu 09/12/2010 11:23:27
I'm not sure about this, you wouldn't want a button to appear under the mouse when opening a verb coin, in case you changed your mind about clicking.
But all you need to do is move the mouse outside the verb coin in that case. And how often is this going to happen compared to how often the player is going to look at something?

Quote from: Sughly on Thu 09/12/2010 10:25:22Thanks! Yeah I had thought about a similar arrangement, but I didn't want to seem like I was forcing that option all the time either, so I opted for a 'one short click = look action' scenario. Maybe that's not enough though? I'm not sure any more! Haha, thanks for the suggestion though.
In that case, why not remove look from the verb coin?

Haha, I completely disagree with Khris on both points.

2 Golden rules of UI :
1/ The user must be able to change his mind quickly (instead of having to go through a workaround to cancel an action. Namely: "move the mouse outside of the verbcoin"). Also, the UI must not encourage "actions done by mistake". For both reasons, I support the choice "no button under the mouse when the verbcoin appears".
2/ An UI must reflect the choice of the user. Therefore, if the user wants to "look at", it must feel like he's clicked on the "look at" action. That action must be consistent (visually) with all other actions. Therefore, even if "look at" is the action placed just under the mouse when the verbcoin appears (as some sort of shortcut), it must still not be removed completely. It must not become some sort of "ghost" action, inconsistent with the others.

=======

Having said that:

Note that in the case of the look at "shortcut" devised above, rule #2 contradicts rule #1. I'd say it can be tolerated to place the "look at" button just under the mouse where the verbcoin appears, as "look at" is a pretty neutral action (so it's not too serious if he selects it by mistake)

=======

Having said all that: Khris, your signature makes me want to marry you, so let's forget all that and let's go grab a pint together.