7

I am making a menu for an indie game and I'm not quite satisfied with my results. The menu itself needs two text fields (one to enter your username and the other for your password) and two buttons. (“log in” and “register”) I also need to have a button which brings up the credits and a button that brings up the settings screen.

Currently, the title is centered at the top of the screen. Below the title is a box which contains the username and password fields. Below that box are the “log in” and “register” buttons. Here lies the problem, I can't figure out where to put the other buttons. (Credits and settings) Should I just put them in the upper right-hand corner? Or should I make them more prominent? Or should I just completely re-arrange the current layout?

Current design: Menu Screenshot

Just as a side note, the current (interim) theme is a bit off. It's in a web 2.0 style, but the MMO is supposed to be adventurous so I wanted the background to remind someone of an old map. Incorporating this theme idea in your answer will greatly help.

Thanks.

Improve this question
5
  • I'm a little confused. If I'm already registered in this game, and I want to change my settings, I have to go back to a login splash screen? I could see having a Main Menu with Play, Instructions, Save, Log Out, and Settings (for example), but this looks like the screen you see BEFORE you start playing. Once I've logged in, this screen should go away. And if I'm not logged in, how does the game know who I am to access my settings so they can be changed and saved? what am I missing here?
    – Lauren-Clear-Monica-Ipsum
    Commented Feb 18, 2011 at 13:41
  • It needs a different font. The current one makes it look retro... unless you want it to be like that.
    – JFW
    Commented Feb 18, 2011 at 14:50
  • @Lauren Ipsum - Oops! I forgot to say that when you log in, it brings you straight to the game world. The interface when your in the game world provides a tab for changing game settings. But I don't want to make users wait until they log in to change settings that aren't effected by being logged in or not. (settings such as sound volume) @JFW - Yeah, you're right. The current font does look really bad. Do you have any suggestions for a good font to use?
    – clankercrusher
    Commented Feb 18, 2011 at 16:17
  • Got it. But if you don't register, you can't play, right? so no matter what settings you want to adjust, you must be logged in to use them. And how would you know if you want to change the volume if you haven't played before? I think LDC's answer below solves the problem. You're trying to make this screen do too much.
    – Lauren-Clear-Monica-Ipsum
    Commented Feb 18, 2011 at 17:52
  • 1
    Well, it's not really the font that's bad. Perhaps looking into a bit of UI design or websites that offer UI inspiration could help. The black background is a bit unsettling though. Perhaps a background with gradation or textures could help.
    – JFW
    Commented Feb 20, 2011 at 12:07

4 Answers 4

Reset to default
2

I would create a different hierarchy - one for the login and one for registration. You could probably do something like:

Login:
 Username
Password

Need a login? Register:(goes to new page)

Once a user has logged in you can give them a launch page like:

Welcome, Your name here.
Button for settings -- Button for Credits

That way, you're only presenting them with one choice at a time - Do I have a login (in which case I should probably log in) or do I have to register (in which case I'll automatically be taken to a place where the only information for me to enter is the desired login and password).

If you try to present too much information at the same time you'll invariably end up with frustrated users ("Every time I go to log in I accidentally put my login info in the wrong box" or "it's too complicated to register - I'll just go play Bejeweled").

You should design your interface as if it were going to be used by a deaf, vision-impaired grandmother with no inherent knowledge of WIMP conventions. That kind of interface can still be used by computer-savvy users, but over complicated interfaces will turn less experienced users away.

A good example of this is the Amazon page - they'll throw hundreds of choices at you but when it comes time to supply your login and password they switch to a very simple "put your name here, put your password here, click here if you can't find the post-it note you wrote your password on" page.
Also, sorry this wasn't more graphics-intensive; I have a big project going in Photoshop / Illustrator right now and didn't want to create yet another window. :-P

Improve this answer
3
  • Thanks for the advice! I'll try to remember to keep it simple. I'm still confused about the first part of your post. Right now, the register button brings you to a page that asks you to agree to the terms of service and if you do agree, it bring you to a page which asks for your registration info. Are you saying that users might be confused because they think that the login button will log them in using the data in the fields or the register button will register them with the data in the fields?
    – clankercrusher
    Commented Feb 18, 2011 at 16:21
  • Right - what's this data for? It looks like you could use the data in your example for either, which I don't believe is your intent. Make it impossible for them to accidentally enter data into the wrong fields by splitting them out into two completely different areas.
    – lawndartcatcher
    Commented Feb 18, 2011 at 16:28
  • 1
    I design for firefighters. It comes naturally.
    – lawndartcatcher
    Commented Feb 18, 2011 at 18:45
1

First of all use some light eye soothing color coz black with fast green not working... remove any effect from login text if you given.and make your MAIN text bit shine its kinda dull.. its look good in center.

hope u"ll get some good result:)

Improve this answer
2
  • So I should make the background more soothing and strategically color the menu elements to attract the eye to key points of interest? The area is green when you are connected, red when there was a connection error, orange when it is sending a connection request and blue when it sent a connection request and is waiting for a response. Typically you only see it as red, orange or green. Should I change this color coding system to a single red light off to the side instead of a hug area?
    – clankercrusher
    Commented Feb 18, 2011 at 16:24
  • yes ..and have some eye on web 2.0 tutorials the color combos style and all sure u"ll get something nice.see design depends on look and everyone have there own view and own style.dont get confuse :) u can do better just give some time and think
    – Jack
    Commented Feb 19, 2011 at 4:44
1

You mention the game is a MMO adventure? What exactly is the theme of the game? I'm getting a sci-fi vibe from it to be honest. The menu is very -- heavy. I would suggest toning it down, putting emphasis and what needs to have emphasis. I just did a quick reskin: enter image description here

I think if you have a non static background (that is NOT distracting) it will help create a sense of depth and will make your stuff pop-out more. (For the sake of time, I just made it go back and forth)

I grouped the login button more with the actual input boxes, and made the register seem more detached. In the beginning, yes, most people will need to register. But registering is a one-time thing.

Also, I took away all the green, and compressed it into a simple circle that may change color. I changed the font to be more scripty to give it all a more old-world feel. (Again, I'm not 100% sure what you're going for)

Hopefully this gives you some ideas. I really like lawndartcatcher's ideas, he's got some great input.

Slightly Off-topic: Just as an additional fun thing, if you go with an old paper background (like the one shown) if you want to stress the adventure aspect, maybe have some subtle dotted lines show up, like someone is walking around, and maybe it leads to an 'X' like a treasure? Just thought'd be cute.

Improve this answer
2
  • 1
    +1 for the effort into an answer! but i think the visual hierarchy could still be stronger
    – Hemi
    Commented Feb 21, 2011 at 21:06
  • Oh yeah, I agree. But the colors and what not could be stronger too :]. For layout and what not I would really suggest lawndartcatcher's answer.
    – Hanna
    Commented Feb 21, 2011 at 21:36
0

I once had to design a very similar thing for a Ye Olde Worlde MMO, I came up with this:

enter image description here

Not great, but might push you in the right direction :)

Improve this answer
2
  • That's not anything to sneeze at! I really like the design of those slots. Thanks for the idea!
    – clankercrusher
    Commented Feb 18, 2011 at 16:21
  • Glad you liked it :) Hope it helps generate some ideas for you :)
    – Kyle
    Commented Feb 18, 2011 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.