Pada hari-hari awal merancang situs web untuk perangkat seluler, sebagian besar pengembang memecah belah penawaran produk mereka. Mereka merilis versi desktop yang berfungsi penuh dan kemudian versi "dioptimalkan untuk seluler" yang melucuti sebagian besar pencitraan merek dan citra untuk mengakomodasi kemampuan terbatas dan kecepatan jaringan ponsel candy-bar dan jaringan nirkabel 3G.
Namun demikian, smartphone kontemporer dapat merender halaman Web sama efisiennya dengan PC desktop, melalui jaringan yang baik atau lebih baik daripada saluran DSL kemarin.
Desain, kemudian, menyatu kembali ke antarmuka pengguna tunggal. Tetapi risiko bagi para desainer bukanlah bahwa smartphone atau tablet tidak dapat membuat situs web responsif modern. Sebaliknya, metode input pengguna pada perangkat layar sentuh memerlukan perubahan yang berarti pada desain situs yang mendasarinya. Hari-hari membangun sebuah situs web dengan asumsi pengunjung memiliki keyboard dan mouse berakhir.
Aturan Desain Layar Sentuh Dasar
Merancang untuk antarmuka web layar sentuh yang sadar membutuhkan evolusi dari pendekatan monitor-mouse-keyboard tradisional di masa lalu. Secara khusus, Anda harus mengakomodasi interaksi seperti isyarat, ketukan, dan input multitouch.
- Tapping tidak akurat.Kecuali pelanggan memiliki jari-jari balita, bahkan dengan kontrol perangkat lunak yang sangat akurat, dapat sulit untuk mengetuk dan tepat.
- Gestur berbeda dari ketukan.Untuk menggulir halaman panjang pada layar sentuh, pengguna menggesek satu jari naik jendela browser. Ini mungkin tidak terlihat signifikan sampai Anda menyadari bahwa menjelajah dengan mouse, Anda menggerakkan mouse turun .
- Dua (dan lebih) tap jari.Seorang pengguna dapat menggunakan beberapa ketukan jari pada perangkat pada saat yang sama untuk mengendalikannya. Tap tambahan itu dapat berarti sesuatu yang spesifik tergantung pada sistem operasi perangkat pengguna.
- Perangkat sorotan tinggi.Layar kebanyakan tablet layar sentuh terbuat dari kaca yang kokoh. Bahan ini bisa sangat sulit dibaca, dengan banyak silau, dalam situasi cahaya terang. Plus, dengan semua sentuhan, mereka mendapatkan sidik jari dan noda di layar yang dapat memengaruhi tampilan halaman Anda.
- Keyboard di layar.Sementara beberapa pengguna memiliki keyboard nirkabel yang terhubung ke tablet mereka, sebagian besar pengguna tablet menggunakan keyboard di layar untuk entri data. Masuk OSK dapat menghasilkan beberapa kesalahan ketik lucu serta tidak nyaman digunakan untuk waktu yang lama.
Karena fitur-fitur perangkat ini, perancang web harus menekankan beberapa aturan desain dasar untuk pengguna layar sentuh:
- Jangan menempatkan item yang dapat diklik terlalu berdekatan.Tidak ada aturan keras dan cepat yang menentukan seberapa dekat terlalu dekat, tetapi daftar tautan, terutama dalam ukuran huruf kecil, bisa sulit dinavigasi dengan mengklik (mengetuk) dengan jari yang gemuk. Anda dapat menjengkelkan harus memperbesar hanya untuk mencoba dan mengeklik tautan. Prinsip ini berlaku untuk tombol dan tautan.
- Hierarki sulit untuk tetap terbuka.Salah satu bentuk populer menu dinamis menggunakan JavaScript untuk membuka submenu ketika pengguna mengklik dan kemudian mengarahkan mouse ke submenu. Status ini bisa sangat sulit atau tidak mungkin digunakan di layar sentuh karena keduanya tidak tetap terbuka atau tidak akan tertutup.
- Pindahkan tautan dan area yang dapat diklik jauh dari tepi kanan jendela.Kebanyakan orang tidak kidal dan cenderung menggulir di sisi layar itu. Karena menggulir dilakukan dengan gerakan, terkadang dimungkinkan untuk memulai swipe pada tautan secara tidak sengaja. Pengguna dapat merasa terganggu jika ingin menggulir laman dan malah akhirnya secara tidak sengaja mengetuk tautan. Dengan memindahkan tautan Anda dari sisi kanan, Anda dapat membantu mereka menghindari ketidaknyamanan ini.
- Tidak ada tikus.Dan ini berarti tidak ada tikus penunjuk . Anda tidak harus bergantung pada penunjuk tetikus untuk membantu mengindikasikan bahwa ada sesuatu yang dapat diklik.
- Kondisi mengambang tidak ada.Sebagai akibat wajar di atas, karena tidak ada tikus, tidak ada yang perlu didatangi. Tautan diklik (diketuk) atau tidak pada perangkat layar sentuh, sehingga pengguna tidak dapat menyimpulkan informasi bermanfaat apa pun dari negara mengambang seperti perubahan warna, kiat alat, atau perubahan bilah status.
- Latar belakang hitam meningkatkan silau.Situs dengan latar belakang hitam bisa sangat sulit dibaca pada perangkat layar sentuh karena silau. Hitam membuat sidik jari di perangkat tampil lebih jelas, mengaburkan layar. Dan hitam dapat mengubah layar menjadi cermin yang memantulkan kembali wajah pengguna lebih sering daripada teks di layar.
- Blok teks panjang dalam bentuk sulit untuk ditulis.Meskipun dimungkinkan untuk menulis seluruh novel di iPad atau tablet Android atau Windows, kebanyakan orang tidak suka menggunakan keyboard di layar untuk teks yang panjang. Semakin banyak desain Anda dapat membuat entri data sesingkat dan semudah mungkin, semakin baik.
Aspek terpenting dari perancangan dengan touchscreens adalah untuk uji halaman Anda pada perangkat layar sentuh. Sementara banyak emulator iPad dan Android tersedia, dan banyak tablet Windows, mereka masih belum memberikan rasa layar sentuh. Anda tidak dapat mengatakan bahwa tautan terlalu dekat atau tombol terlalu kecil - atau silau membuat halaman terlalu sulit dibaca - kecuali jika Anda mengeluarkan tablet dan mencobanya sebelum Anda merilis desain situs web baru Anda.
