12 заметок с тегом

управление вниманием

9 мес   верстка   иллюстрация   управление вниманием   Школа редакторов
2019   верстка   управление вниманием

Бессмысленный фактоид

Иногда в работах студентов встречаю на полях фактоиды типа таких:

10 самых популярных программ праздников сняли на видео
300 популярных товаров всегда на складе
136 источников проанализировано в исследовании

Это бессмысленные фактоиды, потому что само число не важно и ни о чём не говорит. Что было бы, если бы популярных программ было 15? Да пофигу, хоть 20, ведь мне нужна только одна программа. Что если мы храним не 300, а 350 товаров? Да плевать, всё равно я не понимаю, храните вы нужный мне товар или нет. Какая разница, там 136 источников, 100 или 150? Да просто ради понта написали, ясно же.

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

На поля нужно ставить только те фактоиды, которые отражают важные для читателя факты — то есть если число будет другим, эффект уже будет не тот:

3 часа на срочный выезд: если нужно срочно провести праздник, мы готовы приехать сегодня же
48 дней на обмен и возврат
Один врач сопровождает вас на всём пути лечения и в курсе всех тонкостей лечения

Простая проверка: умножьте число в фактоиде на 10. Если принципиально ничего не изменилось, перед вами был бессмысленный фактоид. Сравните:

136 источников проанализировано в исследовании
1360 источников проанализировано в исследовании

Подача такси за 5 минут
Подача такси за 50 минут

2019   управление вниманием   фактоид

Плакат для кофейни

Да-да, я знаю:

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

Но всё равно.

2018   агрессия   дизайн   иллюстрация   контраст   управление вниманием

Цвет как информационный слой

Цвет — это вам не хухры-мухры. Цвет — это информация. Если вы красите текст в какой-то цвет, это нужно делать не просто так, а по какой-то причине.

Давайте пошагово. Вот просто текст:

Допустим, мы что-то выделили внутри, оно обращает на себя внимание:

Теперь я хочу что-нибудь на поля:

Я могу использовать цвет, чтобы связать текст и элемент на полях. Теперь читатель понимает, что магазин оштрафовали на 200 тысяч. Цвет используется не для красоты, а чтобы помочь читателю увидеть связи между элементами. Это — гуд:

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

Самое ужасное, когда пытаются совместить декоративный цвет и информационные слои. Всё смешивается, всё друг с другом спорит:

Но посмотрите зато, как будет наглядно, если все цвета будут представлять информационные слои:

Мораль такая:

Не надо добавлять цвета в текст ради красоты. Только если вам нужно с чем-то текст связать.

Вот примеры, где это нормально работает:

Цветной фон в тексте показывает, к какой части схемы этот текст относится. Картинка из курса Ильи Бирмана «Пользовательский интерфейс и представление информации»
Цвет в заголовке становится легендой к схеме. Из канала «Смотрю»
Фактоид говорит: «Я отношусь к красному графику». Из студенческой работы

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

2018   верстка   управление вниманием   цвет

Грязь и зигзаги

Продолжаю разговор о вёрстке по зигзагу.

Открыли вчера с Людой новую промостраницу продвинутого курса Главреда. Я делал страницу в страшном угаре и первые её версии уже после выхода выглядели страшно грязными. Потом в несколько подходов я немного навел порядок, и одним из шагов было избавиться от диагонали.

Как я обычно думал: если у тебя набор похожих горизонтально несимметричных модулей, есть смысл чередовать их «спин»: у одного картинка слева, у другого справа, у третьего снова слева. Как у Нозика в совете про трусы.

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

2017   дизайн   порядок   управление вниманием   чистота

Нильсен и зигзаги

У «Нильсен Норман груп» вышло исследование о последовательности чтения. Узнавали, как лучше ставить картинку: одну над другой или по диагонали. А узнали совсем другое.

Основные выводы

Если на картинке что-то важное, люди на нее смотрят. Если на картинке бессмысленная декорация — не смотрят. Как стоят картинки — в основном, пофигу.

Если читатель видит, что картинка декоративная, он ее пропускает.

Если картинки стоят зигзагом, читателю тяжелее искать следующий осмысленный блок текста. Лучше так не делать.

Читателю тяжело, когда на иллюстрациях много текста и мелких деталей (например, на скриншотах). Поэтому показывать их надо тогда, когда читатель уже готов воспринимать сложное. Сложные скриншоты с кучей подробностей на первом экране — скорее всего, плохо.

Если в начале страницы стоят неинформативные иллюстрации, читатель унывает и не особо хочет читать дальше.

Люди читают слева направо :-)

2017   декорация   иллюстрация   управление вниманием

Текст в таблицах

Леныч! Смотри, вот ты пишешь текст про налогообложение. У тебя абзацы текста, а потом ты сравниваешь системы налогообложения в таблице. Это выглядит визуально интересно, но есть проблемы:

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

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

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

И, конечно, структура: сейчас у тебя справочник по системам налогообложения, а должен быть ответ на вопрос, какую мне систему выбрать. В начала абзацев надо выносить не УСН, ПСН и ЕНВД, а то, по каким принципам они выбираются. Я не знаю матчасти, поэтому напишу как знаю:

Короче:

Таблица — для чисел. Многоколонники — зло. Не ставь текст в таблицу без крайней необходимости

2017   верстка   дизайн   управление вниманием

Естественный порядок чтения и визуальная последовательность

Написал совет о естественном порядке чтения. Главное, что нужно запомнить: человек читает не слева направо, а от важного к менее важному. Прочитайте об этом подробнее на сайте бюро.

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

2017   визуальная последовательность   управление вниманием

Просто текст или текст с картинкой

Посмотрите клип Мальбэка (16+):

Вроде всё классно, любовь, атмосфера, вокал. Кайф. А теперь та же песня, но с другим видеорядом (с 18:40):

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

Просто подумать.

См. также: статья, которая не заигрывала

2017   агрессия   драматургия   управление вниманием
Ранее Ctrl + ↓