Chapter 3. Repetition and Pattern-Breaking

One important visual design principle involves the creation of patterns to move the user’s eyes to important things. And like all good rules, patterns are made to be broken.

Who knew we could learn so much from rubber ducks?!

Human brains have a particular talent for patterns and sequences. Whenever something in nature happens over and over, we will quickly notice. In fact, we don’t just notice, we think about those things differently.

The first image shows five identical rubber ducks in a row. We don’t see five individual ducks though, we see a row of ducks. We treat them as a group or a sequence, and if you live in the Western world, you will probably look at them from left to right because that’s how we read. If that row of ducks were a menu or a list, we would do the same thing. Therefore, you could expect more people to click the options on the left, and fewer people to click the options on the right.

Breaking a Pattern

The second image shows the same five rubber ducks (still lookin’ good, aren’t they?) but this time one of them has gone solo. We’ll call her Beyoncé.

That changes everything. Now we see a row of four (jealous) ducks, and Beyoncé is alone, in the spotlight. She woke up like that! It is hard not to focus on Beyoncé, even though all five ducks are equally majestic creatures.

Now, if that were a menu, the middle option would get ...

Get Designing effective interfaces now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.