Hari ini saya mengikuti sebuah training yang diadakan oleh Google. Judul materinya Building for Billions dan pematerinya adalah Ankur Kotwal, Google Developer Advocat untuk APAC. Sebenernya saya ingin membahas resume dari acara tadi, tapi nunggu presentation deck-nya saya dapatkan dulu biar tidak ada materi yang terlewat. Jadi yang akan saya bahas saat ini adalah satu materi yang menurut saya menarik, sangat teknikal tapi juga terkait dengan sisi UX.

Kadang saya bertanya, seorang UX yang baik, sebaiknya berlatar belakang disiplin ilmu apa yah? Apakah programmer? designer? Atau mungkin human psychology? Karena ketika bicara UX, banyak aspek sisi manusia yang kita hubungkan dengan komputer. Tren yang ada sekarang, UX designer selalu disandingkan dengan UI designer. Tapi untuk topik yang satu ini, terlihat bahwa seorang programmer harus memiliki mindset UX yang bagus juga untuk bisa menghasilkan aplikasi berkualitas.

baca juga : Menilai Aplikasi Berdasarkan User Experience

Topik ini sebenernya hal yang saya yakin tidak banyak user yang sadar, tapi ini tanpa terasa memberikan experience menggunakan aplikasi yang baik. Clue-nya, kalau kamu menggunakan Instagram, kamu akan menemukan ada fitur yang dibenamkan Instagram yang tidak kita isadari itu ada. Ada yang bisa nebak? hehehe

Kali ini saya belajar tentang teknik untuk mengoptimasi gambar, terutama untuk negara-negara dengan konektivitas terbatas (kayak Indonesia). Proses upload atau download gambar dari server ke smartphone kita tentu sering menjadi masalah kalau kita lagi dapat sinyal yang jelek. Apalagi klo konten yang kita nikmati itu berupa video, tentu lebih berat lagi :p

Format Gambar

Nah salah satu poin besar yang dibahas pada sesi training kali ini adalah tentang gambar. Dan walaupun sesi pembahasannya sangat teknikal, saya melihatnya dari sudut pandang UX-nya yang menarik. Salah satu poin menarik adalah pemilihan format gambar. Ini saya belum pernah nyoba, jadi belum bisa mengklarifikasi apakah benar atau tidak, disebut bahwa format gambar yang biasa kita gunakan (JPEG dan PNG) bukanlah format gambar terbaik. Google memiliki format gambar yang jauh lebih kecil dan ringan yang bisa digunakan (terutama di ekosistem Google) yang bernama WebP. Mungkin kamu juga baru denger yah, sama, saya juga :p Katanya dengan menggunakan WebP, bisa mengurangi ukuran gambar kita sampai 60-70%.

Kenapa kita gunakan ukuran gambar yang kecil? Ukuran kecil artinya di mata user, gambar lebih cepat muncul di layar dan data yang digunakan juga lebih kecil (jadinya lebih gak boros paket data). Kalau imagenya ukurannya sangat besar, yang ada user kita sibuk refresh2 nungguin gambarnya, terus kesel, dan uninstall app kita :p Tapi sekali lagi, saya belum pernah coba2 WebP jadi masih gak tau apakah klaim tersebut benar? Kalau benar, apakah bisa di semua perangkat atau software yang bukan Google Ecosystem?

baca juga : Antara Konten dan User Experience

Blurry Effect

Lalu poin berikutnya yang menurut saya menarik adalah terkait fitur yang saya sebut di atas diimplementasikan di Instagram. Dulu ketika loading foto, placeholder fotonya warna putih dengan ada opsi tap to refresh. Kalau sekarang, alih-alih placeholder putih kosong, sudah ada gambar yang muncul, berupa bayang-bayang yang agak blurry yang merupakan represntasi dari gambar yang akan muncul. Teknik ini juga digunakan di Medium, salah satu blogging platform.

Momen ketika kita menunggu gambar penuhnya muncul, kita disajikan dengan sedikit cuplikan konten apa yang kita lihat. Kalau koneksi kita bagus, momen ini terjadi sangat cepat. Tapi kita tetap menyadari bahwa halaman yang kita buka sudah terisi semua kontennya yang tanpa kita rasakan memberikan perasaan lebih puas dibandingkan hanya kotak putih saja. Fitur blurry ini juga bisa kamu gunakan dengan memanfaatkan teknologi Pallete dari Google. Google akan menghadirkan beberapa warna utama dan warna sekunder dari (calon) gambar yang akan diupload terlebih dahulu agar placeholder kita tidak kosong. Warna yang akan ditampilkan merupakan representatif dari gambar sesungguhnya yang akan muncul.

baca juga : Lima Elemen Dari User Experience Design

Cache Content

Kalau ini mungkin sudah lumrah yah. Konten-konten gambar yang sudah pernah didownload, tidak perlu kita download lagi. Misal news feed facebook untuk hari ini tadi pagi sudah kita download, pas kita buka siangnya tidak perlu download lagi, tinggal ditampilkan. Lalu kita bisa hapus cache ini kalau sudah dalam tempo waktu tertentu tidak kita gunakan lagi. Atau profile picture, ini kan hitungannya bakal jarang banget diganti dan sering ditampilkan, bisa juga ditaro di-cache. Tujuannya sama, agar pas user buka apps, gak kosong gitu aja tapi sudah ada kontennya. Mending terisi konten lama daripada kosong tidak ada konten.

Dan satu lagi trik yang bisa kamu lakukan agar layar tidak kosong adalah dengan menarik teks lebih dulu sebelum menarik gambar. Jadi kalau kamu bikin situs berita, biarkan tulisannya muncul dulu baru nanti gambarnya belakangan. Sama kayak Facebook dan Instagram, mereka menampilkan teks dari news feed dan timeline terlebih dahulu baru gambarnya.

baca juga : Lebih Memperhatikan User Experience

---

Ini sekilas pembahasan tentang image untuk meningkatkan user experience dari aplikasi yang kita kembangkan. Nanti materi lebih lengkapnya akan saya share di tulisan tentang resume training hari ini yah (nunggu deck nya juga). Ini mumpung topik yang dibahas menarik dan terngiang-ngiang di kepala, jadi saya tulis duluan aja hari ini :p

Jadi kalau balik ke pertanyaan seorang UX designer itu perlu latar belakang pendidikan apa sih? Menurut saya perlu knowledge yang cukup tentang teknologi, art, dan sosial sih untuk bisa menjadi seorang UX designer yang oke. Karena kalau kita bicara human computer interaction, kan kita bicara human (sosial), komputer (technical), dan interaction (interface).