40 sprytnych stron błędów 404 z prawdziwych witryn

Prowadzenie udanej witryny internetowej oznacza bycie czujnym na błędy, takie jak uszkodzone strony lub niska wydajność. Czasami jednak pojawiają się problemy, których po prostu nie da się uniknąć, a jednym z nich są błędy 404.

Błąd 404 pojawia się, gdy użytkownik żąda strony w Twojej witrynie, która nie istnieje, co powoduje wyświetlenie strony błędu 404, która zachęca użytkowników do powrotu we właściwe miejsce. Bez względu na to, ile zasobów włożysz w zapewnienie, że Twoja witryna nigdy nie ulegnie awarii… zawsze istnieje szansa, że ​​użytkownicy mogą tu trafić.

To niewygodne, ale fakt życia. Reakcja odwiedzających, gdy trafiają na nieistniejącą stronę, może wahać się od „przyjmowania jej na spokojnie” do „całkowitej utraty rozumu”.

Chociaż nic nie możesz zrobić z tym drugim, możesz sprawić, że sprawy będą nieco mniej uciążliwe, wyświetlając komunikat o błędzie 404. Może to zdziałać cuda, aby odwiedzający Twoją witrynę wywołali uśmiech w innej frustrującej sytuacji.

Aby zapewnić płynność projektowania Twojej witryny, ten post pokaże niektóre z naszych ulubionych stron z błędami witryny. Mamy nadzieję, że będziesz w stanie odrzucić kilka pomysłów, aby podkręcić własną wiadomość 404.

Co to jest błąd 404?

Błąd 404 to standardowy kod komunikatu o błędzie HTTP, który oznacza, że ​​na serwerze nie można znaleźć witryny, na którą próbujesz wejść. Jest to błąd po stronie klienta, co oznacza, że ​​albo strona internetowa została usunięta lub przeniesiona, a adres URL nie został odpowiednio zmieniony, albo osoba właśnie wpisała niepoprawny adres URL.

W większości przypadków możesz skonfigurować serwer tak, aby tworzył dostosowaną stronę błędu 404. (Jeśli jesteś klientem HubSpot, kliknij tutaj, aby dowiedzieć się, jak dostosować stronę 404 w HubSpot.)

Niektóre dostosowane strony błędów 404 zawierają obraz bohatera, dowcipny opis, mapę witryny, formularz wyszukiwania lub podstawowe informacje kontaktowe.

Najlepsze przykłady stron internetowych 404

Przez lata strony internetowe znalazły różne sposoby informowania odwiedzających o błędzie 404 i kierowania ich z powrotem we właściwe miejsce, niektóre po prostu, inne kreatywnie, a inne przezabawnie. Zacznijmy od przejrzenia kreatywnych stron 404, a następnie sprawdź kilka zabawnych przykładów, które z pewnością zachwycą każdego, kto się z nimi spotka.

Nie znaleziono strony: strony z błędami Creative 404

1. Pipcorn

Podczas gdy strona 404 może łatwo odstawać od strony internetowej, strona błędu Pipcorna idealnie pasuje do reszty brandingu witryny. Jest tam ładne animowane tło, przyjazna podpowiedź tekstowa kierująca odwiedzających do przeszukania witryny (wraz ze sprytną grą słów) oraz kawałek popcornu użyty jako „0” w „404”.

2. Spotify

Gigant strumieniowego przesyłania muzyki, Spotify, pokrył swoje podstawy sprytną stroną 404. Z dowcipną kalamburą z albumu Kanye Westa „808s and Heartbreak” i animacją rekordu, witryna na krótko zapewnia rozrywkę, a następnie odsyła odwiedzających z powrotem na stronę, z której przyszli.

3. Genialnie

Jednym prostym sposobem na złagodzenie napięcia na stronie 404 jest dodanie szybkiego „Ups!” przekaz — sprawia, że ​​Twoja witryna jest bardziej przyjazna, gdy kierujesz użytkowników z powrotem we właściwe miejsce. W przypadku strony Genially, strona zawiera również fajną ilustrację połączoną z zabawną kopią.

4. Adobe

Jak można się spodziewać, strona błędu 404 firmy Adobe jest zarówno użyteczna, jak i przyjemna wizualnie. Zawiera listę popularnych linków, które użytkownicy mogą chcieć, wraz z fajną grafiką cyfrową służącą jako wizualna metafora uszkodzonej lub zagubionej strony. Szczerze mówiąc, strony internetowe powinny częściej używać wizualnych metafor.

5. Clorox

