แจกของฟรี

ปุ่ม (Button) นับว่าเป็นชิ้นส่วนในการออกแบบเว็บไซต์พื้นฐานที่ทุกเว็บไซต์ ทุกแอพพลิเคชั่นจำเป็นต้องมี ไม่ว่าเราจะดีไซน์ User Interface (UI Design) หรือกำลังร่าง Wireframe (UX Design) ก็ตาม
การออกแบบปุ่มแม้จะดูเหมือนง่าย แต่ถ้าได้ออกแบบ Website / Mobile Application ออกมาจริง ๆ จะพบว่ามีสิ่งที่ต้องคิดมากมาย ไม่ว่าจะเป็นการเลือกสีของปุ่ม การเลือกตัวหนังสือที่เขียน หรือเวลามีหลาย ๆ ปุ่มเรียงกันแล้วเราจะจัดวางอย่างไร ฯลฯ
ก่อนหน้านี้แอดมิน Designil.com ได้อ่านบทความ Buttons in Design Systems เขียนโดยคุณ Nathan Curtis และพบว่าคำแนะนำในบทความนี้ล้ำค่ามาก จึงได้ทำการติดต่อไปขอเรียบเรียงเป็นภาษาไทยมาให้คนไทยเราได้อ่านกันครับ
บทความนี้จะรวบรวม 12 บทเรียนที่คุณ Nathan ได้เรียนรู้มาจากการทำงานกับการออกแบบปุ่มประเภทต่าง ๆ ครับ โดยแบ่งเป็น 3 หัวข้อใหญ่ คือ
 

• การออกแบบปุ่มหลัก (Primary Button)
• การออกแบบปุ่มรอง (Secondary Buttons)
• การออกแบบปุ่มประเภทอื่น ๆ (Additional Button Types)

การออกแบบปุ่มหลัก (Primary Button) 1) วางพื้นฐานดีไซน์ของปุ่มให้ดี ปุ่ม 1 ปุ่มดูไม่ค่อยมีอะไร แต่จริง ๆ แล้วประกอบด้วย 3 คุณลักษณะหลัก ๆ นั่นคือ สี + ตัวหนังสือ + ไอคอน ประกอบมาเป็นชิ้นส่วนปุ่มด้านใน นอกจากนั้นการออกแบบยังต้องคำนึงถึงปุ่มด้านนอก นั่นคือระยะ Padding (ระยะจากตัวหนังสือในปุ่ม ถึงขอบปุ่ม) และระยะ Margin (ระยะจากขอบปุ่ม ถึงชิ้นส่วนอื่นบนหน้าเว็บไซต์)
หรือบางปุ่มเราก็มีการเพิ่มขอบมน (ด้วย CSS3 border-radius) หรือเงา (ด้วย CSS3 box-shadow) เพื่อให้ปุ่มเด่นชัดขึ้นได้อีกด้วย
  ปุ่ม 1 ปุ่มจริง ๆ แล้วมี Attribute เยอะมากให้ออกแบบ
  2) ตัวหนังสือในปุ่มไม่ใช่เรื่องเล่น ๆ เมื่อก่อนเรามักจะทำปุ่มแล้วเขียนว่า “คลิกที่นี่” หรือ “Click Here” ซึ่งคำแบบนี้เวลาคนอ่านจะไม่มีทางรู้เลยว่าปุ่มนี้กดแล้วไปไหน ยกเว้นแต่ว่าเราเขียนอธิบายไว้หน้าปุ่ม เพราะฉะนั้นควรใช้คำที่ชัดเจน เช่น “บันทึก” (Save) หรือ “ยกเลิก” (Cancel) เพื่อบ่งบอกว่าปุ่มนี้มีไว้ทำอะไร
