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

Многие думают, что этот выбор — вопрос предпочтения, но исследования показывают, что есть нечто большее. Стиль иконки влияет на скорость ее распознавание пользователями.

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

Исследование о влиянии стиля иконок на UX выявило что разница в производительности задач действительно есть. Успешность выполнения задачи измеряли, исходя из скорости и точности распознавания образов.

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

Характерные признаки

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

К примеру, хвостик значка комментария — его характерный признак. Без хвостика это просто круг. Замок блокировки без выреза замочной скважины легко принять за сумку. То есть вырез замочной скважины — характерный признак. Зубчики на шестеренке — тоже. Без них это просто бублик.

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

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

Когда контурные иконки работают лучше

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

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

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

Если характерные признаки мелкие и находятся по краям фигуры, используйте контурные стиль. Это делает отличительные детали заметнее, и иконки распознаются быстрее.

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

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

Когда сплошные иконки работают лучше

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

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

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

Если ваша иконка предполагает узкие, удлиненные формы с небольшим внутренним пространством, используйте заливку. Формат силуэта дает простую фигуру, которую легко идентифицировать.

Когда стиль не имеет значения

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

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

Стили иконок для выделения кнопок

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

Пользователям важнее скорее распознать те образы, которые они еще не выбирали. Текущая кнопка не так важна. Поэтому иконка с заливкой нужнее для кнопок, которые сейчас не выбраны.

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

Подводим итоги

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

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