Shop Menu work

When I design my menu's I tend to design them more from an overview standpoint rather than a documentation of all the features menus have. For example the Shop menu is designed in a basic way showing some example layout, but more importantly it lists or shows through some bad sketch by me what essential information I need to display.

What does that mean  'essential information' ?

On this menu I needed a title and a back button, very essential to know where you are, also it is essential to have a way to easily navigate back from whence you came. Then I get to the more optional stuff and the reason for this screen. It is a Shop.. so I need to tell the player how much money they have, and also what they can buy. However that is mostly where my design stopped.

Lets fast forward a bit in time now to the present day, or I should say the last few days. I have been coding the shop now for several days and I got the essentials setup pretty darned quickly, and I am now working through the details of the screen. It's sort of funny, but setting up this menu went very quickly, yet finishing off all the details is taking probably 4 times longer. Now I could have simply left this screen in it's initial working state.. yet, that doesn't sit too well with me. I know some people stop when something is working, but there needs for some screens to be made more friendly, or extra information that could be displayed with a few more minutes of development time.

So lets get to some pictures of what I am talking about.

The image above shows how I laid out all the essential elements. It also shows some of where I have been spending more time, polishing and making the screen more friendly. You can see the listing column has colored text in it. Those are the package names and they are now colored to indicate that 'Green' you already own, 'Red' you cannot afford and finally 'Black means you can afford this item and you do not own it. You may also notice that the 'BUY' button is 'Red' at this time. That is because I have an package selected that I cannot buy. The Red BUY button is also not selectable.

In this image you can see a different story. I have selected a package I can afford and do not own. So the BUY button is now Black (normal state) indicating I could buy this package.

My final image of this post is after I have pressed the BUY button. As you can see I low light the previous screen and overlay a new requester on top. Now I don't tend to like asking for confirmation of stuff in games all over the place. However in some circumstances it is very important. Times when people are about to spend their hard earned Gold is one of those times. So I ask for confirmation, making sure to tell them again what they are about to buy.

 

Now there is a possibility that we could put too much information on these screens, and it can be a tough balancing act to get the information that a player might want and not put on extra distracting information. One thing you might be thinking is that this menu is still not done, and you would be correct. You may have noticed in fact that when you have an un-buyable item selected the Cost text STILL says 'Buy', when it should not say that. I will get to these details as I can, but I do like to make this kind of interface as natural seeming as possible.

 

as you can see, I spend a lot more time fiddling and finishing a screens elements than I did with it's initial layout/design.

 

Caveat:

I don;t let not having professional graphics stop me from coding. After all I would never get anything done, lol. Still these are my test and work graphics and when I get the real art treatment I will come back and hopefully the screen will look a lot nicer and more balanced.

 

Laters

Da voodoochief