Tips : UX Writers ก็ต้องการ Design systems เหมือนกัน! (Figma Config 2022)
วันนี้อยากมาแชร์เทคนิคน่าสนใจจาก Figma Config 2022 เราเปิดไปเจอหัวข้อเกี่ยวกับการทำ Design systems สำหรับ UX Writers หรือจริงๆแล้วเทคนิคนี้อาจจะช่วยแก้ปัญหาในทีม Designer ที่กำลังมีปัญหาเกี่ยวกับการจัดการ copy (ข้อความ) ต่างๆใน product ของตัวเองได้
เราควรใช้คำไหนในปุ่มหรือ Pop up ต่างๆ ? จะทำยังไงให้คำ consistency และมี standard กับ branding
แล้วใครจะไปจำได้ ว่า wording แต่ละที่มันเคยใช้อะไรไปแล้วบ้าง
มันเยอะมากๆเลยนะในแอปนึงเนี่ย! T_T
สมมติว่าเราเป็น Designer น้องใหม่ที่เพิ่งเข้าไปทำงานในทีม Designer นึง เราได้รับ task ให้ออกแบบ UI ที่มีปุ่มให้กดเพื่อไปต่อ แต่เราไม่สามารถตัดสินใจได้
ระหว่างคำว่า Approve กับ Confirm เราควรจะใช้คำไหนดี
เหตุผลที่เราต้องพิจารณาสิ่งนี้ ก็เพราะว่า Copy (ข้อความ) ต่างๆ ควรที่จะมีความ consistency เป็นไปในทางเดียวกันทั้งแอป รวมถึงควรจะเหมาะสมกับ branding ที่เราทำอยู่ และถ้าเรามองข้ามเรื่องนี้ไป แล้วสร้างคำขึ้นมาใหม่ที่เราคิดว่ามันดีแล้ว แต่ปรากฎว่าเคยมีของเดิมอยู่แล้ว ก็อาจจะทำให้เราเสีย effort ในการทำสิ่งเดิมซ้ำๆขึ้นมาเรื่อยๆ
วิธีง่ายๆที่ทุกคนทำก็คงจะเป็นการไปเปิดหาไฟล์เก่าๆดูว่าของเดิมเขาทำแบบไหนไว้ หรืออาจจะถามคนอื่นๆในทีมที่เคยอยู่มาก่อน แต่กลายเป็นว่า คนที่เคยอยู่มาก่อนเขาก็อาจจะจำไม่ได้ รวมถึงของเดิมที่มีอยู่มันก็เยอะมากๆเลยด้วย พอนานวันเข้า เมื่อเราต้องเจอกับปัญหาเดิมๆบ่อยๆ ก็อาจจะทำให้รู้สึกว่าการทำงานมันไม่เวิร์คเพราะมันยากลำบาก เวลาที่ต้องมาเสียเวลาหา
USE CASE 1 ในการที่เราอยากจะทำ Design systems สำหรับ copy (ข้อความ)
ฉันอยากหาว่า ปุ่ม หรือ pop up ของเดิมเขาใช้คำว่าอะไรได้เร็วๆจัง โดยที่…
- ข้อความที่ใช้เป็นไปในทางเดียวกันทั้งแอป
- ไม่ทำอะไรซ้ำซ้อนจากของเดิม
USE CASE 2
โอเค น่าจะไม่มี UI เดิม ที่จะเอามาใช้กับเคสนี้ได้เลยแฮะ ถ้าอย่างนั้นฉันต้องทำใหม่แล้วล่ะ
Speaker ได้แนะนำให้ใช้วิธีการค้นหาจาก ช่อง search component
ในการทำ Content style guides เราอาจจะต้องนำข้อความทั้งหมดมากางดูก่อน และแบ่งประเภทของคำเป็น 2 categories คือ Yes , No (กรณีที่เป็นปุ่ม) แนะนำว่าให้ใช้ Documentation ของ Figma ให้เป็นประโยชน์ เพื่อที่คนอื่นๆมาใช้ component จะได้เข้าใจว่าต้องใช้งานยังไงบ้าง
Pain : ของ Figma ตอนนี้คือ หากเราตั้งชื่อยาวเกินไป จะหายากเพราะว่าแถบด้านข้างตอนนี้ยังไม่สามารถขยายได้ อาจจะต้องใช้การ hover เพื่อดูข้อความเต็มๆไปก่อน
ให้เรานำคำทั้งหมดมาประกอบกัน โดยเริ่มจากภาพใหญ่ๆว่าเป็นอะไร
เช่น Pop-up -> เป็น pop up อะไร error หรือ success และใช้งานเกี่ยวกับเรื่องอะไร มีเงื่อนไขอย่างไรบ้าง
ถ้าดูจากตัวอย่าง เส้นบนสุด Pop-up -> error -> regirstration -> incorrect info -> phone number จะเห็นว่า เริ่มจากส่วนที่ใหญ่ที่สุดแล้วค่อยลงลึกมายังส่วนเล็กที่สุด
ตอนนี้ Figma ยังไม่สามารถ search แบบ multiple -> “error” + “registration” + “email” แบบนี้ได้ อาจจะมีปัญหาตอนหลังถ้าเรารวมทุกอย่างไว้ในไฟล์เดียวกัน
ดังนั้น…
สร้าง 1 file สำหรับ 1 copy element
คร่าวๆ concept ในการทำ content style guide จะมีประมาณนี้ นอกจากนี้เขาจะมีพูดถึงเรื่อง Atomic design
ให้เรามองว่า Get started เป็น 1 atom เอาไปประกอบกับ button อีก 1 atom ดังนั้นถ้าเราทำ component ที่อยู่ใน content style guide เสร็จแล้ว ให้เรานำเอาไปประกอบกับ component ที่เป็น UI Style guide ของเราได้เลย
อื่นๆหลังจากนี้ก็อาจจะเป็นการสร้าง Variant สำหรับ state ที่จะเกิดใน UI นี้
จบแล้วค่าาาาา สามารถไปดูคลิปอื่นๆย้อนหลังของงาน Figma config 2022 ได้ที่ Youtube channel : Figma
ส่วนอันนี้จะเป็นคลิปเต็ม สำหรับหัวข้อ UX Writers Need Design Systems, Too!
ขอขอบคุณ Speaker และ team scb tech x เป็นประโยชน์มากจริงๆค่ะ 💖
ขอบคุณทุกคนที่อ่านมาถึงตรงนี้นะคะ และหวังว่าบทความนี้จะเป็นประโยชน์สำหรับคนที่กำลังเจอปัญหาเกี่ยวกับ UX writer ค่ะ เรากำลังจะเอา solution นี้ไปแก้ไขปัญหาที่เจออยู่เหมือนกัน ถ้าทำแล้วเวิร์คจะนำมาแชร์ในบทความหน้าค่ะ
หรือใครมีคอมเม้นหรือ feedback อะไรสามารถคอมเม้นได้เลยนะคะ 🥹
