การโต้ตอบ

อุปกรณ์หน้าจอขนาดเล็ก เช่น โทรศัพท์มือถือ มักจะมีหน้าจอสัมผัส ส่วนอุปกรณ์หน้าจอขนาดใหญ่ เช่น แล็ปท็อปและคอมพิวเตอร์เดสก์ท็อป มักจะมาพร้อมกับฮาร์ดแวร์อย่างเมาส์หรือแทร็กแพด เราจึงมักจะคิดว่าหน้าจอขนาดเล็กต้องใช้การสัมผัส ส่วนหน้าจอขนาดใหญ่ต้องใช้ตัวชี้

แต่ในความเป็นจริงแล้ว เรื่องนี้ซับซ้อนกว่านั้น แล็ปท็อปบางรุ่นมีความสามารถในการใช้หน้าจอสัมผัส ผู้ใช้จึงโต้ตอบกับอุปกรณ์ได้ทั้งผ่านหน้าจอสัมผัสหรือแทร็กแพด หรือทั้ง 2 อย่าง ในทำนองเดียวกัน คุณสามารถใช้แป้นพิมพ์หรือเมาส์ภายนอกกับอุปกรณ์หน้าจอสัมผัส เช่น แท็บเล็ตได้

แทนที่จะพยายามอนุมานกลไกอินพุตจากขนาดหน้าจอ ให้ใช้ฟีเจอร์สื่อใน CSS

ตัวชี้

คุณสามารถทดสอบค่าที่เป็นไปได้ 3 ค่าด้วยฟีเจอร์สื่อ pointer ได้แก่ none, coarse และ fine

หากเบราว์เซอร์รายงานค่า pointer เป็น none แสดงว่าผู้ใช้อาจใช้แป้นพิมพ์เพื่อโต้ตอบกับเว็บไซต์ของคุณ

หากเบราว์เซอร์รายงานค่า pointer เป็น coarse แสดงว่ากลไกอินพุตหลักไม่แม่นยำมากนัก นิ้วบนหน้าจอสัมผัสถือเป็นตัวชี้แบบหยาบ

หากเบราว์เซอร์รายงานค่า pointer เป็น fine แสดงว่ากลไกอินพุตหลักสามารถควบคุมได้อย่างละเอียด เมาส์หรือสไตลัสถือเป็นตัวชี้แบบละเอียด

คุณสามารถปรับขนาดขององค์ประกอบอินเทอร์เฟซให้เหมาะกับค่า pointer ได้ ลองเข้าชม เว็บไซต์เดโมนี้ ในอุปกรณ์ประเภทต่างๆ เพื่อดูว่าอินเทอร์เฟซปรับเปลี่ยนอย่างไร

ในตัวอย่างนี้ เราได้ขยายขนาดปุ่มให้ใหญ่ขึ้นสำหรับตัวชี้แบบหยาบ

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

คุณยังสามารถลดขนาดองค์ประกอบสำหรับตัวชี้แบบละเอียดได้ แต่โปรดระมัดระวังในการดำเนินการนี้

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

แม้ว่าผู้ใช้จะมีกลไกอินพุตหลักที่สามารถควบคุมได้อย่างละเอียด แต่คุณก็ควรคิดให้รอบคอบก่อนที่จะลดขนาดองค์ประกอบแบบโต้ตอบ กฎของ Fitts ยังคงมีผลอยู่ เป้าหมายที่เล็กลงต้องใช้สมาธิมากขึ้นแม้จะใช้ตัวชี้แบบละเอียดก็ตาม พื้นที่เป้าหมายที่ใหญ่ขึ้นเป็นประโยชน์ต่อทุกคนไม่ว่าจะเป็นอุปกรณ์ชี้ประเภทใดก็ตาม

ตัวชี้ใดก็ได้

ฟีเจอร์สื่อ pointer จะรายงานความละเอียดของกลไกอินพุต หลัก แต่มีอุปกรณ์จำนวนมากที่มีกลไกอินพุตมากกว่า 1 อย่าง ผู้ใช้อาจโต้ตอบกับเว็บไซต์ของคุณโดยใช้ทั้งหน้าจอสัมผัสและเมาส์พร้อมกัน

any-pointer แตกต่างจากฟีเจอร์สื่อ pointer ตรงที่ any-pointer จะรายงานว่าอุปกรณ์ชี้ใดผ่านการทดสอบ

ค่า any-pointer เป็น none หมายความว่าไม่มีอุปกรณ์ชี้พร้อมใช้งาน

