Versi seluler situs: 10 aturan dengan contoh sebelum dan sesudah
Sebagian besar pengunjung toko online datang dari ponsel dan di sanalah mereka memutuskan membeli. Berikut 10 aturan versi seluler situs dengan contoh sebelum dan sesudah serta ukuran tombol dan huruf yang tepat menurut Apple, Google, dan WCAG.
Mengapa versi seluler bukan situs yang «dikecilkan»?
Di ponsel orang mengetuk dengan jari, membaca di layar kecil, dan sering memakai satu tangan. Yang nyaman di komputer jadi kecil, sempit, dan membingungkan di ponsel. Selain itu, Google mengindeks situs berdasarkan versi seluler, jadi pencarian dan penjualan bergantung padanya.
10 aturan beserta contoh
1. Buat tombol besar
Orang mengetuk dengan jari, bukan kursor. Apple menyarankan area ketuk minimal 44 × 44 pt, Android 48 × 48 dp, dan standar aksesibilitas WCAG 2.2 menetapkan minimal 24 × 24 px.
2. Perbesar huruf
Yang wajar di komputer tidak terbaca di ponsel. Teks utama biasanya 16 px atau lebih agar tidak perlu diperbesar; Lighthouse dari Google dulu menandai halaman yang lebih dari 40% teksnya di bawah 12 px.
3. Perhatikan jarak
Jika blok berdempetan, layar tampak sesak dan murahan. Butuh ruang kosong lebih banyak dari yang dikira.
4. Susun tombol ke bawah
Dua tombol berdampingan jadi sempit di ponsel. Tombol selebar layar, tersusun ke bawah, lebih mudah diketuk dan mengurangi salah ketuk.
5. Tunjukkan bahwa bisa digeser
Jika kartu bisa digeser, orang harus melihatnya: tepi kartu berikutnya, titik, atau panah menandakan masih ada lagi.
6. Ringkas menu
Header tidak boleh memakan setengah layar. Header ringkas dengan logo dan tombol menu memberi ruang untuk yang utama.
7. Sembunyikan yang sekunder
Di ponsel tidak perlu menampilkan semuanya sekaligus: akordeon, tab, dan «tampilkan lainnya» membuat halaman rapi. Sembunyikan, jangan hapus — Google mengindeks versi seluler, jadi isinya harus sama dengan desktop.
8. Buat kontak bisa diketuk
Nomor telepon dan email harus terbuka dengan sekali ketuk — itulah fungsi tautan tel: dan mailto:. Tombol «Telepon» lebih sederhana lagi.
9. Jangan penuhi layar pertama
Ruang di layar pertama sedikit: satu judul, penjelasan singkat, dan satu aksi utama. Banner, diskon, dan langganan letakkan di bawah.
10. Jangan salin desktop mentah-mentah
Versi seluler bukan situs yang lebih kecil. Blok disusun ulang, tiga kolom jadi satu, yang berlebih dibuang.
Metriverra menunjukkan konversi pengunjung dari ponsel dan komputer, sehingga mudah mengecek apakah perbaikan versi seluler mendatangkan penjualan.
Ringkasnya
- Tombol minimal 44 × 44 pt (Apple) atau 48 × 48 dp (Android); minimum WCAG 24 × 24 px.
- Teks utama minimal 16 px, dengan jarak antarblok.
- Tombol selebar layar dan tersusun ke bawah; kontak bisa diketuk.
- Layar pertama: satu aksi utama; yang sekunder dalam akordeon.
- Seluler adalah penyusunan ulang, bukan situs yang dikecilkan; isinya sama dengan desktop.
Sumber: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
