8 TIPS DESAIN DALAM SITUS MOBILE

Menurut  Smart Insights, 80% dari pengguna internet memiliki smartphone. Jutaan orang menggunakan web untuk mencari produk dan informasi yang dapat dilakukan dimana saja. Untuk memuaskan konsumen, setiap perusahaan harus membuat situs mereka mudah dinavigasi atau diakses pada perangkat mobile.

Tips 1: Semua situs seluler membutuhkan meta tag viewport

Jangan lupa untuk menyertakan meta tag viewport ketika membangun sebuah situs mobile. viewport adalah dunia virtual yang digunakan oleh mesin pencari untuk menentukan bagaimana konten sebuah situs,  skala dan ukuran, pembuatan termasuk meta tag penting ketika membangun pengalaman multi-perangkat. Meta tag viewport memberitahu browser mobile yang harus sesuai layar yang lebih kecil. Tanpa itu situs tidak akan beroperasi dengan baik pada perangkat mobile. 

Tips 2: Ukuran untuk situs web seluler 

Apakah Anda pernah mengunjungi sebuah situs pada perangkat mobile Anda lalu ketika Anda memilih tombol, tapi tombol itu begitu kecil dan Anda akhirnya menekan hal yang salah atau apakah Anda pernah harus memperbesar hanya untuk membaca sesuatu? Ini sangat menyulitkan, hal ini sangat penting untuk diingat bahwa ketika membuat desain ponsel, tidak hanya ukuran halaman, tetapi juga ukuran font dan tombol. 

Font: Ukuran font pada situs mobile harus setidaknya 14px. Meskipun ini mungkin tampak lebih besar dari yang Anda awalnya ingin, itu membuat konten mudah untuk pemirsa untuk membaca tanpa memaksa mereka untuk memperbesar untuk keterbacaan. Secara umum, satu-satunya waktu font harus lebih kecil adalah pada label atau bentuk, Anda bisa menurunkan ke 12px. 

Tombol: singkatan  BBAB: Bigger Buttons Are Better,  tombol besar hanya mengurangi kemungkinan bahwa pengguna akan keliru menekan tombol yang salah atau kehilangan itu semua bersama-sama. Pemimpin ponsel seperti Apple menyarankan ukuran tombol harus setidaknya 44px karena 44px untuk memaksimalkan pengalaman pengguna dan meningkatkan konversi di situs e-commerce.

 

Tips 3: Pop-up atau refresh tidak boleh digunakan dalam desain web mobile  

Bahkan kecil pop-up dapat menyebabkan sakit kepala besar untuk pengguna mobile. Karena browser ponsel biasanya tidak mendukung pop-up, ketika mereka hadir mereka membuat seluruh pengalaman pengguna frustasi. Selama proses desain, pastikan Anda menghindari menggunakan pop-up untuk hasil terbaik mobile. Demikian pula, menggunakan refresh periodik untuk mencegah mengisi cache di perangkat mobile. Jika halaman perlu direfresh, biarkan pengguna melakukannya sendiri. 

Tips 4: Diperlukan navigasi untuk mengurangi entri teks pengguna 

Kita sering kali sangat sulit untuk memasukkan teks dalam versi mobile website. Mengurangi entri teks pengguna dengan menggantinya dengan tombol atau daftar sebagai gantinya, sehingga pengguna dapat memilih apa yang mereka butuhkan dengan mudah dan tanpa menyibukkan diri dengan input teks. Perlu diingat bahwa, tidak seperti pengguna desktop, pengguna ponsel tidak memiliki akses ke keyboard tradisional atau mouse, jadi gunakan kreativitas untuk mengembangkan cara-cara yang berbeda. Pengguna masih dapat memiliki pengalaman  yang sama tanpa harus menggunakan keyboard kecil atau navigasi menantang 

Beberapa solusi antara lain:

Checklist

Menu drop-down

Button

Pilihan gambar 

Tips 5: Gunakan penempatan navigasi kreatif dalam desain Anda

Sebelum Anda mulai membangun website Anda, Anda mungkin melakukan sejumlah besar penelitian untuk mengenal audiens Anda dan apa yang mereka cari dalam sebuah situs web.  Jika pengguna yang ditargetkan ingin melihat dengan cepat berubah konten, posisi menu navigasi di bawah bahan utama. Ini akan meninggalkan ruang untuk konten dan berita utama menjadi terlihat tanpa menghalangi tampilan halaman. Di sisi lain, jika audience ingin akses langsung ke menu kategori, Anda harus menempatkan menu navigasi di bagian atas halaman. 

Tips 6: Menyederhanakan desain situs Anda 

Menyingkirkan situs Anda dari konten yang tidak perlu dan menyederhanakan desain situs untuk membuat kegunaan utama. Pendekatan “mobile first” adalah semua tentang minimalis, dan menyederhanakan desain untuk membantu meningkatkan kegunaan. Membuat situs yang memungkinkan pengguna menavigasi situs tanpa kesulitan dengan menghindari masuknya tabel, frame, dan format lainnya. Jauhkan padding untuk minimum absolut, karena lebih banyak pengguna mengklik link, semakin lama mereka akan menunggu waktu buka. Menyederhanakan website Anda untuk menciptakan keseimbangan antara konten dan navigasi 

Tips 7: Break halaman menjadi beberapa bagian kecil

Mengambil konten yang menampilkan baik pada komputer desktop yang besar dan menjejalkan itu ke perangkat genggam kecil kadang-kadang seperti mencoba untuk menyesuaikan persegi pasak ke dalam lubang bundar. Memecah halaman menjadi bagian-bagian kecil dengan menempatkan bagian yang panjang dari teks pada beberapa halaman yang berbeda, bukan satu halaman yang pengguna harus terus bergulir untuk melihat konten. 

Tips 8: Skala Gambar akan membuat semua perbedaan untuk pengguna ponsel 

Lihatlah setiap gambar yang digunakan dalam konten dan di latar belakang. Pastikan bahwa gambar timbangan dengan benar ketika pengguna isi di potret dan orientasi landscape. Jika gambar tidak skala untuk yang sesuai dimensi, Anda harus mengubah aturan CSS untuk memberitahu gambar memiliki lebar 100% atau mengandung (untuk gambar latar belakang) sendiri di halaman. Dengan mengikuti tips ini sederhana, Anda dapat memastikan bahwa desain Anda desktop dan mobile ramah sehingga pengunjung dapat memiliki pengalaman terbaik