ค่า any-pointer เป็น coarse หมายความว่ามีอุปกรณ์ชี้อย่างน้อย 1 อย่างที่ไม่แม่นยำมากนัก แต่กลไกอินพุตหลักอาจไม่ใช่กลไกอินพุตนั้น

ค่า any-pointer เป็น fine หมายความว่ามีอุปกรณ์ชี้อย่างน้อย 1 อย่างที่สามารถควบคุมได้อย่างละเอียด แต่กลไกอินพุตหลักอาจไม่ใช่กลไกอินพุตนั้น

เนื่องจากคําค้นหาสื่อ any-pointer จะรายงานผลลัพธ์เป็นบวกหาก ใดๆ ของกลไกอินพุตผ่านการทดสอบ เบราว์เซอร์จึงอาจรายงานผลลัพธ์สำหรับ any-pointer: fine และรายงานผลลัพธ์สำหรับ any-pointer: coarse ด้วย ในกรณีนี้ ลำดับของคําค้นหาสื่อมีความสำคัญ โดยคําค้นหาสื่อสุดท้ายจะมีผลเหนือกว่า

ในตัวอย่างนี้ หากอุปกรณ์มีกลไกอินพุตทั้งแบบละเอียดและแบบหยาบ ระบบจะใช้สไตล์แบบหยาบ

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

วางเมาส์

ฟีเจอร์สื่อ hover จะรายงานว่ากลไกอินพุตหลักสามารถวางเมาส์เหนือองค์ประกอบได้หรือไม่ ซึ่งโดยปกติแล้วหมายความว่ามีเคอร์เซอร์บางประเภทบนหน้าจอที่ควบคุมด้วยเมาส์หรือแทร็กแพด

ฟีเจอร์สื่อ hover เป็นแบบไบนารี ซึ่งแตกต่างจากฟีเจอร์สื่อ pointer ที่แยกความแตกต่างระหว่างตัวชี้แบบละเอียดและแบบหยาบ หากอุปกรณ์อินพุตหลักสามารถวางเมาส์เหนือองค์ประกอบได้ ฟีเจอร์สื่อ hover จะรายงานค่าเป็น hover แต่หากทำไม่ได้ ค่าจะเป็น none

ในตัวอย่างนี้ ไอคอนเสริมบางรายการจะปรากฏเมื่อวางเมาส์เหนือองค์ประกอบ แต่จะปรากฏก็ต่อเมื่ออุปกรณ์อินพุตหลักสามารถวางเมาส์เหนือองค์ประกอบได้

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

หากคุณใช้เมาส์วางเมาส์เหนือปุ่มดังกล่าว ไอคอนจะปรากฏขึ้น แต่หากคุณใช้แป้นพิมพ์เพื่อไปยังปุ่มด้วยการกด Tab ไอคอนจะยังคงมองไม่เห็น เนื่องจากการใช้แป้นพิมพ์เป็นการโฟกัส ไม่ใช่การวางเมาส์ อุปกรณ์เดสก์ท็อปที่ต่อเมาส์ไว้จะรายงานว่ากลไกอินพุตหลักสามารถวางเมาส์เหนือองค์ประกอบได้ ซึ่งเป็นความจริง แต่ผู้ที่ใช้แป้นพิมพ์ขณะต่อเมาส์ไว้จะไม่ได้รับประโยชน์จากสไตล์ :hover ดังนั้นจึงควรใช้สไตล์ :hover และ :focus ร่วมกันเพื่อครอบคลุมการโต้ตอบทั้ง 2 แบบ

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

แม้ว่าอุปกรณ์อินพุตหลักจะสามารถวางเมาส์เหนือองค์ประกอบได้ แต่คุณก็ควรระมัดระวังในการซ่อนข้อมูลไว้เบื้องหลังการโต้ตอบแบบวางเมาส์ เนื่องจากข้อมูลจะค้นพบได้ยากขึ้น อย่าใช้การวางเมาส์เพื่อซ่อนข้อมูลสำคัญหรือองค์ประกอบอินเทอร์เฟซที่สำคัญ

การวางเมาส์ใดก็ได้

คําค้นหาสื่อ hover จะรายงานเฉพาะกลไกอินพุต หลัก อุปกรณ์บางอย่างมีกลไกอินพุตหลายอย่าง ได้แก่ หน้าจอสัมผัส เมาส์ แป้นพิมพ์ และแทร็กแพด

