User Interface Design

Designing a good user interface (UI) is difficult. The overall goal of the UI is that it is easy to use. Unfortunately defining easy to use is very difficult. One guy’s coffee is another man’s latte, i.e. people have different ideas about what is easy to use.

The UI also needs to be functional. A basic UI for Magic should let the user click on a card, target a player, and view all graveyards. This is my no means a complete list. More possible operations include selecting a color, selecting which type of mana a land should produce, choosing phases stops, and various prompts like “Do you want to pay 2 life?”.

The UI for Magic is easy in the sense that not much is going on, some people would call that boring :) A card game’s UI tends to be very simple compared with 3D shooters and build-conquer games like Starcraft. In my UI the user can click on a card, a player, or an icon. Clicking on an icon lets you select a mana color or view your graveyard. Obviously clicking on a card produces different effects, like if you clicked on a land or a creature. The UI doesn’t do any processing when the mouse is clicked but just passes the information onto another part of the program. Currently all mouse clicks are processed by the Input class which uses the State Pattern.

I’m designing a UI using Python and PyGame, and yes it will be a lot better than the current one. I was trying to decide what are the most common types of prompts that are needed during a Magic game. Well, tutor effects like Demonic Tutor are fairly common so we need to let the user look at a large number of cards and then select one. Technically tutors allow you not to select any card, so sometimes choosing a card is optional. I won’t bore you with any more details, but my UI will initially support the 6 types of prompts below.

A good UI is totally separate from the rest of the project, which makes updating either the UI or the rest of the project easier. The more dependences that a piece of code has, the harder it is to update without breaking something else. Dependencies are necessary but you should try to minimize them.

Types of Prompts – all prompts also will display a message
1. Just show the user an informative message and an OK button, “You play first”
2. Message with Yes and No buttons, “Do you want to play first?”
3. Reveal one card, OK button
4. Show multiple cards – no selection, the user just looks, OK button
5. Show multiple cards – the user must choose one card, OK button
6. Show multiple cards – the user may optionally choose a card, OK and Cancel button

p.s.
User interfaces take hours to design and minutes to criticize. Separation is good from a design point of view, but how many videogames have more than one UI?