Заливка или обводка: сравнительное UX‑исследование стилей иконок

Уже несколько лет я работаю продуктовым дизайнером в компании R‑Vision, занимаюсь проектированием интерфейсов и развитием дизайн‑системы. Еще до моего прихода в макетах всегда использовались обводочные иконки, затем они переехали в UI‑кит, а дальше всё это разрослось до полноценной дизайн‑системы. Всё работало, новые иконки под задачи рисовались, жизнь шла своим чередом. Что могло пойти не так?

Периодические вопросы и предложения «А давайте перейдем на заливочные иконки?» всплывали с завидной регулярностью примерно раз в полгода, в том числе от дизайнеров. Я довольно уверенно отстаивал позицию: обводочные иконки более детальные, у нас сложные продукты, очень специфичные пиктограммы и т.д.

Но в какой‑то момент возникла мысль: если запрос на заливку возвращается снова и снова, может, действительно стоит хотя бы проверить, есть ли от этого объективная польза? С этого и началось исследование.

Сразу браться и перерисовывать 300+ иконок ради того, что бы посмотреть, что получится, я, понятно, не собирался. Сначала я пошел искать сравнительные исследования по стилистике иконок в интернете (зачем делать самому, если можно загуглить 😁).

Во всех открытых источниках повторялось одно и то же:

Но это всё общие мысли из дизайнерских статей, копирующих друг друга, а не ответ на наш конкретный запрос. Поэтому логичным путем стало прикладное исследование в контексте именно наших интерфейсов, нашей дизайн‑системы и наших пользователей. И пошел я в это исследование через немодерируемое тестирование в сервисе Pathway.

Почему именно скорость распознавания? В наших продуктах в каждом разделе есть экшен‑панели, где собирается несколько групп иконочных кнопок действий над сущностями. Подсказки есть, но комфорт работы сильно зависит от того, насколько быстро пользователь «находит глазами» нужную иконку внутри группы.

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

Сценарий теста был максимально простой:

Таким образом, мы одновременно получали и количественные данные (время), и качественные инсайты (объяснения и предпочтения).

Я подготовил сет из 32 иконок в двух стилях: обводочном и заливочном. Они полностью соответствовали текущему паку иконок компании по толщине линий, скруглениям, размерам и т.д., значит они должны быть для наших пользователей достаточно привычными и узнаваемыми. Для удобства в работе с прототипами каждая иконка была оформлена как компонент с двумя вариантами: обводка и заливка.

Из этого набора я выбрал 10 иконок для теста с понятными, не специфическими значениями, которые легко описать простыми словами. Цель — убрать лишние когнитивные «затыки» и влияния, кроме собственно стиля иконки.

Чтобы контраст и цвета не влияли на результат, в прототипах я использовал нашу системную палитру: и фон, и цвет иконок соответствовали дизайн-системе.

Отдельная задача была минимизировать эффект запоминания расположения. Я пронумеровал все иконки от 1 до 32 и с помощью ChatGPT генерировал массивы чисел 5×3 (15 позиций) по следующим правилам:

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

Я запустил тест на 20 респондентов:

Фактически данное исследование — это гибрид: формально мы собираем количественные данные, но есть и качественная часть с открытыми вопросами. Для подобного формата выборка в 6–10 человек на вариант теста считается разумным минимумом для выявления устойчивых паттернов поведения.

Изначальный план был такой: посмотреть результаты и, при необходимости, докрутить исследование в более количественное русло, расширив выборку. Спойлер: докручивать не пришлось.

Кстати, один респондент выполнил только первое задание и завершил прохождение теста, не пройдя остальные 19 и опрос. Его результат я исключил, чтобы его результаты первого задания не повлияли на исследование. По итогу все сырые данные были собраны в большую никому, кроме меня, не понятную табличку.

Начнем с конца. После всех заданий в тестировании я задал участникам вопрос: «Насколько, по твоему мнению, визуально иконки соответствовали их текстовому названию в заданиях?»

Ответить надо было, выбрав значение по шкале от 1 (вообще не соответствовали) до 5 (полностью соответствовали). Все респонденты поставили 5 баллов.

Вывод: проблем с пониманием того, какую именно иконку искать, не было. Мы можем не учитывать дополнительную задержку на догадки о том, что значит та или иная пиктограмма.

