Selama bulan Ramadan kemarin aku belajar banyak hal tentang desain. Salah satunya adalah belajar tentang mobile-first responsive design. Ya, aku adalah tipe orang yang gemar belajar hal-hal baru.
Pada umumnya, sebagian dari web designers dan klien-kliennya cenderung lebih mengutamakan merancang website berbasis desktop dulu, sedangkan mobile adalah tujuan sekunder. Dan perlu saya tekankan jika tidak ada yang salah tentang hal itu, karena tentu saja mereka memiliki padangan berbeda dan pertimbangan-pertimbangan lainnya.
Pengguna Internet Di Indonesia
Namun setelah saya membaca beberapa artikel tentang pengguna internet di Indonesia dan dunia, akhirnya saya memiliki pendapat yang mungkin berbeda dengan pendapat sampeyan.
Jika saya membaca laporan dari APJII, pada 2014 jumlah pengguna internet di Indonesia ada sekitar 88,1 juta pengguna. Namun jika saya membaca artikel di website Kominfo (Kementerian Komunikasi dan Informatika), jumlah pengguna internet di Indonesia pada 2014 mencapai 82 juta pengguna.
Dan menurut artikel lainnya di website Kominfo, pada 2016 jumlah pengguna internet di Indonesia mencapai 102,8 juta pengguna.
Dari seluruh pengguna internet itu, menurut hasil penelitian dari APJII ada 85% pengguna yang mengakses internet menggunakan perangkat telepon seluler, atau yang lebih kita kenal sebagai smartphone atau handphone.
Apabila saya mengacu pada data dari laporan APJII, maka jumlah pengguna yang mengakses internet menggunakan perangkat telepon seluler pada 2014 ada sekitar 77,8 juta pengguna.
Sedangkan jumlah pengguna internet didunia, yang mengakses internet menggunakan perangkat telepon seluler, menurut artikel yang saya baca di website Code My Views ada sekitar 1,2 miliar pengguna.
Fokus Pada Pengalaman Pengguna
Menurut sebagian besar orang yang saya kenal, mereka merasa sangat jengkel jika website yang mereka akses melalui perangkat telepon seluler sangat tidak nyaman digunakan. Dan tentu saja mereka langsung menekan tombol “close” pada aplikasi browser di perangkat telepon seluler mereka.
Jadi mungkin saja menurut statistik, jumlah pengunjung website mengalami peningkatan, tapi pengunjung website hanya berkunjung selama 10-30 detik saja karena website sangat tidak nyaman diakses. Duh, sayang kan?
Ada begitu banyak hal yang bisa membuat pengunjung website merasa tidak nyaman ketika mereka mengakses website tersebut, mulai dari; ukuran font terlalu kecil atau bahkan terlalu besar, warna yang tidak nyaman untuk mata, telalu banyak iklan yang sangat mengganggu aktifitas para pengunjung, ukuran tombol yang terlalu kecil atau terlalu berdekatan, dsb.
Pentingnya Mobile-First Design
Seperti yang saya katakan diawal, mungkin saja kita berbeda pendapat, namun saya memiliki pendapat yang mungkin berbeda dengan sampeyan. Dan saat ini saya berpendapat apabila mobile-first design itu sangat penting.
Analoginya, kenapa sebagian besar anak kecil lebih suka makan jajanan yang menurut orang tuanya tidak sehat? Karena mereka nyaman dengan rasanya. Kenapa penjualan media cetak mengalami penurunan? Karena tidak mau lagi harus melewati banyak proses ketika ingin membaca berita, misal; ambil uang, berangkat beli koran, kembali kerumah kemudian mulai membaca.
Singkatnya, hal yang menurut kita baik, itu belum tentu baik menurut orang banyak. Kini pengguna tidak mau lagi memilih website yang menurut mereka buruk, karena sudah tersedia begitu banyak website yang menurut mereka jauh lebih baik, jauh lebih nyaman pengguna.
Lain halnya jika website yang buruk itu belum memiliki pesaing, kompetitor, tentu saja penggunjung tidak memiliki pilihan lainnya. Namun tentu saja cepat atau lambat, website yang buruk itu akan memiliki pesaing yang lebih nyaman pengguna atau pengunjung.
Proses Desain Mobile-First
Selama bulan Ramadan kemarin saya melakukan beberapa percobaan, yaitu mencoba membandingkan bagaimana hasilnya jika saya merancang website dari desktop dulu, dan kemudian membandingkannya jika saya merancang website dari mobile dulu.
Tentu saja hasil akhirnya sangat berbeda, jika kita membalik proses desainnya. Hasil akhir yang saya maksud bukan hanya soal bagus tidaknya tampilannya, namun juga soal kenyamanan dalam penggunaan.
Ada benarnya nasihat orang-orang tua, jika mau berubah, mulai dari hal yang terkecil. Dalam hal ini, jika mau memiliki website yang baik, maka mobile-first design dan bukan desktop-first design.
Berdasarkan dari artikel-artikel yang saya baca dan beberapa percobaan yang sudah saya lakukan, hal-hal yang harus diperhatikan ketika kita memulai proses desain mobile-first adalah:
01. Mempersiapkan Konten
Untuk mempermudah dan mempercepat proses perancangan sebuah website, ada baiknya kita membuat daftar elemen apa saja yang kita siapkan.
Tujuannya adalah supaya tidak ada hal yang kita lewatkan dalam perancangan sebuah website.
02. Menyusun Hirarki
Setelah mempersiapkan elemen-elemen apa saja yang nantinya kita masukkan dalam daftar perancangan website, kita harus menyusun hirarki (susunan bertingkat-tingkat) untuk memudahkan kita dalam menentukan elemen apa saja yang harus diprioritaskan dan juga menentukan elemen apa saja yang tidak terlalu menjadi prioritas.
Dalam tahap ini kita harus memposisikan diri kita sebagai seorang pengguna, pengunjung sebuah website. Jangan sampai kita salah dalam memprioritaskan elemen. Misalnya, jika kita menjual beberapa produk, maka pikirkan bagaimana caranya supaya pengunjung mudah menemukan produk tersebut.
03. Rancang Mulai Dari Ukuran Terkecil
Mulailah dari merancang wireframe telepon seluler dengan resolusi terkecil (mobile), misal: layar dengan ukuran 320px x 480px. Kemudian secara bertahap merancang wireframe hingga ke resolusi layar terbesar (desktop), istilah umumnya responsive.
Dalam tahap ini, kita harus memutuskan elemen mana yang menjadi prioritas utama, jika penggunjung mengakses website menggunakan telepon seluler dengan resolusi 320px x 480px. Dan tentu saja dengan ukuran tersebut tidak ada banyak ruang.
04. Menentukan Ukuran Dasar Pixel
Menentukan base pixel size atau ukuran dasar pixel ini sangat penting supaya teks didalam website bisa terbaca dengan jelas, tidak terlalu kecil dan juga tidak terlalu besar.
Sekali lagi, coba posisikan diri kita sebagai seorang pengguna, pengunjung sebuah website yang membaca suatu informasi.
05. Perbesar Touch Target
Jangan sampai kita merancang tombol yang sulit untuk disentuh oleh tangan jika pengguna mengakses melalui perangkat telepon seluler. Misalnya: Google menentukan standar tombol dengan ukuran 36px pada Android dan Apple merekomendasikan tombol dengan ukuran 44px.
06. Optimalkan Ukuran File Gambar
Kualitas foto atau gambar yang baik tentu saja memanjakan mata, namun kita juga harus ingat jika ukuran file gambar terlalu besar bisa memperlambat waktu load sebuah website. Jika lebar maksimal sebuah halaman hanya 640px, maka usahakan jangan mengunggah foto dengan lebar 1024px dengan ukuran file yang lebih dari 500kb.
07. Ujicoba Pada Perangkat Sebenarnya
Ini adalah tahapan yang paling penting, karena kita harus memastikan apakah website yang kita rancang benar-benar nyaman diakses menggunakan beberapa perangkat dengan ukuran layar yang berbeda, mulai dari perangkat telepon seluler, tablet pc hingga desktop.
Sebenarnya masih ada banyak lagi yang ingin saya tulis. Tapi mengingat jika saya teruskan artikelnya bisa terlalu panjang, maka saya singkat menjadi 7 poin penting tersebut.
Oh iya, mumpung masih dalam suasana lebaran, saya ucapkan Taqabbalallahu minna wa minkum. Mohon dimaafkan sampai kebatin ya? Selamat merayakan Idul Fitri. Semoga bermanfaat.