การทดสอบ A/B UX สำหรับเฟรมเวิร์กแบบอิงคอมโพเนนต์

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

อันเป็นผลมาจากโครงสร้างและข้อจำกัดทางเทคนิค กรอบงาน เช่น Vue.js, React.js และ Material UI มีความสำคัญสำหรับนักออกแบบที่จะต้องพิจารณา เพราะพวกเขาทำหน้าที่เป็นส่วนประกอบสำคัญสำหรับระบบการออกแบบที่แข็งแกร่ง นอกจากนี้ การรู้ว่าโค้ดทำงานอย่างไรก็มีประโยชน์เมื่ออำนวยความสะดวกให้กับเทคนิคการออกแบบที่ขับเคลื่อนด้วยข้อมูลในสภาพแวดล้อมการพัฒนา เช่น การทดสอบ A/B

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

การอภิปรายโครงการกับหัวหน้าฝ่ายเทคนิค พบว่าโดยพื้นฐานแล้ว แอปพลิเคชันค่อนข้างง่าย: แพทย์ต้องการความสามารถในการสร้างและแก้ไขโปรไฟล์ของผู้ป่วย ดูห้องสมุดของกิจกรรมด้านสุขภาพ และมอบหมายบทเรียนให้กับผู้ป่วย

ทีมงานตัดสินใจปรับการออกแบบของโปรเจ็กต์ให้สอดคล้องกับเฟรมเวิร์ก Material UI โดยใช้องค์ประกอบพื้นฐาน เช่น โมดอลป๊อปอัป การ์ดแสดงผล ปุ่มใช้งาน/ไม่ใช้งาน รายการหีบเพลง และชุดการแจ้งเตือนความสำเร็จและคำเตือน เมื่อกำหนดส่วนประกอบที่จะประกอบเป็นองค์ประกอบพื้นฐานแล้ว ทีมผลิตภัณฑ์ได้เสนอความคิดเห็นที่แตกต่างกันเกี่ยวกับเลย์เอาต์ของแอปพลิเคชัน

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

พูดง่ายๆ ก็คือ องค์ประกอบการแสดงผลกำหนดภาษาภาพของแอปพลิเคชัน และส่วนประกอบการทำงานช่วยให้พวกเขามีชีวิต

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

สามารถทดสอบคุณสมบัติที่เหมือนกันในเลย์เอาต์ทางเลือกโดยใช้ความพยายามทางวิศวกรรมเพียงเล็กน้อยได้หรือไม่ คำตอบคือ "ใช่" และหากทำด้วยวิธี A/B ตั้งแต่ต้นขั้นตอน จะกลายเป็นวงจรชีวิตการพัฒนาผลิตภัณฑ์แบบลีน (การพัฒนาผลิตภัณฑ์แบบลีนเป็นผลจากแนวคิดไคเซ็นของญี่ปุ่น ปรัชญาธุรกิจในการปรับปรุงเวิร์กโฟลว์ แนวทางปฏิบัติ เทคนิค และ—ในกรณีนี้—ผลิตภัณฑ์)

Eric Ries ผู้ประกอบการและนักเขียนต่อเนื่อง กล่าวถึงคู่มือเชิงปฏิบัติเกี่ยวกับวงจรชีวิตการพัฒนาผลิตภัณฑ์แบบลีนในหนังสือของเขา The Lean Startup วิธีการนี้เป็นไปตามขั้นตอนการทำงานของการสร้างผลิตภัณฑ์ด้วยสมมติฐานที่ชัดเจน การทดสอบสิ่งที่สร้างขึ้น และการทำซ้ำตามสิ่งที่เรียนรู้

วิธีการเริ่มต้นแบบลีน

การกำหนดแนวทางการทดสอบ A/B

การทดสอบ A/B เป็นองค์ประกอบหลักของชุดเครื่องมือของมืออาชีพ UX ที่มีประสบการณ์ บทบาทในวงจรการพัฒนาซอฟต์แวร์คือการช่วยปรับปรุงการใช้งานแอปพลิเคชัน เมื่อรวมกับข้อมูลแผนที่ความร้อนแล้ว ทีมต่างๆ จะได้รับข้อมูลเชิงลึกอันมีค่าเกี่ยวกับพฤติกรรมของผู้ใช้ โดยเฉพาะอย่างยิ่งเมื่อเป็นเรื่องของความขัดแย้งภายในโฟลว์ของแอปพลิเคชัน

ก่อนเริ่มการทดสอบ A/B ให้ถามคำถามต่อไปนี้เพื่อเน้นกระบวนการ:

• การทดสอบ A/B ใช้ใน UX อย่างไร
• การวิเคราะห์ A/B มีวิธีใดบ้าง
• ทำไมต้องออกแบบการทดสอบ A/B ขณะวางโครงลวด
• เรากำลังทดสอบเพื่ออะไร?

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

การออกแบบที่ขับเคลื่อนด้วยการทดสอบ A/B

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

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

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

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

“โมเดลกล่องส่วนประกอบ”

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

ฉันมาทำความเข้าใจเฟรมเวิร์กนี้ด้วยแรงบันดาลใจจากโมเดลกล่อง HTML+CSS Component Box Model นำเสนอรูปแบบองค์กรที่ใช้สร้างบล็อคส่วนประกอบสำหรับแอปพลิเคชัน เหมาะอย่างยิ่งสำหรับการพัฒนาระบบการออกแบบสำหรับโครงการที่พัฒนาอย่างรวดเร็ว

เพื่อให้การคิดเชิงออกแบบมีความคล่องตัว สามารถปฏิบัติตามชุดหลักการออกแบบที่เหมาะสมกับวงจรชีวิตการพัฒนาผลิตภัณฑ์แบบลีนโดยเฉพาะ

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

การจัดกลุ่มบริบทที่คล้ายกัน

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

ลดความซับซ้อนของขั้นตอนการโต้ตอบของ "รัฐ"

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

พัฒนาระบบการออกแบบที่แข็งแกร่ง

การใช้องค์ประกอบการแสดงผลเพื่อพัฒนามาตรฐานสำหรับองค์ประกอบภาพ เช่น การพิมพ์ ปุ่ม อินพุต โมดอล และการ์ด ช่วยสร้างพื้นฐานสำหรับภาษาการออกแบบที่ได้มาตรฐาน ระบบภาพที่แข็งแกร่งมีความยืดหยุ่นในการทำให้นักออกแบบและนักพัฒนา UX มีข้อมูลตรงกันเกี่ยวกับส่วนประกอบที่อ้างอิงภายในโครงลวด

สรุป

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

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

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

•••

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

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