KNOWLEDGE

คลังข้อมูล รวบรวมบทความที่เป็นประโยชน์ และคำถามที่พบบ่อย

Question ทำปุ่มให้เป็นปุ่ม เรื่อง usability พื้นๆ ที่ชอบมองข้าม

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

มองข้ามยังไง? ก็เรื่องการออกแบบให้มันดูเหมือนคลิกได้หรือไม่ได้นั่นแหละครับ

จะพูดกันตามตรงคือรูปแบบของปุ่มนั้นถูกดัดแปลงออกแบบให้เข้ากับยุคสมัยมากขึ้น ไหนจะเป็น Metro, Flat หรือจะเป็น Material design อะไรก็ตามแต่ รูปทรงรูปร่าง และรูปแบบของปุ่มนั้นก็ถูกดัดแปลงต่างออกไป ทั้งๆที่จุดประสงค์เดียวของการใช้งานคือ คลิก หรือทัชเพียงแค่นั้น

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

รูปร่างลักษณะต้องรู้สึกว่าคลิกได้ ผู้ใช้ไม่ต้องคิดอะไรทั้งนั้นเมื่อเห็นการออกแบบนั้นๆ ไม่ต้องมานั่งเอะใจในเสี้ยววินาทีว่า “เห้ย อันนี้มันเป็นปุ่มหรือเปล่า กดได้หรือเปล่า?” เรากำหนด range ของผู้ใช้ได้ร้อยเปอร์เซ็นต์ไม่ได้หรอกครับว่าผู้ใช้จะมีอายุเท่าไหร่ คนใช้เป็นประเภทไหน การคาดเดาหรือสร้าง target group ไปเลยว่า กลุ่มผู้ใช้พวกนี้ที่คิดมาแล้ว “น่าจะ” เข้าใจว่านี่คือปุ่ม ไม่ใช่ usability ที่ดีเลยสำหรับการสร้างผลิตภัณฑ์ที่คุณรัก

เข้าใจวิวัฒนาการของปุ่ม ทั้งเรื่องของขนาด สี และการจัดวาง

จะสร้างปุ่มทั้งที ย้อนกลับไปดูรูปแบบในตำนานที่เราเคยผ่านตากันมาหน่อยดีมั้ย ทำไมคนแก่รุ่นราวคราวป้าถึงเข้าใจว่าการคลิกตรงนี้ในระบบปฏิบัติการ Windows XP คือการคลิกปุ่ม ทำไมคนส่วนใหญ่ถึงไม่ต้องสอนกันเรื่องอะไรคลิกได้อะไรคลิกไม่ได้กันในสมัยก่อน.. แน่นอนครับ สัญชาติญาณของมนุษย์ไม่ว่าจะเป็นผู้ใช้ระดับไหน ต่างก็ต้องการกดนั่นกดนี่ เขาก็คลิกไปทั่ว ทำอะไรไปมั่วๆ ไม่ได้สนใจอะไรมากมาย ถ้าอะไรผิดพลาดก็แค่กดปุ่ม back ไม่ได้ต้องคิดแล้วคิดอีก จะทำอะไรต้องดูหน้าพะวงหลังเหมือนการโอนเงินให้ใครสักคนผ่านระบบอินเตอร์เน็ต

ปุ่มในระบบปฏิบัติการต่างๆ เช่น Windows OS X และ Linux

เพราะคนส่วนใหญ่ต่างเริ่มต้นจาก Windows XP หรือเปล่า?

ถ้าสมมติเราตั้งข้อสงสัยว่า ทำไมผู้ใช้งานทุกระดับถึงรู้ว่านี่คือปุ่ม(บน Windows XP) แล้วทำไมพอผู้ใช้ส่วนใหญ่อัพเกรดระบบปฏิบัติการของตัวเองขึ้นมาเป็น Windows 10 ต่างสับสนกันมากกว่าครึ่งว่านี่คืออะไร คลิกได้หรือไม่ได้? ผมว่าการออกแบบปุ่มให้สวยนั้นเป็นอีกเรื่องนึงที่ควรสนใจครับ แต่เรื่องของ usability น่าจะสำคัญกว่า จินตนาการว่าเว็บไซต์ หรือแอพฯ ของเรามีปุ่มที่ถูกออกแบบมาอย่างสวยงาม ดูกลมกลืนกับงานออกแบบที่เราต้องการ แต่แทบจะไม่มีใครคลิก หรือทัชที่ส่วนนั้นเลย.. นั่นแสดงว่าปัญหาอยู่ที่ผู้ใช้ หรืองานออกแบบของเราครับ?

แก้ที่คนไม่ได้ ก็แก้ที่ตัวปุ่มนั่นแหละ

