หลายคนคงรู้จัก Radio Buttons และ Dropdowns กันอยู่แล้ว แต่อาจจะยังมีข้อสงสัยว่า UI Component ทั้ง 2 อย่างนี้ควรใช้เมื่อไหร่ แตกต่างกันอย่างไร และควรเลือกใช้ UI Component ไหนให้เหมาะสมลงตัวที่สุด เพื่อให้เป็น “The Best Choice” ในการสร้าง Interaction ที่ดีที่สุดสำหรับผู้ใช้งาน
Radio Buttons คือ ปุ่มประเภทหนึ่งบนจอภาพ ปุ่มนี้มีวิธีการใช้งานเหมือนปุ่มบนเครื่องวิทยุ ที่เมื่อเลือกกดไปที่ปุ่มใดปุ่มหนึ่งแล้ว ปุ่มที่เหลือจะถูกยกเลิกโดยอัตโนมัติ จึงเรียกปุ่มนี้ว่า Radio Buttons นั่นเอง
ในการออกแบบ User Interface นั้น Radio Buttons ถูกนำมาใช้ในกรณีที่มีตัวเลือกตั้งแต่สองตัวเลือกขึ้นไปที่ไม่เกิดขึ้นร่วมกัน การคลิกปุ่มเพื่อเลือกตัวเลือกหนึ่ง จะเป็นการยกเลิกการเลือกปุ่มอื่นๆทันที คือ สามารถเลือกได้เพียงครั้งละหนึ่งตัวเลือกเท่านั้น โดยส่วนมากมักเป็นตัวเลือกที่ผู้ใช้ไม่คุ้นเคย หรือเป็นชื่อเฉพาะ เช่น การเลือกช่องทางการชำระเงินเพื่อซื้อสินค้าที่มีช่องทางการชำระเงินเป็นชื่อเรียกเฉพาะ หากเลือกจ่ายด้วย Paypal ก็จะไม่สามารถจ่ายด้วย MasterCard หรือ Visa ในเวลาเดียวกันได้ ต้องเลือกเพียงอย่างใดอย่างหนึ่ง และผู้ใช้สามารถตัดสินใจได้จากการเห็นตัวเลือกทั้งหมดพร้อม ๆ กัน
Dropdowns คือ เมนูตัวเลือกที่เมื่อกดแล้วจะแสดงรายการตัวเลือกต่าง ๆ ให้ผู้ใช้เลือก ส่วนมาก Dropdowns จะถูกใช้ในกรณีที่รายการตัวเลือกนั้นเป็นข้อมูลที่ผู้ใช้ทราบตัวเลือกอยู่แล้ว เช่น การกรอกข้อมูลส่วนตัว ที่มักจะมี Dropdowns ให้เลือกคำนำหน้า จังหวัด หรือประเทศ เป็นต้น
นอกจากนี้ Dropdowns ยังช่วยซ่อนรายการตัวเลือกทั้งหมดทำให้ประหยัดพื้นที่ได้ดี แต่การใช้เมนู Dropdowns ควรเลือกให้ดีว่ามีความจำเป็นจริง ๆ ไหม เพราะหากใช้มากเกินไปจะส่งผลให้ผู้ใช้งานอาจใช้งานได้ยากขึ้น เพราะต้องกดเพื่อแผ่รายการตัวเลือกทั้งหมดก่อนทุกครั้ง
Dropdowns ถูกนำมาใช้เพื่อวัตถุประสงค์ต่างๆ ที่หลากหลาย ซึ่งส่วนมากจะถูกนำมาใช้ใน 3 รูปแบบหลัก ดังนี้
หลังจากได้ทราบข้อแตกต่างและวิธีการใช้งาน Radio Buttons และ Droprowns กันแล้ว ลองมาทดสอบกันว่าเพื่อน ๆ สามารถเลือกใช้ UI Component ได้อย่างถูกต้องหรือไม่ โดยเลือกคำตอบที่มั่นใจเพียงข้อเดียว แล้วอ่านเฉลยและคำอธิบายใต้ภาพได้เลย
Radio Buttons
เพราะตัวเลือกต่าง ๆ ในรายการ เป็นชุดตัวเลือกที่ผู้ใช้อาจไม่คุ้นเคย หากผู้ใช้ไม่เคยสั่งแซนวิชร้านนี้มาก่อน ก็ไม่สามารถเดารายชื่อของขนมปังทั้งหมดที่มีในเมนูได้ ผู้ใช้บางคนอาจเพิ่งเคยสั่งเมนูนี้เป็นครั้งแรก การแสดงตัวเลือกทั้งหมดให้เห็นในรูปแบบ Radio Buttons ทำให้ผู้ใช้สามารถเลือกได้ง่ายกว่า
แต่ถ้าหากตัวเลือกประเภทขนมปังมีเยอะมาก ๆ จนจนต้อง Scroll ก็ไม่ต้องกังวลใจไป เพราะผู้ใช้ในยุคนี้มีความคุ้นเคยกับการ Scroll อยู่แล้ว หากพวกเขาเคยใช้งาน Facebook หรือ Instagram นั่นไม่ใช้ปัญหาใหญ่สำหรับพวกเขาเลย
จากตารางนี้จะช่วยทำให้เข้าใจและสามารถเลือกงานใช้ Radio Buttons และ Dropdowns ได้อย่างถูกต้องและมั่นใจมากขึ้น นอกจากนี้การเลือกใช้ UI Component ไหนก็ตามในงานออกแบบ นักออกแบบจะต้องศึกษาพฤติกรรมผู้ใช้อยู่เสมอด้วย เพื่อที่นักออกแบบจะสามารถออกแบบให้ตรงตามความต้องการของผู้ใช้มากที่สุด เมื่อยุคสมัยเปลี่ยน พฤติกรรมผู้ใช้ก็อาจเปลี่ยนแปลงไปด้วย นักออกแบบจำเป็นต้องอัปเดตเทรนด์อยู่เสมอ
Making things easy is hard.
Ted Nelson
ประโยคนี้ยังคงใช้ได้เสมอ เพราะออกแบบให้ง่ายนั้นเป็นเรื่องยาก กดติดตามเพจ Unblock Design เพื่อให้ไม่พลาดความรู้ใหม่ ๆ เกี่ยวกับโลกธุรกิจ และการออกแบบ
ติดตามบทความเกี่ยวกับการวิจัยและออกแบบได้ที่
Facebook : https://www.facebook.com/unblockdesign
Instagram : https://www.instagram.com/unblockdesign
ทีมออกแบบของ Blockfint ที่มีความเชี่ยวชาญในการวิจัย วางแผน และออกแบบ Digital Products