ในชั่วโมงการเรียนการสอนเกี่ยวกับ User Interface Design จะต้องมีเรื่องของ 3 UI Patterns ที่เป็นรูปแบบ หรือเครื่องมือควบคุมพื้นฐาน สำหรับใช้ในงานออกแบบเว็บไซต์หรือ Application

UI Pattern ทั้ง 3 ตัวนี้มีหน้าตาที่เรารู้จักกันดี ก็คือ Radio button, Check box และ Select box (บางคนเรียก Dropdown)

1) RADIO BUTTON คืออะไร ใช้งานอย่างไร

ตัวอย่างและองค์ประกอบของ Radio button

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

2) CHECK BOX คืออะไร ใช้งานอย่างไร

ตัวอย่างและองค์ประกอบของ Check box

เป็นคอนโทรลหรือรูปแบบที่ให้ยูสเซอร์สามารถเลือกตัวเลือกได้มากกว่าหนึ่งข้อ (มีคำตอบมากกว่า 1 ข้อ) หรือไม่เลือกเลยก็ได้ (เช่น ใช้ยอมรับเงื่อนไขเพื่อเป็นคำตอบ ใช่ / ไม่ใช่)

3) SELECT BOX หรือ COMBO BOX คืออะไร ใช้งานอย่างไร

ตัวอย่างและองค์ประกอบของ Select box

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

ทำไมเราถึงเรียกปุ่มนี้ว่า RADIO BUTTON

ในการอธิบายแบบเจาะลึก จะขออนุญาตโฟกัสไปที่ตัว Radio button เท่านั้น ซึ่งไม่ต้องห่วง อีก 2 ตัวที่เหลือจะโผล่มาตอนเราทำการเปรียบเทียบการใช้งาน

สิ่งของที่ใช้ Radio button ในชีวิตประจำวันของเรา, ซ้าย – ตู้ขายบัตร BTS / ขวา – ตู้สั่งอาหารที่ญี่ปุ่น

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

ชื่อ UI Radio button ที่ได้แนวความคิดมาจากปุ่มของวิทยุจริงๆ

แต่ถ้าใครสงสัยว่า ปกติ Radio button จำเป็นต้องเลือก 1 ตัวเลือกเสมอ แต่วิทยุที่เห็น ปุ่มไม่เห็นถูกกดเลย อย่าลืมว่าในที่นี่ ปุ่มหยุดถูกเลือกอยู่ในสถานการณ์นี้ เพียงแต่มันไม่ได้ถูกกดให้เห็นเท่านั้นเอง

และนี่คือเกณฑ์และข้อแนะนำในการใช้ Radio button / Checkbox / Select Box ทั้ง 17 ข้อที่ควรรู้ เพื่อให้เราสร้างฟอร์มบนเว็บออกมาดี ใช้งานง่ายสุด ๆ

17 เทคนิค การออกแบบฟอร์มบนเว็บไซต์ที่คุณต้องรู้ !!

1. ใช้ Radio Button เมื่อมีตัวเลือกประมาณ 2-4 ตัวเลือก

เลือกใช้ Radio button สำหรับตัวเลือกน้อยๆ และใช้ Select box สำหรับตัวเลือกมากๆ

หากตัวเลือกมีจำนวนน้อย คือ 2-4 ข้อ ให้เราพิจารณาใช้ Radio button เป็นรูปแบบแรกๆ เลย เพราะเป็น UI ที่แสดงข้อมูลได้ชัดเจนทีสุดเมื่อเทียบกับ Select box หากตัวเลือกมีมากกว่านี้ แนะนำให้ไปใช้ Select box แทน เช่น ตัวเลือกประเทศ เป็นต้น

การใช้ Radio button เมื่อตัวเลือกเป็นชนิดตัวเลข

แต่ในบางกรณีที่ตัวเลือกเป็นตัวเลข ก็อาจสามารถเลือกใช้ Radio button ได้นะ เพราะมันกินพื้นที่น้อย โดยมากที่สุดของกรณีตัวเลข แนะนำว่าไม่ควรเกิน 8 ตัวเลือก

2. ไม่ควรใช้ Radio Button เมื่อมีพื้นที่จำกัด

 

การเปลี่ยน UI จาก Radio button มาเป็น Select box เมื่อแสดงผลบนมือถือ

