Desain Web Seluler 10 Tips Agar Usabilitas Lebih Baik

Penjelajahan web seluler diharapkan berubah menjadi platform Internet utama berikutnya. Sekarang mudah menjelajah internet dari hampir semua tempat menggunakan perangkat seluler yang pas di tangan karena teknologi. Menjadi pendek dalam penerapan kegunaan yang baik dalam desain web seluler membuatnya sulit menelusuri jalan di berbagai situs web seluler populer. Merancang untuk perangkat seluler harus lebih sederhana daripada situs web standarnya dan lebih berbasis tugas untuk menyelesaikan pekerjaan karena pengguna mencari sesuatu yang spesifik dan mendesak.

Anda harus mempertimbangkan tentang cara menggunakan ruang tersedikit minimum yang tersedia untuk konten utama Anda dan tetap menarik bagi pengguna seluler. Hindari gambar besar dan animasi flash karena akan memperlambat situs Anda. Ingatlah bahwa fungsionalitas lebih penting daripada gaya untuk situs web seluler. Jika situs web Anda tidak dikodekan dan dirancang dengan benar, itu bisa terlihat lebih baik pada satu ponsel, terburuk pada yang lain atau lebih buruk, tidak ditampilkan sama sekali. Uji, validasikan, dan periksa apakah itu kompatibel dengan semua perangkat seluler.

Untuk membantu Anda membuat situs web yang dapat diakses tidak hanya pada komputer desktop atau laptop tetapi juga perangkat seluler, berikut adalah beberapa hal yang perlu dipertimbangkan pada desain web seluler dengan contoh gambar bersama dengan tautan langsung versi situs web seluler.

1. Tentukan resolusi layar

Dunia seluler berisi beragam pertimbangan desain mulai dari ukuran dan resolusi layar yang berbeda hingga beragam bentuk. Bertujuan untuk mencapai keseimbangan antara lebar layar yang cukup dan ukuran pemirsa. Cari tahu spesifikasi perangkat seluler saat ini dan gunakan penilaian terbaik Anda. Apa yang menantang bagi pengembang seluler adalah cara untuk membuatnya ditampilkan dengan tepat di berbagai ukuran layar tanpa harus membuat ulang halaman untuk platform yang berbeda.

Berikut adalah daftar resolusi web yang populer di perangkat seluler per Februari 2011 yang disajikan oleh Uxbooth.com dengan artikel yang dipublikasikan, Pertimbangan untuk Desain Web Seluler (Bagian 2): Dimensi, oleh David Leggett. Penulis menjelaskan beberapa poin tentang dimensi tampilan dan solusi untuk desain tata letak.

2. Memecah halaman web menjadi bagian-bagian kecil

Bagian teks yang panjang bisa sulit dibaca sehingga menempatkannya di beberapa halaman membatasi pengguliran ke satu arah. Singkirkan konten prioritas rendah. Menempel satu kolom teks yang membungkus sehingga tidak ada pengguliran horizontal.

Untuk contoh di bawah ini, versi situs web seluler CBS News hanya menampilkan bagian berita utama dan memecah artikel berita menjadi sebagian kecil. Sementara Treehugger menyajikan sendiri dengan artikel terbaru dan tweet terbaru dengan beberapa fitur situs web lengkap. Kedua situs memiliki pengguna mengklik tautan teks untuk melihat sisa artikel.

Berita CBS

Treehugger

3. Sederhanakan desain

Kesederhanaan sama dengan kegunaan. Biarkan mereka bergerak di sekitar situs tanpa kesulitan. Hindari penyertaan tabel, bingkai, dan pemformatan lainnya. Jika Anda menggunakan padding, ingatlah untuk menyimpannya ke minimum absolut jauh lebih sedikit daripada yang akan Anda gunakan untuk halaman web normal. Dibandingkan dengan komputer desktop, semakin Anda mengklik tautan di situs web seluler, semakin Anda menunggu karena waktu pembukaan. Dengan itu, Anda perlu menghapus dan menyederhanakan situs web Anda dengan keseimbangan antara konten dan navigasi.

Sebagai contoh kami, situs web versi seluler dari daftar Best Buy hanya kategori produk yang paling penting memangkas tingkat hierarki untuk konten. Sementara beranda YouTube seluler hanya menampilkan empat video sorotan terbaru.

Terlaris

Youtube

4. Opsi untuk melihat situs web lengkap

