Привіт друзі!
В цьому відео я розповім вам, як створити красиву та ефективну сторінку помилки.
Поради та ідеї
Сторінка помилки або сторінка 404 інформує користувачів про те, що вони перейшли за неіснуючим посиланням або ввели неіснуючу адресу. Вона може мати різноманітний дизайн: мінімалістичний, веселий або строгий. Все залежить від вашого продукту і настрою, який ви прагнете створити.
Перш ніж ми почнемо створювати нашу власну сторінку, я хотіла б поділитися з вами кількома корисними порадами, які ґрунтуються на прикладах реальних сторінок 404 і пояснити, як вони привертають увагу користувачів і заохочують їх залишитися на сайті.
- Дотримуйтеся єдиного стилю: Сторінка 404 є частиною вашого сайту, тому намагайтеся дотримуватись того ж стилю шрифтів, кольорів і настрою, що й на всіх інших сторінках.
- Надайте можливість вибору, але не перевантажуйте сторінку: Коли відображається сторінка 404, користувачі перенаправляються на попередню сторінку. Але краще дати користувачам можливість піти далі, наприклад, на головну сторінку або будь-який інший розділ. Обмежтеся кількома посиланнями і не перевантажуйте користувача.
- Коротко поясніть, що пішло не так: Одного-двох речень буде достатньо.
- Додайте трохи гумору: Користувачі можуть засмучуватись, коли не можуть знайти потрібну інформацію. Чому б не підняти їм настрій? Кумедні картинки або відео чудово впораються з цією задачею.
- Викличіть емоції: Деякі дизайнери навмисно відмовляються від номеру 404 і замість нього використовують слова “Ой”, “Хм” або “Ох”, а також додають анімацію або ілюстрації, щоб викликати емоції у користувачів. Такий підхід заохочує їх шукати потрібну інформацію далі.
- Створіть інтерактивну сторінку помилки: Інтерактивні сторінки помилки або сторінки з елементами гейміфікації також чудовий спосіб заохотити користувачів залишитись на сайті. Наприклад, у Figma на сторінці номер 404 відображається у векторах, які ви можете змінювати на свій розсуд.
- Використовуйте продукт: Для компаній, які продають різні товари, гарною ідеєю є використання зображень цих товарів.
Створення сторінки 404
Надихнувшись цікавими ідеями, давайте перейдемо до створення власної сторінки 404.
- Робоча область і сітка: Вставляємо робочу область і налаштовуємо сітку.
- Логотип: Розміщуємо логотип, адже саме логотип і стиль бренду дозволить користувачу одразу зрозуміти, на якому сайті він знаходиться.
- Заголовок: Вставляємо заголовок, який чітко інформує користувача про те, що він знаходиться на сторінці 404. Наприклад, “Сторінку не знайдено”. Робимо його трохи товщим та збільшуємо до 52 пунктів. Висота лінії буде 120%.
- Опис причини виникнення помилки: Оскільки ми хочемо пояснити, чому саме користувач потрапив на цю сторінку. Це може бути неіснуюче посилання, помилка в адресі або тимчасова проблема з сервером. Розміри тексту залишаємо такими, як ви бачите на екрані, і змінюємо тільки колір на трохи світліший відтінок.
- Варіанти для подальших дій: Щоб користувач все-таки залишився на нашому сайті, можна додати рядок пошуку, щоб користувач міг знайти те, що він шукає за ключовими словами. В налаштуваннях тексту залишаємо все те саме, окрім кольору. Його я також зроблю більш світлим. Вставляємо на робочу область іконку пошуку, виділяємо разом з текстом і створюємо автолейаут. Інтервал між елементами буде 8 пікселів, відступи зверху та знизу по 12 пікселів, а з боків 14 пікселів. Заокруглюємо кути та додаємо колір контуру.
- Кнопки: Можна додати кнопку, яка дозволяє користувачеві зв’язатися з вами, та кнопку переходу на головну сторінку. Змінюємо у них налаштування так, як я показую на екрані.
- Вирівнювання елементів: Вирівнюємо всі наші елементи.
- Зображення: Справа вставляємо ось таке зображення. Воно було згенероване за допомогою штучного інтелекту. В майбутньому, коли ви будете працювати над сторінкою 404 для реальної компанії, за бажання можете додати цікаві фірмові ілюстрації або візуальні ефекти. Адже ця сторінка - це чудова можливість продемонструвати індивідуальність вашого бренду.
Наша сторінка 404 готова. На цьому все. Сподіваюсь, що вам сподобалось. Якщо ви хочете ще більше уроків, напишіть про це в коментарях, а також ставте лайки цьому відео та підписуйтесь на канал. З вами була Адолька, до зустрічі!