04 сентября 2015 Статья №21

Прекратите использовать «героические» изображения на сайте! Они портят ваш UX.

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

Изображение героя во весь рост

Вы это знаете. Вы это разработали. Чёрт возьми, вы, вероятно, используете это по умолчанию в Figma, не задумываясь. Огромный визуальный эффект прямо в верхней части главной страницы. Может быть, это унылое фото рабочего места или основатель стартапа, который идёт и разговаривает. Может быть, это расплывчатый слоган вроде «Powering What’s Next». Может быть, в углу плавает призрачный призыв к действию, надеясь, что кто-то на него нажмёт.

Мы убедили себя, что такой дизайн «заявляет о себе», привлекает внимание, мгновенно передаёт настроение и ценности бренда.

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

Модель, которая изжила себя

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

Но, как и большинство трендов, образ героя превратился в товар. Он перестал быть творческим решением и стал стандартом.

Он присутствует в каждом шаблоне, в каждой презентации, на каждой «современной домашней странице SaaS». И то, что изначально было средством создания эмоционального резонанса, превратилось в опору — временную основу для контент-стратегии, которая так и не была реализована.

Сегодня образ героя чаще всего не передает никакой информации… Он украшает. Он отвлекает. Он задерживает!

Налог на производительность, о котором никто не говорит

Есть причина, по которой ваш LCP ужасен. И, вероятно, он находится в вашем разделе «Герои».

В большинстве случаев именно JPEG-файл высокого разрешения или автоматически воспроизводящееся фоновое видео являются самыми крупными блокирующими отображение элементами на странице. Неважно, насколько аккуратна ваша CSS-сетка или насколько продуман ваш JavaScript — если ваше главное изображение весит 2 МБ и загружается выше сгиба, вы уже проиграли в борьбе за производительность.

И производительность — это не только забота разработчиков. Это решение, принятое при проектировании. Дизайнеры, игнорирующие показатели производительности, работают в вакууме. Вы можете получать награды, но ваши пользователи ждут пять секунд, пока отобразится ваше стоковое фото чашки кофе.

Это не сторителлинг. Это саботаж.

Неопределенность, замаскированная под видение

Но даже если бы производительность была идеальной (а так бывает редко), есть еще больший грех: абстракция.

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

Это визуальный эквивалент светской беседы. У вас есть три секунды, чтобы привлечь внимание пользователя и рассказать ему, чем вы занимаетесь, — и вы тратите их на демонстрацию вида города с высоты птичьего полёта?

Это не просто лень. Это нечестно. Ведь когда пользователь попадает на ваш сайт и не может сразу понять, что вы предлагаете, для кого он и почему он важен, он уходит. И неважно, насколько хороша ваша типографика.

Мобильные устройства не прощают тщеславия в дизайне

А теперь о мобильном опыте.

На большом экране компьютера главное изображение может свободно двигаться. Есть пространство для аккуратной компоновки и кадрирования. Но если свернуть тот же макет до области просмотра размером 390 пикселей, всё быстро развалится. Текст накладывается друг на друга. Призывы к действию опускаются ниже сгиба. Идеальное «правило третей» в композиции изображений? Исчезло.

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

Разработка для мобильных устройств — это не только адаптивные точки входа, но и учёт контекста. А на экране телефона огромное абстрактное изображение зачастую оказывается наименее полезным .

Доступность обычно учитывается в последнюю очередь

Вот тут-то всё становится особенно рискованно. В разделах «Герои» доступность обычно оказывается под угрозой.

Наложенный текст на фотографии редко проходит тест на контрастность. Фоновые видео часто воспроизводятся автоматически без кнопок паузы и подписей. Изображения с критически важным контентом помечаются как декоративные. А семантическая иерархия отбрасывается, поэтому заголовок H1 можно поместить в абсолютно позиционируемый контейнер, который даже не смогут найти программы чтения с экрана.

А самое печальное? Это решаемые проблемы. Но решаются они редко, потому что главный образ воспринимается как визуальный актив, а не как контейнер для контента.

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

Настоящая проблема: это стратегический пробел

Это неудобная правда: большинство образов героев существуют потому, что никто не знал, что еще туда поместить.

Это самая дорогая часть страницы — верхняя половина главной страницы, первое впечатление, точка остановки прокрутки — и её заполняет… фотография. Не потому, что эта фотография что-то значит, а потому, что сообщение ещё не готово. Ценностное предложение неясно. Продукт сложно объяснить. Поэтому вместо этого мы рисуем горизонт, пишем что-то двусмысленное и надеемся, что пользователь прокрутит страницу достаточно далеко, чтобы разобраться.

Героические образы сами по себе не плохи. Но они стали способом избежать кропотливой работы по достижению ясности.

Они маскируют нерешительность. Они скрывают непроработанность посланий.

Они оттягивают момент, когда продукт должен говорить сам за себя.

Так какова же альтернатива?

Нет, нам не нужно запрещать все визуальные материалы. Изображения имеют право на существование, если они того заслуживают.

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

Что это? Это для меня? Почему меня это должно волновать?

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

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

Потому что в конечном итоге дизайн — это не только то, что хорошо выглядит, но и то, что работает.