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

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

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

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

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

Що таке тайм-менеджмент?

Особистий тайм-менеджмент або як управляти своїм часом.

10 тенденцій графічного дизайну у 2019 році

Ми відібрали 10 тенденцій, які допоможуть вдосконалити ваш стиль

Дизайн пакування, який подобається споживачеві

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

HEX-кодування кольору

У графічних редакторах і коді вебсайтів кольори часто позначаються якось на кшталт

Візуальна ієрархія

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