Design fundamentals: constraints

Default avatar.
February 05, 2013
Design fundamentals: constraints.

ThumbnailThe concept of constraints in design can be defined as the practice of limiting user actions on a system.

Constraints limit the actions that can be performed by the user, thus increasing the usability of the design and reducing the likelihood of operator error.

There are two models of constraint: physical and psychological. Physical constraints decrease the sensitivity of controls and prevent or slow undesired actions and psychological constraints will aid in the intelligibility of your design and make it more intuitive.

Let’s take a closer look at the finer points.

Physical constraints

The first model, physical constraint, refers to the ability to constrain the user’s actions using a physical object, be it actual or virtual. There are three types of physical constraints: paths, axes, & barriers.

Paths restrict user action to linear or curvilinear motion. This is accomplished most frequently by the use of grooves or channels. Paths are particularly useful in controls where the control variable range is relatively small. A familiar example would be the volume bar on the iTunes interface. As you can see, there is no way to misuse this module.

Axes direct user action into rotary motion. This has several benefits, most notably enabling the control to be of expansive or infinite in length, yet able to exist in a small space. An example of this is the rotate tool within the reflect dialogue box in Illustrator CS6. Here you are given the option to rotate the object 360 degrees with an axis-based control guiding your movement.

Barriers absorb or redirect user actions. By doing this, barriers are able to slow, deflect, or cease user actions that are not conducive to a successful experience. A sound example of creating a barrier is the common “are you sure you want to perform this action?” dialogue box that can be found on many interfaces, particularly e-commerce interfaces.

Psychological constraints

The second model, psychological constraint, refers to the technique of limiting possible user actions by leveraging the way people perceive their environment. There are three methods of executing psychological restraints: symbols, conventions, and mapping.

Symbols communicate through text, icons, and sounds. Symbols are useful for categorizing, clarifying, and cautioning users about certain actions. A good example of symbols being used for constraint in design would be the error sound that a PC makes when an entry is incomplete or invalid. This serves as a warning to the user that additional actions are necessary.

Conventions constrain user action by calling upon learned customs and exercises. For example, picture a red button next to a green one. One need not think very hard to understand the implication of using one vs. the other.

Mappings influence user behavior by creating a perceived relationship between elements of a particular design. For example, a set of radio buttons placed closely to a list of choices implies the relationship between the two elements. Mappings are useful for illustrating possible actions for the user based on prominence, position, and appearance of the controls.

Using constraints

Whilst constraining user behaviour instead of enabling it may initially seem counter-intuitive, by limiting what actions users can undertake, we can focus on perfecting those limited options. Understanding and implementing constraints will aid in usability and help your users engage your design with minimal error, thus creating a more effective overall experience.

What forms of constraint are most effective? How carefully do you plan constraints in your UI design? Let us know in the comments.

Featured image/thumbnail, contraint image via Shutterstock.

Mike Redaelli

Mike designs high-grade graphics for entrepreneurs & developers. He is also a freelance writer, which should be rather obvious at this point. Connect with him at www.mikeredaelli.com.

Read Next

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…

Turning Rejection into Fuel: Your Guide to Creative Resilience

Rejection sucks. And for some reason, it’s always unexpected, which makes it feel like an ambush. Being creative is…

20 Best New Websites, August 2024

The overarching theme in this selection is simplicity. Minimalism never really goes out of fashion and with good…

Free AI-Website Builder, Scene, Helps With the Worst Part of Site Design

AI website design platform, Scene As we’ve been hearing constantly for the last couple of years, AI will soon replace…