Большинство посетителей не начинают с чтения. Сначала они «считывают» общее впечатление: оформление, ритм, структуру. Это и есть мета-сообщение — то, что воспринимается вне слов.
Визуальная привлекательность
50 мс
Столько нужно, чтобы оценить привлекательность страницы. Оценки за 50 мс и за 500 мс практически совпадают.
Lindgaard et al., 2006
Решение «остаться или уйти»
17–50 мс
В этом диапазоне формируется первичное «ощущение» страницы, влияющее на решение.
Google Research, 2012
Кредибилитация
46,1%
Пользователей судят о достоверности сайта по его дизайну и внешнему виду.
Fogg et al., Stanford, 2003
Визуал — это невербальный язык, который транслирует суть компании до того, как человек понял, о чём вы вообще.
Lindgaard, Fernandes, Dudek & Brown (2006), Behaviour & Information Technology; Google Research (2012); Fogg et al. (2003), Stanford Persuasive Technology Lab.
0302 · Сигналы
Что дизайн транслирует без слов
Хорошо настроенный дизайн помогает донести ключевые сигналы до того, как посетитель начнёт читать. Вот что можно и нужно транслировать.
Минимализм и благородные цвета сигнализируют о высоком качестве и цене. Яркие кнопки, насыщенные фоны и жирные шрифты чаще воспринимаются как признак «продажного» и бюджетного сегмента — даже если текст говорит обратное.
0403 · Пример
Минимализм против визуального шума
Один и тот же текст можно подать так, что он будет вызывать доверие — или ощущение перегруженности. Разница — в визуальной сложности.
Пример сдержанного минимализма: пространство, крупные изображения, ничего не отвлекает от продукта. A. Lange & Söhne.Пример высокой визуальной сложности: много элементов, ссылок и текстовых блоков. Воспринимается как информационная среда, а не как витрина.
Визуальная сложность изображений
−
Высокая визуальная сложность изображений негативно связана с доверием к сайту. Текстовая сложность может работать иначе.
Springer, 2014
Синий цвет и доверие
+
Доверие к «синему» интернет-магазину значимо выше, чем к «зелёному». Цвет влияет на выбор.
Lee & Rao, 2010
Изображения: скриншоты сайтов, вставлены для примера. Замените `src` на свои, если понадобится. Исследования: Springer (2014); Lee & Rao (2010).
0504 · Если не настраивать
Мета-сообщение будет, даже если его не планировать
Если дизайнер или клиент не подумали о целевом восприятии, дизайн всё равно что-то транслирует. Но чаще — не то, что нужно.
🧠
Психолог
Сайт в кислотных цветах со шрифтами как у доставки суши → ощущение несерьёзности. Клиент с сложным запросом не доверит такому специалисту свою проблему.
🏛️
Студия архитектуры
Сайт, похожий на шаблон 2010 года → сомнения в актуальности подхода. Заказчик думает: если они так относятся к своему сайту, как они отнесутся к проекту?
⚖️
Юрист
Сайт «на коленке» → доверия меньше, чем у менее компетентного, но хорошо оформленного конкурента. Дизайн считывается раньше, чем опыт.
Дизайн может работать на вас или против вас. Третьего не дано.
Наблюдения из практики; подтверждаются данными Stanford Web Credibility Project о роли визуального дизайна в оценке кредибилитации.
0605 · Практика
Три вопроса до начала дизайна
Ответы на эти вопросы дают базу для визуальных решений: какие цвета, шрифты, фотографии, отступы, ритм и композицию использовать.
01
Кто ваша аудитория?
Что для них привычно, а что вызывает отторжение? Какой визуальный язык они считывают как «свой»?
02
Какой образ вы хотите транслировать?
Честный эксперт? Дорогой продукт? Тёплый партнёр? Строгий профессионал? Образ должен быть один.
03
Какие эмоции нужно вызвать?
Доверие, симпатию, интерес, ощущение «в этом есть смысл»? Эмоция определяет тон и насыщенность визуала.
→
Что следует из ответов?
Цвета, типографика, плотность, фото, ритм. Дизайн перестаёт быть украшением и становится инструментом.
Проверка
Если сайт можно «переодеть» в любой другой стиль без потери смысла — значит, мета-сообщение не настроено. Хороший дизайн неотделим от задачи.
0706 · Вывод
Дизайн — это язык, а не украшение
Он говорит с аудиторией ещё до текста. Может работать на вас или против вас. Хороший дизайн выстраивает правильное первое впечатление и помогает достичь нужного эффекта.
⏱️
50 мс
Впечатление формируется почти мгновенно. Исправить его потом сложно.
🎨
Сигналы
Цвет, плотность, типографика и пространство транслируют уровень, характер и доверие.
🎯
Задача
Сначала ответьте, что сайт должен сообщить. Потом выбирайте визуальные средства.
Дизайн — это мета-сообщение. Оно либо помогает вам, либо говорит что-то не то. Настраивайте его осознанно.
