Зачем иконки?
Сергей Ткач

Работы Сергея Ткача:

Сергей Ткач

Зачем иконки

О пользе и вреде иконок написано много и везде. Здесь же я рассмотрю частный случай: кнопки с иконками и без. То есть, существует ли рациональная необходимость ставить иконку в кнопке? Она и так яркая и заметная. Зачем тогда иконка?

Вот есть кнопка «Настройки доступа» с иконкой и она же, но без иконки:

Иконка исчезла, смысл не потерялся, а места стало больше на 18 пикселей. Так в чем подвох? Что нужно понимать, когда используем иконку?

Иконка в кнопке дает два преимущества и два недостатка. Преимущества:

  1. Иконка привлекает внимание. Кнопку проще найти. Например, объясняешь человеку по телефону, как открыть доступ к документу и просто говоришь: «в углу кнопка с человечком, шаринг». Вероятность возникновения встречных вопросов типа «А в каком именно углу?» «А как там кнопка называется?» или «Какого цвета?» резко снижается.
  2. Кнопка с иконкой лучше запоминается так как иконка — это визуальный идентификатор. Идентификаторы вроде расположения или цвета — косвенные и запоминаются хуже, чем изображение в кнопке.

Теперь о недостатках:

  1. Иконка всегда добавляет шума. Возникает риск разрушить «чистоту» дизайна, намудрить с выравниванием и добавить путаницу в интерфейс.
  2. Иконка увеличивает размер кнопки. Что-то где-то может не влезть из-за этого.

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

То есть алгоритм такой:

  1. Делаем интерфейс без иконок.
  2. Запускаем продукт.
  3. Наблюдаем за поведением пользователей, подсчитываем, какими кнопками (функциями, окнами) пользуются чаще и усиливаем их иконками.
  4. Снова наблюдаем за пользователями. Понимаем, что без иконок было лучше и убираем их:-) return to 1.

Зашарить