คู่มือการตั้งชื่อเชิงปฏิบัติสำหรับนักพัฒนาและนักออกแบบหน้าเว็บ

การตั้งชื่อเป็นเรื่องยาก - คำที่เราเลือกสะท้อนทั้งความคิดและการสื่อสารภายในทีม เมื่อชื่อไม่ชัดเจนก็เกิดความสับสนทั้งด้านสี ไอคอน คอมโพเนนต์ และฟีเจอร์ ในทางกลับกันชื่อที่เจาะจงเกินไปก็ลดความยืดหยุ่นและการนำกลับมาใช้ซ้ำ บทความนี้รวบรวมแนวทาง เครื่องมือ และตัวอย่างจากงานจริงเพื่อช่วยให้การตั้งชื่อในโปรเจกต์หน้าบ้าน (front-end) และระบบดีไซน์มีความสม่ำเสมอและปรับขยายได้

แหล่งแรงบันดาลใจและเครื่องมือช่วยตั้งชื่อ

เมื่อเริ่มติดขัด การดูตัวอย่างคำที่คนอื่นใช้เป็นวิธีที่ดี ตัวอย่างเช่น Classnames เสนอรายการคำจัดหมวดที่ช่วยให้เรานึกนอกกรอบในการตั้งชื่อคลาส HTML หรือฟังก์ชัน JavaScript ส่วนการหาชื่อสีที่เหมาะสมสามารถอ้างอิงรีพอซิทอรีชื่อสีขนาดใหญ่ที่มี 30355 ชื่อสีที่แตกต่างกัน พร้อมตัวเลือก color picker และการค้นหาชื่อสี ซึ่งเป็นทรัพยากรอ้างอิงที่มีประโยชน์ใกล้มือ

หลักการตั้งชื่อที่ควรยึด

ชื่อที่ดีควรมีโครงสร้างเชิงตรรกะ กระชับ มีความหมาย และคนในทีมรู้ความหมายตรงกัน ควรหลีกเลี่ยงการตั้งชื่อที่อิงเฉพาะลักษณะการแสดงผลเท่านั้น เช่น "สีแดงใหญ่" เพราะจะทำให้เปลี่ยนสไตล์ยากเมื่อออกแบบใหม่ แทนที่จะตั้งชื่อจากงานที่ต้องการให้สำเร็จ - หรือ job-to-be-done - จะช่วยให้ชื่อสะท้อนคุณค่าและการใช้งานจริงได้ดีกว่า

โครงสร้างโทเค็นและกรณีศึกษาจากองค์กรใหญ่

การออกแบบ taxonomy สำหรับ design token ที่ยืดหยุ่นข้ามผลิตภัณฑ์เป็นความท้าทาย ทีมของ Intuit แสดงให้เห็นแนวทางการจัดหมวดโทเค็นที่เกินกว่าเฉดแบรนด์และรองรับหลายสินค้าได้ ส่วน Vodafone UK ก็เผย Variables Taxonomy Map ที่แยกคอลเลกชันของโทเค็นเป็นแบรนด์ พริมิทีฟ semantics และหน้า ช่วยให้เห็นได้ทันทีว่าชื่อโทเค็นบอกอะไรเกี่ยวกับการใช้งานและบริบท

การตั้งชื่อฟีเจอร์และการเพิ่มการยอมรับใช้งาน

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

• ศึกษาการตั้งชื่อคลาส - Classnames
• ออกแบบ taxonomy สำหรับโทเค็น - กรณีศึกษาจาก Intuit
• ตัวอย่างชื่อคอมโพเนนต์ - Component Gallery
• แนวทางการตั้งชื่อฟีเจอร์ที่เน้นผู้ใช้ - Shopify Polaris

ผู้ที่ทำงานด้าน front-end, UX หรือระบบดีไซน์ ควรลงแรงตั้งชื่อให้เป็นมาตรฐานเดียวกัน ระบุโครงสร้างชื่อและความหมายในเอกสารทีม จัดรีวิวชื่อเป็นส่วนหนึ่งของกระบวนการทดสอบ และเก็บปัญหาการตั้งชื่อไว้ใน backlog เพื่อปรับปรุงต่อไป

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

นอกจากนี้สำหรับผู้ที่สนใจแนวทางเชิงลึก มีคอร์สวิดีโอเกี่ยวกับ Design Patterns For AI Interfaces จำนวน 30 video lessons (10h) พร้อมการฝึกอบรม UX แบบสด ซึ่งอาจช่วยขยายมุมมองการออกแบบอินเทอร์เฟซที่ซับซ้อนได้

ที่มา: Smashing Magazine - เรียบเรียงและสรุปเป็นภาษาไทยโดยทีมงาน IT Genius