Photo by Ben Kolde on Unsplash

Tahukah anda kalau di tahun 2021 kemarin menurut (Kompas, 2021)  jumlah pengguna ponsel di dunia sudah mencapai 5,3 miliar orang. Hal tersebut menjadi alarm untuk kita untuk aware terhadap kemudahan penggunaan website atau mobile apps yang ditampilkan di perangkat mobile. Oleh karena itu pendekatan mobile first dan mobile responsive dalam desain web dan aplikasi menjadi hal yang wajib untuk kita implementasi. Apa itu pendekatan mobile first dan mobile responsive, dan bagaimana implementasinya ya? Yuk kita bahas lebih detail. 

Apa itu Mobile-First Approach? 

Jadi, Mobile-First Approach adalah cara berpikir atau metode dalam desain yang mengutamakan perangkat mobile terlebih dahulu, seperti smartphone dan tablet, sebagai prioritas utama. Artinya, designer mulai merancang pengalaman pengguna di perangkat seluler dulu sebelum memperluas rancangannya ke versi desktop. Nah, metode ini membuat tampilan website jadi lebih simpel, ringan, dan mudah dipakai di layar kecil, agar pengguna tetap happy walaupun platform kita diakses melalui perangkat yang kecil. 

Terus apa bedanya sama Mobile Responsive Design? 

Pertama-tama kita cari tahu dulu apa itu Mobile Responsive Design. Jadi Mobile responsive design adalah konsep yang bertujuan agar situs web atau aplikasi dapat menyesuaikan diri dengan berbagai macam perangkat, mulai dari ponsel sampai desktop yang gede banget.  

Nah, kalau hubungan antara mobile-responsive design sama mobile-first approach itu seperti ini: Mobile responsive design adalah konsep desain yang bertujuan agar website dapat dipakai di semua perangkat, sedangkan mobile-first approach adalah metode merancang desain yang responsif mulai dari perangkat terkecil seperti perangkat seluler. 

Sepenting Apa sih Mobile Responsive Design? 

Desain yang responsif itu sangat penting. Ada beberapa alasan kenapa sebuah design yang responsif itu vital untuk pengembangan sebuah sistem, antara lain: 

a. Semua Orang Memakai Perangkat Seluler 

Sekarang semakin banyak orang yang memakai ponsel mereka untuk mengakses akses internet. Data dari Statcounter menunjukkan kalau di bulan Desember 2022 pengguna perangkat seluler berkontribusi 58% sebagai pengakses internet dunia. Sedangkan menurut Databoks, akses internet di Indonesia didominasi oleh pengguna seluler dengan persentase 98% dibanding perangkat lainnya. Nah banyak banget ya internet yang mengakses via mobile. Oleh karena itu, kalau website kita tidak responsif, bisa-bisa kita kehilangan banyak pengunjung potensial dan kita sendiri yang akan rugi. 

b. Lebih Keren di Mata Mesin Pencari 

Menurut blog Google Developer, Google mulai menerapkan Mobile First Indeks sejak tahun 2020, dimana mulai saat itu indeksasi Google bakal mengutamakan versi mobile dari website buat nentuin ranking pencarian di Google. Singkatnya Google dan mesin pencari lainnya lebih suka dengan website yang responsif ketika digunakan oleh audiens. Jadi kita bakal punya peluang lebih besar untuk muncul di halaman pertama hasil pencarian kalau menerapkan metode mobile-first design ini.  

c. Membuat Pengguna Makin Betah 

Desain kamu yang responsif bisa bikin pengguna senang karena konten kamu bisa nyesuain perangkat pengguna, selain itu juga bisa nurunin bounce rate website kamu, dan bisa ningkatin retensi pengguna serta konversi calon pelanggan. 

Bounce rate adalah rasio pengunjung yang masuk ke website kita, tetapi meninggalkan website dalam waktu kurang dari 10 detik tanpa melakukan aktivitas apapun. Dengan desain yang responsif, desain dibuat sedemikian rupa agar pengunjung tertarik untuk lanjut scroll dan engage dengan website kita.

Produk yang Mengaplikasikan Mobile-First 

Ternyata banyak sekali lho startup yang sukses dengan menerapkan strategi mobile first dalam produk mereka. Dua yang paling terkenal adalah Spotify dan Instagram. Sejak awal, Spotify dan Instagram hanya hadir sebagai aplikasi seluler dan baru kemudian mereka mengeluarkan versi web dari aplikasi mereka untuk pengguna desktop. Penerapan metode ini membantu mereka membangun pondasi pengguna yang kuat dan fokus pada pengalaman pengguna seluler yang membuat betah. 

Selain itu, di Indonesia yang menggunakan mobile-first approach adalah Sayurbox. Sejak awal kemunculannya, Sayurbox lebih mengedepankan penggunaan mobile apps sebagai platform belanja customernya. Mereka juga mempunyai website, dengan design dan frame yang identik dengan versi mobile apps. Mereka lebih fokus pada mobile, karena mengetahui bahwa behavior target customer mereka lebih suka berbelanja di mobile dibandingkan website.

Langkah-langkah untuk Membuat Design yang Mobile Responsive 

Yuk, kita pelajari dulu langkah-langkah umum buat bikin desain yang responsif: 

a. Pahami Siapa Target Audience Kamu 

