ทฤษฎี UI

กฎของฟิตส์ (Fitts’s Law)

0

fitts-00

เราเคยสังเกตไหมว่า แต่ละครั้งที่เราเลื่อนเมาส์เพื่อไปคลิกปุ่มใดปุ่มหนึ่งบนหน้าจอนั้นมีความยากง่ายแค่ไหน ต้องใช้ความพยายามของกล้ามเนื้อมือมากน้อยเท่าไร พวกเราอาจจะคิดว่ามันก็แค่เรื่องง่ายๆ เพราะก็แค่ออกแบบปุ่มยังไงก็ได้ให้ผู้ใช้คลิกได้ก็พอแล้ว แต่มีกฎหนึ่งได้เข้ามามองพฤติกรรมการเคลือนไหวของกล้ามเนื้อมนุษย์เมื่อมีการปฏิสัมพันธ์กับหน้าจอคอมพิวเตอร์ (human-computer interaction)ได้อย่างน่าสนใจทีเดียวครับ

กฎของฟิตส์ (Fitts’s Law) คือกฎที่ว่าด้วยความสัมพันธ์ระหว่างเวลาที่ใช้ในการคลิกเลือกวัตถุเป้าหมายกับระยะทางจากวัตถุและขนาดของวัตถุเป้าหมาย

พอได้เริ่มกล่าวถึงกฎนี้แล้ว การจะให้ไม่แสดงสมการคงจะเป็นการไม่ให้เกียรติผู้ค้นพบนะครับ

fitts-09

MT = a + b log2 (2A/W)

ที่ซึ่ง

  • MT (movement time) คือ ระยะเวลาในการเคลื่อนพอยเตอร์หรือมือเพื่อไปกดปุ่มเป้าหมาย
  • a และ b คือค่าคงที่หนึ่งๆ ขึ้นอยู่กับอุปกรณ์
  • c คือคงที่ มีค่า 0, 0.5 หรือ 1
  • A คือระยะทางของจุดเริ่มต้นขอพอยเตอร์จนถึงวัตถุเป้าหมาย
  • W คือความกว้างของวัตถุเป้าหมาย (แนวเดียวกับแนวการเคลื่อนที่ของพอยเตอร์

ในสมการ ตัวแปรที่เราสนใจคือ A กับ W ซึ่งก็คือค่า ระยะห่างกับความกว้าง (ดูภาพด้านบนประกอบ) ส่วนตัวแปรอื่นเป็นค่าคงที่เราจึงไม่สนใจในตอนนี้ครับ

เรามาดูความสัมพันธ์ง่ายๆ กันก่อน ผมจึงลดทอนสมการเหลือแค่ MT = 2A/W คือไม่ต้องสนใจเรื่องฟังก์ชัน Log ฐาน 2 และค่าคงที่ใดๆ

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

ดูๆ ไปแล้วไม่เห็นมีอะไรยากและซับซ้อนเลยใช่ไหมครับ แต่ต่อจากนี้ล่ะครับ จะเห็นถึงความมหัศจรรย์ของกฏข้อนี้มากขึ้นครับ

เอาล่ะ ถ้างั้นผมกลับมาที่สมการดั้งเดิม เพียงแต่เอาพวกตัวแปรค่าคงที่ออกไป ก็จะเหลือ MT = log2 (2A/W)

ฟังก์ชันลอการิธึม (Logarithm) ในคณิตศาสตร์บ่งบอกถึงลักษณะการเปลี่ยนแปลงค่าที่ไม่เป็นเชิงเส้น โดยค่าจะเปลี่ยนแปลงอย่างเด่นชัดในช่วงแรก และจะเริ่มมองไม่เห็นการเปลี่ยนแปลงในช่วงที่ตัวแปรมีค่าสูง

อาจจะยังมองไม่เห็นภาพ งั้นเรามาดูกราฟกันครับ

Non-linear-progression-low-res

จากกราฟอย่างที่ผมได้บอกไปแล้วก่อนหน้าที่ว่า พอเราเพิ่มขนาดของปุ่มให้ใหญ่ขึ้น ระยะเวลาทีใช้ในการกดปุ่มก็จะน้อยลง (ปุ่มใหญ่กดง่าย) ซึ่งหมายความว่า ความสามารถในการใช้งานก็จะสูงขึ้น ในช่วงแรกๆ ของกราฟจะเห็นเลยว่าพอเราขยายขนาดปุ่มเป็น 2 เท่า (จากวงกลม 1 ไป 2) ค่า usability ก็เพิ่มขึ้นเป็น 2 เท่า (โดยประมาณ) แต่พอเราเพิ่มขนาดปุ่มใหญ่ระดับนึงแล้ว พอเพิ่มขึ้นด้วยปริมาณเท่าเดิมเมื่อเทียบกับกรณีแรก (จากวงกลม 3 ไป 4 ) ค่า usability กลับไม่ได้เพิ่มเป็นเท่าตัวอีกแล้ว เพราะความสัมพันธ์ที่เป็นลักษณะลอการิธึมนั่นเองครับ

fitts-03

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

fitts-04

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

fitts-05

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

fitts-06แต่ในระบบปฏิบัติการ Windows 7 และ 8 เป็นต้นไป ได้มีการสร้างปุ่มนอกหน้าจอ เพื่อเรียกแสดงเมนูเสริม ในแง่นี้คือเหมือนค่า W  เป็น infinity (ค่าอินฟินิตี้หารด้วยค่าอะไรก็ตาม จะมีค่าเข้าใกล้ 0) ดังนั้นระยะเวลาที่ใช้ในการคลิกเลือกวัตถุที่อยู่นอกขอบจอจึงขึ้นกับอัตราเร่งของการเคลื่อนเมาส์ของเราเท่านั้นแล้ว และสุดท้ายมันก็คือ ค่าคงที่ค่าหนึ่งนั่นเอง (สมการ MT = a + 0)

fitts-07ที่ตำแหน่งมุมของหน้าจอ ก็สามารถวางวัตถุเป้าหมายได้เช่นกัน ซึ่งที่ตำแหน่งนี้เสมือนกับว่าเป็นอิสระกับทุกมิติเลยครับ ทำให้ง่ายต่อคลิกและไม่จำเป็นต้องลดทอนความเร่งในการเคลื่อนที่เมาส์แต่อย่างใด นั่นคือ เหตุผลว่าทำไม Windows 7 เป็นต้นไป หน้า desktop จึงวางตำแหน่งปุ่ม show desktop ไว้ที่มุมขวาของหน้าจอ (ผมมีเขียนไปในบทความ มหัศจรรย์ปุ่ม show desktop)

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

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

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

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

รูปและข้อมูล: smashing magazine, www.particletree.com, www.cs.umd.edu

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

ไฟล์ฝึกหัดใช้เครื่องมือ Pen Tool

Previous article

รีวิวเว็บ Lazada

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *