Тест прищуром: как проверить дизайн сайта за 3 секунды
Почему прищур показывает правду
Знакомая ситуация: вы три недели делали лендинг, каждый цвет выверен, отступы идеальны. Показываете страницу человеку не из дизайна, он смотрит секунду и спрашивает: «А куда тут нажимать?» Вы показываете на кнопку, над которой провели час, а он её не заметил. Кнопка конкурировала с заголовком того же синего оттенка, с шумной фотографией на первом экране и с шапкой, которая забрала всё внимание.
Именно такие провалы ловит тест прищуром, причём за считаные секунды. Первое впечатление об экране формируется очень быстро. В исследованиях юзабилити часто называют порядок десятков миллисекунд, но точные цифры зависят от методики. Для практики хватит простого вывода: посетитель не читает страницу сверху вниз. Он скользит взглядом и цепляется за то, что визуально тяжелее всего. Остальное он дочитывает потом, а иногда не дочитывает вовсе.
Прищур намеренно ухудшает зрение и имитирует этот беглый взгляд. Мелкие детали пропадают первыми: текст, иконки, тонкие линии, близкие оттенки. Остаются размер, контраст и положение. Если главная кнопка не входит в две-три фигуры, которые ещё видны, значит, она не главная. Это просто декоративный элемент с надписью «Купить».
Приём появился задолго до сайтов. Полиграфисты и верстальщики газет отходили от разворота на другой конец комнаты и щурились, чтобы понять, за что цепляется глаз. Техника дожила до наших дней, потому что мозг по-прежнему сначала считывает форму, контраст и композицию и только потом содержание.
Если вам приходится объяснять, что на экране главное, экран уже не справился со своей единственной задачей.
— заметка, которая висит у меня над монитором
Семь способов провести тест
Буквальный прищур работает, но глаза устают, а клиенту по видеосвязи его не покажешь. Поэтому я использую несколько способов, и выбираю тот, что подходит моменту.
- Настоящий прищур. Самый быстрый вариант, когда вы одни. Откиньтесь на спинку стула, расслабьте глаза почти до закрытия и смотрите на экран целиком. Отметьте, что всё ещё читается как пятно или форма.
- Отодвиньтесь от экрана. Метр-два назад дают близкий эффект без напряжения. На встречах с клиентом я просто отодвигаю стул перед обсуждением нового макета.
- Уменьшите масштаб до 25% и меньше. В Figma или Photoshop уменьшайте холст, пока текст не станет серыми полосками, а кнопки цветными блоками. Результат не зависит от усталости, и его можно приложить скриншотом к задаче.
- Примените размытие. Сделайте скриншот страницы и наложите гауссово размытие примерно на 15–25 пикселей. Такой скриншот удобно отправить коллегам или клиенту в мессенджер с вопросом «о чём эта страница?», пока они не видели чёткую версию.
- Переведите в чёрно-белое. Так проверяется именно контраст. Светло-серый подзаголовок в цвете может казаться отличным от основного текста, а без цвета сливается с ним. Если иерархия держится только на оттенке, она не держится.
- Сожмите страницу в миниатюру. Уменьшите скриншот всей страницы до ширины около 200 пикселей. Примерно так выглядит превью в закладках и в карточках в мессенджерах. Видно, что считывается с одного взгляда.
- «Отвернись и вспомни». Покажите дизайн ровно три секунды, попросите отвернуться и назвать вслух, что запомнилось. Расхождение между тем, что человек видел и что запомнил, и есть место проблем с иерархией.
Специальные инструменты не нужны. Размытие и масштабирование занимают минуту в программе, которая и так открыта. В этом и смысл: десятиминутную процедуру пропустят в дедлайн, а ошибки иерархии как раз проскакивают в дедлайн.
Проверка на телефоне
Для российских сайтов мобильная проверка особенно важна, потому что значительная часть трафика приходит именно со смартфонов. Дайте телефон человеку, который не видел макет, и попросите посмотреть на экран три секунды, а потом отдать его вам. Спросите, что он запомнил. Очень часто ответ «логотип», а не «цена» или «кнопка заявки».
Что именно проверять
Прищур полезен, если вы знаете, на что смотреть, когда детали исчезли. Я проверяю пять вещей, примерно в таком порядке.
- Есть ли одна доминирующая точка фокуса. Не ноль и не четыре, а одна. Если размытая версия выглядит как поле одинаковых по размеру блоков, иерархии нет, есть только раскладка.
- Понятен ли путь взгляда. После главной точки взгляд должен идти дальше логично. Для текстовых страниц на кириллице он обычно движется по F-образному пути, для простых визуальных лендингов по Z-образному. Если глаз прыгает между несвязанными элементами, раскладка спорит с привычкой чтения.
- Сгруппировано ли связанное и отделено ли несвязанное. Принцип близости виден в размытии лучше всего. Связанные блоки должны слипаться и без рамок, а разные разделы должны разделяться воздухом.
- Находится ли главная кнопка без поиска. Если после размытия кнопка заявки весит столько же, сколько вторичная ссылка или элемент подвала, у посетителей возникнет та же проблема, только без возможности прищуриться.
- Сбалансирован ли визуальный вес. Страница не обязана быть симметричной, но не должна быть перекошенной. Крупное фото с одной стороны можно уравновесить кластером мелких контрастных элементов с другой. А вот перегруженный угол при пустом остальном пространстве в размытии виден сразу.
Обратите внимание: для этого не нужно прочитать ни одного слова. Тест проверяет форму, а не смысл. Это не вычитка и не аудит текстов.
Какие провалы он вскрывает
Если прогонять через этот тест много экранов, одни и те же ошибки повторяются. Скорее всего, вы найдёте в списке свой проект.
Дашборд, где «важно всё»
В админках и личных кабинетах каждый участник проекта считает свою метрику главной. Получается сетка из двенадцати одинаковых карточек на одном сером фоне. В размытии это ровный серый туман. Решение обычно не в добавлении стилей, а в редакторском выборе: два-три числа выводим крупно, остальное делаем тише и мельче.
Две конкурирующие кнопки
На лендингах это основная и вторичная кнопки почти одинакового размера и насыщенности. Часто виноват брендбук, где указаны два фирменных цвета, но не сказано, что один должен отступать. После размытия обе кнопки выглядят одинаково, и решение «что важнее» перекладывается на посетителя. Типичный пример: «Заказать расчёт» и «Скачать каталог» одного цвета. Человек не нажимает ни на одну.
Заголовок тонет в фото на первом экране
Крупное фото на фоне, поверх него заголовок. Отдельно текст выглядит смелым, но на насыщенной фотографии теряется. Прищур убирает мелкие детали снимка, но оставляет общую яркость и цветовые пятна, и становится ясно, что заголовок эту схватку проигрывает. Поэтому в сильных первых экранах часто есть затемняющая подложка, градиент или спокойное фото. Дело не во вкусе: иначе текст и картинка не уживаются на вершине иерархии.
Незаметные ошибки в формах
Форму заявки обычно проверяют пустой или заполненной правильно, то есть в состоянии, где ошибке неоткуда взяться. Сделайте копию формы с включённой ошибкой и прищурьтесь. Если красная рамка и подпись почти не отличаются от обычного состояния, усталый пользователь, который вводит телефон в одиннадцать вечера, ошибку не заметит. Цена здесь прямая: потерянная заявка.
Шапка перевешивает контент
Закреплённая шапка с логотипом, пятью пунктами меню, поиском, телефоном и кнопкой, всё контрастное, а под ней заголовок, ради которого человек пришёл. В размытии шапка часто побеждает просто за счёт ширины и плотности элементов.
Различия только через цвет
Чёрно-белый режим ловит разделы, которые отличаются лишь оттенком синего и тёмно-синего или двумя почти одинаковыми светло-серыми фонами. Без цвета они сливаются в один блок. Это важно ещё и потому, что у заметной доли людей, чаще у мужчин, есть те или иные особенности цветовосприятия. Опираться только на оттенок рискованно.
Встраиваем проверку в процесс
Тест полезнее всего как привычка, которая срабатывает в одних и тех же точках проекта. Вот где использую его я.
- Сразу после прототипа. Пока нет цвета и шрифтов, иерархия — единственное, что прототип сообщает. Исправить её на этом этапе стоит минут. После утверждения красивого макета это стоит неловкого разговора с заказчиком.
- После наложения визуального стиля. Тут решения прототипа тихо отменяются: «приятный» серый для текста оказывается почти таким же по яркости, как заголовок. Прищур ловит расхождение между замыслом и результатом.
- Перед показом клиенту. Клиент редко разглядывает отступы. Мнение он формирует в первые секунды показа. Если вы заранее знаете, что он заметит первым, вы строите презентацию вокруг этого.
- На разборе макета с командой. Покажите размытый скриншот и попросите каждого письменно ответить, что здесь главное действие. Если ответы расходятся, тема обсуждения найдена до споров о шрифтах.
- Перед передачей в вёрстку. На финальной стадии меняются иконки, отступы, тексты становятся длиннее заглушек. Иерархия размывается от каждого небольшого, по отдельности разумного изменения, поэтому нужен последний прогон.
Есть ещё одно применение, которое легко упустить: аргумент в разговоре с клиентом. Вместо абстрактного спора о размере кнопки покажите размытый скриншот и спросите, что он видит. Когда клиент говорит «кнопку я тут не вижу», вы убедили его его же глазами, а не фразой «я же дизайнер». Так я не раз выигрывал споры о перегруженном первом экране.
Привычка в Figma
Продублируйте фрейм и наложите на копию размытие слоя (Layer blur), либо экспортируйте PNG и вставьте обратно с размытием. Оставьте копию рядом с рабочим макетом, чтобы проверка занимала один клик. В некоторых командах для этого заводят отдельную страницу файла «Проверка прищуром», где у каждого крупного экрана есть размытый двойник.
Что тест не показывает
Важно понимать пределы метода. Иначе быстрый фильтр превращается в иллюзию полноценной проверки.
- Соответствие требованиям доступности. Прищур даёт ощущение контраста, но не заменяет измерение. Сочетание может выглядеть нормально и всё же не дотягивать до соотношения 4.5:1 для основного текста по рекомендациям WCAG. Цифры проверяйте в чекере контраста.
- Дальтонизм. Размытие не имитирует протанопию и дейтеранопию. Если в статусах или графиках различие строится на красном и зелёном, нужен симулятор цветовых нарушений.
- Качество текста. Экран с идеальной иерархией всё равно провалится, если заголовок ни о чём, кнопка называется «Узнать больше», а выгода спрятана в третьем абзаце. Тест показывает, куда идёт взгляд, но не то, что он там находит.
- Юзабилити. Отправляется ли форма, предсказуемо ли работает выпадающий список, на каком шаге оформления заказа люди уходят — на статичном скриншоте этого не видно. Это инструмент первого впечатления, а не прохождения сценариев.
- Нестандартные привычки чтения. F- и Z-паттерны описывают чтение слева направо. Если сайт делается для аудитории, которая читает справа налево, ожидаемый путь взгляда нужно скорректировать.
- Длинные сценарии. Метод хорош для одного экрана или блока: первый экран, карточка товара, кабинет. Для двенадцатишагового онбординга важнее последовательность и нагрузка во времени.
Относитесь к прищуру как к дешёвому быстрому фильтру. Он отлично ловит одну дорогую категорию ошибок, плохую иерархию, и не претендует на остальное.
Что это даёт вашему сайту
Для владельца бизнеса тест прищуром — способ проверить сайт без дизайнера и без бюджета на исследования. Особенно это полезно перед запуском рекламы в Яндекс Директе: вы платите за каждый клик, и если посетитель за три секунды не нашёл, что делать, деньги сгорают. Главная кнопка слабее заголовка или шапки напрямую снижает конверсию. Насколько именно, зависит от сайта, и честнее всего замерить это в Яндекс Метрике до и после правок.
Если сайт собран на Tilda, проверка делается быстро. Откройте страницу, сделайте скриншот первого экрана в версии для компьютера и для телефона, размойте его и задайте себе три вопроса:
- Что здесь предлагают, видно ли это без чтения?
- Где кнопка заявки, и это самый заметный интерактивный элемент?
- Не перетягивают ли внимание шапка, всплывающие виджеты, баннер с куки или чат?
На Tilda частая причина провала — набор готовых блоков без общей логики. Каждый блок по отдельности аккуратен, но все они одного веса, поэтому страница в размытии превращается в ровные полосы. Лечится это не сменой шаблона. Нужно выбрать один главный блок на экран, одну главную кнопку на страницу и сделать остальное заметно тише. Отдельно проверьте мобильную версию: на Tilda она часто остаётся «как получилось», хотя трафик приходит в основном с телефонов.
Короткий чек-лист ритуала
Вот версия, которая помещается на стикер.
- Уменьшите холст примерно до 25% или размойте скриншот на 20 пикселей.
- Посмотрите три секунды, считая по-настоящему, а не на глаз.
- Отвернитесь и вслух назовите, что запомнили, по порядку.
- Спросите себя: есть ли одна точка фокуса, и она ли действительно главная?
- Проследите путь взгляда по оставшимся блокам.
- Переведите в чёрно-белое и проверьте, сохраняются ли различия без цвета.
- Повторите на ширине телефона.
Дополните его двумя простыми проверками: пятисекундным тестом на понятность («о чём эта страница?») и тестом первого клика («куда бы вы нажали, чтобы оставить заявку?»). Все три делаются самостоятельно, без найма участников и исследовательских бюджетов.
Глубинная причина, почему это работает: вы не видите собственных ошибок иерархии. Вы знаете, где кнопка, потому что сами её поставили. Вы знаете, какая цифра в отчёте важна, потому что строили этот отчёт. Прищур — дешёвый способ ненадолго забыть то, что вы знаете, и увидеть, что на странице есть на самом деле. Если после проверки вы видите больше проблем, чем хотелось бы, это нормальный повод показать сайт специалисту, который разберёт его по блокам и скажет, что менять в первую очередь.
Частые вопросы
Что такое тест прищуром в дизайне?
Это проверка макета или сайта с намеренно ухудшенным зрением: вы щуритесь, отходите от экрана или размываете скриншот. Мелкие детали исчезают, и остаются крупные пятна. Так видно, что заметно с первого взгляда, а что теряется, и работает ли визуальная иерархия страницы.
Как проверить иерархию дизайна без специальных программ?
Отодвиньтесь от экрана на пару метров или прищурьтесь, а затем отвернитесь и назовите, что запомнили. Ещё можно сделать скриншот и уменьшить его до миниатюры на телефоне. Если запомнились логотип и фон вместо оффера и кнопки, иерархию нужно исправлять.
Сколько секунд пользователь решает, остаться ли на сайте?
Единой точной цифры нет. Исследования юзабилити говорят о первом впечатлении, которое формируется за доли секунды, а решение остаться или уйти обычно принимается в первые секунды. Поэтому ключевое сообщение и главная кнопка должны быть видны сразу, а точные цифры лучше смотреть в своей Метрике.
Заменяет ли тест прищуром проверку контрастности по WCAG?
Нет. Прищур даёт только ощущение контраста на глаз. Для текста рекомендации WCAG требуют соотношение не меньше 4.5:1 для основного размера, и это нужно измерять в чекере контраста. Прищур хорошо дополняет такую проверку, но не подменяет цифры.
Как сделать тест прищуром в Figma?
Продублируйте фрейм и примените к копии размытие слоя на 15–25 пикселей либо уменьшите масштаб холста до 25%. Оставьте копию рядом с рабочим макетом. Так проверка занимает секунды, а размытый вариант легко отправить коллегам или клиенту.
Как проверить главный экран сайта на Tilda?
Сделайте скриншот первого экрана на компьютере и на телефоне, размойте его и ответьте: виден ли оффер, заметна ли главная кнопка и не перетягивают ли внимание шапка, виджеты или баннер. Если нет, уберите лишнее, усильте контраст кнопки и снова проверьте.
