Membuat Halaman Error 404 Lebih User-friendly

Dead Sign

Image taken from Coding Horror

Sebagian pengguna internet paham apa itu 404 — Page Not Found. Sebagian besar lainnya mungkin tidak paham mengenai pesan standar 404 ketika membuka sebuah dead link. Anggaplah mereka yang tidak paham adalah pengunjung yang baru pertama kali mampir di website/blog kita, langsung dihadapkan pada pesan default 404 yang membingungkan. Maka apa yang terjadi? Dari survei yang saya dapat dari 404 Research Lab, sebagian besar dari mereka yang menjumpai 404 tidak akan berupaya menemukan halaman yang dicari dan akan langsung menutup halaman error 404 tersebut. Hmm, sebuah first impression yang buruk bukan?

Apache Error 404 Page

Maka halaman 404 yang baik adalah halaman yang dibuat se-user-friendly mungkin, menarik, membantu, yang tidak membingungkan pengunjung. Hal ini penting, karena bisa jadi pengunjung mengenal website kita bukan dari homepage melainkan malah dari halaman 404, karena beberapa alasan: salah mengetikkan URL atau mengklik broken link dari website lain. Tujuan utama dari 404 yang user-friendly ini adalah bagaimana membuat pengunjung tidak segera menekan tombol back atau meninggalkan website kita.

Kita dapat mendisain sendiri halaman 404 kita, berdasarkan beberapa masukan berikut yang paling banyak disarankan oleh para webmaster.

1 – Tambahkan logo atau gambar di halaman 404

Tambahkan sebuah gambar yang menarik sebagai ilustrasi error, yang bisa menjelaskan kepada visitor bahwa halaman yang mereka cari tidak ditemukan. Logo website yang familiar juga membantu pengunjung, apalagi dipadukan dengan struktur halaman seperti halaman lain dari website tersebut. Jangan sampai pengunjung mendapatkan halaman 404 yang tampilannya beda jauh dengan halaman websitenya. Contoh yang cukup familiar adalah seperti milik Yahoo!

Yahoo! Error 404 Page

2 – Berikan beberapa daftar link alternatif

Tawarkan kemudahan bernavigasi kepada pengunjung apabila mereka menjumpai 404, seperti sitemap, daftar artikel terbaru dan artikel terpopuler, daftar kategori artikel, dan daftar arsip (sangat mudah diterapkan pada blog WordPress). Sebagai contoh, lihat halaman 404 blog ini.

3 – Tambahkan search box bila perlu

Selain daftar link alternatif, tambahkan juga sebuah kotak pencarian, yang kita tahu sangat berguna apabila pengunjung tetap tidak bisa menemukan apa yang mereka cari dari link-link alternatif yang kita tawarkan.

4 – Berikan informasi kontak

Berikan informasi kontak seperti alamat e-mail, untuk memudahkan user memberikan laporan error kepada webmaster.

5 – Berikan informasi singkat

Halaman 404 sebaiknya memuat beberapa kalimat singkat yang menginformasikan error kepada pengunjung. Bahasa yang dipakai tidak perlu terlalu teknis, tetapi buatlah semenarik mungkin dan bila perlu tambahkan sedikit humor. Beberapa contoh yang menarik yaitu AboveTopSecrets, CssLeak, Video Management System, Acron Creative.

Halaman 404 Unik dan Kreatif

Beberapa halaman 404 berikut ini merupakan favorit saya, dan mungkin bisa menjadi sedikit inspirasi buat kita.

1 – Web Design Greenville SC

Web Design Greenville SC Error 404 Page

Salah satu yang paling unik dan beda dibandingkan dengan yang lainnya, karena menggunakan teknik CSS untuk membuat peta navigasi tampak seperti flowchart!

2 – BlueDaniel

BlueDaniel Error 404 Page

Sangat menarik karena menggunakan gambar dengan sedikit kata-kata, tapi bisa mewakili dengan jelas pesan error 404.

3 – Northern Tool & Equipment

Northern Error 404 Page

3 – Busted Tees

Busted Tees Error 404 Page

Cukup menarik dan useful karena user dimanjakan dengan katalog produk pada halaman 404 mereka.

Bagaimana dengan halaman 404-mu? :)

Instant Internet Business Ideas

Related Posts ↓

Rahasia Sukses Paid Review

