Klik BCA: A Grumpy Frankenstein from Chernobyl

A. Time Travel is Possible!

Sebelum menulis tulisan ini, saya harus melakukan transfer uang dari rekening BCA saya ke rekening bank Mandiri milik teman. Karena saya sedang berdomisili di luar Indonesia, maka layanan online perbankan milik BCA, klikBCA, menjadi satu-satunya pilihan. Selama ini pengalaman menggunakan layanan online perbankan milik BCA ini sangat menjengkelkan untuk saya. Hal ini dikarenakan oleh website klikBCA yang menurut saya sangat tidak user friendly, tidak intuitif, tidak mudah digunakan, abai terhadap banyak kaidah-kaidah best practice untuk sebuah website, dan literally membuat saya frustrasi setiap menggunakannya.

Homepage

Coba perhatikan screenshot landing page dari klikbca di atas. Tidak diperlukan opini dari seorang user experience expert untuk menilai bahwa website ini didisain secara berantakan. Panel untuk login yang seharusnya menjadi titik utama perhatian justru diletakkan di bagian kanan bawah, area paling minim perhatian. Tombol login dan demo yang sangat kecil dan berdempetan satu dengan yang lain (Paul Fitts mungkin bisa bangkit dari kubur karena hal ini). Dari segi look and feel, saya seperti merasa kembali ke zaman dimana Friendster masih menjadi raja di social network market dan saya masih menggunakan mIRC  di setiap akhir pekan.

B. The Context

Structure

Now, I will be ranting on how klikBCA is poorly designed. Mungkin karena saya benar-benar hilang kesabaran terhadap website ini, sehingga ini merupakan pertama kalinya saya menulis kritik sebuah website (or heuristics analysis) tanpa embel-embel ditugasi oleh perusahaan manapun ataupun tugas proyek dari seorang dosen yang dulu sering sekali memberi tugas usability review.

Saya akan mulai dengan mendeskripsikan dua bagian utama dari website ini yaitu menu navigasi dan panel utama. Menu navigasi terdiri dari 13 menu utama. Jika pengguna mengklik salah satu dari 13 menu ini, secondary level menu akan ditampilkan. Main navigation menu sebenarnya hanya berfungsi sebagai grouping dari secondary level menu. Secondary level menu inilah yang sebenarnya menampilkan fungsi-fungsi yang ditawarkan oleh klikBCA.

Fungsi-fungsi utama yang bisa dilakukan di klikBCA antara lain:

  • Melakukan pembayaran berbagai macam tagihan (listrik, internet, asuransi, air, telepon, dll)
  • Melakukan pembelian (tiket pesawat, voucher telepon genggam, dll)
  • Transfer uang ke rekening lain
  • Pengecekan berbagai macam informasi seperti informasi rekening, kartu kredit, utang consumer, dan riwayat/status transaksi

Tidak ada third level menu dari website ini. Main panel adalah tempat user melakukan tugas-tugas (tasks) di website ini. Setiap kali user mengklik secondary level menu, main panel akan memberikan tampilan yang berbeda, sesuai dengan menu yang dipilih.

C. Why is It Poorly Designed?

Mendesain website untuk layanan perbankan online bukanlah perkara mudah. Saya tidak mempunyai pengharapan terlalu tinggi bahwa klikBCA seharusnya sebagus layanan perbankan online milik JP Morgan Chase Bank yang mempunyai usability lab tersendiri.  Namun setidaknya bank terbesar ketiga di Indonesia seharusnya tidak mengeluarkan produk yang membuat nasabahnya merasa baru saja keluar dari mesin waktu.

Berikut adalah beberapa poin penting mengapa saya menjatuhkan verdict bahwa BCA telah sangat lalai dengan produknya ini:

1. Poor Form Design

Ini salah satu kesalahan paling fatal dari klikBCA. Roughly 90% dari klikBCA ini berisi form. Ketika form didesain secara asal-asalan, maka akan ada banyak pengguna frustrasi seperti saya karena kegiatan utama di klikBCA memang adalah mengisi form. Beberapa poin dibawah ini hanyalah beberapa poin mengapa saya mengatakan bahwa desain form di kilkBCA sangatlah asal-asalan.

  • Desain layout form yang berantakan

Form