Dengan memahami siapa target audience kita dan perangkat apa yang biasa mereka pakai buat akses situs atau aplikasi kita. Kemudian rancang desain yang sesuai dengan perangkat mereka. 

b. Tentukan Konten yang Sesuai Dengan Kebutuhan Audience

Merancang desain untuk perangkat seluler itu tidak mudah karena adanya keterbatasan ukuran layar. Serta perlu white space sehingga designer harus cermat dalam memilih konten apa yang tepat atau cocok disajikan kepada pengguna.  

Kamu bisa mulai dengan buat table of contents dan list semua konten yang ingin ditampilkan. Kemudian cari tahu: 

1. Seberapa penting konten ini? 

2. Apakah bisa diwakilkan dengan konten yang sudah ada? 

3. Apakah konten ini bermanfaat bagi pengguna kamu? 

4. Apakah konten ini memiliki tujuan bisnis? 

Setelah konten kamu bisa menjawab keempat pertanyaan tadi kita bisa memberi label tiap konten dengan kategori: Penting, Cukup Penting, Ga Penting. Dengan demikian kamu bisa tahu mana konten yang tepat disajikan untuk pengguna kamu. 

c. Terapkan Mobile First Approach 

Rancang terlebih dahulu desain untuk perangkat seluler. Lalu setelahnya perluas rancangan desain kamu ke perangkat yang lebih gede kayak Desktop. 

d. Gunakan layout yang responsif 

Gunain desain layout yang responsif agar tampilan website dapat menyesuaikan dengan ukuran layar perangkat pengguna. 

e. Terapkan Hirarki Visual 

Jangan lupa untuk menerapkan prinsip-prinsip hirarki visual agar desain kamu mampu menampilkan poin utama dari konten kamu, serta mudah dipahami oleh siapa pun yang melihat. 

f. Tes Desain Kamu 

Langkah paling akhir yang sangat berpengaruh kalo kamu melakukan ini adalah pengujian desain yang telah kita buat di berbagai perangkat dengan ukurang layar yang bervariasi. Sebisa mungkin kamu lakuin langkah terakhir ini sebelum melakukan developing situs web atau aplikasi kamu agar nantinya ketika desain kamu didevelop sudah sesuai dengan apa yang dibutuhkan oleh pengguna. 

3 Hal yang Perlu Diperhatikan dalam Membuat Web yang Mobile Responsive 

a. Prioritaskan konten yang penting 

Prioritaskan konten yang paling penting dan relevan untuk ditampilkan di perangkat seluler. Hindari menampilkan terlalu banyak teks dan informasi dalam satu layar. 

b. Kemudahan Navigasi 

Pastikan navigasi di perangkat seluler mudah digunain, yakni tidak terlalu kecil, dan tidak membuat bingung. Contohnya adalah, tombol navigasi harus berukuran relatif besar dan mudah ditemukan, berdasarkan panduan dari Apple Developer setidaknya berukuran minimal 44px x 44px. Hal itu dikarenakan pengguna seluler memakai jari tidak memakai mouse seperti halnya kita menggunakan perangkat desktop. 

c. Hindari Ukuran Gambar yang besar 

Sebisa mungkin hindari menggunakan gambar dan ilustrasi yang terlalu besar, kemudian jangan menggunakan grafis yang terlalu rumit. Visualisasi yang terlalu besar belum tentu baik, hal itu malah membuat gambar susah untuk dilihat. Ingat bahwa mendesain untuk perangkat seluler memerlukan kesederhanaan di setiap elemen. 

Ukuran gambar yang tidak terlalu besar akan membuat loading website atau mobile app juga lebih cepat, sehingga audience tidak menunggu terlalu lama.

Bagaimana Crocodic Memastikan bahwa Desainnya Mobile Responsive 

Nah, Crocodic, sebagai perusahaan pengembang website dan mobile app memahami bahwa desain yang responsif itu sangat penting. Kami selalu mengedepankan konten yang sesuai dengan kebutuhan pengguna di perangkat seluler dan memastikan desain kita disesuaikan untuk memberikan pengalaman pengguna yang terbaik. 

Beberapa langkah yang diambil untuk memastikan hal ini adalah : 

• Mengembangkan prototype yang dapat dioperasikan selayaknya website atau aplikasi yang sudah jadi
• Menggunakan penilaian WCAG untuk kontras, dan Usability Testing kepada user website atau mobile apps.
• Melakukan ujicoba di berbagai device, untuk merepresentasikan pengguna yang akan beragam
• Revisi design sesuai dengan kebutuhan, agar bisa mencapai titik tengah kepuasan user website/mobile app dengan kemudahan penggunaan, serta desain yang estetik.

Jadi, dalam dunia yang didominasi oleh perangkat seluler, mobile-first design dan desain yang responsif menjadi salah satu kunci kesuksesan sebuah website atau aplikasi. Dengan mengerti konsep ini dan mengikuti langkah-langkah yang benar, web atau aplikasi yang kita kembangkan akan siap untuk menghadapi tantangan zaman yang semakin mobile-centric ini.

Ketahui lebih lanjut bagaimana pengembangan mobile first, dengan berkonsultasi bersama analyst kami. Bebas biaya! Kunjungi laman berikut : Form Permintaan Diskusi , untuk memulai diskusi dengan kami.

Artikel Oleh : Aysar Bening