Gestalt principles hindered my sudoku performance

Last week, while waiting for friends, I picked up a community newspaper in hopes of finding a puzzle to help me pass the time. I found a sudoku puzzle.

A sudoku puzzle consists of nine 3×3 squares, sprinkled with a few starter numbers. The player must fill in all the blanks by referring to the numbers that are already filled. A number can only occur once in each row of 9, each column of 9, and each 3×3 square.

I regularly complete difficult sudoku puzzles, but this easy one—more starter numbers makes the puzzle easier—was taking much longer than I expected.

I soon realised that my slow performance was due to a design decision by the graphic artist!

In the original puzzle, shown at left, the graphic designer used  shading  for all the starter numbers. In my reformatted version, on the right, I used shading to separate the 3×3 squares. Both puzzles also use thicker lines to separate the 3×3 squares.

gestalt-sudoku-puzzle

The shading for starter numbers, on the left, is unfortunate because it interferes with the player’s perception of the nine 3×3 squares. Instead, players perceive groups of numbers (in diagonals, in sets of two, and sets of five).

I assume the designer’s intention was to help identify the starter numbers. Regardless of the designer’s intention, the human brain processes the shading just as it processes all visual information: according to rules that cognitive psychologists call gestalt principles. A sudoku player’s brain—any human brain—will first perceive the shaded boxes as groups or sets.

gestalt-sudoku-circled

In sudoku, the grouping on the left is actually meaningless—and counterproductive. However, since the brain applies gestalt principles rather involuntarily and at a low level, the grouping cannot easily be ignored. The player must make a deliberate cognitive effort to ignore the disruptive visual signal of the original shading. This extra effort slows the player’s time-on-task performance.

You can check your own perception by comparing how readily you see diagonals and groups in both puzzles above. On the left, are you more likely to see two diagonals, two groups of five, and many groups of two? If you are a sudoku player, you’ll recognise that these groupings in the puzzle are irrelevant to the game.

If you like, you can print the puzzles at the top, and give them to different sudoku players. Which puzzle is faster to complete?

Interested in gestalt principles? I’ve blogged about the use of gestalt principles before.

User’s brain vs your UI design

In the context of UI design, I’ve come across numerous references to gestalt principles in the past few years, but not to 2D-design principles. When you design a user interface, you can apply both sets of principles to ensure users “intuitively” figure things out without any mental, or cognitive, effort.

Gestalt principles

There are plenty of websites that list and illustrate gestalt principles, and explain how the brain’s precognitive processing makes assumptions and fills in the blanks. Here are some examples:

Do you see a triangle?Are the 6 circles in one group or two?

Do you see six circles? Do you see any white triangles? There are no circles (just irregular shapes), and there are no triangles drawn on the screen. Your brain completes the triangle’s edges, and your brain closes or completes the circles. This gestalt principle is called the law of closure.

How many groups do you see? One?

Compare the three illustrations—the coloured and the grey ones—above and below. In each illustration, how many groups of circles do you see: one, two, or three? Isn’t it interesting that your brain is so prepared to see groups? This gestalt principle is called the law of similarity. Note how colour changes your perception:

How many groups do you see? Three?

You can see the law of similarity before and after a quick redesign of this web-application’s main screen:

A colour change improves user perception

Before the redesign, the viewer’s brain applies the law of similarity and intuitively sees the five boxes as related. In fact, this is incorrect because the right-most box has a different function from the others. After the low-cost design change—a colour change—to the fifth box, the grouping that users intuitively see matches the functional model.

2D-design principles

I haven’t yet come across a website that explicitly ties the principles of 2D design to UI design. But these principles, which I learned from Marlene Cox-Bishop and the classic Wucious Wong textbook on 2D design, do apply to UI design. Consider these examples:

Does your brain see distance?

When comparing two figures, the brain sees that (1) a raised figure is in the distance, (2) a smaller figure is in the distance, (3) a lighter figure is in the distance, (4) a greyer figure is in the distance, (5) an overlapped figure is in the distance. The last pair (6) combines all of these design principles. You’ve likely seen these principles applied in your operating system:

Perception of distance in a

When you apply the 2D-design principles incorrectly, just as with incorrectly applied gestalt principles, user perceptions will be incorrect.