Як і чому іконки можуть покращити веб-сайт?

Іконки підтримують зміст

Зазвичай нам не важко відрізнити хороший сайт від поганого.

Однак нам важко сказати, чому одне краще, а інше гірше. Нерідко буває так, що він криється в деталях.

Коли ми розглядаємо зміст веб-сайту, все зводиться до його читабельності.

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

Як ви можете легко досягти читабельності та покращити свій сайт?

За допомогою правильних іконок, які можуть допомогти нам декількома способами:

1. Вони зберуть весь контент в одну легку для сприйняття таблетку.
2. Вони привернуть увагу користувачів.
3. Вони підвищать загальну читабельність вашого контенту.

Давайте тепер докладніше зупинимося на кожному пункті.

1. Іконки збирають весь текст на єдину думку

За допомогою піктограм можна швидко підсумувати, про що весь текст.

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

Пам'ятайте, що до ікон потрібно підходити так само, як до метафор.

На мій погляд, одна з найважливіших речей, пов'язаних з іконками, полягає в тому, що ми, люди, вчимося візуально, і іноді одного зображення достатньо, щоб передати "тисячу слів".

Наприклад:

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

Якщо вам здається, що маленька іконка не передає достатньо інформації, ви можете додатково використовувати невеликі зображення або скріншоти.

Хорошим прикладом є опис можливостей платформи Brand24:

2. Іконки привертають увагу користувачів

Як . Те саме стосується і ікон.

В наш час сайти без іконок та графіки можуть здатися нам дуже нудними та некрасивими.

Уявіть собі просту газету, в якій є лише текст – жодних картинок чи банерів. Нудно.

Крім помітних заголовків, нашу увагу привертають барвисті картинки, графіки або іконки.

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

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

Недостатньо вибрати кілька безкоштовних іконок і просто розмістити їх на своєму сайті.

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

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

Іноді інтернет-магазини використовують однакові або схожі значки у різних місцях.

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

Їхні функції стають зрозумілими завдяки відповідному розташуванню або додаванню тексту поруч або під значком.

Тут ми вже входимо у світ UX/UI, і я не можу не згадати принцип близькості.

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

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

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

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

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

Пізніше у цій статті я докладно розповім про правила комбінування тексту та ікон.

3. Значки підвищують загальну читабельність вашого контенту

Перелік важливого змісту може підвищити читабельність ваших статей. Однак стандартні "крапки" вже можуть бути досить нудними для нас.

Замість стандартного лістингу використовуйте привабливі значки, щоб привернути увагу до певного пункту або блоку контенту.

Перелічені підпункти не тільки виглядають "чистими", але й створюють у нас асоціацію правильності.

Існує дуже мало ікон, які можуть існувати власними силами

Недосвідченим користувачам Інтернету буває дуже важко зрозуміти і розрізнити різні значки.

За своїм досвідом я знаю, що люди похилого віку не можуть показати мені відмінності між значками і навіть важко розуміють, що вони виражають.

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

Для мене, як веб-розробника, всі значки очевидні, але якщо у вас інтернет-магазин, то, як ви самі побачите, багато ваших клієнтів не зрозуміють, чому тег Google map має таку форму, плюс він розміщується там, де знаходиться ваша фізична адреса.

Простим вирішенням цієї проблеми може бути поєднання іконки та тексту.

Таким чином, користувачі можуть прочитати текст і запам'ятати, що означає значок.

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

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

Як і чому іконки можуть покращити веб-сайт - резюме

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

Іконки можуть бути відмінним способом виділити та зробити видимою основну частину тексту.

Крім того, вони є чудовим "загарбником уваги" в епоху так званого сканування контенту.

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