GUI, or Graphic User Interface, allows the use of icons etc which interact with the user, making information easier to interpret as well as making navigation easier. Nearly every domestic computer is interacted with through a GUI today.
WIMP
WIMP systems derive from GUI, each letter standing for:
- Window – Runs self contained program
- Icon – Shortcut containing an action the PC can preform
- Menu – Text/Icon based, selects and executes programs or tasks
- Pointer – eg. A mouse cursor, used for navigation
The History
1960’s – GUI began to appear when Douglas Engelbart’s Augmentation of Human Intellect project developed the oN-Line System (NLS) which incorporated a multiple windows and a mouse driven cursor.
1973 – In this year Douglas Engelbart and Alan Kay developed the Xerox Alto at the Xerox PARC, the first computer GUI.
1983 – Apple introduced the first commercially available computer with a GUI, the Lisa computer.
1985 – Windows 1.0 was released.
The GUI System
The Balance of UI and UX
UX refers to how enjoyable UI interactions are. UI refers to the methods and interfaces a player would use to interact with your game.
Examples of UI
An example of a bad UI would be WoW (World of Warcraft) when you progress further into the game:
The overlays are cluttered and in excess so much you can barely see what is happening in the actual game. The displays are informative, but maybe too informative and show an overload of information which could easily get confusing.
A good UI would be Dead Space 3:
As it is shown on the image above, the information is kept to a minimum, and the HUD (Heads Up Display) is very subtly showing all of the useful information at that time. For example, the long blue bar following the character’s spine shows the players’ health, and the hologram next to the weapon shows the current ammunition. This is clutter free and is a very nice and comfortable experience for the player.
My GUI
As I am developing a mobile game, my GUI won’t require as much information, and therefore will only have to display one thing: Lives. For this I am only going to show hp or lives in the top left/right corner of the screen.
