Як розробити порожні сторінки для веб-сайтів і мобільних додатків

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

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

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

Значення порожніх станів

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

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

Порожні стани також дають відчуття “свіжість” з новими обліковими записами, які не мають даних.

Цей тест, проведений Redditor Bambo_Ocha, перевірив 20 різних програм для пустих державних проектів. Різні стилі дизайну відбувалися з кнопками CTA, зразковими даними і навіть короткими покроковими підручниками.

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

Але порожні державні сторінки мають значення навіть тоді, коли не потрібні дії. Ці проекти в основному зроблені для надання інформації.

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

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

Елементи вітальної сторінки

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

І хоча текст є основним засобом комунікації в Інтернеті, ви не можете пропустити значення графіки та значків.

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

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

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

Dropbox має відмінний дизайн з двома кнопками CTA. Коли користувач Dropbox не має жодних папок, вони можуть або створити нову папку, або додати папку зразка на сторінку.

Заохочення активності користувачів

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

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

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

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

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

Інші посилання на сторінці призводять до довідкових посібників та контактних даних. Все неймовірно впорядковано і гарненько зв'язується.

Мобільні програми для веб-сайтів

Порожні сторінки стану для всіх середовищ повинні слідувати подібним тенденціям дизайну. Але є деякі незначні відмінності в роботі на робочому столі в порівнянні зі смартфоном.

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

Це може бути вирішене в подібному стилі, як це робиться на сторінці пропозицій Nusii. Там, де немає пропозицій, користувач направляється до “додавати пропозиції” на верхній панелі навігації.

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

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

Приклади проектування порожніх станів

Можливо, найкращим способом дізнатися про порожній державний дизайн є вивчення деяких прикладів. Блискуча веб-галерея emptystat.es курує порожні державні сторінки з різних веб-сайтів до мобільних додатків.

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

Плаваючі IP-адреси DigitalOcean