The Gestalt principles of visual perception describe how our brains make sense of what we see. For example, they explain how we associate a photo with the text of a newspaper article or understand a series of words as a sentence on a billboard. These principles originated from the field of Gestalt psychology in the early twentieth century.

In laying out sketches, I try to consider how a viewer will understand what connects with what, the order in which the viewer will read the sketch with their eye, and how colour or formatting link related elements—skim through the back catalogue to see it in action. In creating each sketch, consciously and unconsciously, I use many of the standard Gestalt principles of design.

There are many Gestalt principles and some variations in the names. I chose seven common principles to illustrate:

Proximity
Objects that are close together are perceived as a group

Similarity
Similar objects are perceived as a group

Continuity
Elements on a line or curve are related

Closure
Completing missing parts of images to create a whole

Figure-Ground
Identifying what's in the foreground or background

Symmetry & Order
Perceiving symmetrical or orderly elements as a group

Common Fate
Objects moving together are perceived as part of a group

The Gestalt principles are helpful for information design, user interface design, user experience design, graphic design and just about any design. It is also fascinating to spot how you unconsciously use them when interpreting designs you see. For example, look at the signs in an airport, a menu, or a page of your favourite app and see which principles are in play.

The Interaction Design Foundation has a great article on the Gestalt principles that explains their use in design in more depth. You'll also find many others.

Gestalt principles

Dark patterns are when people design interfaces intending to deceive or trick. Sadly we are all familiar with these. They're everywhere. 

It could be the free trial that unexpectedly led to a subscription or the subscription that was easy to sign up for but had to be canceled by mailing in a letter. Or it could be an outward attempt at giving control over privacy but with options so confusing as to do the opposite. Perhaps you tried to adjust cookie preferences on a news website but could only find a button to 'Accept all' after editing your preferences—grrrr! Tricking people like this into sharing more information than intended has come to be known as Privacy Zuckering.

Remember popups that could only be closed once you found a tiny 'x' that moved around the screen?

I recently wanted to pause a subscription only to be told it would invalidate all the accumulated unused credits I'd paid for (I'm still paying). The Pudding published a great analysis of unsubscribing from online services. At times this may be unintentional—there's naturally less incentive to work on great account closing and unsubscribe experiences than on signing up.

The example in the sketch was a real one I experienced (I wish I'd grabbed a screenshot) from an airline website where the designers buried the option not to buy insurance within the country select list.

And they're not just online. Sneaky casinos employ design in the physical world for their gain, such as removing references to time passing, such as clocks or windows, using mazelike navigation and the continual winning sounds of jingling coins. 

"Dark patterns" was coined by Harry Brignull and documented at the Deceptive patterns site and now a book.

Dark patterns

The isolation effect is our tendency to remember an item that stands out in some way from a set of otherwise similar items—you might easily guess, for example, which name we are more likely to remember from a list of Tom, Terry, Angelica, Theo and Tyler.

When presenting information, the isolation effect is practical if you wish to draw attention to specific items. By standardising the presentation of other items in a list, maybe by muting the colours, making them the same size, or removing features that stand out, you can draw people's attention and improve people's memory of your chosen items.

The isolation effect is standard in web design by using distinctiveness: red notification bubbles on a set of otherwise homogenous apps, a "most popular" plan more prominent than the other options, or a Call-To-Action (CTA) button in a contrasting colour.

The isolation effect is also known as the Von Restorff effect after the German psychiatrist Hedwig von Restorff. See, for example, Hunt, R.R. The subtlety of distinctiveness: What von Restorff really did. Psychonomic Bulletin & Review 2, 105–112 (1995) for a summary of Von Restorff's most cited paper on the effect.

The isolation effect

I've always been fascinated by how a tiny spider can create a web spanning a gap where climbing and dragging a thread across the floor would be impossible, maybe between trees, from a building to a lamppost, or over a stream. How do they do that? Here's a common technique by many orb weaver spiders — known for building orb-shaped, or circular wheel-shaped webs — for bridging the gap and creating the web.

The spider stands on the edge and lets out a long thread. It waits for the breeze to blow the thread away from them. If the thread catches onto something it can form a bridge thread.

Once it catches, the spider may reinforce the thread and then put down other anchors. These then form the frame of the web into which it will add radial threads from the centre.

The spider may then put down an auxiliary thread that provides a non-sticky frame, together with the radial threads, for it to walk on while it lays down the final sticky capture spiral. It's then set to lie in wait.

Some spiders will eat their webs at the end of the night but leave a bridge thread in place — perhaps for you to walk into in the morning — ready to rebuild the next night.

There is a vast diversity of spiders and webs. This is a fairly common example, but even within orb spider webs, there are a ton of different strategies for capturing prey. But perhaps, the next time you spot a bridge thread spanning a seemingly impossible gap this will give you a thought as to how it might have been done.

Here's a common orb spider web as a static sketch

You can watch darwin's bark spider on the BBC creating a web spanning a remarkable 25 metres

A common orb spider web

Happy talk: fluff and often self-congratulatory promotional talk usually intended to be friendly but generally just getting in the way of people trying to get a job done. On the web, and to be honest most places, happy talk must die.

Happy talk must die is a gem from Steve Krug's legendary book on usability Don't Make me Think. Here's an excerpt on happy talk.

Also in Don't make me think: Omit needless words

Happy talk must die

I find myself linking to this article about why your links should never say click here for links on the web that I thought I should just get it down for easy reference. The solution, generally, is to rewrite your sentence. For more about writing for the web, click here. Only joking, check out more tips about writing for the web.

Also see: Omit unnecessary words, use styling instead of colons, cognitive overhead and the best writing is rewriting. 

Rewrite to avoid click here

The time to a target depends on the ratio of distance to the target over it’s size. So clicking on a small target close by might take a similar time to clicking on a large target further away. It’s a simple model and there are a few little games out there to bring it home in practice.

I’m reminded however, of an observation from a mentor of mine, Darrell Mann, that just because people call it a law doesn’t mean you have to treat it like one. The example of Apple’s standard program icons at the base of the screen that expand when you mouse near them, are a simple technique that help to overcome the limitations of Fitt’s law. There are plenty more. Don’t be sucked in to laziness by a name.

Fitts’ Law

A shift in the way we develop for digital devices. The mantra used to be ‘graceful degradation’ - design for what you expect people to use, then let your application gracefully degrade for older browsers, and smaller screens. Generally speaking the richest application, and the first to design for, was on the desktop.

A more recent approach is mobile first. Start with core content, design for the smallest screens and least capable browsers, then progressively enhance the experience onto larger more capable devices, browsers and screens. My intro from Mobile First by Luke Wroblewski.

Progressive enhancement

You can design almost any information with this in mind (even an email for example). Probably not ideal for a novel, but if you’re competing for attention, as most things are, it’s not bad to keep in mind.

Design for a Glance, a Look and a Read

Sam Moreau, User Experience Director at Microsoft. Just one small example.

Had a few questions about this so thought I’d add another simple example. Imagine you want to change your phone number on a service. Rather than display the phone number and have an option in a menu to edit and then a separate edit screen, the phone number itself can be the route to editing. You simply display the current number - clean, no junk. Mousing over it or clicking on it allows you to edit it directly. You remove the need for additional menus, text, instructions, and chrome. The content itself becomes the interface.

The content is the interface

I still find somewhat remarkable the complexity in a simple button on the web. These are just 6 common states that may each have their own appearance and behaviour.

Get my new weekly sketch in your inbox

Category: web design