Interaksi

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