I'm working on a card game right now and one of the biggest issues I'm having in the design of the play mat for the minimum resolution 1280x720. I wanted to at least support this resolution for laptops, and smaller screens.

The basic design is a play area like:

[x] = card spot

[H] = card spot for hand

--

          [x][x][x]

          [x][x][x]

          --------

          [x][x][x]

          [x][x][x]

[H][H][H][H][H][H][H]

(Chat is on the right side, and on the left is player info, deck amounts, ect...)

There are some other icons, and stuff but this is a basic example. I'm finding with the height of 720 the area doesn't give enough space, and the width of 1280 doesn't allow room for the on screen chat box.

Each card spot, including hand size is at 110x150 for the card itself, and when the mouse if over there is a "increased" preview. I'm considering using smaller icons for the mid play area. I've also rotated the play area, but again, no room for chat box, or other information.

Does anyone have any input? Or should I just make really small versions of the cards on the play mat, maybe half the size, the cards still provide 100% previews on mouse over, but the issue is that you cannot really read anything off the cards at first glance, but I cannot scale down the left info side, and the right chat box side.

Unless I change the design of the play mat I'm essentially forced to take the working higher res version, and just scale it down with the camera to view it at a smaller ratio. Any ideas working with such tight spaces? Am I forced to just render out the smaller ratio with the mouse over zoom preview.

I could save about 30% off the height by slanting the card spots like this as seen in the Yu Gi Oh card game:

I guess you're saying there is a problem with crowding on your screen? That there isn't enough room to display everything you want to display? Is that it? You are on the right track by enlarging a card on mouse-over, but another thing you can do is overlap the cards (rather than display the entire card as it lies on the table, let the cards overlap so only the top of the underneath card is visible - or even just the upper left corner). And another solution is to let chat overlay the game table (instead of setting aside a large space for chat, just let the words "float" in the air between the player and the game table).  You could help us help you better by showing us a wireframe of your plan (rather than ASCII diagram).

12 hours ago, Rutin said:

I could save about 30% off the height by slanting the card spots like this as seen in the Yu Gi Oh card game:

This is how card games work on most hand held devices; it works.

For the chat why not allow a slide menu. That the player can pull in and out when chatting?

Or the part where the card details are can be used for both. You can't chat and read a card at the same time.

I suggest simplifying drastically the small version of the card images: no text, larger illustration and larger title. Words, icons and numbers should be as large, or almost as large, as their counterparts in the full-size card, which is presumably readable enough, or omitted completely. As important as card text might be, players can easily read it by hovering the mouse on a card miniature.

Privileging the elements (name and picture) that make cards recognizable reduces player frustration, reduces mistakes, and allows familiarity with cards to gradually reduce lookups of the full card text.

Thank you everyone for the feed back. I've sat down with my team and we've come to the conclusion to keep the play area in a smaller size with zoom overs, and utilizing easy to read icons to indicate what would normally be seen in the higher resolution versions, and the left side of the GUI for player details. The middle play area of 3x2 on both sides has to be static due to card rules having effects based on what is adjacent to them, and I need them spaced out a bit for info to be displayed.

There will be a hot key for popping up the "Enter Text" chat field, as well as an icon on the right side which will light up and slide out from right to left to show the chat log, and if the user doesn't need to slide out the chat box, there will be a "Toast" like message showing what the user typed out so you can still have a conversation on the fly without sliding the chat in and out. Either way, everything will be hot keyed for easy access and less clicking.

I know when I need to port this over to phones I'll be forced to put in a camera pan, and auto zoom feature.

I think I'm safe with leaving the smallest version at the 1280x720 res. I doubt anyone is running anything smaller than this on a laptop or desktop.