Православні ікони та їх значення. Запитання: Якого розміру повинні бути PNG іконки? Не враховано попередній досвід користувача
Іконка мобільного додатка - це невелика картинка, що представляє додаток на маркеті, такому як Google Playабо App Store, та пристрої користувача. Якщо незабаром ви маєте створити свій перший дизайн іконки мобільного додатка, прислухайтеся до цих порад. Вони допоможуть вам уникнути помилок, які чатують на новачків.
Як дизайнеру, вам важливо звернути увагу на програму: адже часто користувачі приймають рішення про вибір програми, керуючись виключно зовнішнім виглядом іконки в маркеті. Продумана іконка асоціюється з якісним додатком та зручним інтерфейсом, а зроблене на швидку рукузображення не вселяє довіри.
Тому візьміть до уваги наступні поради щодо створення дизайну іконки для програми:
1. Дотримуйтесь вимог керівництва
Іконки існують не власними силами, а всередині графічної оболонки тієї чи іншої системи. Вони повинні гармонійно вписуватися в інтерфейс, не виглядати чужорідно поряд з іконками інших програм, але бути унікальними. Тому розробка іконки програми починається зі знайомства з посібниками виробника системи та вивчення сіток для побудови іконок у Photoshop.
Ось посібники, з яких варто почати:
- Офіційний сайт, присвячений Material Design для Android. Тут можна прочитати про стиль, анімацію, компоненти, патерни, макети та юзабіліті, а також завантажити матеріали на допомогу дизайнеру.
- Посібники з iOS Human Interface від Apple стануть у нагоді, якщо ви хочете створити іконку для iPad або iPhone.
Вивчивши тенденції та стандарти, дотримання яких від вас очікує виробник ОС, можна переходити до наступного кроку.
2. Знайте свою аудиторію
Іконка програми для локальної компанії, наприклад служби доставки їжі, відрізнятиметься від іконки фірми, яка хоче вийти на міжнародний ринок. В останньому випадку вам потрібно бути впевненим, що ви використовуєте універсальні символи, які однаково сприйматимуться людьми з різних частинсвітла і не скривдять чиїсь почуття:
3. Створюйте іконку у потрібному розмірі
Те, що виглядає добре, займаючи лист A4, не обов'язково "вистрілить" у розмірі 120 x 120 пікселів. Професійний дизайніконки має це враховувати.
4. Спрощуйте і не перевантажуйте іконку зайвими деталями
Мінімалізм – ваш кращий друг. Чим більше прикрас та деталей на іконці, тим нижча її впізнаваність. Іконка має бути чимось на зразок символу - досить простою та зрозумілою. Наприклад, ось іконка, яку ми зробили для застосування з рецептами Кукорама:
5. Правильно розставляйте світло та тіні
Ця порада актуальна, якщо ви робите іконку для Android-програми. Керівництво по Android Materialдокладно розповідає про цей аспект. У ньому також наведено значення для тіней, що відкидаються іконкою того чи іншого кольору.
6. Перевірте, як виглядає іконка на тлі іншого кольору (темному, світлому, кольоровому)
У маркеті іконка відображається на білому або світло-сірому фоні, але шпалери на пристроях користувачів набагато різноманітніші. Тому не забудьте перевірити, як виглядає дизайн іконки програми на фоні різних кольорів.
7. Не бійтеся використовувати перспективу
Звісно, якщо це не порушує загальне враження. Оригінальне використання перспективи допоможе вам зробити іконку програми ще помітнішою. Ось чудовий зразок використання перспективи:
8. Створіть цікаву форму
Іконки нижче запам'ятовуються завдяки використаним на них формам:
Форма допомагає розпізнати іконку, навіть якщо вона дуже маленького розміру.
9. Відповідально підійдіть до кольору
Почавши збільшувати кількість кольорів, вам буде важко зупинитися. Тому використовуйте один або два кольори – цього достатньо. Ось гарний приклад іконки з двома кольорами:
10. Не використовуйте фотографії
Існують чудові фотореалістичні іконки, але використання фотографій – це табу.
11. Створюйте іконки програм без зайвого тексту
Дрібний текст важко читати, і його використання створить проблеми у разі локалізації, якщо, наприклад, програма вийде для китайського ринку. При цьому ви можете використовувати перші одну-дві літери з назви компанії, як це роблять Tumblr або Pinterest:
12. Не використовуйте на іконці елементи з інтерфейсу програми
Це дуже погана практика, яка заплутує користувача. Елементи інтерфейсу на місце на вашій іконці.
13. Створюйте іконки, які говорять про головну функцію програми
З гарною іконкою користувачеві навіть не доведеться заглядати в опис: для плеєрів зазвичай використовують ноти, інструменти або візуалайзер, для камер - зображення фотоапарата або об'єктива, а для месенджерів на кшталт Viber - повідомлень:
У іконці для проекту UARoads ми відобразили відразу два важливих аспектівпрограми: необхідність надсилати дані на сервер для обробки і те, що воно призначене для автомобілістів. Також на іконці використані кольори національного прапора:
14. Вивчіть іконки конкурентів
Незважаючи на попередню пораду, погляньте на іконки конкурентів - швидше за все вони вже якось обіграли головну функцію програми. Тому спробуйте не повторюватись. Наприклад, іконка Wunderlist вигідно відрізняється від іконок інших програм зі списками справ:
А ось іконка, яку ми створили для програми KeepSnap, яка орієнтована на фотографів:
Як бачимо, навіть до створення такого невеликого елемента як іконка варто підходити з усією відповідальністю. Вдалий дизайніконки привертає увагу користувачів, які прийшли до маркету зовсім за іншим додатком.
Зміна іконки – це теж не жарти. Наприклад, власникам Radium, програми-агрегатора радіостанцій, довелося міняти іконку кілька разів на місяць, тому що вона не припала до смаку користувачам.
Ми, студія, із задоволенням створимо іконку для вашої програми, яка буде вигідно відрізняти її від продукції конкурентів.
- Переклад
Від перекладача.
Це переклад статті Філіпа Бернарда із сайту css-tricks.com. Частину статті, що містить опис роботи зі створеним ним сервісом, я дозволив собі опустити. Якщо ви знайдете помилки, будь ласка, повідомити про них в особистому повідомленні.
Стаття містить результати проведеного ним дослідження, яким має бути фавікон (і те, що його замінює), щоб добре відображатися у різних випадках.
Фавікон був представлений в 1999 році, Internet Explorer 5 () і стандартизований W3C через кілька місяців. Це була маленька іконка, яка представляла сайт.
З того часу більшість настільних браузерів слідують тенденції і використовують фавікон тим чи іншим способом. Це дуже просто, чи не так? Створити маленьку картинку і додати до будь-якого інтернет-проекту, щоб зробити його «завершеним». Нічого складного. Чи ні?
Влаштуємо вікторину!
Який основний файл фавікон?
Відповідь: favicon.ico.Просто переконатися: це не PNG, перейменований в favicon.ico. Хоча деякі браузери вибачать цю помилку, ICO це інший формат, який підтримує кілька версій зображення.Питання: Якого розміру має бути favicon.ico?
A: 16х16.Стандартний.B: 32х32.Хіба фавікон не оновлювався якийсь час тому?
C: 64×64.
D: Жоден із перерахованих.
Відповідь: D.
Формат favicon.ico спочатку задуманий Майкрософт та підтриманий деякими іншими виробниками. Майкрософт рекомендує розміри 16х16, 32х32 та 48х48. Так, один ICO може містити декілька зображень.
Браузери зазвичай відображають фавікон на вкладках, і на звичайних дозволах, версія 16х16 виглядає добре:
16х16 на вкладці Chrome. Поки все добре.
Але іконка 16х16 дуже мала для інших місць: панелі завдань та робочого столу. 
16х16 в панелі завдань.
16х16 на робочому столі. Не добре.
Коли іконка містить кілька зображень, результат набагато кращий. 
16х16, 32х32 та 48х48 favicon.ico в панелі завдань. Виглядає як проста програма.
16х16, 32х32 та 48х48 favicon.ico на робочому столі. Ідеально.
Запитання: Яке призначення favicon.png?
Насправді частіше зустрічається інший файл, favicon.png. Люди часто питають про це.Що це насправді?
A: Значок для браузерів, які не підтримують favicon.ico.Такі як Firefox, мабуть?
B: Значок високої роздільної здатності.Знаєте, з усіма цими новими екранами з високою щільністюпікселів.
C: Артефакт із минулого.Тепер це нові іконки, наприклад Apple Touch icon.
D: Все разом.
Відповідь: D.
Починаючи з прийняття HTML5 favicon.ico не надто корисний. Було представлено атрибут sizesдозволяє оголосити кілька різних версій однієї і тієї ж іконки, і це можуть бути PNG файли:
То що ми маємо оголошувати?
Давайте подивимося правді у вічі. Хоча майже всі настільні браузери підтримують favicon.ico, цей файл застарів. Так, ви, як і раніше, можете використовувати цей файл і все буде працювати, як задумано. Але серйозно це застарілий формат. Він не використовується ніде, крім Інтернету. PNG підтримується набагато краще.
Favicon.ico – для старих версій IE. Для інших браузерів та останніх версій IE використовуйте іконки PNG. Так які sizesнеобхідно визначати? Скоро дізнаємось.
Питання: Який формат потрібний для підтримки мобільних платформ?
Згідно з SmartInsights, більше 26% веб-трафіку генерується смартфонами та планшетами. Це майбутнє. Що потрібне для підтримки цього світу?Відповідь: favicon.ico.Це працювало 15 років тому, працює й сьогодні.
B: PNG ікон.Ви сказали, що розкажете про це.
C: Apple Touch icon.Кеп.
D: Тут все одно немає правильної відповіді.
Відповідь: D.Потрібні PNG ікон. І Apple Touch icon. І плитки для Windows 8. І файл під назвою browserconfig.xml.
Мобільні платформи набагато гетерогенніші, ніж звичайні настільні браузери. Розміри екранів та роздільної здатності дуже сильно варіюються і немає переважаючої операційної системи, такої як Windows, як це було за часів появи інтернету.
Наслідок: не думайте, що мобільний фавікон може бути однією універсальною картинкою або мати універсальне оголошення HTML коді.
Запитання: Якого розміру повинні бути PNG іконки?
A: 96х96 для Google TVB: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Усі перелічені
Відповідь: D, і навіть більше.Наприклад, 160х160 для старої версіїшвидкого набору Opera (давно в минулому), або 128х128 для Chrome Web Store, все залежить від платформи, яку ви збираєтеся підтримувати.
Запитання: Який розмір Apple Touch icon?
Apple Touch icon використовувані iOS для закладок та сайтів «на домашньому екрані». На думку спадає 57х57, браво. Це правильно. Тільки це було 7 років тому, коли було випущено перший iPhone.Відповідь: Аж до 180х180.
Після появи першого iPhone, було 3 важливі релізи:
- iPad. З екраном значно більшого розміру.
- Retina-екрани. З подвоєною щільністю пікселів.
- iOS7. Плоский дизайнвідрізняється на iPhone/iPad.
| Пристрій | Екран | Версія iOS | Розмір іконок |
|---|---|---|---|
| iPhone | Classic | 6 і нижче | 57x57 |
| 7 | 60x60 | ||
| Retina | 6 і нижче | 114x114 | |
| 7 | 120x120 | ||
| 6 Plus | 8 і вище | 180x180 | |
| iPad | Classic | 6 і нижче | 72x72 |
| 7 | 76x76 | ||
| Retina | 6 і нижче | 144x144 | |
| 7 | 152x152 |
Стара 57х57 Apple Touch icon на блискучому Retina iPad. Мутно.
Великий 152х152 Apple Touch icon на Retina iPad. Обережно.
Якщо ви відповіли неправильно, не засмучуйтесь. З 5000 популярних сайтів, які надають apple-touch-icon.png, менше 4% роблять це правильно.
Деякі можуть заперечити, що всі 9 зображень не дуже потрібні. Однак, принаймні, основна Apple Touch icon має бути 152х152. Retina iPad під iOS 7 знайде, що потрібно, а молодші пристрої можуть зменшити зображення.
Питання: Чи потрібно оголошувати Apple Touch icon у HTML?
A: Не знаю.Потрібно ж щось відповісти!B: Так.Інакше як iOS знайде їх?
C: Ні. Apple пропонує рекомендації, так що будь-який iOS пристрій все одно їх одягнений.
D: Ні, але...
Відповідь: D… але деякі інші платформи також використовують Apple Touch icon, краще їх оголосити.
Як дивно це не звучало, пристрої під iOS не єдині, які шукають Apple Touch icon. Оскільки вони популярніші і зустрічаються частіше за інші PNG іконок високих дозволів, деякі браузери, як Android Chrome, використовують їх. Таким чином, краще їх оголошувати, це дозволить відвідувачу із сумісним пристроєм або браузером використовувати одну з них.
Запитання: Як оголосити плитку для планшетів на Windows 8?
A: Планшет на Windows 8? Що це таке?B: favicon.Спадщина Стіва Балмера.
C: Мета-теги. Два msapplication-TileColorі msapplication-TileImage.
D: browserconfig.xml.
Відповідь: C для Windows 8 та IE 10, D для Windows 8.1 та IE 11. Відповідь A у чомусь теж вірна.
Оголошення для Windows 8.0 виглядає якось так:
Windows 8.1 та IE 11 очікують кілька версій зображення, оголошених у browserconfig.xml. Наприклад:
Новий інтерфейс Metro пропонує кілька нових принципів дизайну, наприклад, «білі силуети», які використовуються більшістю встановлених програм. 
Плитки сайтів у Windows 8.
Запитання: Який розмір плитки square150x150logo?
A: 150х150.Ви не вмієте читати?B: Інший.
Відповідь: B, 270х270.
Значок, піктограма, значок, символ, образ, як тільки не називають ці елементи графічного інтерфейсу. Навіщо вони взагалі потрібні, як їх правильно використовувати і що потрібно знати, щоб не заплутати користувача?
Саме з дизайну іконок розпочалося життя нашої студії у 2005 році. Тому ми із задоволенням поділимося з вами всіма знаннями, що накопичилися за всі ці роки.
Чому людині взагалі спала на думку ідея використовувати значки, замість слів?
Це питання стосується не лише інтерфейсів. У повсякденному життііконки оточують нас скрізь: переслідують на дорозі у вигляді дорожніх знаків, зустрічають біля входу в магазин і навіть сидять на ярликах нашого одягу.
Навіть футболки вже спеціальні вигадані для туристів, які допомагають знайти спільну мовуз аборигенами у будь-якій країні. Варто лише тицьнути пальцем на потрібну іконку.
Чому ми так любимо значки?
Тому що у них є низка переваг:
- Вони впадають у вічі;
- Вони швидко передають інформацію;
- Вони запам'ятовуються;
- Вони заощаджують місце;
- Вони зрозумілі будь-якою мовою.
Іконки інтерфейсів мають ще низку переваг:
- Вони приємніші оку, ніж полотна тексту, які могли б бути на їхньому місці. Чим меншим стає екран, тим більше слів хочеться замінити спеціальними значками.
- Вони можуть надати додатку візуальну індивідуальність.
Але головне, чим має мати будь-яка іконка — це ЯСНІСТЬ.
Якщо користувач не зрозуміє значення іконки, він або її уникатиме, або плутатися.
З морозивом – не можна, з сигаретою – не можна, з єдинорогом – можна
Щоб вирішити проблему з ясністю іконки, можна йти кількома шляхами:
1. Пояснювати нову іконку текстом, підказувати, вчити користувача використовувати її правильно
Таким чином ви створюєте новий досвід користувача. Людина, подібно до того, як вчить алфавіт, повинна вивчити і значки інтерфейсу. Щоб йти цим шляхом, потрібно бути впевненим у своєму продукті, готовності користувачів вчитися заради його використання.
Візьмемо як приклад Instagram.
Іконка із зображенням скриньки була незрозуміла, мало хто розумів, що з її допомогою можна надсилати особисті повідомлення.
Сьогодні іконку надсилання особистих повідомлень змінили на більш ясну.
Тому розглянемо другий варіант.
2. Боротися за ясність, створювати іконки максимально зрозумілі користувачеві
І саме про те, як це зробити і не помилитися у виборі, йтиметься далі.
Чому іконки інтерфейсів не завжди зрозумілі для користувачів?
Давайте розумітися на причинах.
10 помилок у дизайні іконок інтерфейсів
1. Неточність дизайну образ ікон.
Для початку проведемо невеликий тест.
Це і є приклад іконки, яку не можна однозначно інтерпретувати, а значить вона може викликати здивування у користувача.
В однієї старій статтіпро помилки в дизайні іконок наводився приклад курйозного випадку, коли іконку фільтра даних створили у вигляді вирви.
Відповідь клієнта була така: «Мені не зовсім зрозуміло, чому ви намалювали іконку фільтра у вигляді келиха для мартіні!» 🙂
Щоб уникнути подвійного трактування, дизайнер повинен чітко передати образ, сенс якого можна буде легко вловити. Не примушуйте користувача думати.
2. Неясність асоціації
На відміну від першої причини, у цьому випадку зазвичай сам образ передано правильно, але користувачеві не зрозуміло, чому використано саме цю іконку і що вона означає.
Подивіться ще раз на приклад зі старою іконкою для надсилання особистих повідомлень до Instagram. Образ цілком уловимо - зображено ящик. Але з чим у вас асоціюється скринька? Зберегти? Вхідні? Додати новий файл? Асоціація надто тонка, користувачеві потрібно думати, отже образ підібраний невдало.
Ось ще один наочний прикладтого, як мене заплутав інтерфейс.
Як потім з'ясувалося, під час наведення курсору на іконку спливає підказка.
Набагато ясніше для користувача у разі був би образ сміттєвого бака.
Крім того, тут інтерфейс дозволяє розмістити слова "Видалити обліковий запис", і в цьому випадку використання тексту замість іконки виглядало б виправданим.
Ось ще один приклад, коли виникає дисонанс значення іконки та її образу:
Ніколи б не подумала, що цей значок можна використовувати для видалення папки
З одного боку, іконки в інтерфейсі повинні підходити за стилем і виглядати цілісно і гармонійно, щоб не вийшло так:
Але з іншого боку, іконки мають бути легко помітні між собою.
Коли 2 дуже схожі іконки відповідають різні функції, виникає плутанина.
Ось ще один приклад:
4. Не враховано попередній досвід користувача
Ви пам'ятаєте, як у Viber під час надсилання повідомлення поруч висіла іконка із зображенням стрілки?
Багато нових користувачів плуталися, вважаючи, що стріла має значення "Надіслати повідомлення". Чому? Тому що багато нових користувачів прийшли до Viber з Skype та інших месенджерів, де стрілка означала саме відправлення повідомлення та розташовувалася в тому ж місці.
Стріла в інтерфейсі Viber означала надсилання даних геолокації. Не дивно, чому всі мої друзі на той час були в курсі, де я;)
Зараз інтерфейс Viber виглядає інакше:
Тому, створюючи інтерфейс, уважно вивчіть інтерфейси основних конкурентів, щоб не плутати та не переучувати користувачів.
Створювати новий досвід користувача - це складний шлях і часто невиправданий.
5. Не враховано ментальні особливості ЦА
Деякі значки можуть по-різному інтерпретуватися в різних країнах.
Подібно до того, як у різних країнах неоднозначно сприймаються жести, також неоднозначно можуть бути зрозумілі іконки.
Якщо ви створюєте універсальну програму, орієнтовану на багато країн, використовуйте більш універсальні іконки.
Хоча, зізнатися, їх не так уже й багато. Нині серед них можна назвати зображення принтера(печатка), вдома(Повернення на головну сторінку), лупи(Пошук) і практично все. Значок, що означає меню-гамбургер, Незабаром теж може стати універсальною. Однак, деякі тести показують, що користувачам звичніше бачити кнопку з написом "Menu", ніж 3 горизонтальні смужки.
Якщо ваша програма орієнтована на цільову аудиторіюконкретної країни, враховуйте її особливості сприйняття.
Так, наприклад, для жителів США звичнішою буде іконка з візком супермаркету ( shopping cart) для позначення покупки (
).
Для мешканців Великобританії в інтерфейсі користувача звичніше бачити кошик ( basket) або сумку ( bag).
6. Неправильне посилання
Дизайн іконок може вплинути на поведінку користувача.
Так, при виборі іконки для дії “Додати товар у кошик” слід орієнтуватися не тільки на ментальне сприйняття, а й на підтекст, який вони несуть.
Візок супермаркету має на увазі, що користувач може в будь-який час як покласти товар у кошик, так і передумати, і викласти його. Тобто. у цьому випадку ви не тиснете на майбутнього покупця і м'яко схиляєте до покупки.
Пакет або сумка значно більше впливає на свідомість користувача, закликаючи його саме до покупки, а не до складання товару в кошик. Ми звикли складати речі у свою сумку після оплати їх у касі, тобто. ця іконка наполегливіше закликає саме до покупки.
Обидві іконки можуть бути використані, і спрацювати як плюс, так і мінус. Можна додати товар у візок і забути про нього, а можна піти з сайту, так і не наважившись покласти товар у сумку. Враховуйте специфіку свого товару та вибирайте правильне посилання.
7. Застарілі образи
Тут потрібно бути дуже обережним. Іконки старіють, як і люди.
Чи зрозуміє нове покоління цю іконку, якщо вона ніколи не тримала дискету в руках?
З одного боку, заміна багатьох популярних іконок незабаром стане необхідністю.
Але з іншого боку, покоління змінюються набагато повільніше, ніж змінюється наше уявлення про якийсь предмет.
Візьмемо наприклад зображення телефону.
Перша іконка досі актуальна і зрозуміла новим поколінням, т.к. її форма легко впізнається.
Якщо розташувати іконку смартфона, можна заплутати користувача. Смартфон асоціюється не лише з функцією дзвінка, а й купою інших можливостей.
Придивіться до іконки, яка використовується у Твіттері для написання нового твіту. Іконці надали форму гусячого пера, щоб передати сенс "Клікні сюди і ти зможеш писати".
Багато іконок, образи яких застаріли, ще довго не втратить своєї актуальності, тому оцінюйте ризики, змінюючи образ давно всім знайомої іконки на новий.
Ми давно не слухаємо музику з касет, не використовуємо мікрофон старого стилю або телевізор з ріжками, але ці образи набагато зрозуміліші користувачеві, ніж якщо ми зобразимо замість них чорні прямокутники смартфона, які можуть зараз замінити всі ці предмети.
8. Перевантажений дизайн
Не забувайте, що іконка інтерфейсу має бути зрозумілою не тільки в її самому. великому розмірі, а й у мініатюрі.
Саме тому зайві елементи створюватимуть бруд в інтерфейсі та викликатимуть подив у користувача.
Порівняйте самі:
Зараз ця проблема є менш актуальною, ніж вона була до появи трендів плоского і чистого дизайну. Плоскі іконки набагато легше сприймаються ніж складні 3D об'єкти. і це одна з причин, чому вони такі популярні. Однак у руках вмілого дизайнера та об'ємну іконку можна зробити відомою у будь-якому розмірі.
9. Використання тексту чи його відсутність
Використовувати текст у іконках чи ні? Пояснювати значення іконок чи надати це користувачеві? Немає однозначної відповіді на ці запитання.
Іноді потрібно передати настільки складне поняття, що без тексту поряд чи підказки не обійтись.
У той же час, якщо взагалі відмовитись від іконок і використовувати тільки текст, ми не зможемо швидко сфокусувати погляд на потрібній кнопці.
Якщо є можливість додати текст, який не перенаситить інтерфейс, краще його додати.
Але щодо тексту в дизайні самої іконки, краще уникнути його використання, т.к. в самому маленькому розмірізначок він буде нечитабельним, а дизайн виглядатиме перевантаженим.
10. Скалювання іконок
При збільшенні чи зменшенні растрових іконок вони стають нечіткими і розмитими, тому багато дизайнерів вважають за краще створювати векторні іконки, щоб потім не витрачати час на промальовування дрібних деталей вручну, а просто збільшувати або зменшувати зображення.
Але такий підхід також є невірним.
Ось приклад, як виглядає зменшена іконка (у червоному колі) та промальована дизайнером у меншому розмірі вручну (у зеленому колі).
Тому завжди просіть дизайнера промальовувати елементи вручну під час створення нових розмірів.
Висновки
Чому ми виділили саме ці 10 помилок, а решту, не менш важливих, залишили без уваги? Тому що ці помилки впливають на ЯСНІСТЬіконки, викликають здивування, заплутують користувачів та можуть вплинути на конверсію.
Як бачите з прикладів, одна лише неправильно підібрана іконка може змусити користувача видалити обліковий запис, відмовитися від покупки або від використання незручної програми.
Так що вибирайте правильні іконки і краще довірте це
Іконки заощаджують місце та виглядають свіжо. Іконки – це швидка відповідь на складні питання:
- Як зробити гарніше?
- Як нам це забрендувати?
- Як зробити веселіше?
Ми любимо іконок. Поки що не починаємо в них плутатися.
Іконки бувають різні: на продуктах, в архітектурі, в комп'ютерах, у списках, на кнопках, для Інтернету та додатків, для iOS та Android. Іконки на панелях інструментів, підписані та непідписані, стилізовані та стандартизовані, кольорові та монохромні, у іконкових шрифтах, файлах PNG або SVG…
Є багато безкоштовних і платних наборів іконок, векторних і растрових, плоских і об'ємних, і якщо записувати правила роботи з ними, знадобиться товстіший зошит. Чортових іконок так багато, що Диявол легко переконає вас, що вони витягнуть навіть поганий дизайн.
Але будьте обережні. Якщо «іконка» стане вашою відповіддю на будь-яке запитання, якось Дон Норман постукає у ваші двері, а коли відчините, уважно подивиться вам у вічі і скаже:
«Незрозумілі іконки засмічують інтерфейс, хоча наукова спільнота давно показала: люди запам'ятовують значення лише небагатьох іконок. Чи можете ви згадати значення всіх цих іконок? Я – ні».
Цими словами Дон Норман повчав свого колишнього роботодавця – Apple. Приклади іконотоксиозу Apple зустрічаються в iTunes, Mail та панелі керування iOS.
У твіттері айтюнсовими іконками лякають як Бабою Ягою. Ось чудовий приклад з Apple Mail для OS X: скільки з цих іконок ви розпізнаєте без підпису?
Що ми бачимо на цьому прикладі? Тільки те, що іконки економлять місце та виглядають свіжо. Призначення кнопок не викликає питань лише у дизайнера, який розмістив іконки на цій панелі. За іконкою може ховатися тисяча різних слів, і це Головна проблема. Коли у слова – тисяча значень, лише гарне розуміння контексту дозволить уникнути різночитань. Ось ті ж іконки, але з підписами:
Підписи пояснюють ікон. З ними інтерфейс стає зручнішим. Через це деякі безсердечні люди стверджують, що «найкраща іконка – це текст». Логічно, правильні підписи рятують від плутанини. То чому б нам не використовувати лише підписи без іконок?
Функціонально чисто текстовий дизайн ясний як день (якщо інформаційні архітектори впоралися зі своїм завданням), але щось ламається, коли ви прибираєте зображення з інтерфейсу. Життя залишає його. Він перестає бути свіжим та веселим. Це не турбує дизайн-позитивіста. Але хвилює решту людей. Ми перевірили цю гіпотезу, вилучивши іконки з iA Writer. Реакцією користувачів було рішуче "Не треба!"
Можливо, краще не вибирати між текстом та іконкою, а зрозуміти, коли використовувати лише іконки, коли лише текст, а коли іконки з підписами. Давайте розберемося…
Тільки іконки
Іконки – це картинки. На картинках легко показати звичайні предмети. Підпис не потрібна іконкам, на яких зображені об'єкти, що легко впізнаються, що представляють знайомі поняття. Наприклад, літаки для аеропортів, людські фігури для туалетів, кошики для місць, де лежать документи, які ми скоро викинемо.
Матеріальні об'єкти зобразити легко, а необхідність показати на іконці дію чи абстрактне поняття змусило помучитися багатьох дизайнерів. Проблема в тому, що при взаємодії людини з комп'ютером більшість іконок – це дії та абстракції.
Показати дію реально. Анімована іконка відволікає, краще використовувати метафору дії. У контексті робочого столу комп'ютера іконка принтера означає «Друк», сміттєвий кошик – «Видалити», ножиці – «Вирізати». Кожен із цих об'єктів має одне конкретне призначення, тому цільова діялегко зрозуміти.
Зі складними діями та абстракціями так уже не вийде. І немає надії на те, що найближчим часом щось зміниться. За 40 років взаємодії людини з комп'ютером ми не знайшли універсальних символів для базових функцій на кшталт збереження, копіювання та вставки.
«Загальна проблема піктографічних систем у тому, що єдине їхнє обмеження – кількість предметів із навколишнього світу, які можна показати на зображенні».
Голі іконки на функціональних елементах інтерфейсу погіршують юзабіліті. Кращий спосібповідомити про функцію - слово, а не картинка. Ще краще, якщо це дієслово.
«Коли справа доходить до завжди недосконалого обміну думками між людьми, найкраще, що у нас, людей, для цього є це мова. Письмова мова надає думкам довговічність і точність (ми рідко виправляємося в мову, а цю пропозицію я виправив кілька разів)».
Візуально графічні символи простіше і привабливіше за щільні слова. Але чим ближче, тим більше сирени стають схожими на монстрів. Коли ви намагаєтеся їх прочитати та зрозуміти, вони перетворюються на загадкові знаки з незнайомої вам мови, хапають взаємодію та відкушують їй голову. Голі іконки покращують зовнішній виглядінтерфейсу, знижуючи його зрозумілість. Вони затіняють зрозумілі функції, маскуючи їх шаром темних символів.
«Іконка – це символ, однаково незрозумілий будь-якою мовою. Не важливо, які мови ви знаєте, значення іконки вам доведеться навчитися. Люди не просто так вигадали фонетичні мови, де можна об'єднати кілька символів, щоб створити будь-яке слово. Багато дизайнерів запевняли мене використати іконки в інтерфейсі. Я питав їх, «це справді кращий інтерфейс, який можна придумати, чи він зроблений за звичкою? Дизайнерів просто застрягли у цій парадигмі і не помічають її занепаду».
Іконки модно виглядають і круто вирішують проблеми із нестачею місця. Звичайно, не одна Apple винна у зловживанні голими іконками. Матеріальний дизайн Google отруєний фірмовими символами. Ось для порівняння Gmail:
Що ми тут бачимо? Іконки Gmail виглядають просто, але вони змушують подумати про призначення кнопок. Якщо ви зосередитеся і трохи зосередитеся, зможете вгадати. Через деякий час вам буде допомагати м'язова пам'ять, але і короткострокова і довгострокова пам'ять прийматиме їх з такою ж працею. У поштовому додатку концентрацію та зосередженість слід спрямовувати на розуміння та написання тексту, а не на розшифровку інтерфейсу.
Стоп! А хіба Google не вимірює все у світі? Вони, напевно, знають, що роблять, так? Там працюють вчені. Вони обрали підхід із іконками без підписів, і вони ніколи не помиляються. Значить, іконки – це правильно! Можливо, але те, що підходить Google або Facebook може не підійти нам. Як буде сказано нижче, Google могли знайти причину поза природничими науками. Як би там не було, Google пропонує і варіант із голим текстом.
Тільки текст
Зображення можна інтерпретувати по-різному. Залежно від контексту навіть всюдисуще збільшувальне скло читається і як «пошук», і як «збільшення». Значення слова також залежить від контексту, але читається воно завжди однаково. Що, якщо іконки замінити на текст? Логічно, що такий інтерфейс працюватиме краще за іконковий. У налаштуваннях Gmail можна замінити іконку на текстову версію:
Що сталося? Сенс кнопок тепер зрозумілий. Але інтерфейс став менш людяним, менш веселим. Він нагадує робочий інструмент, став холоднішим, і, на диво, здається складнішим. Як це можливо? Текстовий інтерфейс об'єктивно зручніший, але через естетичні нюанси він таким не сприймається.
Текст – це раціональний вибір. Правильно структуровані та названі функції – основа взаємодії людини з комп'ютером.
Іконки – це емоційний вибір. Правильні іконки додають позитиву. Емоційний вплив не виміряти, але він стає від цього менш реальним.
«Недостатньо створювати продукти, які працюють, які зрозумілі та прості у використанні. Треба створювати продукти, які привносять захоплення та збудження, радість та веселощі, і звичайно, красу в людські життя», - Дон Норман у книзі «Дизайн звичних речей».
Люди - і раціональні та емоційні створення: «Мозок не обробляє інформацію, здобуває знання та зберігає спогади. Якщо коротко: мозок – не комп'ютер». Якщо щось на тему зручності іконок і доведено, то це те, що «Іконки з підписами працюють краще, ніж чисто іконка чи чисто текст».
Значок з підписом
Іконка з підписом та емоційна та зрозуміла. Іконки з підписами працюють завжди. Якщо іконка не зрозуміла, підпис пояснить. То чому б не використати цю пару переможців?
Проблема в тому, що це є компроміс. Він знижує емоційне посилання іконок і простоту чистого тексту. Він не економить місце та не прикрашає зовнішній вигляд. Він займає більше місцяпо вертикалі і створює більше візуального шуму, ніж чисто іконки чи текст.
Емоційно ми віддаємо перевагу іконкам. Раціонально краще замінити іконки на текст. Теоретично значок з підписом - безпрограшний варіант. На практиці у дизайні немає срібних куль.
Безпрограшних варіантів немає, але є компроміси кращі та гірші. Ми працюємо для людей. Люди відчувають та думають. Хоча краще не заглиблюватися у релятивізм.
Теорія та практика
Подібно до будь-якої технології це допомагає вибудовувати інтерфейси на вершині раціональної, функціональної структури. Дизайн - не природнича наука. Це практика, що отримує вигоду з науки та вимірювань, але якість дизайну не можна оцінити лише об'єктивними вимірами. Тестування користувача та аналітика не замінюють дизайнерів, але перевіряють дизайнерські припущення. У продукті більше того, що може продумати дизайнер, а в дизайні більше, ніж ми можемо виміряти. Це "більше" можна охопити лише розмовляючи з людьми, які використовують продукт.
Взаємодія людини із комп'ютером будується на раціональному фундаменті. Ми – живі істоти, нашу поведінку не можна прорахувати, але з нами можна поговорити. Іконки, кольори, ритм, повітря, типографіка та інші гарні речі роблять інтерфейс приємнішим і за рахунок цього покращують взаємодію. Він виглядає не таким раціональним. Він виглядає людяним.
Прості правила
Не поспішайте додавати іконки, якщо з дизайном щось не так, якщо вам здається, що він працює не так, як заплановано. Іконки не виправлять погану структуру сайту. Додайте їх наприкінці. Не грайте з іконками під час роботи над вайрфреймом. За однією картинкою може ховатися тисяча слів. Хороша інформаційна архітектура поміщає правильні слова у правильний контекст. Пропрацюйте раціональну частину до переходу до емоційної.
Іконка позначає певний розділ чи функцію. Вона є словом, яке доносить простий і зрозумілий сенс. Сенс повідомлення залежить від контексту. Навіть найпрекрасніша іконка буде марною, якщо слово підібране незрозуміле чи не відповідне контексту. Перш ніж вибрати іконку, запитайте себе: Яке слово вона позначатиме? Це правильне слово? Зрозуміле? Воно працюватиме у цьому контексті? Значок може приховувати багато різних понять. Слова в контексті не такі пластичні. На відміну від іконок вони підкоряються багатьом правилам.
Коли ваша структура готова і настав час вступати в гру іконкам, радості та іншому, дотримуйтесь простого правила: додайте необхідний мінімуміконок, але не менше.
Ставтеся до іконок з максимальною увагою. Їхнє поліпшення може зайняти весь ваш час. Вони мають бути впізнані самі собою, повинні чітко ілюструвати поняття, яке представляють, і вони мають працювати в контексті з іншими іконками та поняттями.
Іконки - це прикметники та прислівники у звичайному тексті. Їхнє видалення не перетворить ваш текст на літературний шедевр. Видаляйте зайве, шукайте підходяще, замінюйте розпливчасті та химерні формулювання на точні та лаконічні.
Есе написано фахівцями компанії iA.
«Шеф-редактор блогу GetGoodRank, веб-аналітик, блогер.
Як правильно оформити та застосувати іконки на сайті? Розповідаємо про простих правилахюзабіліті іконок, а також наводимо простий чек-лист перевірки.»
Іконка - схематичний елемент графічного інтерфейсу, що означає програму, функцію або тематичний розділ сайту/додатку. Іконки прості, лаконічні та ефективні. Використовуються для спрощення графічного інтерфейсу програми або сайту, а також для спрощення та прискорення комунікації з користувачем (людська свідомість у рази швидше обробляє та «розуміє» графіку, ніж текст). Іконки класифікуються залежно від виконуваної функції:
- Навігаційні іконки- використовуються для позначення функції: навігаційні стрілки вгору та вниз для переміщення по довгій сторінці, кошик для переходу в кошик, лупа для активації рядка пошуку.
- Інформаційні іконки- Вказують на тематику розділу. Наприклад, схрещені інструменти часто вказують на розділ технічною інформацією, шестерня – на розділ з налаштуваннями, машина вказує на інформацію про доставку, цифри 24/7 – на цілодобовий графік роботи тощо.
- Іконки-заклики до дії- Часто використовуються для позначення очевидних дій. Наприклад, на сторінці завантаження програми жирна стрілка вниз позначає заклик до завантаження софту, на сторінці товару плюс означає заклик додати товар у кошик і т.д.
Правила юзабіліті іконок
Не всі іконки однаково зрозумілі користувачам, якщо сайт застосовує індивідуальний стиль і відходить від загальноприйнятих стандартів. Щоб іконки виконували пряму функцію спрощення дизайну та комунікації з користувачем, дотримуйтесь наступних правил:
1. Супровідний текст- Різні сайти використовують навіть стандартні іконки з різною метою. Так, стандартна лупа може позначати пошук сайту або наближення/збільшення зображення. Графічні символи можна трактувати подвійно. Щоб спростити завдання користувача, слід супроводжувати текстові іконки. Це переважно стосується іконок навігації. Текст та графіка в парі працюють набагато краще, ніж щось одне.
2. Єдиний стиль- іконки повинні бути виконані в єдиному стилі. Найкраще використовувати схематичні зображення з мінімальною кількістю деталей. Іконка повинна бути легко помітна у спільній концепції дизайну та простий для розуміння користувача. Іконки, які виконують різні завдання на сайті, можуть бути виконані у різних концепціях. Однак застосовуючи різні графічні стилі, слід уникати надмірної строкатості. Пам'ятайте, що іконка покликана спростити взаємодію користувача з сайтом, а не навпаки, змусити його вивчати приховані символи функції.
3. Клікабельність- іконки, за якими доступна дія, повинні візуально демонструвати клікабельність: підсвічування при наведенні курсору, зміна кольору, збільшення. Це дасть зрозуміти користувачеві, що іконка функціональна, а не просто елемент графічного інтерфейсу. Застосовуйте мінімальну анімацію.
4. Тест 5 секунд- під час розробки індивідуальної концепції іконок (застосування нестандартних іконок) проведіть тест 5 секунд. Якщо ви протягом 5 секунд не зможете ідентифікувати іконку і зрозуміти, що вона означає на сайті, значить даний графічний символ неприпустимий в дизайні. Він створюватиме додаткові перешкоди на шляху користувача до мети: вивчення інформації на сайті, вибору товару/послуги.
5. Розмір має значення- занадто дрібні символи ризикують залишитися непоміченими в дизайні, тоді як занадто великі іконки можуть спантеличувати, домінувати над іншими елементами і перетягувати на себе увагу (особливо якщо великі іконки виділені кольором).
Як перевірити юзабіліті іконок
Використовуйте для перевірки юзабіліті іконок на сайті наступний чек-лист запитань:
- Чи легко знайти іконку в інтерфейсі сайту чи програми?
- Як гармонійно виглядає іконка в інтерфейсі? Чи не порушує вона загальну концепцію дизайну?
- Чи розташована іконка в очікуваному для користувача місці?
- Чи не відвертає увагу значок від основного контенту сторінки?
- Чи зрозумілий сенс іконки користувачеві?
- Як виглядає іконка в мобільної версіїсайту? Чи легко з нею взаємодіяти з тачскріном?
- Чи асоціюється ця іконка з іншими, несуміжними діями? Чи не створює вона додаткових труднощів у використанні сайту? Чи не призведе іконка до хибних дій?
- Чи потрібна іконка в даному контексті для позначення того, до чого вона прив'язана? Чи можна обійтися без неї?
