★ TouchArcade needs your help. Click here to support us on Patreon.

User Interface Design

01-02-2010, 03:52 AM
Joined: Apr 2009
Posts: 68
User Interface Design

Hello guys, I am the developer for an up and coming TD/RPG hybrid game called Blighted Lands TD. The reason for my post is to see what you guys think about interface design.

I personally like a simple UI that works. My buddy is of the mind that the interface needs to be ornate like what you see in most games.

My question is if you seen an interface such as the ones in the screenies, would this put you off from buying? Or is it 'good enough'. Discuss.

(It's of course not complete, but should give an idea of the general framework. Simple.)
Attached Thumbnails
Click image for larger version

Name:	Main Menu.png
Views:	22
Size:	223.1 KB
ID:	12961   Click image for larger version

Name:	Battle.png
Views:	22
Size:	281.1 KB
ID:	12962   Click image for larger version

Name:	CharacterScreen.png
Views:	19
Size:	142.1 KB
ID:	12963  

01-02-2010, 08:10 AM
Joined: May 2009
Location: St. Gallen, Switzerland
Posts: 461
I love seeing an awesome UI, that's one of the most important points for me. I simply wouldn't buy the game because of the perspective and the oldschool RPG look :/

01-02-2010, 08:15 AM
Joined: Mar 2009
Location: Oslo, Norway
Posts: 731
Not sure if you're asking for feedback on the UI or the graphics in general. As a developer myself my worry would regarding your interface would be that some of those buttons seem awfully small for an iPhone interface.

Generally, I find that "bigger is better" when it comes to on-screen targets for the iDevices. Have you actually tried/prototyped your interface on the device yet? I suggest doing this a lot during the early stages to avoid finding that the interface needs major rework when you approach the end of development.

01-02-2010, 09:04 AM
It seems like kind of a nightmare. Sorry to be blunt, but you are asking for feedback, so...

1) There are 17 icons on screen in the third screenshot, including a few locked ones. I don't have any idea what a single one of them does. That is a big warning sign, and would probably dissuade me from buying the game.

2) All icons are exactly the same size, which is bad. The ones that are part of the static UI (along the bottom) should be different than the ones in the menu system (in the middle)

3) The fonts are ugly. Not only that, but the logotype exactly matches the UI fonts in the menu system. Another big mistake. Using a consistent typeface isn't necessarily a bad thing (although the typeface you're using now is terrible), but the styling should still be significantly different between the logo and the UI.

4) The flat baby blue and light green backgrounds on UI elements don't really go with anything. Something subtly textured and styled would be much better, if you're really dead-set on going with this UI.

5) No matter what UI style you decide to go with, you should put a lot of effort into making sure it feels good. Animations, drop shadows, multiple button states (pressed, clicked) - that type of thing goes a long way. Don't half-ass this part - it is going to be your players' first exposure to the game, and you should get them started in the right frame of mind.

AfterPad.com - MFi Gaming News | Game List | Controllers | Twitter
01-02-2010, 10:26 AM
Joined: Dec 2009
Posts: 1,791
im with km on this.

01-02-2010, 01:19 PM
Joined: Apr 2009
Posts: 68
Hey guys thanks for the feedback. I really appreciate it. I can take constructive criticism well, so I will take this info & try to make some improvements. I will 'ornate it up' & post some screenies in a few days, to see what everyone thinks. Again I really appreciate the feedback.

01-02-2010, 02:15 PM
I don't know if you are asking about the design in terms of the layout, or in terms of the art itself.

If talking about the art -- yes, it would put me off. I don't think it needs to be ornate, but the layout here definitely needs work. Two things are off putting to me -- the color scheme and the font. I don't really like the thick black borders either. I think this is fine for placeholder art, but needs a visual upgrade to be interesting from a player standpoint.

The layout itself is fine I guess, though I do agree the one shot with ~15-20 buttons is a little busy. One suggestion here since the buttons at the bottom probably aren't needed is to employ a UI design called a 'lightbox', where you have some sort of dark transparent mask over the UI except over the active part -- in this case, the skill/inventory/status screen. This brings the attention to the UI elements that are immediately relevant.

I don't know if these are mock-ups or if you've implemented this already. If the former, great. If not, try mocking up the UI in Photoshop (or your favorite graphics app) first so that you can iterate faster.

EDIT: I realized I pretty much wrote exactly what kmacleod wrote.

Last edited by lazypeon; 01-02-2010 at 02:19 PM.
01-02-2010, 02:32 PM
Joined: Dec 2008
Posts: 6,509
Hey, JGary (you are the one from GS, right? Just checking...)! Welcome to TA. Anyways, not gonna repeat what the others said, just gonna point out a couple things that caught my eye.

That little T-thing down on the middle there. It's kinda awkward. Is it for scoring and/or wave number? Maybe putting it on a top corner would look better? And in the third screenshot, you might wanna slightly differentiate the static HUD from the selection menu.
01-02-2010, 02:49 PM
Joined: Apr 2009
Posts: 68
Thanks guys for the additional feedback. It shows what I know about graphics design. I figured keeping it looking almost identical to the battle scenes would be easiest for the player. However, I see everyone's point.

I am currently reworking the ENTIRE UI scheme before going any further. I have to nail this down. I am jotting down a few ideas & playing around with them in PS.

The reason for all the icons (the 8 in a row) was to click on one & it would show the spellbook for that particular class of spells. (Fire, Earth, Water, Lightning). The treasure chest was Achievements, Book was Options, & of course the funny looking dude was the Hero.

I think what I'm going to do is have just the Hero screen showing. There will be a spellbook icon, that will slide a new 'scene' into place. This way it hopefully won't feel cluttered.

1 more quick question. In the game itself you basically play the bad guy. Since I'm redesigning everything from scratch I thought about going with a gray/black interface (although with heavy textures, to make it look a lot better), to give it a more evil feel overall. I was wondering what opinions may be on this. Should I stick to lighter/brighter colors, or would it be ok with going with the darker interface. Thanks for the help guys.

01-02-2010, 02:57 PM
I think a dark UI is fine. I don't think it matters too much for dark vs. light, to be honest. Be careful with textures. I've seen a lot of indie RPGs that get carried away. Nothing looks cheesier than a simple 'rock' texture (poorly) tiled across the whole UI. In addition to black and gray, red (hell, fire) or green (sickly, undead) are good highlight colors for an 'evil' interface, IMO.

Also, please reevaluate the font. I think Stencil is a bad look for this kind of game. I don't know about the legality/licensing issues with using these fonts, but I always like to browse 1001 free fonts and dafont. If you do pick a font from here, don't go with a font based off a well-known font, or it looks cheesy. Whatever you do, make sure it's readable, especially the small text. If you can't tell, have someone else tell you if it's readable that hasn't seen your game before.

Last edited by lazypeon; 01-02-2010 at 03:00 PM.