Эффективность иконок зависит от двух вещей: узнаваемости и интерпретации. Кейт Каплан, автор книги «Цифровые иконки, которые работают» (Digital Icons That Work), предложила системный подход к оценке иконок в интерфейсе. Разбираем, когда и как проверять иконки на юзабилити.

Юзабилити иконок

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

  • Узнаваемость — насколько точно пользователь распознаёт форму или символ. Звезда выглядит как звезда?
  • Интерпретация — какое значение человек придаёт иконке в конкретном контексте. Что означает звезда именно здесь?

Узнаваемость иконок

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

На юзабилити-тестах иконки показывают без подписей, но в контексте реального интерфейса. Результаты удивляют: узнаваемость «очевидных» форм сильно различается. Один из участников сказал: «Я не знаю, что изображает эта иконка. А если не знаешь форму — не поймёшь и значение». Без распознавания символа интерпретация невозможна.

Интерпретация иконок

Интерпретация — вторая, часто более сложная часть. Узнавание и понимание функции не всегда идут вместе: объект распознан верно, а действие угадано неверно.

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

Дело не в «глупых пользователях» и не в «сложных иконках». Внутри даже небольшой аудитории — разный возраст, опыт, культура, образование, география и потребности в доступности. Всё это влияет на понимание символов.

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

Другие факторы юзабилити иконок

Помимо узнаваемости и интерпретации, оценивайте:

  • Релевантность — подходит ли иконка для текущей задачи пользователя?
  • Находимость — найдёт ли пользователь иконку, когда она понадобится?
  • Обнаруживаемость — насколько заметна иконка в интерфейсе?
  • Кликабельность — удобно ли нажать на неё пальцем или курсором без промаха?
  • Визуальная привлекательность — приятно ли иконка выглядит?

Эти аспекты работают вместе и формируют общий уровень юзабилити.

Выбор методов для оценки иконок

Сначала сформулируйте исследовательские цели и вопросы. Методы делятся на две группы: вне контекста (иконка показана отдельно) и в контексте (внутри интерфейса).

1. Узнают ли пользователи изображённый объект?

Фактор: узнаваемость.

Как: покажите иконку без подписи и спросите, что изображено (вне контекста). Или покажите скриншот интерфейса и попросите объяснить значение каждой иконки (в контексте).

Когда: на ранних этапах проектирования.

2. Правильно ли понимают функцию иконки?

Фактор: интерпретация.

Как: покажите иконку отдельно и попросите предположить, куда она ведёт. Или дайте макет страницы и попросите описать функции всех иконок.

Когда: на ранних этапах или сразу после первых макетов.

3. Нравится ли иконка визуально?

Фактор: визуальная привлекательность.

Как: оценка по шкале Лайкерта или семантическому дифференциалу. Тест предпочтений — несколько вариантов одной иконки в разных стилях.

Когда: на ранних этапах или после первых макетов.

4. Используют ли иконку для нужной задачи?

Фактор: релевантность.

Как: юзабилити-тест в контексте — дайте задачу («найдите новинки») и наблюдайте, используют ли иконку. A/B-тест для сравнения кликабельности вариантов.

Когда: после прототипа, рабочего интерфейса или запуска продукта.

5. Замечают ли иконку при поиске?

Фактор: обнаруживаемость и находимость.

Как: юзабилити-тест или клик-тест — если пользователи не взаимодействуют с иконкой или долго её не замечают, она недостаточно заметна.

Когда: после прототипа или запуска.

6. Удобно ли нажать на иконку?

Фактор: кликабельность.

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

Когда: после прототипа или запуска.

Материал основан на исследованиях Кейт Каплан (Icon Usability: When and How to Evaluate Digital Icons, Nielsen Norman Group).

Нужна помощь с UX/UI и тестированием интерфейса? Свяжитесь с нами — проведём аудит иконок и навигации вашего проекта.