Principles of UI Design: The 4 Cs

If you guys haven't noticed already, I am very passionate about UI design and grouping ideas into patterns.

It seems to me that a lot of people are making suggestions. This is a good thing.
I am frequently seeing these:

• Suggestions with no reasoning given.
• Suggestions that with lengthy, convoluted reasoning.

These are bad things. It is leading to poor communication and heated debates.
A thread just got closed today and that makes me really sad


I hope to offer you guys a "yardstick" for UI discussions.
This way, you guys can really distill down your points.

The "4 Cs" in GUI design:

1. Control: Player needs to be able to manipulate his army, how he wants, when he wants.
   
   
2. Conveyance: The player needs to know what to do next based on GUI prompts (mouse over info. Is this what he wants to do?)
   
   
3. Continuity: Similar actions should yield similar results. (CTRL to add/remove select, SHIFT for manipulating unit orders, Mouse Wheel for zoom/scroll).
   
   
4. Context: Player should be able to tell, what is happening in the game simulation, where it is happening, and recognize all the available controls at a glance.

Metrics:
You can measure the success of a GUI if it does not "get in the way".
The least of these, the better:

• # of Clicks (on keyboard and mouse)
• Key combinations requiring multiple fingers (CTRL+1, CTRL+ALT+DEL, CTRL+C, etc...)
• Displacement of the mouse (In X, Y pixels)

This is a scientific approach to the efficiency of UI design.
This is data you can literally measure this in numbers.

Inefficiency of Action = # of Clicks x Key Combos x Displacement of Mouse



The higher the number of actions in order to perform a task, the more intrusive the GUI.
This includes actions required to:

• Assign tasks
• Modify tasks
• Pull information from the game model

Let's start with the Metrics and work our way back.
Why we want the 4Cs is to cut down on "busy work".
A bad UI forces more actions out of the user.


Bad:
The Starcraft UI is a ery good example of a hampered UI.
The player is locked at 1 functional zoom level and the minimap only gives context to the geographic location.
Player needs to scroll, more, look around the screen more, click over the the enemy base, then click back home, then click over to a proxy base.
Extra clicks = fighting the UI


Good:
The SupCom UI is the opposite.
Zooming is smooth, fluid, dual monitors are integrated meaning no busy work is needed to jump around the map to collect info.
Less clicks = UI does not interfere



Minimum Number of Actions:

Take competitive gaming for example:

• Left hand assigns tasks via simple hotkeys clustered around WASD.
• Mouse-hand is almost purely for task location.

Why?
Least number of actions required.


This is regarding mouse movement to assign tasks:






Note how everything is clustered together?

Competitive players to not use the mouse for tasks.
None of these are done with the mouse:

• Clicking on the actions, (Stope, Hold, Patrol)
• Production, (Units, buildings.)

This is because moving the mouse = distance action = time lost.

Let's use break down Strategic Zoom (in Forged Alliance) and measure it against each of the 4 Cs.

• Control
  Regardless of zoom level, the player can select units and issue orders. Even to 2nd monitor.
  
  
• Conveyance
  Regardless of zoom level, the player knows what each unit is. The units have unique icons. Show a "selected" highlight.
  This beats traditional minimaps by a mile where players do not have a strategic icon showing ID for each unit.
  
  
• Continuity
  This is where strategic zoom truly shines.
  A traditional minimap does not have full control. It's set at predefined zoom.
  Your main screen is also at a predefined zoom.
  You have unlimited continuity with a continuous and smooth zoom.
  
  
• Context
  This is the only weakness I see.
  There is no "viewbox" when using 2 windows, only existed in the "minimap" tool.A player loses the context of what map area he is seeing.
  

This is a good thread, more people should be in here.

Thanks mate!

I just saw so many random, unreferenced UI suggestions that were very vague.
I was hoping this actually allows people to help frame their feedback in a more constructive manner.

Oh yeah, this might help you understand The 4 Cs

I'm a designer. I follow a set of principles I made that I'll gladly share:

A good design is:

• Functional. Don't hinder the user. Treat all users equally.
• Minimal. Least amount of design for the maximum effect. More content, less flash.
• Scalable. Larger resolutions, more content. More powerful machines, more rendering.
• Efficient. Whitespace is not. Use space well.
• Extensible. Create for future features. Ability to make user feel at home.

I would like to echo the minimal sentiment of the gentleman above me. I would love to see a minimal and unobtrusive GUI. As a conceptual example:

Original Warcraft III GUI: http://i.imgur.com/punZHpp.jpg

Minimal Warcraft III GUI: http://i.imgur.com/lsjZTFT.jpg

Now, forgive my horrible Photoshop skills but this is just to illustrate the idea. The blackened area delineates all the extra screen space I created.

Basically I am requesting that the GUI should prioritize function over form. More information in less space, to create a larger viewing area for the actual game. The GUI should cater to newer players by displaying everything, and cater to experienced players by allowing the removal of all extraneous information, buttons and GUI elements. Once experienced players know hotkeys they have absolutely no need for Attack/Move/Patrol commands in the GUI or building buttons.