Mencermati UI/UX Kompasiana Versi Mobile

*Tulisan ini saya sunting sebagian dan menjadi berkurang sedikit, karena beberapa waktu setelah saya menulis status di Facebook sebagai tes ombak kemudian Kompasiana melakukan sedikit pengubahan pada tampilan. Yang sedikit saya tau, ada di bagian menu scroll atas yang berisi menu terbaru dan penyempitan tinggi boks berisi judul dan artikel*

Seingat saya, beberapa tahun sejak saya bergabung Kompasiana bertransformasi ke arah 'ramah ponsel' seiring merebaknya pengguna ponsel pintar dan semakin murahnya kuota internet (meski tidak murah banget) untuk segala macam kebutuhan termasuk jual beli. Hal ini pertama kalisepengetahuan sayamendapat perhatian dari Kompasianer Hilman Fajrian yang juga merupakan pendiri lembaga kursus online Arkademi. Jadi Kompasiana disarankan untuk mengubah tampilan tadi supaya menjangkau lebih banyak pengguna ponsel.

Namun yang membuat saya masih gatal dan merasa ada yang aneh dari tampilan FrontPage (Halaman depan jika kita mengetik kompasiana.com via Address Bar pada browser) dari tampilan antar-muka Kompasiana dibanding media online lainnya adalah penggunaan ruang. Ini mungkin tak terlalu terasa bagi pengguna browser PC/laptop/netbook l. Salah satunya yakni terlalu jauhnya margin antar boks maupun margin di dalam boks yang berisi judul artikel. Apalagi dihiasi gambar yang besar. Seberapa penting sih peran gambar pada boks daftar artikel pilihan Admin tersebut? Apakah mau menyaingi media sosial?

Dengan populasi hingga 500ribu akun lebih (beberapa tinggal nama dan tinggal tulisan), mungkin Kompasiana bisa digolongkan sebagai media sosial juga meski berbeda tujuan apalagi dilengkapi komentar, penilaian (reaksi pembaca) dan juga halaman pesan atau messaging. Namun bagaimanapun Kompasiana berusaha menjangkau ke arah sana, imej Kompasiana tetap blog keroyokan untuk semua orang. Karena Kompasiana adalah wadah tulisan artikel dan sesekali berita, maka fungsi gambar tadi selain 'hanya pemanis' mungkin juga adalah sebagai alternatif pendukung, atau ilustrasi tulisan. Dan seringnya bukan merupakan bagian utama pada sebuah artikel. Bahkan tulisan akan ditolak jika jumlah kata terhitung kurang dari batas minimal. Berbeda dengan media sosial dimana postingan dapat berupa MEME atau foto selfie atau lainnya (foto berita), maka kadang peran sebuah gambar dan foto di sana pun akan berbeda.

Kembali ke boks dan gambar tadi. Menurut saya satu boks tautan dengan gambar (dan ukuran font) sebesar itu tidak efektif, karena terkesan setengah-setengah. Kompasiana ingin dapat diakses via ponsel tapi kurang menjembatani kebutuhan para pembaca yang sekaligus pengguna ponsel. Akhirnya, karena aksesibilitas dan navigasi pengguna terbatas maka keterbacaan pun bisa berkurang. Lalu diakali dengan sistem paging pada tiap artikel. Namun teknik paging ini pun sebagian akan lenyap manakala ada tautan artikel yang dibagikan di medsos dan diklik via aplikasi medsos tadi. Setelah selesai baca, mereka pun akan kembali ke aplikasi medsos tadi. Menambah bounce rate lagi akhirnya.

Meskipun saat artikel ini ditulis dalam bentuk draft telah ada perubahan pada tinggi boks artikel, saya masih merasa boks itu masih terlalu besar. Meski, saya tidak dapat berbuat banyak karena segala keputusan ada di tangan petinggi Kompasiana. Saya hanya berpikir dari sudut pandang saya. Tapi Baiklah kita bandingkan pada 2 media online berikut sebagai referensi. Satunya merupakan induk Kompasiana, satunya lagi merupakan saudara Kompasiana karena mempunyai founder/pendiri yang sama. Satunya lagi saya ambil dari banner iklan yang muncul di sebuah situs dan tampilan antar-muka situs microblog tumblr dimana saya masih menyimpan akun di sanayang beberapa waktu lalu terblokir kominfo sehingga saya tak bisa mengaksesnya via browser umum.

