UI sweetness

[BlackMamba]

Hi everyone, I was thinking of starting a discussion around the best ways to present a CCG game, in terms of user interface. I'm currently thinking a bit about the general flow of my application and I'd like to see if you guys have anything in particular you'd recommend. Giving examples from other apps would be great. It can come from the many MTG games that exist, but I'm also interested in how other CCG games solve this (this is where I'm not very familiar with the ecosystem). The question is open and applies as much to in-game UI as to deck editors or library browsers or whatever.

Any jewels of UI design? Any "little big detail" that completely changes the experience? Some starting points:

Is it important to be able to navigate to/from the deck editor while in the game lobby (think network multiplayer)? While the game is in progress? What's the best way to present a deck in the editor? What's the best way to display your hand? the library/graveyard? How to represent combat efficiently? Is it important that windows be "dockable" (i.e. the user can change the layout)?

I'm guessing it's important to leave out as much space as possible to the "table" (where the cards are) but I can think of a lot of other "widgets" that can take up space (the "hand", the chatbox, the console, score, player info, current phase, card info). Is there an app that really manage to do a great job at presenting all those efficiently? Talking about the "card info" panel, is the usual "hover a card to see the info" a good paradigm? What about "right click a card and it fills the whole screen so you can see its details"?

Thank you for your suggestions.

[Formedras]

From my (what? Two to three weeks?) experience, I'll try to give as many of my opinions as possible.

To Deck Editor from Lobby/Game: Assuming it's a matchmaking lobby, it's probably better not, and if you do, I think it's best to drop out of the lobby if you do move to the deck editor. Don't really think it's a good thing to be challenged while you're fiddling with your deck. As for from the game itself, forget it. A player should be focused on their game. Period.

Deck in the editor? I'd say as a text list, a ListBox, if you will. Allow representation of the card as a card if it's clicked on or hovered over, but definitely some sort of list. Also of note: Quantities and sorting. I think giving quantities for multiple cards instead of giving each instance multiple entries is a good idea, but either way the cards in the deck need to be sorted or sortable, by ID or Name, and possibly other methods.

As for the hand/library/graveyard, I think DotP nailed it. Set your hand at the bottom, piling them if necessary, and the library/graveyard to the side if it's possible. Make sure to provide the amount of cards in the library, and possibly that of the yard as well.

Efficient combat? Avoid the Yu-Gi-Oh!/GBA approach of isolating the attacker and defender and placing them on opposite sides of the screen. It's efficient, yes, but I personally think it ugly. I prefer the Low-settings DotP method. As a last resort, I'd say popup text on a neutral area of the battlefield. EDIT: You know what? That popup text is a worse idea than the YGO one.

Allowing the user to change the layout: Just say no. It's a horrible idea, and I'm sorry I ever tried to implement it in my own game. It increases the required screen size, the items are likely to overlap each other, etc. If anyone has a way it could actually work, I'm all ears.

Space on the battlefield is very important, if you're using a variable-force card game like Magic or WoW. But on a fixed-force game like YGO or Cardmaster Conflict, where the entire field is only five creatures and five effect cards (that applies to both games, for those not acquainted with CMC), it's only important that the battlefield fits as many cards as need be visible.

Choosing which method of displaying a full card depends on the visual layout of the game itself. DotP/PC's Wheel Up for seeing a card's effects is great, while the MouseOver on CMC to show the card in its own special area on the left I like enough to adopt in my game. There is no single right answer, but there are obviously wrong answers. But filling the screen for a single card must be done in a way that it doesn't screw the user out of chances to use Instants; at the same time, you can't be perpetually pausing the game either.

[Arch]

Here's an interesting concept: http://www.dontclick.it/

And on a totally different note; I like being able to control my applications with the keyboard. For most applications (that are designed that way) it's a lot faster and lot more exact than with the mouse.

As for actual design/layout I'm fond of the "hide useless things" pattern. I don't need to see the graveyard all the time and I don't need to see the card-info all the time. I could easily envision a board where only the table and cards are represented and other things pop up as needed.
Say that the opponents life is in the top right corner for instance. If he or she is dealt damage the life total pops up and indicates that it has changed. Such an invisible panel could perhaps be made visible again if you move the mouse to the top right corner.
This could also apply to your more specific starter questions. How to display the hand? Start with the minimum (card name) and see if that is enough. Depending on who the player is it may be. If it's not; add something, like the cost and re-evaluate.

Other than that I would say that programmers are generally not the right people to ask for UI advice. It's an entire field on it's own and some spend just as much time trying to master it. I have on occation had the opportunity to work with such people and things generally turn out a lot better with some proper expertise.

[BlackMamba]

Here are some of my ramblings on the matter:

http://moxdev.wordpress.com/2011/03/20/user-interface-deck-editor/
http://moxdev.wordpress.com/2011/03/22/user-interface-in-game/

[Incantus]

Hi BlackMamba,

I've also been inspired by the purported redesign of MTGO that was floating around a year ago, and have been playing around with Incantus's UI to incorporate some of those ideas (see the progression in this thread - viewtopic.php?f=23&t=4136).

One problem I faced was where to put a chat interface. I like the wireframe you mocked up (it's basically what i did) - although currently i have a dialog/prompt box where you put the chat. Also, how can the user browse through cards in non play/hand zones (like the graveyard or library - especially when some abilities want you to select multiple objects from another zone - see the last post in that thread for my current implementation). Another issue I'm grappling with is how to select mana from the mana pool when you have more than currently needed for a mana cost.

One aspect not captured by your wireframes that i think is really important (something Apple gets really well) is using animation to subtly let the user know what's going on. You can't see it in my screenshots, but I'll try and put up a video soon of interaction in Incantus. Anyway, I'd be interested in throwing around ideas if you want to chat sometime.

[BlackMamba]

Woah I didn't know that Incantus had such a nice UI revamp! Good job!

Why not let the user click on the mana symbols to "pay" (and have an auto-pay option when there is no ambiguity)?

I was also thinking about a pop-up for navigating hidden zones.

Are your cards really all generated dynamically? That's pretty nice. Where can I find more info on this? Is it possible to dynamically download the pictures necessary to render all the cards? Right now, I download the whole card pictures from magiccards.info. I like that I don't have to ship pictures and yet have users automatically d/l them.

I also like the visual difference between spell & ability on the stack.

[Incantus]

Woah I didn't know that Incantus had such a nice UI revamp! Good job!

Thanks, it's been a fun work in progress. I can't take any credit for the actual UI (except for the zone browser) since it's basically a copy from the demo of the new MTGO UI.

Why not let the user click on the mana symbols to "pay" (and have an auto-pay option when there is no ambiguity)?

That's the approach I'm leaning toward (it already does auto-pay). However, I'm not sure of the best UI approach for indicating which mana you've selected, and permitting a way of deselecting mana in case you misclick (short of aborting the spell/ability and casting/playing it again).

Are your cards really all generated dynamically? That's pretty nice. Where can I find more info on this? Is it possible to dynamically download the pictures necessary to render all the cards? Right now, I download the whole card pictures from magiccards.info. I like that I don't have to ship pictures and yet have users automatically d/l them.

The initial cards are downloaded on demand from Wizard's site (they have a simple url for every card that exists just using its name). I wanted to used magiccards.info but I couldn't find a simple name based url for the card (and I didn't want to incorporate set/number information into the card format - but that's a future possibility). Currently the compositing engine is only utilized for generating the card when you zoom it up from the battlefield and for the cards/abilities that go on the stack. I used basic color frames from DotP that were processed to work with NMCG, composite any overlays for color blending based on manacost (or current colors of the card), and then render the P/T box if necessary, mana symbols and draw all the text (which is dynamically generated from the current game relevant characteristics). The art for this is about 3 Mb, and the compositing is done in OpenGL on your graphics card using framebuffer objects. Currently the card art is scaled up from the initial card image that is downloaded (which is why it looks a bit blurry in the screenshots in this thread), but unless you were looking carefully or had a comparison shot it's difficult to notice. For example, compare this generated card with the one from magiccards.info:




As you can see, I need to improve the ordering of the typeline so it says Artifact Creature instead of Creature Artifact. Also, some other minor things are off, like the layout of the text box, the mana symbol positioning/sizes, etc, but unless you had a reference image it would be hard to tell (also the image isn't as blurry in the game - for some reason tinypic is rescaling my uploads).

I also like the visual difference between spell & ability on the stack.

This again came from the MTGO demo. http://www.mananation.com/magic-online-prototype/
Unfortunately no originality on my part, just quick implementation (although my UI is actually functional )

[BlackMamba]

Alright, so if I understand correctly, you download the card image for the small in-game version and for the art when compositing. Do you distribute the frame/symbol art and the copyrighted font? Do you directly use HQCG (in php) (you ship it)? Or have you only taken the source images and re-created the compositing algorithms?

[Incantus]

Yep, that's correct. Although as of now the new UI hasn't been released so I haven't needed to distribute any of the art files. I implemented the compositing algorithm myself (I did a quick first pass when I was playing around with a web based card creator - http://www.incantus.net/creator, so the only thing I use is the frames from the HQ card generator.

[Incantus]

Hey BlackMama,

Have you seen the recent updates on the new MTGO UI:

http://www.wizards.com/Magic/Magazine/Article.aspx?x=mtg/daily/other/03242011e

Seems they dropped some of their earlier layout, although they kept the ability to maximize the play area and the general layout.

[BlackMamba]

Thanks for the link!

It's nice to see that Wizards is sticking to WPF. I like the smart panels that compress nicely when shrinked.