เมื่อไหร่ควรใช้ Radio Buttons และ Dropdowns?

clock
07 January 2022

หลายคนคงรู้จัก Radio Buttons และ Dropdowns กันอยู่แล้ว แต่อาจจะยังมีข้อสงสัยว่า UI Component ทั้ง 2 อย่างนี้ควรใช้เมื่อไหร่ แตกต่างกันอย่างไร และควรเลือกใช้ UI Component ไหนให้เหมาะสมลงตัวที่สุด เพื่อให้เป็น “The Best Choice” ในการสร้าง Interaction ที่ดีที่สุดสำหรับผู้ใช้งาน

Radio Buttons  คืออะไร?

ภาพประกอบ
ภาพแสดงตัวอย่างการใช้งาน Radio Buttons

Radio Buttons คือ ปุ่มประเภทหนึ่งบนจอภาพ  ปุ่มนี้มีวิธีการใช้งานเหมือนปุ่มบนเครื่องวิทยุ ที่เมื่อเลือกกดไปที่ปุ่มใดปุ่มหนึ่งแล้ว ปุ่มที่เหลือจะถูกยกเลิกโดยอัตโนมัติ จึงเรียกปุ่มนี้ว่า Radio Buttons นั่นเอง

เมื่อไหร่ควรใช้ Radio Buttons?

ในการออกแบบ User Interface นั้น Radio Buttons ถูกนำมาใช้ในกรณีที่มีตัวเลือกตั้งแต่สองตัวเลือกขึ้นไปที่ไม่เกิดขึ้นร่วมกัน การคลิกปุ่มเพื่อเลือกตัวเลือกหนึ่ง จะเป็นการยกเลิกการเลือกปุ่มอื่นๆทันที คือ สามารถเลือกได้เพียงครั้งละหนึ่งตัวเลือกเท่านั้น โดยส่วนมากมักเป็นตัวเลือกที่ผู้ใช้ไม่คุ้นเคย หรือเป็นชื่อเฉพาะ เช่น การเลือกช่องทางการชำระเงินเพื่อซื้อสินค้าที่มีช่องทางการชำระเงินเป็นชื่อเรียกเฉพาะ หากเลือกจ่ายด้วย Paypal ก็จะไม่สามารถจ่ายด้วย MasterCard หรือ Visa ในเวลาเดียวกันได้ ต้องเลือกเพียงอย่างใดอย่างหนึ่ง และผู้ใช้สามารถตัดสินใจได้จากการเห็นตัวเลือกทั้งหมดพร้อม ๆ กัน

ภาพแสดงการข้อได้เปรียบ และเสียเปรียบของใช้งาน Radio Buttons

ข้อได้เปรียบ

  1. Radio Buttonsใช้งานง่าย และรวดเร็ว เพราะผู้ใช้สามารถเลือกรายการได้ในตัวเลือกเดียว
  2. Radio Buttons ทำให้ผู้ใช้เห็นตัวเลือกทั้งหมด โดยที่ยังไม่ต้องออกแรงคลิกอะไรเลย
  3. ผู้ใช้ไม่ต้องจดจำตัวเลือกที่ถูกซ่อนอยู่ เพราะตัวเลือกต่าง ๆ ถูกกางไว้ให้เห็นทั้งหมดแล้ว
  4. ง่ายต่อการเปรียบเทียบตัวเลือกต่าง ๆ

ข้อเสียเปรียบ

  1. ใช้พื้นที่หน้าจอเยอะในการแสดงผล เพราะต้องแสดงทุกตัวเลือกที่มีอยู่
  2. ใช้ได้กับตัวเลือกที่มีจำกัด
ภาพแสดงตัวอย่างการใช้งาน Dropdowns

Dropdowns คือ เมนูตัวเลือกที่เมื่อกดแล้วจะแสดงรายการตัวเลือกต่าง ๆ ให้ผู้ใช้เลือก ส่วนมาก Dropdowns จะถูกใช้ในกรณีที่รายการตัวเลือกนั้นเป็นข้อมูลที่ผู้ใช้ทราบตัวเลือกอยู่แล้ว เช่น การกรอกข้อมูลส่วนตัว ที่มักจะมี Dropdowns ให้เลือกคำนำหน้า จังหวัด หรือประเทศ เป็นต้น

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

