ใช้ประโยชน์จากกฎของ Fitts: หลักการออกแบบส่วนต่อประสานผู้ใช้สำหรับอีคอมเมิร์ซ

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

กฎของ Fitts บอกว่าระยะเวลาที่ใช้ในการเคลื่อนตัวชี้ไปยังเป้าหมายนั้นขึ้นอยู่กับระยะทางไปยังเป้าหมาย หารด้วยขนาดของเป้าหมาย โดยพื้นฐานแล้ว หมายความว่าวัตถุที่มีขนาดใหญ่กว่าและอยู่ใกล้กันจะโต้ตอบได้ง่ายกว่า กฎหมายนี้ริเริ่มขึ้นในปี 1954 โดยนักจิตวิทยา Paul Fitts ผู้สร้างแบบจำลองทางคณิตศาสตร์ของพฤติกรรมมนุษย์และทำงานเพื่อหาปริมาณความสามารถของระบบประสาทของมนุษย์

กฎของ Fitts กำหนดปริมาณการแลกเปลี่ยนระหว่างความแม่นยำด้านความเร็ว: ยิ่งต้องดำเนินการให้สำเร็จลุล่วงไปได้ด้วยดีเพียงใด ก็ยิ่งต้องใช้เวลานานขึ้นเท่านั้น แปลสำหรับการออกแบบ UI หมายความว่ายิ่งเป้าหมายที่อยู่ไกลออกไป เช่น ปุ่ม "หยิบใส่รถเข็น" มาจากเคอร์เซอร์หรือนิ้วของผู้ใช้ เป้าหมายก็จะยิ่งมีขนาดใหญ่ขึ้น ด้วยวิธีนี้ การไปให้ถึงเป้าหมายจึงไม่ต้องการความแม่นยำมากนัก และสามารถดำเนินการได้อย่างรวดเร็ว

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

ทำลายสูตรกฎของฟิตส์

สมการทางคณิตศาสตร์ที่ Fitts เขียนคือ t = a + b log2 (2 d/w) โดยที่:

• t เท่ากับเวลา
• a และ b แทนค่าสัมประสิทธิ์การถดถอยที่ได้มาจากการสังเกตการทดสอบ
• d คือระยะห่างระหว่างจุดเริ่มต้นและเป้าหมาย
• w คือความกว้างของเป้าหมาย
• log2 ระบุว่าสูตรเป็นลอการิทึม และ log2 (2 d/w) ให้ผลลัพธ์ดัชนีความยาก (ID) ซึ่งเป็นการวัดที่หาปริมาณว่าการได้มาซึ่งเป้าหมายยากเพียงใด

สมการลอการิทึมระบุความสัมพันธ์ระหว่างขนาดเป้าหมายหรือระยะทางกับเวลาตอบสนอง: การเพิ่มขนาดหรือระยะทางที่เล็กสำหรับเป้าหมายขนาดเล็กสามารถทำให้ได้มาซึ่งง่ายขึ้น ในขณะที่การเพิ่มขนาดหรือระยะทางเล็กน้อยสำหรับเป้าหมายที่ใหญ่ขึ้นจะไม่ทำให้ง่ายขึ้นมาก เข้าถึง.

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

การออกแบบ UI ของกฎของ Fitts และอีคอมเมิร์ซ: ความลงตัวที่สมบูรณ์แบบ

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

การออกแบบเพื่อการค้นพบผลิตภัณฑ์ที่มีประสิทธิภาพ

ในเว็บไซต์อีคอมเมิร์ซที่ประสบความสำเร็จ สินค้าหาได้ง่าย วิธีหนึ่งในการใช้กฎของ Fitts เพื่อปรับปรุงการค้นพบผลิตภัณฑ์คือการเพิ่มฟังก์ชันการค้นหาลงในส่วนฮีโร่ของหน้าแรก ผู้คนมักจะสแกนหน้าเว็บในรูปแบบที่คาดเดาได้ และพฤติกรรมการสแกนและการเคลื่อนไหวของเคอร์เซอร์นั้นสัมพันธ์กันอย่างใกล้ชิด

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

เพิ่มประสิทธิภาพเมนูอีคอมเมิร์ซ

คุณลักษณะที่สำคัญของเว็บไซต์อีคอมเมิร์ซที่ประสบความสำเร็จคือเมนูที่ช่วยให้ลูกค้าสามารถสำรวจได้อย่างมีประสิทธิภาพและค้นหาหมวดหมู่และสินค้าที่พวกเขากำลังซื้อ ใช้กฎของ Fitts โดยใช้เมนูแบบเลื่อนลงอัตโนมัติที่ปรากฏขึ้นเมื่อลูกค้าวางเมาส์เหนือหมวดหมู่เนื้อหา หลีกเลี่ยงการวางรายการมากเกินไปในรายการเดียว ผู้ใช้จึงไม่ต้องเลื่อนเคอร์เซอร์ไปไกลเพื่อเลือกรายการ นอกจากนี้ ใช้สถาปัตยกรรมข้อมูลที่ดีและภาพถ่ายผลิตภัณฑ์เพื่อให้ผู้ใช้มีพื้นที่เป้าหมายที่ใหญ่ขึ้น ซึ่งช่วยลดระยะที่เคอร์เซอร์ต้องเดินทางไปเพื่อทำการเลือก

เพิ่มพื้นที่ผิวของปุ่มคำกระตุ้นการตัดสินใจ

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

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

ทำให้การกระทำบางอย่างหนักกว่าคนอื่น

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

กฎของ Fitts สำหรับอุปกรณ์พกพา

ในการใช้กฎของ Fitts กับการออกแบบ UI ของอีคอมเมิร์ซสำหรับอุปกรณ์มือถือ นักออกแบบต้องคำนึงถึงข้อจำกัดบางประการ

นิ้วคือเคอร์เซอร์

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

การใช้งานมือถือมักจะเป็นมือเดียว

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

พิจารณาคำเตือน

เมื่อใช้กฎของ Fitts ควรพิจารณาคำถามสำคัญสองข้อ: เป้าหมายหลักที่ผู้ใช้ต้องการบรรลุเมื่อเข้าสู่หน้านี้คืออะไร และ: ฉันจะทำให้เป้าหมายนั้นง่ายสำหรับผู้ใช้ได้อย่างไร

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

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

ปฏิบัติตามกฎหมายของ Fitts เพื่อความสำเร็จของอีคอมเมิร์ซ

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

อ่านเพิ่มเติมในบล็อก Toptal:

• ปูทางไปสู่การซื้อ – eCommerce UX Best Practices
• แนวทางปฏิบัติที่ดีที่สุดสำหรับหน้า Landing Page (พร้อมอินโฟกราฟิก)
• วิธีออกแบบหน้า Landing Page ที่แปลง
• การสร้างและปรับขนาดระบบการออกแบบใน Figma: กรณีศึกษา