นอกจากนั้นในฐานะที่เราเป็นคนออกแบบ ต้องมีการวาง Guideline สำหรับคนที่จะเอาปุ่มเราไปใช้ด้วย ว่าควรใช้คำแบบไหน มีอารมณ์แบบไหน ตัวอย่างที่ดีก็เช่น Styleguide ของ MailChimp ซึ่งกำหนดเรื่อง Voice & Tone ไว้เลยว่าต้องใช้คำที่ “ตลกแต่ไม่โง่” (Funny but not silly)
  คำบนปุ่มควรจะเป็นแบบไหนดี
  3) ทำปุ่มเวอร์ชั่นสลับสีเตรียมไว้ด้วย สำหรับใช้กับพื้นหลังหลายแบบ ปกติปุ่มที่เราออกแบบจะวางอยู่บนพื้นหลังสีขาว ซึ่งทำให้ปุ่มเด่นชัดมากที่สุด แต่ก็จะเกิดปัญหาเวลาเราเอาไปวางบนพื้นหลังสีเดียวกับปุ่ม หรือเอาไปวางบนพื้นหลังที่เป็นรูป ซึ่งทำให้ปุ่มจม
เพราะฉะนั้นเวลาเราออกแบบปุ่ม ควรจะมีการวาง Guideline ให้กับคนที่นำไปใช้ต่อด้วย ว่าต้องวางปุ่มบนพื้นหลังสีไหนที่เหมาะสม และควรเตรียมปุ่มเวอร์ชั่นสลับสี (Inverted Color) เช่น ตอนแรกปุ่มสีน้ำเงินตัวหนังสือสีขาว ก็เตรียมเวอร์ชั่นปุ่มสีขาวตัวหนังสือสีน้ำเงินไว้ด้วย
  เตรียมปุ่มเวอร์ชั่นสลับสี (Inverted) ไว้ด้วย
  4) ปุ่มหลัก 1 ปุ่มต่อ 1 หน้า ในหน้า 1 หน้าเว็บไซต์ / แอพ ควรจะมีปุ่มหลักที่เด่นที่สุด สำคัญที่สุดแค่ 1 ปุ่ม มิฉะนั้นเราจะได้หน้าเว็บที่คนงงว่าควรกดตรงไหนดี ปุ่มนี้ก็เด่น ปุ่มโน้นก็เด่น ซึ่งเป็นปัญหาด้าน User Experience ที่พบได้บ่อยมากเวลามือใหม่ออกแบบเว็บไซต์ / แอพพลิเคชั่นครับ
ข้อยกเว้น คือ ในกรณีที่ทุกปุ่มมีหน้าที่เหมือนกัน (เช่น เป็นปุ่มสำหรับเลือกเพลงทั้งหมด ไม่ใช่ปุ่มนึง Login, ปุ่มนึง Register) ในกรณีนั้นเราสามารถอนุญาตให้มีปุ่มหลักหลายปุ่มต่อ 1 หน้าได้ ลองดูรูปประกอบด้านล่างเพื่อความเข้าใจมากขึ้นครับ
  ถ้าปุ่มหลักมีหลายปุ่ม แต่ Action เดียวกันก็สามารถอยู่ในหน้าเดียวกันได้
  5) ออกแบบปุ่มไว้รองรับหลาย State ด้วย อันนี้เป็นปัญหาในการออกแบบที่พบได้บ่อยมากเวลาทำงานจริงครับ ซึ่งไม่ได้เกิดเฉพาะปุ่ม แต่เกิดกับชิ้นส่วนบนเว็บไซต์แทบทุกส่วนเลยทีเดียว
