UI Blogazine

ทฤษฎี UI

เช็คความเข้าใจ UI Checkbox in Practice

featuring-checkbox-review

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

ประเภทของ Checkbox
checkbox-type

ตัวอย่าง Checkbox แบบ Stand-Alone และ แบบ Group

Checkbox จะมีอยู่ 2 ประเภทครับ คือ
1.  Checkbox แบบ stand-alone หรือ แบบเดี่ยว คือ checkbox ที่มีให้เลือกเพียงตัวเดียวต่อหนึ่งการตัดสินใจ ส่วนใหญ่จะเป็นการตัดสินใจในลักษณะคำตอบ ใช่/ไม่ใช่ เช่น การเลือกยอมรับจดหมายข่าว, การเลือกรับทราบข้อตกลง เป็นต้น

2. Checkbox แบบ group หรือ แบบกลุ่ม คือ checkbox ที่มีอยู่หลายอันต่อหนึ่งการตัดสินใจ โดยสามารถเลือกตอบได้หลายๆ checkbox เช่น การเลือกตอบตัวเลือกปัจจัยการซื้อคอนโด, การเลือกหัวข้อข่าวสารที่สนใจ เป็นต้น

 

ประเภทค่าเริ่มต้นของ Checkbox

checkbox-setting-type

ตัวอย่าง Checkbox แบบ Opt-out (ต้องเลือกออก) และ แบบ Opt-in (ต้องเลือกเข้า)

ค่าเริ่มต้นของ Checkbox มีอยู่ 2 ประเภท คือ
1. Opt-out หรือ checkbox ที่ต้องตัดสินใจติ๊กออก คือ Checkbox ที่มีสถานะเริ่มแรกที่ระบบเลือกติ๊กไว้ให้โดย Default
2. Opt-in หรือ checkbox ที่ต้องตัดสินใจติ๊กเข้า คือ Checkbox ที่่มีสถานะเริ่มแรกที่ระบบไม่เลือกติ๊กไว้ให้โดย Default

ซึ่งในการออกแบบ UI checkbox หากเราเลือกค่าเริ่มต้นของ Checkbox ไม่เหมาะสม อาจส่งผลให้เป้าหมายที่ต้องการไม่สำเร็จตามต้องการก็เป็นได้นะครับ

ตัวอย่างด้านบนคือ การเปรียบเทียบฟอร์มที่เลือกใช้ค่าเริ่มต้นที่ต่างกัน ซึ่งหากเราอยากให้คนมาบริจาคร่างกายเยอะๆ ก็ลองเลือกใช้ Checkbox แบบ Opt-out (ต้องตัดสินใจเลือกออก) อาจได้ยอดจำนวนผู้บริจาคเพิ่มขึ้นอย่างน่าตกใจ ซึ่งเคยมีงานศึกษาของมหาวิทยาลัย Standford ว่า หากเราเปลี่ยนนโยบายการบริจาคอวัยวะจากที่ต้องเสนอตัวเข้ายินยอมบริจาค (Opt-in) ให้เป็นการเสนอตัวออกจากโปรแกรมการบริจาคอวัยวะ จะช่วยเพิ่มยอดผู้บริจาคร่างกายได้อย่างมหาศาล และสามารถช่วยเหลือเพื่อนมนุษย์ได้เป็นร้อยๆ พันๆ เลยล่ะ แต่ก็คงยากเนอะสำหรับหลายๆ ประเทศ ^_^!

ข้อควรระวังการออกแบบ Checkbox

ถ้าเป็นไปได้ ผมอยากให้หลีกเลี่ยงการออกแบบ Checkbox แบบนี้ครับ คือ

1.  ใช้คำเชิงลบ

checkbox-01

การใช้คำเชิงบวกในการออกแบบ UI Checkbox และหลีกเลี่ยงการใช้คำเชิงลบ

ผมคิดว่า Checkbox เป็น UI ที่เหมาะกับความคิดหรือการตัดสินใจเชิงบวกมากกว่า เช่น การเลือกตอบตกลง, ยอมรับเงื่อนไข, หรือพูดง่ายๆ คือ คำตอบในเชิง ‘ใช่’ เพราะ การ เลือก ให้ความรู้สึกเหมือนเรากำลัง เพิ่ม หรือ ได้ อะไรมา ใช่ไหมครับ?

