บทความบทนำของ wulin.com (www.vevb.com): การอภิปรายสั้น ๆ เกี่ยวกับการออกแบบแบบฟอร์มในการออกแบบเว็บประจำวัน
กล่องอินพุต (อินพุต) ควรแบ่งออกเป็นกลุ่มเพื่อให้สมองสามารถจัดการกับความสัมพันธ์ระหว่างพื้นที่ขนาดใหญ่ได้ดี - "คู่มือ HTML ที่เชื่อถือได้"
เว็บแอปพลิเคชันมักจะใช้แบบฟอร์มเพื่อจัดการการป้อนข้อมูลและการกำหนดค่า แต่ไม่ใช่ทุกรูปแบบที่สอดคล้องกัน การจัดตำแหน่งของพื้นที่อินพุตฉลากที่เกี่ยวข้องวิธีการทำงานและองค์ประกอบภาพโดยรอบจะส่งผลกระทบต่อพฤติกรรมของผู้ใช้มากหรือน้อย
รูปแบบ
เมื่อพิจารณาว่าผู้ใช้ควรกรอกแบบฟอร์มให้สั้นที่สุดเท่าที่จะเป็นไปได้และข้อมูลที่รวบรวมนั้นคุ้นเคยกับผู้ใช้ (เช่นชื่อที่อยู่ข้อมูลที่ชำระเงิน ฯลฯ ) ป้ายกำกับที่จัดเรียงตามแนวตั้งและกล่องป้อนข้อมูลอาจกล่าวได้ว่าดีที่สุด แท็กและกล่องอินพุตแต่ละคู่นั้นจัดเรียงในแนวตั้งเพื่อให้ความรู้สึกใกล้ชิดกับทั้งคู่และการจัดแนวซ้ายที่สอดคล้องกันช่วยลดการเคลื่อนไหวของดวงตาและเวลาในการประมวลผล ผู้ใช้ต้องย้ายไปในทิศทางเดียวเท่านั้น: ลง
ในรูปแบบนี้แนะนำให้ใช้ฉลากที่เป็นตัวหนาซึ่งสามารถเพิ่มน้ำหนักภาพและเพิ่มความน่าเชื่อถือของพวกเขา หากไม่เป็นตัวหนาจากมุมมองของผู้ใช้ข้อความของแท็กและกล่องอินพุตจะเกือบจะเหมือนกัน
หากข้อมูลในแบบฟอร์มไม่คุ้นเคยหรือจัดกลุ่มแบบมีเหตุผล (เช่นส่วนประกอบหลายอย่างของที่อยู่) แท็กที่ได้รับการจัดแนวซ้ายสามารถอ่านข้อมูลของแบบฟอร์มได้อย่างง่ายดาย ผู้ใช้จะต้องค้นหาและลงที่ฉลากบนคอลัมน์ด้านซ้ายโดยไม่ขัดจังหวะการคิดของพวกเขาโดยกล่องอินพุต แต่ด้วยวิธีนี้ระยะห่างระหว่างฉลากและกล่องอินพุตที่สอดคล้องกันมักจะยาวขึ้นโดยฉลากที่ยาวขึ้นซึ่งอาจส่งผลต่อเวลาในการกรอกแบบฟอร์ม ผู้ใช้จะต้องข้ามไปมาเพื่อค้นหาสองแท็กที่เกี่ยวข้องและกล่องอินพุต
สิ่งนี้สร้างทางเลือกอื่นเค้าโครงที่จัดแนวขวาของแท็กทำให้การเชื่อมต่อระหว่างแท็กและกล่องอินพุตใกล้เข้ามา อย่างไรก็ตามผลที่ได้คือช่องว่างและฉลากที่ไม่สม่ำเสมอทางด้านซ้ายทำให้ผู้ใช้ยากที่จะดึงสิ่งที่ฟอร์มต้องกรอกในประเทศตะวันตกได้อย่างรวดเร็วผู้คนคุ้นเคยกับการเขียนจากซ้ายไปขวา
ด้วยความช่วยเหลือขององค์ประกอบภาพ
เนื่องจากข้อดีของเลย์เอาต์ที่อยู่ในแนวซ้ายของฉลาก (ง่ายต่อการดึงและลดความสูงในแนวตั้ง) จึงเป็นการล่อลวงให้แก้ไขข้อเสียหลัก (การแยกฉลากและกล่องอินพุต)
ทางออกหนึ่งคือการเพิ่มสีพื้นหลังและเส้นแยก สีพื้นหลังที่แตกต่างกันสร้างคอลัมน์ของฉลากแนวตั้งและคอลัมน์ของกล่องอินพุตแนวตั้ง แต่ละชุดของป้ายกำกับและกล่องอินพุตจะถูกคั่นด้วยเส้นแนวนอนที่ชัดเจน แม้ว่ามันจะฟังดูดี แต่ก็ยังมีปัญหาอยู่
การเปรียบเทียบแบบฟอร์มก่อนหน้า (ความแตกต่างทางสายตาแบบอัตนัยของผู้ใช้) สิ่งนี้จะเพิ่มองค์ประกอบภาพ 15 รายการ: เส้นกลาง, เซลล์สีพื้นหลังและเส้นแนวนอน องค์ประกอบเหล่านี้เบี่ยงเบนความสนใจของผู้ใช้และทำให้ผู้ใช้เป็นเรื่องยากที่จะมุ่งเน้นไปที่องค์ประกอบที่สำคัญเช่นแท็กและกล่องอินพุต ดังที่ Edward Tufte ชี้ให้เห็น: มีความแตกต่างในข้อมูลของตัวเองซึ่งย่อมนำไปสู่ความแตกต่างทางประสาทสัมผัส กล่าวอีกนัยหนึ่งองค์ประกอบภาพใด ๆ ที่ไร้ประโยชน์กับเค้าโครงจะรบกวนการจัดวางอย่างต่อเนื่อง เมื่อคุณพยายามเรียกดูแท็กทางด้านซ้ายคุณจะพบว่าสายตาของคุณถูกขัดจังหวะเสมอหยุดคิดเกี่ยวกับเส้นแนวนอนเซลล์และสีพื้นหลัง
แน่นอนว่านี่ไม่ได้หมายถึงการยอมแพ้สีพื้นหลังและเส้น พวกเขายังคงมีประสิทธิภาพมากในการแบ่งข้อมูลพื้นที่ที่เกี่ยวข้อง ตัวอย่างเช่นเส้นแนวนอนบาง ๆ หรือสีพื้นหลังแสงสามารถรวมเข้ากับข้อมูลที่เกี่ยวข้อง สีพื้นหลังและเส้นมีประสิทธิภาพโดยเฉพาะอย่างยิ่งสำหรับปุ่มการทำงานหลักที่แยกแยะรูปแบบ
การดำเนินงานหลักและรอง
การดำเนินการหลักของแบบฟอร์ม (โดยปกติจะส่งหรือประหยัด) ต้องใช้น้ำหนักภาพที่ค่อนข้างแข็งแกร่ง (ในตัวอย่างข้างต้นโทนสีสดใสฟอนต์ตัวหนาสีพื้นหลัง ฯลฯ ) สิ่งนี้เทียบเท่ากับการให้พรอมต์แก่ผู้ใช้: คุณมี/กำลังจะกรอกแบบฟอร์ม
เมื่อแบบฟอร์มมีการดำเนินการหลายอย่างเช่นการดำเนินการต่อและการกลับมาจำเป็นต้องลดน้ำหนักภาพของการดำเนินการรอง สิ่งนี้จะช่วยลดความเสี่ยงของข้อผิดพลาดในการดำเนินงานที่อาจเกิดขึ้นสำหรับผู้ใช้
แม้ว่าเนื้อหาข้างต้นจะช่วยให้คุณออกแบบแบบฟอร์มได้ดีขึ้นการรวมเค้าโครงองค์ประกอบภาพและเนื้อหายังคงต้องใช้การทดสอบผู้ใช้และการวิเคราะห์ข้อมูล (การประเมินผลเสร็จสิ้นการรายงานข้อผิดพลาด ฯลฯ )