เนื่องจาก ปุ่ม (Button) เป็นชิ้นส่วนบนเว็บไซต์ที่มี Interaction หลายรูปแบบ เช่น เวลาเอาเม้าส์ชี้แล้วจะเป็นอย่างไร, เวลาคลิกจะเป็นอย่างไร ฯลฯ แต่ดีไซเนอร์มือใหม่มักจะออกแบบมาให้เฉพาะปุ่มตอนที่ยังไม่มี Interaction เลยกลายเป็นหน้าที่ของโปรแกรมเมอร์ที่ต้องมาเดาว่าปุ่มนี้จะมี Interaction อย่างไรดี
เพราะฉะนั้น เวลาออกแบบปุ่มเราต้องนึกถึงหลาย State ไว้ตั้งแต่แรก โดยวางไว้ใกล้กันในไฟล์ดีไซน์ ทำเป็น GIF Animation หรือจะทำเป็นวีดิโอแนะนำ Interaction บนปุ่มแบบ Material Design ก็ยังได้ครับ
  การออกแบบปุ่มควรทำรองรับไว้หลาย State ด้วย
  6) ออกแบบให้ยืดหยุ่นสำหรับการใส่รายละเอียดในปุ่ม แน่นอนว่าปุ่มเราไม่ได้มีแค่ตัวหนังสือเสมอไป ยังมีการใส่ไอคอนต่าง ๆ เพื่อช่วยสื่อความหมายอีกด้วย เพราะคนเราเวลาดูรูปจะเข้าใจได้เร็วกว่าการอ่านตัวหนังสือครับ
เพราะฉะนั้น เราควรวางตัวอย่างการใส่รายละเอียดเพิ่มเติมต่าง ๆ บนปุ่ม เช่น ไอคอน เอาไว้ด้วย ไม่ว่าจะวางในไฟล์ดีไซน์ หรือในโค้ดก็ได้เช่นกัน เพื่อให้เวลานำไปใช้งานจริงไม่ต้องกลัวว่าใส่ไอคอนไปแล้วการจัดตำแหน่งบน ปุ่มจะเกิดปัญหา
  ออกแบบเตรียมการใส่รายละเอียดเพิ่มเติมเอาไว้
  การออกแบบปุ่มรอง (Secondary Buttons) 7) ระวังอย่าให้ปุ่มรองสีเด่นไป หรือไม่เด่นจนเหมือนกดไม่ได้ ข้อผิดพลาดที่เจอกันบ่อย ๆ คือการเลือกสีปุ่มรองเป็นสีที่เด่นมาก ๆ จนตีกับสีปุ่มหลัก เช่น ปุ่มหลักคือปุ่มส่งฟอร์ม มีสีน้ำเงิน กับปุ่มรองเป็นปุ่มบันทึก มีสีเขียว เวลาวางใกล้กันก็จะสังเกตได้ยากว่าปุ่มหลักที่ User ควรกดคือปุ่มไหนกันแน่
หรือบางทีคุณอาจจะเลือกสีกลาง ๆ แทน เช่น สีเทา แต่พอเป็นสีเทาบางครั้งมันก็ดูเหมือนเป็นปุ่มที่กดไม่ได้ (Disabled) แทน และจะดูลำบากมากขึ้นเวลาปุ่มหลักของคุณอยู่ใน State กดไม่ได้ เป็นสีเทาเข้ม แล้วปุ่มรองกดได้แต่เป็นสีเทาอ่อน ผู้ใช้ก็จะสับสนว่าอันไหนกดได้ อันไหนกดไม่ได้
เพราะฉะนั้น ควรเลือกสีปุ่มรองเป็นสีที่เหมาะสม โดยเป็นสีที่ไม่เด่นเกินสีปุ่มหลัก และไม่จางจนเหมือนกดไม่ได้นั่นเองครับ
  ระวังปุ่มหลักแบบ Disabled กับปุ่มรองสีเทาตีกัน
  หลีกเลี่ยงการใช้ปุ่มแบบ Ghost Button ปุ่มแบบ Ghost Button (แปลไทยตรงตัวได้ว่า ปุ่มผี) คือ ปุ่มที่ไม่มีสีพื้นหลัง มีแต่เส้นขอบกับตัวหนังสือเท่านั้น ซึ่งเป็น 1 ในเทรนด์ดีไซน์ใหม่ที่หลาย ๆ เว็บไซต์ชอบใช้กันครับ