Strona 404 dotycząca produktów czyszczących Clorox obraca się między trzema beztroskimi zdjęciami, aby zasygnalizować odwiedzającym, że popełnili błąd. To mądre wykorzystanie brandingu, aby dodać krótką chwilę rozkoszy, jednocześnie pomagając zagubionym użytkownikom.

6. Kolektyw Dumy

Innym razem możesz nie potrzebować dowcipnej notki — po prostu powiedz odwiedzającym, że pod adresem nie ma strony i pozwól im przejść dalej. Agencja zajmująca się doradztwem w dziedzinie rozrywki Duma Collective robi to właśnie ze swoją stroną błędu, chociaż jest ona uzupełniona obrazem tła dla drobnego polotu.

7. Chłodnia

Mówiąc o sprycie, marka samoopieki Chillhouse włożyła dodatkową pracę, aby przekierować swoich gości w dobrym stylu. Strona 404 jest odpowiednio oznakowana, a nawet zabiera odwiedzających w małą podróż przez kilka zdjęć, zanim wrócą na stronę główną.

8. Trochę

Jeśli wprowadzisz niepoprawny link Bitly, zostaniesz przeniesiony na stronę 404 Bitly. Zakładamy, że dzieje się to w uczciwy sposób, dlatego strona 404 przechodzi od razu do sedna. Wyjaśnia, co mogło pójść nie tak i zachęca użytkowników do odwiedzenia strony głównej Bitly, jeśli tego właśnie szukają.

9. Ikea

Strona 404 Ikei jest podobnie minimalistyczna, ale wciąż udaje jej się przemycić tam trochę inteligentnego brandingu. Ten przykład pokazuje, że strony błędów nie muszą być rozbudowane, aby przekazać sedno sprawy, ale nie ma też nic złego w wstrzykiwaniu trochę zabawy.

10. Moxie Design Co.

Jasne, „wysadzenie Internetu” może być nieco hiperboliczne, ale mówi odwiedzającym, że Moxie Design Co. nie traktuje się zbyt poważnie z drobnymi wpadkami, takimi jak ta. Ponadto na dole jest wygodnie umieszczony pasek wyszukiwania, aby wysłać Cię w drogę.

11. McKissack i McKissack

Ach, klasyczna sztuczka „zgubiliśmy stronę”. Ponownie, prosty sposób na zaprezentowanie błędu 404 bez zrażania odbiorców. Jeśli jesteś agencją taką jak McKissack & McKissack, która zarządza wieloma interakcjami z klientami, przejrzysta i zwięzła treść jest niezbędna dla wszystkich stron Twojej witryny, w tym stron błędów.

12. Sztuczki CSS

Czy kiedykolwiek zerwałeś opakowanie strony internetowej, aby zobaczyć, co jest pod nią? To jest koncepcja, którą stosował CSS Tricks na swojej stronie błędu 404. Jest to zarówno dowcipne, jak i przypominające to, o co chodzi w witrynie: inteligentne wykorzystanie stylizacji strony.

13. Dobre stare gry

W przypadku innych stron internetowych rozpakowujesz frontend i jest… tylko ogromna pustka przestrzeni. Ta strona jest sprytnym odniesieniem do GOG Galaxy, który jest natywnym klientem gier wideo Good Old Games. Na szczęście jest tam mała postać z gry wideo, aby dać odwiedzającym miejsce na zgłoszenie błędu, jeśli chcą.

14. Płótno

Więcej informacji znajdziesz na stronie 404 serwisu Canva. Zawiera nie tylko komunikat o błędzie, ale także fajną łamigłówkę, którą odwiedzający mogą zagrać dla krótkiej rozrywki. Nie ma nic złego w puszczeniu gości na kilka minut, prawda?

15. Innotech

Podobnie jak w podejściu Canva, Innotech zawiera grę w stylu Ponga na swojej stronie 404, aby zapewnić krótką rozrywkę. Są szanse, że zapamiętasz taką witrynę. Ponadto zabawny objazd uzupełnia naprawdę imponującą stronę internetową — poważnie, kiedy skończysz grać, przejdź na stronę główną i weź to wszystko.

16. Niezliczona ilość

Agencja wideo Myriad zdecydowała się na dziwaczny, firmowy projekt strony 404, który naśladuje klasyczne paski kolorów SMPTE, które pojawiają się na starych taśmach i telewizorach. To zabawny powrót do starszych technologii, reprezentujący bardziej współczesny problem nieistniejącej strony internetowej.

17. KonMari

