UI Mechanics for Grid-Based Game

I'm currently working out how to implement the core gameplay mechanics of one of the games I'm working on, and it involves the user picking an object from an assortment of objects and placing each one on a grid. What I'm trying to work out is the best way to go about this in a way that balances grid size with playability. Ideally, I'd like an expansive grid, but I don't want to make each tile too small nor too difficult to navigate for the player, so I'd like to gather some opinions on a variety of possible solutions. I've come up with a few of my own here, but feel free to make your own suggestions:

Method 1a
14x9 Grid consisting of 32x32 tiles. The stats (score and such) and tools panels are initially hidden with a small thumbnail icon on the bottom right that can be tapped to slide out the semi-transparent stats and tools panels, and will automatically close again when the player picks a tool. Placement will be simple drag and drop with an indicator of some sort (halo, arrows, or magnifying glass placed wherever there is free space) to show the user where the tool will be placed. Grid snap will be employed so there is no ambiguity which tile a tool will be dropped on.
Pros: Simple to navigate, no clutter or distractions to get in the player's way while playing.
Cons: Smallish grid, extra step to pick tools.

Method 1b
12x8 Grid consisting of 32x32 tiles. The stats (score and such) and tools panels always open. Placement will be simple drag and drop with an indicator of some sort (halo, arrows, or magnifying glass placed wherever there is free space) to show the user where the tool will be placed. Grid snap will be employed so there is no ambiguity which tile a tool will be dropped on.
Pros: Simple to navigate, all information available at a glance, all tools available with a single tap.
Cons: Smaller grid.

Method 2a
19x13 grid consisting of 24x24 tiles. Same slide-out panels and placement as 1a.
Pros: Larger grid, no clutter or distractions to get in the player's way while playing.
Cons: Harder to navigate with smaller targets for placement; extra step to pick tools.

Method 2b
17x11 grid consisting of 24x24 tiles. The stats (score and such) and tools panels always open.
Pros: Stats panel always available at a glance, tools available with a single tap.
Cons: Not quite as large a grid; harder to navigate with smaller targets for placement.

Method 3a
28x18 grid consisting of 32x32 tiles. This method hides the panel as with 1a and 2a, but presents a zoomed out overview of the board, which to the user will appear as 16x16 tiles when zoomed out. When the user picks a tool the board will zoom in to full 32x32 size and allow the user to scroll around the screen to place their tool. Pinch zoom gestures will be supported at all times.
Pros: Expansive grid.
Cons: Takes longer to navigate for placement; extra step to pick tools.

Method 3b
24x16 grid consisting of 32x32 tiles. Identical to 3a but slightly smaller and with panels visible at all times.
Pros: Stats panel always available at a glance, tools available with a single tap.
Cons: Slightly smaller grid.

I should point out that grid size matters here, as the grid will become increasingly filled with objects as levels progress, so the larger the grid, the more extended the gameplay can become. Furthermore the game will have different modes of play, one of which will be timed, although this doesn't necessarily matter much as the timers can always be adjusted to suit the method of play. Taking all of this into consideration, you can see that there is a balance that must be struck here between playability, ease of use, intuitiveness, and longevity. I'm interested in hearing opinions on the above possibilities, or any suggestions any of you might have as to how you think it should best be handled. I'll consider just about anything, as the simpler and more intuitive I can make mechanics of play, the better.

I'll just ask a few questions to start with (which I might also partly provide an opinion/answer for):

1. Is the gameplay fast paced? If so, perhaps having the "tools & stats" on screen all the time is important.

2. Do you predict users having trouble placing tools on the correct grid square? I would expect so on the smaller square sizes. If you show the panel on the bottom of the screen, you can place the tool slightly above the user's touch location so that they can see where they are placing it.

3. What sort of gamer would be playing this & what sort of experience do you want them to have? Will they want a quick pick-up-and-play experience mostly like a match 3or a more long-term challenge like a chess game?

Maybe you can provide the player with the options you described. Give them some flexibility and multiple game modes.

So spake the Juice to the field.