ถ้าได้ติดตาม Youtube Channel ของ Designil เคยมีการทำ Video Tutorial สอนเขียน CSS ปุ่มแบบ Ghost Button ด้านล่างนี้ครับ





อย่างไรก็ตาม คุณ Nathan บอกว่าปุ่มแบบ Ghost Button จากการที่เค้าได้ทำการทดลองมาแล้ว พบว่าคนมองไม่ค่อยเห็นครับ บางทีคนก็ไม่รู้ด้วยซ้ำว่าเป็นปุ่ม ทำให้เกิดผลเสียด้าน UX ครับ เพราะฉะนั้นถ้าหลีกเลี่ยงได้ก็ควรหลีกเลี่ยงการใช้ Ghost Button ด้วยประการทั้งปวง
  พอวาง Ghost Button แล้วจะเห็นได้ว่ามันไม่ค่อยเด่น
  การออกแบบปุ่มประเภทอื่น ๆ (Additional Button Types) นอกจากปุ่มหลัก กับปุ่มรองบนหน้าเว็บไซต์แล้ว ในเว็บไซต์ย่อมต้องมีปุ่มประเภทอื่นๆ  อยู่ด้วย เช่น ปุ่มเปิดเมนู, ปุ่มที่เป็นลิงค์ ฯลฯ
 9) ออกแบบปุ่มเตรียมไว้ให้ครบทุกขนาด บางครั้งเราต้องการปุ่มเล็ก ๆ สำหรับวางใน Card UI ให้เหมาะสม หรือบางครั้งเราก็อยากสร้างปุ่มใหญ่ ๆ บนหน้าเว็บไซต์ เพื่อเป็น Call to Action ให้คนสมัครสมาชิก
ตอนออกแบบเราควรดีไซน์เผื่อไว้เลยว่าปุ่มเล็กจะหน้าตาเป็นอย่างไร ปุ่มใหญ่จะหน้าตาเป็นไร เพื่อให้ขนาดตัวหนังสือและระยะห่างต่าง ๆ ดูสมเหตุสมผล ไม่ใช่ปล่อยให้ทีม Frontend Developer ไปมโนเองครับ
  ออกแบบปุ่มเตรียมไว้หลายไซส์ด้วยนะ
  10) แยกดีไซน์ปุ่มกับลิงค์ให้ชัดเจน บางครั้งปุ่มสไตล์ Flat Design ซึ่งเป็นเทรนด์การออกแบบที่ฮิตมากในปีที่ผ่านมา และนิยมใช้กันอย่างแพร่หลายใน Framework ต่าง ๆ มีหน้าตาที่ใกล้เคียงกันมากระหว่างปุ่มกับลิงค์
หน้าที่ของปุ่มกับลิงค์นั้นต่างกันอย่างเห็นได้ชัด ปุ่ม 1 ปุ่มจะมี State สำหรับ Interaction แต่ลิงค์จะเป็นเพียงตัวหนังสือที่กดแล้วไปหน้าเว็บไซต์อื่นเท่านั้น เพราะฉะนั้นถ้าเราออกแบบเว็บไซต์สไตล์ Flat ต้องระวังว่าปุ่มกับลิงค์จะดูเหมือนกันจนแยกไม่ออกครับ
  แยกปุ่มกับลิงค์ให้ต่างกันชัดเจน
  11) ลองแบ่งโซนสำหรับชิ้นส่วนในปุ่มเพื่อทำเมนู ในหลาย ๆ CSS Framework เราจะเห็นว่ามีการใช้ปุ่มเพื่อทำเมนู Dropdown ด้วย เช่น Bootstrap ในหัวข้อ Single Button Dropdown และ Split Button Dropdown