หากเป็นหน้าจอมือถือหรือฟอร์มที่มีพื้นที่ค่อนข้างจำกัด เราอาจสามารถใช้ Select box ทดแทนได้ เช่น สามารถออกแบบฟอร์มบน desktop ให้เป็น Radio button พอย่อขนาดเป็นหน้าจอมือถือแล้วก็ใช้เป็น Select box แทน อันนี้ไม่เสมอไปนะ เพราะถ้ามีพื้นที่ในการแสดงผลบนมือถือในแนวตั้งเพียงพอหรือพอรับได้ ก็แนะนำให้ใช้เป็น Radio button ดีกว่า

การเปลี่ยนลิงค์ที่กินพื้นที่มาเป็น Select box เมื่อแสดงผลบนมือถือ

เคยออกแบบแถบ Jump to สำหรับหน้าโรงแรม Agoda Secret Deals ซึ่งการใช้งานต้องดูได้ทั้งบน Desktop และ Mobile ดังนั้นแถบนี้จึงต้องเป็นการแสดงผลแบบ Responsive วิธีการคิดเดียวกับด้านบนเลย มองลิงค์ของ Jump to ให้เป็นตัวเลือกแบบ Radio button พอมีปัญหาเรื่องพื้นที่ก็เปลี่ยนร่างมันให้เป็น Select box แทน โดยตัวเลือกแรกให้เป็นค่าว่างเปล่าซะ (ในที่นี่คือ Choose one)

แนวความคิดที่ยุบเปลี่ยนเมนูแบบกินพื้นที่มาเป็นซ่อนอยู่ภายใต้ไอคอนแฮมเบอร์เกอร์เมื่อแสดงผลบนมือถือของเว็บดีไซน์นิว

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

3. ใช้โคลอน (:) ต่อท้ายเลเบล

ตัวอย่างการออกแบบเลเบลและตัวเลือกของ Radio button ที่ถูกต้อง

อันนี้เป็นธรรมเนียมปฏิบัติที่เราควรทำตามว่า การออกแบบฟอร์มใดๆ เราควรใส่เครื่องหมายโคลอน (:) ต่อท้ายเลเบลของแต่ละหัวข้อเสมอ ไม่ว่าจะเป็นเลเบลของ Text box, Check box, List box, Select box รวมถึง Radio button ด้วย เพราะโคลอนสื่อถึงว่า ต้องการข้อความมาต่อท้ายเครื่องหมายนี้เพื่อให้ข้อมูลสมบูรณ์

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

ตัวอย่างการออกแบบเลเบลและตัวเลือกของ Radio button ที่ผิด

สรุปข้อควรทำในการออกแบบฟอร์ม โดยเฉพาะหากต้องพิมพ์เป็นภาษาอังกฤษ

• ใส่โคลอนด้านหลังเลเบล
• ใช้ตัวพิมพ์ใหญ่ตัวแรกขึ้นต้นประโยคหรือข้อความ เช่น ‘Apply this layout to all pages’ อย่าพิมพ์เป็น ‘Apply This Layout to All Pages’ หรือ ‘apply this layout to all pages’
• ไม่ใส่เครื่องหมายจุด หรือ Full Stop (.) ข้างท้ายข้อความที่เป็นตัวเลือก

วิธีการออกแบบ Check box ที่คล้ายกับกฎเกณฑ์ของ Radio button

ข้อธรรมเนียมปฏิบัตินี้สามารถนำไปใช้กับ UI รูปแบบอื่นที่เกี่ยวข้องกับฟอร์มได้นะ อย่างเช่น Check box

4. ถ้ามีตัวเลือกซับคอนโทรลให้เซ็ตสถานะเป็น Active (คลิกได้)

การออกแบบฟอร์มที่มีซับคอนโทรล

ในกรณีที่มีซับคอนโทรล (Sub control) ต่อท้ายตัวเลือก Radio button เราไม่จำเป็นต้องให้ยูสเซอร์เลือกคลิกที่ Radio button ก่อน แล้วค่อยเปิดการใช้งานคอนโทรลที่อยู่ต่อท้ายตัวเลือกนี้ (ดูตัวอย่างด้านบนฝั่งขวา) ในทางกลับกัน เราควรเปิดการใช้งานซับคอนโทรล (สถานะ active) รอไว้เลย เพื่อที่ว่ายูสเซอร์จะได้พร้อมที่จะเลือกตัวเลือกได้ทันที พร้อมกับทำสถานะเลือกให้กับ Radio button ที่ซับคอนโทรลนี้อยู่โดยอัตโนมัติ (ดูตัวอย่างด้านบนฝั่งซ้าย)

