Placing Controls

Walden Systems Geeks Corner Tutorial Placing Control Rutherford NJ New Jersey NYC New York City North Bergen COunty

One of the most efficient ways to get better at design fast is through learning short rules of thumb that come up in a wide variety of situations. one of the most useful is the laws of locality. These are three ideas that explain where in our UI we should put certain controls. Why should we put a certain control somewhere? The simple answer is because that's where your users expect it to be.

The first rule is to put controls where it affects change. If you've ever wondering where you should put a control, most of the time, the answer is where it affects change. This applies both to more concrete objects in our interface as well as conceptual groupings of functionality. Sign out and Switch users aren't records in a Profile database but they're conceptually related, and therefore, the actions are placed near a representation of the thing that unites them all.


If a control affects change across an entire area, put it above that area. If a control acts on a larger area of elements, like a list of email threads, put it above that area. Think Mark all as read, Select all messages, or refresh inbox to see if new messages have arrived. It doesn't make any sense to put those actions on an individual message. One of the most important facets of the second law of locality is that it’s recursive: areas can be nested in each other.

The farther a control is from where it affects change, the more it should stand out. A reason for this arises in the mobile world where we use thumbs and we have place a control where the thumb can easily reach. In this case, if the control has to be placed further away from the action, make it stand out so it gives the user visual cues.

Determining where to place controls are difficult but using these three simple rules of thumbs can make the user experience more enjoyable. Placing controls where it affects the action is a no brainer since that is where the user's attention is already at. Placing controls that affect a wide area on top also makes when we consider that people have a tendency to scan down. Finally, if controls can't be placed near the action because we are all thumbs, making the control stand out will give the user a visual cue.