Webeden Blog Web Design Web Design Essentials: Constraints

Web Design Essentials: Constraints

1 Reply

Web Design

When designing a website you have to consider the end user. Constraints can be defined as the practice of limiting the users actions on a website.

Limiting the users actions on a website increase the usability of the interface be reducing the likelihood of them encountering an error.

There are two types of Constraints. Physical Constraints decrease the responsiveness of control which prevents any undesired actions. Psychological Constraints will guide the user on a subconscious level making your website more intuitive.

Physical Constraints

These are physical objects, be that actual or virtual,  that restrict the user’s actions on the site. There are three different types of Physical Constraints; Paths, Axes and Barriers.

Paths constrain the user in a linear fashion. This is usually displayed with a visual groove or channel. The uses of Paths are best implemented when you want to allow users to vary the value of something in small increments. For example, volume controls on music player where there is no way to misuse the control.

Axes allow users to vary things in a rotary motion. This has great benefits as it allows users to vary things infinitely yet able to occupy a small space. An example of this would be a rotation tool on a image manipulation program, where the user can rotate an object through 360 degrees based on a axis guiding your movement.

Barriers stop, slow down or redirect a users actions. Barriers prevent actions which would hinder the user from successfully completing a task. A prime example of this would be a pop-up box which would say “are you sure you want to perform this action?” which are often found on e-commerce sites where the user is committing to payment.

Psychological Constraints

These are constraints which control the way the user perceives their environment. There are three methods of implementing psychological constraints; symbols, conventions, and mapping.

Symbols can be in the form of text, icons and/or sounds. Symbols are great way to sort, clarify and warn users about certain actions. An example of this in effect would be the sound a PC makes when an entry is invalid or incomplete. It warns the user that additional actions are necessary to complete a task.

Conventions limit the users actions requiring them to use past learnt customs and exercises. An example of this would be a red button placed next to a green button. You do not need to think too much to realise the implications of using one button over the other.

Mappings effect the users understanding of the relationship between elements of a particular design. For example, a number of radio buttons placed next to a list of choices implicates a relationship between the two.  Mappings are useful in demonstrating the possible actions of the user based on prominence, position and appearance of the controls.

Using Constraints

Limiting the user in what they can do may seem backward at first. However you will soon realise by limiting what users can do you can concentrate on  perfecting the actions which they can do. By understanding and implementing constraints when designing and building your website will help users navigate and use your website with minimal errors, thus creating a more satisfactory user experience.

What forms of constraints do you find most effective when building your Webeden sites? Do you even factor this in when building your sites? Let us know by commenting below.


  • http://www.mailenable.com/outlook-collaboration.asp PeterSullivan

    Symbols, Conventions and Mapping.
    Most of the website are concentrating on the Symbols becuase admin get freedom to show his website in a proper format.