{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/debug-your-visual-hierarchy-with-the-squint-test/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Debug your visual hierarchy with the squint test\",\n  \"cover\": \"/blogs/squint-test/cover.svg\",\n  \"date\": \"2020-12-11\",\n  \"type\": [\"tutorial\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `\"The squint test\" is a method to get a feel for the visual hierarchy of your page and the name is quite literally what you're supposed to do. When\nyou squint your eyes and move away from your screen a little you distort your vision to the point where you can no longer focus on the page but can still make out the large areas and colors in your design. In other words, you only `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `see the visual hierarchy`), `.`), mdx(\"p\", null, `When you're designing or building a website, it can be easy to focus in on the details. `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `Is everything precisely aligned\nto the grid? Are you using the exact right font-size and colors? Is this the right border-radius?`), ` But when you focus on the details, the\nmajor hierarchy of your website can get away from you.`), mdx(\"p\", null, `The squint test is a quick way to check if your page is still on the right track because it hides those details and lets\nyou focus on the larger patterns in your page.`), mdx(\"h3\", {\n    \"id\": \"what-to-look-for-when-doing-the-squint-test-️♀️\"\n  }, `What to look for when doing the squint test 🕵️‍♀️`), mdx(\"p\", null, `When you do the squint test there's a few question you're trying to answer:`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Is the primary focus of the page clear?`), mdx(\"br\", null), `\nMost pages have one primary focus. One thing they want users to do or one topic. When squinting, is the primary call to action\nor primary point of focus still recognizable, and is it clear what the primary focus is?`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Are relationships between elements clear?`), mdx(\"br\", null), `\nMost visual elements have some sort of relationship with others, like titles and text below it, or the header and the logo.\nWhen you squint, is it still clear that they belong together, or is the spacing causing elements to look separate?`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Which elements stand out? (and should they stand out?)`), mdx(\"br\", null), `\nElements with tons of contrast or color stand out more than others. When you squint these elements gain more prominence\ncompared to when you see them with \"noisy\" text around it. Are these elements the one you want to have stand out?`), mdx(\"p\", null, `Another important step for this question is to distinguish between foreground elements and background elements. Are\nbackground element like dividers and backgrounds more prominent than the primary focus of the page?`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Is the page still recognizable?`), mdx(\"br\", null), `\nCan you still find the logo, are the colors used recognizable as your brand and consistent with the rest of your site?`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `If an element is interactive, is that still clear when squinting?`), mdx(\"br\", null), `\nYou don't want people to have to hunt for buttons and other interactive elements. When squinting, can you still detect\nwhether a link is clickable? If you're just using an `, mdx(\"span\", {\n    style: {\n      \"textDecoration\": \"underline\"\n    }\n  }, `underline`), ` that might\nget lost when blurring, but if you also have a `, mdx(\"span\", {\n    style: {\n      \"color\": \"blue\"\n    }\n  }, `different color`), ` then it's\nstill clear.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Are elements that look the same when squint actually related?`), mdx(\"br\", null), `\nA common usability concept is \"things that look the same are the same\". And when they're not that leads to confusion.\nAre the elements on the page that look the same, also similar in behavior? If not, you might want to make sure they look\ndifferent too.`), mdx(\"h3\", {\n    \"id\": \"the-squint-test-without-squinting-\"\n  }, `The squint test ...without squinting 👀`), mdx(\"p\", null, `If you keep squinting while checking your design for all those points you'll end up with quite a headache.`), mdx(\"p\", null, `Polypane has two debug tools that can help you do the same tests, `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `no squinting required`), `.`), mdx(\"h4\", {\n    \"id\": \"far-sightedness-emulation\"\n  }, `Far-sightedness emulation`), mdx(\"p\", null, `The Far-sightedness emulation blurs the page you're looking at to emulate what people with far-sightedness see.`), mdx(\"p\", null, `When you squint your eyes you also can't bring the page in focus making this an ideal substitute for the squint test\nwithout needing to physically squint.`), mdx(\"p\", null, `Turn on the emulation and scroll through your site, taking note of the questions above and seeing where improvements can be made.`), mdx(\"img\", {\n    alt: \"Far-sightedness in Polypane\",\n    src: \"/blogs/squint-test/farsightedness.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"h4\", {\n    \"id\": \"placeholdifier-debug-tool\"\n  }, `Placeholdifier debug tool`), mdx(\"p\", null, `But even a blurred page can give you physical discomfort when looking at it for too long, since your eyes will\nkeep trying to get the page into focus.`), mdx(\"p\", null, `With the Placeholdifier debug tool every element stays sharp but text and images become solid blocks of color. With this you\ntake away the focus on the actual words and imagery and are left with the general layout and hierarchy.`), mdx(\"img\", {\n    alt: \"Console panel\",\n    src: \"/blogs/squint-test/placeholdifier.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"h4\", {\n    \"id\": \"run-them-side-by-side\"\n  }, `Run them side by side`), mdx(\"p\", null, `With Polypane, you can also show these two debug tools side by side. Because each highlights some issue more than the other,\nchecking a page in both at the same time lets you see the entire overview in one go.`), mdx(\"img\", {\n    alt: \"Console panel\",\n    src: \"/blogs/squint-test/side-by-side.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"try-it-yourself-🤩\"\n  }, `Try it yourself 🤩`), mdx(\"p\", null, `Test out these debug tools, and over 25 others (like color blindness simulators, dyslexia emulation and layout debugging) in Polypane by `, mdx(\"a\", {\n    href: \"https://dashboard.polypane.app/register\"\n  }, `starting a free 14 day trial`), `. Polypane is available on Mac, Windows and Linux.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"tableOfContents":{"items":[{"url":"#what-to-look-for-when-doing-the-squint-test-️♀️","title":"What to look for when doing the squint test 🕵️‍♀️"},{"url":"#the-squint-test-without-squinting-","title":"The squint test ...without squinting 👀","items":[{"url":"#far-sightedness-emulation","title":"Far-sightedness emulation"},{"url":"#placeholdifier-debug-tool","title":"Placeholdifier debug tool"},{"url":"#run-them-side-by-side","title":"Run them side by side"}]},{"url":"#try-it-yourself-🤩","title":"Try it yourself 🤩"}]},"excerpt":"\"The squint test\" is a method to get a feel for the visual hierarchy of your page and the name is quite literally what you're supposed to do. When\nyou squint…","frontmatter":{"title":"Debug your visual hierarchy with the squint test","cover":"/blogs/squint-test/cover.svg","date":"2020-12-11","updated":null},"fields":{"slug":"/blog/debug-your-visual-hierarchy-with-the-squint-test/","date":"2020-12-10T23:00:00.000Z","ogFileName":"debug-your-visual-hierarchy-with-the-squint-test"}}},"pageContext":{"slug":"/blog/debug-your-visual-hierarchy-with-the-squint-test/"}},"staticQueryHashes":["4164364741","425175329"]}