เช่นเดียวกับที่ any-pointer รายงานกลไกอินพุตใดก็ได้ any-hover จะเป็นจริงหากกลไกอินพุตที่มีอยู่สามารถวางเมาส์เหนือองค์ประกอบได้

หากคุณตัดสินใจที่จะกลับตรรกะในตัวอย่างก่อนหน้า คุณสามารถตั้งค่าสไตล์การวางเมาส์ให้เป็นค่าเริ่มต้น แล้วนำสไตล์ดังกล่าวออกหาก any-hover มีค่าเป็น none

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

ในอุปกรณ์ที่ไม่มีกลไกอินพุตที่สามารถวางเมาส์เหนือองค์ประกอบได้ ไอคอนพิเศษจะปรากฏให้เห็นเสมอ

แป้นพิมพ์เสมือน

ผู้คนใช้เคอร์เซอร์และนิ้วเพื่อสำรวจอินเทอร์เฟซ แต่เมื่อถึงเวลาป้อนข้อมูล พวกเขาจำเป็นต้องใช้แป้นพิมพ์ ซึ่งไม่เป็นปัญหาหากอุปกรณ์มีแป้นพิมพ์จริงต่ออยู่ แต่หากใช้หน้าจอสัมผัสก็จะซับซ้อนขึ้นเล็กน้อย เนื่องจากอุปกรณ์เหล่านี้มีแป้นพิมพ์เสมือนบนหน้าจอ

ประเภทอินพุต

แป้นพิมพ์เสมือนสามารถปรับให้เหมาะกับอินพุตที่คาดไว้ได้ ซึ่งแตกต่างจากแป้นพิมพ์จริง หากคุณระบุข้อมูลเกี่ยวกับอินพุตที่คาดไว้ อุปกรณ์จะแสดงแป้นพิมพ์เสมือนที่เหมาะสมที่สุด

ประเภทอินพุต HTML5 เป็นวิธีที่ยอดเยี่ยมในการอธิบายองค์ประกอบ input แอตทริบิวต์ type ยอมรับค่าต่างๆ เช่น email, number, tel, url และอื่นๆ

  <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">

โหมดอินพุต

แอตทริบิวต์ inputmode ช่วยให้คุณควบคุมแป้นพิมพ์เสมือนได้อย่างละเอียด ตัวอย่างเช่น แม้ว่าจะมี input type ที่มีค่าเป็น number เพียงค่าเดียว แต่คุณสามารถใช้แอตทริบิวต์ inputmode เพื่อแยกความแตกต่างระหว่างจำนวนเต็มกับทศนิยมได้

หากต้องการขอจำนวนเต็ม เช่น อายุของบุคคล ให้ใช้ inputmode="numeric"

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

หากต้องการขอตัวเลขที่มีทศนิยม เช่น ราคา ให้ใช้ inputmode="decimal"

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

เติมข้อความอัตโนมัติ

ไม่มีใครชอบกรอกแบบฟอร์ม ในฐานะนักออกแบบ คุณสามารถปรับปรุงประสบการณ์การใช้งานของผู้ใช้ได้โดยเปิดใช้ตัวเลือกให้ผู้ใช้กรอกข้อมูลในช่องแบบฟอร์มโดยอัตโนมัติ แอตทริบิวต์ autocomplete มีตัวเลือกมากมายให้คุณใช้ปรับปรุงแบบฟอร์มติดต่อ แบบฟอร์มเข้าสู่ระบบ และแบบฟอร์มชำระเงิน

<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">

แอตทริบิวต์ HTML เหล่านี้ ได้แก่ type, inputmode และ autocomplete เป็นส่วนเพิ่มเติมเล็กๆ น้อยๆ ในช่องแบบฟอร์ม แต่สามารถสร้างความแตกต่างอย่างมากต่อประสบการณ์การใช้งานของผู้ใช้ได้ การคาดการณ์และตอบสนองต่อความสามารถของอุปกรณ์ของผู้ใช้เป็นการเพิ่มขีดความสามารถให้ผู้ใช้ หากต้องการข้อมูลเชิงลึกเพิ่มเติม เรามีหลักสูตรที่ออกแบบมาเพื่อช่วยให้คุณเรียนรู้เกี่ยวกับแบบฟอร์ม

หัวข้อถัดไปในหลักสูตรนี้คือการดูรูปแบบอินเทอร์เฟซที่พบได้บ่อย

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการโต้ตอบ