The Squint Test: How quick exposure to design can reveal its flaws Design

The Squint Test: How quick exposure to design can reveal its flaws

You’ve put in the hours, worked hard and pushed the pixels around until they’re perfectly positioned. You’re ready to call it quits and deliver your design to the client. Before you ship it though, have you put your design through The Squint Test?

Perhaps this is a bit much but you get the idea. (Photo courtesy of: http://www.realself.com/files/228024-5325.jpg)

The Squint Test is quite literal – display your design on screen, take a step back and squint your eyes (close them partially to distort your vision). The design should become blurry and only the largest, most basic shapes of the interface should be able to be perceived. The purpose of this is to get a high-level view of the visual hierarchy of your work. What elements stand out? Can you tell where the primary focus should be? Are too many elements on the page confusing the eye?

The Squint Test may sound simple yet it helps designers detach from work they are very close to and get a glimpse of what a new user would see in the first few seconds of the experience. In many ways, this simple tactic puts your design through a quick checklist of Gestalt principles to see if they’ve been applied correctly to achieve your design’s purpose.

What to look for while squinting

When applied, the test quickly reveals figure/ground relationships. It becomes very easy to tell if the elements you intended to be background elements are indeed perceived as such and whether the elements you intended to have focus jump off that background. Affordances should be obvious as well as the explicit points of focus in the work. You can then move on to review the arrangement of the elements on the page. The Squint Test will quickly show which elements appear connected based on their linear relationship to other elements as well as proximity to other elements. Elements along similar lines or curves will appear to be connected. By blurring your view temporarily you remove some of the visual clutter that text blocks and other ornamental design elements add to the experience.

Continuing through this virtual checklist, the test begins to reveal whether a similar treatment was used for elements that may not actually be related. Taking this less refined view of the design exposes this perceived similarity which may not have been your original intention.

If the design you created contains a large number of elements in a complex structure, taking this approach helps you realize which elements the human eye will tie together quickly in that layout. Humans tend to try to find a single pattern in a complex setting first to orient their vision and drive the next decision. As you step back from the work, intentional or unintentional patterns arise which will likely pull your user’s eye. Ensure that this is indeed the desired outcome and that the appropriate calls to action are available in those areas of the design.

Use it well

Ultimately, The Squint Test is a simple tactic to help put some objectivity between you and your design. It is meant as a quick gut check to ensure that the intended outcome of the design is achieved and the work is headed in the right direction. It is not meant as a replacement for quantitative and qualitative measurement of the work, nor should it be used to determine brand aesthetics. It gives the designer another way to assess the structure of the design and determine the efficacy of its layout and visual hierarchy.


Jeff Gothelf is a user experience designer, blogger, speaker and Lean UX advocate based in metro NYC. He has spent his 13 year career defining and designing engaging experiences for clients big and small. He is currently the Director of User Experience at TheLadders.com where he helps executive jobseekers and recruiters make meaningful connections with each other. Previously he helped shape the designs at Publicis Modem, AOL, Webtrends and Fidelity. Jeff publishes his thoughts on his blog and on Twitter @jboogie.

10 comments

  1. Julie Booth

    I LOVE the “squint test”…. I don’t have to squint to do it though. I am old and have bad eyes. Doing a cognitive walkthrough with the application on a wall monitor, I only see in figure ground relationships!!

  2. Jussi Pasanen

    HI Jeff, thanks for an interesting post, lots of good tips especially in the “What to look for while squinting” part.

    To other readers, if all that squinting gives you a headache just apply liberal dose of blur filter in your favourite graphics package for similar effect.

    And if your design is already in HTML you can use our Wirify service ( http://www.wirify.com/ ) to view a simplified wireframe representation of the page and study its visual hierarchy and the like.

  3. Jencardello

    This is great, Jeff! Reminds me of the research study on pre-attentive processing: “you have 50 milliseconds to make a good impression.” it may bd worth taking your squint test to the masses before launching. I’ve find tests where Ed show someone three pages of competing websites very wuicky and lick the one they would do business with based on that quick exposure. Users make decisions about whether a site is safe and appropriate in an instant — they don’t fixate or read things until they’ve moved past this initial “spontaneous” stage. So, the squint is essential, but also nice to just get it in front of some target users. Print outs in person work best for controlling the exposure. Ficesecondtest.com could be good, bug wish it was one second! :)

  4. Pingback: Need a Job? Get One First; Hiring for Creativity; Job Hunt (the Game) | The Hired Guns Blog

  5. Alan | Networking Secrets

    Is there a squint test app?

    (if not it’s got to be a good business idea for someone, right?)

    - like a place you can submit a webpage to and it would apply the ‘squint test’ to the page – make it go a little blurry etc so you can see what stands out and what doesn’t.

    p.s. if it doesn’t exist & somebody builds it, just let me know, K? ;-)

  6. jasneet

    i havent got it.whats the squint test?
    for what purpose it is and is there any app for it?

  7. Rahul Chouhan

    Great post by admin.. but still i am not familiar with the exact squint test. My friend already had a good experience about this but i am not but overall a good knowledgeable post. thanks for sharing

  8. Michael Gambler

    Every one has an own opinion for this post, but i strongly feel that this post is awesome for me. Thanks for sharing

  9. Gleb Bahmutov

    I implemented simple squint (all white space, leading, blank lines) and will add drag and drop / source file upload later. http://glebbahmutov.com/squint/ code at https://github.com/bahmutov/squint

  10. Gianna James

    Really great article about squinting it’s really enjoyable to read thanks for sharing admin.. keep it up

Leave a Reply

Your email address will not be published. Required fields are marked *