Tipikal form di atas jamak ditemui dalam klikBCA : warna background yang berselang-seling untuk setiap baris dan left aligned labels. Dua hal itu menurut saya sangat problematik. Warna background yang berselang-seling jelas menambah noise yang tidak perlu. Beberapa kerugian left aligned labels adalah tidak jelasnya hubungan antara label dan input field. Hal ini akan menyebabkan waktu pengisian yang menjadi semakin lama. Mata pengguna harus terus berpindah-pindah dari kanan (untuk melihat label) ke kiri (untuk melihat input field), kemudian baru pengguna membuat asosiasi di antara keduanya. Sangat melelahkan. Right aligned labels ataupun top aligned labels menurut saya pilihan yang lebih cocok untuk layanan perbankan seperti klik bca ini (this is debatable of course! Read his book.). Bandingkan dengan form transfer antar bank di portal Bank of America yang menggunakan background putih dan right aligned labels dibawah ini. Anda pasti setuju bahwa form milik BOA jauh lebih bersahabat untuk mata kita.

make transfer BoA

  • Layout yang menipu

Ada banyak layout form yang “menipu” di website klikBCa. Sebagai contoh kasus, saya akan menggunakan contoh form transfer uang klikBCA di atas. Di halaman itu ada dua baris yang sebenarnya bukan merupakan input form yaitu  di baris “Masukkan 8 angka ini pada KeyBCA” dan “Pastikan 6 angka terakhir sesuai dengan nomer rekening tujuan Anda”. Kedua hal ini sebenarnya adalah teks informasi bukan label ataupun input form. Nothing that users can do with these texts but the perception sent is different.  Terutama pada baris “Masukkan 8 angka ini pada KeyBCA”, desain baris ini sama persis dengan desain label-input form sehingga pengguna akan dengan mudah terkecoh mengira bahwa mereka harus melakukan pengisian tertentu pada baris ini. Layout kedua baris ini seharusnya dibedakan dengan layout label-input form dengan menggunakan indentation misalnya.

  • Minim bantuan

Pengisian form bukanlah sesuatu hal yang mudah bagi kebanyakan orang. I don’t know about you but I don’t like filing in forms. It should be a mandatory to create such a design that can minimize the pain. Bantuan dalam mengisi form bisa terdiri dari bermacam-macam bentuk seperti :

  1. Tanda * untuk menunjukkan field yang harus diisi
  2. Panjang input field sebagai affordance
  3. Path to completion status untuk indikasi progress.
  4. Inline validation
  5. Tautan bantuan untuk hal-hal yang bisa membingungkan pengguna (help or information link)

Opsi-opsi bantuan diatas adalah best practice dalam mendesain form namun sayangnya hampir sangat jarang saya temukan di website klikBCA. Padahal klikBCA menangani task yang cukup rumit. Hal yang sederhana seperti keterangan tambahan sesungguhnya sangat membantu, tidak perlu membuat inline validation yang canggih. Seperti ketika saya akan melakukan transfer ke rekening bank non-BCA untuk pertama kalinya, saya menemui selection form dibawah ini.

no guidance, acronim

Berani taruhan bahwa 90% pengguna pertama website klikBCA pasti akan kebingungan tentang pilihan ini. Penggunaan akronim sendiri sudah sangat bermasalah, ditambah lagi tidak ada keterangan sama sekali tentang spesies apa kedua binatang ini.

  • Pengelompokan yang ngawur

Pengelompokan dalam form membantu pengguna untuk melakukan scanning secara cepat tentang informasi apa saja yang perlu diisi. Selain itu pengelompokan juga membantu pengguna untuk memahami relasi antar form. Sayangnya fitur ini sering digunakan secara ngawur oleh klikBCA. Contoh dibawah ini misalnya.

Bad grouping

Dengan pengelompokkan diatas ada dua hal yang bisa saya tangkap:

  1. Jenis Transaksi dan Status Transaksi adalah satu kelompok. Sedangkan periode transaksi adalah kelompok yang lain.
  2.  Input field tanggal (“dari 07 desember 2013 sampai 07 desember 2013”) adalah milik pilihan “per tanggal transaksi dijalankan” karena posisinya yang dibawah pilihan tersebut. Ketika saya memilih pilihan “per tanggal transaksi dibuat”, saya tidak perlu mengisi input field tanggal.

 Kedua hal diatas tentu saja salah. Baik jenis transaksi, status transaksi, dan periode transaksi adalah satu kelompok yang sama. Input field tanggal juga tetap harus diisi untuk pilian periode transaksi manapun. Pengelompokkan yang ngawurlah yang menyebabkan mispersepsi ini.

  • Pemilihan jenis input form yang tidak tepat

