Perangkat layar kecil seperti ponsel sering kali memiliki layar sentuh. Perangkat layar besar seperti laptop dan komputer desktop sering dilengkapi dengan hardware seperti mouse atau trackpad. Kita 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, trackpad, atau keduanya. Demikian pula, Anda dapat menggunakan keyboard atau mouse eksternal dengan perangkat layar sentuh seperti tablet.
Daripada mencoba menyimpulkan mekanisme input dari ukuran layar, gunakan fitur media di CSS.
Penunjuk
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
, berarti mekanisme input utama tidak terlalu akurat. Jari di layar sentuh adalah pointer kasar.
Jika browser melaporkan nilai pointer
dari fine
, berarti mekanisme input utama dapat mengontrol secara mendetail. 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 bagaimana antarmukanya beradaptasi.
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 yang 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 dapat mengontrol secara mendetail, berpikirlah dua kali sebelum mengurangi ukuran elemen interaktif. Hukum Fitts tetap berlaku. Target yang lebih kecil memerlukan konsentrasi yang lebih besar, bahkan dengan pointer yang bagus. Area target yang lebih besar menguntungkan semua orang, apa pun perangkat penunjuknya.
Semua pointer
Fitur media pointer
melaporkan kehalusan mekanisme input utama. Namun, banyak perangkat memiliki lebih dari satu mekanisme input. Mungkin saja seseorang berinteraksi dengan situs Anda menggunakan layar sentuh dan mouse secara bersamaan.
any-pointer
berbeda dengan fitur media pointer
karena melaporkan jika ada perangkat pointer yang lulus pengujian.
Nilai any-pointer
none
berarti tidak ada perangkat penunjuk yang tersedia.
Nilai any-pointer
coarse
berarti bahwa setidaknya satu perangkat pointer tidak terlalu akurat. Namun, mungkin itu bukan mekanisme input utama.
Nilai any-pointer
fine
berarti setidaknya satu perangkat pointer dapat mengontrol secara mendetail. Namun, 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 menjadi 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 umum, fitur media hover
bersifat biner. Jika perangkat input utama dapat mengarahkan kursor ke elemen, perangkat akan melaporkan nilai hover
. Jika tidak, nilainya adalah none
.
Dalam contoh ini, beberapa ikon tambahan tersedia saat kursor diarahkan ke atasnya, tetapi hanya jika perangkat input utama dapat diarahkan ke atas 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 tab, ikon tersebut tetap tidak terlihat. Saat menggunakan keyboard, Anda akan berfokus, bukan mengarahkan kursor. Perangkat desktop dengan mouse yang terpasang akan melaporkan bahwa mekanisme input utama dapat mengarahkan kursor, yang benar. Namun, siapa pun yang menggunakan keyboard sambil memasang mouse 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 mampu mengarahkan kursor ke elemen, berhati-hatilah dalam menyembunyikan informasi di balik interaksi pengarahan kursor. Informasi menjadi sulit ditemukan. Jangan gunakan pengarahan kursor untuk menyembunyikan informasi penting atau elemen antarmuka penting.
Semua pengarahan kursor
Kueri media hover
hanya melaporkan mekanisme input utama. Beberapa perangkat memiliki beberapa mekanisme input: layar sentuh, mouse, keyboard, trackpad.
Seperti halnya any-pointer
yang melaporkan salah satu mekanisme input, any-hover
akan bernilai benar (true) jika salah satu mekanisme input yang tersedia dapat mengarahkan kursor ke elemen.
Jika memutuskan untuk membalikkan logika dalam contoh sebelumnya, Anda dapat membuat gaya pengarahan kursor menjadi 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 melayang, ikon tambahan akan selalu terlihat.
Keyboard virtual
Orang-orang menggunakan kursor dan jari untuk menjelajahi antarmuka, tetapi ketika tiba waktunya untuk memasukkan informasi, mereka membutuhkan keyboard. Tidak apa-apa jika ada keyboard fisik yang terpasang ke perangkat mereka, tetapi jika mereka menggunakan perangkat layar sentuh, prosesnya 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 menyajikan keyboard virtual yang paling sesuai.
Jenis input HTML5 adalah cara yang tepat 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 terperinci 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 angka 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 mengisi bidang formulir secara otomatis. Atribut autocomplete
memberi Anda 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
—merupakan tambahan kecil untuk kolom formulir Anda, tetapi atribut tersebut dapat membuat perbedaan besar pada pengalaman pengguna. Dengan mengantisipasi dan merespons kemampuan perangkat pengguna Anda, Anda memberdayakan pengguna Anda. Untuk informasi yang lebih mendalam, ada kursus yang dikhususkan untuk membantu Anda mempelajari formulir.
Selanjutnya dalam pelatihan ini, saatnya mempelajari beberapa pola antarmuka yang umum.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang interaksi
Fitur mana yang harus Anda gunakan untuk mencoba menyimpulkan jenis input pengguna dari ukuran layar?
handheld
prompt()
JavaScriptApa perbedaan antara @media (pointer)
dan @media (any-pointer)
?
Jenis input apa yang menunjukkan keyboard virtual yang lebih sesuai untuk pengguna?
type="email"
type="url"
type="number"
type="tel"