Znana ze swoich popularnych metod czyszczenia i organizacji oraz marki, Marie Kondo wprowadziła podobny klimat do strony 404 w swojej witrynie. Kopia krótko i humorystycznie nawiązuje do jej filozofii sprzątania – małego, ale dobrze markowego detalu, który fani rozpoznają.

18. MarkaCrowd

Ilustracja na tej stronie błędu jest nie tylko szczegółowa i wciągająca — kopia jest również sprytna. Uwielbiamy odniesienie do piosenki Semisonic „Closing Time”: „Możesz kliknąć gdziekolwiek indziej, ale nie możesz kliknąć tutaj”.

19. Produkcje Hot Dot

Strona błędu Hot Dot pozostaje wierna swojemu sloganowi, „skrzyżowaniu nowych technologii i designu”. Strona jest animowana setkami malutkich kropek, które zmieniają kierunek w odpowiedzi na ruch kursora. Hipnotyzuje i świetnie prezentuje możliwości projektowe agencji.

20. Pomarańczowy płaszcz

Jeśli masz zamiar wyświetlić komunikat o błędzie, dlaczego nie zabawić użytkownika przez kilka sekund, podczas gdy mu pomagasz? Po przyjaznym powitaniu OrangeCoat oferuje schemat blokowy, który w rzeczywistości pomaga użytkownikom dowiedzieć się, dlaczego w pierwszej kolejności dotarli do strony błędu.

21. Erwin i Smith

Ta strona 404 nie tylko przekierowuje użytkowników z powrotem do aktywnych stron. Zamiast tego strona 404 Ervin & Smith zachęca do przewinięcia w dół i dowiedzenia się, dlaczego potrzebujesz agencji marketingu cyfrowego i dlaczego w szczególności wybrać firmę Ervin & Smith, uzupełnioną formularzem kontaktowym. Zgodnie ze swoją misją agencja ta pokazuje, że każda strona może być okazją do konwersji.

22. Studia DayCloud

…albo Twój 404 może być po prostu miejscem do zmarnowania czasu na minutę, jak widać na stronie internetowej DayCloud Studios. Przesuwanie kursora po ekranie ujawnia komunikat 404 podświetlony przez lasery wystrzeliwane z oczu kota. Bo czemu nie?

23. Przestrzeń nad głową

Inny przykład witryny internetowej, która inteligentnie zawiera komunikaty o marce na stronie 404 — aplikacja do medytacji z przewodnikiem Headspace stara się uspokoić użytkowników, zachęcając nas do wzięcia głębokiego oddechu, a następnie powrotu na stronę główną.

24. Piekarnia Wildwood

Niektóre strony internetowe do tej pory zintegrowały sprytną markową kopię na swoich stronach, podczas gdy inne hostowały na swoich stronach pełnowymiarowe gry online. Ale nie ma nic złego w krótkim odepchnięciu we właściwym kierunku. Wyjątkowa strona Wildwood Bakery sprawia, że ​​rzeczy są krótkie i słodkie (dosłownie).

Nie znaleziono strony: śmieszne strony błędów 404

25. Bystry

Strona 404 agencji projektowej Astuteo to idealna równowaga eleganckiej grafiki, humoru i użyteczności. Minimalny układ dostarcza użytkownikom potrzebnych informacji wraz z inną zabawną metaforą wizualną, tonącym statkiem towarowym i uciekającą postacią.

26. LEGO

Na stronie błędu 404 LEGO jest potrzebnych kilka słów — wyraz twarzy postaci wyjaśnia wszystko. Ponadto fani serii filmów LEGO będą mieli zabawne odniesienie w kopii.

27. Magt

W tym zabawnym komunikacie o błędzie Magnt naśmiewa się z faktu, że tak, mogli coś zepsuć — lub po prostu nie możesz pisać. Wizualizacja służy jako szybki sposób na szybkie zilustrowanie ich punktu widzenia.

28. Wyszukiwarka ikon

Strona błędu IconFinder jest prosta, ale zachwycająca. Maskotka firmy ubrana w szatę i wyglądająca na zmęczoną to ukłon w stronę zagubionych gości. Nie martw się jednak, ponieważ strona zawiera listę niektórych linków do odwiedzenia poniżej.

29. Słodkie sny

Najwyraźniej zespół firmy Sweet Dreams, która pomaga w zasypianiu, przejął zbyt wiele swoich produktów według strony 404 w witrynie. Ta strona jest nie tylko zabawna, ale także dobrze komponuje się z resztą estetyki front-endu i komunikatów, zapewniając spójność.

30. GitHub

Wiersz „To nie są droidy, których szukasz” odnosi się do sztuczki Jedi Obi-Wana Kenobiego na temat Szturmowców w IV odcinku Gwiezdnych wojen i stało się dobrze znanym wyrażeniem używanym do powiedzenia komuś, że ścigają źle przebieg działania. GitHub gra na tej słynnej linii w swoim komunikacie o błędzie 404.

31. Patagonia

Niestandardowa strona 404 Patagonia doskonale oddaje klimat marki, wraz z filmem bumerangowym z wirującym frisbee, sprytnym kalamburem łączącym „404” i „aloha” oraz linkami do stron jej produktów. To przyjazny i zabawny sposób na powitanie gości, którzy znaleźli się w niewłaściwym miejscu.

32. Chmura Sigma

Sprawdź to: Cloud Sigma wpuszcza nas do akcji za kulisami. Ich strona błędu 404 udaje „stronę główną młodszych programistów” — ten młodszy programista jest, no cóż, kotem.

33. Teatry AMC

Być może byłeś wcześniej w kinie AMC, ale miejmy nadzieję, że nigdy nie widziałeś strony 404 na ich stronie internetowej. Witryna korzysta z szybkiego, zabawnego i odpowiedniego tekstu, zanim odeśle Cię z powrotem we właściwe miejsce.

34. Bruno

To nie przypadek, że agencje kreatywne są świetne w wymyślaniu fajnych stron 404. Oto kolejny od twórców z Bruno, który odgrywa rolę kultowej komedii z 2000 roku , Koleś, Gdzie jest mój samochód? Nie, nie ma to nic wspólnego z firmą ani stroną internetową, ale na pewno wywoła chichot.

35. NPR

Na początku strona błędu NPR wydaje się niczym szczególnym. Ale czytaj dalej, a zobaczysz, jak sprytnie łączą się z niektórymi ze swoich wspaniałych historii o zaginionych ludziach, miejscach i rzeczach, takich jak artykuł o Amelii Earhart i artykuł o Waldo. Może to po prostu sprawić, że zagubieni użytkownicy poczują się trochę mniej samotni.

36. Średni

Medium ma podobne podejście do strony 404 w NPR, polecając artykuły o gubieniu się i gubieniu rzeczy. Sprawdź te artykuły, jeśli masz czas — są całkiem dobre.

37. HomeStarRunner

Strona HomeStarRunner.com, w której znajduje się animowana we Flashu seria kreskówek, przez lata miała serię zabawnych stron z błędami 404. W najnowszym filmie występują postacie z serialu animowane w scenie, która mogłaby pochodzić prosto z jednego z ich odcinków. Jeśli włączysz dźwięk podczas wczytywania strony, usłyszysz jego postać Strong Bad – znaną z wykrzykiwania na głos zwrotów – mówiącą „404'd!”

38. Rozrywka Blizzarda

Oto prosty pomysł, który wygląda zgrabnie: strona 404 Blizzard Entertainment zawiera animowaną postać zagubioną w prawdziwej zamieci i trochę humoru, który docenią fani World of Warcraft.

39. Witam, wielki pomysł

Krótka wycieczka po stronie ekspertów od marketingu i mediów społecznościowych Hello Big Idea powie Ci, co musisz wiedzieć o jej śmiałym i dosadnym stylu kopiowania. I oczywiście strona błędu 404 nie jest wyjątkiem.

40. HubSpot

Nam też to się zdarza! To jest wiadomość, którą wysyłamy, aby poinformować odwiedzających naszą witrynę, że istnieją pewne problemy z witryną. Naszym celem było pozostać wiernym głosowi marki HubSpot poprzez bycie tak sympatycznym, empatycznym i pomocnym, jak to tylko możliwe.

Zmień stronę błędu 404 w chwilę rozkoszy

Nikt nie chce wylądować na stronie 404 — są denerwujące i nieoczekiwane. Jednak tak naprawdę nie można ich uniknąć, więc zawsze dobrze jest mieć stronę 404, na którą można się odwołać w swojej witrynie.

Z punktu widzenia użytkownika strona 404 powinna być małym progiem zwalniającym, a nie murem. Właściwy projekt może być różnicą między sfrustrowanym odbiciem a możliwą konwersją, więc dlaczego nie sprawić, by było to zabawne?

Uwaga redakcji: Ten post został pierwotnie opublikowany w grudniu 2015 r. i został zaktualizowany w celu zapewnienia kompleksowości.