เมื่อไหร่ควรใช้ Dropdowns?

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

  • เมนูเพื่อเลือกคำสั่ง เช่น การเลือกคำสั่งต่าง ๆ บน Google Document ตัวเลือกมักอยู่ในรูปแบบของ Dropdowns Menu เมื่อกคลิกที่เมนู Edit จะมีรายการตัวเลือก เช่น Copy, Cut, Paste และอื่น ๆ เรียงลงมาให้ผู้ใช้เลือก
  • เมนูที่นำพาผู้ใช้ไปยังตำแหน่งใหม่  เช่น Navigation Bar บนเว็บไซต์ต่าง ๆ
  • การกรอกแบบฟอร์ม หรือ Data Input เช่น การเลือกจังหวัด ประเทศ เป็นต้น
ภาพแสดงการข้อได้เปรียบ และเสียเปรียบของการใช้งาน Dropdowns

ข้อได้เปรียบ

  1. Dropdowns ช่วยประหยัดพื้นที่บนหน้าจอ เพราะได้รวบรวมทุกรายการตัวเลือกไว้ในแถบเดียว
  2. ช่วยในการจัดเก็บข้อมูลลงระบบอย่างเป็นระเบียบ เมื่อเปรียบเทียบกับการใช้ Text Fields ที่ผู้ใช้อาจพิมพ์ผิด สะกดผิด หรือป้อนรูปแบบของข้อมูลผิดได้ง่าย ทำให้อาจมีข้อมูลที่มีความหมายเดียวกันแต่ไม่ถูกบันทึกเป็นแบบเดียวกัน การเลือกตัวเลือกจาก Dropdown สามารถช่วยแก้ปัญหานี้ได้
  3. Dropdowns มีความยืดหยุ่นในการใช้งานสูง โดยที่ผู้ดูแลระบบสามารถเพิ่มหรือลดตัวเลือกได้ โดยที่ไม่กระทบกับภาพรวมของดีไซน์

ข้อเสียเปรียบ

  1. Dropdowns สามารถมีตัวเลือกได้เยอะมาก อาจเป็นเรื่องยากในการค้นหาตัวเลือกที่ต้องการ นักออกแบบอาจต้องคำนึงถึงการใช้องค์ประกอบอื่น ๆ มาเป็นตัวช่วย เพื่อให้ผู้ใช้สามารถค้นหาและเลือกตัวเลือกที่ต้องการได้ง่ายขึ้น เช่น การเพิ่ม Search Suggestion ใน Dropdowns
  2. พฤติกรรมการใช้งาน Dropdowns มีได้หลายรูปแบบ อาจคาดเดาได้ยาก เช่น มีทั้ง Dropdown ที่แผ่รายการตัวเลือกออกโดยการ Hover และ Dropdowns ที่ต้องคลิกก่อน รายการตัวเลือกจึงจะแผ่ออกมา

เกมส์ทดสอบความเข้าใจ

หลังจากได้ทราบข้อแตกต่างและวิธีการใช้งาน Radio Buttons และ Droprowns กันแล้ว ลองมาทดสอบกันว่าเพื่อน ๆ สามารถเลือกใช้ UI Component ได้อย่างถูกต้องหรือไม่ โดยเลือกคำตอบที่มั่นใจเพียงข้อเดียว แล้วอ่านเฉลยและคำอธิบายใต้ภาพได้เลย

ภาพเแสดงเกมส์ทดสอบความเข้าใจ

เฉลย

Radio Buttons

ภาพเฉลยเกมส์ทดสอบความเข้าใจ

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

แต่ถ้าหากตัวเลือกประเภทขนมปังมีเยอะมาก ๆ จนจนต้อง Scroll ก็ไม่ต้องกังวลใจไป เพราะผู้ใช้ในยุคนี้มีความคุ้นเคยกับการ Scroll อยู่แล้ว หากพวกเขาเคยใช้งาน Facebook หรือ Instagram นั่นไม่ใช้ปัญหาใหญ่สำหรับพวกเขาเลย

ตารางเปรียบเทียบการใช้งาน เมื่อไหร่ควรใช้ Dropdowns หรือ Radio Buttons

ภาพแสดงตารางเปรียบเทียบการใช้งาน เมื่อไหร่ควรใช้ Dropdowns หรือ Radio Buttons

จากตารางนี้จะช่วยทำให้เข้าใจและสามารถเลือกงานใช้ 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

Tags:#Interaction Design #Product Design #User Interface

Author
Writer: Unblock Design

ทีมออกแบบของ Blockfint ที่มีความเชี่ยวชาญในการวิจัย วางแผน และออกแบบ Digital Products


Interested to be our partner?
Mailbox