Tampilan media sosial tumblr pada kategori populer, dan banner iklan yang memajang banyak judul dalam satu boks. Sumber: screenshot

Tampilan tautan judul artikel pada Kompas dan Pepnews. Bandingkan: dalam satu tangkapan layar ponsel, Kompasiana hanya ada 2 judul. Sumber: screenshot

*) Saya tidak bisa menambahkan keterangan pada caption gambar berikut disebabkan lebih 150 karakter: Saran saya, kurangilah keterangan di bagian bawah banner reward. Selain tidak terlalu penting dan memakan ruang, Kompasianer yang sudah dari sananya ngileran dan terkadang freebies akut sudah pasti akan meng-klik tombol 'selengkapnya' atau banner atau judul boks tersebut demi melihat detail artikel tanpa terlalu peduli dengan keterangannya.  

Dan saya lebih berharap daftar artikel pilihan Kompasiana juga berbentuk seperti di atas itu, jadi ada beberapa artikel dalam satu tangkapan layar bukan seperti gambar terakhir pada artikel ini. Banner iklan di atas tadi juga lebih efektif karena menjual banyak judul dalam sekali tayang untuk menjaring pembaca dengan minat berbeda. 

Scrollable shortcut di atas (header) ini muncul saat artikel masih berbentuk draft. Sumber: screenshot

Lalu?

Mungkin saya pikir lebih baik juga jika Kompasiana mempunyai daftar artikelnya seperti itu. Supaya dalam satu tangkapan layar, setidaknya ada minimal 4 judul artikel yang tampak. Pengguna pun dapat memilih artikel mana yang ingin dibacanya terlebih dahulu, tidak banyak scrolling, dan daftar artikel dapat dibuat lebih banyak.

Efektivitas layout media ini mungkin bisa dianalogikan jika kita berdagang dan mempunyai etalase besar berisi banyak barang. Pengunjung dapat langsung menunjuk satu atau beberapa barang yang diingini. Apa yang terlihat adalah apa yang sedang dijual dan akan Anda dapatkan. Ini akan menghemat waktu pengunjung dan calon pengunjung selain Kompasianer KETIMBANG kita hanya mempunyai satu etalase kecil, lalu harus tanya: Mbak ini barangnya ada? "Oh habis bu pas saya lihat di stok komputer". Tanya lagi habis lagi. Tanya ketiga baru barangnya ada. Pengunjung harus banyak bertanya disebabkan etalasenya tidak mampu memajang banyak. Hal ini mungkin berpotensi membuat pengunjung yang berpikir tak punya waktu banyak akan malas berkunjung lagi. Cukup pertama kali saja pengalamannya. Kita hanya berharap pengunjung tadi lupa dan berkunjung lagi. Padahal sejatinya tujuan kita adalah hanya ingin membuat pengunjung tadi kerasan dengan mengklik apa yang dilihatnya serta berbagai judul yang mudah diakses dan menyempatkan waktu untuk datang lain kali. Sekali lagi, karena sasaran Kompasiana adalah mereka yang menyukai kegiatan membaca.

Dan etalase yang luas ini ada pada tampilan antar-muka Kompasiana di masa lalu. Namun kita tentu tidak ingin kembali ke masa lalu apalagi jika berbeda sistem. Tetapi apa salahnya mengambil satu hal yang baik di masa lalu untuk diterapkan di masa kini.

Saya juga menduga kemungkinan Kompasiana yang membuat tampilan 'clean' seperti sekarang ini disebabkan karena mengurangi distraksi pembaca. Tak hanya Kompasiana, beberapa media lain juga menerapkan hal serupa. Seperti contohnya Blogspot template baru, miniblog Medium, Tirto dot id (namun dia banyak membuat iklan berupa advertorial), Pepnews tadi dan beberapa lainnya. Hanya, alasan distraksi ini pun kemudian tidak begitu valid dengan adanya iklan yang bejibun banyaknya. Ada banyak iklan yang begitu mudah terlihat, namun artikel yang menjadi fokus Kompasiana malah tenggelam dan membutuhkan waktu dan beberapa klik untuk diakses. Jadi saya pikir, Kompasiana mungkin sebaiknya menampakkan 'apa yang dijualnya' tadi dalam bentuk menu dan tautan yang sederhana.

