Мы с вами разобрались с текстами и модульными страницами. Теперь поговорим о том, как их можно было бы делать интереснее.
Ушки, цитаты, врезки и фактоиды — это такие элементы вёрстки, которые призваны привлечь внимание читателя. Я их ещё называю генераторами внимания. Читатель заходит на страницу и видит какие‑то блоки, которые просто в силу своего расположения, размера, цвета привлекают внимание. В них содержится какая‑то суперинтересная информация, которую читатель быстро проглатывает и потом решает прочитать всю статью целиком. Не говоря уже о том, что таким образом интересно вносим разнообразие в разворот или страницу.
Вот, например, перед нами разворот журнала «Юрист компании»:
Здесь есть сразу три элемента, которые призваны привлечь внимание читателя. Во‑первых, врезка, цитата, примечание на полях, которое явно отличается от основного текста. Есть мощная врезка, мы ещё это называем крик, потому что этот крупный текст кричит на нас по сравнению с основным текстом. Здесь ещё есть черепушка, но это отдельная история. Она скорее для создания настроения и для того, чтобы в целом выделить разворот по сравнению с остальным журналом.
Когда я попадаю на этот разворот, я первым делом обращаю внимание на эти элементы. Если редакция молодцы, они в этих штуках пишут что‑то интересное, интригующее или полезное для читателя, и благодаря этому я понимаю, что неплохо бы прочитать, что здесь вокруг происходит.
Вот ещё пример разворота журнала «Генеральный директор»:
Здесь есть суперзаметный крик. Когда я попадаю на этот разворот, я сразу замечаю: «Что это здесь за расходы? Ничего себе, как много денег тратят. Значит, надо почитать, что здесь про медицину пишут».
Вот ещё один разворот журнала «Юрист компании»:
Здесь тоже два элемента для привлечения внимания. Во‑первых, фраза бывшего генпрокурора Чайки, что должно привлечь внимание юриста. И цифра месяца: «Офигеть, 900 тысяч проверок не согласовала прокуратура. Надо срочно про это прочитать».
Надо помнить, что любые врезки, цитаты, другие элементы, про которые мы чуть позже поговорим, — это, как правило, что‑то крупное, заметное, тяжёлое. Это такие якорные объекты. И располагать их нужно соответственно.
Перед нами разворот универсального номера, который мы в своё время задизайнили для «Актиона», на основе которого дизайнятся их другие, настоящие журналы:
Посмотрите, как мы показали схему размещения фактоидов и врезок. Они обязательно в углах формата, а не где‑то ещё. Вот, например, они находятся в углах своих модулей, и никак иначе:
Не может фактоид болтаться где‑нибудь посередине. Он обязательно прижмётся к краю.
Вот ещё:
Причём здесь есть такая подвёрстка «На заметку». Это тоже якорный объект, и он прижался к нижнему краю полосы.
Следующий, причём один из самых интересных, элемент для привлечения внимания — это фактоиды. Вообще фактоид — это газетная утка на языке газетчиков, какой‑то факт, который никто не проверил и который может быть лживым.
Но мы фактоидами называем какие‑то заметные и ёмкие информационные блоки, чаще всего с большой цифрой, которая должна привлечь внимание читателя. В данном случае это разворот журнала «Финансовый директор»:
У нас здесь фактоид, который призван повысить интерес к этой новости: «97 банков лишилось лицензий в 2016 году». Скорее читайте эту новость, чтобы разобраться, не коснётся ли это вас.
Есть специальный жанр, который мы изобрели во время работы над главной страницей сайта «Гетвеара» — промофактоид:
«Гетвеар» — это компания, которая производила джинсы и позволяла создавать свой собственный дизайн. Мы им в какой‑то момент задизайнили новую главную страницу, на которой были показаны всякие джинсы. Сначала у нас здесь были просто джинсы, джинсы… Несмотря на то, что ты сюда пришёл за джинсами, рано или поздно от них устаёшь. И мы придумали, что можно выдачу разнообразить вот такими информационными блоками:
Но почему я это называю промофактоид? А потому что если в «Финансовом директоре» фактоид про 97 банков выполнял чисто информационную функцию, то здесь фактоиды призваны помочь клиенту решиться купить джинсы у «Гетвеара» Посмотрите на их содержание. Мы берём и рассказываем, что здесь настоящий деним, прочный, мало протирается, и приглашаем почитать о качестве ткани, из которой делаем джинсы. «А ещё смотрите, какая у нас классная фурнитура и латунные пуговицы, как быстро можно снять мерку. У нас есть видеоинструкции, и потом джинсы будут сидеть идеально». Мы ещё придумали серию каких‑то фактоидов.
Промофактоид помогает продать какой‑то товар или продукт. Это очень хорошая штука для интернет‑магазинов, потому что таким интересным образом можно разнообразить выдачу товаров и одновременно донести факты, которые могут помочь клиенту решиться на покупку. Скажем, рассказать о выгодных условиях доставки, о супервыгодной гарантии или о том, что телевизоры, которые вы продаёте, умеют готовить пиццу.
С помощью таких вещей можно донести до читателя полезные штуки. В частности, на сайте «Лавишустринга» мы рассказывали не только о том, какие клёвые предметы мы продаём, но и как о них заботиться:
Мы зашли на страницу какой‑то тарелки или блюда. Здесь описано, как об этом блюде заботиться — как его мыть и чего избегать. Какая‑то горячая вода — это хорошо или плохо, можно ли губку, лучше не совать в посудомойку. Всё в таком духе.
Об этом, конечно же, можно было сделать специальный блок или целую страницу на сайте, но, во‑первых, никто не приходит специально ради этих страниц в интернет‑магазин. Нет совершенно никакой гарантии, что пользователь до этой страницы дойдёт. А вот он пришёл смотреть телевизор или тарелки. И если мы ему между делом какие‑то интересные факты подсунем, то есть шанс, что он их заметит, прочитает и, может быть, перейдёт на полную страницу с рассказом о том, что мы хотим ему сказать. Но в целом те интересные штуки, которые мы ему хотим сообщить, он увидит. Особенно это полезно на странице конкретного товара, потому что именно здесь пользователь принимает решение о покупке, здесь кнопка «Купить». Здесь клиенту лучше всего рассказать о том, как мы эту тарелку доставим, как о ней заботиться, какая гарантия. То есть не нужно ждать, что пользователь пойдёт в меню, найдёт раздел «О доставке» или «Гарантия» и всё это прочитает, а потом на эту страницу вернётся. Такое может случиться, но вероятность не очень высокая. Поэтому логично об этом рассказать сразу на странице товара и упомянуть в каталоге. Для этого пригодятся промофактоиды.
Вот перед нами каталог «Мэри Трюфель»:
Здесь мы точно так же использовали фактоиды. С помощью них мы решали не только задачу повысить шансы продать платье невесте. Ещё мы использовали их, чтобы повысить позицию сайта в поисковой выдаче. Как все наверняка знают, вероятность того, что я увижу сайт в поисковой выдаче, тем выше, чем больше на нём совпадений с моим поисковым запросом. Есть такая профессия сеошника, который генерирует ужасные тексты на сайты. В них какой‑то бессмысленный для обычного читателя набор слов с ключевыми словами для поисковиков: «бесплатно без эсемес платье с длинным шлейфом», «короткие платья», «бальные платья».
К нам пришёл «Мэри Трюфель» и сказал: «Ребята, нам нужна новая версия сайта и очень важно, чтобы он не проваливался в поисковой выдаче. Наш сеошник говорит, что надо почаще использовать на сайте ключевые слова». Всё понятно, но очень не хочется фигачить на красивый сайт заботливого салона нечеловеческие сеошные тексты. Клиент говорит: «Да, конечно же, не хочется! Но как быть?»
И в этот момент мы придумали такую штуку, как сеопромофактоид:
Мы просто раскидали по странице компактные блоки текста с полезными инструкциями. Подборка посвящена платьям с длинным шлейфом. И здесь мы рассказываем: «Если у вас длинный шлейф, то мы сделаем то‑то». Мы показали заботу салона и использовали ключевые слова «длинный шлейф». Таким образом мы ублажили сеошника.
Таких фактоидов на разных страницах, в разных подборках и каталогах мы придумали очень‑очень много, и в них обязательно присутствовали ключевые слова. Получилось, что и сеошник доволен, потому что ключевые слова есть, и пользователь видит для себя что‑то полезное. И салон выиграл, потому что мы рассказали о нём с выгодной стороны.
Частный случай фактоида — это ценник. Здесь я предлагаю посмотреть на то, какие они бывают. Они бывают самые разные:
Последний, правда, не совсем ценник, но мог бы быть ценником. Просто большие цифры.
И так далее:
С этой точки зрения польза фактоида в том, что обычно это какая‑то заметная штука, и хорошо, если она выразительная. То есть фактоид может стать носителем фирменного стиля вашей компании или продукта. Это то самое место, где можно как‑то специально поразвлекаться с вёрсткой, подобрать выразительный шрифт, контрастные соотношения между размерами элементов. В результате получается красивый кусок, на который приятно смотреть:
Вот они все рядом:
Следующий элемент — это уши:
Почему это называется уши? Просто представьте себе заячьи ушки, которые торчат из‑за какого‑то кустика. Точно так же в макете вы можете удобно использовать торчащие откуда‑то небольшие информационные блоки.
Вот перед нами шапка сайта «Эдвик». Смотрите, как классно встали маленькие торчащие из‑за шапки штучки. Таким образом очень клёво можно доносить полезную информацию, анонсировать новости, подсовывать товары.
Ушки приятно развлекают читателя, привлекают к себе внимание и при этом не требуют супермегасистемности и подчинения всей остальной вёрстке вашего макета.
Давайте просто посмотрим примеры. Вот обложка «Блумберга»:
В роли ушек выступают маленькие анонсы наверху. Посмотрите, какие они клёвые и разнообразные.
Во‑первых, они классно выделяются на фоне суперогромной главной статьи номера. Я ни за что не спутаю их друг с другом, и видно, где самое важное. При этом ушки ещё внутри себя отличаются. Есть какая‑то самая важная статья, она набрана капсом, есть какие‑то менее важные. Есть совсем неважные, объединённые под общей рубрикой, есть просто анонсы с номером страницы.
Вот журнал «Фальтер»:
Посмотрим на нижнюю страницу. Здесь тоже вокруг шапки, вокруг логотипа «Фальтера» появилась пачка ушек с анонсами материалов, которые внутри этого номера есть. Они прикольные, цветные плашки. Опять же, что‑то главное, что‑то второстепенное. Где‑то ещё даже иллюстрации есть.
А вот несколько полос приложения к «Гардиану»:
Посмотрите, как по‑разному можно сверстать ушки. Можно сверстать в линию:
А можно в колонках:
Обратите внимание, как классно попугай выскочил и даже заиграл с самим заголовком приложения.
Здесь тоже ребята поиграли:
На самом деле Хью Деннис относится к материалу в левом верхнем углу, но встал под ним. Конечно, он очень сильно связывается с заголовком Family, но в порядке исключения так можно иногда сделать.
Здесь ушек нет, здесь вместо них мегаанонс статьи:
Вот классные ушки в основной газете «Гардиана»:
Сначала может показаться, что здесь хаос и всё туда‑сюда скачет, на самом деле всё очень классно структурировано. Давайте проанализируем. Какая‑то статья с участием американского флага довольно неплохо замодулизирована — прямоугольник считывается. Потом статья про Джуди Денч немного влезла в чужие модули, но конструкция считывается, во многом благодаря тому, что Джуди Денч смотрит прямо на свой текст. То есть связь между ними очень хорошо считывается.
Оставшиеся два модуля тоже без проблем читаются, потому что чередуются: то картинка сверху, то картинка снизу. Если на секунду представить, что всё бы сверстали просто аккуратно — все картинки сверху, а текст снизу, — то картинки связались бы друг с другом гораздо сильнее, чем со своим текстом, выглядело бы всё гораздо скучнее. Здесь просто была бы полоса картинок, полоса текста, а потом ещё полоса с логотипом газеты.
Вот классные ушки на сайте «Гардиана», посвящённые анализу того, как президентствовал Трамп в свои первые сто дней:
Как много сразу классных интересных фактов. Здесь показано в очень забавной и интригующей манере: сколько твитов написал, обещанную стену так не построил, кого‑то успел уволить, в Белом доме ночевал не очень много раз, столько‑то законов Обамы отменил, ещё кого‑то обидел.
Ушки — очень хороший формат, чтобы такие, может быть, даже не связанные факты на читателей и пользователей вываливать.
Вот ушки на сайте «Лавишустринга»:
Здесь главная страница — это прямо такая витрина. Есть главная коллекция, самые существенные подразделы, а дальше продолжаются тарелки, конкретные предметы, ещё что‑то, подборки, тарелки, а в конце полный каталог на всякий случай:
Мы это задизайнили. Выглядело так:
Клиент говорит: «Ребята, всё очень клёво, но мы переживаем, что читатель, зайдя на эту страницу, не видит, сколько всего классного у нас в принципе есть. То есть ему нужно всю страницу прокрутить, вникнуть, запомнить, потом что‑то для себя найти. Как бы нам всё‑таки сделать так, чтобы на него это выпрыгивало?»
Мы, конечно же, сказали клиенту, что есть меню, на которое можно нажать и всё это увидеть, но клиент резонно возразил, что клик в меню — это очень дорогое действие и совершенно не обязательно покупатель его выполнит. Хочется, чтобы он без всяких дополнительных действий увидел, что у нас есть. В этот момент мы придумали эти ушки. Просто взяли и здесь в такой разнообразной манере показали, что в принципе на «Лавишустринге» есть. Конечно же, мы таким образом показали далеко не все категории, но подобрали так, чтобы сразу было видно, что у нас и украшения, и кувшины, и освещение, и мебель, и стаканы, и вилки с ложками. Сразу ощущение, что здесь дофига всего. Благодаря этому и главная страница стала выглядеть интереснее, и мы задачу клиента выполнили.
Вот пример ушек в какой‑то газете:
Просто смотрите: у нас вся передовица посвящена какому‑то материалу: есть заголовок, иллюстрации. Всё‑таки хочется показать, что ещё в этом номере в газете есть. И на помощь приходят ушки для микроанонсов статей.
Вот ушки на каком‑то плюс‑минус древнем сайте «Эпла»:
Они здесь, в отличие от предыдущих примеров, торчат не сверху, а снизу. То есть «Эпл» берёт и говорит: «Самая главная тема сегодняшнего дня — вышел „Айпад Эйр“, а вообще‑то у нас ещё есть какие‑то продукты». Тоже хорошо подходит. Причём «Эпл» довольно регулярно менял содержание этих ушек: то они рассказывали про операционную систему, то про недавно прошедшую презентацию.
Вот ушки на сайте «Олимпиады.ру»:
История их появления довольно похожа на то, что было в «Лавишустринге». Мы задизайнили сайт. Вся главная страница состояла из анонсов статей и предстоящих олимпиад. Но клиент говорит: «Ребята, всё круто, но у нас есть серия системообразующих статей. Мы очень хотели бы, чтобы новые пользователи начинали своё знакомство с них — сначала читали эти статьи, а потом уже шли смотреть, какие олимпиады сейчас проходят». Можно было сделать целый этаж про это, но он оказался бы где‑то не на самом верху, а по смыслу вроде бы надо на самом верху. Он, скорее всего, занимал бы довольно прилично драгоценного места, которое хочется потратить на анонс актуальных мероприятий.
В этот момент на помощь тоже пришли ушки — и мы эти главные статьи показали.
Ещё пачка ушек в «Учёт. Налоги. Право»:
Пожалуйста, смотрите, как мы на передовице газеты вываливаем какие‑то материалы или статьи и с помощью ушек анонсируем ещё больше этих материалов. Можно сверстать так, чтобы выглядело разнообразно и интересно и глазу непременно удалось за что‑то зацепиться.
Или можно более спокойно, если, например, у редакции нет времени дизайнить какую‑то сложную колончатую вёрстку с иконками и фотографиями:
Вот эти ушки мы уже видели — господ, которые торчали на главной странице «Яндекса» во время выборов:
Мы говорили о том, что ребята вытянули содержание в линию, но как смысловой формат это в том числе и ушки.