Beberapa kali saya melihat pemilihan input form yang salah. Ketika checkbox lebih baik dipakai, malah radio button yang dipakai. Ketika radio button yang harusnya dipakai malah multiple selection dropdown menu yang dipakai. Contoh dibawah menunjukkan ketika text area lebih cocok dipakai, tetapi malah dua baris input text form yang dipakai. Hasilnya tentu saya seperti melihat itik buruk rupa.

text form

2. Poor Color Choices

Saya catat ada tujuh warna yang berbeda untuk teks yang digunakan di klikbca. Mulai dari putih, merah, biru, hitam, orange, kuning, dan hijau. Penggunaan warna yang berbeda-beda untuk teks adalah hal yan sah-sah saja, asalkan setiap pemberian warna yang berbeda mempunyai alasan yang kuat seperti misalnya warna merah lazim dipilih untuk memberikan peringatan. Ironisnya, klikBCA menggunakan warna yang berbeda tanpa tujuan yang jelas. Tujuh warna teks yang berbeda-beda tentulah tidak lazim. Kampungan mungkin merupakan kata yang cocok untuk mendeskripsikan kondisi ini.  Sebagai perbandingan Bank of America hanya menggunakan tiga warna (hitam, merah, dan putih) untuk teks di portal perbankannya dan Facebook pun melakukan hal yang sama: 3 warna saja (biru, putih, dan abu-abu). Coba perhatikan login page dari klik BCA dibawah ini, enam warna teks yang berbeda dipakai di dalam satu halaman. Saya jadi teringat ketika di tahun 2005 saya membuat website pertama saya dikelas pemrograman web di ITB. Waktu itu saya ingin menggunakan berbagai macam warna karena terlalu bersemangat. Mungkin designer klikBCA juga sedang dalam kondisi tantrum dan high ketika mengetahui bahwa dengan kode heksadesimal kita bisa mengganti-ganti warna sebuah teks di website.

6 colors

3. Plentiful use of CAPITAL LETTERS and red color text

Saya berasa seperti murid yang sedang dimarahi secara terus menerus oleh seorang guru galak ketika menggunakan klikBCA. Huruf besar digunakan dimana-mana tanpa maksud yang jelas. Rasio penggunaan huruf besar jelas lebih banyak dari huruf kecil. Kesalahan yang sangat fatal. Selain itu warna merah yang identik dengan tema peringatan dan kesalahan juga tersebar dimana-mana. Di beberapa kesampatan saya juga mendapatkan teks konfirmasi dengan warna merah (i.e: “Proses transaksi sudah berhasil”). Dalam kasus ini konfirmasi jelas seharusnya tidak menggunakan warna merah.

Label dengan huruf kapital dan teks dengan warna merah seperti form dibawah hampir bisa ditemukan di SEMUA halaman klikBCA (Can you feel that I am little bit annoyed when I am using the upper case text for the word “SEMUA”? That is what I meant). Mungkin gaji engineer di BCA dibawah standar pasar sehingga engineer mereka perlu melampiaskan kemarahannya pada para nasabah. :p

Upper case+ text

4. Not Intuitive Information Architecture

Saya masih teringat ketika pertama kali menggunakan website klikBCA, saya membutuhkan waktu yang tidak singkat hanya untuk meraba-raba menu mana yang harus saya pilih untuk melihat saldo tabungan saya. Ini adalah salah satu contoh akibat dari arsitektur informasi  yang tidak intuitif. Pengguna tidak bisa dengan cepat belajar “berjalan-jalan” di dalam website ini.

Ada 13 menu di navigasi level pertama di KlikBCA. Sebagiannya sangat tidak masuk akal. Misalkan, dengan hanya melakukan scanning pada menu utama tersebut, apakah pengguna bisa menebak apakah perbedaan dari pembayaran dan pembayaran e-commerce? Apakah perbedaan dari status transaksi dan histori transaksi?  I don’t think so.

Bandingkan first level navigation klikBCA dan Bank of America di bawah ini. Sekali lagi BOA menang telak dengan enam pilihan menu utamanya. Saya mungkin bias, tapi menurut saya butuh PhD dibidang ilmu perpustakaan untuk membaca sandi navigasi klikBCA.

