13 najlepszych przykładów projektowania stron błędów 404 WordPress

Szukasz najlepszych przykładów projektowania stron błędów 404?

Właściwa strona 404 utrzyma użytkowników w Twojej witrynie na dłużej i zachęci ich do konwersji. Tworząc angażującą, pomocną i zabawną stronę 404, możesz zapewnić odwiedzającym wspaniałe wrażenia, nawet jeśli widzą błąd.

W tym artykule udostępniamy jedne z najlepszych projektów stron błędów 404.

Dlaczego musisz zoptymalizować swój projekt 404

Błąd 404 pojawia się, gdy serwer nie może dotrzeć do strony, którą ktoś próbuje odwiedzić. Zamiast pokazywać im pusty ekran, serwer wyświetla stronę 404.

Większość motywów WordPress zawiera podstawowy szablon 404, ale te projekty są zwykle proste i proste.

Nie będą też wyświetlać żadnych treści z Twojej witryny, takich jak popularne posty, które odwiedzający może chcieć przeczytać, lub menu nawigacyjne Twojej witryny.

Jeśli pokazujesz odwiedzającym nudną, nieprzydatną stronę 404, jest bardziej prawdopodobne, że opuści Twoją witrynę WordPress, co zwiększy współczynnik odrzuceń i zaszkodzi SEO WordPress.

Mając to na uwadze, mądrze jest stworzyć niestandardową stronę 404, która ma własną markę i treść. Możesz również pomóc odwiedzającym znaleźć to, czego szukają, dodając paski wyszukiwania, menu, linki i inne przydatne treści.

Najłatwiejszym sposobem stworzenia niestandardowego projektu 404 jest użycie wtyczki SeedProd. Jest to najpopularniejszy kreator stron typu „przeciągnij i upuść”, dzięki czemu możesz stworzyć niestandardową stronę 404 bez pisania kodu.

SeedProd ma również wiele profesjonalnie zaprojektowanych szablonów 404, które pomogą Ci szybko stworzyć piękną stronę błędu.

Po zainstalowaniu SeedProd, dobrym pomysłem jest zwrócenie się do konkurencji o inspirację. Mając to na uwadze, zebraliśmy najlepsze projekty stron błędów 404, które możesz obejrzeć.

1. DFY

Wiele witryn korzysta z liczników czasu, aby stworzyć poczucie pilności i uzyskać więcej konwersji za pomocą FOMO. Jednak DFY podjęło niezwykłą decyzję o dodaniu licznika czasu do swojej strony 404.

Ten zegar odlicza sekundy, aż odwiedzający zostanie automatycznie przekierowany na stronę główną. Tworząc limit czasowy, DFY natychmiast sprawia, że ​​ich strona 404 jest bardziej atrakcyjna i zachęca odwiedzających do podjęcia decyzji, zanim skończy się czas. Jest to również nietypowy wybór projektowy, więc na pewno przyciągnie uwagę odwiedzającego.

Komunikaty strony 404 zwiększają to poczucie pilności, czyniąc to bardzo dramatycznym i atrakcyjnym projektem strony.

Aby uzyskać więcej informacji na temat korzystania z limitów czasowych w swojej witrynie, zapoznaj się z naszym przewodnikiem na temat dodawania widżetu timera w WordPress.

2. OptinMonster

OptinMonster to jedna z najlepszych wtyczek do przechwytywania wiadomości e-mail dla WordPressa, z której korzysta ponad 1,2 miliona stron internetowych. Ma wszystko, czego potrzebujesz, aby zmienić odwiedzających w subskrybentów i klientów.

Nic dziwnego, że OptinMonster wykorzystuje swoją stronę 404 jako narzędzie do generowania leadów z przyciągającą wzrok animacją i wyraźnym wezwaniem do działania.

Co więcej, ich prezentacja odnosi się do sytuacji odwiedzającego.

Gdy ktoś trafi na stronę 404, istnieje duża szansa, że ​​zrezygnuje i porzuci Twoją witrynę, ponieważ nie może znaleźć tego, czego szuka.

Podejście OptinMonstera w tym pomaga, pytając: „Czy wiesz, że ponad 70% odwiedzających, którzy opuszczają Twoją witrynę, nigdy nie wróci?”.