เราจะสังเกตได้ว่าปุ่มพวกนี้มีการแบ่งโซนซ้ายกับขวาชัดเจน (ดูรูปประกอบด้านล่าง) โดยโซนด้านซ้ายของปุ่มจะเป็นตัวหนังสือ และด้านขวาของปุ่มจะเป็นลูกศรเพื่อให้ผู้ใช้รู้ว่าสามารถคลิกเปิดได้
ปุ่มแบบนี้สามารถนำไปใช้ได้ในหลากหลายกรณี เช่น กดเพื่อเลือกว่าจะแชร์บทความ, ดาวน์โหลด, หรือปรินท์ หรือใช้เลือกรูปแบบตัวหนังสือก็ได้ หรือบางคนครีเอทีฟหน่อยอาจจะทำเป็น Split Button สวย ๆ ก็ได้เช่นกัน
อย่างไรก็ตาม ต้องระวังเวลาดีไซน์ปุ่มแบบนี้ เพราะบางครั้งจะเป็นการเพิ่มภาระให้ Front-end Developer / Front-end Designer โดยไม่รู้ตัวก็ได้ครับ
  การเอาปุ่มมาทำเมนู
  12) ลองจัดวางปุ่มไว้ในดีไซน์หลาย ๆ แบบ ปุ่มสามารถถูกนำไปใช้ได้หลาย ๆ แบบ บางครั้งอาจจะมาเป็นกลุ่ม บางครั้งปุ่มอาจจะเปิด-ปิดได้ บางครั้งอาจจะอยากวางตัวหนังสือชิดซ้ายบ้าง หรือบางครั้งอาจจะอยากวางชิดขวา ฯลฯ และอย่าลืมคิดว่าบางครั้งพื้นที่รอบ ๆ เราก็น้อย หรือบางจุดพื้นที่โล่งเยอะมาก จะวางปุ่มอย่างไรดี
เพราะฉะนั้น เราควรลองวางปุ่มไว้ในหลากหลายสถานการณ์มากที่สุด เพื่อให้เวลาต้องทำหน้าใหม่ ๆ จะได้หยิบมาใช้ได้เลย ไม่ต้องคิดใหม่เยอะครับนั่นเองครับ
 สรุป 12 หลักการดีไซน์ปุ่มสำหรับ UX / UI Designer

• วางพื้นฐานดีไซน์ของปุ่มให้ดี
• ตัวหนังสือในปุ่มไม่ใช่เรื่องเล่น ๆ
• ทำปุ่มเวอร์ชั่นสลับสีเตรียมไว้ด้วย สำหรับใช้กับพื้นหลังหลายแบบ
• ปุ่มหลัก 1 ปุ่มต่อ 1 หน้า
• ออกแบบปุ่มไว้รองรับหลาย State ด้วย
• ออกแบบให้ยืดหยุ่นสำหรับการใส่รายละเอียดในปุ่ม
• ระวังอย่าให้ปุ่มรองสีเด่นไป หรือไม่เด่นจนเหมือนกดไม่ได้
• หลีกเลี่ยงการใช้ปุ่มแบบ Ghost Button
• ออกแบบปุ่มเตรียมไว้ให้ครบทุกขนาด
• แยกดีไซน์ปุ่มกับลิงค์ให้ชัดเจน
• ลองแบ่งโซนสำหรับชิ้นส่วนในปุ่มเพื่อทำเมนู
• ลองจัดวางปุ่มไว้ในดีไซน์หลาย ๆ แบบ

ต้องขอขอบคุณ คุณ Nathan Curtis ที่อนุญาตให้นำบทความดี ๆ แบบนี้มาเผยแพร่ต่อครับ หวังว่าจะได้รับความรู้กันไปใช้ในงาน UX / UI Design ของทุกท่านในอนาคตกันครับ
และถ้าท่านใดสนใจอยากศึกษาต่อด้าน UI Design แอดมินอยากแนะนำให้อ่านบทความ 7 หลักการออกแบบ UI Design ให้ดูดี สำหรับมือใหม่ ต่อครับ ซึ่งแนะนำเรื่องพื้นฐานการออกแบบ User Interface โดยรวมได้ละเอียดมากครับ


ที่มา: http://www.designil.com/button-design-ui-ux.html