การออกแบบ Form ที่ซับซ้อน สักกี่แถวดี

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

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



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

จากข้อมูลที่ผมไปเจอมาพบมีเว็บไซต์ถึง 16% ที่ใช้ Formใแบบหลายคอลัมน์ 


ในบทความนี้ เราจะพูดถึงผลการวิจัยเกี่ยวกับ Formใการชำระเงิน:ทำไม Formใแบบหลายคอลัมน์ถึงทำให้กรอกยากขึ้น วิธีการที่ Formใแบบคอลัมน์เดียวช่วยแก้ปัญหานี้ได้อย่างไร

ทำไมฟอร์มหลายคอลัมน์ถึงกรอกยากกว่า

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

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

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




ในการทดสอบพบว่า Formใหลายคอลัมน์มักมีปัญหาน้อยลงเมื่อใช้  effort-saving features เช่น Auto-fill ของเบราว์เซอร์หรือ 3rd party อื่นๆ อย่างไรก็ตาม features เหล่านี้ไม่สามารถทำงานได้อย่างสมบูณณ์แบบ  ที่ผมเจอบ่อยๆคือ email กับเบอร์โทรศัพท์ หรือบางครั้งก็ที่อยู่ และไม่ใช่ user ทุกคนที่จะใช้ features บนเบราว์เซอร์เหล่านี้ 


วิธีการที่ฟอร์มแบบคอลัมน์เดียวช่วยแก้ปัญหานี้




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

จากการศึกษาหลายรอบของการ Checkout การมี 2-3 ฟิลด์บนบรรทัดเดียวไม่ก่อให้เกิดปัญหา เมื่อฟิลด์เหล่านี้เป็นส่วนหนึ่งของข้อมูลเดียวกัน และ Formใโดยรวมยังคงเป็นคอลัมน์เดียว มีความแตกต่างระหว่าง "บางบรรทัดที่มี 2-3 ฟิลด์ต่อบรรทัด" (ซึ่งยอมรับได้ในบางกรณี) กับ " Formใแบบสองคอลัมน์" (ที่ผมเดาว่าน่าจะมาจากวิธีการ Code ของ Dev ด้วย)




ใช้ฟอร์มแบบคอลัมน์เดียวเพื่อให้ผู้ใช้เข้าใจลำดับในการมอง/อ่าน

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

Post a Comment

You can share any idea here.......

Previous Post Next Post

Contact Form