Текст
Колористика
Навигация
Форма
Иконки
Я изучаю информационный мусор, как явление в дизайне, уже более 10 лет — в дизайне интерфейсов он представляет собой избыточный, нерелевантный или конкурирующий визуальный и текстовый контент, который нарушает когнитивные процессы восприятия и затрудняет эффективное взаимодействие пользователя с системой, поскольку человеческое внимание, обладая ограниченной пропускной способностью, не способно одновременно обрабатывать большое количество равнозначных стимулов без потери качества интерпретации этих стимулов.
Информационный мусор может содержаться: в тексте, в навигационных структурах, в колористике, в формах и в избыточности визуальных метафор (иконок) внутри интерфейса.
Текст
В тексте информационный мусор может выражаться в избыточном повторении конкретного слова или словосочетания. Есть старый известный пример, когда на одном из правительственных сайтов, словосочетание «Правительство Российской Федерации» повторялось более 200 раз на одной из страниц сайта, что сделало её нечитабельной и отказной со стороны пользователей. В текстовом слое интерфейса информационный мусор проявляется через избыточные формулировки, тавтологические конструкции и низкую плотность смысловой информации, что приводит к тому, что пользователю сложнее понимать смысл написанного — уменьшается концентрация и внимание к смысловым деталям, а когнитивная нагрузка резко повышается, что ухудшает общее взаимодействие пользователя с системой и часто ведет к отказу от взаимодействия — пользователь просто уходит от нас.
В таблицах текстовый информационный мусор возникает при перегруженности данными, когда каждая ячейка конкурирует за внимание, а акценты в ячейках не расставлены на string, чтобы пользователь сразу понял, что первично, а что вторично. Также стоит использовать в текстовом контенте таблиц, например, в статусах, эффект Ресторфф, поскольку без акцента на на важном — зрительная система не получает достаточных сигналов для сегментации и иерархического анализа информации. Но даже, если мы справились с большим количеством данных и создали ячейки с аккуратно разложенными string, то повторяющиеся единицы измерения в каждой ячейке, например: шт., руб или ₽, ед., ID — должны быть структурированы и не множиться в ячейках, а указывать на измерение свойства в ячейке хэдера. Если изучить книгу Мильчина и Чельцовой, то можно создавать почти идеальный контент внутри таблиц. «Справочник издателя» тебе расскажет про то, как правильно работать с выключкой, в том числе, с выключкой цен в таблицах, что указание единиц свойства происходит в ячейке хедера, как правильно писать сокращения и прочие полезные вещи.
Колористика
Колористическая составляющая также играет критическую роль в формировании информационного мусора, поскольку мы кодируем часть информации через цвета. Чрезмерный объём бренд-цвета на странице или чрезмерное количество дополнительных акцентных цветов, недостаточный контраст или чрезмерный контраст — нарушают восприятие приоритетов на экране, в результате чего у пользователя происходит расфокус и падает концентрация внимания. Я писала про принцип 3-17-80 в первой части цикла о колористике.
Из-за «цветастости» компонентов и областей на странице, пользователь получает «бомбардировку» внешними стимулами, которые создают конкуренцию за его внимание, и всё это снижает способность пользователя быстро выделять приоритеты на странице. Также изобилие внешних стимулов в колористике может притупить внимание к СТА-кнопкам и пользователь может хуже проходить пользовательские сценарии: увеличивается Task time, повышается Error rate, может увеличиться процент отказников и уменьшается конверсия, потому что пользователь просто не дошёл до целевого действия, которое ведёт к покупке.
Навигация
В навигации информационный мусор проявляется через обильное количество пунктов меню, дублирующие категории и неочевидную иерархию, вследствие чего пользователь сталкивается с необходимостью постоянного выбора между конкурирующими вариантами, что приводит к когнитивной нагрузке, а следовательно приводит нас к закону Хика-Хаймана: конитивка прегружена и человек дольше принимает решения и, следственно, делает выбор, а значит и время работы с системой увеличивается, как и может увеличиваться и тревога/раздражение пользователя в процессе взаимодействия с системой. Вообще, плохо проработанная информационная архитектура как раз ведёт к проблемам с навигацией — усложняет её, создаёт дубли, неэффективно работает с хлебными крошками, поэтому улучшение ИА всегда помогает уменьшить информационный мусор в навигации.
Также повторение слов и словосочетаний в навигации на страницах — в основном заголовке страницы и её подзаголовках — разрастание заголовков от 1-2 слов до 5-6 ведёт к размытию фокуса пользователя и неэффективному взаимодействию с навигацией в процессе скролла страницы — человеку сложнее быстро выхватить и сфокусироваться на нужных словах в подзаголовках, чтобы заякориться на нужном интерфейсном блоке страницы. Поэтому стоит навигацию на странице исполнять лаконично и избегать повтора одних и тех же слов, чтобы сместить фокус пользователя к сути. Например, на странице «Штрафы» в подзаголовках «Штрафы водителей легковых автомобилей», «Штрафы водителей грузовых автомобилей» и «Штрафы водителей мототранспорта» — лучше убрать из всех подзаголовков слово «штрафы», потому что пользователь уже в «Штрафах» и переосмыслить подзаголовки в более считываемые конструкции, например указывать по категориям: A, B, C и проч. Или же по типу транспорта: Мототранспорт, Легковые, Грузовые и проч.
Форма (линии)
Линии, как часть компонентов также важны, потому что это может быть бордер у карточки и кнопки, а может быть дивайдер, разделяющий контентные блоки. Дивайдеры можно убрать, заменив их достаточным объёмом негативного пространства между блоками — дизайн имеет больше «воздуха», а блоки разделены визуально, без дополнительных линий (пример 1).
Бордеры часто начинают использовать дизайнеры, которые плохо поработали с подбором цвета и не получили достаточного контраста между бэкграундом страницы и бэкграундом компонента (пример 2). Также дивайдеры внутри таблиц, если мы уже используем зебра-паттерн, могут быть аннулированы, потому что мы уже контрастируем цветом межполосицу строк. Либо можно оставить дивайдеры и убрать зебра-паттерн — не нужно усложнять и сочетать сразу все приёмы, потому что это захламляет визуал.
Каждая линия — это пара дополнительных переменных в нашем дизайне: толщина линии, цвет линии — больше переменных — больше шума и деталей, которые могут визуально не только захламлять, но и удешевлять наш интерфейс, потому что именно минимализм у большинства пользователей вызывает ощущение эстетики (простоты, чистоты, лаконичности).
Иконки
Обилие иконок в интерфейсе также может дать информационный мусор — если мы сопровождаем каждую текстовую составляющую иконкой, то мы производим дублирование смыслов и метафор, а дубликаты, как я уже писала выше, очень нагружают пользователя когнитивно. Если иконки отрисованы в разной стилистике, если у иконок повсеместно разная толщина начертания, а главное — иконки распределены в интерфейсе не в соответствии «помощь в фокусировке» и «усиление смысла», то избыточность также приведёт в снижению концентрации, расфокусировке и раздражению пользователя. Я встречала примеры, когда иконки были в избытке по всей странице: от 60 иконок только в родительском слое страницы, а также во всех поповерах, контекстных меню — дизайнерам казалось, что они так наоборот фокусируют пользователя. Но если чего-то в избытке, наша реакция, наоборот, притупляется на эти стимулы — избыток стимулов всегда ведёт к тому, что мозг, пытаясь уменьшить нагрузку, просто притупляет внимание на эти стимулы.
«Совершенство достигнуто не тогда, когда нечего добавить, а тогда, когда нечего убрать».
Антуан де Сент-Экзюпери
Если убрать элемент из интерфейса и ничего не изменится — это не поломает логику, не изменится смысл, не станет существенно дискомфортно от этого изменения — этот элемент был не нужен. Скорее всего он и будет тем, что мы назовём «мусором». Поэтому проверяйте свой дизайн на наличие избытка и дублей, чтобы сделать его лаконичным, комфортным и эстетичным.
