Monday, December 8, 2008

Magic User Interfaces

I am a pretty decent programmer but coding user interfaces (UI) is just hard, very hard. That is the reason that MTG Forge looks like it does, although I still love the mini card pictures, it really improves the look. UI design is more of an art than a science and it is very hard to write a UI that is easy to use. Videogames are interesting because they are essentially one big fancy UI. A bad UI kills a videogame but a good UI can save one.

The easiest way to write a UI is to copy one, back in the day Microsoft copied Apple's UI. I can copy from Magic Online, Shandalar, Incantus, Firemox and Wagic. Wagic's UI looks great even though it is very small, about 1/4 of my monitor screen. Shandalar has a simple yet very effective UI. I can easily read the card names and stats. Incantus is just great and everything is easy to see. Magic Online has many good things going for it, but my favorite is still probably Shandalar because it is just so easy to use. Personally I think Firemox does a lot of great stuff, they have a ton of cards, but their UI is a little confusing.

One of the problems when writing a UI for Magic is that you probably can't generate the whole card picture. In Magic Online, if an ability is added to the card, that text is shown in the card picture. In MTG Forge I just show two card pictures, the top one is a generic, text only version and the lower one is the card picture itself. Incantus shows the card picture and just adds a few stats to the bottom like damage.

I continually think about MTG Forge's UI and after I get version 2 more done, I plan to work on the UI. Many of the above programs have a little pictures depicting all of the phases and many people have commented that MTG Forge's needs something like that because the phases jump too quickly.

p.s.
User interfaces are occasionally called a GUI, which stands for a graphical user interface. UI (you-ee) and GUI (goo-ey) are both standard abbreviations that IT people use.

p.s.s.
One book about UI design said something like this, "If your user spends 1 minute using your UI, it will take you 1 hour to code. If you user spends 1 hour using your UI, it will take you one week." And personally I think spending only 1 week is optimistic.

5 comments:

Forge said...

To be more complete, I probably should have posted screenshots of Incantus, Wagic, Firemox, and Shandalar, but...I didn't.

DCelso said...

I would opt for the shandalar GUI.

Anonymous said...

Creating a GUI is especially hard to code in java. Try using Microsoft Visual Studio and getting yourself an interface can really be fun! I think the platform argument is beside the point. Because people that love playing games on their computers will always have windows on a partition.

Forge said...

As I've said before, the optional solution is to draw everything on the screen using sprites like a real videogame. The GUI for MTG Forge is just regular gui components made to look like a videogame, which is crufty to say the least.

crufty - anything that is found under your couch or has 20% dust covering it

MageKing17 said...

We don't just tack damage on anymore. When you zoom in, you see the card image on the left, and our "infobox" on the right. The card image is completely unchanged (although Incantus has some far-fetched ideas about creating the card image on-the-fly with new abilities and whatnot, sort of like a built-in Magic Set Editor, but that's not going to happen for a while), and the infobox lists current name, colors, types (and supertypes and subtypes), abilities (with oracle text, and including abilities added by (for example) Power of Fire), counters, power and toughness (as modified by various abilities and effects), and lastly damage, which is still being present but on the bottom-left corner of the infobox now instead of on the card image itself.

The infobox is a cool thing to have, in my opinion, although I'm starting to wish (more and more) that we *did* generate the card on-the-fly, because when you have copy effects and color-changing stuff going on, so that a card that was originally (and the card reflects this) a green creature can become a blue artifact, the only way to tell what the card actually is is to right-click-zoom to see its colors and types.