Interaksi

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:

Larangan
@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

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 95.
  • Safari: 12.1.

Source

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?

Jenis media CSS handheld
Meminta pengguna dengan prompt() JavaScript
Fitur media CSS

Apa perbedaan antara @media (pointer) dan @media (any-pointer)?

Pointer tidak mencakup hal-hal seperti mouse.
Setiap pointer mencakup hal-hal seperti jari Anda sebagai pointer.
Setiap pointer akan melaporkan benar jika input tambahan non-utama, seperti stilus, lulus pengujian.

Jenis input mana yang menampilkan keyboard virtual yang lebih sesuai bagi pengguna?

type="url"
type="number"
type="tel"
type="email"