5. ไม่ใช้กับตัวเลือกแบบบิต 0/1

 

เลือกใช้ Check box แทน Radio button กับคำตอบในเชิง ใช่ / ไม่ใช่

หากตัวเลือกของเรามีอยู่ 2 ข้อ และมีลักษณะที่คล้ายกับการตอบคำถาม ใช่ / ไม่ใช่ หรือพูดเป็นภาษาคอม ก็คือ คำตอบที่เป็นบิต 0 หรือ 1 ให้เราพิจารณาใช้ Check box จะดีกว่า เพราะในตัวเลือก เราไม่สนับสนุนให้ใช้คำที่มีคำว่า ‘ไม่’ นำหน้า อันจะทำให้เกิดความสับสนเวลาเลือกตอบของยูสเซอร์ (อธิบายตรงนี้ยังงงๆ เลยเนอะ)

ตัวเลือกที่มีคำแสดงสถานะตรงกันข้าม

แต่อย่าไปสับสนกับสองสิ่งที่มีคำแสดงความตรงกันข้ามอยู่แล้ว อย่างนี้สามารถใช้ Radio button ได้นะ เช่น เปิด (On) กับ ปิด (Off) เป็นต้น

6.ใช้ปุ่มลูกศร และปุ่ม Tab

การควบคุมตัวเลือกด้วยคีย์บอร์ดควรสามารถใช้งานได้ตามหลักสากล

หากเราเขียนโค้ดตัวเลือก Radio button ได้ถูกต้อง เราจะสามารถใช้ปุ่มลูกศร (Arrow key) เพื่อเปลี่ยนตัวเลือกภายในกลุ่มได้ และใช้ปุ่ม Tab เพื่อข้ามกลุ่ม (Change element index)

7. เรียง Radio Button ในแนวตั้ง ถ้าเป็นไปได้

จัดวางตัวเลือกในแนวตั้ง หากมีพื้นที่แสดงผลเพียงพอ

หากเป็นไปได้ เราควรเรียงตัวเลือก Radio button ในแนวตั้ง เพราะจะทำให้การสแกนอ่านตัวเลือกได้เร็วกว่าแบบเรียงในแนวนอน หากจำเป็นต้องเรียงในแนวนอน ควรเว้นช่องว่างระหว่างตัวเลือกให้ชัดเจน

8. เรียงลำดับตัวเลือก ตามตรรกะที่เหมาะสม

จัดเรียงตัวเลือกตามตรรกะที่เหมาะสมและเข้ากับความเป็นจริง

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

9. หลีกเลี่ยงตัวเลือกแบบลำดับชั้นย่อย ๆ

พยายามหลีกเลี่ยงการใช้ตัวเลือกลำดับย่อย

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

10. เซ็ตตัวเลือกแรกเป็นค่าดีฟอลต์

ตั้งค่าตัวเลือกดีฟอลต์ให้เป็นตัวแรกเสมอ

มันจะดูแปลก ถ้าอยู่ๆ ตัวเลือกค่าดีฟอลต์ไปอยู่ที่ตัวเลือกลำดับอื่นที่ไม่ใช่อันแรก

11. เพิ่มความชัดเจนของตัวเลือก

การเลือกใช้ Check box ที่มโนเอาว่ายูสเซอร์จะเข้าใจในอีกสถานะที่ไม่ได้เลือก

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

12. ใช้คำในฟอร์มเพื่อช่วยตัดสินใจ

การใช้คำแนะหลังตัวเลือกเพื่อช่วยเรื่องของการตัดสินใจ

เราอาจใช้คำที่ทำให้ยูสเซอร์เลือกตอบได้ง่ายหรือเพิ่มความมั่นใจในการตัดสินใจ โดยใส่ไว้ในวงเล็บต่อท้ายข้อความตัวเลือก Radio button

ตัวอย่างคำ เช่น

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

13. อย่าใช้คำซ้ำนำหน้าตัวเลือก

การย้ายคำซ้ำไปไว้ที่หัวข้อตัวเลือก

หากมีการใช้คำซ้ำนำหน้าตัวเลือก ให้เราลองพิจารณาย้ายคำซ้ำนั้นไปไว้ที่เลเบลดู

14. ใส่คำอธิบายไว้ด้านล่างของตัวเลือก แต่ไม่จำเป็นต้องใส่ทุกอัน

