Lewati ke konten

404 Section

404 Section

banner-background
404 Illustration

404: Halaman Tidak Ditemukan

Maaf, halaman yang Anda cari tidak tersedia. Halaman tersebut mungkin telah dipindahkan atau tidak lagi dapat diakses.

404 Section digunakan untuk memberitahu pengguna bahwa halaman atau tautan yang mereka tuju tidak tersedia.

Pola ini membantu pengguna kembali ke jalur utama dengan menyediakan elemen Call-to-Action (CTA) seperti tombol “Kembali ke Beranda”.

Gunakan 404 Section pada halaman kosong, rusak, atau tidak ditemukan untuk mengarahkan pengguna ke halaman yang masih aktif.

Pola ini membantu pengguna kembali ke jalur utama dengan menyediakan elemen Call-to-Action (CTA) seperti tombol “Kembali ke Beranda”.

404

Title

Description

1

Text Content

Pesan utama yang menjelaskan kondisi halaman, seperti "Halaman Tidak Ditemukan" sekaligus teks tambahan untuk memberikan konteks atau penjelasan singkat dan tombol tindakan untuk mengarahkan pengguna kembali ke halaman utama atau halaman lain yang relevan.

2

Illustration

Elemen visual yang memperkuat pesan kesalahan.

Kategori pada 404 Section berfokus pada pengaturan alignment serta opsi penambahan ilustrasi.

Horizontal

Menampilkan ilustrasi di sisi kanan atau kiri dengan teks dan tombol di sisi berlawanan. Cocok untuk tampilan desktop untuk menjaga keseimbangan visual.

404

Title

Description

Horizontal with Icon

Menambahkan ikon tambahan di atas judul sebagai penanda visual kesalahan. Cocok untuk tampilan yang lebih kompak seperti halaman mobile.

404

Title

Description

Vertical

Menampilkan semua elemen (ikon, teks, tombol) secara vertikal di tengah layar. Cocok untuk halaman dengan ruang terbatas atau tampilan responsif.

404

Title

Description

Teks Utama (Text Content)

Gunakan bagian ini untuk menambahkan elemen teks seperti kode error, judul, deskripsi, dan tombol tindakan (CTA).
Teks berfungsi memberi konteks kepada pengguna tentang apa yang terjadi dan langkah apa yang bisa dilakukan selanjutnya. Misalnya, tombol untuk kembali ke beranda atau memuat ulang halaman.

SI
Susi Indriwati
Product Designer
SI
Susi Indriwati
Product Designer

Ilustrasi

Tambahkan ilustrasi yang relevan untuk memperkuat pesan.
Pilih gaya ilustrasi yang konsisten dengan identitas visual produk dan tetap menjaga keseimbangan antara teks dan gambar agar tampilan tidak terasa berat.

404 Section Illustration

Informasi yang Jelas

Recommended: Display clear 404 message

✅ Disarankan

Tampilkan pesan 404 yang jelas pada bagian judul dan deskripsi.

Avoided: Don't use generic error message

❌ Dihindari

Jangan gunakan pesan umum seperti "Terjadi kesalahan" tanpa penjelasan tambahan.

Recommended: Use polite, calm, and helpful tone

✅ Disarankan

Gunakan nada yang sopan, tenang, dan membantu. Tunjukan empati tanpa membuat pengguna merasa bersalah.

Avoided: Don't use blaming or joking language

❌ Dihindari

Hindari bahasa yang menyalahkan atau terkesan bercanda. Nada atau bahasa tersebut dapat dianggap tidak profesional, terutama di konteks layanan publik.

Recommended: Use CTA button to help users

✅ Disarankan

Gunakan tombol CTA yang membantu pengguna mengambil langkah berikutnya. Pastikan tombol mudah ditemukan dan menggunakan kata kerja yang jelas.

Avoided: Don't leave users without direction or action button

❌ Dihindari

Jangan biarkan pengguna tanpa arah atau tombol tindakan apa pun. Hindari penggunaan CTA yang tidak relevan dengan konteks halaman error, seperti tautan ke halaman acak atau promosi.

Halaman 404

404 Section ditempatkan pada halaman khusus yang berdiri sendiri, yaitu halaman 404 atau Not Found. atau Not Found. Halaman ini muncul ketika halaman yang dituju pengguna tidak berhasil ditemukan.

404 Section Illustration

404: Halaman Tidak Ditemukan

Maaf, halaman yang Anda cari tidak tersedia. Halaman tersebut mungkin telah dipindahkan atau tidak lagi dapat diakses.

Back to Home

Pastikan jarak antar elemen (spacing), ukuran font untuk judul dan deskripsi, proporsi ilustrasi, dan pastikan tombol CTA memiliki kontras warna yang cukup.

404 Section Specifications