เรา force ทุกคนให้มาเรียนรู้ที่จะเข้าใจว่าไอ้…เนี่ยที่อยู่ตรงเนี้ยมันคือปุ่มนั้นเป็นไปไม่ได้หรอกครับ สิ่งที่ง่ายที่สุดคือการ research ว่ารูปแบบไหนที่ผู้ใช้พอจะเก็ทแล้วร้องอ๋อตั้งแต่แรกเจอว่านี่คือปุ่มน่าจะเป็นทางเลือกที่ดีกว่า ขอยกตัวอย่างให้เห็นภาพอีกนิดนะครับ

modern-button-vs-realistic-button

อย่างแบบซ้ายคือ Modern UI ที่ถูกใช้บน Windows 10 ซึ่ง inteface แบบนี้ถูกใช้หลายที่ในระบบปฏิบัติการ Windows 10 ไม่ว่าจะเป็นตัวปุ่มเอง และ tiles ที่ start screen ต่างกับแบบขวาที่เป็น realistic design คือไล่สีจากเข้มขึ้นไปยังสีอ่อนให้เหมือนกับสิ่งที่ผู้ใช้เข้าใจมาตั้งแต่แรก งาน design แบบ realistic อาจจะฟังดู out ไปแล้วสำหรับบางคน แต่ในเรื่องของ usability ลองให้แม่หรือพ่อของคุณมาเห็นปุ่มทั้งสองแบบด้านบนนี้ดู แล้วลองถามว่าแบบไหนดูเหมือนปุ่มกว่ากันก็ได้.. หรือจะทำ A/B test สร้างปุ่มทั้งสองแบบแยกกันเพื่อหา conversion rate ก็ตามสบายเลยครับ

windows-8-start-screen
Tiles ของ Windows 10

ออกแบบปุ่ม.. ไม่ใช่ว่าจะตาม trend ไม่ได้

การออกแบบปุ่มให้เป็นปุ่มในสมัยนี้นั้น เราไม่ได้อยู่กับข้อจำกัดเดิมๆ อีกต่อไปแล้ว หลายเว็บไซต์, แอพฯ เกิดขึ้นมาพร้อมกับปุ่มรูปลักษณะแปลกๆ ซึ่งหลายคนอาจจะมองว่านั่นไม่ใช่ usability รูปลักษณ์ของปุ่มที่ดี แต่ถ้าหากบริเวณดังกล่าวไม่มีสิ่งรบกวนสายตา หรือโดดเด่นด้วยขนาดหรือสี ผู้ใช้ก็สามารถคลิก หรือทัชได้อย่างไม่ต้องคิดเช่นเดียวกัน ขอยกตัวอย่างปุ่มแบบ flat design ที่ถูกปรับพัฒนาขึ้นอย่างต่อเนื่อง

compare-design-on-button

เราอาจจะเลือกใช้สีโทนเดียว แล้วก็ซ้อนปุ่มเป็นชั้นไล่ระดับของสีให้ลึกลงไปให้ดูเหมือนกับว่าปุ่มสามารถกดได้ บ้างอาจจะเพิ่มการ interact ระหว่างปุ่มกับผู้ใช้เช่น นำเมาส์ไป hover แล้วให้ปุ่มนั้นบุ๋มลึกลงไปหน่อยเหมือนกับว่ากำลังกดปุ่มอยู่จริงๆ ปัจจุบันมีหลายเว็บไซต์ครับ ที่หันมาใช้งานปุ่มรูปแบบนี้ อย่างเช่น Envato หรือ WordPress ในเวอร์ชั่นล่าสุด(4.4 เอง)

Kanda bootstrap Skin

Wordpress button in Dashboard

ปุ่มลอย (Ghost button)

ต้องบอกว่าผมเองก็ค่อนข้างชื่นชอบปุ่มในลักษณะการออกแบบประมาณนี้ ที่ผมเรียกว่าปุ่มลอย(หรือฝรั่งเรียกว่า Ghost button) นั้นถือกำเนิดจากช่วงที่ hero image กำลังมา ผมเคยเขียนเกี่ยวกับเรื่อง hero image ไว้บ้างแล้ว สามารถย้อนกลับไปอ่านได้ที่ Hero Title ให้เว็บไซต์คุณได้แนะนำตัว ซึ่งการนำปุ่มลอยมาใช้ให้ตาม trend นั้นต้องคำนึงถึงเรื่องสิ่งรบกวนสายตาเป็นอันดับแรก หากเราวางตำแหน่งของปุ่มไม่ดี หรือถูกกลืนกับรูป background ด้านหลังจนเกินไป จากดีก็อาจจะกลายเป็นร้าย ได้ conversation rate ที่แย่กว่าเก่าก็เป็นไปได้ครับ

Ghost button
ภาพประกอบจากเว็บไซต์ visage.co
VSCO cam app
แอพฯ VSCO CAM

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

ทำปุ่มให้เป็นปุ่ม เรื่อง usability พื้นๆ ที่ชอบมองข้าม - Jindatheme รับทำเว็บไซต์ โมบายแอพฯ
Black Ribbon