Anatomi

Variasi Banner

Tipe Banner

Banner Success

Memuat informasi yang sifatnya positif dan biasanya berupa respon lanjutan dari sebuah aksi yang telah dilakukan sebelumnya.

Banner Warning

Memberikan informasi peringatan atas potensi masalah yang belum kritis, dan membutuhkan aksi tindak lanjut yang perlu dilakukan.

Banner Critical

Memuat informasi yang sifatnya error/blocking, menandakan ada masalah serius atau kegagalan yang butuh perhatian segera. User wajib untuk melakukan sebuah aksi terlebih dahulu untuk dapat melanjutkan.

Banner Neutral

Menyampaikan informasi bersifat netral, umum, sekunder, status yang tidak mendesak, atau informasi yang berdiri sendiri (bukan berupa respon lanjutan).

Banner Informational

Menyampaikan informasi bersifat netral, umum, yang relevan untuk pengguna, tanpa urgensi tinggi. Tipe ini dipakai jika ingin menyampaikan informasi yang umum namun dengan perhatian lebih tinggi dari pada Tipe Neutral, kepada user.

Banner Entry Point

Mengajak pengguna melakukan sebuah aksi atau masuk ke suatu fitur/halaman tertentu. Banner ini tidak sekadar memberi informasi, tapi bersifat interaktif dan mendorong engagement. Informasi bersifat netral dan dipakai sebagai cara menarik perhatian tanpa menandakan status/error. Pada Tipe Entry Point wajib memakai CTA.

Behaviors

Tidak ada interaksi spesifik terhadap komponen Banner, Banner merupakan komponen statis.

Panduan Penggunaan

Variasi Default dan Fixed

Default

Banner biasanya ditempatkan di content area, di bawah header/top bar. Posisi ini memastikan pesan mudah terlihat tanpa mengganggu navigasi utama.

Fixed

Banner bersifat kontekstual yaitu muncul hanya pada halaman/fungsi tertentu. Bentuknya memanjang pada satu halaman (full width). Posisi terletak fixed pada atas halaman sebagai penanda informasi yang cukup penting untuk segera dilihat.

Button & Link

Dismissable

Gunakan Banner ketika ada informasi penting yang perlu dibaca

Banner dapat digunakan untuk menarik perhatian. Hanya gunakan Banner jika memang ada informasi yang penting saja, hindari penggunaan Banner yang terlalu banyak dalam 1 halaman agar tidak mereduksi tingkat urgensinya.

Pastikan penggunaannya sesuai dengan tipe informasi

Gunakan jenis Banner yang sesuai dengan tipe informasinya untuk memastikan penerimaan informasinya tepat sasaran.

Panduan Penulisan

Sampaikan informasi dalam kalimat yang singkat dan jelas

Gunakan jenis Banner yang sesuai dengan tipe informasinya untuk memastikan penerimaan informasinya tepat sasaran.

Fokus pada pesan penting

Hindari informasi berlebihan, hanya berikan pesan yang relevan.

Responsif