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 ;D).
The pics are (from left to right) idle, 'use', 'look', 'talk to', and 'telekinesis'. Feedback will be greatly appreciated!
(http://img571.imageshack.us/img571/2699/coin.png)(http://img43.imageshack.us/img43/4585/usef.png)(http://img153.imageshack.us/img153/4779/lookn0.png)(http://img269.imageshack.us/img269/6182/talk0.png)(http://img809.imageshack.us/img809/3004/telek.png)
(http://img222.imageshack.us/img222/1237/agsguicritic2.jpg)
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.
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.
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! :P
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!
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.
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!
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.
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 ;D
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...
(http://img571.imageshack.us/img571/2699/coin.png)(http://img43.imageshack.us/img43/4585/usef.png)(http://img153.imageshack.us/img153/4779/lookn0.png)(http://img269.imageshack.us/img269/6182/talk0.png)(http://img809.imageshack.us/img809/3004/telek.png)
Now for the new ones...
(http://img823.imageshack.us/img823/1083/coin2.png)(http://img32.imageshack.us/img32/7493/use2.png)(http://img828.imageshack.us/img828/5981/look2a.png)(http://img834.imageshack.us/img834/5118/talk2.png)(http://img820.imageshack.us/img820/908/telek2.png)
Looking at them now, you guys were spot on with the speech bubble and the magnifying glass.
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:)
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!
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.
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:
(http://i488.photobucket.com/albums/rr249/gilbot/look2aA.png)
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.
@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 :D
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.
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!
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?
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?
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.
These aren't the "2 Golden rules of UI".
The first one doesn't apply to most user interfaces, only to specific parts like e.g. popup menus. With those, every Windows user is long trained to simply move off the mouse to cancel the action.
In contrast, with many interfaces the user doesn't get the chance to change their mind.
The second "rule" only applies to the shortcut scenario Sughly mentioned.
I'd say there's only one rule for UI design, and that's ease of use, i.e. get rid of every unnecessary click or movement. I've played Ghost Pirates recently and they use a verb coin which appears with examine under the mouse. It's very convenient not to have to aim for a button 50% of the time and I recommended to do the same out of the very subjective, personal experience I had when playing this game.
Since I'm a nitpicky bastard when it comes to interfaces and since bad interfaces make me drop otherwise superb games, that should count for something.
I agree that a UI should make it hard for the player to do something they don't want to do, however I fail to see how somebody could hold down a button then let go of it without moving the mouse all the time by accident.
Quote from: Khris on Thu 09/12/2010 13:47:07
These aren't the "2 Golden rules of UI".
I meant "2 of many"
I agree with everything you said.
But in that case we were discussing points of detail of the UI - I've given my opinion on those 2 points, and my reasons :-)
Great to see Anna's Room in action! (well, kinda) I was trying to work out what the bottom button did for a while before reading 'telekinesis' on the text there. I would suggest having two hands with an object floating between them, it would mean making the button wider but i think that would be nice.
Kinda like this, but from the magicians POV:
(http://awonderfulblog.com/wp-content/uploads/2009/10/magician.jpg)
Holy jeeze. Until now I had actually thought the telekinesis icon was a ghost with a big smile. Haha
So it didn't make much sense to me. :P
Haha, first a banana in a house then a host with a smile ;D. Alright, alright, I'm working on something! I like the idea of the hands Chicky... like you say though, would be hard to get into that icon without making it bigger, and since it would be used as often as any other I wouldn't want to preference it in size. We'll see, I'll be toying with it today.
Thanks for the all the feedback guys. I think as far as the whole debate on positioning of 'look' on the coin goes, I'm going to just be leaving things the way they are. I appreciate your suggestions though Khris! I personally kind of like the arrangement and the one-click look thing, so I'll see how people find it come testing.
Once again, thanks everyone for all the feedback!
Quote from: Chicky on Thu 09/12/2010 16:43:28
Great to see Anna's Room in action! (well, kinda) I was trying to work out what the bottom button did for a while before reading 'telekinesis' on the text there. I would suggest having two hands with an object floating between them, it would mean making the button wider but i think that would be nice.
Kinda like this, but from the magicians POV:
(http://awonderfulblog.com/wp-content/uploads/2009/10/magician.jpg)
and without the line of invisible thread which the magician can see :P God bicycle cards look so nice, especailly the tigers series, but I can't find them anywhere in the shops in Aust. Confined to doing my card magic with Australian "Queens slipper." Apparently more durable too, as it is i'm going thru 2 decks a month. but thats off topic.
This game looks great... I can't wait to play this
I like the art and style! It's veeeery nice and remembers me of beloved crazy little Edna! :D
And about the icons: You are going the right direction with the changings. A little brain or something else, like a wand for special abilities would be better than ... ähm ... you really want to know, what I thought this icon is? :-X
First time I saw it and before reading the text or seeing the background with the girls face I asked myself: „Why is there a little bird? :o
Hopefully we will see more of it soon?
Alright, ROUND 3! these changes are a bit more subtle, with telekinesis being the most obvious change. I toyed with Chicky's idea of a floating object, or hands somehow suggesting telekinesis, but I pretty much failed at that. Brain took some playing with, I think it turned out OK. I also added some colour behind each inactive icon (slightly more faded than when active) and made an ever so slightly thicker outline for each based on Ali's suggestion. Here's the last round of pics for comparison:
(http://img823.imageshack.us/img823/1083/coin2.png)(http://img32.imageshack.us/img32/7493/use2.png)(http://img828.imageshack.us/img828/5981/look2a.png)(http://img834.imageshack.us/img834/5118/talk2.png)(http://img820.imageshack.us/img820/908/telek2.png)
And now for the new pics:
(http://img251.imageshack.us/img251/9673/coin3.png)(http://img692.imageshack.us/img692/4517/use3.png)(http://img30.imageshack.us/img30/4287/look3.png)(http://img830.imageshack.us/img830/7463/talk3.png)(http://img819.imageshack.us/img819/7067/telek3.png)
Oh and I did try and play around with something inside the magnifying glass. I don't know, it didn't look quite right to me :(. I might be wrong on this one, but I kind of prefer keeping it simple, it started to confuse the image of the magnifying glass a little bit.
EDIT: looking at them here it seems the colour behind the inactive icons works, but is probably not faded enough. Maybe they stand out a little TOO much for being inactive?
I think that's a real improvement!
Rather than fading the inactive icons, I would consider highlighting the active icons more, possibly introducing another colour. Or a combination of the two.
Ah yep, I see what you're saying Ali. Thanks again! :)
I agree with Ali, I like how you changed the inactive to stand out a bit more- almost suggested the same. I'd definitely go with highlighting the active icons more too.