Привлечь и удержать внимание читателя
На курсе рассказывал о разнице между иллюстрациями и декорациями, с неожиданными примерами:
Еще об иллюстрациях и декорациях:
На примере статьи о танцах
На примере передовицы онлайнового СМИ
На примере статьи о переговорах
На песиках
Даша, по поводу твоей статьи про планировку российских микрорайонов.
Ты хочешь рассказать, что обычно в российских дворах всё чужое, дома стоят абы как, площадка одинокая и далеко, и всё это вроде как чужое и неудобное, и машины обложили со всех сторон. И есть способ это исправить: покупайте квартиры в нашем квартале.
Когда ты это просто рассказываешь текстом, получается ненаглядно. Надо подключить визуальную последовательность. Это когда ты с помощью простых визуальных элементов рассказываешь всё более сложную историю.
Первый шаг — давай изобразим каркас: чужую землю, дома, машины и детскую площадку. Маленькие участки «своей» земли возле подъездов и на площадке. Я накидаю схематично, а ты сделаешь с дизайнером:
Теперь ты приводишь пример инициативного совета дома, который ставит забор и занимается благоустройством двора. Чтобы это стало наглядным, нарисуем это и покрасим «свою» землю. Она должна выглядеть зелененькой, потому что зелененькое — это хорошо.
Смотри, получается наглядно. Достаточно одного взгляда, чтобы понять: «Стало лучше, зеленее, молодцы».
Это работает, потому что мы не поменяли положение домов: это вроде как тот же район, просто улучшенный с помощью забора. Изменилось мало, поэтому читатель поспевает за твоей мыслью
Дальше в том же духе: рисуешь свой квартал с красивой застройкой, парковками, деревцами, котятами и прочим. Главное — чтобы зеленого было много, машинки стояли ровными рядами и не заезжали на детскую площадку. Я нафантазирую, а ты сделай как правильно:
У меня картинка уродливая, но передаёт смысл: зелененького много, машинок много, детских площадок много, аптечки всякие. Можно наворачивать: объекты инфраструктуры обозначать красивыми иконками, добавлять новые объекты, придумать ход для подземной парковки. Это мы с тобой потом придумаем. Главное было добиться наглядности.
За счет чего здесь получается наглядность:
Короче:
Объясняй сложные штуки с помощью наглядных схем. Сначала обучи визуальному языку, потом составляй всё более сложные предложения.
Вот статьи и лекции, с которыми следует познакомиться, чтобы начать въезжать в тему управления вниманием. Это основы, а здесь на сайте будет развитие темы. Выстроены от простого к сложному, рекомендую знакомиться в том порядке, в котором они тут представлены:
Основы дизайна текста для редактора — лекция в «Республике», на примере серых черточек и заголовков создаем считываемый смысл.
Вёрстка печатного издания — то же самое, только в виде совета.
Редакторская гигиена — деление на абзацы, диагональное считывание и другие необходимые знания. Короткий вебинар.
Принцип контраста и заголовок — выпуск продвинутого курса Главреда
Демонстрации в рекламе — лекция на «Просмотре». О блендерах и алгоритмах сжатия.
Элементы управления вниманием + проклятие инструмента. Как и зачем избегать многоколонников и прочей ерунды.
Картинка и иллюстрация — не путать.
Иллюстрация и декорация — глубокое погружение.
Практика: информационная статья — все знания на практике.
Подписывайтесь на Телеграм, чтобы не пропустить новые материалы о дизайне текста, драматургии и управлении вниманием.
Студентка второй ступени Школы редакторов Диляра сдала на прошлой неделе промостраницу вот с таким узлом. Он классный:
Что здесь хорошего:
Есть мелкие замечания:
Но если это исправить, принципиально ничего не изменится, по-прежнему мило:
Здорово, когда правила применены не механически, а с любовью. Диляра, спасибо!
Леха, я был неправ. Прежде чем рассказывать тебе про пёсиков, я должен был объяснить матчасть. Прости меня и позволь сделать это, пока не поздно.
Смотри, есть картинки и есть иллюстрации. Это разные вещи.
Картинки — это просто прямоугольники с пикселями. Фотография, коллаж, рисунок, скриншот — всё это картинки. Даже прямоугольник с белым шумом — это картинка.
Иллюстрация — это любой элемент статьи, который раскрывает мысль автора с помощью обращения к чувственному опыту. Иллюстрация может быть сделана с помощью картинки, а может быть с помощью таблицы, схемы и даже текстового примера. Главное — чтобы она раскрывала авторскую мысль.
Непонятно? Давай на примере. Возьмем наполненную неловкостью фотографию из фотостока:
Сейчас это просто картинка в формате джипег. Сама по себе она ничего не значит. Читатель может увидеть в ней переговоры, дружбу народов, Хиллари Клинтон, завещание, «Роснефть», ущемление прав коренных народов, творческую импотенцию и что угодно еще. Но конкретно в этой нашей статье эта картинка еще ничего не значит. Это просто картинка, прямоугольник с пикселями.
Чтобы эта картинка стала иллюстрацией, она должна встать в текст и раскрыть авторскую мысль. Например, это отличная иллюстрация для статьи о неестественных позах в фотографии:
Сейчас ты думаешь, что эта фотография гораздо лучше подошла бы для статьи о переговорах. Но это как посмотреть. Если мы говорим, например, об одежде на переговорах — может быть:
Такая иллюстрация работает, потому что рассматривая ее, человек лучше понимает содержание твоей статьи. Ты пишешь об одежде: «Если вы босс, одевайтесь в черное; если помощник — в светлое. Так будет понятно, кто есть кто». Я смотрю на твою фотографию, вижу черный и светлый костюм, и убеждаюсь в твоих словах. Иллюстрация работает, потому что она помогает раскрыть мысль автора с помощью обращения к чувственному опыту.
А ты хотел, наверное, как-то так?
У тебя раздел о принципе «не в порядке», а иллюстрация непонятно о чем. Какую мысль она раскрывает? Что доказывает? В чем я смогу убедиться, рассматривая твою иллюстрацию? Ни в чем. Это та же ситуация, как с твоими песиками — ты поставил картинку, чтобы отвлечь внимание, а не чтобы проиллюстрировать мысль.
Но я понимаю твою боль. Статью о переговорах трудно проиллюстрировать фотографией — ведь важно не то, как люди выглядят, а то, что они говорят. А как проиллюстрировать разговор? Хм... Вот бы был инструмент, чтобы иллюстрировать то, что люди говорят...
Внезапно мы проиллюстрировали статью не картинкой, а текстом: примерами фраз, которые помогут стать «не в порядке» на переговорах. Этот текст — полноценная иллюстрация: она помогает раскрыть мысль автора с помощью обращения к чувственному опыту.
Чтобы иллюстрация была мощнее, добавим антипримеры:
Теперь я не только знаю, как правильно, но и могу поймать себя на ошибке. Всё благодаря иллюстрациям. А теперь сравни со своей картинкой с фотостока. Могу ли я из нее понять всё то, что я передал на иллюстрации текстом?
В этом разница между картинкой и иллюстрацией:
Хорошая иллюстрация может быть не только картинкой, но и текстом, таблицей, схемой и чем угодно ещё. Главное — чтобы она раскрывала мысль автора
P. S. Фотосточные картинки, как правило, плохо работают как иллюстрации, потому что они изначально создаются в отрыве от твоей статьи. Ну что могут рассказать о переговорах в России напомаженные американские фотомодели в арендованных костюмах?
Поэтому я на фотостоке стараюсь брать либо фотографии природы, либо предметов, но не людей. Съемки с коптера над озером Байкал можно брать с фотостока, Байкал он и есть Байкал. Фотографию дуриана для статьи об экзотических фруктах — без проблем. А вот фотографии людей — только в комедийных целях. Но это я так делаю. Ты, конечно, делай как хочешь.
Почитай еще на эту тему:
Гау-гау. Разбираю по работе статью о пёсиках на даче. Написал ее, допустим, Леха. И есть там, допустим, вот такой узел:
Обычно Леха в этот момент запаникует, потому что это же СПЛОШНОЙ ТЕКСТ ААА НИКТО ЭТО НЕ БУДЕТ ЧИТАТЬ ПОКОЛЕНИЕ ИНСТАГРАМА КЛИПОВОЕ МЫШЛЕНИЕ ГДЕ МОЙ БЛОКЧЕЙН СПИНЕР СТАВЬ ГНОЙНЫЙ ЛОЙС и разбавит этот текст картинкой. Так как раздел касается машин, он загуглит dog car, ну и вот:
Это изображение похоже на иллюстрацию, но это не иллюстрация. Это просто отвлеченная картинка, которая отдаленно касается заявленной темы. Она не дополняет, а именно разбавляет текст. В терминах инфостиля это мусорная картинка: она занимает место, но не несёт смысла.
Леха! Чтобы картинка не была мусорной, её нужно заменить на что-то, что будет дополнять раздел по смыслу. Например, чтобы приготовить машину к собаке, нужно постелить гамак. Гамаки бывают с бортами и без. Вот тебе и материал для иллюстрирования:
Леха, обрати внимание: когда это была просто картинка без смысла, ты не мог никак ее подписать. Ну что ты там напишешь? «Собака высунулась из окна, типа едет»? Ерунда какая-то. А когда ты добавил гамаки, то уже есть о чем рассказывать в подписи. Потому что первая картинка была бессмысленной, никак не помогала твоему тексту. А во втором варианте картинки осмысленные и помогают.
Но о подписях еще поговорим, подпишись на Телеграмчик, чтобы не пропустить.
Леха, дорогой. Я понимаю, что тебя учили, что в тексте должны быть фоточки, типа чтобы привлекать внимание читателя. Но смотри: привлекать внимание и отвлекать внимание — разные вещи. То, что ты сделал сначала — это отвлечение внимания. А надо привлекать.
Фотка из первой страницы выдачи Гугла — это не так привлекательно, как тебе показалось сначала. Наоборот: сразу видно, что тут работал халтурщик, который даже фотографии не удосужился подобрать.
Если у тебя статья настолько плоха, что ее могут спасти только картиночки — надо работать над статьей, а не разбавлять. Разбавленное дерьмо — всё еще дерьмо.
А если статья интересная сама по себе, то не нужно ее разбавлять. Ты так просто отвлекаешь читателя, он быстрее устает и с большей вероятностью уйдет из статьи.
Конечно, если статья суперинтересная, ты ее ничем не испортишь, а читатель дойдет до конца. Почитай о статье, которая не заигрывала — она интересная, хорошо структурированная, и держит внимание читателя без необходимости разбавлять.
Короче:
Не разбавляй статью фотками из Гугла. Либо иллюстрируй по смыслу, либо не отвлекай читателя
P. S. Читатель, конечно, ничего этого тебе не скажет. Он просто увидит халтурные фотографии и слабенькую тему — и закроет статью. Так что не обижайся, Лёха.
Смотрю вчера «Доктора кто». Следите за глаголами.
Шотландия, времена римских завоеваний. Большая злобная креветка бродит по лесу и убивает без разбору римлян и кельтов.
В начале показывают один труп, который остался после встречи с этой креветкой. Зритель понимает, что креветка явно инопланетная и сильная, потому что ничто на земле так не убивает людей. Это первое сообщение. Пока что интересно.
Дальше показывают целое поле, уложенное римскими солдатами. «Это вон та креветка всех положила», — говорят местные жители. Зритель понимает, что креветка еще и эффективная. Это второе сообщение. Стало интереснее.
В конце первого акта креветка чуть-чуть куснула главную героиню. Так зритель понимает, что креветка представляет конкретную опасность для близких, нарушила нейтралитет по отношению к нам и потому заслуживает возмездия с нашей стороны. Это третье сообщение, теперь всё готово для решительных действий.
Сейчас мы ожидаем, что Доктор будет наказывать креветку за то, что она всех съела. Но в «Докторе Кто» стараются не реализовывать главных героев через месть. Доктор обязательно должен нести гуманитарную миссию — не мстить за конкретных людей, а действовать во благо всего человечества. Поэтому в начале третьего акта потребовалось перенести конфликт на весь мир.
И вот все стоят в кельтской хижине и Доктор говорит: «Эта креветка тусует в разломах пространства-времени и периодически вылезает и начинает жрать. Она сейчас вас всех сожрет, потом ваш мир сожрет, потом Солнце, потом все звезды, и наступит вам, ребята, ад и темень». По идее зритель должен понять, что креветка представляет угрозу для всего человечества. Но вместо этого зритель скучает, потому что весь монолог про конец света произносится в одно лицо при свете факелов.
В этот момент серия становится унылой. Раньше нам показывали, какая креветка плохая. Теперь нам об этом рассказывают.
Я не знаю, как правильно поступать в таких случаях, но кажется, что надо так: креветку находят на опушке, когда она колдует, глядя на Солнце. Доктор: «Ой, она заряжается энергией Солнца». И солнышко такое мырг-мырг, типа погасло немного. И вот тогда: «Если ее не остановить, она съест Солнце, и вам конец, земляне». В идеале — чтобы во время зарядки к ней из разломов пришли четыре подружки, типа их там целая армия, и они сейчас сюда высадятся пожирать наше Солнце. Так зритель поймёт, что креветки опасны.
Я не специалист, но, кажется, работает так:
Чтобы зритель что-то понял, ему надо это показать.
Есть такое понятие — визуальная иерархия. Она показывает, кто кому начальник. Есть много инструментов для создания визуальной иерархии, один из них — размер.
Общие правила: что больше, то важнее. Когда всё одинаково большое, всё одинаковое по важности. Чем больше контраст размеров, тем заметнее иерархия.
Вот страница. Глаз мгновенно видит отношение двух прямоугольников: один большой и важный, второй поменьше и потому менее важный.
Приблизим к жизни. Допустим, у нас рассказ о какой-нибудь диджейской штуке
Уже по тому, какого размера здесь фотографии, становится очевидна иерархия: мелкая штука — это деталь большой или имеет к ней какое-то отношение.
Еще бесит белая дыра под заголовком, но о ней потом.
Увеличиваем Мурку, И ВНЕЗАПНО ОНА БРОСАЕТ ВЫЗОВ БАРСИКУ КОРМИЛЬЦУ НАШЕМУ ОПЛОТУ СТАБИЛЬНОСТИ В МИРЕ КОТИКОВ:
Переносим в реальный мир, мозг немного ломается. Почему электромагнитный мотор такого же размера? Очевидно же, что масштаб фотографий слишком разный. Это выглядит неестественно:
Такая конструкция нормально смотрится, когда фотографии одноранговые: если это фотоальбом, галерея продукта, фотоотчет о мероприятии — и то когда фотографии одинаковые по важности. А то ведь и в путешествии могут быть более важные фотографии и какие-то побочные. В нашем случае явно беда: моторчик относится к Нюмарку, а ведет себя так, будто он такой же важный.
Вернемся к исходному варианту, где Барсик был главным. Но теперь Барсика немного уменьшим, а Мурку немного увеличим. Барсик всё ещё больше Мурки, но теперь иерархия не так очевидна. Похоже на бирмановское «Почти, но не совсем».
А теперь наоборот:
Причем в жизни может оказаться, что тебе не хватит физических размеров экрана, чтобы задать достаточный контраст. Тогда можно вылезать за рамки:
Люблю такое. И заодно решили проблему с белой дырой под заголовком. Но её можно было решить и более системно: запрямоуголить фотографию контроллера, подложив под него какой-нибудь вырвиглазный фон. Тогда вся фотография контроллера выглядела бы как прямоугольник, и его можно было бы ставить в общую вёрстку именно как прямоугольник, а не как нечто, вокруг чего нужно плясать.
В статьях представьте, что фотографии у вас играют роль заголовков и подзаголовков. Заголовок статьи — большая фотография на всю ширину. Подзаголовок — фотография поменьше. Под-подзаголовок или заголовок в подбор — фотография шириной с основную колонку. Всё что мельче — на полях.
Для галерей и фотоальбомов, где все фотографии одинаково важны, есть смысл делать все фотографии одинакового размера. Но если есть какая-то главная фотография — её можно сделать больше остальных. Если периодически хочется продать читателю царь-фотку — её тоже можно сделать большую под обрез.
На промостраницах следите за смыслом. Если показываете продукт в руках клиента как бы в целом — наверное, нужна большая фотография. Если показываете какую-то деталь — наверное, есть смысл сделать поменьше. Если у вас на промостранице все фотографии одинаково большие, это скорее плохо, чем хорошо — читатель не поймёт, что главное, и быстро устанет.
Короче, не тупите:
Главное большим, второстепенное мельче
А если у вас на странице всё главное — то у вас проблема с изложением, а не с размером фотографий.
Из травмпункта доносится возмущенный вопль (кажется, дизайнерский), что на мобилке все картинки будут выглядеть одинаково. Это, конечно, плохо. Верстать под мобилку надо так, чтобы визуальная иерархия в каком-то виде сохранялась:
Это, конечно, не все соображения о вёрстке фотографий. Но надо же и работу работать. До скорого!
Жил-был мальчик, звали его Пол Грэм. Однажды в 2004 году Пол Грэм написал статью о том, о чём неприлично говорить. И хотя это было 13 лет назад, уже по тем временам статья выглядела не по-журнальному:
Если бы Пол хотел сделать её по-журнальному, он бы применил крики и выделения, чтобы как-то направить взгляд читателя, соблазнить его на чтение статьи:
А если бы он был хреновым копирайтером, то он бы обязательно снабдил статью второсортными иллюстрациями со слабенькими метафорами:
Но он ничего этого не сделал. Почему?
Дело в скучающем читателе.
Поставим рядом две статьи: Пола Грэма и из «Тинькофф-журнала». У Пола Грэма ровная колонка и подзаголовки, у нас иллюстрации, подзаги, врезы, всякие таблички и красота:
Если скучающий читатель придёт в «Тинькофф-журнал», мы его протащим по статье, бросим в него интересные цитаты, короче — развлечем. Нам нужны скучающие читатели, потому что у нас одна из задач — затягивать людей, делать финансовую тему более привлекательной.
Если скучающий читатель придёт в статью Пола, он сразу уйдет, она для него слишком сложная. Но Полу и не нужны скучающие читатели. Он их не развлекает, а прогоняет.
Правило такое: не надо делать из любой статьи цирк с конями. Есть ситуации, когда вам не нужно бороться за внимание скучающего читателя, и тогда можно просто написать спокойный текст. Иллюстрации — по необходимости.
А делают часто наоборот: прочитали где-то, что все статьи надо иллюстрировать, и давай лепить портреты Дикаприо. Делать так, конечно, не надо.
Короче:
Просто текст — тоже бывает нормально
Студенты в Школе редакторов недавно сдали промостраницы. Один из вариантов задания — рассказ о курсах кройки и шитья. Вот фрагмент одной из работ, речь идёт об этапах обучения:
Представим, что часть этого экрана несёт полезную информацию, а часть — бесполезную. Фотографии рассматривать интересно. Часть текста читать интересно. Остальное, получается, шум:
Чтобы страница производила лучшее впечатление, следует увеличить всё зелёное и уменьшить всё красное. Начнём с увеличения полезных фотографий:
В тексте есть проблема: огромный заголовок «Шаг №» неинформативный, а занимает кучу места. Гораздо лучше вынести в заголовок информативное ключевое слово, без номера и числа. А последовательность шагов и так понятна из последовательности блоков, лишний раз подчёркивать её в этом случае не нужно.
Но что за полумеры? Тексту тесно, фотография чуть-чуть не дошла до края. Надо дожать:
Текст теперь можно поставить между фотографиями, а можно прямо поверх, на плашку или блямбу. Так как текст короткий, его можно смело ставить вывороткой на круглую или многоугольную блямбу, всё прочитается:
Смотрим, сколько получилось полезного:
Правило такое: площадь экрана следует больше занимать полезными пикселями и меньше — бесполезными. Если на промостранице есть фотографии — их лучше сделать побольше. Если есть декоративные плашки — их поменьше.
Короче:
Фоточки побольше сделай
P. S. Вот как студентка сделала в итоге. Тоже хорошо: всё упорядочено, фотографии большие, заголовки выровнены. Можно фотографии сделать еще больше, а текст еще меньше, но так тоже симпатично:
