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 tergoda untuk menyamakan layar kecil dengan sentuh dan layar besar dengan pointer.
Namun, kenyataannya lebih rumit. Beberapa laptop memiliki kemampuan layar sentuh. Pengguna dapat berinteraksi dengan layar sentuh atau 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
none
, pengguna mungkin menggunakan keyboard untuk berinteraksi dengan situs Anda.
Jika browser melaporkan nilai pointer
coarse
, artinya mekanisme input utama tidak terlalu akurat. Jari di layar sentuh adalah pointer kasar.
Jika browser melaporkan nilai pointer
fine
, artinya mekanisme input utama mampu melakukan kontrol 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 bagaimana antarmuka 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 lebih kecil untuk pointer yang halus, tetapi berhati-hatilah saat melakukannya:
@media (pointer: fine) { button { padding: 0.25em 0.5em; } }
Meskipun seseorang memiliki mekanisme input utama yang mampu melakukan kontrol terperinci, pikirkan dua kali sebelum mengurangi ukuran elemen interaktif. Hukum Fitts tetap berlaku. Target yang lebih kecil memerlukan lebih banyak konsentrasi meskipun dengan pointer yang bagus. Area target yang lebih besar akan menguntungkan semua orang, terlepas dari perangkat penunjuk yang digunakan.
Pointer apa pun
Fitur media pointer
melaporkan kehalusan mekanisme input utama. Namun, banyak perangkat memiliki lebih dari satu mekanisme input. Mungkin seseorang berinteraksi dengan situs Anda menggunakan layar sentuh dan mouse secara bersamaan.
any-pointer
berbeda dengan fitur media pointer
karena melaporkan apakah perangkat penunjuk lulus pengujian.
Nilai any-pointer
none
berarti tidak ada perangkat penunjuk yang tersedia.
Nilai any-pointer
coarse
berarti setidaknya ada satu perangkat penunjuk yang tidak terlalu akurat. Namun, itu mungkin bukan mekanisme input utama.
Nilai any-pointer
fine
berarti setidaknya ada satu perangkat penunjuk yang mampu melakukan kontrol terperinci. 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 Anda sangatlah 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. Hal 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
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 mengarahkan kursor, 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 beralih ke tombol, ikon akan 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 melayang, 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 tersebut.
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 saat menyembunyikan informasi di balik interaksi pengarahan kursor. Informasi menjadi kurang mudah ditemukan. Jangan gunakan 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.
Sama seperti any-pointer
yang melaporkan mekanisme input apa pun, any-hover
akan bernilai benar jika salah satu mekanisme input yang tersedia dapat mengarahkan kursor ke elemen.
Jika memutuskan untuk membalikkan logika dalam 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 akan selalu terlihat.
Keyboard virtual
Orang menggunakan kursor dan jari untuk menjelajahi antarmuka, tetapi saat tiba waktunya untuk memasukkan informasi, mereka memerlukan keyboard. Tidak masalah jika ada keyboard fisik yang terpasang ke perangkat mereka, tetapi jika mereka menggunakan perangkat layar sentuh, hal ini 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 menampilkan keyboard virtual yang paling sesuai.
Jenis input HTML5 adalah cara yang bagus untuk mendeskripsikan elemen input
Anda. 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
Tidak ada yang suka mengisi formulir. Sebagai desainer, Anda dapat meningkatkan pengalaman pengguna dengan memungkinkan mereka mengisi kolom formulir secara otomatis. Atribut autocomplete
memberi Anda berbagai 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 pada kolom formulir Anda, tetapi dapat memberikan dampak besar pada pengalaman pengguna. Dengan mengantisipasi dan merespons kemampuan perangkat pengguna, Anda memberdayakan pengguna. Untuk informasi yang lebih mendalam, ada kursus khusus untuk membantu Anda mempelajari formulir.
Selanjutnya dalam kursus ini, saatnya untuk memeriksa beberapa pola antarmuka umum.
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang interaksi
Fitur mana yang sebaiknya Anda gunakan, bukan mencoba menyimpulkan jenis input pengguna dari ukuran layar?
handheld
prompt()
JavaScriptApa perbedaan antara @media (pointer)
dan @media (any-pointer)
?
Jenis input mana yang menampilkan keyboard virtual yang lebih sesuai bagi pengguna?
type="url"
type="number"
type="tel"
type="email"