left menuIA BoA

5. Bugs

Ya, masih ada bugs di situs klikBCA. Dari beberapa bug, dibawah ini adalah salah satu contohnya. Coba perhatikan screenshot dibawah ini. Apakah ada sesuatu yang menarik perhatian Anda?

bug

Bug yang saya maksud adalah tidak ada relasinya antara menu navigasi di bagian kiri (“Transfer Dana”) dan isi dari panel utama (“Pembelian Tiket”). Bug ini dikarenakan ketika pengguna menklik “kembali ke menu utama” dan memilih first level menu navigation, panel utama akan freeze dan tidak berubah sampai pengguna menklik salah satu second level menu navigation. Bug lainnya seperti tidak ada informasi mengenai session time out, selection dependent input yang tidak berfungsi di perangkat mobile, dll. Tampaknya BCA masih perlu memesan baygon di alfamart terdekat.

6. Grammatical Errors

Sekali lagi, untuk perusahaan sekelas BCA hal ini sangat memalukan menurut saya. Berikut adalah beberapa contoh grammar mistakes yang saya temukan

grammar error

Selain itu penempatan pilihan pengaturan bahasa dalam klikbca juga sangat menggelikan sebenarnya. Untuk mengganti pengaturan bahasa dari Inggris ke Indonesia ataupun sebaliknya, pengguna harus memilih menu “administrasi” kemudian second level menu “ubah bahasa”. Let say I am a foreign user who does not understand Bahasa Indonesia therefore I want to change the language setting to English. How on earth I can navigate through all of those menu in Bahasa and choose “ubah bahasa”? There is a reason why language setting is usually put in the global navigation. It is always not a good idea to reinvent the wheel.

7. Not Allowing for Reversals of Actions

I will treat you a nice coffee crab if you are the first person who can find any back button in the site (expect the “back to main menu” link). Jumlah tombol “back” di website klikBCA ini sama banyaknya dengan jumlah spesies burung Dodo di dunia ini.

8. Annoying Moving Objects

