Слово «современный» применительно к сайту почти всегда понимают визуально. Крупная типографика, много воздуха, аккуратные карточки, плавные появления блоков при прокрутке. Всё это встречается на хороших сайтах, но встречается и на плохих, поэтому само по себе ничего не означает.

Проверить легко. Возьмите сайт, который выглядит современно, откройте его с телефона на мобильном интернете и попробуйте что-нибудь на нём сделать. Довольно часто выясняется, что красивая обложка стоит на трёх мегабайтах картинок, форма не отправляется, а цену не найти.

Современный сайт – это совокупность многих вещей сразу, и оформление лишь одна из них. Разберём по частям.

Скорость

Первое, что замечает посетитель – это скорость. Он не считает секунды, но сразу чувствует, когда сайт «тормозит».

Google измеряет ожидание тремя показателями. Появление основного контента должно уложиться в 2,5 секунды. Отклик на действие пользователя в 200 миллисекунд. Смещение вёрстки при загрузке не должно превышать 0,1. Все три считаются по реальным визитам за 28 дней, по 75-му перцентилю, то есть с запасом на тех, у кого связь хуже.

Что портит скорость чаще всего: неоптимизированные фотографии, десяток сторонних скриптов, тяжёлая тема с неиспользуемыми функциями, шрифты, подгружаемые по одному начертанию. Обычно причины довольно банальные.

Важная деталь: скорость не отдельная задача, а следствие решений в дизайне. Полноэкранное видео на первом экране – тоже дизайнерское решение, которое может заметно увеличить время загрузки.

Работа на телефонах

Доля мобильного трафика в большинстве ниш перевалила за половину, а в некоторых доходит до восьмидесяти процентов. При этом сайт продолжают проверять на большом мониторе, потому что за ним сидит тот, кто принимает работу.

Адаптивная вёрстка сегодня считается нормой, но наличие адаптивности не равно удобству. Макет может перестраиваться корректно, а пользоваться сайтом с телефона всё равно тяжело: мелкие цели для нажатия, скрытая навигация, формы с неправильным типом полей, всплывающие окна, которые невозможно закрыть пальцем.

Разница между «сайт открывается на телефоне» и «сайтом удобно пользоваться с телефона» и есть тем признаком современности, который нельзя увидеть на макете в Фигме.

Структура

Структура определяет, найдёт ли человек то, за чем пришёл. Она же чаще всего оказывается самым запущенным местом, потому что растёт стихийно.

Признаки проблем: больше семи пунктов в главном меню, разделы с пересекающимся содержанием, страницы, на которые нет внутренних ссылок, важная услуга на третьем уровне вложенности.

Хорошая структура выглядит скучно. Она не привлекает внимания и не вызывает восторгов, зато посетитель попадает куда нужно с первой попытки и не осознаёт, что ему кто-то помог.

Контент, который отвечает на вопросы

Тексты на сайте часто пишут с позиции компании, и из-за этого часть важных для клиента вопросов остаётся без ответа. Автор знает предмет и пропускает то, что кажется очевидным.

Человек приходит с конкретными вопросами: сколько стоит, за какой срок, что входит, что будет если не подойдёт, кто вы вообще такие. Сайт часто отвечает на другие: наша миссия, индивидуальный подход, команда профессионалов.

Актуальность здесь тоже входит в понятие современности. Прайс двухлетней давности, новость с прошлогодней акцией на главной, телефон отдела, который расформировали, все они говорят посетителю одно и то же.

Видимость в поиске

Поисковая оптимизация выглядит отдельной дисциплиной, но по факту это проверка тех же вещей другими глазами. Google оценивает скорость, удобство на мобильных, структуру, уникальность и полноту содержания.

Здесь можно сделать вывод, что сайт, сделанный удобным для человека, чаще всего оказывается приемлемым и для поиска. Обратное неверно. Страницу можно набить запросами и получить трафик, который ничего не принесёт.

Техническая часть никуда не девается: заголовки, описания, разметка, карта сайта, отсутствие дублей, корректные адреса. Но они работают как гигиена, а не как рычаг роста.

Доступность

Раздел, которому в русскоязычной практике пока уделяют заметно меньше внимания, хотя половина требований совпадает с обычным здравым смыслом.

Контраст текста и фона, при котором текст читается. Возможность увеличить шрифт без разрушения вёрстки. Подписи к полям формы, а не подсказки внутри поля, исчезающие при вводе. Альтернативные описания у картинок. Навигация с клавиатуры.

Выгода двойная. Сайтом могут пользоваться люди с ослабленным зрением и те, кто сидит на солнце с телефоном в руке. Вторая группа больше.

Путь к действию

Всё перечисленное имеет смысл, если сайт ведёт человека к чему-то конкретному. Заявка, звонок, заказ, подписка, визит в офис.

Здесь чаще всего обнаруживается разрыв. Страница услуги подробная и убедительная, а кнопки на ней нет. Или кнопка есть, но ведёт на общую форму обратной связи, где надо заново объяснять, что тебе нужно. Или форма просит восемь полей, из которых реально используются два.

Проверяется это простым способом: откройте любую страницу и спросите, что человек должен сделать дальше. Если ответ приходится придумывать, посетитель его тоже придумает, и не обязательно в вашу пользу.

Всё это связано между собой

Эти части работают не по отдельности: одна влияет на другую

Дизайн задаёт скорость: количество шрифтов, вес изображений, объём анимации. Структура задаёт видимость в поиске: то, чего нет в навигации, поисковик находит хуже. Скорость влияет на конверсию: страница, которая грузится четыре секунды, теряет часть посетителей до того, как они увидят текст. Контент определяет, о чём вообще может быть страница.

Поэтому работа над одним элементом в отрыве от остальных обычно даёт меньше, чем ожидается. Ускорили сайт, а форма по-прежнему требует восемь полей. Переписали тексты, а найти их в меню невозможно.

Что это значит для редизайна

Отсюда простой сдвиг в постановке задачи. Разумный редизайн начинается не с вопроса «как сделать красивее», а с вопроса «что мешает посетителю и бизнесу прямо сейчас».

Порядок работ меняется. Сначала разбор: что происходит на сайте, где люди застревают, что дублируется, что грузится долго, какие страницы приносят результат, а какие лежат мёртвым грузом. Потом решения о структуре и содержании. И только потом оформление, которое эти решения обслуживает.

Такой разбор долгое время был дорогим этапом, поэтому его пропускали. Сейчас часть работы берут на себя инструменты, которые анализируют сайт целиком: разбирают структуру и содержимое, соотносят их со скоростью и поведением посетителей, показывают слабые места и предлагают вариант новой раскладки. Сайт рассматривается как единая система, а не как набор страниц, которым нужен новый шрифт. Выбор в итоге всё равно за человеком, потому что приоритеты бизнеса инструмент не знает.

Частые вопросы

Значит, дизайн не важен? Важен. Он отвечает за доверие и за то, насколько легко воспринимается страница. Разница в том, что дизайн решает эти задачи, а не заменяет собой остальные.

Можно ли улучшать по частям? Да, и обычно так и делают. Разумный порядок: скорость и мобильная версия, затем структура и тексты, затем оформление.

Как понять, что стало лучше? До начала работ зафиксируйте показатели: скорость по полевым данным, доля мобильного трафика с заявками, конверсия ключевых страниц. Без исходных показателей будет гораздо сложнее понять, действительно ли изменения дали результат.