Ponieważ odwiedzający już myśli o porzuceniu witryny, jest bardziej prawdopodobne, że zareaguje na tę statystykę. Wezwanie do działania następnie oferuje odwiedzającym bezpłatny ebook, który obiecuje przekształcenie opuszczających witrynę w subskrybentów.

Kliknięcie przycisku „Pobierz teraz” otwiera wyskakujące okienko, w którym osoba może wpisać swój adres e-mail i pobrać bezpłatnie.

Jak widać, OptinMonster wykorzystuje błąd 404 na swoją korzyść, tworząc prezentację, która wydaje się bardzo trafna i aktualna.

Jeśli chcesz użyć własnej strony 404 do generowania leadów, możesz zbierać adresy e-mail za pomocą bloków SeedProd's Giveaway, Contact Form i Optin Form.

3. Kualo

Wiele witryn korzysta z grywalizacji, aby budować lojalność klientów i sprawiać, że ludzie wracają do ich witryny.

Kualo poszło o krok dalej i zgamifikowało swoją stronę 404.

Zamiast pomagać odwiedzającym w odnalezieniu drogi z powrotem do głównej witryny Kualo, strona 404 rzuca im wyzwanie w grze Space Invaders.

To zamienia frustrujący komunikat o błędzie w zabawną niespodziankę.

Co więcej, gdy zabraknie ci żyć, Kualo daje ci motywację do dalszej gry.

Wyskakujące okienko oferuje graczom zniżkę na hosting, jeśli uda im się zdobyć ponad 1000 punktów. Jest to doskonały przykład strony 404, która utrzymuje użytkowników w Twojej witrynie na dłużej i dodaje wartość do doświadczenia użytkownika.

4. TripAdvisor

Strona 404 w witrynie TripAdvisor jest zabawna i funkcjonalna, a otwiera się żartem charakterystycznym dla branży turystycznej.

Gdy ktoś trafi na twoją stronę 404, może być sfrustrowany swoim doświadczeniem. Humor może być świetnym sposobem na ponowne zaangażowanie tych ludzi.

Co więcej, żarty zawsze wiążą się z marką TripAdvisor.

Branding to jedna z głównych korzyści wynikających z zastąpienia standardowej strony WordPress 404 niestandardowym projektem, a strona TripAdvisor pokazuje, że branding to nie tylko niestandardowe logo i obrazy. Słowa na twojej stronie 404 są tak samo ważne jak grafika.

Strona 404 wyróżnia również wszystkie główne obszary witryny TripAdvisor, co pomaga odwiedzającym znaleźć to, czego szukają.

Ponieważ nawigacja jest tak ważna, zalecamy zapoznanie się z blokiem menu nawigacyjnego SeedProd, ponieważ pozwala on budować wszelkiego rodzaju menu bezpośrednio w edytorze strony.

5. Brett Terpstra

Na pierwszy rzut oka strona 404 Bretta Terpstry może wydawać się prosta, ale prawdziwa siła tkwi w liście sugerowanych postów.

Strona 404 Bretta Terpstry pokazuje listę postów zawierających słowa kluczowe związane z linkiem, do którego użytkownik próbował uzyskać dostęp, gdy otrzymał błąd 404.

To prosta sztuczka, która znacznie poprawia wrażenia odwiedzających.

Spersonalizowana treść może sprawić, że Twoja witryna będzie bardziej użyteczna, atrakcyjna i atrakcyjna, więc warto rozszerzyć ją na stronę 404.

Aby dowiedzieć się więcej o ukierunkowanych treściach, zapoznaj się z naszym przewodnikiem, jak wyświetlać spersonalizowane treści różnym użytkownikom w WordPress.

6. Stały kontakt

Constant Contact to kolejna strona 404, która wykorzystuje humor, aby zdobyć sfrustrowanych odwiedzających. Dostawca usług poczty e-mail używa nieformalnego języka, aby dotrzeć do docelowych odbiorców, jednocześnie zapewniając odwiedzającym łatwą drogę z powrotem do strony głównej.

Jeśli przewiniesz stronę w dół, znajdziesz linki do innych ważnych obszarów witryny Constant Contact.

