Dziesięć autorskich projektów pustych stanów dla pierwszego użycia, braku wyników wyszukiwania, opróżnionej skrzynki, błędów i braku uprawnień, z edytowalnym kodem i dostępnym kreatorem komunikatów.
Pusty stan (empty state) to to, co pokazuje ekran, gdy nie ma jeszcze nic do wyświetlenia: nowe konto, wyszukiwanie bez wyników, opróżniona skrzynka lub nieudane ładowanie. Każdy potrzebuje prostego wyjaśnienia i drogi dalej. Dziesięć projektów poniżej obejmuje wszystkie typowe przypadki z edytowalnym HTML i CSS, a do tego kreator, który pisze dostępny kod.
Pięć rodzajów pustych stanów i co każdy powinien oferować
Puste ekrany to pierwsza rzecz, jaką widzą nowi użytkownicy, i miejsce, na które trafiają po nieudanym wyszukiwaniu, a mimo to często są tylko szarym polem z napisem Brak danych. Te przykłady traktują każdy rodzaj pustki inaczej, bo dobry komunikat po literówce nie jest dobrym komunikatem pierwszego dnia. Każdy fragment kodu jest samodzielny i używa prostych kształtów zamiast ilustracji ze stocku.
To ekran lub panel wyświetlany, gdy lista, tabela, dashboard lub wyszukiwanie nie mają nic do pokazania. Dobre wyjaśniają dlaczego i podają następny krok; słabe pokazują pustą przestrzeń lub samo Brak danych.
Użyj prawdziwego nagłówka i tekstu, a nie samego obrazka. Oznacz dekoracyjną grafikę pustym tekstem alternatywnym. Jeśli komunikat o pustym stanie pojawia się po filtrowaniu lub wyszukiwaniu bez przeładowania strony, umieść go w elemencie z role="status", który ma domyślne grzeczne ustawienie live, i nie przenoś na niego fokusu.
Może to pomóc przy pierwszym użyciu, na przykład projekt demonstracyjny, który użytkownik może otworzyć i usunąć. Wyraźnie oznacz go jako przykład, aby nikt nie pomylił go z własnymi danymi.
Powtórz frazę, powiedz, że nic nie pasuje, i zaproponuj rozwiązania: sprawdź pisownię, usuń filtr lub przejrzyj kategorię. Przycisk Wyczyść filtry działający jednym kliknięciem to najbardziej przydatna pojedyncza akcja.
Pusty stan oznacza, że naprawdę nie ma nic do pokazania. Błąd oznacza, że dane mogą istnieć, ale nie udało się ich załadować. Powiedz, który to przypadek, bo informowanie kogoś, że nie ma zamówień, gdy zawiódł serwer, jest niepokojące.
Przerywany obrys podpowiada, gdzie pojawi się element. Przycisk jest w pustym obszarze, więc nikt go nie szuka.
Możliwość utworzenia lub importu szanuje osoby, które mają już dane gdzie indziej.
Krótka lista z zaznaczonym pierwszym krokiem zamienia pusty dashboard w plan.
Wyraźnie oznaczony przykładowy wiersz pokazuje, jak ekran będzie wyglądał po wypełnieniu.
Powtórz frazę, zaproponuj rozwiązania i zostaw drogę powrotu do wszystkiego.
Pokazanie aktywnych filtrów jako usuwalnych chipów wskazuje wprost przyczynę.
Niektóre puste ekrany to dobra wiadomość. Spokojne potwierdzenie wystarczy; przycisk nie jest potrzebny.
Nazwij problem uczciwie, powiedz, że dane są bezpieczne, jeśli tak jest, i zaproponuj ponowną próbę.
Powiedz ludziom, kogo zapytać, i daj im przycisk, który wyśle prośbę.
Zachowanie nagłówków kolumn pokazuje, co się pojawi, a jeden wiersz rozciąga się pod nimi z komunikatem.
Tutaj pojawią się wysłane faktury wraz ze statusem i terminem płatności.
Utwórz fakturę
Kreator pustego stanu
Napisz nagłówek, zdanie i przycisk, wybierz rodzaj i skopiuj dostępny HTML i CSS. Wynik początkowy:
Wyjaśnienie
Etykieta przycisku
Pierwsze użycie
Brak wyników
Błąd
Podgląd Twojego pustego stanu
Kopiuj HTML
Kopiuj CSS
Zacznij za darmo · Bez karty kredytowej