Touch Targets — เล็กๆไม่..ใหญ่ๆดี
คุณเคยประสบปัญหาอันน่าหงุดหงิดกับการกดปุ่มบนหน้าจอ Smartphone ซํ้าแล้ว ซํ้าเล่า แต่กลับไม่มีอะไรเกิดขึ้นใช่หรือไม่? จนบางครั้งคุณเริ่มสงสัยว่าไอ้เจ้านิ้วของเรามันอ้วนใหญ่เกินไปหรือเปล่า?
บางทีปัญหามันอาจจะไม่ได้อยู่ที่นิ้วมือ(ที่อาจจะอ้วนใหญ่)ของคุณหรอกครับ ปัญหามันเกิดจากเจ้าปุ่มเล็กๆนั่นต่างหาก!
Touch Targets
หลายคนที่เป็น UX/UI Designer คงเคยได้ยินคำว่า Touch Targets หรือบางที อาจจะเคยได้ยินคำว่า Touch Area บนหน้าจอ Smartphone กันมาบ้าง แต่สิ่งที่ผู้เขียนต้องการจะเน้นยํ้าในบทความนี้ก็คือ เจ้า Touch Targets อันเล็กๆที่บางทีเหล่า Designer มักมองข้ามไปจนทำให้เกิดปัญหาสำหรับ User กันบ่อยๆนั่นเอง
ตัวอย่างปัญหาสุด Classic ที่เราพบกันบ่อยๆ ก็คือ Touch Targets Size นั้นมีขนาดเล็กเกินไป ทำให้ User ไม่สามารถกดปุ่มได้ถูกต้อง ซํ้าร้ายกว่านั้น User ดันไปกดโดนปุ่มอื่นใกล้เคียงโดยไม่ได้ตั้งใจ สร้างความอึดอัดและสถานการณ์ชวนหัวร้อนแก่ User เป็นอย่างยิ่ง ซึ่งเราจะมาเคลียร์ปัญหานี้ให้เหล่า UX/UI Designer ออกแบบ UI ให้มีความเป็น Finger-friendly มากที่สุดโดยไม่ทำให้เสียความสมดุลระหว่างความสวยงามและการใช้งาน
แต่ก่อนอื่นเรามารู้จักกับเจ้า Touch Targets กันดีกว่าครับ
แล้ว Touch Targets มันคืออะไรกัน?
Touch Targets ตามนิยามของผู้เขียนคือ
องค์ประกอบ หรือ Object ของ User Interface บนหน้าจอที่ User มีปฏิสัมพันธ์ เพื่อที่จะต้องการให้บรรลุจุดประสงค์อย่างใดอย่างหนึ่ง
องค์ประกอบหรือ Object ในที่นี้ ถ้าเปรียบเทียบตัวอย่างให้เข้าใจง่ายๆสำหรับผมก็คือพื้นที่ในการกดของ ปุ่ม, Icon หรือ Link ต่างๆ นั่นเองครับ
แน่นอนว่าถ้าพูดถึง Touch Targets สิ่งที่ต้องพูดถึงหลักๆ ก็คือเรื่องของ “Size” หรือ “ขนาด” หากมีขนาดเล็กเกินไป ก็จะทำให้ยากในการกดอย่างถูกต้องและแม่นยำ ซึ่ง Process ของการกด Icon หรือ Link ต่างๆ ควรจะเป็นสิ่งที่เรียบง่ายที่สุด หาก User ไม่สามารถทำได้ตามจุดประสงค์ที่ต้องการ จะทำให้ User รู้สึกว่าเป็นความบกพร่องของตัว User เอง (User Error) และนำไปสู่ประสบการณ์ที่เลวร้ายในการใช้งาน Function ต่างๆ
เรื่อง ”ขนาด” สำคัญขนาดนั้นเลยหรอ?
ในแง่ของ UI Design นั้น ถ้าว่ากันตามทฤษฎี Touch Targets ยิ่งมีขนาดใหญ่เท่าใด ก็ยิ่งทำ User ใช้งานได้ง่ายมากขึ้นเท่านั้น
แต่ในความเป็นจริงก็ถือว่าเป็นเรื่องยากที่เราจะ Design ให้ทุกอย่างมีขนาดใหญ่ไว้ก่อนเสมอได้ ยิ่งหากต้องการให้สมดุลระหว่างความสวยงามและการใช้งานจริง ยิ่งเมื่อ “ขนาด” มีผลต่อการใช้งานของ User ค่อนข้างมาก จึงควรมีการกำหนดขนาด Touch Targets หรือพื้นที่สำหรับการกดที่เหมาะสมในการออกแบบ UI
คำถามต่อไปก็คือ
เราควรจะกำหนดขนาด Touch Targets เป็นขนาดไหนดีถึงจะเหมาะสม?
ซึ่งตาม Guideline ของ Android หรือ iOS นั้น มีการกำหนดขนาดที่แนะนำต่างกันออกไปดังนี้ครับ
ในระบบของ iOS ขนาด Touch Targets ที่แนะนำตาม Human Interface Guidelines ของ Apple ระบุไว้ว่า Touch Target ควรมีขนาด กว้าง 44 px และสูง 44 px เป็นอย่างน้อย
และในระบบของ Android ตาม Material Design Guidelines นั้นกำหนดไว้ว่าขนาด Touch Targets อย่างน้อยควรมีขนาดกว้าง 48 dp สูง 48 dp ซึ่งหากเราเปรียบเทียบเป็น Physical Size จะแนะนำให้อยู่ที่ขนาดประมาณ 7–10mm ขึ้นอยู่กับขนาดหน้าจอ
ตัวอย่างการกำหนด Touch targets เมื่อนำไปใช้งานจริง
จากบทความก่อนหน้านี้ของผม ได้พูดถึงวิธีการ Design ตัว System Icon และการนำมาใช้งาน ผมเลยอยากจะยกตัวอย่างการนำ Touch Targets มา Applyใช้ร่วมกับ Icon โดยตัวอย่าง System Icon ที่ผมได้ออกแบบนั้น กำหนดให้มีขนาด 24 dp (ตาม Material Guidline) พื้นที่ของ Touch Targets ควรมีขนาด 48 x 48 dp ล้อมรอบ System Icon และควรมี Space Padding แยกระหว่างแต่ละ Component ประมาณ 8dp/16dp ป้องกันการกดโดน Component อื่นใกล้เคียงโดยไม่ได้ตั้งใจ เพื่อความสะดวกและง่ายต่อการกดปุ่ม Icon นั่นเอง
ถ้าอยากรู้เกี่ยวกับ System Icon Design เพิ่มเติมสามารถอ่านได้จาก Link บทความที่แล้วด้านล่างนี้ครับ
ถึงแม้ว่าจะมี Guidelines ของขนาดต่างๆที่แนะนำสำหรับการออกแบบ แต่ขนาดตาม Guidelines ที่กล่าวถึงเบื้องต้น อาจจะยังมีขนาดที่เล็กไปสำหรับ User บางกลุ่ม ยกตัวอย่างเช่นกลุ่ม User ที่เป็นผู้สูงอายุ อาจจะไม่สามารถกดปุ่มหรือ Icon ที่มีขนาดเล็กได้ง่ายมากนัก ซึ่งเราอาจจะนำหลักการ Physical Limitations จากการศึกษาของ MIT Touch Lab มาเป็นตัวกำหนดขนาดของ Touch Targets แทนได้
Physical Limitation คืออะไร?
Physical Limitation คือทฤษฎีศึกษาในเรื่องของ นิ้วมือมนุษย์และกลไกการรับรู้ได้ด้วยการสัมผัส (Human Fingertips to Investigate the Mechanics of Tactile Sense) จากการศึกษาค้นพบว่า ค่าเฉลี่ยของขนาดนิ้วมือมนุษย์จะอยู่ที่ 16–20mm ซึ่งอาจจะเป็นการดีที่สุดที่จะกำหนดขนาด Touch Targets ให้กว้างประมาณ 54px/dp เป็นอย่างน้อย เพื่อหลีกเลี่ยง User Error จากการกด
ไม่เพียงแต่เราต้องคำนึงถึงขนาดของ Touch Targets แล้ว ยังมีเรื่องพฤติกรรมการใช้งานของ User ที่เราต้องนํามาประยุกษ์ใช้ในขั้นตอนการ Design อีกด้วย เช่น พฤติกรรมที่ User ส่วนใหญ่นิยมใช้มือเดียวในการถือ Smartphone แล้วใช้นิ้วโป้งสำหรับการกดปุ่มบน Touchscreen
ซึ่งจากงาน Research ของ Steven Hoober พบว่า
- 49% มีพฤติกรรมใช้มือเดียวสำหรับการถือ Smartphone (One-handed Grip)
- 36% เป็นการใช้มือหนึ่งถือ Smartphone และมืออีกข้างในการกด (Cradled)
- 15% เป็นการใช้สองมือในการถือและกดพร้อมกัน (Two-handed Grip)
อีกทั้งจากข้อมูลพฤติกรรมการถือ Smartphone ข้างต้นยังพบว่า กว่า 75% เป็น User ที่มีพฤติกรรมใช้นิ้วโป้ง ในการกดแทบทั้งหมดอีกด้วย
สิ่งที่แตกต่างอย่างเห็นได้ชัด สำหรับการกดโดยการใช้นิ้วโป้งนั่นก็คือ เรื่องขนาดความกว้างของนิ้ว ซึ่งมีขนาดใหญ่กว่านิ้วชี้ โดยค่าเฉลี่ยขนาดความกว้างของนิ้วโป้งผู้ใหญ่นั้น จะอยู่ที่ประมาณ 1-inch หรือ 25mm ซึ่งหากแปลงเป็นหน่วย Pixels จะอยู่ที่ประมาณ 72px/dp นั่นเองครับ
การกำหนดขนาด Touch Targets ตามที่แนะนำนี้ สามารถช่วยให้ User สามารถกดปุ่มหรือ Icon ได้สะดวกและง่ายมากยิ่งขึ้น ด้วยความกว้างของ Touch Targets ช่วยให้ User สามารถเห็นขอบของ Visual Target ได้ชัดเจน ว่ากดถูกต้องหรือไม่ โดยที่แทบไม่ต้องปรับเอียงการวางตัวของนิ้วในขณะที่กด ก็สามารถเห็น Touch Target ได้อย่างถูกต้องและแม่นยำ
ถึงแม้ว่าเราจะมี Guidelines ต่างๆ สำหรับขนาดของ Touch Targets ที่เหมาะสม แต่วิธีที่ดีที่สุด คือการทำ Usability Test เพื่อทดสอบกับ User จริงๆ ส่วน Guidelines เป็นแค่วิธีพื้นฐานไว้เริ่มต้นในการออกแบบ แต่ความเห็นหรือ Feedback จากการทดสอบ User ที่ใช้งานจริงนั้นยังคงเป็น Guidelines ที่ดีที่สุดสำหรับ UX/UI Designer ที่จะเอามาปรับใช้ให้เหมาะสมกับ Project แต่ละแบบนั่นเองครับ
Wrap-up
- Touch Targets คือ องค์ประกอบ หรือ Object ของ User Interface บนหน้าจอที่ User มีปฏิสัมพันธ์ อธิบายสั้นๆคือ พื้นที่ในการกดของปุ่ม, Icon หรือ Link ต่างๆ
- Touch Targets หากมีขนาดเล็กเกินไป จะทำให้ยากในกดอย่างถูกต้องและแม่นยำ
- Touch Targets ที่แนะนำตาม Human Interface Guidelines บน iOS ควรมีขนาด กว้าง 44 px และสูง 44 px เป็นอย่างน้อย
- Touch Targets ที่แนะนำตาม Material Design Guidelines บน Android ควรมีขนาด กว้าง 48 dp และสูง 48 dp เป็นอย่างน้อย
- ข้อมูลศึกษาจาก MIT Touch Lab ค้นพบว่า ค่าเฉลี่ยของขนาดนิ้วมือมนุษย์จะอยู่ที่ 16–20mm
- ความกว้างโดยเฉลี่ยของนิ้วโป้งผู้ใหญ่นั้น จะอยู่ที่ประมาณ 1 inch หรือ 25mm
- งาน Research ของ Steven Hoober พบว่า คนส่วนใหญ่มีพฤติกรรมใช้มือเดียวสำหรับการถือ Smartphone มากที่สุด และมีพฤติกรรมใช้นิ้วโป้งในการกดแทบทั้งหมด
- Guidelines เป็นแค่วิธีพื้นฐานไว้เริ่มต้นในการออกแบบ แต่ Usability Test คือข้อมูลที่ดีที่สุด
สิ่งที่เขียนในบทความนี้ เป็นการสรุปมาจากการเรียนรู้เพื่อแบ่งปันให้กับผู้อื่น หากว่ามีจุดที่ขาดตกหรืออยากรู้ตรงไหนเพิ่มเติม ก็สามารถมาพูดคุยกันได้ในช่อง Comment นะครับ
References:
https://developer.apple.com/
https://material.io/
https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
http://touchlab.mit.edu/publications/2003_009.pdf
https://medium.com/@zacdicko/size-matters-accessibility-and-touch-targets-56e942adc0cc
