ขนาดปุ่มบนหน้าจอมือถือ – นิ้วโป้งใหญ่กว่าเมาส์.. หัวใจสำคัญของ Fitts’ Law (ตอนที่2)

By - - 626 views
SHARE : Share on Facebook0Share on Google+1Tweet about this on TwitterPin on Pinterest0

Fitts’ Law จริงๆ แล้วเป็นกฏธรรมชาติง่ายๆ ที่บอกว่า “ระยะเวลาที่ใช้ในการไปถึงเป้าหมายใดๆ นั้นแปรผันไปตามขนาดของเป้าหมาย และ ระยะห่างที่จะไปถึงเป้าหมายนั้น”

พูดทฤษฏีแล้วดูยากเชียว พูดให้ดูง่ายๆ ก็คือ

  • “ถ้าปุ่มมันเล็ก คุณก็จะกดยาก” และ
  • “ถ้าปุ่มมันไกล คุณก็จะเสียเวลาขยับนิ้ว (เมาส์)” นั่นเอง

ดังนั้นคุณควรจะออกแบบปุ่มให้ใหญ่พอที่จะกดได้สะดวก และอยู่ในตำแหน่งที่ไม่ไกลจากจุดเดิมที่นิ้ว (เมาส์) อยู่แค่นี้แหละครับ ไม่ใช่ทฤษฏีลึกลับซับซ้อนอะไรหรอก

ตัวอย่างแรกๆ ของปัญหาที่เกิดในยุค Mobile ที่เกี่ยวข้องกับ Fitts’ Law ก็คือ ปัญหาเรื่อง “นิ้วโป้งใหญ่กว่าเมาส์”

ความแตกต่างหลักๆ ข้อแรกของอุปกรณ์พกพากับคอมพิวเตอร์ตั้งโต๊ะ ก็คือ pointer ที่เราใช้ในการสั่งงานนั่นเองครับ บนคอมพิวเตอร์ พวกเราถนัดกับการใช้เมาส์ (ซึ่งมีขาดเนื้อที่กด 1×1 pixel) เลื่อนไปคลิกที่ปุ่ม หรือข้อความต่างๆ ดังนั้นเว็บไซต์ส่วนใหญ่จึงถูกออกแบบให้เหมาะกับการคลิกเมาส์

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

Fitts' Law and Pagination

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

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

นี่คือสิ่งที่ Fitts’ Law สอนเราเอาไว้ครับ..

Golden Rule ของเว็บไซต์ยุคใหม่ ที่เป็นมิตรกับอุปกรณ์พกพา (Touch-Friendly Website) คือกฏ 44 pixel จาก Apple นั่นก็คือ เราควรจะต้องสร้างลิงค์หรือปุ่มกดใดๆ ให้มีขนาดไม่เล็กกว่า 44px (สำหรับจอ retina หรือ 22 pixel สำหรับจอทั่วไป) เพื่อให้นิ้วสามารถกดได้สะดวกและไม่ผิดพลาด

Screen-Shot-2556-10-19-at-12.15.11-AM

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

ที่มา : ux.in.th

admin
admin

DOCS BY PRAWPUN.COM เป็นพื้นที่สำหรับช่วยบันทึกวิธีการแก้ปัญหาต่างๆที่เกิดขึ้นระหว่างการทำงาน ซึ่งบทความที่ได้มานี้ อาจมาจากปัญหาที่คนอื่นเคยเจอมาแล้วแล้วนำมาบอกต่อ หรือเขียนขึ้นมาเอง หวังว่าจะเป็นประโยชน์กับทุกคนที่เข้ามานะคะ :)

Comments are closed.