Замовники часто вимагають від дизайнерів намалювати красиві іконки, які б прикрашали інтерфейс програми, сайту чи додатку. І часто ці вимоги не стосуються найголовнішого – «красивий значок» повинен пришвидшувати сприйняття інформації, а не навпаки. Перевага якісних іконок в тому, що вони прості, лаконічні і, при цьому, дуже виразні.
Піктограми повернули свою популярність приблизно тоді, коли у моду ввійшов плоский дизайн. У 2010 році, після виходу iPhone 4 з дисплеєм великої роздільної здатності, стало зрозуміло, що іконки будуть вимальовуватися виключно у векторі, аби розробники не витрачали багато ресурсів на постійну перемальовку інтерфейсу в спробах наздогнати розвиток технологій.
Далі ми розглянемо, якими ж повинні бути якісні іконки та як правильно їх використовувати.
Навіщо взагалі потрібні іконки
У першу чергу, іконки набагато прискорюють швидкість сприйняття інформації. Максимально зрозуміла і легко запам’ятовувана піктограма може швидко передати сенс або певну кількість тексту. Так відбувається тому, що у людей образне мислення. Якщо ми бачимо образ, нам простіше розуміти суть. Давайте одразу розглянемо це на прикладі.
На скріншоті показано історію платежів. Розробники використали максимально зрозумілий та простий для сприйняття сет іконок, виконаний в одному стилі, з мінімальною кількістю деталей. Достатньо один раз подивитися на сторінку, щоб зрозуміти значення кожної піктограми. До того ж, кожний значок супроводжується окремим статусом (підтвердження / відмова / очікування). Ці мінімалістичні іконки допомагають швидко зчитувати інформацію одразу двох аспектів: тип платежу та його статус, тим самим вони полегшуюють та прискорюють взаємодію користувачів з інтерфейсом.
Приклад унікального сету якісних іконок
Піктограми сприяють покращенню навігації вашим сайтом. Коли людина дізнається, які дії пов'язані з певним значком, він підсвідомо буде розуміти, яка іконка за яку функцію відповідає. Таким чином ці ілюстрації дають можливість користувачам швидше знаходити певну команду або дію в інтерфейсі та сприяють інтуїтивному користуванню інтерфейсом.
Спеціалісти з Neilsen Norman Group рекомендують пояснювати кожну піктограму написом поруч, щоб усі команди були максимально зрозумілими.
Перед тим, як розробляти таку іконку, вони радять спочатку відповісти самому собі на запитання: а чи буде від цього підпису якась додаткова перевага?
І нарешті, брендовані іконки, якщо вони створені з дотриманням стилю вашого інтерфейсу, доповнюють і покращують естетику сайту.
Пам'ятайте, що хороші іконки повинні швидко знаходитися, легко запам’ятовуватися та бути максимально зрозумілими. Недотримання хоча б однієї з цих характеристик робить піктограму автоматично поганою.
Погані іконки
В інтернеті часто зустрічаються сети іконок, які, ну зовсім, не відповідають інформації, яку вони повинні передавати. Поганою піктограма може стати не тільки через те, що є зовсім недоречною. Наприклад, зрозуміла для всіх іконка, може бути настільки некрасиво намальована, що зіпсує всю естетику сайту. Тому, до розробки піктограм потрібно підходити дуже відповідально і пам’ятати:
- Деякі загальноприйняті варіанти іконок вже мають своє значення і асоціюються в інтернеті з певними діями. Наприклад, значок зірочки означає функцію «виставлення оцінки» або «додавання закладок», а не «перегляд шаблонів презентації», іконка відерця призначена для видалення елементів, а не для додавання товарів у кошик.
- Іконка може мати декілька значень і користувачами вона буде інтерпретуватися по-різному. Наприклад, знак валюти для когось означатиме поповнення рахунку, а для інших–перегляд фінансів. Так само і мішень зі стрілою, ця іконка може інтерпретуватись і як «мета», і як «фінансові цілі», і як функція «виконати завдання», тощо. Це заплутує користувачів, а більшість з них не любить сидіти і розгадувати загадку, що саме означає піктограма.
- Повторення іконки для кожного елементу в списку не робить інтерфейс більш зрозумілим та охайнішим. Навіщо додавати значок листка паперу біля кожного документа в переліку? Навіщо додавати конверт біля кожного листа у списку?
- Піктограми юзабельні лише як набір. Якщо сет іконок має єдиний естетичний стиль, то значення кожної є інтуїтивно зрозумілим. Користувачам не потрібно вивчати всі значки в наборі, щоб визначити значення якогось окремого.
Приклад невдалих іконок
Цей сет іконок є неякісним, бо він не має єдності стилю, кожний значок не схожий на інший. До того ж, піктограми на скріншоті не зовсім відповідають своїм підписам, без текстового пояснення вони б були незрозумілими.
То як правильно залучати іконки в інтерфейс?
Перш ніж втулити іконки у вільні місця інтерфейсу, варто переконатися, що:
- Піктограма дійсно зможе повністю замінити певне поняття або команду. Не забувайте, що деякі поняття дуже складні, і їх занадто важко передавати іконками.
- Розроблена піктограма, відповідатиме розмірам реальному значку, який у готовому вигляді повинен поміститися у, зазвичай маленьке, місце в інтерфейсі. Іноді дизайнери розробляють візуально чудовий прототип, але у процесі реалізації його не можливо зменшити, обрізати для того, щоб зробити функціональну іконку.
- Піктограма легко передає свій смисл (розшифровується) і не містить багато деталей. Користувач не повинен роздумувати над її значенням і витрачати час.
- Посил іконки очевидний і інтерпретується з першого погляду. Піктограма – це не картина в музеї. Люди не повинні довго її розглядати. Одного погляду повинно бути достатньо для її розуміння.
Запам'ятайте
- Іконки повинні доповнювати сприйняття інформації.
- Вони повинні передавати чіткі образи.
- Використовуйте іконки там, де це доречно. Не варто бездумно всюди їх втулити аби було.
- Якщо образ чіткий, а іконка не підходить, можливо текст сформульований недостатньо точно.
Висновок
Іконки можуть допомагати юзерам впізнавати та здійснювати команди в інтерфейсі, пришвидшувати користування ресурсом. Одна погана піктограма може погіршити взаємодію користувача з усім сайтом, а сет незрозумілих, неякісних значків буде плутати користувачів і гаяти їхній час. Тому, краще: або витратити години на брейншторм, провести дослідження і розробити якісний сет корисних іконок, або використовувати звичайні текстові лінки без ілюстрацій взагалі.
Користь від іконок повинна перевищувати витрати, пов'язані з їх розробкою та використанням.
