การโต้ตอบ

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

แต่จริงๆ แล้วมันยากกว่า แล็ปท็อปบางรุ่นสามารถใช้หน้าจอสัมผัสได้ ผู้ใช้จะโต้ตอบกับหน้าจอสัมผัสหรือแทร็กแพด หรือทั้ง 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;
  }
}

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

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

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

any-pointer แตกต่างจากฟีเจอร์สื่อของ 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 หรือค่านี้คือ 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-hover จะเป็นจริงเช่นเดียวกับรายงานของ any-pointer เกี่ยวกับกลไกอินพุตหากกลไกการป้อนข้อมูลที่มีอยู่วางเมาส์เหนือองค์ประกอบได้

หากคุณตัดสินใจเปลี่ยนตรรกะในตัวอย่างก่อนหน้า คุณก็ทำให้รูปแบบโฮเวอร์เป็นค่าเริ่มต้นได้ แล้วนําออกหาก 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 1 ค่าที่มีค่าเป็น 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 เป็นส่วนเล็กๆ ที่เพิ่มเข้ามาในช่องแบบฟอร์ม แต่ก็สร้างความแตกต่างให้กับประสบการณ์ของผู้ใช้ได้อย่างมาก การที่คุณคาดหวังและตอบสนองต่อความสามารถของอุปกรณ์ของผู้ใช้จะช่วยเพิ่มความสามารถให้กับผู้ใช้ได้ เรามีหลักสูตรที่ออกแบบมาเพื่อช่วยให้คุณเรียนรู้แบบฟอร์มสำหรับข้อมูลเชิงลึกเพิ่มเติม

ต่อไปในหลักสูตรนี้ ถึงเวลาทำความเข้าใจรูปแบบอินเทอร์เฟซทั่วไปแล้ว

ตรวจสอบความเข้าใจ

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