ดังนั้นแล้ว ถ้าเป็นไปได้ควรหลีกเลี่ยงคำเชิงลบที่จะนำมาใช้กับ Checkbox ดีกว่านะ เช่นคำว่า ยกเลิก, ไม่เหมือน, แตกต่าง, นำออก เป็นต้น เพราะมันจะขัดกับความรู้สึกในการกระทำ ถ้าคิดคำเชิงบวกไม่ออก อาจลองเลือกใช้ UI อื่นดูนะครับ เช่น กรณียกเลิกการรับจดหมายข่าว อาจจะใช้เป็นปุ่ม ‘ยกเลิก’ แทน จะดีไหม?

2. ใช้สไตล์ที่ไม่ใช่ Checkbox

checkbox-practice-02

การรักษาสไตล์ UI Checkbox ให้ไม่แตกต่างจากของดั้งเดิมจะทำให้ยูสเซอร์ไม่ต้องเรียนรู้ UI ใหม่

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

ตัวอย่างการใช้งานจริง

คราวนี้ เรามาดูตัวอย่างการใช้งาน Checkbox จริงกัน แล้วเราจะเห็นความสามารถแฝงของ Checkbox อีกข้อหนึ่งที่เรากำลังจะได้เรียนรู้ครับ

ตัวอย่างฟอร์มที่อยู่การจัดส่งสินค้าและบิล

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

1. Checkbox แบบ Opt-out + คำเชิงบวก

checkbox-practice-03

ตัวเลือกที่อยู่การจัดส่งบิลแบบ Opt-out และใช้คำเชิงบวก

ง่ายสุดเลย เราเลือกออกแบบ Checkbox แบบ Opt-out สำหรับตัวเลือกที่อยู่การจัดส่งบิล ด้วยดีไซน์แบบนี้ ยูสเซอร์ก็ไม่ต้องเสียเวลามากรอกข้อมูลที่อยู่การจัดส่งบิลและติ๊กเลือกในกรณีที่ที่อยู่ทั้งสองเหมือนกัน เข้าใจง่ายและประหยัดเวลาดี

2. Checkbox แบบ Opt-in+ คำเชิงลบ

checkbox-practice-04

ตัวเลือกที่อยู่การจัดส่งบิลแบบ Opt-in และใช้คำเชิงลบ

ลองมาดูอีกแบบครับ ในทางตรงข้าม หากเราเลือกใช้ Checkbox แบบ Opt-in แล้วก็เลือกใช้คำแบบเชิงลบ (ในที่นี่คือคำว่า “ต่าง”) แม้ว่าจะช่วยให้ฟอร์มประหยัดพื้นที่ (คือไม่ต้องกรอกหรือแสดงข้อมูลซ้ำ) แต่เรากำลังทำให้ยูสเซอร์คิดอยู่ครับ แล้วยูสเซอร์เค้าคิดเรื่องอะไรหนอ? Checkbox แบบนี้ไม่ดีพอเหรอ?

checkbox-practice-05

การออกแบบ UI ที่ไม่ทำให้ยูสเซอร์ต้องคิดมาก (Don’t Make Me Think) คือ UI ที่ดีครับ แต่สำหรับ UI checkbox แบบนี้ หากเราไม่เลือกติ๊ก ยูสเซอร์จะไม่มีทางรู้เลยว่า ตอนนี้ระบบคิดอะไรอยู่ คือได้แค่คาดเดาว่า ถ้าไม่เลือก Checkbox หมายความว่า ที่อยู่ทั้งสองเหมือนกันมั้ง

ถ้าดูย้อนไปในดีไซน์แรกที่เป็น Checkbox แบบ Opt-out + คำเชิงบวก เราจะเข้าใจได้เลยว่า ตอนนี้ที่เลือกตัวเลือกนี้อยู่ ระบบกำลังคิดหรือเลือกทำอะไรให้เราอยู่ นั่นก็คือ ระบบกำลังคิดว่า ที่อยู่ในการส่งสินค้า เหมือนกับ ที่อยู่ในการจัดส่งบิล แบบไม่ต้องสงสัย แล้วก็หากติ๊กเลือกตัวเลือกนี้ออก ก็จะมีฟอร์มโผล่มาให้กรอกข้อมูลที่อยู่เพิ่มเติม (ระบบใบ้ให้เรารู้ว่า กำลังบันทึกที่อยู่ที่ต่างกันแล้วนะ) ซึ่งสามารถนำมาคิดเป็นดีไซน์แบบที่ 3 ก็ได้เช่นกัน

