Buta Banner

Di era internet dan web, ada beberapa mata uang yang penting bagi para designer/developer antara lain uang itu sendiri, waktu, dan perhatian. Kesuksesan seorang designer/developer dinilai ketika pengguna menghabiskan uang, waktu, atau perhatian di website yang dibuatnya. Kali ini gw mau ngomongin spesifik ke hal yang ketiga yaitu: perhatian.

Perhatian adalah salah satu mata uang yang penting bagi UX designer karena konversi biasanya diawali dengan sebuah perhatian. Bahkan bisa dibilang bisnis di internet ditopang sebagian besar oleh bisnis “perhatian” aka iklan. Perusahaan misalnya membayar mahal kepada facebook untuk menampilkan kampanyenya (iklan) dengan harapan bahwa kita sebagai pengguna facebook akan memberikan “perhatian” kita pada konten kampanye (iklan) perusahaan-perusahaan ini.

Lalu apa saja yang mempengaruhi perhatian orang? Ada empat hal yang menentukan seberapa besar alokasi perhatian kita pada suatu objek yaitu:

  1. Objek yang menonjol – misalkan jika ada objek yang bergerak (animasi) atau dengan warna yang sangat terang di sebuah halaman web, biasanya perhatian kita akan tertuju padanya
  2. Pengalaman sebelumnya – misalkan jika di pengalaman sebelumnya selama membaca portal berita kita “belajar” bahwa biasanya di kolom paling kanan (right rail) akan banyak diisi dengan iklan, maka biasanya perhatian kita akan sangat minim untuk daerah ini di portal berita.
  3. Tujuan – misalkan jika dalam suatu waktu kita mempunyai tujuan spesifik untuk membeli sepatu lari berwarna hitam, maka objek yang menyerupai tujuan ini akan mendapatkan perhatian yang besar.
  4. Budaya – orang yang dibesarkan di budaya barat terbiasa memberi perhatian di objek sentral sedangkan orang dari budaya timur terbiasa memberi perhatian pada keseluruhan konteks (background).

Lalu apa saja aplikasi dari teori perhatian ini pada design web? Ada banyak. Tapi kali ini gw akan fokus di satu topik yang namanya banner blindness.

Banner blindness.

Di bidang Cognitive Science & Usability ada sebuah istilah yang disebut sebagai Inattentional Blindness. Secara singkat artinya ketika perhatian kita difokuskan ke tempat lain sehingga sesuatu yang sebenarnya di depan mata jadi terlewatkan. Contoh dari inattentional blindness ini adalah banner blindness yaitu dimana pengguna akan selalu memberi perhatian paling sedikit pada konten yang menyerupai banner iklan.

Mengapa? Sesuai dengan poin nomer 2 (alokasi perhatian berdasarkan pengalaman), pengguna web “belajar” untuk menyalurkan perhatian mereka berdasarkan pengalaman mereka sebelumnya.

Dari pengalaman mereka sebelumnya, pengguna “belajar” bahwa iklan-iklan yang biasanya ditampilkan berupa banner berisi informasi-informasi yang kurang penting untuk mereka sehingga mata kita secara otomatis akan “skip” begitu melihat objek menyerupai banner iklan.

Hasil eyetracking di bawah gw ambil dari website smashingmagazine.com . Bisa dilihat bahwa fiksasi mata (yang bisa dibilang sejajar dengan perhatian) selalu melewati semua banner (kotak hijau).

banner

Oleh karena itu sebagai UX designer kita wajib berhati-hati dengan elemen yang menyerupai banner di desain kita. Jangan sampai informasi penting kita taruh di desain yang menyerupai banner. Sebagai contoh, kita bisa coba lihat di desain salah satu halaman di traveloka di bawah ini.

IMG_9123

Di halaman ini traveloka ini menampilkan macam-macam promo yang sedang dimilikinya. Konsep banner blindness akan meramal bahwa pengguna akan melewati (tidak mengalokasikan perhatiannya pada) banner-banner yang dipakai sebagai header untuk setiap promo ini. Tentu hal ini bukan yang diharapkan oleh UX designer halaman ini. Untuk memperburuk masalah, banner-banner ini hanya diambil dari versi desktop web traveloka sehingga ada banyak sekali teks berukuran kecil di dalamnya yang sulit terbaca di layar sempit ponsel.

Pengguna secara bawah sadar akan mengalami konflik di halaman ini:

  1. Sesuai dengan tujuan mereka (untuk mencari promo), mereka harus menaruh perhatian pada setiap banner
  2. Tapi sesuai dengan pengalaman mereka (banner blindness), mereka tidak ingin menaruh perhatian pada banner ini.

Bisa dibilang sebagai sebuah desain yang membuat para pengguna “galau” di alam bawah sadar mereka. :p Tidak percaya? Anda bisa mencoba sendiri “kegalauan” bawah sadar ini. Cek website versi mobile traveloka.com dari ponsel pintar Anda lalu navigasi ke halaman promo (klik ikon promo di kanan atas). Rasakan sensasi kegalauan mata Anda, dimana di satu sisi Anda ingin selalu mengabaikan banner dan segera melompat ke teks-teks deskripsi promo yang tersedia (alokasi perhatian berdasarkan pengalaman) tapi di sisi lain gw sedang minta Anda untuk mengamati banner-banner itu (alokasi perhatian berdasarkan tujuan). Keduanya berkontradiksi.

Lalu apa solusinya?

Solusi desain paling sederhana adalah dengan mengganti banner-banner itu dengan teks sebagai header. Menurut riset eye tracking, manusia menaruh perhatian paling besar pada tiga hal berikut di web yaitu pada teks, foto wajah manusia, dan objek vital manusia (yes! We are still that primal. :p ). Nah dengan memakai highlighted teks sebagai banner, kita menghilangkan kegalauan para pengguna. Kita sedang menyelaraskan dua konsep alokasi perhatian yaitu berdasarkan tujuan pengguna (untuk skimming promo yang paling cocok dengan kondisi mereka) dengan pengalaman mereka (bahwa teks yang dihighlight biasanya mempunyai informasi penting). Dua-duanya tidak berkontradiksi dan pengguna senang! Rasakan sensai ketenangan mata Anda di desain di bawah ini.

1. banner

Ada juga beberapa contoh aplikasi lain dari konsep inattentional blindness ini misalkan native advertising dimana iklan dibuat menyerupai dengan konten sehingga mengelabui para pengguna atau menampilkan iklan dalam bentuk dialog box. Keduanya memang kontroversial karena di daerah abu-abu apakah hal ini etis dilakukan. Tapi yang pasti, satu takeway penting dari tulisan ini adalah berhati-hatilah jika kita ingin menaruh sesuatu yang menyerupai banner iklan di halaman-halaman web yang kita desain. Happy UXing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s