4 теста, чтобы проверить, насколько правильно использована иконка в интерфейсе

16 Авг, 2018
Дизайн
дизайн иконки, дизайн интерфейса, иконка

Эти 4 небольших теста помогут вам подобрать правильную иконку для интерфейса и не совершить самые распространенные ошибки.

Тест №1 Правило 5 секунд

Давайте проведем тест на примере. Предположим, вам нужно придумать образ для иконки “Написать сообщение”. Засеките 5 секунд и перечислите все образы, которые появились у вас в голове за это время.
Мне пришли в голову такие образы: конверт, ручка, листок бумаги, карандаш, перо. А вам?
Примерно такие образы приходят в голову многим, посмотрите на результаты выдачи Google по запросу “icon write message”

Именно от этих образов и следует отталкиваться при создании своей иконки.

Если за 5 секунд вам в голову не пришел ни один образ, то вероятнее всего иконка будет неясна пользователям. Значит следует добавить рядом текст или расположить подсказку.

Тест №2 Выборочный опрос

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

Войти? Загрузить? Скачать?

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

Тест №3 Запоминаемость образа

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

Вот таким, к примеру, людям запомнился логотип Starbucks

То же самое происходит с иконками в интерфейсе. Чем сложнее образ вы выберете, тем сложнее его будет запомнить пользователю.
А ведь он должен находить иконку, не задумываясь.
Чтобы проверить, насколько запоминается ваша иконка, покажите ее нескольким пользователям и через неделю попросите изобразить то, что они видели.
Хотите проверим, насколько запоминающиеся иконки используют мировые бренды в интерфейсе?
Попробуйте вспомнить, как выглядит иконка “Friend request” в Facebook.

Читай также: Где взять примеры качественных иконок: 9 сайтов с примерами о которых вы должны знать

Тест №4 Ясность иконки в любом размере

Большой размер иконки позволяет передать образ гораздо точнее. Но зачастую в интерфейсах мы сталкиваемся как раз с мелкими изображениями. Поэтому самый маленький размер значка должен оставаться таким же простым для восприятия.
Для того, чтобы проверить иконку, просто уменьшите ее до самого мелкого размера и посмотрите, насколько простой и понятной она смотриться.
Попробуем?
Что, по вашему, означает каждая из этих иконок?

Их увеличенные версии не вызывают сомнения в образе:

Теперь мы видим, что оба изображения — это фотокамеры.

Лично мне, первое изображение при первом тесте больше напомнило чемодан или сумку.
А вам?

Выводы:

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