3. Checkbox แบบ Opt-in+ คำเชิงบวก

checkbox-practice-06

ตัวเลือกที่อยู่การจัดส่งบิลแบบ Opt-inและใช้คำเชิงบวก

ถ้าเราเลือกใช้ Checkbox แบบ Opt-in และ คำพูดเชิงบวก ก็จะโอเคกับเงื่อนไขว่า ทุกอย่างดูเข้าใจดีนะ แต่ฟอร์มไม่ค่อยกระชับเท่าไร อีกทั้งส่วนใหญ่ ที่อยู่ทั้งสองมักเหมือนกัน ก็เลยดูเป็นค่า Default สำหรับ Checkbox ที่ไม่ค่อยดีเท่าไรครับ

4. Checkbox แบบ Opt-out+ คำเชิงลบ

checkbox-practice-07

ตัวเลือกที่อยู่การจัดส่งบิลแบบ Opt-out และใช้คำเชิงลบ

แบบที่ 4 นี่ยิ่งงงเลยครับ และแย่ที่สุดเลย นอกจากฟอร์มดูยืดยาวแล้ว พอตอนเราติ๊กตัวเลือก Checkbox ออก จะไม่แน่ใจเลยตอนนี้ระบบคิดอะไรอยู่ แค่คาดเดาว่า ถ้าติ๊กออกคือ ที่อยู่ทั้งสองเหมือนกันมั้ง

สรุปบทเรียนที่เราได้เห็นจากตัวอย่างนี้ชัดๆ คือ ความสามารถแฝงของ Checkbox แบบ Opt-out ที่ใช้คำพูดเชิงบวก ซึ่งบอกให้เรารู้ว่า
ตอนนี้ระบบคิดอะไรอยู่ และส่วนใหญ่จะช่วยทำให้ฟอร์มประหยัดพื้นที่ครับ

เดี๋ยวมาดูอีกตัวอย่าง ก็จะเข้าใจวิธีการใช้งาน Checkbox แบบนี้มากขึ้นครับ

 

ตัวอย่างการแสดงผลตารางราคาสินค้า

checkbox-setting-02

ตัวเลือกการคิดราคากีตาร์สีไม้และสีดำ แบบ Opt-out และใช้คำพูดเชิงบวก

จากที่เราได้เรียนรู้ไปแล้วใช่ไหมครับว่า UI Checkbox แบบ Opt-out + คำเชิงบวก จะช่วยบ่งบอกสภาพความคิดหรือการทำงานของระบบและช่วยประหยัดพื้นที่ของฟอร์ม ดังนั้นหากผมเปิดตัวฟอร์มตารางดังภาพด้านบน ก็เข้าใจไม่ได้ยากเลยใช่ไหมครับว่า ตอนนี้ระบบคิดคำนวณราคาของกีตาร์สีไม้กับสีดำเท่ากันอยู่ โดยที่ไม่ต้องแสดงผลราคากีตาร์สีดำให้เห็น

checkbox-setting-01

ตัวเลือกเงื่อนไขราคากีตาร์สีไม้และสีดำ แบบ Opt-out และใช้คำพูดเชิงบวก พร้อมแสดงข้อมูลแบบเต็ม

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

checkbox-setting-01c

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

ซึ่งพอติ๊กตัวเลือกออก ก็แสดงผลคอลัมน์ราคาสีดำที่มีช่องราคาให้แก้ไข

 

checkbox-setting-01b

ตัวเลือกเงื่อนไขราคากีตาร์สีไม้และสีดำ แบบ Opt-in และใช้คำพูดเชิงลบ

เปรียบเทียบกับ Checkbox แบบ Opt-in ที่ใช้คำเชิงลบ (ในที่นี่คือคำว่า “ต่างกับ”) หากเราอยากให้ข้อมูลกระจ่าง เราจำเป็นต้องแสดงข้อมูลคอลัมน์ราคาสีดำคู่กับสีไม้ไว้ตลอด หากซ่อนแล้ว จะทำให้ยูสเซอร์ไม่แน่ใจว่า ราคาสีไม้เท่ากับราคาสีดำจริงเหรอ?

