Perangkat layar kecil seperti ponsel sering kali memiliki layar sentuh. Perangkat layar besar seperti laptop dan komputer desktop sering kali dilengkapi dengan hardware seperti mouse atau trackpad. Anda mungkin ingin menyamakan layar kecil dengan sentuhan dan layar besar dengan pointer.
Namun, kenyataannya lebih bernuansa. Beberapa laptop memiliki kemampuan layar sentuh. Pengguna dapat berinteraksi dengan layar sentuh atau trackpad, atau keduanya. Demikian juga, Anda dapat menggunakan keyboard atau mouse eksternal dengan perangkat layar sentuh seperti tablet.
Daripada mencoba menyimpulkan mekanisme input dari ukuran layar, gunakan fitur media dalam CSS.
Pointer
Anda dapat menguji tiga kemungkinan nilai dengan fitur media pointer: none, coarse, dan fine.
Jika browser melaporkan nilai pointer sebesar none, pengguna mungkin menggunakan keyboard untuk berinteraksi dengan situs Anda.
Jika browser melaporkan nilai pointer dari coarse, artinya mekanisme input utama tidak terlalu akurat. Jari di layar sentuh merupakan pointer kasar.
Jika browser melaporkan nilai pointer dari fine, artinya mekanisme input utama dapat mengontrol secara terperinci. Mouse atau stilus adalah pointer yang bagus.
Anda dapat menyesuaikan ukuran elemen antarmuka agar sesuai dengan nilai pointer. Coba kunjungi situs ini di berbagai jenis perangkat untuk melihat adaptasi antarmuka.
Dalam contoh ini, tombol dibuat lebih besar untuk pointer kasar:
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
Anda juga dapat membuat elemen lebih kecil untuk pointer halus, tetapi berhati-hatilah saat melakukannya:
@media (pointer: fine) {
button {
padding: 0.25em 0.5em;
}
}
Bahkan jika seseorang memiliki mekanisme input utama yang mampu mengontrol secara terperinci, pikirkan dua kali sebelum mengurangi ukuran elemen interaktif. Hukum Fitts tetap berlaku. Target yang lebih kecil memerlukan konsentrasi yang lebih besar, bahkan dengan pointer yang halus. Area target yang lebih besar bermanfaat bagi semua orang, apa pun perangkat penunjuk.
Semua pointer
Fitur media pointer melaporkan kehalusan mekanisme input utama. Tetapi banyak perangkat memiliki
lebih dari satu mekanisme input. Ada kemungkinan seseorang berinteraksi dengan situs Anda menggunakan layar sentuh dan mouse secara bersamaan.
any-pointer berbeda dari fitur media pointer dalam hal ini melaporkan jika ada perangkat penunjuk yang lulus pengujian.
Nilai any-pointer none berarti tidak ada perangkat penunjuk yang tersedia.
Nilai any-pointer coarse berarti bahwa setidaknya satu perangkat penunjuk tidak terlalu akurat. Tapi itu mungkin bukan mekanisme input utama.
Nilai any-pointer fine berarti bahwa setidaknya satu perangkat penunjuk mampu mengontrol dengan terperinci. Sekali lagi, ini mungkin bukan mekanisme input utama.
Karena kueri media any-pointer akan melaporkan hasil positif jika salah satu mekanisme input lulus pengujian, browser dapat melaporkan hasil untuk any-pointer: fine dan juga melaporkan hasil untuk any-pointer: coarse. Dalam hal ini, urutan kueri media sangat penting. Yang terakhir akan diprioritaskan.
Dalam contoh ini, jika perangkat memiliki mekanisme input halus dan kasar, gaya kasar akan diterapkan.
@media (any-pointer: fine) {
button {
padding: 0.5em 1em;
}
}
@media (any-pointer: coarse) {
button {
padding: 1em 2em;
}
}
Arahkan kursor
Fitur media hover melaporkan apakah mekanisme input utama dapat mengarahkan kursor ke elemen. Ini biasanya berarti ada semacam kursor di layar yang dikontrol oleh mouse atau trackpad.
Tidak seperti fitur media pointer yang membedakan antara pointer halus dan kasar, fitur media hover adalah biner. Jika perangkat input utama dapat mengarahkan kursor ke elemen, perangkat input akan melaporkan nilai hover. Jika tidak, nilainya adalah none.
Dalam contoh ini, beberapa ikon tambahan tersedia saat kursor diarahkan tetapi hanya jika perangkat input utama dapat mengarahkan kursor ke elemen.
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:hover .extra {
visibility: visible;
}
}
Jika Anda menggunakan mouse untuk mengarahkan kursor ke tombol tersebut, ikon akan muncul. Namun, jika Anda menggunakan keyboard untuk menekan tombol {i>tab<i} pada tombol, ikon tersebut tetap tidak terlihat. Saat menggunakan keyboard, Anda berfokus, bukan mengarahkan kursor. Perangkat desktop dengan mouse terpasang akan melaporkan bahwa mekanisme input utama dapat mengarahkan kursor, yang memang benar. Namun, siapa pun yang menggunakan keyboard saat mouse terpasang tidak akan mendapatkan manfaat dari gaya :hover. Jadi, sebaiknya gabungkan gaya :hover dan :focus untuk mencakup kedua interaksi.
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:is(:hover, :focus) .extra {
visibility: visible;
}
}
Meskipun perangkat input utama dapat mengarahkan kursor ke elemen, berhati-hatilah dalam menyembunyikan informasi di balik interaksi pengarahan kursor. Informasi tersebut menjadi sulit ditemukan. Jangan gunakan pengarahan kursor untuk menyembunyikan informasi penting atau elemen antarmuka yang penting.
Pengarahan kursor apa pun
Kueri media hover hanya melaporkan mekanisme input utama. Sebagian perangkat memiliki beberapa mekanisme input: layar sentuh, mouse, keyboard, trackpad.
Sama seperti any-pointer yang melaporkan salah satu mekanisme input, any-hover akan bernilai benar jika salah satu mekanisme input yang tersedia dapat mengarahkan kursor ke elemen.
Jika memutuskan untuk membalik logika pada contoh sebelumnya, Anda dapat menjadikan gaya pengarahan kursor sebagai default, lalu menghapusnya jika any-hover memiliki nilai none.
button .extra {
visibility: hidden;
}
button:hover .extra,
button:focus .extra {
visibility: visible;
}
@media (any-hover: none) {
button .extra {
visibility: visible;
}
}
Pada perangkat yang tidak memiliki mekanisme input yang dapat mengarahkan kursor, ikon tambahan selalu terlihat.
Keyboard virtual
Orang menggunakan kursor dan jari untuk menjelajahi antarmuka, tetapi ketika harus memasukkan informasi, mereka memerlukan {i>keyboard<i}. Tidak masalah jika ada keyboard fisik yang terpasang ke perangkat mereka, tetapi jika mereka menggunakan perangkat layar sentuh, ini akan sedikit lebih rumit. Perangkat ini menyediakan keyboard virtual di layar.
Jenis input
Tidak seperti keyboard fisik, keyboard virtual dapat disesuaikan agar cocok dengan input yang diharapkan. Jika Anda memberikan informasi tentang input yang diharapkan, perangkat dapat menyediakan keyboard virtual yang paling sesuai.
Jenis input HTML5 adalah cara yang bagus untuk mendeskripsikan elemen input. Atribut type menerima nilai seperti email, number, tel, url, dan lainnya.
<label for="email">Email</label>
<input type="email" id="email">
<label for="number">Number</label>
<input type="number" id="number">
<label for="tel">Tel</label>
<input type="tel" id="tel">
<label for="url">URL</label>
<input type="url" id="url">
Mode input
Atribut inputmode memberi Anda kontrol mendetail atas keyboard virtual. Misalnya, meskipun ada satu input type dengan nilai number, Anda dapat menggunakan atribut inputmode untuk membedakan antara bilangan bulat dan desimal.
Jika Anda meminta bilangan bulat, seperti usia seseorang, gunakan inputmode="numeric".
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
Jika Anda meminta angka yang menyertakan tempat desimal, seperti harga, gunakan inputmode="decimal".
<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">
Pelengkapan Otomatis
Tak ada yang suka mengisi formulir. Sebagai seorang desainer, Anda dapat meningkatkan pengalaman pengguna dengan memungkinkan mereka untuk secara otomatis mengisi bidang formulir. Atribut autocomplete menyediakan sejumlah opsi untuk meningkatkan kualitas formulir kontak, formulir login, dan formulir checkout.
<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">
Atribut HTML ini—type, inputmode, dan autocomplete—adalah tambahan kecil untuk kolom formulir Anda, tetapi dapat membuat perbedaan besar bagi pengalaman pengguna. Dengan mengantisipasi dan merespons kemampuan perangkat pengguna, Anda memberdayakan pengguna Anda. Untuk informasi yang lebih mendalam, tersedia kursus khusus untuk membantu Anda mempelajari formulir.
Selanjutnya dalam kursus ini, saatnya mempelajari beberapa pola antarmuka umum.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang interaksi
Fitur mana yang harus Anda gunakan daripada mencoba menyimpulkan jenis input pengguna dari ukuran layar?
@media (pointer: coarse) atau @media (-any-pointer: coarse)prompt() JavaScripthandheldApa perbedaan antara @media (pointer) dan @media (any-pointer)?
any-pointer mengkueri semua jenis input perangkat untuk kecocokan apa pun.Tipe {i>input<i} mana yang menunjukkan keyboard virtual yang lebih sesuai untuk pengguna?
type="url"type="tel"type="number"type="email"