Why rounded corners afford clicking better than square corners do

Posted by bitbutter on July 27, 2007

Our visual experience of the world can be described in terms of negative space and positive space. Positive space corresponds to the area 'inside' an object's edge. Negative space is the geometry that's left over if we were to cut out the object of interest from a photograph. Generally negative space corresponds to what we would call 'background'.

Graphic interface design uses visual conventions based on our familiarity with physical machine interfaces. The two-dimensional representation of a button is a staple of contemporary GUI design.

GUI designers have various ways of suggesting to a user that a particular group of pixels affords clicking, that they should be read as being a button. Several of these techniques depend on mimicking the look of a real button. In real life, buttons tend to protrude from their casing, they are usually the 'figure' rather than the ground, so several techniques for making pixels look button-like depend on creating the illusion that the top surface of the 'button' is closer to the viewer than its immediately surrounding 'casing' is.

reaktor

One way this can be achieved is by simulating the effect of light falling on the button by creating highlights and shadows. Giving a button rounded corners is another way.

Why should rounded corners suggest greater proximity than sharp ones?

Look at your surroundings as if you were looking at a photograph, closing one eye may help to see things this way. Look at the visual boundaries of the objects you see. The corners that make acute angles along the outer edge of these shapes are almost always rounded to an extent that is visible to the naked eye–even the corners of most machine-made objects are at least slightly rounded.

In your field of view you will also be able to see some very sharp 'corners' but these will almost always belong to the negative space that surrounds overlapping figures, and not to the figures themselves.

scissors

The brain, when experiencing a rectangle with sharp corners, can 'read' the shape as representing a recessed plane or a protruding one. To me it seems that when the rectangle is given rounded corners, the likelihood that it represents a protruding plane is increased because of a subconscious rule of thumb: figures tend not to have sharp corners, but negative spaces often do.

tracktion buttons

The power of this principle is I think demonstrated by examining graphical user interfaces that rely almost entirely on the shape of control elements to suggest their affordances. One example is the digital music application Tracktion. The softened rectangles used in Tracktion are instantly recognisable as buttons (we don't mistake them for 'recessed' input fields for instance) even when the subtle lighting effects are removed.

tracktion 2colour

Trackbacks

Use this link to trackback from your own site.

Comments

Leave a response

Comments