The blur your eyes test is a way to evaluate the big picture and clarity of communication and designs by squinting to blur your eyes. Good designs give you a sense of the structure, even through a blurry lens. Poor designs leave you no wiser.

The blur your eyes test is a practical first screen for evaluating most communication, even if you don't consider yourself a designer. It works because it's simple and tests whether you're making life easy for the reader.

To try it, head to a well-designed web page and squint until your vision is blurred. Can you still get an idea of the page even without seeing the details?

If I blur my eyes, where do I expect the key message to be, and what are the supporting messages? Where do I expect to click if I want to continue? My team probably got sick of me squinting my eyes, asking them to do the same, and reporting that it wasn't apparent to me what to expect.

Because people naturally skim content, making it as easy as possible to understand your message is essential. Clear hierarchy. Obvious next steps. It's also why Happy Talk Must Die and why wireframes and low-fidelity prototyping are helpful.

I spent a little time with Stanford design Professor Larry Leifer. Like all Professors, people constantly inundated him with requests for his time and expertise—I sometimes wonder how talented academics cope. If you were writing to him—or anyone—you could help him and yourself by being clear.

Clear was not just in the message and the words you wrote but also in the structure of your writing. He told me that he felt you should be able to narrow your eyes to blur your vision and still see the basic structure of an email: greeting, intro or context, ask, sign off. Well-structured emails were more likely to get his attention and response because you'd made it easy for him to deal with.

I've applied that tiny snippet of advice thousands of times since when writing emails, Slack messages, product releases, announcements, invitations, page designs, banners, chats and articles. As I reviewed more and more designs, I would use it to check, "Are we making this easy for the reader?"

And yes, I also use it for Sketchplanations. Try blurring your eyes on past sketches and see if you think they pass—I'm sure I don't always manage it. It's also part of why I love the idea sketch format on which I've based so many sketches.

The blur-your-eyes test works to communicate with busy people—and we're all busy people when we're trying to find what we want on the internet.

As a separate lesson, another Stanford Professor, Bernie Roth, also taught me that a short, polite, timely rejection is much more valuable than a delayed, in-depth rejection.

The Blur Your Eyes Test

Why is the save icon in your software a floppy disk that no one has used for over 20 years? And that phone icon looks nothing like your mobile phone when making a call. These are both skeuomorphs.

A skeuomorph is when a new design borrows practical elements from a former design and repurposes them in a functional or ornamental way.

Skeuomorphs are practical because they make new systems more intuitive. Their comfort and familiarity can help bridge old and new ways. For example, some electric cars are designed to look like they have air intake vents like traditional combustion cars.

More poetically, a skeuomorph can offset the loss of physical reality when interacting with our digital devices.

The save icon is a floppy disk from the 1980s and '90s

The shopping cart in an online shopping site

Sliders and knobs, or even connecting wires, are made to look like analogue mixing desks and gear in music software (music software is awash with skeuomorphs)

A link icon represented by a link of a physical chain

Dials and levers or a funnel representing filters

Shadows under boxes on a webpage simulate light falling on a surface to show depth

Grab bars are indications of friction points where you can change the order of a list

I once read that when designing, if you can't think of an icon for your feature in about five seconds, you probably need to write the word, as not everyone will understand it.

Not all digital icons are skeuomorphs: the printer as the print icon and the folded page for a page layout still map to their physical counterparts.

Slot machine levers that change the state of a circuit rather than spin any wheels.

Fake wood grain is used on floors or interiors.

Haptic feedback—a simulated click when pressing on a touchscreen.

Speed camera signs in the UK use a stylised visual of a classic Kodak Brownie camera.

Rivets on jeans are from when fixing denim together required more than just stitching.

Electric cars sometimes include imitation air vents at the front that cool traditional combustion engines.

Car hub caps with spoke designs from early wheels.

Textured wallpaper, such as Anaglypta, echoes leather wall hangings with scored patterns.

There's even a design for an early car with a fake horse head on the front—though the inventor designed it to avoid scaring other horses on the road.

