Principles of UI Design: The 4 Cs

Discussion in 'Planetary Annihilation General Discussion' started by Culverin, October 11, 2013.

  1. Culverin

    Culverin Post Master General

    Messages:
    1,069
    Likes Received:
    582
    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
    Last edited: October 12, 2013
    sigmud2, Geers, stormingkiwi and 4 others like this.
  2. Culverin

    Culverin Post Master General

    Messages:
    1,069
    Likes Received:
    582
    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:
    Command-Hotkey-Text-300x180.jpg

    5e46978152cb2239c6589783e5543.png

    cycle_preview.jpg

    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.
    Last edited: October 11, 2013
  3. Culverin

    Culverin Post Master General

    Messages:
    1,069
    Likes Received:
    582
    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.
      dual screen.jpg
  4. Gorbles

    Gorbles Post Master General

    Messages:
    1,831
    Likes Received:
    1,420
    This is a good thread, more people should be in here.
  5. Culverin

    Culverin Post Master General

    Messages:
    1,069
    Likes Received:
    582
    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.
  6. Culverin

    Culverin Post Master General

    Messages:
    1,069
    Likes Received:
    582
    Oh yeah, this might help you understand The 4 Cs


    masticscum likes this.
  7. Veleiro

    Veleiro Member

    Messages:
    112
    Likes Received:
    6
    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.
    Last edited: November 22, 2013
    mkultr4 likes this.
  8. mkultr4

    mkultr4 Member

    Messages:
    95
    Likes Received:
    4
    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.

Share This Page