Laws of Grouping

Once figure-ground discrimination has been satisfied when designing an icon or symbol the graphic designer has to take into consideration grouping. If an icon is located in an area where it is not relevant, its message becomes meaningless. Some of the factors that should be taken into consideration when designing or placing an icon on-screen include:

Proximity and similarity. It our natural reaction to conclude that certain things are related when they are within close distance of one another. The law of proximity suggests “that we tend to group figures that are closer together” while the law of similarity suggests “that we perceive similar figures as belonging together”(Kimball and Hawkins, 2008, p. 44). To put this in context with our research of icons and symbols on-screen let us look at the top of our internet browser. We know that all of the icons on the top of the toolbar are related because they are in close proximity to one another and they are all similar because they are related to internet tasks. Therefore it is important to understand that proximity and similarity play a role in on-screen design in order to convey to the user that they are related within that specific context.

Continuation. Let us look at the top of the internet browser we are currently using once again. We instantly know that all of the icons listed in the toolbar are related even if we don’t know their exact function at first glance. The law of continuation suggests “that we will assume a connection between figures that are lined up, even if we don’t have any direct evidence that they are connected” (Kimball and Hawkins, 2008, p. 44). When things are lined up it usually suggest some type of relation, i.e. the icons are the top of your browser are all related to internet functions. Continuation allows the eye to follow easily along to allow the user to distinguish what is related and what is not.

Common region. If we continue to use the example of toolbar at the top of the screen we will see that all the icons are in the same area. The Home button, as well as the Refresh button are in the same line and your Favorites may be saved on the next line below. We do not see icons sporadically thrown all over the page because designers of the internet browsers probably take into consideration the law of common region, which suggests “that people see objects sharing a common space as belonging together” (Kimball and Hawkins, 2008, p. 45). It only makes sense to place the internet icons that are related together, i.e., the Home button and Refresh button on one line and the listing of your Favorites on the next rather than all over the screen.

Source: Kimball, M.A., & Hawkins, A.R. (2008). Document Design: A Guide for Technical Communicators. Boston, MA: Bedford/St. Martin’s .