Как да проектирате празни страници за уебсайтове и мобилни приложения

Празните страници на състоянието са по-малко познати елементи на дизайна със значителна роля в потребителския опит. В най-простия си вид са празни държави оформления на страници, които се виждат, когато потребителят за първи път посещава страница, на която няма налично съдържание.

Това може да включва мобилни приложения, социални мрежи или дори празни категории в блога. Целта е да се предостави празна страница изглежда като непразна страница. Посетителите трябва признават липсата на съдържание като средство за предстоящо съдържание.

Бих искал да разгледам как работят празните страници и защо са толкова важни. Дизайнерите на интерфейса трябва да обмислят тези точки и да се опитат да ги приложат в празни държави, когато е подходящо. Но за да започнем, нека да разгледаме как функционира празното състояние и как тя осигурява стойност на интерфейса.

Стойността на празните състояния

Красотата на големия празен държавен дизайн е в простотата. Празните страници обясняват какво трябва да бъде на страницата след като има някакво съдържание. Тя може да бъде пасивна като празна входяща пощенска кутия или може да чака активно потребителя като празен Twitter.

Празните страници са скучни, скучни и дори объркващи. Празни състояния предоставят насоки за да помогнете на потребителите да разберат какво гледат. Въпреки че това е празна страница, допълнителният контекст помага.

Празните състояния също дават усещане за “свежест” с нови профили, които нямат съществуващи данни.

Този тест, направен от Redditor Bambo_Ocha, провери 20 различни приложения за празни държавни проекти. Различни дизайнерски стилове се появяват с бутоните на CTA, примерни данни и дори кратки ръководства за начинаещи.

Приложенията, които процъфтяват в потребителска база, трябва да проектират празни състояния насърчаване на активността на потребителите. Тази дейност може да е публикуване на съдържание, добавяне на приятели, качване на снимки или каквото и да е създадено от приложението. Екранът по-долу от Tookapic е чудесен пример.

Но страниците с празно състояние все още имат стойност, дори когато не е необходимо действие. Тези проекти са предназначени главно за предоставяне на информация.

Статичната информация е също толкова ценна и не е лоша, ако имаме празно състояние. Например дизайнът на тази страница не показва актуални показатели от таблото за управление на приложението за проследяване. Потребителят може да поиска да добави някои показатели, но не е зле да остави тирето празно.

Подобни статични дизайни могат да работят чудесно за празни архиви на блогове или празни папки за съобщения. Напълно приемливо е да нямате съобщения за показване. Но страницата не трябва да бъде напълно празна и без контекст.

Елементи на жизненоважните страници

Най-важният елемент на страницата за празно състояние е контекст. Това може да бъде под формата на графики, текст или и двете. Искате да информирате потребителите защо страницата е празна и какви данни могат да бъдат там (имейли, туитове, профили на приятели и т.н.).

И докато текстът е основната комуникационна среда в мрежата, не можете да пропуснете стойността на графиките и иконите.

DigitalOcean има блестящо табло с празни графики, които ясно илюстрират тяхната гледна точка. Тяхната компания използва креативна марка и чиста типография, така че не е изненада, че празните им страници са толкова илюстративни.

Друг важен аспект на дизайна на празната държава е бутон за повикване до действие. Това обикновено е проектирано като бутон, въпреки че хипервръзките работят добре.

Целта е да помогнем на потребителите да предприемат действия и да изчистят празното си състояние. Независимо дали това изисква добавяне на данни или предприемане на действия на сайта, CTA насочват потребителите към следващата стъпка, необходима за изчистване на празното състояние.

Dropbox има страхотен дизайн с два CTA бутона. Всеки път, когато потребител на Dropbox няма папки, те могат да създадат нова папка или да добавят примерна папка към страницата.

Насърчаване на активността на потребителите

Бутоните за повикване до действие са активните елементи, но не забравяйте, че копието на страницата обяснява какво прави потребителят. Никой не само натиска бутони, без да знае защо.

Най-добрият начин да насърчите дейността е да напишете чудесно копие на страницата си за празно състояние. Насочвайте потребителите чрез поток от съдържание, който насърчава активността на потребителите по отношение на цялото приложение.

Това празно състояние от ModSpot е блестящ пример за качествен дизайн и насърчаващо съдържание.

Иконите се използват, за да се покаже какво трябва да добави потребителят към сайта. Стрелката сочи към бутона, който потребителите трябва да кликнат заедно с някои текстове, които насърчават поведението. Това е блестящ празен държавен дизайн с всички елементи, които бихте очаквали.

По същия начин празната държава на Gumroad предлага две опции, насочени към различни потенциални действия. Потребителите могат да добавят дигитален продукт или физически продукт, за да започнат да продават.

Други връзки на страницата водят до справочници и данни за контакт. Всичко е невероятно рационализирано и добре обвързано.

Уеб приложения срещу мобилни устройства

Празните държавни страници за всички медии трябва да следват подобни тенденции при проектирането. Но има някои незначителни различия с потребителския опит на работния плот в сравнение с смартфона.

Уебсайтове на по-големи екрани имам повече място за допълнителни бутони. Може да има и уеб страници по-големи навигационни елементи които могат да привлекат хората на друго място в сайта.

Това може да бъде решено в подобен на Nusii стил на страницата им с предложения. Когато няма предложения, потребителят се насочва към “добавете предложения” в горната навигационна лента.

Мобилните приложения могат да имат подобни проблеми, но екраните са много по-малки. Това го прави много по-лесно да привлечете потребителите директно в действието.

Смятам, че е най-добре мобилните приложения да се поддържат по-лесно с по-малко опции. Използвайте визуализации като очни бонбони, за да насърчите действията и да насочите към много специфичен потребителски поток.

Примери за проекти за празно състояние

Може би най-добрият начин да научите за празния държавен дизайн е да изследвате някои примери. Брилянтната уеб галерия emptystat.es извива празни страници от различни уебсайтове до мобилни приложения.

Подбрах няколко примера, заслужаващи вашето внимание, които най-добре илюстрират празния държавен дизайн. Ако имате някакви други предложения, не се колебайте да ни уведомите.

Плаващи IP адреси на DigitalOcean