As a gamer, I would go for a mix: Zooming grid like in 3. Make the item panel transparent and keep it small, but not too small for people with thick fingers (if there's too many items to keep it small, add two next/previous buttons to scroll through multiple lists). Once the user touches an item, make it float under the touch position (and maybe have a magnifying glass thing or something like that so people can see WHERE under their finger the item is... or place the item some pixels away from the touch) and make the item panel fade away.
Don't snap the item to the grid (I guess many people will think this looks cheap), but highlight the tile which the item will be placed in (make it glow or give it a red outline or whatever ).
Oh, and also let a small red box with an X appear in one corner of the screen, moving the item there will interrupt the placing procedure (so you have a way out when you accidently touch an item).
While placing with one finger, dragging with another finger should be possible!

Once the item is placed, show the item panel again.


That's my complicated, weird idea, but I think something like that would feel pretty easy to use and would still allow a large grid.

It will mostly be a casual experience, though more on that below.

I had considered offset placement, but the problem is that it would have to dance around above, below, or to either side of the player's finger depending on where on the screen it is, as they will be able to place near any given border. I could have a permanent toolbar at the top and make the tool offset above the finger I suppose, but I'm considering whether that's necessary; it's a tradeoff between the convenience of an always-present tool panel with offset placement and grid size.

It's not a match 3, but it will largely be strategy and puzzle-based, mostly casual, with state saving and relatively short levels, so pick-up-and-play is highly doable here.

There will indeed be different game modes: Timed, casual, and puzzle. All three modes will have 100 levels each; timed and casual will have randomly generated levels, so it's theoretically possible for unlimited levels, but I want to provide a goal-oriented sense of gameplay with a definite endgame yet retain replayability, so I'm capping those at 100 levels. The puzzle levels will be predefined with the possibility of additional packs via DLC.

Timed mode can be adjusted to factor in the time it takes to access the tools panel if it's hidden away, so there's flexibility here for either mode. I'm mostly just concerned about the overall experience; I want the mechanics and UI to get in the way as little as possible so the player can focus on playing the game, but at the same time I also want to be able to provide as much diversity in play as possible, which is provided by larger grid sizes.

I'm planning on having two areas for information/accessibility; the right side to show things like level, score, plus buttons for menu/pause and such, plus a slide-out toolbar either along the bottom or the top, wherever it makes most sense.

I like the idea of bringing the tool tray back out when the user is finished placing a tool; that eliminates a step and presumes the most likely action the user will take next. The menus/tools will be semi-transparent so as not to completely bock the view. The offset positioning as I mentioned above is iffy but doable under certain circumstances.

With regard to snapping, I was thinking of doing it like this: The item floats smoothly under the exact position of your finger, but the tile halo or arrows or whatever indicator I go with will snap to the nearest grid tile as an indicator of where the tool will drop when the lift their finger. That gives the user some clear and precise visual feedback so there's no need for exact positioning despite the tool moving smoothly under the finger. At least, that's what I had in mind, but as I said, everything is fluid right now, so I'm open to whatever works best to get the player working and not fighting with the UI.

With regard to placement, I had considered (in a zoomed scenario) the ability to move the tool if tapping and dragging on the piece itself, and scrolling around the level when tapping and dragging on anything that is not a tool. If a tool is being dragged near a border the grid will scroll in that direction automatically. I figured this would be the easiest way to handle piece placement and level navigation when zoomed.

---

Last edited by Mindfield; 02-05-2010 at 01:13 PM.

Okay, so I had an idea. How about making a full screen 14x9 grid with 32x32 tiles and 16x16 border (required for game reasons) and using two-finger-tap to bring up the menu and toolbar? That way I don't need any icons cluttering up the screen and can devote as much screen real estate to the game as possible. The toolbar would slide up from the bottom and the stats/menu bar would slide down from the top. From a practicality standpoint it gives me a somewhat small (but workable) grid with a totally clean UI that's easily navigable without zooming or scrolling required.

The bars would be translucent and when would hide when a tool is chosen and dragged so the player can place said tool immediately.

I think this might be the best solution, what do you all think? It keeps a clean UI that stays out of your way as much as possible and allows the entire screen to be used for the game and makes bringing up the menu transparent and simple.