checkbox-setting-02b

ตัวเลือกเงื่อนไขราคากีตาร์สีไม้และสีดำ แบบ Opt-in และใช้คำพูดเชิงลบ โดยซ่อนคอลัมน์แสดงราคาสีดำ

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

checkbox-status-02

การเลือกใช้ Checkbox แบบ Opt-in และคำเชิงลบ จะทำให้ยูสเซอร์ไม่ทราบว่า ณ สถานะปัจจุบัน ระบบกำลังคิดอะไรอยู่

ชัดเจนเลยใช่ไหมครับ คราวนี้

 

checkbox-setting-03b

การประยุกต์ใช้ Checkbox เพื่อแสดง/ซ่อนข้อมูล

อีกแนวคิดหนึ่งคือ เราสามารถใช้ Checkbox แบบ Opt-in เพื่อซ่อน/แสดงข้อมูล โดยใช้คำพูดเชิงบวก คือ คำว่า “แสดง” ดังตัวอย่างด้านบน เพื่อเลือกแสดงเฉพาะข้อมูลหลักที่จำเป็นให้เห็นในตอนแรกเท่านั้น (หากไม่เลือกแสดงราคาสีขาว คอลัมน์สีขาวก็จะไม่ปรากฎให้เห็นในตอนแรก)

checkbox-status-01

ความสามารถของ Checkbox ที่สามารถบ่งบอกสถานะปัจจุบัน และสามารถเชื่อมโยงให้ซ่อนหรือแสดงข้อมูล

Checkbox ในกรณีตัวอย่างนี้ก็เลยมีทำหน้าที่ทั้ง บ่งบอกสถานะว่าระบบคิดอะไรอยู่ และ บอกสถานะ On/Off (แสดง/ซ่อน) ของคอลัมน์ข้อมูลด้วย

เข้าใจตรงกันนะ

สนุกใช่ไหมครับ กับเรื่องพื้นฐานของ UI Checkbox ที่แฝงด้วยความสามารถที่หลายๆ คนอาจมองข้ามหรือไม่ได้สังเกต สรุปแล้ว จะออกแบบ Checkbox ถ้าเป็นไปได้ ผมจะเลือกใช้คำเชิงบวกไว้ก่อน เพราะมันสอดคล้องกับความรู้สึกที่เรากำลังคลิกเลือก(เพิ่ม) ส่วนจะ Opt-in หรือ Opt-out อันนี้พูดยาก ต้องดูเป็นรายกรณีเอา แต่ถ้ามีเรื่องอยากประหยัดพื้นที่ ก็ลองคิดใช้ Opt-out ดูก่อนเลย

แต่ Checkbox แบบคำเชิงลบ ใช่ว่าจะผิดหรือดูแย่ทุกกรณีนะครับ เช่น

[    ] ยกเลิกการนัดหมาย  –> คำเชิงลบ แต่ก็พอเข้าใจได้ไม่ยาก, ใช้ Opt-in เพื่อให้ใช้ความพยายามหน่อยในการเลือก
[ X ] เคลียร์พื้นที่ในหน่วยความจำ –> คำเชิงลบ แต่ผลลัพธ์ดี, ใช้ Opt-out เพราะคาดว่ายูสเซอร์ส่วนใหญ่เลือกค่านี้

ทั้งสองตัวอย่างด้านบน ก็ดูมี Usability ที่ดีนะครับ ผมก็เลยฟันธงไม่ได้ว่าแบบไหนดีที่สุด เพียงแค่วางแนวทางการออกแบบพื้นฐานไว้ประกอบการพิจารณา

***

ประทับใจบทความ กด Like เลย! https://www.facebook.com/uiblogazine/

เรียกใช้บริการ UI Ask ดูรายละเอียด http://www.uiblogazine.com/ui-ask

คุยการส่วนตัว ทักทายผ่าน Facebook Chat ได้เลย

Tagged , ,

About uiblogaziner

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

View all posts by uiblogaziner →

Leave a Reply

Your email address will not be published. Required fields are marked *