Berikan tautan bagi pengunjung seluler Anda untuk kembali ke situs web lengkap Anda agar pengguna dapat menemukan dan melihat konten dan fitur lain yang hanya dapat diakses oleh versi desktop situs tersebut. Pemirsa Anda pasti akan melakukan banyak pengguliran vertikal, jadi bantu mereka dengan tautan 'Kembali Ke Atas' sehingga mereka dapat melompat ke bagian atas halaman.

Sebagai contoh, Ars Technica memiliki tombol tautannya ke situs web standar yang ditempatkan pada tajuk. Sementara Shangri-La menempatkan tautan situs web lengkapnya di bagian bawah.

Ars Technica

Shangri-La

5. Penempatan navigasi

Kenali audiens Anda dan sadarilah apa yang mereka cari. Cari tahu bagaimana mereka ingin menavigasi situs Anda. Posisikan menu navigasi Anda di bawah konten jika pengguna seluler yang ditargetkan ingin melihat perubahan konten dengan cepat. Konten dan tajuk utama harus terlihat terlebih dahulu agar tidak menghalangi cara melihat konten halaman. Untuk pengguna yang ingin menavigasi pada kategori tertentu segera, letakkan navigasi di bagian atas halaman. Di bawah ini adalah berbagai contoh penempatan navigasi yang digunakan dalam desain web seluler.

D&G

Politikus

Horoskop Harian

6. Gunakan tautan teks

Situs web utama Anda mungkin menggunakan menu fly-out whizzy, rollover atau gadget mewah lainnya, tetapi browser seluler kemungkinan tidak. Ketahuilah bahwa elemen halaman dinamis dan tautan grafis menggunakan sumber daya, jadi pilih tautan teks yang dilabeli dengan baik.

Terlepas dari Daftar

Reddit

7. Buat perbedaan antara tautan yang dipilih

Memindahkan kursor ke bawah akan menggulir halaman dan menyoroti semua tautan sekaligus. Jadi, penting untuk secara jelas memberi tahu pengguna item apa yang menjadi fokus. Ini dapat dilakukan dengan mengubah font dan warna latar belakang tautan dan tombol atau dengan hanya menambahkan beberapa padding di sekitar tautan untuk membuat area yang dapat diklik lebih besar sekitar 44px oleh 44px. Geek Squad dan Diesel menggunakan font besar untuk teks yang dapat diklik.

Pasukan Geek

Diesel

8. Saldo tautan

Setiap unduhan halaman menghabiskan sumber daya waktu dan sistem, yang terakhir kekurangan pasokan, jadi cobalah untuk tidak memaksa pengunjung situs untuk menggali melalui banyak halaman untuk mengakses informasi yang dicari. Buat keseimbangan antara jumlah tautan di setiap halaman dan kedalaman situs.

Flickr

Kericau

9. Kurangi entri teks pengguna

Sulit memasukkan teks ke versi situs web seluler. Ganti dengan tombol atau daftar radio sehingga mereka dapat memilih dari apa yang mereka butuhkan dengan mudah. Ingat bahwa pengguna ponsel tidak memiliki akses ke keyboard dan mouse konvensional. Semakin pendek URL, semakin baik karena mengetikkan URL panjang adalah hal yang monoton.

Untuk sampel kami di bawah ini, Fedex menggunakan daftar periksa dan menu tarik-turun. Sementara Tumblr membuat Anda memilih bahasa Anda menggunakan menu drop down.

Fedex

Tumblr

10. Tidak muncul atau menyegarkan

Browser seluler biasanya tidak mendukung pop-up. Dan jika mereka melakukannya, mereka akan memiliki ruang yang sangat sempit untuk muncul. Tinggal jauh dari menggunakannya untuk menghindari hasil yang tidak terduga. Juga, jangan memiliki halaman yang diperbarui secara berkala untuk menghindari pengisian memori terbatas perangkat. Biarkan pengguna menyegarkan konten.

Pendeknya

Dapatkan kreatif dan terapkan desain web seluler Anda dengan cara baru. Jadikan konten Anda cukup menarik dan bermanfaat. Berikan pengguna Anda apa yang mereka inginkan, saat mereka menginginkannya. Pengguna tidak ingin menggali lebih dalam ke situs hanya untuk menemukan apa yang mereka cari di web seluler.

Apakah Anda memiliki situs seluler pilihan yang benar-benar menginspirasi Anda? Bisakah Anda membagikan beberapa kiat desain web seluler Anda? Beritahu kami!

Bacaan lebih lanjut

1. Desain Web Responsif (alistapart.com)
2. Jadikan Situs Anda Ramah Seluler (thinkvitamin.com)
3. Pemeriksa mobileOK W3C (w3.org)
4. Simulator iPhone