А теперь, как в детективном сериале от Нетфликс, от концовки перейдем к самому началу истории и разберём все моменты по порядку.

В этом варианте респондент сначала выполнял 10 заданий с заливочными иконками, а затем 10 аналогичных заданий с обводочными.

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

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

Если усреднить показатели по всему тесту (отдельно среднее и медианное время), обводочные иконки в этом варианте идентифицировались быстрее:

То есть в рамках сценария «сначала заливка → потом обводка» обводочные иконки выглядят ощутимо быстрее.

После теста я спросил, какого стиля иконки участникам, по их мнению, проще и быстрее было идентифицировать. Параллельно, по фактическим данным, я считал, в каком стиле иконку конкретный респондент находил быстрее и вел счет «побед» обводки и заливки.

По итогам субъективных оценок респондентов и моего мини‑чемпионата фактических результатов в первом тесте больше побед у обводочных иконок. Причем часть респондентов, которые субъективно выбрали заливочные иконки, по факту быстрее находили именно обводочные.

Во втором варианте теста порядок был обратным: сначала 10 заданий с обводочными иконками, затем 10 с заливочными.

Здесь также видна тенденция ускорения по мере прохождения: чем дальше, тем быстрее. Но есть заметный пик во времени на 11‑м задании, то есть в момент переключения с обводочных иконок на заливочные.

Можно предположить, что сам факт смены стиля вызывает небольшое замешательство. Наблюдение само по себе интересное, но для этого кейса я сознательно оставил его без развития, так как это выглядит, как тема для отдельного исследования.

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

То есть когда заливка идет после обводки, она выигрывает по скорости. Это подкрепляет предположение о влиянии накопленного опыта и привыкания к заданиям.

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

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

Если собрать общий «счёт» по обоим тестам, картина такая:

Формально это можно прочитать как преимущество обводочных иконок. Но важен не только процент побед, но ещё и стабильность и распределение времени.

Если сравнить средние и медианные значения времени по обоим тестам для обоих стилей, видно следующее:

Более наглядно это видно, если объединить эти два графика в один, в котором мы можем сравнить фактические результаты стилей между собой.

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

Частично подтверждена. При накопленном опыте (когда заливка идёт после обводки) заливочные иконки действительно показывают более быстрое распознавание. Однако это преимущество неустойчиво и зависит от порядка заданий.

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

Не подтверждена. Если сравнивать лучшие показатели обоих стилей, разница по среднему времени около 0,378 секунды (≈ 14,58%), а по медиане — около 0,106 секунды (≈ 4,92%). В относительных процентах это выглядит заметно, но в абсолютных значениях такая экономия времени сомнительна для пользователя в реальной работе.

Как вы помните, в конце теста я задал несколько открытых вопросов о том, какие иконки было проще распознавать и почему. Из ответов сложилась следующая картина.

Большинство респондентов субъективно считают обводочные иконки более простыми для распознавания. Основные аргументы:

Фактически пользователи больше опираются на внешний силуэт, чем на «заполненную массу».

Про заливочные иконки часто говорили:

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

Практически все аргументы носили утилитарный характер:

Эстетические оценки почти не звучали. В задаче точечного выбора интерфейсные иконки воспринимаются как инструмент, а не как декоративный элемент.

Сторонники заливки опираются на контраст и простоту формы (меньше внутренних деталей). Это особенно актуально для мелких размеров и менее контрастных интерфейсов. В таких условиях заливка действительно может выигрывать.

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

Итого: переход с обводочных иконок на заливочные в нашем случае не даёт ощутимого UX‑преимущества, которое оправдывало бы пересборку пака из ~340 иконок, переработку дизайн‑системы и доработку интерфейсов. Как говорится, работает — не трогай! 😁

Если отбросить субъективные предпочтения, вопрос всё равно остаётся открытым: готовы ли вы ради выигрыша в 0,1–0,3 секунды на поиск одной иконки полностью переработать сотни иконок компании, обновить дизайн‑систему и фронтенд?

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

Ну и конечно же, раз ты дочитал до конца статью, держи персональный комплимент:

👉 Больше про UX и интерфейсы — в моем канале «UX без воды | Шпилевой», подписывайся в Телеге, Максе или ВК ❤