Проще всего объяснить хорошие решения через плохие: правило «делайте контрастно» запоминается хуже, чем разбор конкретного макета, в котором ничего не читается. Ниже собраны приёмы, которые регулярно встречаются в присылаемых нам макетах, с объяснением, что именно каждый из них ломает и что делать вместо. Все советы вредные, поэтому выполнять их не надо.
Совет 1. Использовать пять шрифтов
Каждому блоку — свой шрифт: заголовкам один, кнопкам другой, подписям третий, цитатам четвёртый, а для акции взять что-нибудь декоративное. Страница мгновенно теряет цельность и начинает выглядеть как коллаж из разных сайтов.
Как надо. Одно шрифтовое семейство с несколькими начертаниями, максимум два семейства — одно для заголовков, другое для текста. Разница между уровнями создаётся размером и насыщенностью, а не сменой шрифта. Бонусом сокращается вес страницы: каждое лишнее начертание — это отдельный файл, который скачивает каждый посетитель.
Совет 2. Сделать всё одинаково важным
Крупный заголовок, крупная кнопка, крупная плашка акции, рядом баннер, всплывающее окно через три секунды и мигающая иконка чата. Когда важно всё, не важно ничего: глазу не за что зацепиться, и человек уходит, так и не поняв, что ему предлагают.
Как надо. На экране один главный элемент, остальное приглушено. Проверяется это просто: прищурьтесь и посмотрите на макет — то, что осталось заметным, и есть главное. Если заметно всё или ничего, иерархию нужно перестраивать.
Совет 3. Убрать воздух
Уплотнить блоки, сократить отступы, поднять всё выше — чтобы «влезло на первый экран». Логика понятна: чем больше человек увидит сразу, тем лучше. На практике плотная страница не читается, и человек не видит ничего.
Как надо. Отступы задаются по шкале, а не подбираются на глаз для каждого блока. Между блоками расстояние больше, чем внутри блока — именно это, а не рамки, отделяет разделы друг от друга. Пустое место в макете не потрачено зря: оно управляет вниманием.
Совет 4. Проверять макет только на своём мониторе
Большой экран с хорошей цветопередачей, быстрый интернет, отличное зрение, вкладка развёрнута на всю ширину — и полная уверенность, что всё в порядке. Реальный посетитель придёт с телефона, на солнце, по мобильному интернету, с яркостью, выкрученной вниз ради экономии заряда.
Как надо. Смотреть макет на телефоне, в том числе на недорогом, и хотя бы раз — на улице. Проверять на замедленной сети в инструментах разработчика. Убедиться, что при системном увеличении шрифта вёрстка не разъезжается.
Совет 5. Оставить в макете рыбу
Latin lorem ipsum вместо реальных текстов: строки красиво выравниваются, заголовки одинаковой длины, всё выглядит аккуратно. Проблемы начинаются при вёрстке, когда выясняется, что настоящее название услуги занимает три строки вместо одной, а у одного товара описание на два абзаца, а у другого его нет вовсе.
Как надо. Подставлять реальные тексты или хотя бы их реальную длину, включая крайние случаи: самое длинное название, самая длинная фамилия, пустой список, товар без картинки, цена из семи цифр.
Что ломает макет и что делать вместо
| Вредный приём | Что ломается | Как правильно |
|---|---|---|
| Светло-серый текст на белом | Читаемость на солнце и на дешёвых экранах | Контраст не ниже 4,5:1 для основного текста |
| Текст поверх пёстрой фотографии | Часть слов исчезает на светлых участках | Затемнение, градиент или плашка под текстом |
| Выключка по ширине | «Реки» пробелов, особенно в русском тексте | Выравнивание по левому краю |
| Заглавные буквы в длинных надписях | Скорость чтения падает, слова теряют форму | Обычный регистр, акцент размером и весом |
| Иконки из разных наборов | Визуальный шум, разная толщина линий | Один набор, одна сетка, одна толщина |
| Строка на всю ширину экрана | Глаз теряет начало следующей строки | 65-80 знаков в строке |
| Межстрочный интервал вплотную | Абзац читается как сплошное пятно | Интервал примерно в полтора размера шрифта |
| Кнопка без состояний | Непонятно, нажалась ли она | Состояния наведения, нажатия, загрузки, блокировки |
| Ссылка, не отличимая от текста | Люди не находят переходы | Цвет и подчёркивание или другой явный признак |
| Смысл, переданный только цветом | Не читается при плохом зрении и на печати | Цвет плюс подпись или значок |
Совет 6. Использовать анимацию везде
Каждый блок выезжает при прокрутке, карточки переворачиваются, счётчики крутятся, фон двигается вслед за курсором. При первом просмотре это выглядит впечатляюще. При втором визите человек ждёт, пока текст доедет до своего места, чтобы прочитать его.
Как надо. Анимация объясняет, что произошло: открылось меню, добавился товар, загружаются данные. Она короткая, не задерживает содержимое и отключается, если в системе включено уменьшение анимации. Появление блоков при прокрутке стоит использовать редко и не на основном тексте.
Совет 7. Придумать свои элементы управления
Нестандартный выпадающий список, свой ползунок, кнопка, не похожая на кнопку, иконка вместо подписи. Макет выглядит оригинально, а посетитель не понимает, куда нажимать.
Как надо. Стандартные элементы узнаются без обучения, потому что человек видел их на сотне других сайтов. Оригинальность уместна в оформлении, а не в логике управления. Если элемент всё-таки нестандартный, у него должна быть подпись словами.
Совет 8. Отдать макет без описания состояний
Нарисовано, как выглядит заполненная форма. Не нарисовано: пустое поле, ошибка ввода, загрузка, успешная отправка, длинный текст в поле, отключённая кнопка. В результате разработчик придумывает это сам, а потом всё переделывают.
Как надо. Для каждого интерактивного элемента и для каждого экрана с данными описываются состояния: пусто, загрузка, ошибка, успех, много данных. Это скучная часть работы, которая экономит недели на этапе доработок.
Быстрая самопроверка макета
- Прищуриться: видна ли иерархия и одно главное действие.
- Перевести в чёрно-белое: держится ли акцент без цвета.
- Сузить до 375 пикселей: не сломалась ли вёрстка, помещается ли кнопка.
- Подставить самое длинное название и пустой список: не разъехалось ли.
- Проверить контраст текста и элементов интерфейса.
- Пройти страницу с клавиатуры: виден ли фокус, доступны ли все действия.
- Посчитать шрифты, размеры и оттенки: если их больше десятка, пора наводить порядок.
- Показать человеку со стороны на пять секунд и спросить, что предлагает страница.
Эти восемь проверок занимают минут двадцать и отсекают большую часть проблем, которые иначе всплывают уже после запуска.
Что делать с сайтом, который уже собран по вредным советам
Полный редизайн нужен не всегда. Часто достаточно разобраться, где именно теряются люди, и починить это точечно: поднять контраст, переписать заголовки, привести отступы к единой шкале, починить мобильную версию, упростить формы. Такой разбор дешевле переделки и даёт понятный список работ с приоритетами.
Мы проводим такой разбор как отдельную услугу: смотрим сайт по сценариям, проверяем читаемость, мобильную версию и путь до заявки, отдаём список правок с объяснением, почему каждая нужна. Посмотрите аудит юзабилити и консалтинг и напишите нам — начнём с вашего сайта.
