Design principles in context

- [Instructor] The Universal Principles of Design book arranges principles alphabetically, which makes it good for browsing and reference. However, I tend to group design principles into related families. Here are the four major families that I think are useful with some of the most important principles in each family. We've been working in the visual system family up to now, and I have a bit more to tell you about gestalt principles. Then we'll move on to some of the other families. For now, let's go back to that horribly designed page of sports equipment, and see if we can use design principles to improve it.

For the first step, what if we made the size of the balls different, with rough correspondence to how big they really are? This version is noticeably easier to use when trying to pick out a particular ball. Baseballs and tennis balls are small, so the eye can zero in on them and ignore the larger balls. This is another gestalt principle. It's called, gestalt similarity. The visual system assumes that things of a common size and shape are probably related.

To see it in action, focus for a moment on soccer balls. See how your visual system naturally picks them out. They have a consistent size and shape, which the visual system uses to see them as a group. But we've got even more ways to use design principles to make this page better. We saw earlier that proximity causes unconscious grouping, so, bringing all the items of a type together would be better. We can group by color, too. That's another gestalt similarity principle.

Let's put that together, and see what we get. Now we have background color grouping balls of a given type. We have the shape of the ball and the size of the ball, as we did before, to give visual cues, and balls of the same type are mostly close to one another. Here's the original versus the end result. Even to the untutored eye, the one in the lower right is way easier to use, but now you have a much better idea of why it's easier to use. You've just learned four important gestalt principles, by the way, gestalt similarity by size, shape, and color, and gestalt proximity.

Let's go on and look at some principles that are more related to cognitive effort by the user.