A smartwatch isn't just a watch; it's a computer you wear on your wrist.

The imitation shutter sound of taking a photo on your phone

Simulated engine noise on an electric car

Skeumorphs in Software and User Interfaces

Software and the digital domain are ripe places for spotting skeuomorphs, as they don't have physical characteristics—it's all 1s and 0s that we can't see or interact with.

Apple's early iPhone interfaces were famous for skeuomorphic elements, such as a Contacts app that resembled a contacts book complete with tabs—tabs are also skeuomorphic— and fake leather or paper effects in note apps.

Skeuomorphs, like metaphors in design, are helpful. In a magic box that can do anything—a mobile phone—a visual connection to a physical object with a defined purpose helps immediately tell you what something might be or do.

As the digital world gradually becomes the first interaction for so many uses, skeuomorphs may become less common. But we'll see them around for decades yet.

Skeuomorph is not a recent term. It was coined by archaeologist Henry Colley March by combining the Greek skeuos (σκεῦος) for container or tool and morphe (μορφή) for shape.

Skeuomorphs have been used in art and architecture since ancient times. For example, they are decorative features of stone buildings that mimic structural elements from older wooden ones, such as protruding rafters. Ancient pottery sometimes includes decorative rope patterns on the surface.

The BBC has a lovely radio piece on Skeuomorphs, Design, and Modern Craft with novelist Will Self. The piece discusses their subtler side and some great examples, some of which I've included here. In the same episode, they also mention the zombie walk with faces lit by the glowing screen from a phone.

"The content is the interface"—Sam Moreau

Skeuomorph

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

A ghost grid is a guide for organising thoughts, information and sketches, that doesn't compete with content.

Content itself can also be the ghost grid to highlight changes and help draw comparisons — as when you might sketch options for extending a house or designing a garden.

A grid is useful for structure and creation but needs to fade back from content or disappear when no longer needed. Like freeing data from its data prison, a ghost grid emphasises content and information without non-data-ink taking attention.

I learned the term ghost grid from Edward Tufte's Seeing with Fresh Eyes: Meaning, Space, Data, Truth.

I rarely buy other notebooks for work than a dot grid, preferably in a funky colour. Some of my favourites: Leuchtterm dot grid hardcover, Moleskine dot grid softcover, Moo soft cover dotted journals

Ghost grid

The data prison is the default table where the bars of the cells crowd out your data with non-data-ink and lock your data into a prison.

When data is locked into cells, their relationships with other data are harder to see, and the reader has to work harder to learn from your table.

When making a table of data, consider if, by adjusting spacing and alignment, you can make the columns or rows clear enough as they are without the prison bars. And look for opportunities to remove the visual noise to let your data and the relationships between them shine out.

The data prison is a concept from Edward Tufte. Check out the beautiful Envisioning Information

The data prison

The 60-30-10 color rule is a handy and memorable technique for a great start in simple branding. 

Think of a suit where about 60% of the colour you see is the suit, 30% the shirt and 10% accent or highlight with the tie. Classic.

Also see: The basic colour wheel other drawing sketchplanations

60-30-10 Colour rule

Often, the form of the data is obvious enough for what it is that you might consider simplifying by removing the label.

Let your data speak for itself.

Data graphics can lie in many ways, but the most common, I expect, is the error of using area or volume objects to represent one-dimensional data.

More data visualisation principles from Edward Tufte.

Watch for the lie factor

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

A nifty technique for making fonts appear smoother when viewed on a screen rendering pixels.

Anti-aliasing

Checking that things fit by rehearsing in the air is often a few seconds well spent.

Air-write before inking

Underlining was a by-product of typewriters. It generally doesn’t improve things. Now, I’m still waiting for someone to make a pen with a button on it to write in bold. And to write a straight line without a separate ruler. Anyone want to team up?

Urge to underline? Use bold or italic instead

Except in a sentence. Generally, I think this is helpful. Simpler, cleaner, and still clear. If it’s not clear, or if you’re writing a book or an article, keep the colon.

Graphic design sketches