อุปกรณ์ที่มีหน้าจอขนาดเล็กอย่างโทรศัพท์มือถือมักมีหน้าจอสัมผัส อุปกรณ์ที่มีหน้าจอขนาดใหญ่ เช่น แล็ปท็อปและคอมพิวเตอร์เดสก์ท็อป มักมาพร้อมกับฮาร์ดแวร์ เช่น เมาส์หรือแทร็กแพด การทำให้หน้าจอขนาดเล็กมีการแตะและหน้าจอขนาดใหญ่มีตัวชี้เป็นเรื่องที่เต็มใจ
แต่ในความเป็นจริงนั้นต่างกันเล็กน้อยมาก แล็ปท็อปบางรุ่นมีหน้าจอสัมผัส ผู้ใช้จะโต้ตอบกับหน้าจอสัมผัสหรือแทร็กแพด หรือทั้งสองอย่างได้ คุณจะใช้แป้นพิมพ์หรือเมาส์ภายนอกกับอุปกรณ์หน้าจอสัมผัสอย่างเช่นแท็บเล็ตได้เช่นเดียวกัน
ใช้ฟีเจอร์สื่อใน 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 ที่มีค่า 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-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 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 เป็นส่วนเพิ่มเติมเล็กๆ ในช่องของแบบฟอร์ม แต่ก็สร้างความแตกต่างอย่างมากต่อประสบการณ์ของผู้ใช้ได้ การเตรียมพร้อมและตอบสนองต่อความสามารถของอุปกรณ์ของผู้ใช้ คุณกำลังเพิ่มศักยภาพให้ผู้ใช้ของคุณ เรามีหลักสูตรที่จะช่วยให้คุณเรียนรู้แบบฟอร์มเพื่อดูข้อมูลที่เจาะลึกยิ่งขึ้น
ต่อไปในหลักสูตรนี้ ก็ถึงเวลาที่เราจะมาดูรูปแบบอินเทอร์เฟซทั่วไป
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้ของคุณเกี่ยวกับการโต้ตอบ
คุณควรใช้ฟีเจอร์ใดแทนการพยายามอนุมานประเภทอินพุตของผู้ใช้จากขนาดหน้าจอ
@media (pointer: coarse) หรือ @media (-any-pointer: coarse)prompt() ของ JavaScripthandheld@media (pointer) และ @media (any-pointer) แตกต่างกันอย่างไร
any-pointer จะค้นหาประเภทอินพุตของอุปกรณ์ทุกประเภทสำหรับรายการที่ตรงกันทั้งหมดการป้อนข้อมูลประเภทใดแสดงแป้นพิมพ์เสมือนที่เหมาะสมกว่าสำหรับผู้ใช้
type="url"type="tel"type="number"type="email"