7 เคล็ดลับง่าย ๆ ในการออกแบบปุ่มให้น่าสนใจและมีประสิทธิภาพ

29-พ.ย.-24

คัมภีร์เทพ IT

ไม่ว่าจะบน Website หรือ Application เชื่อว่า พวกเราคงได้เห็นปุ่มที่มีลักษณะต่าง ๆ หลายคนอาจให้ความสำคัญในเรื่องความรวดเร็วในการใช้งาน ความสวยงาม ใช้งานง่าย เป็นต้น ดังนั้นบทความนี้จะมาแบ่งปัน 7 เคล็ดลับง่าย ๆ ในการออกแบบปุ่มให้น่าสนใจและมีประสิทธิภาพ

1. อย่าขึ้นบรรทัดใหม่บนปุ่ม

ภายในปุ่ม ควรจะมีข้อความเพียงแค่บรรทัดเดียว

  • ข้อความเพียงบรรทัดเดียว จะช่วยให้อ่านได้ง่ายกว่าและทำให้ User เข้าใจการทำงานของปุ่มได้เร็วขึ้น
  • ปุ่มที่มีข้อความมากกว่า 1 บรรทัด จะดูรกและอ่านยาก
  • การทำให้ข้อความบนปุ่มมีแค่บรรทัดเดียว จะช่วยให้มีความสอดคล้องกันภายใน Interface
  • ใช้ข้อความที่สั้น กระชับ ควรหลีกเลี่ยงประโยคยาว ๆ บนปุ่ม

2. ใช้คำกริยาในปุ่มเพื่อสื่อถึงการกระทำ

คำที่อยู่บนปุ่ม ควรกระตุ้นให้ User ทำสิ่งนั้น ควรจะระบุหน้าที่ของปุ่มนั้นให้ชัดเจนว่า จะให้ทำอะไร

  • ใช้ข้อความที่ชัดเจนและ User เข้าใจความหมายของมัน
  • เมื่อ User อ่านคำบนปุ่ม เช่น Save, Preview และ Publish พวกเขากจะรู้ว่าเมื่อคลิกปุ่มนี้แล้วจะทำอะไรหรือเกิดอะไรขึ้น

3. อย่าใช้ Disable Button

หลีกเลี่ยงการใช้ Disable Button (ปุ่มที่มีลักษณะเหมือนปิดการใช้งานอยู่) เพราะอาจทำให้ User ไม่เข้าใจว่า ทำไมปุ่มถึงใช้งานไม่ได้ และควรทำอย่างไรถึงจะเปิดการใช้งานได้

  • Disable Button อาจทำให้ขัดจังหวะการใช้งาน User จะรู้สึกติดขัดเมื่อเห็นปุ่มสีเทาโดยที่ไม่มีคำแนะนำที่ชัดเจน
  • ควรทำให้ปุ่มมีลักษณะที่ใช้งานได้เสมอ และให้เน้นส่วนที่ User ยังไม่ได้กรอกข้อมูลที่จำเป็น

4. วางปุ่มเรียงกันในแนวนอน

ไม่แนะนำให้วางปุ่มเรียงกันในแนวตั้ง หากมีพื้นที่เพียงพอ ขอแนะนำให้วางปุ่มเหล่านั้นไว้ข้าง ๆ กัน ให้เรียงกันในแนวนอน

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

5. ทำให้ปุ่มหลักมีความโดดเด่น

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

  • ปุ่มหลัก ควรมีน้ำหนักภาพที่มากกว่าปุ่มอื่น ๆ เช่น ใช้สีเข้ม มีกรอบ หรือใส่เงา เพื่อให้ดูโดดเด่นขึ้น
  • สีของปุ่มหลัก ควรมีความแตกต่างกับส่วนที่เหลือของ Interface เพื่อให้มองเห็นได้ง่าย
  • ตำแหน่งของปุ่มหลักก็มีความสำคัญ จึงควรวางไว้ในส่วนที่คาดว่า User สามารถมองเห็นได้ง่าย

6. ใช้รูปแบบปุ่มมาตรฐาน

ควรใช้ปุ่มที่มีลักษณะเป็นรูปแบบมาตรฐาน ในบางกรณี การใช้รูปร่างและสไตล์ที่แปลก ๆ ก็อาจทำให้ User รู้สึกสับสนได้

  • การใช้ปุ่มที่มีรูปแบบมาตรฐาน จะช่วยให้มีความสอดคล้องกันระหว่าง Apps, Websites และ Platforms ต่าง ๆ
  • สร้าง Style Guide เพื่อใช้อ้างอิงในการออกแบบ Application ของคุณ ซึ่งสิ่งนี้จะช่วยให้คุณไม่หลุดออกจาก Theme และ Style ที่เป็นมาตรฐาน 

7. อย่าใช้ 2 Icons ในปุ่มเดียว

หลีกเลี่ยงการใช้ 2 Icons ภายในปุ่มเดียว เพราะจะทำให้ User ไม่เข้าใจความหมายที่แท้จริงของปุ่ม

  • Icon แต่ละตัว ควรมีความหมายของมันเอง การใช้ 2 Icons อาจทำให้ User เกิดความสับสนได้
  • User อาจไม่เข้าใจว่า Icon ตัวไหนกันแน่ที่สื่อถึงการทำงานที่แท้จริงของปุ่ม ๆ นั้น
  • ปุ่มควรมีวัตถุประสงค์ที่ชัดเจน และ Icon ก็ควรสะท้อนถึงการทำงานนั้นด้วย

และนี่ก็เป็น 7 เคล็ดลับง่าย ๆ ที่จะช่วยให้คุณ ออกแบบปุ่มได้น่าสนใจและมีประสิทธิภาพ รวมทั้งยังช่วยให้ User ใช้งานได้ตรงตามวัตถุประสงค์ของมัน ที่สำคัญคือ การออกแบบที่ดี จะช่วยเพิ่มประสบการณ์ในเชิงบวกของการใช้งาน Website หรือ Application ของคุณ

ที่มา: https://uxplanet.org/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด