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. Anda mungkin tergoda untuk menyamakan layar kecil dengan sentuhan dan layar besar dengan penunjuk.

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 sebesar none, pengguna mungkin menggunakan keyboard untuk berinteraksi dengan situs Anda.

Jika browser melaporkan nilai pointer sebesar coarse, berarti mekanisme input utama tidak terlalu akurat. Jari di layar sentuh adalah pointer kasar.

Jika browser melaporkan nilai pointer sebesar fine, berarti mekanisme input utama mampu melakukan kontrol terperinci. Mouse atau stilus adalah penunjuk yang bagus.

Anda dapat menyesuaikan ukuran elemen antarmuka agar sesuai dengan nilai pointer. Coba buka situs demo ini di berbagai jenis perangkat untuk melihat cara penyesuaian 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 mengecilkan elemen untuk pointer 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, pertimbangkan baik-baik sebelum mengurangi ukuran elemen interaktif. Hukum Fitts tetap berlaku. Target yang lebih kecil memerlukan konsentrasi yang lebih tinggi meskipun dengan pointer yang halus. Area target yang lebih besar akan menguntungkan semua orang, terlepas dari perangkat penunjuk.

Pointer apa pun

Fitur media pointer melaporkan kehalusan mekanisme input utama. Namun, banyak perangkat memiliki lebih dari satu mekanisme input. Mungkin ada seseorang yang berinteraksi dengan situs Anda menggunakan layar sentuh dan mouse secara bersamaan.

Fitur media any-pointer berbeda dari pointer karena melaporkan apakah ada perangkat penunjuk yang lulus pengujian.

Nilai any-pointer none berarti tidak ada perangkat penunjuk yang tersedia.

Nilai any-pointer coarse berarti setidaknya satu perangkat penunjuk tidak terlalu akurat. Namun, hal 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 penting. Yang terakhir akan lebih diprioritaskan.

Dalam contoh ini, jika perangkat memiliki mekanisme input presisi dan perkiraan, gaya perkiraan akan diterapkan.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Melayang

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 penunjuk halus dan kasar, fitur media hover bersifat biner. Jika perangkat input utama dapat mengarahkan kursor ke elemen, perangkat tersebut akan melaporkan nilai hover. Jika tidak, nilainya adalah none.

Dalam contoh ini, beberapa ikon tambahan tersedia saat kursor diarahkan ke atas, tetapi hanya jika perangkat input utama dapat mengarahkan kursor 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 berpindah ke tombol, ikon akan tetap tidak terlihat. Saat Anda menggunakan keyboard, Anda berfokus, bukan mengarahkan kursor. Perangkat desktop dengan mouse yang terpasang akan melaporkan bahwa mekanisme input utama mampu mengarahkan kursor, yang 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 saat menyembunyikan informasi di balik interaksi arahkan kursor. Informasi menjadi lebih sulit ditemukan. Jangan gunakan pengarahan kursor untuk menyembunyikan informasi penting atau elemen antarmuka yang penting.

Dengan 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 Anda 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;
  }
}

Di perangkat yang tidak memiliki mekanisme input yang dapat mengarahkan kursor, ikon tambahan akan selalu terlihat.

Keyboard virtual

Pengguna menggunakan kursor dan jari untuk menjelajahi antarmuka, tetapi saat harus memasukkan informasi, mereka memerlukan keyboard. Tidak masalah jika ada keyboard fisik yang terhubung ke perangkat mereka, tetapi jika mereka menggunakan perangkat layar sentuh, hal ini akan sedikit lebih rumit. Perangkat ini menyediakan keyboard virtual di layar.

Jenis input

Tidak seperti keyboard fisik, keyboard virtual dapat disesuaikan agar sesuai 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, jika 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 mencakup tempat 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 membuat perbedaan 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 mempelajari beberapa pola antarmuka umum.

Uji pemahaman Anda

Uji pengetahuan Anda tentang interaksi