User Interfaces

Universal design principles are not 'literally' universal, simply so generally employed that they seem universal. In reality they are the side effect of a mix of perceptual and psychological principles as well as a range of artistic conventions.

Elements of Design

All art is composed of these basic elements:

•Line: a point extends to a line, horizontally, vertically, diagonally; lines may be straight, curved, dotted, broken, thick, thin, varied etc.

For example, Minecraft (see the image below) does not have emphasise its lines as design elements, they are a mere side effect of its geometry; however its geometry tends to create an environment made up of layered lines receding to the horizon, a simple, ordered world (that the player can then playfully disrupt).

•Shape: a 2D object created through a closed line with volume. A shape may be geometric (square, circle, oval, triangle) or organic (all others).

Since Minecraft is 3D, the 2D shapes are really more the texture sprites on the cubes, and all of them are squares, evoking retro pixel graphics, and therefore both nostalgia for old games as well as nostalgia for childhood.

•Form: 3D form, either physical (an actual 3D object), virtual (a 3D object in a game), or connoted (shading that suggests that form of an object). A form may be geometric (cube, sphere, cone) or organic (all other, e.g. people, animals).

In Minecraft the squares connote familiar simple structures such as childhood blocks, Lego, and toys. The characters have a cute simplicity that makes them charming, like a Lego figure. These simple shapes are a visible contrast with the innovative constructions people make in the game world.

•Colour: The perceived wavelength of light reflected from an object/screen. Colour is described in terms of hue, value and intensity/saturation, and come in tints, tones and shades.

Despite its retro, blocky shape, Minecraft has a fairly broad palette with subtle colour effects, such as fog and gradients, including ambient occlusion. This arguably conflicts with its retro style. For example early PC games had monochrome screens of green against black, then later 4-colour CGA cyan, magenta white and black, 16-colour CGA, and later 256 colour VGA (see Classic Colour Palettes: Video Games, the Wikipedia List of video game console palettes). However Minecraft still evokes these older games by only combining a few basic colours for each material and using high colour contrast. This implies a smaller palette range than it actually has.

•Texture: The perceived/actual tactile qualities of a surface, i.e. feel, appearance, thickness, stickiness (smooth, rough, silky etc).

Minecraft's crafting system is premised upon the properties of the blocks from which the world is made, so evoking the texture of these is a central part of its aesthetic: its charm is in 2D textures that represent more complex textures, even though the number of pixels on the screen would allow for realistic textures.

•Space: The area around, within or between images, often discussed in terms of positive (occupied by objects) or negative space ('white' space between objects), as well as figure-background (i.e. the depth of an image).

In Minecraft there is a simple distinction between an occupied square (with a material that can be mined) and an empty square (occupied by air), and the horizon is itself a negative space that is crafted by the player. However some materials, like water, create an interstitial space that is both occupied but which can be walked through.

Principles of Design

Design principles help us create and evaluate a specific combination of design elements. The number of principles varies, but many are ‘universal’ in that they draw from commonly shared processes in biology, psychology and sociology:

•Pattern: perceived repetition creates visual interest and emphasis.

In the image below, from Diablo 3, there is consistent use of colour across each player's UI elements, e.g. red for health, which makes it easier to make sense of the UI. Another obvious patterns is that the colour of the terrain mirrors the types of enemies, and in terms of level progression we know that there are usually a series of battles with smaller minions followed by a major battle with a major boss.

•Contrast: reinforces object differentiation.

While Diablo traditionally had a dark palette appropriate for its dark/gothic fantasy, Diablo 3 's early screenshots created concerns among players because it had a visual style informed by World of Warcraft, with stronger and more cartoonish colour contrast. However, those who paid attention realised that the original colour actual did have a broad colour range, it was simply used in such a way that informed its darker mood. Diablo 3's colour contrast was, after testing, desaturated somewhat and ended up being less of an issue, emphasising mood and game elements, with a more realistic nod, although some fans argued there were too many visual effects (see Diablo Art Controversy).

•Emphasis: defines the trajectory of attention.

In the Diablo 3 image below, it's clear that the interface pushes the UI elements to the corners, to de-emphasise them, and the camera follows players as the focus of action. However at the same time the gameplay tries to distract and overwhelm players with swarms and FX so that players may panic and act in a manner against their interests.

•Balance: symmetrical or asymmetrical distribution of elements.

The player UI elements are symmetrically balanced in the vertical and horizontal axis, but each player's UI section is asymmetrical, with more elements on the screen's edge, meaning it intrudes less on the screen. The size of some enemies, such as the one highlighted in yellow below, also often evokes an asymmetry with players, i.e. they may seem more powerful than they are.

•Proportion/Scale: communicates relative size or position.

Physics engines handle the proportion and scale of 3D objects in a scene, although as noted above the different proportions of enemies and PCs creates a scale that is more epic. The small size of the player UIs is simply a side effect of limited screen real-estate - in single player games the UI takes up much more space, relative to the screen.

•Harmony (or ‘unity’): all design elements should cohere.

One thing that often creates harmony across visual design elements in games is 'post-processing', whereby everything on the screen is processed by a particular effect, e.g. by adding a film grain effect, brightening everything and so on. There is a post-processing mod that makes Diablo 3 "look less saturated and blurred" (see DarkD3 shader) which is an implicit criticism that Diablo 3's colour design is not in harmony, i.e. is inconsistent with, Diablo 1 and 2. The fact that Diablo 3 is a 3D game, whereas Diablo 1 and 2 were 2D sprite-based games, is another form of disunity across the franchise.

•Rhythm/Movement: placement can suggest movement.

In Diablo 3, the placement of the multiplayer UI mana globes next to the health bar (which itself ends in a point) suggests a line of movement, or energy, from empty to full across the two, even though technically they are separate. Level layout itself usually allows for player movement, but in the image below the barriers specifically constrain player movement, creating a more claustrophobic choke point. This creates a greater sense of focus, tension and energy in a smaller space, i.e. which creates a sense of energy and urgency, mirrored in the FX spell explosions.