Hal ini tidak terlalu krusial sebenarnya tapi cukup menjengkalkan untuk saya. Riset membuktikan bahwa manusia paling mudah teralihkan perhatiannya dengan gerakan (read it here). Karena itulah pop-up advertising sangatlah mengganggu bagi sebagian orang namun sangat menjanjikan bagi para advertisers. KlikBCA sekali lagi membuat saya terheran-heran dengan pilihan desainnya. Text marquee di landing page (http://www.klikbca.com/) masih kalah epic-nya dengan hal berikut ini: entah karena angin apa, ada sebuah bola dunia kecil di logo KlikBCA di setiap kiri atas layar dan yang menakjubkannya bola dunia kecil ini terus berputar bak baling-baling bambunya doraemon.

annoy2

9. Crappy look and feel

As I said before, this website does not belong to this digital age anymore. The look and feel is so crappy. Bahkan size website ini dibuat statis dan hanya memenuhi sepertiga dari browser laptop saya. Tampilan super kaku ini mengingatkan saya akan Uni Soviet sehingga jika diminta untuk memberi nama tema website ini akan saya namakan sebagai: Chernobyl disaster.  This website indeed does belong to the era of when young Rhoma Irama still grew his chest hair.

crappy

D. Why does BCA need to care?

Sungguh memalukan karena untuk bank sekelas Bank Central Asia, yang katanya merupakan bank swasta terbaik di Indonesia, bisa mengeluarkan produk seperti klikbca ini. Padahal layanan perbankan online merupakan hal yang sangat penting di masa digital sekarang ini. Setidaknya ada 3 hal yang saya pikir adalah sebuah keuntungan besar untuk bank yang bisa menyediakan layanan perbankan online yang baik.

1. Cost saving

Semua hal yang dilakukan nasabah di kantor cabang bank ataupun melalui ATM dapat dilakukan secara online. Dengan layanan perbankan online, biaya pelayanan per nasabah akan turun secara drastis. Memang ada biaya untuk produksi layanan, maintenance, dan gaji untuk administrator. Tapi saya yakin biaya ini jauh dibawah harga operasi kantor bank fisik. Dengan semakin banyak nasabah yang menggunakan layanan online maka bank akan semakin banyak melakukan penghematan biaya pelayanan per nasabah.

2. Attract more customers

Di era digital ini, layanan online sudah bukan merupakan kemewahan ataupun fitur tambahan lagi. Layanan online adalah layanan primer yang seharusnya menjadi perhatian serius bank. Denga mewabawahnya jejaring social, pengalaman yang memuasakan ataupun mengecewakan dalam menggunakan sebuah produk akan sangat mudah terbesar. Sebuah riset berpendapat bahwa 40% orang akan membagikan pengalaman buruk mereka pada orang lain1 (tepat seperti apa yang sedang saya lakukan sekarang). Sebaliknya saya yakin bahwa jika sebuah bank bisa memberikan layanan perbankan yang memuaskan, bank tersebut bisa menarik lebih banyak nasabah.

3. Data is king!

Facebook dan Google terbukti sangat berguna bagi banyak orang. Namun tidak bisa dipungkiri bahwa kedua raksasa perusahaan teknologi ini juga menggunakan data penggunanya untuk kepentingan komersialnya. Begitu juga dengan layanan perbankan, banyak sekali data yang bisa ditambang jika makin banyak nasabah yang menggunakn layanan perbankan online. Data ini nantinya bisa menjadi tambang emas bagi pihak bank.

Namun sayangnya jika melihat dari klikBCA, tampaknya pihak eksekutif BCA tidak terlalu peduli dengan keuntungan-keuntungan diatas. Hasilnya adalah sebuah produk digital yang acak-acakan seperti Frankenstein pemarah dari Chernobyl.

6vib

Frustrated user = me

1. Work, S. (2011, April 28). How Loading Time Affects Your Bottom Line. Retrieved February 20, 2012

10 thoughts on “Klik BCA: A Grumpy Frankenstein from Chernobyl

  1. Gileeee Yoel, keren deh ini. Aku juga pengguna klikBCA, kesel jg sm webnya, tp kalo disuruh ngomentarin mah ga mungkin bisa sepanjang ini :)) mungkin yg desain webnya mikirnya usernya kyk teller bank yg paham n udah biasa ngisi2 form kyk gt. Yoel, sharing2 info buku/website/bacaan bagus ttg UI/UX donk, pingin belajar euy😀

  2. Hahaaa..mantap review-nya..
    Saya juga pengguna klikBCA yang frustasi, dan rasanya hampir semua internet banking nggak ada yang oke, Bank Mandiri & BRI juga sama saja..

    So far, pengalaman pake i-banking-nya ANZ dan ING, di Indonesia belum ada yang bisa menandingi..

  3. Indeed. Bank-bank besar di Indonesia rata2 masih ‘gagap’ dan lamban dalam implementasi teknologi yang mengikuti perkembangan jaman; mainly karena alasan ini: setiap gerak-gerik mereka selalu diaudit dan diawasi oleh Bank Indonesia, dan percayalah, birokrasi antar departemen satu dengan lainnya itu sangat-sangat berlapis dan susah dibuat praktis.

    Jadi emang nggak gampang buat mereka untuk redesign sesuatu, karena usernya ratusan juta jadi setiap action yang mereka ambil harus dieskalasi & dapet approval sana-sini dulu yang bisa2 butuh 3-5 tahun mungkin :p

    Semoga curhatan user yang frustasi seperti ini bakal bisa mendorong mereka untuk bergegas ambil aksi. Good luck Yoel, good luck all of us!

    • Iya bener me. Walau menurut gw ngeganti huruf besar jd huruf kecil, ngubah warna hijau jadi hitam, ngehilangin moving logo, etc harusnya ga perlu nunggu approval sana sini sampai 3-5 tahun. hehe. Hal2 yang gw complain banyak yang sederhana I think, ga sampai minta nambah atau mengurangi fitur.

  4. Misi bang, mau komen dikit. Kebetulan dulu pernah kerja di salah satu software company yang emang klien nya sebagian besar bank. Rata2 bank ini apps nya ga bikin sendiri. Jd mereka bikin tender. Dan yg menang tender yg ngerjain apps nya. Dari pihak bank mereka kasih tech specs yg selanjutnya di eksekusi ama s/w company ybs. Parahnya adalah kalau di company tsb lebih fokus ke sistem nya dan krg peduli ama desain nya. Jadi deh model beginian :)))

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