Jednak to, co naprawdę nam się podoba, to krótka animacja najechania kursorem, która jest odtwarzana za każdym razem, gdy najedziesz myszą na jeden z niebieskich bloków.

Animacja może sprawić, że strona będzie bardziej atrakcyjna, a wiele animacji najechania tworzy element opowiadania historii, gdy odwiedzający porusza się po stronie 404.

Istnieje kilka różnych sposobów animowania strony 404, w tym podświetlanie i obracanie tekstu za pomocą bloku animowanego nagłówka SeedProd. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym dodawania animacji CSS w WordPress.

7. IMDB

Większość ludzi napotka twoją stronę 404, szukając czegoś zupełnie innego. Ponieważ błąd 404 jest nieoczekiwany, ważne jest, aby zapewnić użytkowników, że nadal są w Twojej witrynie, utrzymując znajomość marki.

IMDB robi to w bardzo subtelny i beztroski sposób, pokazując słynny cytat z filmu lub programu telewizyjnego.

Zawierają również link, aby dowiedzieć się więcej o programie telewizyjnym lub filmie, który cytują.

W ten sposób strona IMDB 404 wzmacnia ich markę, jednocześnie dając odwiedzającym zabawny sposób na zapoznanie się z ich treścią.

Wyświetlanie losowych cytatów na stronie 404 może być zabawne i wciągające. Jednak nadal dobrze jest podać linki do najważniejszej zawartości witryny, na wypadek gdyby użytkownik nie był zainteresowany losowo wybranym linkiem.

IMDB pokazuje, że nie musi to być skomplikowane, dołączając link do ich strony głównej.

8. Ewa Madden

Steve Madden próbuje zamienić komunikat o błędzie na sprzedaż, pokazując swoje najlepiej sprzedające się produkty na stronie 404.

Co więcej, dodali filtry, dzięki czemu klienci mogą przeglądać różne produkty bezpośrednio ze strony 404.

Jeśli prowadzisz sklep internetowy, możesz łatwo wyświetlać najpopularniejsze produkty, produkty będące w sprzedaży, najnowsze produkty i nie tylko. Po prostu dodaj blok „Najlepiej sprzedające się produkty” do swojej strony 404, a SeedProd znajdzie te produkty, a następnie automatycznie doda je do strony 404.

Projektując własną stronę 404, dobrze jest użyć tego samego nagłówka i stopki, co reszta witryny. To wzmocni Twoją markę i powstrzyma odwiedzających przed zastanawianiem się, czy są we właściwym miejscu.

To jest dokładnie to, co widzimy na stronie 404 Steve'a Maddena, ale szczególnie podoba nam się to, ile treści udaje im się zmieścić w tych dwóch małych obszarach.

Nagłówek i stopka pomagają odwiedzającym przejść bezpośrednio do dowolnej części sklepu Steve'a Maddena, a nawet do witryn innych firm, takich jak strony firmy na Twitterze i Facebooku.

Zapewniają nawet dostęp do interaktywnych obszarów, w tym inteligentnego paska wyszukiwania produktów.

9. Terapia w mieszkaniu

Ten projekt 404 od Apartment Therapy natychmiast przyciąga uwagę odwiedzających dużym wizerunkiem bohatera.

Apartment Therapy wykorzystuje tę przestrzeń również do wzmocnienia tożsamości marki, pokazując stylowe zdjęcie kuchni wraz z żartem o taśmie washi.

Jeśli chcesz dodać obraz bohatera do swojego projektu, SeedProd ma wiele gotowych sekcji bohaterów. Są to kolekcje obrazów, wezwania do działania, a nawet proste formularze do zbierania leadów, które możesz dodać do swojego projektu 404 jednym kliknięciem.

Na stronie Apartment Therapy jest nawet sekcja, która wyglądałaby jak w domu.

10. Krzycząca żaba

Podobnie jak niektóre z innych stron 404 z tej listy, Screaming Frog wykorzystuje humor, aby spróbować nawiązać kontakt z odwiedzającymi.

Jednak w przeciwieństwie do innych firm z tej listy, Screaming Frog tworzy narzędzie, które pomaga właścicielom witryn znajdować i naprawiać uszkodzone linki. Ich strona 404 nie marnuje czasu, wytykając ironię strony Screaming Frog z uszkodzonym adresem URL.

