5 фатальних помилок у веб-дизайні в 2021 році, які шкодять досвіду користувача (UX)

18.02.2021

Редакція: Ольга Коцофане. Автор: Ольга Коцофанэ

Перед веб-дизайнером стоїть завдання створювати привабливі і зручні в плані навігації сайти, які подобаються користувачам і мають високий коефіцієнт конверсії. На жаль, в гонитві за модними тенденціями, часто використовуються популярні шаблони, де контент приноситься в жертву естетиці. Коли дизайнер занадто зациклюється на візуальній складовій, страждає функціональність сервісу. Слід пам’ятати, що користувачі приходять на сайт не за приємними кольорами чи дизайном. Простий і зручний інтерфейс тут набагато важливіше. Тому ми склали список 5 найпоширеніших помилок у веб-дизайні, які не варто допускати в 2021 році.

Великі заголовки вгорі сторінки

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

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

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

Однак при прокручуванні логотип заважає перегляду контенту

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

Порада! Якщо ви все ж хочете використовувати великі заголовки, хорошою ідеєю буде перевірити їх популярність серед користувачів. Знайдіть баланс, при якому верхній блок не буде заважати перегляду основного контенту. Крім того, можна зробити заголовок напівпрозорим: це допоможе виділити контент і зробити верхній блок менш домінуючим.

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

Великий логотип або заголовок не дає можливості користувачеві побачити всю картку рецепта

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

Про те, як правильно інтегрувати гамбургер-меню на сайт, експерт Webpromo Влад Сідньов докладно розповів в статті з практичними порадами щодо поліпшення юзабіліті для сайтів доставки їжі.

Тонкі шрифти

Останнім часом стали популярні більш тонкі шрифти, тому що вони виглядають модно і приємні для очей. Однак подібні варіанти накреслення можуть зіпсувати UX і погіршити читабельність. Використання «легких» шрифтів просто для того, щоб йти в ногу з модою, — велика помилка. Чому?

Наприклад, чи знаєте ви, що iPhone і iPad з дисплеями Retina погано підтримують тонкі шрифти? Тобто, власники гаджетів Apple, швидше за все, не зможуть нормально прочитати жоден текст на сайті. На інших дисплеях також часто виникають проблеми з відображенням легких шрифтів. Немає ніякого сенсу в стильному дизайні, якщо текст навіть незрозумілий. Тому замість того, щоб ганятися за трендами, важливо знайти оптимальне поєднання розміру, кольору і накреслення, яке буде добре виглядати на будь-якому дисплеї.

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

Для вибору шрифтів рекомендуємо використовувати такі сервіси:

• Google Fonts — бібліотека з великим вибором шрифтів від Google. Зручна система фільтрів дозволить швидко впорядкувати шукані варіанти;
• 1001 Free Fonts — величезна бібліотека шрифтів для дизайнерів, звідки можна безкоштовно скачати будь-який шрифт і за бажанням «задонатіть» за нього творцеві;
• Font Squirrel — ще одна бібліотека шрифтів на всіх мовах світу з безкоштовними варіантами;
• 1001 Fonts — в цій бібліотеці понад 15 тисяч шрифтів і зручна навігація, завдяки якій можна швидко знайти потрібний шрифт.

Низька контрастність тексту

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

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

Автоматична прокрутка

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

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

«Каруселі» на цільовій сторінці

Деякі сайту використовують слайд-шоу типу «карусель» для відображення різноманітного контенту на своїх цільових сторінках, від простих зображень до інфографіки і не тільки. Може здатися, що це допоможе заощадити місце і зробити дизайн більш компактним. Але робити це вкрай небажано: більшість людей відразу ж прокручують ці великі зображення і пропускають весь контент в них. Якщо у вашій «каруселі» є будь-яка цінна інформація, відвідувачі можуть її пропустити або банально не встигнути дочитати, так як не контролює процес прокрутки.

Якщо ви налаштовані зберегти цей елемент на сайті, переконайтеся, що стрілки «вперед» і «назад» добре видно на всіх пристроях, незалежно від розміру екрана. Часто для перемикання слайдів використовуються точки, на які важко клацнути через їх невеликого розміру і поганої видимості. Однак каруселі без можливості зміни слайдів — гірші для UX.

Приклад успішної каруселі ви можете побачити на головній сторінці інтернет-магазину Leroy Merlin, яку розробила команда Webpromo. Кнопки перемикання добре видно, а автоматична прокрутка відбувається з комфортною для користувача швидкістю, щоб він встиг ознайомитися з інформацією на банері. Крім того, карусель носить характер реклами, а не повідомляє важливу чи обов’язкову для вивчення інформацію.

Також читайте інші статті в блозі Webpromo:

• Які соцмережі і месенджери найпопулярніші серед українців?;
• Як швидко знайти дублі сторінок на сайті? 10 простих способів;
• Статистика для e-commerce: дані, які потрібно знати маркетологу в 2021 році.

І підписуйтесь на наш Telegram-канал про маркетинг.