на каком фоне лучше воспринимается текст
Знаменитые дизайнеры vs научные исследования про читаемость шрифтов
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.
А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.
Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).
Почему я вообще этим занялась
Однажды мне нужно было написать инструкцию для джунов о том, как выбрать шрифт. Я написала, что для больших текстов лучше использовать шрифты с засечками, потому что глаза меньше устают от такого шрифта и засечки помогают держать строку.
Потом пришел редактор и откомментил: «Пруфы?»
«Да это же очевидно», — подумала я и открыла «Википедию»:
Согласно общепринятому мнению [источник не указан 1902 дня], засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста. Oни способствуют связи букв в единую линию, облегчая визуальное восприятие и удобочитаемость текста.
В «Википедии» пруфов не было, и я пошла к книжному шкафу.
На мой взгляд, шрифт с засечками меньше утомляет при долгом чтении обычных, «бумажных» изданий, чем гротеск, по двум причинам. Во-первых, засечки подчеркивают окончания штрихов, становясь дополнительными «смыслоразличителями». Во-вторых, буквы с засечками несколько сложнее по форме, поэтому сильнее отличаются друг от друга, чем гротесковые. А наш читательский глаз больше нуждается в балансе индивидуальности и унификации, чем дизайнерский, который радуется зеркальной вылизанности.
Юрий Гордон «Книга про буквы от Аа до Яя», Откуда взялись и зачем нужны засечки, стр. 51
Шрифт без засечек только кажется простейшим. Его форму специально упростили для детей, а взрослым его читать труднее, чем антикву, ведь ее засечки служат не только для украшения.
Ян Чихольд «Облик книги», О типографике, стр. 21
Ян Чихольд
Ну ладно, старинные мастера опирались на чутье, но, может, кто-то посовременнее объяснит с пруфами?
Сергей Сурганов, арт-директор «Медузы», дизайнер Notion:
Используйте шрифт с засечками для длинных текстов
Когда вы оформляете любой длинный текст (статью, резюме, письмо, инструкцию), стоит использовать шрифт с засечками, то есть антикву. Считается, что длинный текст, набранный таким шрифтом, легче читать. В традиционной книжной верстке тоже используются именно антиквы, поэтому если вы делаете что-то похожее, то выбор ясен.
Короче, у нас три довода:
«согласно общепринятому мнению»,
«на мой взгляд»,
«считается»,
…
Книги не помогли, и я попробовала разобраться с помощью научных статей, есть ли какие-то доказательства, что шрифт с засечками легче, быстрее или приятнее читать, чем шрифт без засечек. Конечно, это не полноценный научный обзор. Но лучше, чем «согласно общепринятому мнению». Ссылки на статьи есть в конце каждого раздела.
Понятия: разборчивость vs читаемость
Разборчивость (legibility) шрифта зависит от точности начертания его элементов, что обычно означает возможность распознавать отдельные буквы или слова.
Читаемость (readability) напрямую связана с оптимальной компоновкой и планом всего тела текста.
Засечки направляют взгляд по строке
«Википедия» и еще миллион дизайнерских статей говорят, что засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста.
Тут надо знать, что глаза не движутся плавно. Когда мы читаем или ищем какой-нибудь объект в поле зрения, глаза «скачут» от точки к точке, совершая быстрые движения, которые называются саккадами.
Видео про саккады
Более того, глаза совершают саккады, даже когда человек пытается сфокусироваться строго на одной точке.
Джаред Скрюз (Jaret Screws) провел эксперимент: попросил 10 человек прочитать несколько текстов и следил за движением их глаз с помощью специального оборудования.
Вот что получилось:
Измерили продолжительность фиксации взгляда, среднее количество слов между ними, амплитуду саккад и число раз, когда человек задерживался на одном и том же слове.
Все различия оказались незначительными. Ой.
Кажется, гипотеза о том, что взгляд движется легче по тексту, набранному шрифтом с засечками, не подтвердилась.
Шрифты с засечками и без засечек одинаково «держат» строку
Хотя тут есть подвох. В тесте использовался шрифт 128 pt. Это в десять раз больше, чем в обычной книге, и, возможно, исследование не очень корректно применять к обычному процессу чтения.
Детям, в отличие от взрослых, легче читать шрифт без засечек
Даже если это и не так, в это точно верят производители азбук. Попробуйте найти хоть одну азбуку с антиквой.
Детские азбуки с первой страницы Гугла
Ученые взяли 80 детей 10 лет и 80 детей на два года старше, попросили их найти в тексте нужное слово (скрининг-тест) и измерили, как быстро у детей получилось это сделать.
Контрольной группе оба раза давали одинаковый шрифт, а экспериментальной — сначала шрифт с засечками, а потом без
Различия получились статистически незначимые, и авторы говорят, что, кажется, нет никакой особенной разницы в разборчивости для детей шрифтов с засечками и без засечек.
А что насчет ребят с плохим зрением?
Исследований про слабовидящих людей и шрифт довольно много.
В Journal of Visual Impairment and Blindness было опубликован обзор 18 исследований, в которых общее количество испытуемых было более 1500 человек.
Вывод исследователей: для людей с плохим зрением шрифты без засечек, такие как Arial, Helvetica, Verdana или Adsans, более читаемые, чем шрифты с засечками.
The Legibility of Typefaces for Readers with Low Vision: A Research Review Elizabeth Russell-Minda, Jeffrey W. Jutai, J. Graham Strong, Kent A. Campbell, Deborah Gold, Lisa Pretty, and Lesley Wilmot.
Шрифты и дислексики
Людям с дислексией сложно читать. Может, удастся облегчить им жизнь с помощью каких-то шрифтов?
Страница, которая показывает текст так, как его видят люди с дислексией, на dyslexiarf.com
Ученые с помощью технологии, которая следит за движением глаз, исследовали 97 человек, у половины из которых была дислексия.
Им давали прочитать 12 похожих текстов, набранных разными шрифтами, измеряли скорость, количество и длительность остановок взгляда, понимание текста и с помощью опросников выясняли предпочтения пользователей.
На первое место по читаемости и у обычных людей, и у дислексиков вышел шрифт без засечек Arial (интересно, что схожая с ним до неразличимости Helvetica — на четвертом месте). Зато на втором месте неожиданно оказался моноширинный брусковый Courier.
Предпочтения же людей вообще однозначные: топ-3 шрифтов и у дислексиков, и у недислексиков — без засечек.
Эмоции и шрифты
Может, дело не в скорости чтения и разборчивости, а в особом настроении, которое создают шрифты с засечками?
В Лаборатории исследований юзабилити ПО в Wichita State University попробовали разобраться, как люди воспринимают шрифты.
Участники заполняли опросник, где указывали, какими, по их мнению, характеристиками обладают разные шрифты.
Интересно, что шрифты с засечками оказались первыми в рейтинге как формальные, «взрослые», практичные и стабильные. А шрифты без засечек оказались первыми в рейтинге… нигде. То есть у них не оказалось какого-то ярко выраженного эмоционального следа.
Для другого исследования взяли два сатирических отрывка из «Нью-Йорк Таймс»: один — о проблемах правительства, другой — о политике в образовании. Их напечатали в шрифтах Times New Roman и Arial одинакового размера и показали в случайном порядке 102 студентам университета, которые оценили их с помощью заранее заданных прилагательных.
Сатирические статьи, напечатанные Times New Roman, воспринимались как более смешные и злые, чем напечатанные Arial.
Скорее всего, это тот же эффект нейтральности шрифтов без засечек, что и в первом исследовании.
Значит ли это, что все шрифты без засечек — безликие? Вообще, нет, но нейтральный шрифт с засечками менее нейтральный, чем нейтральный шрифт без засечек.
Читаемость шрифтов на электронных экранах
Большинство текстов мы читаем с электронных экранов. Электронные устройства и даже разные программы на одном устройстве по-разному обрабатывают шрифты.
Разные типы сглаживания
Ученые попробовали разобраться, как влияет сглаживание на читаемость.
Сравнивали четыре шрифта, напечатанные на бумаге, на экране со сглаживанием и без сглаживания
Интересно, что самым читаемым оказался экранный шрифт со сглаживанием (а не напечатанный), и это шрифт без засечек — Arial. Второй после него — Verdana, тоже без засечек.
Зато без сглаживания лучше всего читалась Georgia — шрифт с засечками.
Выводы
В статье есть обзоры всего нескольких статей. Еще пару дюжин я просмотрела, но не стала включать в статью, чтобы не делать ее бесконечной. На самом деле их еще больше. Но результат во всех примерно один и тот же: или отличия оказываются статистически незначимыми, или гротески немного обгоняют антикву.
Если вас заинтересовала эта тема, можете провести собственное исследование: поискать на scholar.google.ru по запросу типа Font readability research. Там можно найти исследования и про оптимальный межстрочный интервал, и про восприятие разных начертаний шрифта, и про различия читаемости в зависимости от размера.
Вряд ли это поможет стать принципиально более хорошим дизайнером, но добавит весомых аргументов.
Какие цвета лучше всего подходят для чтения с монитора?
Большинство сайтов — это белый фон и чёрный текст. Мне не совсем удобно читать, когда белый фон светит в глаза, особенно вечером. Пробовал тёмный фон и светлые буквы — получается не очень. Может дело в шрифте?
Поэтому назрел вопрос: «Какие цветовые сочетания текста и фона лучше всего подходят для чтения с монитора?»
1. Контрастные цвета
В идеале это черный на белом, но как тут правильно пишут — яркий монитор будет белым бить по глазам. Лучше всего использовать не холодный белый, а теплый.
2. Специально спроектированные шрифты для мониторов
вроде верданы, тахомы, и пр.
В идеале не только спроектированный компьютерный шрифт или шрифт для веб, но и с отдельными глифами для каждого размера шрифта. Такие шрифты есть (мало, поищите, я даже не берусь назвать), они достаточно сглаженные даже с отключенным антиалиасингом, так как проектируются попиксельно, в т. ч. рассчитываются апроши, чтобы межбуквенное расстояние не гуляло, что тоже очень утомляет глаза и затрудняет чтение.
3. Отключенный или несильный антиалиасинг начертания
Да, с ним буквы выглядят симпатичнее, но глаз постоянно пытается сфокусироваться.
Из общих рекомендаций, если собираетесь много читать с монитора, то могу посоветовать также обратить внимание на интерлиньяж. Многие оставляют его по умолчанию, но для чтения он маловат. Сильно увеличивать тоже не стоит, так как будет теряться связь между строками, но скажем если автоматические мы имеем 12/14 pt, то лучше увеличить на 1 или 2 пункта, т. е. 12/16.
Мне не совсем удобно читать, когда белый фон светит в глаза, особенно вечером.
Что-то у меня сомнения в идеальности. Пруф, плиз;)
В сервисах для чтения (типа Pocket) есть тёмные темы. Если бы ч\б была идеальной зачем другие нужны.
Это конечно не совсем про чтение, но всё-таки: терминал чёрный по дефолту и у IDE много тёмных тем присутствует у некоторый по дефолту.
Яркость — на минимуме.
Любимая инфографика Авраама Линкольна и пять характерных качеств самых запоминающихся изображений
Дальнейшие размышления приводят к ещё одному вопросу:
Изображения запоминаются лучше текста, а о каких именно изображениях идёт речь?
Потратив некоторое время на сбор лучших исследовательских работ, связанных с изображениями, инфографиками и т. д., мы с удовольствием представляем вам результаты поисков, а также некоторые специфичные примеры использования этих знаний в сфере маркетинга!
Краткая статистика, отражающая силу визуальных образов
То, что картинки запоминаются лучше текста, является вполне подтвержденным фактом, хотя значения того, во сколько раз, варьируются от двух до шести раз. Проверяя эти данные, можно обнаружить множество интересных фактов. Приведем некоторые цифры, для которых удалось найти доказательства:
• Еще в 1894 году исследователи установили, что картинки запомнить легче, чем текст. Спустя какое-то время это открытие назвали эффектом превосходства изображений.
• 65% жителей нашей планеты являются визуалами. То есть образность помогает этим людям лучше понимать и запоминать информацию.
• По мнению ученого Алана Ф. Блэкуэлла, одно изображение заменяет примерно 84,1 слова. В его исследовании участники эксперимента создавали графические материалы, а затем описывали их словами. В среднем для описания одного изображения им требовалось 84,1 слова.
Получается, что одной картинкой нельзя заменить 1000 слов, хотя и результат в 84 слова является очень внушительным. Это значит, что вашему мозгу будет нужно переработать и запомнить меньшее количество информации.
Трудно точно определить, насколько легче запомнить наглядные графические материалы по сравнению с текстовыми, однако, с уверенностью можно сказать, что иллюстрации существенно облегчают работу памяти. Давайте рассмотрим, что делает изображение запоминающимся, и как вам можно использовать это в своих интересах.
Почему иллюстрации сохраняются в памяти лучше, чем слова
Американский президент Авраам Линкольн, вошедший в историю, благодаря своим выразительным речам, как известно, был особенно зациклен на одном изображении.
Речь идёт о созданной в 1861 году карте Южных штатов, на которой оттенками черного, серого и белого цветов было показано количество рабовладельцев в разных регионах страны.
Эта карта была настолько важна для Линкольна, что даже попала в портрет кисти Фрэнсиса Бикнелла Карпентера, на котором изображён президент и члены его кабинета (карту видно в правой нижней части холста).
Благодаря ей, Линкольн имел чёткое представление о том, какие из штатов захотят отделиться, а какие можно убедить остаться в составе Союза. Эта карта является одним из наиболее ранних примеров инфографики.
В настоящее время наглядные материалы делают для нас то же, что и для Линкольна в те дни: помогают быстро обрабатывать сложную информацию.
Согласно оксфордскому справочнику по когнитивной психологии, примерно половина нашего мозга занимается обработкой визуальной информации. Этим объясняется способность человека так быстро декодировать изображения.
Факты говорят о том, что в памяти человека сохраняется примерно 80% увиденного или сделанного, но только 30% прочитанного и 10% услышанного.
Всё сказанное выше подтверждает, что графические образы воспринимаются и запоминаются легче, чем текст, однако, не все изображения одинаковы. Поэтому ниже — анализ того, что делает визуализацию запоминающейся. Надеемся, это поможет вам выбрать оптимальное изображение.
1. Выбирайте гармоничные цвета
В одном из исследований учёные выяснили, что цвета помогают мозгу быстро обрабатывать и идентифицировать увиденные объекты. В обсуждении, посвящённом выбору оптимального цвета для бренда, исполнительный директор Color Association Лесли Харрингтон заметил:
Цвет является самым запоминающимся свойством. Именно его мы видим в первую очередь.
Оказывается, правильно подобранные цвета увеличивают узнаваемость бренда на 80%.
Рассмотрим бледно-голубой цвет символики компании Tiffany&Co. В настоящее время этот оттенок до такой степени ассоциируется с данным брендом, что руководство компании приняло решение зарегистрировать его в качестве товарного знака под названием Тиффани-блю (Tiffany blue).
Ещё можно привести пример для любителей спорта — ярко-оранжевый цвет символики Университета штата Теннесси, который по классификации Pantone называется UT Orange. В обоих случаях цвет является неотъемлемой составляющей бренда.
Цветная символика не только влияет на узнаваемость бренда, но и намного лучше откладывается в памяти по сравнению с черно-белыми изображениями. Но это не значит, что вам нужно раскрасить всё, что можно в самые яркие цвета. Изображения легче всего запоминаются, если они похожи на то, что мы видим в природе, так что — не перестарайтесь с неоновой подсветкой.
Также следует иметь в виду, что, согласно данным Национального института глаз (National Eye Institute), около 8% мужчин и 0,5% женщин являются дальтониками, и с трудом отличают красный цвет от зелёного. В то же время, почти все люди могут видеть синий цвет, и по этой причине он идеально подходит для гиперссылок.
При выборе многоцветного изображения учитывайте открытый профессорами из университета Южной Флориды факт: гармоничные сочетания цветов сохраняются в памяти лучше, чем негармоничные. В этом случае различные оттенки зеленого цвета работают эффективнее, чем нагромождение розового, желтого и голубого. Гармоничные цвета лучше воспринимаются мозгом, благодаря чему изображение легче запомнить.
В то же время, состоящее из семи или более цветов изображение имеет больше шансов остаться в памяти, чем картинка с меньшим количеством оттенков. Различные исследования показали, что всплеск уровня запоминаемости происходит, когда количество цветов превышает шесть. В любом случае, этот факт следует запомнить или записать в ежедневник.
2. На изображении должны присутствовать лица людей (чем больше эмоций они выражают, тем лучше)
Взгляните на этот потрясающий розовый закат внизу. Скорей всего, вы его забудете.
Действительно, согласно исследованиям способности человека запоминать изображения, даже самый прекрасный снимок пейзажа, скорей всего, очень быстро выветрится из вашего мозга. С гораздо более высокой долей вероятности вы запомните изображение, в центре которого находится человек, пусть даже это будет что-то абсолютно банальное, например, мужчина в метро. Ещё лучше запоминаются фотографии людей, взаимодействующих друг с другом. Также хорошие результаты демонстрируют изображения, сфокусированные на каком-либо одном объекте.
Однако изображения людей также могут обладать различным уровнем запоминаемости. По сути, чем интенсивнее эмоции, выражаемые сфотографированным человеком, тем выше вероятность, что вы это запомните. Отчасти, причиной тому являются ваши собственные эмоции, вызванные данным снимком.
Так что при выборе изображений в первую очередь уделяйте внимание не самым сногсшибательным, а тем, что вызывают эмоциональный отклик. А также отдавайте предпочтение эмоциональным выражениям лиц, так как более нейтральные выражения забываются намного легче. Взять хотя бы этих ребят на фото сверху, только что одержавших победу в компьютерной игре. Кто не проникнется этим чувством сумасшедшего возбуждения, появляющимся, когда вы выигрываете что-то важное для вас?
Автор перевода — Давиденко Вячеслав, основатель компании TESTutor.
Психология текста: шрифт, цвет, форматирование
Письменность есть основное средство хранения и распространения информации — от древних религиозных текстов до описания новогодних приключений нашего френда по Facebook. Письменное слово — чудесный посредник, посланник, хранитель, позволявший человечеству столетиями выражать эмоции, делиться мыслями, рассказывать истории и, конечно, продавать.
К сожалению, текст имеет изначально присущую ему слабость: это статичная среда. Мы часто забываем, что все, что мы прочли — это просто различные комбинации конкретных букв алфавита (неважно, 26 их или 33), подчиняющиеся некоторым определенным правилам пунктуации и синтаксиса.
По сравнению с относительно новыми средствами отображения данных (медиа), такими как фотография или видео, возможности текста крайне ограничены. Старая пословица гласит, что «Картина говорит сразу 1000 слов» (это, конечно, зависит от картины и художника!), но, как правило, это утверждение недалеко от истины. Фотография и видеозапись способны захватить, а затем показать зрителю ситуацию гораздо лаконичней, чем слова, фигурально выражаясь, «могли надеяться».
Устойчивая популярность таких социальных сетей, как Instagram и Pinterest, наглядно свидетельствует о том, что люди находят визуальные медиа более подходящими для распространения своих повседневных впечатлений и ощущений. Даже Twitter начал выдвигать на первый план фотографии и видео, изменяя тем самым своей начальной текстовой сущности.
Однако изображения и видео никогда не смогут заменить текст — просто спросите любого ныне живущего писателя о том, что он думает об экранизациях своих книг. Письменное слово всегда будет нужно для передачи информации — вот как это происходит прямо сейчас, во время написания этого самого поста.
Текст всегда был, есть и будет важнейшим компонентом формирования положительного пользовательского опыта. Но пользователи не хотят сталкиваться со «стеной контента», равно как и мы — маркетологи, копирайтеры, блоггеры — не хотим видеть в комментариях глумливую оценку наших трудов «нипрачел слишкаммногабукав» (в англоязычной сфере существует аналог этому выражению — аббревиатура TL;DR (too long; didn’t read), то есть «слишком длинно; не читается»).
Надпись: «Стена текста. Слишком длинно; не читается»
Мы хотим, чтобы читатели «хватали на лету» смысл нашего оффера, чтобы их пользовательский опыт был только положительным, чтобы они понимали суть предложения с полуслова. Мы также хотим — и можем! — передать через текст некие эмоции, пусть даже «изобразительные возможности» письменного слова скромнее, нежели у фотографии и видео.
Кажущуюся «убогость» текстовой подачи информации в вполне можно компенсировать, используя определенные методы, о которых речь пойдет ниже. У вашего читателя вполне может сформироваться положительный пользовательский опыт от прочтения вашего текста, чем бы он ни был: рекламным объявлением, заголовком лендинг пейдж, описанием оффера на продающей целевой странице, постом в социальной сети.
Будьте уверены — читатели заметят вашу информацию, ознакомятся с ней и запомнят ее.
Персонализация шрифта
Псевдонаучная дисциплина графология просуществовала около 200 лет. Ее адепты уверяли, что способны по почерку человека установить основные черты его личности и даже обнаружить неврологические проблемы пишущего.
Тотальное распространение электронного делопроизводства, повсеместное применение принтеров и тому подобные спутники прогресса сделали само понятие «почерка» неактуальным. Однако даже электронные шрифты могут дать ключ к пониманию внутренней сущности человека — нашу личность косвенным образом характеризуют шрифты, используемые нами в электронных письмах, неважно, личных или деловых.
В 2001 году американская корпорация Lexmark, специализирующаяся на разработке и изготовлении устройств для печати и обработки изображений, наняла выдающегося психолога, доктора Арика Сигмана (Aric Sigman) для изучения того, как применяемый шрифт влияет на мнение, составляемое читателем электронного текста о его авторе.
Результатом исследования стала статья «Психология шрифтов» (The Psychology of Fonts), содержавшая предположение Сигмана о том, что некоторые шрифты могут вполне ассоциироваться с конкретными знаменитыми персонами. 🙂
Шрифт Shelley: Кайли Миноуг — «сексуальный котеночек»;
Шрифт Courier: Иэн Бил (персонаж британской «мыльной оперы») — «скряга»;
Шрифт Verdana: Ричард Брэнсон — «профессионал»;
Шрифт Times: Анна Форд (жена Генри Форда ) — «благонадежность».
По словам самого Сигмана, «использование неподходящего шрифта может дать людям ложное представление о вас и может отрицательно повлиять на мнения тех, кто может определить ваше будущее».
Используйте конкретные шрифты в определенных ситуациях — например, устраиваясь на работу в компанию, занимающуюся консервативным, «традиционным» бизнесом (банковское дело, страхование), наберите резюме таким же «консервативным» шрифтом с засечками типа Times. Для более современной по роду деятельности отлично подойдет шрифт Verdana.
«Консервативные» шрифты с засечками и ассоциации с ними: «надежный», «впечатляющий», «респектабельный», «авторитетный», «традиционный»
Размер шрифта
Размер шрифта также является важным параметром. Очевидное, устоявшееся восприятие текста в зависимости от размеров шрифтов таково: крупный шрифт — важный элемент, например, заголовок; меньшим размером для сохранения пространства страницы набирается основной контент. Это традиция, дошедшая до нас от истоков эры книгопечатания.
Через дифференциацию размеров шрифтов привлекается внимание читателей к наиболее важной для автора (маркетолога, копирайтера) части текста (заголовок, призыв к действию). Взгляните на текстовую карту ниже, чтобы наглядно убедиться в правоте нашего утверждения.
Цвет шрифта
Приблизительный список ассоциаций между цветом и эмоциями для человека, принадлежащего к западной цивилизации, можно посмотреть в этом посте:
Цветовой акцент
В отношении текста цвет применяется для выделения различных элементов, требующих привлечения внимания пользователя. Исторически сложилось так, что в распоряжении авторов имелось 2 инструмента акцентуации: курсив и жирный шрифт. До наступления цифровой эпохи цвет в типографском деле находился в большом дефиците — он был предназначен только для обложек и, в крайне редких случаях, для цветных иллюстраций, никак не соприкасаясь с текстом как таковым. Для обозначения смены контекста автор мог использовать курсив, для выделения ключевых слов — жирный шрифт.
Понятно, что теперь, когда в распоряжении любого имеются 16 777 216 цветов, отображаемых на средней руки мониторе, мы можем раскрасить наш текст в любую, самую фантастическую гамму. Однако делать этого мы не будем — первое правило электронной верстки текста гласит: «читать, не страдая». С выполнением этого правила и связано повсеместное употребление доминирующей классической схемы, «как в типографии на бумаге».
К стандартному корпусу текста мы можем добавить всевозможные цвета, чтобы управлять вниманием читателя. Особый акцент на использовании этого принципа сделан в так называемом плоском дизайне, где цвет используется для дифференциации элементов /пользовательского интерфейса.
Захват внимания
На целевой странице цветом выделяются важнейшие элементы, на которые посетитель должен обратить внимание: заголовки, призывы к действию, теги, ключевые слова и фразы. На товарной целевой странице выделение цветом отлично сработает для переключения внимания посетителя из режима сканера в режим читателя.
Эмоциональное воздействие цвета
Цвета также несут мощные культурные ассоциации. В культурной парадигме западной цивилизации мы в самом общем приближении связываем зеленый цвет с удачей, красный — с неудачей. С отдельными цветами связаны устойчивые подсознательные реакции, что в целом может придать дополнительный смысл текстовому сообщению. Например, красный текст сообщения о неверно заполненном поле непременно привлечет внимание пользователя к совершенной ошибке, а зеленая галочка успокоит его: «все правильно сделал».
Читабельность текста
Помимо привлечения внимания, цвет может послужить еще одним отличным способом облегчить взаимодействие между писателем и читателем. Ниже приведен пример оригинального решения, по утверждению его авторов, увеличивающего скорость чтения электронного текста на 30%. За счет чего? — спросите вы.
Ключами к хорошей типографике являются 2 понятия:
Когда наши глаза сканируют страницу, они легко могут сбиться с нужной траектории. Случалось ли вам читать одну и ту же строку дважды? А ведь мы регулярно тренируем наши глаза для плавания в морях текста, но его монотонность заставляет нас уставать и ошибаться.
Так вот, добавление цветового градиента — как на скриншоте ниже, — сделало переход от одной строки к другой легче для глаз: они безошибочно следуют по заданной траектории, что в результате ведет к возрастанию скорости чтения.
Форматирование текста
Ну и наконец — форматирование текста имеет огромное влияние на его читаемость (читабельность). Вспомним традиционные бумажные газеты с их многочисленными узкими колонками. Подобная верстка есть результат многолетних исследований, испытаний и уточнений. По словам эксперта по промышленному дизайну Боба Бейли (Bob Bailey, Ph. D., Civil Engineering) в статье в журнале UI Design Newsletter:
Все это звучит очень логично. Снимите стресс с глаза читателя — и ваш контент мгновенно станет более читабельным.
При публикации текста на целевой странице и в online в целом — в связи с увеличением расстояния от читателя до монитора, — длина строки может быть не столь компактной как в классической типографике: оптимальной считается длина в 4–5 дюймов (102–127 мм).
Однако важно убедиться в том, что от читателя не потребуется слишком большой горизонтальный «пробег глазами». От себя напомним — для мобильных целевых страниц многоколоночная верстка категорически противопоказана.
Пробелы
Использование пробелов на лендинг пейдж имеет огромное значение для улучшения чтения и понимания общего смысла оффера. В нашем блоге уже были статьи на эту тему:
Вместо заключения
Подведем краткое резюме нашего поста. Для того, чтобы ваш текст конвертировал пользователей в лиды, необходимо придерживаться следующих правил: