Іконки у веб-дизайні

Правильно розставлені акценти на сайті допомагають дизайнерам привернути увагу користувача та направити його до головної мети на — замовлення. Одним із таких акцентів є іконки — зображення, що використовують для позначення інформації. Проте, обрати вірні іконки — не так вже й легко.

Функції іконок на сайті

Навіть найменші деталі на сайті мають значення для дизайну. Іконки допомагають не тільки зекономити місце на екрані, а й встановити певний зв’язок з користувачем. Вони спрощують сприйняття інформації, адже картинки завжди викликають асоціації. Розглянемо приклад позначення категорій магазину меблів. Без іконок швидкість сприйняття зменшується.

Photo courtesy of olivia mew(CC No Derivatives)

З іконками достатньо оглянути екран, щоб зрозуміти, про що йдеться і що саме нам хоче запропонувати компанія. Кожна іконка відповідає обраному товару. Диван, наприклад, традиційно відносять до м’яких меблів, а іконка плити – це сантехніка. У іншому прикладі потрібно вчитуватися в текст, щоб зрозуміти зміст.

Ще одна функція іконок – допомога в орієнтації на сайті. Є кілька універсальних символів, які використовуються в дизайні для направлення користувача, наприклад:

  • значок лупи означає пошук інформації;
  • іконка будинку веде на головну сторінку;
  • картинка серця чи зірки — обране;
  • силует людини у шапці сайту веде до особистого кабінету;
  • значок візка або кошика означає додавання товару в кошик або перехід на сторінку оформлення замовлення.

Такі зображення додають на сайти інтернет-магазинів для полегшення покупки:

Photo courtesy of olivia mew(CC No Derivatives)

Приклади використання іконок у веб-дизайні

Ми розібралися, як іконки відрізняються за стилістикою та методами застосування. Тепер розглянемо розподіл елементів за призначенням реальних прикладів.

  • Іконки для навігації

Як ми вже писали, іконки необхідні для полегшення орієнтування користувача на веб сторінці. Особливо важливим є призначення іконок в інтернет-магазинах і сайтах компаній, де головною цільовою дією є оформлення заявки або покупка.

Photo courtesy of olivia mew(CC No Derivatives)
  • Інформаційні іконки

Іноді іконки використовуються, щоб про щось розповісти клієнту: про продукцію, компанію чи надати корисну інформацію.

Photo courtesy of olivia mew(CC No Derivatives)
  • Соціальні докази

Через іконки можна донести до відвідувачів сайту інформацію про кількість куплених товарів, досвід роботи компанії та інше:

Photo courtesy of olivia mew(CC No Derivatives)
  • Розділи каталогів

Щоб розділити одну категорію товарів від іншого та викликати асоціації з певним продуктом, іконки використовують в оформленні розділів каталогу. Таким чином каталог не перетворюється на простий список товарів, кожна категорія виділяється із загального переліку продуктів.

Photo courtesy of olivia mew(CC No Derivatives)
  • Соціальні кнопки

Просування у соціальних мережах - один із маркетингових напрямів багатьох компаній. Ці іконки відомі, тому на них звертають увагу та приєднуються до груп та спільнот, через які можна закликати клієнтів до нових покупок.

Photo courtesy of olivia mew(CC No Derivatives)

Як за допомогою іконок підвищити конверсію сайту

Як і будь-який контент на сайті іконки мають бути чітко продуманими. Вони можуть також стати інструментом підвищення конверсії. Як же стимулювати продаж?

1.Привернути увагу до переваг компанії.

Відвідуючи сайти, ми звикли «прокручувати» сторінки. Іконки допомагають користувачеві звернути увагу на важливу інформацію та затриматися поглядом на особливостях і перевагах компанії. Така інформація формує довіру у клієнта та може переконати зробити вибір на користь вашого магазину, а не конкурента.

Photo courtesy of olivia mew(CC No Derivatives)

2.Розкажіть, як зробити замовлення чи як працює компанія.

Щоб нові клієнти знали, за яким алгоритмом працює магазин або надаються послуги, розкажіть про це за допомогою іконок. Так ви заощадите місце на сайті і клієнту не потрібно буде читати багато тексту, щоб зрозуміти, як зробити замовлення.

Photo courtesy of olivia mew(CC No Derivatives)

3. Розкажіть про товар за допомогою іконок.

У картки товарів можна додавати як текстові описи, так й позначення характеристик чи додаткових параметрів за допомогою іконок.

Photo courtesy of olivia mew(CC No Derivatives)

4. Виділяйте акції та спеціальні пропозиції.

Щоб відвідувач сайту звернув увагу на акцію чи потрібний розділ, додайте іконки. Наприклад, червоні зображення допомагають звернути увагу на акції.

Photo courtesy of olivia mew(CC No Derivatives)

Також за допомогою іконок та різних плашок можна виділяти потрібні категорії товарів, популярну продукцію та інше.

Source — cases.media

5 трендів у графічному дизайні, від яких варто відмовитися у 2021 році

Чому його бажано уникати - низька функціональність, не підходить для інклюзивних продуктів, неможливо використовувати при яскравому сонячному світлі, важко реалізувати на рівн ...

Покращуємо свої професійні навички

Регулярний перегляд робіт розвиває креативне мислення і особливе дизайнерське бачення

Що таке брендбук і навіщо він потрібен?

Брендбук – важливий елемент у формуванні сильного іміджу бренду. Його використовують для маркетингових кампаній, а також комунікації, створення продуктів і послуг.

Що таке UI Kit и для чого він потрібен вашій компанії

UI Kit – це набір усіх елементів, на яких будується UI вашого сайту (UI elements). По суті це візуалізація кожного з елементів на будь-якому етапі взамодії користувача з інтер ...

Вплив упереджень на наші дизайн рішення

Генеруючи нові ідеї, люди спираються на відчуття з власного досвіду та суб’єктивні знання. Саме тому ми схильні до несвідомих упереджень, які впливають зокрема на дизайн-процес.