[UX][Design] ทำความรู้จัก Ghost Button

Ghost Button เป็นแนวการออกแบบปุ่มที่เน้นความเรียบง่าย (minimalism) ที่อยู่ในแนวทางการออกแบบของ Flat Design ซึ่งจริงๆ แล้วมีมาตั่งแต่ปี 2014 และก็ใช้กันมาโดยตลอด โดยส่วนมากงานออกแบบของฝรั่งเราจะเห็นว่าจะมีปุ่มแบบ Ghost Button อยู่เพียบเลย และจริงๆ แล้ว Ghost Button จะเห็นได้บ่อยๆ ใน iOS นั่นเองครับ มีมาตั่งแต่ iOS7 ซึ่งนอกจาก iOS แล้วก็ยังมีมาตั่งแต่ Nexus 7 และ Bootstrap 3 ที่หน้า Home Page

 

Ghost Button in “Design”

ในการออกแบบ Ghost Button เราจะใช้รูปทรงง่ายๆ พื้นฐาน เช่นสีเหลี่ยม วงกลม และสี่เหลี่ยมมุมมน (round rectangle) ส่วนพื้นหลังเราจะใช้สีโปร่งใส (transparent) และมีเส้นบางตัดขอบ (thin) เป็น outline ซึ่งเป็นเส้นตรง (solid border) จากนั่นเราก็จะวาง text ไว้ตรงกลาง (Call To Action) ลองดูตัวอย่างผมเขียนไว้ได้ครับ link

See the Pen Ghost Buttons with CSS3 by Mithicher (@mithicher) on CodePen.

 

Why use Ghost button

ลองมาดูกันว่าเหตุผลที่ทำไมเราถึงควรใช้ Ghost button ในงานออกแบบ UI ของเรา

  • มันทำง่าย และสไตล์ Minimal แถมใช้หัวสมองของเราในการคิดน้อยลง Minimal ตามไปสิครับ ส่วนมากก็จะใช้สีขาว กับสี่เหลี่ยม
  • เขียนโค้ดง่าย
  • สามารถใช้กับงานออกแบบ UI ได้เกือบทุกงานเพราะมันเป็น transparent ไม่ต้องสนใจว่าเอาปุ่มไปวางแล้วจะทำให้สีตัดกับส่วนอื่นหรือป่าว
  • ถ้างานออกแบบเป็น Flat อยู่แล้วเราสามารถเปลี่ยนปุ่มของเราให้เป็น Ghost button ได้เลย เพราะยังจัดว่าเป็น Flat Design อย่างนึง
  • Ghost button สามารถทำให้เป็นจุดสนใจของ User (Eye Focus) ได้เหมือนกัน เพราะส่วนมาก เราจะเน้นความใหญ่ (ตามหลักการออกแบบแล้วอยากให้คนสนใจอะไรก็ทำให้มันใหญ่เข้าไว้)
  • ทำให้ผู้ใช้ไม่รู้สึกถูกยัดเหยียด บางเว็บอธิบายว่าเป็นการขอร้องหรือแนะนำให้ User ทำอะไรสักอย่าง ซึ่งได้รับแนวคิดมาจาก Digital Marketing เรียกว่า Permission Marketing

 

Call to Action

ผมได้พูดถึง Call to Action (CTA) ไว้ประโยคนึงหัวข้อที่สอง ซึ่งคำศัพท์พบมากในสาย Digital Marketing  จริงๆ มันก็คำพูดในปุ่มที่ไว้ใน User กดเข้าไปเพื่อทำ Action ตามที่เราเขียนไว้นั่นแหละครับ เช่น Download , Sign Up, Sign In, Send เป็นต้นครับ ซึ่งในทาง Digital Marketing เขารวมไปถึงแบนด์เนอร์ด้วย

Untitled

 

Location of Ghost button

ปกติเรามักจะเห็นมันถูกวางไว้ที่ Home Page ของเว็บสะส่วนใหญ่ มักจะเอาไว้ตรงกลาง ตรง Header ซึ่งเป็นจุดแรกที่เข้าเว็บมาจะเห็นและมีโอกาสจะถูกกดได้สูงกว่าตำแหน่งอื่นๆ (Header หรือ Banner มันคือจุดของ Eye Focus สำคัญของเว็บ) หรือบางที่เราก็ไม่จำเป็นต้องตรงกลางก็ได้ลองดูตัวอย่างนี้ครับ

e

อันนี้เขาใช้ลูกเล่นอีกนิดนึงคู่กับการวางไว้ Header เว็บ อีกลูกเล่นที่ว่าคือ คนเราอ่านหนังสือจากซ้ายไปขวา เห็นอะไรไหมครับ ลองมองที่ภาพนั่นอีกทีสิ แล้วลองคิดว่าครั่งแรกก่อนที่คุณจะอ่านประโยคนี้คุณโฟกัสไปฝั่งไหน ซ้ายก่อน หรือขวาก่อน?? , ถ้าซ้าย แล้วคุณก็ไล่ตาลงมาหาปุ่มใช่ไหมครับ??

 

Sometime your will have problem

บางครั่งก็ไม่ใช้ว่ามันจะสร้างประโยชน์ แต่บางทีก็สร้างปัญหาได้เหมือนกัน  เช่น

Screenshot from 2016-07-24 02:50:29

จะเห็นว่าระหว่าง Logo กับปุ่มแทบจะเหมือนกันเลย แต่โชคดีที่ text เขาอ่านแล้วเคลียร์เลยเข้าใจว่านี้คือ Call to Action แถมยังใหญ่ด้วย สุดท้ายนี้ผมขอยกเอาบทความชื่อ How Users Read on the Web ของ nngroup มาบอกกันว่าจริงๆ แล้วผู้ใช้งานเกือบ 79% ที่เข้ามาชมเว็บเขาไม่ได้ “อ่าน” เว็บแต่เขา “แสกน” หาสิ่งที่เขาต้องการต่ากหากเพราะงั่นออกแบบ UI ที่ดีอย่างนึงก็ควรจะวางสิ่งที่ต้องเป็นจุดสนใจของเขาไว้เพื่อให้เขามองหาได้เจอนะครับ

Facebook Comments