{28 Comments so far }

  1. infini3 said,

    Wrote on April 9, 2009 @ 7:11 am

    Kalau saya menggunakan 404 page yg dibuat oleh Google. Sudah ada search box-nya hanya saja seringkali hasil pencarian kurang relevan. Btw bagaimana cara membuat custom search engine?

  2. rismaka said,

    Wrote on April 9, 2009 @ 3:17 pm

    Kalau saya menyisipkan kode php yang akan menampilkan seluruh arsip seluruh postingan, jadi pengunjung yang tersesat diharapkan dapat membuka halaman lain yang valid.

    Dan sepertinya penambahan design grafis bagi pengunjung kurang penting mas, karena yang mereka harapkan adalah informasi, jadi sebisa mungkin berilah link informasi lain yang relevan.

    Sekalian mau tanya nih mas. Penggunaan ajax sebenernya aman ga siy mas? Banyak yg bilang katanya di ajax ada celah yg bisa ditembus..

  3. ardi said,

    Wrote on April 9, 2009 @ 5:57 pm

    404 ku udah ganti, mas. Tapi bawaan themes. Cuma nambah koding2 dikit…
    Eh, liat halaman 404-nya mas Ponari ah… eh, Fanarii…

  4. nyubi said,

    Wrote on April 9, 2009 @ 6:09 pm

    wah,, info berharga banget mas
    saia coba-coba akh, keep action mas

  5. fanari said,

    Wrote on April 10, 2009 @ 5:25 am

    @infini3: apakah maksud anda Google custom search engine? Dokumentasinya sudah tersedia kan di halaman resmi CSE dan blog Google CSE
    @rismaka: sayangnya saya belum tahu cara menampilkan link seluruh postingan dengan pagination, mungkin mas bisa membantu?
    Tujuan custom 404 dibuat se-friendly mungkin, jadi bukan masalah pake design grafis apa nggak tapi yg penting informatif.
    Anw, sejauh ini saya belum tahu keamanan ajax, trims buat infonya :)

  6. Taktiku said,

    Wrote on April 11, 2009 @ 7:46 pm

    Nice info mas, segera saya praktekkan :)

  7. rismaka said,

    Wrote on April 11, 2009 @ 9:21 pm

    @fanari: Saya biasa pakai kode berikut setelah title 404

    <?php wp_get_archives('type=postbypost'); ?>

    Mengenai pagination saya ga ngerti, tapi klo menggunakan itu semua daftar isi postingan muncul semuanya. Jadi klo postingannya udah ribuan mending ga usah pake :D

    Kode di atas ditulis ulang aja, saya ga tau komentar di blog ini sudah dilepas belum filternya..

  8. thegands said,

    Wrote on April 13, 2009 @ 9:07 am

    setelah saya cek, ternyata halaman 404 yang mengandung flowchart dari web design greenville itu menggunakan image bro. :D
    anyway, benarkah ajax tidak aman?

  9. fanari said,

    Wrote on April 13, 2009 @ 9:14 am

    @thegands: hehe makasi koreksinya mas, screenshot itu aku ambil dari web lain. saya kira teksnya pakai css ternyata itu gambar semua :D
    soal keamanan ajax saya belum tahu-menahu mas, bukankah mas harusnya lebih tahu daripada saya? :p

  10. iis ngeblog said,

    Wrote on April 13, 2009 @ 10:29 am

    cara nambahin logo di halaman 404 gimana ya mas?superdupernewbie nih mas

  11. brokethesoul said,

    Wrote on April 13, 2009 @ 2:01 pm

    Nice info bos ….

  12. Inov said,

    Wrote on April 13, 2009 @ 3:33 pm

    Hhe, nice info mas,
    akan saya coba bereksperimen :D

  13. thegands said,

    Wrote on April 14, 2009 @ 10:17 am

    setelah saya cek dan ricek lagi, AJAX memang memiliki vulnerability yang bisa digunakan untuk proses hack baik menggunakan XSS atau teknik lain. :D

  14. charlie said,

    Wrote on April 17, 2009 @ 3:43 pm

    ow….begitu yach mas fanari..
    wah boleh juga nich….
    coba praktek dl ah…
    ajari chong…..
    [imajinasi mode on]
    bahasa pemrograman

  15. badoer said,

    Wrote on April 21, 2009 @ 5:39 pm

    bikin tutorial cara bikinnya dunk bro.. maua tak sisipin gambar nie… btw nek dikasi link iklan adsense bisa ndak yah, biar pengunjung yg tersesat dihalaman tadi jadi makin “tersesat” :D

  16. fanari said,

    Wrote on April 22, 2009 @ 8:51 pm

    @badoer: sebenarnya bisa aja mas, tapi keliatan aneh kalau halaman error disisipi iklan? :D
    alaman 404 bisa dimodifikasi dari halaman arsip, kode lengkap ada di WP Codex

  17. MNXZone said,

    Wrote on April 23, 2009 @ 4:40 am

    Trims infonya..Akan saya coba..

  18. MNXZone said,

    Wrote on April 23, 2009 @ 4:41 am

    Mas..Kapan2 tak ajak ngenet bareng ya..Aku mau tanya banyak..

  19. fanari said,

    Wrote on April 23, 2009 @ 3:01 pm

    @MNXZone: hehehe mau ngenet dimana nih?? :)

  20. Ecko said,

    Wrote on April 26, 2009 @ 4:40 pm

    Menarik banget solusinya. Sayang saya pake Blogger, jadi gak bisa ikutan praktek nih. :)

  21. adel said,

    Wrote on May 22, 2009 @ 7:24 pm

    Yupss, lumayan tuh error 404 di modify, saya dulu pernah mencobanya. Bagusan di redirect ke halaman lain lagi ya mas :) Sangat kreatif. Kalau bisa semua error yang lain seperti 403, 500 dll

  22. varian said,

    Wrote on July 2, 2009 @ 8:14 am

    Mas, ada gak contoh-contoh template halaman error untuk joomla?

  23. raiderhost said,

    Wrote on July 10, 2009 @ 10:58 pm

    saya tak redirect dihalaman yang baru saya optimalisasi SEO

  24. arikaka said,

    Wrote on July 16, 2009 @ 12:23 am

    template saya kalo gak salah munculnya apa ya…?
    weleh cuma error 404…
    ckckcck

  25. budijaya said,

    Wrote on August 14, 2009 @ 10:45 pm

    punya saya redirect ke home tp lupa gmana caranya hehe…

  26. andi said,

    Wrote on August 26, 2009 @ 10:39 pm

    cara melacak url not found gimana ni..??

  27. fanari said,

    Wrote on August 29, 2009 @ 7:33 pm

    @andi: bisa menggunakan Google Webmaster Tools

  28. Info Kerja said,

    Wrote on November 10, 2009 @ 5:21 pm

    modifikasi 404 emang lebih menguntungkan, ketimbang pengunjung kabur gak karuan ke negeri entah berantah, mendingan kita giring ke alamat popular post kita.. :)

Comment RSS · TrackBack URI

Leave a Comment ↓

Name

E-mail

Website