Sudah tidak bisa dipungkiri lagi bahwa web sudah menjadi mobile. Lebih banyak user yang mengakses web dari berbagai tempat dengan berbagai perangkat dibandingkan sebelumnya. Apa artinya ini bagi web designer dan pemilik web? Artinya bahwa dalam setiap proyek yang kita kerjakan, kita harus melakukan mobile strategy.
Pada artikel ini, saya bertujuan untuk menyoroti 9 hal penting bahwa Anda, sebagai web designer, developer atau pemilik situs, perlu untuk mempertimbangkan desain situs mobile Anda. Ide ini mencakup semua aspek proses, dari strategi untuk desain dan implementasinya.
1. Tentukan Kebutuhan Anda dalam Situs Mobile
Biasanya sebuah proyek desain web mobile datang karena beberapa kondisi, antara lain :
- Sebuah brand baru yang membutuhkan strategi baik dalam komputer maupun mobile.
- Sebuah desain ulang untuk web yang sudah ada, yang mungkin akan menambahkan situs mobile.
- Sebuah tambahan yang diperlukan oleh sebuah web komputer yang sudah ada, tanpa adanya perubahan dalam web komputer.
Setiap dari kondisi ini memberikan kebutuhan yang berbeda-beda, yang akan membantu Anda dalam menentukan cara terbaik yang akan Anda pertimbangkan untuk pilihan yang akan dibahas dibawah ini.
2. Pertimbangkan Tujuan Bisnisnya
Dalam banyak kasus, Anda, sebagai desainer/developer dipekerjakan oleh seorang klien untuk membuat desain sebuah situs mobile untuk bisnis mereka. Apa saja tujuan bisnis yang berkaitan dengan website, terutama mobile site? Anda perlu untuk memprioritaskan tujuan-tujuan ini, kemudian konsultasikan apa yang ada pada desain Anda. Ketika menerjemahkan desain Anda ke mobile, Anda harus mengedepankan dan fokus ke beberapa tujuan utama dalam bisnis itu.
Ambil contohnya website MobGold. Jika Anda membuka MobGold.com di komputer, hal pertama yang akan Anda lihat adalah gambar animasi yang besar dan tegas yang akan membangkitkan koneksi dengan layanannya. Selain itu, Anda akan melihat navigasi yang kuat, beserta penjelasan akan berbagai manfaat jika bergabung ke MobGold, live chat dan link sosial media.
Contoh lainnya adalah web milik hyundai. Coba buka hyundai.com di mobile browser Anda, Anda akan menemukan tampilan website versi kecilnya. Dan prioritas dari versi mobile-nya juga masih sama : gambar yang besar dari model mobil terbaru mereka, diikuti dengan beberapa gambar mobil lainnya. Anda tidak akan menemukan navigasi yang kompleks dalam versi mobilenya. Mereka memilih untuk fokus pada tujuan utama dari bisnis, yaitu mempromosikan produk mereka dengan tampilan gambar yang jelas.
3. Pelajari Data dari Masa Lalu Sebelum Melangkah Maju
Jika proyek ini merupakan desain ulang, atau sebuah tambahan dari website yang sudah ada, semoga saja web yang ada, trafiknya sudah terlacak dengan google analytics (atau software pelacakan lainnya). Sangat dianjurkan untuk mempelajari data sebelum melakukan desain dan pengembangan.
Analisa hal-hal lainnya, seperti perangkat dan browser yang sering digunakan oleh user dalam mengakses situs Anda. Meskipun Anda berfikir ingin memastikan situs tersebut dibangun dengan semua perangkat yang mendukung, Anda dapat menargetkan pada satu browser yang banyak dipakai sebagai prioritas utama ketika Anda ingin mendesain, melalui pengembangan, pengujian dan peluncuran.
4. Berlatih Desain Web yang Responsif
Dengan begitu banyaknya perangkat mobile yang beredar setiap tahunnya, hari-hari untuk memeriksa situs Anda ke berbagai browser sudah berakhir. Anda harus mengoptimalkan situs Anda untuk browser di komputer dan mobile, karena masing-masing memiliki beberapa perbedaan, antara lain pada resolusi layar, teknologi yang mendukungnya, dan user-base.
5. Kesederhanaan itu Emas, Tapi …
Sebagai aturan yang umum ketika ingin mengkonversi desain situs ke dalam format mobile, Anda ingin menyederhanakan beberapa hal yang mungkin untuk disederhanakan. Ada beberapa alasan untuk ini. Menurunkan ukuran file dan waktu load selalu menjadi ide yang bagus untuk situs mobile. Koneksi wireless – walaupun lebih cepat dari tahun-tahun sebelumnya – tetap saja pelan, jadi makin cepat situs mobile untuk load, makin bagus.
Pertimbangan dalam penggunaan web mobile juga membutuhkan pendekatan kesederhanaan dalam desain, rancangan, dan navigasi. Dengan layar yang kurang karena pembuangan yang Anda lakukan, Anda harus memilih penempatan elemen dengan bijaksana. Singkatnya : Lebih sedikit lebih baik.
Namun, kita masih bisa membuat desain yang cantik dan optimal untuk mobile. CSS3 memberikan kita sebuah set tools yang hebat untuk menciptakan beberapa hal seperti gradien, drop-shadow, dan rounded corners, semua itu tanpa menggunakan gambar yang besar. Tapi bukannya kita tidak bisa menggunakan gambar sama sekali.
Coba cek contoh-contoh dari situs mobile berikut ini yang menggunakan keseimbangan yang bagus antara kesederhanaan dan keindahan.
6. Rancangan Single-Column Biasanya yang Terbaik
Ketika Anda berfikir tentang rancangan, sebuah struktur single-column cenderung lebih baik. Hal ini tidak hanya membantu dalam mengelola ruang yang terbatas dalam layar yang lebih kecil, tapi juga membantu Anda memudahkan skala antara resolusi dalam berbagai perangkat dan perubahan antara potrait dan landscape.
Menggunakan teknik desain web yang responsif, Anda bisa menggunakan rancangn desktop multi-column dan mengadaptasinya ke rancangan single-column. Gambar berikut adalah contohnya.
7. Pindahlah dari “Clickable” ke “Tappable”
Dalam mobile web, interaksi dilakukan via tap jari dibandingkan dengan mouse klik. Hal ini menciptakan dinamik yang berbeda dalam pemakaiannya.
Ketika mengkonversi dari desktop ke situs mobile, Anda harus mengunjungi lagi elemen “clickable” Anda – links, buttons, menus, etc. – dan buat menjadi “tappable”. Ketika desktop web sangat baik dalam link dengan area yang kecil (clickable), mobile web membutuhkan link yang lebih besar, buat buttons yang bisa dengan mudah ditekan oleh ibu jari.
Tambahan, dalam mobile web tidak ada kondisi hover. Kebanyakan, ketika sesuatu di setting dalam kondisi hover (seperti menu navigasi dropdown), biasanya muncul dalam tap pertama ketika dibuka di perangkat mobile. Tap kedua dalam situs mobile melakukan apa yang dilakukan pada klik pertama di situs desktop. Hal ini mungkin menyebabkan kebingungan dalam pengguna mobile, artinya Anda perlu memperbaiki status hover untuk mobile.
8. Berikan Komentar yang Interaktif
Berbicara tentang interaksi, Anda harus memastikan bahwa Anda memberikan umpan balik yang jelas untuk setiap tindakan yang terjadi di front-end situs mobile Anda.
Contohnya, ketika user men-tap link atau button, sangat baik jika button tersebut berubah bentuk untuk menunjukkan bahwa sudah di tap dan sudah dieksekusi. Hal ini biasa terjadi pada iPhone ketika sebuah link berubah warna dari putih ke biru ketika di tap. Ini sebuah umpan balik visual yang sudah sangat akrab bagi sebagian besar user dan Anda bisa mengambil keuntungan dari itu.
Latihan yang lainnya adalah untuk menampilkan sebuah animasi yang mungkin akan sedikit memperlama waktu load. Gunakan sebuah load animasi untuk memberitahukan bahwa sesuatu sedang diproses.
Ingatlah, browser desktop memiliki berbagai macam built-in untuk menunjukkan sesuatu sedang diproses. Browser mobile tidak membuatnya secara jelas, jadi sangat penting untuk membuat visual feedback ke dalam situs mobile Anda.
9. Tes Situs Mobile Anda
Seperti setiap proyek, Anda perlu untuk melakukan tes pada mobile website Anda di berbagai perangkat yang memungkinkan. Tanpa memiliki semua perangkat ini, akan sangat sulit dalam melakukan testing yang akurat. Hal ini membutuhkan instalasi kombinasi pada platform SDK (seperti iPhone SDK dan Android SDK) dan menggunakan web-based emulators untuk melihat platform mobile lainnya.
Saya berharap artikel ini bisa membantu Anda dalam merencanakan proyek desain situs mobile Anda. Pastikan untuk meninggalkan tips lain yang Anda temukan ketika mendesain mobile web pada comment di bawah.