คำอธิบายไม่จำเป็นต้องมีทุกเลือก

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

15. ทำให้ตัวหนังสือคลิกได้ด้วย

การออกแบบเพื่อให้มีพื้นที่คลิกของตัวเลือกมากขึ้น

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

16. อย่าใช้เพื่อเป็น Action Command

ฟอร์มพร้อมปุ่มดำเนินการ (Action button)

เราควรมีปุ่ม Action เพื่อนำเอาข้อมูลที่ป้อนเข้ามาผ่านทาง Radio button, Check box หรือ Select box ไปดำเนินการจัดการต่อ ไม่ควรนำเอาตัวเลือกไปประมวลผลเพื่อใช้สร้าง action โดยทันที

เว็บ Agoda จะทำการอัพเดพลิสต์โรงแรมทันทีที่เลือกตัวกรอง

ยกตัวอย่างเว็บ Agoda หรือ Booking.com พอเราเลือกตัวกรองหนึ่งเสร็จ ระบบก็จะทำการ update ผลลัพธ์ทันที ทางที่ดีควรมีปุ่มไว้ให้คลิกหลังจากที่เราเลือกตัวกรองหลายๆ ตัวเสร็จแล้ว น่าจะดีกว่า

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

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

ตัวอย่างคำถามในแบบสอบถามที่ใช้ Radio button

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

ตัวอย่างคำถามเรื่องเงินทองที่ต้องการให้ยูสเซอร์รับรู้อย่างตั้งใจ หรือบางครั้งเพราะกฎหมายบังคับ

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

ถึงแม้จะมีข้อยกเว้นในกรณีดังที่อธิบาย Radio button ก็ยังจำเป็นต้องมีค่าตัวเลือกดีฟอลต์เสมอนะ

ทิ้งท้ายเรื่องการออกแบบฟอร์ม

เมื่อเรียนรู้พื้นฐานของการออกแบบและใช้งาน Radio button แล้ว เชื่อว่าจะทำให้เราทราบถึงวิธีการออกแบบและใช้งานในส่วน Check box และ Select box ด้วย ทั้งสองตัวจะมีแค่ฟังก์ชันที่ต่างกับ Radio button อยู่ไม่กี่อย่าง ซึ่งได้เกริ่นไปแล้วข้างต้น

ก่อนจบ ขอยกตัวอย่างผลการทดลองของเว็บไซต์แห่งหนึ่ง เพื่อให้เห็นความทรงพลังและความดีของ Radio button

โดยเว็บไซต์แห่งนี้พยายามเปรียบเทียบว่า การใช้ UI แบบ Radio button กับ Select box แบบไหนจะได้รับออเดอร์คำสั่งซื้อมากกว่ากัน

ฟอร์มที่ใช้ Radio button เพื่อเลือกแพ็คเกจสำหรับสมัครสมาชิก

ฟอร์มที่ใช้ Select box เพื่อเลือกแพ็คเกจสำหรับสมัครสมาชิก

ผลปรากฏว่าฟอร์มที่ใช้ Radio button นำด้วยชัยชนะที่ทิ้งห่างไปถึง 15% (ได้รับคำสั่งซื้อมากกว่า 15 %)

หน้าฟอร์มของ app บนมือถือและ UI ในรูปแบบที่แนะนำ

อีกตัวอย่างจาก Luke Wrobleski นักวิจัยและนักออกแบบ UI ชาวรัสเซีย ที่เค้าแนะนำให้เปลี่ยน UI ของฟอร์มหน้าหนึ่งใน app จาก Select box มาเป็นตัวเลือกแบบ Radio button หรือเทียบเท่า 

• Recently sold: Select box -> Switcher (พื้นฐานเดียวกับ Radio button)
• Beds, Baths: Select box  -> Radio button (แบบไม่มีวงกลมข้างหน้า)

หน้าการชำระเงินของเว็บ Agoda ที่ใช้ Radio button

เหตุผลที่สนับสนุนการใช้งาน Radio button และทำให้ Radio button ชนะใจของยูสเซอร์ ก็คือ ธรรมชาติของตัว Radio button ที่ให้น้ำหนักความสำคัญอย่างเท่าเทียมในทุกตัวเลือก (Equality) และการเปิดเผยอย่างโปร่งใส (Transparency

ที่มา  :   https://www.designil.com/web-form-design-user-interface.html