Jak zaprojektować puste strony stanu dla stron internetowych i aplikacji mobilnych

Puste strony stanu są mniej znanymi elementami projektu, które odgrywają znaczącą rolę w obsłudze użytkownika. W najprostszej postaci są puste stany układy stron widoczne, gdy użytkownik po raz pierwszy odwiedza stronę, na której nie ma dostępnych treści.

Może to obejmować aplikacje mobilne, sieci społecznościowe, a nawet puste kategorie blogów. Celem jest dostarczenie pustej strony wygląda jak nie pusta strona. Odwiedzający powinni uznać brak treści za sposób na zbliżanie się do treści.

Chciałbym opisać, jak działają puste strony stanu i dlaczego są tak ważne. Projektanci interfejsów powinni rozważyć te punkty i spróbować zastosować je do pustych stanów, gdy jest to właściwe. Ale aby zacząć, przyjrzyjmy się, jak funkcjonuje pusty stan i jak zapewnia wartość interfejsowi.

Wartość pustych stanów

Piękno wspaniałego projektu pustego stanu leży w prostocie. Puste strony wyjaśniają co powinno być na stronie raz jest jakaś treść. Może być pasywny jak pusta skrzynka odbiorcza lub może aktywnie czekać na użytkownika jak pusty kanał Twittera.

Puste strony są nudne, nudne, a nawet mylące. Puste stany dostarczać porady aby pomóc użytkownikom zrozumieć, na co patrzą. Mimo że jest to pusta strona, dodatkowy kontekst pomaga.

Puste stany również dają poczucie “świeżość” z nowymi kontami, które nie mają istniejących danych.

Ten test przeprowadzony przez Redditor Bambo_Ocha sprawdził 20 różnych aplikacji dla pustych projektów stanu. W przypadku przycisków CTA, przykładowych danych, a nawet krótkich instrukcji do samouczka, występowały różne style projektowania.

Aplikacje, które rozwijają się na bazie użytkownika, powinny projektować puste stany zachęcać do aktywności użytkowników. Ta czynność może polegać na publikowaniu treści, dodawaniu znajomych, przesyłaniu zdjęć lub tworzeniu aplikacji. Poniższy ekran z Tookapic jest doskonałym przykładem.

Ale puste strony stanu nadal mają wartość nawet wtedy, gdy nie są potrzebne żadne działania. Projekty te są głównie przeznaczone do dostarczania informacji.

Informacje statyczne są tak samo cenne i nie mają złego stanu posiadania pustego stanu. Na przykład ten projekt strony nie wyświetla bieżących danych z pulpitu nawigacyjnego aplikacji śledzącej. Użytkownik może chcieć dodać kilka metryk, ale nie jest źle zostawić myślnik pusty.

Podobne statyczne projekty mogą działać świetnie w przypadku pustych archiwów blogów lub pustych folderów wiadomości. Jest całkowicie dopuszczalne, aby nie wyświetlać żadnych wiadomości. Ale strona nie powinna być całkowicie pusta bez kontekstu.

Istotne elementy strony

Najważniejszym elementem na pustej stronie stanu jest kontekst. Może to mieć formę grafiki, tekstu lub obu. Chcesz poinformować użytkowników, dlaczego strona jest pusta i jakie dane mogą tam być (e-maile, tweety, profile znajomych itp.).

I chociaż tekst jest podstawowym medium komunikacyjnym w sieci, nie można pominąć wartości grafiki i ikon.

DigitalOcean ma genialny pulpit nawigacyjny z pustymi grafikami stanu, które jasno ilustrują ich punkt widzenia. Ich firma wykorzystuje kreatywną markę i czystą typografię, więc nic dziwnego, że ich puste strony stanu są tak ilustracyjne.

Innym ważnym aspektem projektowania pustego stanu jest przycisk wezwania do działania. Zazwyczaj jest to projekt podobny do przycisku, chociaż hiperłącza działają dobrze.

Celem jest pomoc użytkownikom w podjęciu działań i wyczyszczeniu pustego stanu. Niezależnie od tego, czy wymaga to dodania danych, czy podjęcia działań na stronie, CTA prowadzą użytkowników do następnego kroku niezbędnego do oczyszczenia pustego stanu.

Dropbox ma świetny design z dwoma przyciskami CTA. Gdy użytkownik Dropbox nie ma żadnych folderów, może utworzyć nowy folder lub dodać folder przykładowy na stronie.

Zachęcanie do aktywności użytkownika

Aktywne są przyciski wywołania akcji, ale pamiętaj, że kopia strony wyjaśnia co robi użytkownik. Nikt nie klika przycisków, nie wiedząc dlaczego.

Najlepszym sposobem na zachęcanie do aktywności jest napisanie świetnej kopii na pustej stronie stanu. Przeprowadź użytkowników przez przepływ treści, który zachęca do aktywności użytkowników w całej aplikacji.

Ten pusty stan ModSpot jest wspaniałym przykładem projektowania wysokiej jakości i treści zachęcających.

Ikony służą do zademonstrowania, co użytkownik powinien dodać do witryny. Strzałka wskazuje na przycisk, który użytkownicy powinni klikać, wraz z tekstem zachęcającym do zachowania. Jest to genialny projekt w stanie pustym ze wszystkimi elementami, których można się spodziewać.

Podobnie pusty stan Gumroad oferuje dwie opcje ukierunkowane na różne potencjalne działania. Użytkownicy mogą dodać produkt cyfrowy lub produkt fizyczny, aby rozpocząć sprzedaż.

Inne linki na stronie prowadzą do przewodników pomocniczych i danych kontaktowych. Wszystko jest niesamowicie uproszczone i ładnie się łączy.

Aplikacje internetowe a aplikacje mobilne

Puste strony stanu dla wszystkich mediów powinny być zgodne z podobnymi trendami projektowymi. Jednak w porównaniu do smartfona istnieją pewne drobne różnice w obsłudze użytkowników na pulpicie.

Strony internetowe na większych ekranach mieć więcej miejsca dla dodatkowych przycisków. Strony internetowe mogą również mieć większe elementy nawigacyjne które mogą przyciągnąć ludzi na stronę.

Można to rozwiązać w podobnym stylu, jak Nusii na swojej stronie propozycji. W przypadku braku propozycji użytkownik jest kierowany do “dodaj propozycje” przycisk na górnym pasku nawigacyjnym.

Aplikacje mobilne mogą mieć podobne problemy, ale ekrany są znacznie mniejsze. To sprawia, że dużo łatwiej przyciągnąć użytkowników do akcji.

Uważam, że najlepiej jest, aby aplikacje mobilne były prostsze dzięki mniejszej liczbie opcji. Używaj efektów wizualnych jako cukierków do oczu, aby zachęcić do działania i wskazać bardzo specyficzny przepływ użytkownika.

Puste przykłady projektowania stanu

Być może najlepszym sposobem na poznanie pustego projektu stanu jest przestudiowanie kilku przykładów. Genialna galeria internetowa emptystat.es jest kuratorem pustych stron stanu z różnych stron internetowych na aplikacje mobilne.

Wybrałem kilka przykładów, które zasługują na uwagę, które najlepiej ilustrują pusty projekt stanu. Jeśli masz jakieś inne sugestie, daj nam znać.

Pływające IP DigitalOcean