ทุกคนน่าจะเคยอ่านหรือเคยได้ยินคำว่า Laws of UX กันมาบ้างแล้ว ทฤษฎีนี้ช่วยในการออก User Experience ให้ดีขึ้น ไม่ว่าจะเป็น Jacob’s Law, Aesthetic-Usability Effect, Doherty Threshold หรือ Fitts’s Law แต่วันนี้ Unblock Design จะหยิบยก Fitts’s Law กฏที่ช่วยให้ User เข้าถึงเป้าหมายได้อย่างง่ายดายมาอธิบายให้ฟัง และสามารถนำไปปรับใช้ในงานออกแบบได้
Fitts’s Law ตั้งชื่อตามนักจิตวิทยาชื่อดัง Paul Fitts เขาได้สร้างกฎข้อหนึ่งเกี่ยวกับการมองพฤติกรรมการเคลื่อนไหวของกล้ามเนื้อมนุษย์เมื่อมีการปฏิสัมพันธ์กับหน้าจอคอมพิวเตอร์ (Human-Computer Interaction) ได้อย่างน่าสนใจ
Fitts’s Law เป็นหลักการที่ใช้คำนวณระยะเวลาในการเคลื่อนที่ของ Pointer เช่น นิ้วมือ หรือ เมาส์ เพื่อไปถึงวัตถุเป้าหมาย เช่น ปุ่ม หรือ ลิงก์ ระยะเวลาตรงนี้จะแปรผกผันกับความง่ายในการใช้งาน ซึ่งขึ้นอยู่กับ 2 ปัจจัยหลัก คือ ระยะห่างระหว่างเป้าหมายกับ Pointer และ ขนาดของวัตถุเป้าหมาย
วัตถุเป้าหมายที่อยู่ห่างออกไป มักใช้เวลาในการเคลื่อน Pointer ไปหานานกว่า จากรูปภาพที่ 1 แสดงให้เห็นว่า หาก Pointer กับวัตถุเป้าหมายอยู่ห่างกันมาก ค่า A ก็จะมากขึ้นตามไปด้วย ทำให้ใช้เวลาในการเลื่อนเมาส์ไปกดปุ่มมากขึ้น แต่ในทางกลับกัน ถ้าเราเพิ่มขนาดปุ่มให้ใหญ่ขึ้นค่า W ก็จะเพิ่มขึ้นตามขนาดของปุ่มเช่นกัน ทำให้ใช้เวลาในการเลื่อนเมาส์ไปกดปุ่มสั้นลง แต่การที่เราเพิ่มขนาดของปุ่มให้ใหญ่จนเกินไป ก็ไม่ได้สร้าง User Experience ที่ดีไปกว่าขนาดของวัตถุเป้าหมายที่มีความเหมาะสม ซึ่งจะกล่าวถึงในลำดับถัดไป
ขนาดของวัตถุเป้าหมายก็เป็นปัจจัยที่สร้างความแตกต่างในการใช้งานอย่างมากเช่นกัน วัตถุที่มีขนาดเล็กจะทำให้ผู้ใช้ใช้เวลานานกว่าที่จะเลื่อน Pointer เล็ง และ Interact กับวัตถุเป้าหมายได้ เนื่องจากผู้ใช้ต้องขยับอย่างระมัดระวังเพื่อไปยังตำแหน่งที่ต้องการ ทำให้ต้องใช้สมาธิมากกว่าในการ Interact กับวัตถุเป้าหมาย
จากรูปภาพที่ 2 จึงแสดงให้เห็นว่า การเพิ่มขนาดของวัตถุเป้าหมายให้ใหญ่ขึ้น ส่งผลให้ความสามารถในการใช้งานของผู้ใช้สูงขึ้นตามไปด้วย ลองนึกภาพตามว่าเลข 1-4 คือขนาดของปุ่มบนหน้าจอ
เคยสังเกตไหมว่าปุ่มในแอปพลิเคชันบนมือถือมีขนาดเล็กเกินไปอาจทำให้ผู้ใช้กดพลาดได้ จากการศึกษาของ MIT Touch Lab พบว่า ค่าเฉลี่ยความกว้างของรัศมีนิ้วมือจะมีขนาดประมาณ 8-10mm ทำให้ 10 มม x 10 มม. (0.4in x 0.4in) เป็นขนาดที่เล็กที่สุดที่สามารถใช้ในการออกแบบ CTA (Call to Action) บนโทรศัพท์มือถือ ต่อให้เป็นงานออกแบบผลิตภัณฑ์ดิจิตอลที่ใช้หน่วยเป็น Pixel เมื่อแปลงหน่วยแล้ว ขนาดก็จะไม่ต่างไปจากตัวเลขข้างต้นมากนัก เพราะการอ้างอิงขนาดเป็นหน่วย Pixel ไม่สามารถนำมาใช้เป็นตัวเลขเพื่อสื่อสารขนาดของนิ้วมือได้อย่างมีประสิทธิภาพ เนื่องจากหน่วย Pixel มีขนาดเล็กใหญ่เปลี่ยนแปลงไปในแต่ละอุปกรณ์ ดังนั้น นักออกแบบควรตรวจสอบงานของตนเองบนอุปกรณ์จริงเสมอ เพื่อให้มั่นใจว่าสิ่งที่ออกแบบนั้นเหมาะสมสำหรับการใช้งานบนอุปกรณ์นั้นจริง
นักออกแบบจำเป็นต้องคำนึงถึงระยะทางระหว่างตำแหน่งของ Pointer และวัตถุเป้าหมายดังที่ได้กล่าวข้างต้น เช่น การกรอกฟอร์มบนโทรศัพท์มือถือ ผู้ใช้มักจะใช้ 2 มือในการพิมพ์เพราะคำถามมักจะอยู่ทางด้านซ้ายของหน้าจอ หากใช้มือเดียวในการพิมพ์ นิ้วโป้งของผู้ใช้อาจจะไม่สามารถเอื้อมไปถึงด้านซ้ายของหน้าจอได้
หากพิจารณาถึงผลกำไรของธุรกิจอย่างเว็บไซต์ E-Commerce ที่สร้างรายได้จากการขายสินค้า การทำให้ผู้ใช้สามารถสั่งซื้อของได้สำเร็จโดยง่ายจึงถือเป็นโจทย์หลักของนักออกแบบ ดังนั้น การออกแบบปุ่มซื้อสินค้าให้มีขนาดและตำแหน่งที่เหมาะสม รวมไปถึงขั้นตอนการ Checkout ที่ไม่ซับซอน ก็ย่อมส่งผลต่อยอดคำสั่งซื้อเป็นอย่างมาก
ยกตัวอย่าง การศึกษาพฤติกรรมการใช้งานของผู้ใช้บนเว็บไซน์ E-Commerce การวางปุ่ม “ซื้อสินค้า” ที่มีขนาดใหญ่และไว้ด้านขวามือ ทำให้ระยะห่างระหว่าง Pointer (ในที่นี้คือนิ้วมือของผู้ใช้) และวัตถุเป้าหมาย (ในที่นี้คือปุ่มซื้อสินค้า) อยู่ใกล้กัน ฉะนั้นผู้ใช้สามารถกดปุ่ม “ซื้อสินค้า” ได้อย่างรวดเร็วและสะดวกสบาย
Netfix เป็นอีกตัวอย่างที่นำกฏของ Fitts’s Law มาใช้ในการออกแบบปุ่ม Play และ Download เพื่อให้ผู้ใช้สามารถกดได้อย่างง่ายดาย และเข้าถึงภาพยนตร์ที่ต้องการรับชมได้ไวขึ้นด้วยความที่ปุ่มมีขนาดเหมาะสม มีระยะห่างที่พอดีกับ Pointer ทำให้ผู้ใช้ได้รับประสบการณ์ที่ดีในการใช้งาน
นี่เป็นเพียง 1 ทฤษฎีที่ช่วยให้นักออกแบบสามารถออกแบบประสบการณ์ที่ดีให้กับผู้ใช้งานได้ แต่ยังมีทฤษฎีอื่น ๆ อีกมากมายที่สามารถนำมาเป็น Guideline ให้กับนอกแบบได้ ในครั้งหน้า Unblock Design จะหยิบยก Laws of UX อันไหนมาเล่าให้ฟังต่อ สามารถติดตามได้ในบทความถัดไป
อ้างอิง:
https://lawsofux.com
https://www.nngroup.com/articles/touch-target-size
ติดตามบทความเกี่ยวกับการวิจัยและออกแบบได้ที่
Facebook : https://www.facebook.com/unblockdesign
Instagram : https://www.instagram.com/unblockdesign
ทีมออกแบบของ Blockfint ที่มีความเชี่ยวชาญในการวิจัย วางแผน และออกแบบ Digital Products