Wyśmiewając się z siebie, Screaming Frog dostarcza niezapomnianą stronę 404, która nie traktuje siebie zbyt poważnie.

Animowane tło pomaga również wyróżnić ten projekt 404 z tłumu.

Filmy i animacje to świetny sposób na uatrakcyjnienie strony 404. Mogą jednak wydłużyć czas ładowania strony 404, dlatego zalecamy przestrzeganie naszych wskazówek, aby przyspieszyć działanie WordPressa, szczególnie jeśli w projekcie 404 używasz wielu filmów o dużej lub wysokiej rozdzielczości.

11. MonsterInsights

MonsterInsights to najlepsza wtyczka WordPress do Google Analytics. Pozwala łatwo zainstalować Google Analytics w WordPressie i pokazuje pomocne raporty w panelu WordPressa.

MonsterInsights to dobry przykład strony marki. Gdy tylko odwiedzający wejdą na tę stronę, zobaczą unikalną grafikę opartą na logo MonsterInsights.

To świetny sposób na poinformowanie odwiedzających, że nadal są w witrynie MonsterInsights, nawet jeśli kliknęli uszkodzony link.

Ta strona wyjaśnia również, czym jest błąd 404 i sugeruje kilka rzeczy, które odwiedzający może zrobić, aby naprawić błąd. Pomaganie ludziom w samodzielnym rozwiązaniu błędu 404 może poprawić wrażenia odwiedzających, dlatego dobrym pomysłem jest umieszczenie tych informacji na własnej stronie 404.

Nawet jeśli zachęcasz odwiedzających do samodzielnego rozwiązania problemu, nadal ważne jest, aby dołączyć linki do najważniejszych treści witryny. Strona MonsterInsights 404 zapewnia użytkownikom kilka opcji, dołączając łącza do strony pomocy technicznej, dokumentacji MonsterInsights i strony z cenami.

12. Szalony

MAD stworzył prostą, ale wysoce interaktywną stronę, używając przełączników do utworzenia komunikatu o błędzie 404. Możesz usunąć tę wiadomość, wyłączając wszystkie przełączniki, a nawet utworzyć własną wiadomość, aktywując przełączniki.

To bardzo proste, ale przyjemne doświadczenie, które ma na celu wywołanie dużej interakcji ze strony odwiedzających. Jest to również bardzo wyjątkowa strona 404, którą odwiedzający zapamiętają, a może nawet udostępnią innym osobom.

Ten efektowny projekt udowadnia, że ​​z prostego pomysłu można zbudować niezapomnianą i zabawną stronę 404.

13. Południowy zachód

Strona 404 w Southwest stara się pomóc odwiedzającym wrócić na właściwe tory, wyjaśniając, czym jest błąd 404 i dlaczego mogą widzieć błąd. Sugerują nawet kilka możliwych poprawek, które mogą być pomocne, jeśli docelowi odbiorcy nie są zaznajomieni z błędami 404.

Tam, gdzie ten projekt naprawdę się wyróżnia, jest sama liczba linków, które udaje mu się wyświetlić, i to, jak starannie te adresy URL są zorganizowane.

Jeśli przewiniesz na dół ekranu, zobaczysz linki do mediów społecznościowych, informacje kontaktowe, link do dołączenia do ich listy e-mailowej i dziesiątki innych linków ułożonych w przejrzyste i przyjazne dla użytkownika kategorie.

Strona Southwest 404 jest doskonałym przykładem tego, ile informacji można umieścić na stronie bez przytłaczania odwiedzającego.

Tutaj właściwy układ jest kluczowy, a Southwest świetnie radzi sobie z używaniem kategorii, list i różnych sekcji, aby stworzyć stronę 404, która jest pełna informacji, ale nadal łatwa do odczytania.

Mamy nadzieję, że ten artykuł pomógł Ci znaleźć najlepsze przykłady projektowania stron błędów 404. Możesz również zapoznać się z naszym przewodnikiem po najlepszych wtyczkach do tworzenia stron WordPress i naszym porównaniem najlepszych usług e-mail marketingowych, aby zamienić potencjalnych potencjalnych klientów w płacących klientów.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.