Home » Design »Web Dev » Currently Reading:

แบบฟอร์ม.. อ่านง่ายกว่าถ้าชิดขวา

April 25, 2012 Design, Web Dev Comments

ข้อมูลพื้นฐานจากเว็บไซต์ UXmovement.com (http://uxmovement.com/forms/form-label-proximity-right-aligned-is-easier-to-scan/)

อุปสรรค์สำคัญในการทำแบบฟอร์มคือทำอย่างไรให้คนกรอกข้อมูล หนึ่งในวิธีแก้คือการทำให้คนอ่านรู้สึกง่ายที่จะอ่าน ง่ายที่จะกรอก ไม่สับสน

และนั่นเป็นหน้าที่ของดีไซน์เนอร์โดยตรง

การออกแบบฟอร์มนั้นจริงๆก็ไม่ยาก แค่เรียงตัวอักษรคำอธิบายไว้ว่า จะให้กรอกอะไร ตามมาด้วย กล่อง input box ที่ต้องการให้เค้าใส่ข้อมูล

ซึ่งวิธีการเรียงตัวอักษร สามารถแบ่งออกได้เป็น 3 รูปแบบคือ
1. ตัวอักษรอยู่ด้านบนกล่องใส่ข้อมูล
2. ตัวอักษรอยู่ข้างในกล่องใส่ข้อมูล
3. ตัวอักษรอยู่ด้านข้างกล่องใส่ข้อมูล

แน่นอนว่าสองวิธีแรกนั้นทำให้การอ่านแบบฟอร์มง่ายกว่าแบบที่สามมาก แต่บางครั้ง ดีไซน์เนอร์เองก็หลีกเลี่ยงไม่ได้ที่จะต้องออกแบบให้ตัวอักษรอยู่ทางด้านข้าง

แต่จะทำอย่างไรให้อ่านง่ายล่ะ?

จากการทดสอบของเว็บ UXmovement พบว่าการออกแบบให้ตัวอักษรกั้นหน้าด้านขวา เป็นแนวเดียวกันกับแบบฟอร์ม จะทำให้ผู้ใช้งานสามารถอ่านได้ง่ายขึ้น เนื่องจากไม่จำเป็นต้องกวาดสายตาไป-มา มาก

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

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

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

Search This Site:



rgb72 on Facebook

คำศัพท์ Internet วันละคำ

AdSense
– ระบบการโฆษณาบน Google
— WEB101 by rgb72

72's Friends

Useful Links

Related Articles:

9 Web Design Trend ปี 2013 โดย rgb72/design team ตอนที่ 1

March 4, 2013





หลังจากที่มีการคุย และ training กันภายในของ rgb72 ทำให้รู้สึกว่าความรู้บางอย่างก็น่าจะแชร์ออกมาผ่านทาง blog72 บ้าง ซึ่งหนึ่งในเรื่องที่เรา discuss กันเมื่อไม่นานมานี้คือเรื่อง เทรนด์การออกแบบเว็บไซต์ในปี 2013 เราได้สรุปเทรนด์การออกแบบเว็บไซต์มาได้ 9 ข้อ โดยมีพื้นฐานมาจากสองส่วนใหญ่ๆคือ 1. User behavior หรือพฤติกรรมใช้งานของ user ต่อเว็บไซต์ได้เปลี่ยนไป ซึ่งมีผลมาจากหลายส่วนเช่น ความคุ้นเคยกับการใช้ interface ของ app ในมือถือที่มีลักษณะที่แตกต่าง หรือ การใช้อุปกรณ์เคลื่อนที่ mobile device ซึ่งไม่ support วิธีการใช้งานในแบบเดิมๆ – ส่วนนี้มีผลต่อ User Interface (UI) และ User Experience (UX) ของการออกแบบเว็บไซต์ 2. Reference จากเว็บไซต์ต่างประเทศ สไตล์ภาพ และแนวกราฟฟิคใหม่ๆ ที่พยายามหลีกหนีความจำเจน่าเบื่อของดีไซน์เดิมๆที่เราใช้มาในอดีต – ส่วนนี้มีผลต่อความสวยงาม ดังนั้นเรามาดูกันว่า […]

Responsive Web Design กับความเป็นไปได้ในวงการออกแบบเว็บไทย

December 20, 2011





ตรวจทาน: จ๋า สำหรับคนที่ยังไม่รู้จัก Responsive Web Design อธิบายง่ายๆ คือการออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอสำหรับอุปกรณ์ทุกชนิด ตั้งแต่ คอมพิวเตอร์ที่มีขนาดจอหลากหลาย ไปจนถึง Tablet ซึ่งมีมาตรฐานของขนาดหน้าจอที่แตกต่างกัน และโทรศัพท์มือถือ Smart Phone ต่างๆ แม้ว่าอุปกรณ์ที่กล่าวมานั้น จะมีฟังก์ชั่นที่ความสามารถซูมเข้าไปอ่านตัวอักษรได้ชัดยิ่งขึ้น แต่ก็ยังถือว่าไม่สะดวกสำหรับผู้ใช้งานเสียทีเดียว ที่ผ่านมา เราได้แก้ปัญหาด้วยการทำเว็บไซต์สองเวอร์ชั่น คือ สำหรับดูบนมือถือ และ สำหรับดูบนจอคอมพิวเตอร์ แต่ในปัจจุบัน ทั้งมือถือ และ Tablet ต่างก็มีหน้าจอที่หลากหลายขนาด ดังนั้น วิธีแก้ที่กำลังเป็นที่นิยมในต่างประเทศคือ การทำ Responsive Web Design กล่าวคือ การออกแบบเว็บครั้งเดียว เวอร์ชั่นเดียว แต่สามารถรองรับขนาดหน้าจอได้สำหรับอุปกรณ์ทุกประเภท ดังตัวอย่างด้านล่างจะเห็นว่า เว็บไซต์ที่ทำสำเร็จมาแล้ว จะสามารถรองรับขนาดหน้าจอได้ทุกอุปกรณ์จริงๆ Simon Collison (http://colly.com) Andersson-Wise Architects (http://www.anderssonwise.com) Food Sense (http://foodsense.is) อย่างไรก็ตาม แม้ว่าต่างประเทศจะเริ่มตื่นตัวมากๆ […]

5 เทรนด์ของการออกแบบเว็บไซต์สำหรับธุรกิจขนาดเล็ก (ตอนที่1)

August 16, 2010





บังเอิญได้ไปอ่านมาจาก American Express Open Forum ในกลุ่มหัวข้อ Idea Hub > Technology แล้วพบว่าเค้ามีการพูดถึง 5 เทรนด์ในการออกแบบสำหรับธุรกิจขนาดเล็ก (5 Small Biz Web Design Trends to Watch) ตาม link นี้ http://www.openforum.com/idea-hub/topics/technology/article/5-small-biz-web-design-trends-to-watch-grace-smith เลยคิดว่า ถ้าไม่หมดแรงซะก่อน จะพยายามแปลตามเข้าใจง่ายๆ ให้จบทั้ง 5 แบบ ในการออกแบบเว็บไซต์สำหรับกลุ่มธุรกิจขนาดเล็กนั้น สิ่งที่ควรให้ความสำคัญคือ การทำอย่างไรให้เว็บไซต์นั้น ออกมาดูดี สามารถดึงดูดความสนใจของผู้เยี่ยมชมได้อย่างรวดเร็ว ทำให้เข้ามาแล้วอยากอ่าน อยากเล่นเว็บนั้นไปเรื่อยๆ สามารถเปลี่ยนพฤติกรรมจากการเป็นผู้เยี่ยมชมธรรมดาๆ มาเป็นลูกค้าได้ และที่สำคัญคือ ราคา ต้องย่อมเยาด้วย เข้าสูตร ถูก เร็ว และ ดี หัวใจคือการออกแบบ ดังนั้นเรามาพบกับ 5 แนวทางการออกแบบที่กำลังมาแรง 1. Minimalism เราอาจเคยได้ยินประโยคที่ว่า […]

แนะนำหนังสือดี D&AD 2009

March 16, 2010





D&AD 2009 หนังสือจาก TASCHEN ที่รวบรวมงานกว่า 700ชิ้น ทั้งงาน graphic design, book, magazine design, โฆษณา, เว็บไซต์, TV commercial, radio, PR เรียกได้ว่าแทบจะทุกอย่างที่เจ๋งๆในปีที่ผ่านมา ราคาพันกว่าบาท ไม่แพงเลยหากเทียบกับงานดีดีที่เราได้มาไว้ update สมอง ฟังแล้วดูเว่อร์แต่อยากจะบอกว่า ได้ดูงานดีดีจากเล่มนี้แล้วรู้สึกตื่นเต้นจนแทบจะหยุดหายใจจริงๆ ดูรายละเอียดได้จากที่นี่ http://www.taschen.com/pages/en/catalogue/design/all/06756/facts.dad_2009_the_best_advertising_and_design_in_the_world.htm

iPad

January 29, 2010





เป็นเวลาเกือบสองวันแล้ว หลังจากที่ iPad ได้ถูกเปิดตัวโดย Apple สำนักข่าวหลายเจ้าต่างก็เขียน review มีทั้งชมถึงข้อดี ความเจ๋งและความเป็นสุดยอดในหลายๆด้าน และแน่นอนก็มีอีกหลายสื่อที่ต่อว่าถึงความธรรมดาของผลิตภัณฑ์่ว่าเป็นเหมือน iPhone ยักษ์ดีดีนี่เอง และที่ร้ายไปกว่านั้น ผู้ผลิตผลิตภัณฑ์บางเจ้าอย่างเช่น Fujisu ก็เตรียมตัวฟ้อง Apple เรื่องการใช้ชื่อ iPad ที่ Fujisu แจ้งว่าเป็นเจ้าของมานานแล้ว อย่างที่บอกว่า สื่อหลายที่ได้เขียนเกี่ยวกับ iPad ไปเรียบร้อยในแง่ของ tech spec และข้อดีของมัน ไม่ว่าจะเป็นการใช้ชิพของ Apple เองที่มีชื่อว่า A4 (ผลิตโดย Samsung) ขนาดของจอที่กว้างเกือบ 10น้ิว, ความอึดของ battery ที่อยู่ได้ 10ชั่วโมง และ Standby ได้มากกว่า 1เดือน (ที่ Steve jobs พูดในงานว่า .. คุณสามารถบินจาก San Francisco ไปญี่ปุ่นและดู video […]