common region
The principle of common region states that elements will be perceived as grouped if they are located within a common region of space, i.e., if they lie within a connected, homogeneously colored, or textured region or within an enclosing contour (Palmer, 1992). As shown in figure 2, using a vertical line with a heavier thickness divides the interface into two main spaces.
Figure 2: Common region used to separate two main regions
Dissecting the left region further, we can see in figure 3 that horizontal lines divide this space into additional common regions.
Figure 3: Showing common regions created with horizontal lines
Figure 4 shows the use of hue to create alternating vertical columns of common regions and conversely, the horizontal lines in the data table create a common region for each row to tie the data together from left to right.
Figure 4: Using hue to create common regions
One area that could be improved upon, as shown in figure 5, is the use of superfluous lines to create regions of no real value and serve to separate the table from the functionality that controls it.
Figure 5: Showing superfluous lines that create unnecessary regions
proximity
The principle of proximity states that shapes, objects, or design elements located in close proximity tend to be perceived as a group (O'Connor, 2013). Figure 6 shows how white space can promote proximity and organize buttons that share related functionality.
Figure 6: White space used to create an adjacent common region
Likewise, figure 7 shows the proximity of table filtering categories establishes a relationship that these elements share a commonality in some form, in this case, their impact on table data. Nuancing this area even further, the proximity of the tabs shown in figure 8 creates a relationship that this area is a "family" and will affect the same area.
Figure 7 & 8: Proximity of filters and tabs create a common relationship
An area that creates ambiguity caused by proximity is shown in figure 9. The proximity of the table title and the “meta data” dropdown has compressed the feedback text causing a noisy and unnecessary relationship between the elements. Adding white space between these elements would help to create the proper, independent, relationship.
Figure 9: Showing compression of screen elements
similarity
Similarity states that we tend to group shapes, objects, or design elements that share some level of similarity in terms of color, tone, texture, shape, orientation, or size (O'Connor, 2013). Figure 10 shows that even though each button is a different length, their similarity in shape reinforces their relationship. Interestingly, a subset within similarity referred to as “anomaly” allows objects within groupings to stand out. As the arrows indicate, hue is used to create diversity within the group, alerting the user that something within is different.
Figure 10: Showing similarity and anomaly
similarity
Something that might be improved upon is the similarity between page title and table title. As shown in figure 11, treating the table title so it didn’t share the same hue, size, and relative proximity of the page title will help lessen the chance of creating a false relationship.
Figure 11: Similarity of text could cause a false grouping
alignment
Alignment creates a construct that indicates a direct relationship. "It can be expected that element alignment along a particular orientation will increase the odds of a global grouping along this orientation" (Claessens & Wagemans, 2005, p. 1450). Due to the amount of content within data tables, proper alignment creates continuation and constructs a simple path for the eye to follow. In figure 12 we can see how the alignment of text, aided by common region, creates a relational construct down each column. Additionally, at the top of the table, the horizontal alignment and center justifications of column headings sets them apart from the rest of the table, effectively squaring off this area to be interpreted as a separate area.
Figure 12: Alignment of column text
Figure 13 shows an alternate view of the table where data-specific dots are connected, creating continuation from point to point even when impeded by other lines.
Figure 13: Alternate view showing graph
One alignment that could be adjusted is shown in figure 14. The alternating pattern caused by the misaligned objects adds noise (distractors) and might serve to break the relationship as these being related to a common task.
Figure 14: Showing misaligned filter fields