Tentang iklan tadi memang diperlukan untuk menghidupi media manapun; bahkan dari iklan pula sebuah stasiun TV dapat membangun gedungnya sendiri dengan megah disamping membayari para pekerja seni dan lainnya. Tapi penataan layout yang baik juga dapat menjaring banyak pembaca supaya Kompasiana sendiri mendulang banyak klik dalam satu waktu, bukan hanya didatangi bouncing visitor ( pembaca yang datang ke situs berdasarkan tautan lain seperti media sosial) lalu hengkang dari situs setelah selesai membaca tanpa berselancar lebih lanjut. 

Kompasiana berharap bounce rate rendah dengan teknik paging per-artikel, namun kurang melihat kebutuhan pengguna dalam melihat banyak artikel sekaligus dalam satu tangkapan layar ponsel. Untuk mudahnya semisal kita diberi waktu lima menit, berapa klik yang diperlukan untuk mencapai 2 artikel yang ingin kita baca dengan mengakses menu 'tiga strip' di pojok dan lewat boks artikel yang besar? Berapa lama pula yang dibutuhkan untuk membacanya? Bejibunnya tautan artikel mungkin tidak akan mengurangi kemampuan iklan tadi untuk terlihat dan diperhatikan oleh pengguna sekaligus pembaca. Akhirnya, menjadi tantangan tersendiri bagi pemateri dan penataan visual banner iklan tadi pun dapat menjadi PR bagi copywriter/desainer grafis perusahaan pemasang masing-masing.

Tapi ketimbang berpanjang lebar lagi, beginilah beberapa solusi yang saya tawarkan:

Boks/margin boks yang terlalu besar. Saya membayangkan aksesnya akan cepat dan mudah jika scrollable menu/submenunya dibuat begini. Sumber: editing

Saran: ombol 'nulis' dipindah ke atas dan menu tiga strip dipindah kiri. Sedangkan letak shortcut Event, Populer dsb ada di kanan. Sumber: editing

Bagaimana ikon tanda strip di pojok kiri tersebut?

Mungkin ada 2 opsi:

• Diisi dengan hal prinsip di Kompasiana semacam EULA alias S&K, Pedoman Menulis, About Us, Kontak yang bisa dihubungi dan lain-lain seputar internal dan teknis Kompasiana, jadi menghilangkan footer.
• Diisi dengan kategori dan apa yang ada sekarang menghindari error atau mereka yang masih terbiasa menggunakan tiga strip tadi untuk mengakses kategori sembari melakukan polling bagaimana yang lebih nyaman buat pembaca.

Saya pikir, Kompasiana juga butuh pengunjung dan viewer yang banyak untuk mendulang iklan. Darimana kita tau kuantitas pengunjung? Dari situs statistik lah. Bahkan situs statistik yang tidak terhubung dengan Kompasiana juga akan dapat menilai seberapa padat pengunjung Kompasiana. Dan mungkin juga CMS Kompas dan Kompasiana mempunyai tool internal untuk memantaunya. Hal memantau semacam ini pun merupakan bagian dari pekerjaan saya sebelumnya. Saya berpikir begini: Jika ingin banyak pengunjung, perbanyaklah tautan artikel dan artikel akan tampil banyak jika kita dapat melihat etalase halaman depan dan halaman utama perkategori dengan lebih baik. Kompas dot com mungkin punya tautan 'Baca Juga' di tengah-tengah artikel; namun Kompasiana dengan berbagai tulisan pribadi tidak dapat demikian. Paling-paling hanya ada 'konten terkait' yang ada di bawah setiap naskah. Namun ia pun tak dapat menjaring banyak judul artikel (bandingkan dengan gambar terakhir artikel ini yang berisi tautan 'artikel terkait' lebih banyak).

Mungkin, artikel terkait ini bisa dibuat bersusun macam pergantian baris (bukan scrolling kanan di bawah akhir artikel seperti sekarang) dengan daftar berjumlah enam hingga sepuluh buah. Sederhana tidak masalah, asal punya aksesibilitas dan keterbacaan tinggi.

pilihan artikel terkait yang lebih banyak pada Kompas dot com dan ukuran boks tautan Kompasiana yang terlalu lebar. sumber: screenshot

Ps. Artikel ini membutuhkan feedback dan masukan seperti tujuan artikel ini yang memberi masukan ke Kompasiana.