Tag: error message

1. Microcopy: จิ๋ว แต่แจ๋วยังไง?
2. Microcopy: How-to
3. UX Writing Principles
   1. Principle #1: Clear
   2. Principle #2: Concise
   3. Principle #3: Useful
   4. Principle #4: On Brand
   5. Principle #4: On Brand
   6. สรุปหลักการ UX Writing
4. Microcopy Patterns
5. Pattern #1: Title
6. Pattern #2: Button
7. Pattern #3: Error Message
8. Pattern #4: Confirmation Message
9. Pattern #5: Text-Input Field
10. Pattern #6: Empty State
11. Pattern #7: Waiting Time
12. Recap
13. Tips ส่งท้าย
14. Further Reading

การที่เราจะออกแบบเว็บไซต์ที่น่าสนใจและน่าดึงดูด ต้องพึ่งองค์ประกอบต่าง ๆ ที่เราใส่ลงบนหน้าเว็บ ทั้ง …

• รูปภาพ
• ไอคอน
• โทนสี
• ฟอนต์ (font)

รวมไปถึง microcopy หรือคำที่เราใส่ลงบนเว็บด้วย

Microcopy: จิ๋ว แต่แจ๋วยังไง?

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

… แต่ไม่ง่ายนัก โดยเฉพาะถ้าเทียบกับเวอชันที่มาพร้อม microcopy ที่ user เข้ามาถึงแล้ว สามารถใช้งานได้ทันที:

Microcopy เป็นองค์ประกอบที่ช่วยให้ user ทำความเข้าใจและใช้งานเว็บของเราได้ง่ายและมีประสิทธิภาพ

ประโยชน์ของ microcopy ไม่หยุดเพียงช่วยให้เว็บของเราใช้งานได้และใช้งานง่าย แต่ยังช่วยเพิ่ม engagement ให้กับเว็บของเราอีกด้วย

ยกตัวอย่าง Google ที่เปลี่ยนคำบนหน้าค้นหาที่พัก จากคำว่า …

Book a room

เป็น …

Check availability

ก็ทำให้ยอด engagement เพิ่มขึ้น 17%

ตัวอย่างของ Google แสดงให้เห็นว่า แม้ microcopy อาจจะเป็นเพียงคำเล็ก ๆ บนเว็บ แต่ก็ส่งผลที่สร้างความแตกต่างอย่างเห็นได้ชัด

ดังนั้น ถ้าเราอยากจะสร้างเว็บไซต์ที่อยากให้คนเข้ามาใช้ เราก็ควรมี microcopy ที่ดีบนเว็บบนเว็บไซต์

Microcopy: How-to

การจะเขียน microcopy ที่ดีไม่ใช่เรื่องยาก และใคร ๆ ก็สามารถทำได้ โดยเริ่มจากการทำความเข้าใจ …

1. หลักการ UX writing
2. Patterns ของ microcopy

UX Writing Principles

UX (user experience) writing เป็นศาสตร์ในการเขียนเพื่อประสบการณ์ของ user

หลักของ UX writing ในการเขียน microcopy มีอยู่ 4 ข้อ ได้แก่

1. Clear
2. Concise
3. Useful
4. On Brand

.

Principle #1: Clear

Clear หมายถึง ความชัดเจนของคำที่ใช้ ซึ่งเราสามารถทำได้โดย …

1. หลีกเลี่ยงศัพท์เทคนิค
2. ให้ข้อมูลบริบท (context) กับ user

ยกตัวอย่าง microcopy ที่แจ้งเตือน error ในการเข้าสู่ระบบจาก Google I/O:

จะเห็นได้ว่า microcopy นี้ขาดความชัดเจน เพราะ …

1. มีศัพท์เทคนิคที่ user บางคนอาจจะไม่รู้จัก คือ authentication
2. ไม่มีข้อมูลให้ user ว่า ทำไม error นี้ถึงเกิดขึ้น

ถ้าเราปรับ microcopy ตามหลัก Clear แล้ว เราจะได้ microcopy ใหม่แบบนี้:

จะเห็นได้ว่า microcopy ใหม่ (ขวามือ) มีความชัดเจนมากขึ้น เพราะตอนนี้ user รู้แล้ว ผ่านการสื่อสารด้วยคำง่าย ๆ (sign-in error แทน authentication error) ว่า error นี้เกิดจากการใช้รหัสผ่านผิด

.

Principle #2: Concise

Concise ไม่ใช่การเขียนคำให้สั้นที่สุด แต่หมายถึง การเขียนคำให้กระชับ โดย …

1. ใช้คำอย่างประหยัด แต่ชาญฉลาด
2. Frontloaded: ใส่ใจความสำคัญไว้ต้นประโยค เพื่อให้ user รู้ในทันว่า สารที่ต้องการสื่อคืออะไร

จากตัวอย่างของ Google I/O เราจะเห็นว่า microcopy ที่ปรับแก้แล้ว ยังไม่ concise เพราะ …

1. มีการสื่อสารที่ซ้ำซ้อน โดยวลี “Sign-in error” และ “You entered an incorrect password” สื่อความหมายเดียวกัน คือ เกิดขึ้นผิดพลาดในการเข้าสู่ระบบ
2. ใจความสำคัญ (incorrect password) อยู่หลังสุด ทำให้ user ต้องเสียเวลาอ่านก่อนจะเข้าใจสารที่ต้องสื่อ

ถ้าแก้ไขทั้ง 2 ข้อนี้แล้ว เราจะได้ microcopy ที่ตรงกับหลัก Concise มากขึ้น:

ตอนนี้ user แค่กวาดตาอ่าน microcopy ของเรา ก็สามารถทำความเข้าใจสิ่งที่เกิดขึ้นได้ในทันที

.

Principle #3: Useful

Useful หมายถึง microcopy บอก next action ให้กับ user

จากตัวอย่างของ Google I/O เราสามารถปรับ microcopy ข้างต้นให้ useful มากขึ้นได้ ดดยการปรับปุ่ม “OK” ให้เป็นปุ่มอื่นที่ช่วยให้ user แก้ error ที่กำลังเจอได้:

• “TRY AGAIN”
• “RECOVER PASSWORD”

ตอนนี้ microcopy ไม่เพียงแค่ให้ข้อมูล แต่ยังช่วยให้ user แก้ปัญหา และใช้งานเว็บต่อไปได้

.

Principle #4: On Brand

Principle #4: On Brand

On Brand หมายถึง การใช้คำที่สอดคล้องกับ brand identity หรือความเป็นตัวตนของเรา

จากตัวอย่างของ Google I/O ถ้าทุกคนใช้แค่ 3 หลักการแรก microcopy ของทุกเว็บก็อาจจะออกมาเหมือน ๆ กัน แต่ถ้าเราใส่ความเอกลักษณ์ของเราเข้าไป เราก็จะช่วยให้เว็บไซต์ของเราแตกต่าง ซึ่งอาจช่วยเพิ่ม engagement ให้กับ user ที่เราต้องการได้

มาลองดูตัวอย่าง On Brand กัน สมมุติว่า brand identity ของเราเป็นคนชิล ๆ เราอาจจะปรับ microcopy เป็น …

Whoops! Looks like that password’s playing hard to get.

[Give it another shot!]

[Lost your password pal?]

หรือถ้าเราอยากให้ดูทางการ เราอาจจะปรับเป็นแบบนี้ …

Incorrect password. Please verify your entry.

[Retry]

[Recover password]

.

สรุปหลักการ UX Writing

หลักการ UX writing มี 4 ข้อ คือ

1. Clear: ชัดเจน มีบริบท
2. Concise: กระชับ ไม่ซ้ำซ้อน
3. Useful: มีประโยชน์ รู้วิธีใช้
4. On Brand: โดดเด่น เป็นตัวของตัวเอง

Microcopy Patterns

นอกจากหลักการ UX writing แล้ว เรายังควรทำความเข้าใจ patterns เพื่อจะสามารถเขียน microcopy ได้อย่างมีประสิทธิภาพอีกด้วย

Microcopy patterns เป็นการจัดประเภท microcopy ที่อยู่บนเว็บ โดยหลัก ๆ microcopy สามารถจัดได้เป็น 7 รูปแบบ ได้แก่

1. Title
2. Button
3. Error message
4. Confirmation message
5. Text-input field
6. Empty state
7. Waiting time

แต่ละรูปแบบมีจุดประสงค์และการเขียนที่แตกต่างกันไป เราไม่จำเป็นต้องจำรูปแบบการเขียนให้ได้ทั้งหมด เพียงแต่ต้องเข้าใจจุดประสงค์ของแต่ละรูปแบบเท่านั้น ว่าแต่รูปแบบให้อะไรกับ user บ้าง

Pattern #1: Title

Pattern แรก คือ title หรือคำที่ทำหน้าที่เหมือนป้ายบอกทาง คอยบอก user ว่ากำลังอยู่ส่วนไหนของเว็บ และ/หรือทำ action อะไรได้บ้าง

.

Title แบ่งออกเป็น 4 ประเภท ซึ่งมีการเขียนไม่เหมือนกัน ได้แก่

.

ประเภทที่ 1. Single task หรือ title ของหน้าเว็บที่ user สามารถทำได้แค่ 1 action:

การเขียน: ใช้คำกริยาที่สื่อถึง action ดังกล่าว

ตัวอย่าง: คำว่า “Save to board” ของ Pinterest ในหน้า save pin ซึ่ง user สามารถทำได้ 1 action คือ บันทึก pin ไปยัง board ที่ต้องการ

.

ประเภทที่ 2. Ambiguous task หรือ title ในหน้าเว็บที่ user สามารถทำได้มากกว่า 1 action:

การเขียน: ใช้คำที่ครอบคลุม action หรือ content ของหน้านั้น

ตัวอย่าง: คำว่า “Settings” ในหน้าตั้งค่าของ Duolingo เพราะหน้านี้ user สามารถทำได้อย่างน้อย 2 อย่าง คือ จัดการโปรไฟล์ และตั้งค่าแอป

.

ประเภทที่ 3. Content name หรือ title ในหน้าเว็บที่มี content ให้อ่าน:

การเขียน: ใช้ชื่อหัวของ content นั้น

ตัวอย่าง: “Here’s every Samsung phone, …” ของหน้าบทความในแอป Pocket

.

ประเภทที่ 4. Brand name หรือ title ในหน้าเว็บของเราที่เชื่อมมาจากเว็บอื่น:

การเขียน: ในกรณีที่ user เข้ามาหาเว็บเราจากเว็บอื่น เราก็อยากให้ user รู้ว่าหน้าที่เพิ่งมาถึงเป็น domain ของเรา ดังนั้น เราควรใช้คำที่แสดงถึง brand ของเรา เช่น ชื่อเว็บ หรือชื่อ brand

ตัวอย่าง: Instagram ที่เขียนชื่อ brand ไว้ในหน้า feed เพื่อให้ user รู้ว่ากำลังใช้แอป Instagram อยู่

Pattern #2: Button

Button เป็น microcopy ที่อยู่ตามปุ่มต่าง ๆ บนระบบ

Button แตกต่างจาก microcopy ประเภทอื่น เพราะเป็นประเภทเดียวที่ช่วยให้ user บอกเว็บไซต์ได้ว่า ต้องทำ action อะไร (ในขณะที่ประเภทอื่นเป็นเว็บไซต์บอก user ว่าต้องทำอะไร)

จุดประสงค์ของ button คือ ช่วยให้ user ได้ทำ action ที่ต้องการ เพื่อไปถึงเป้าหมาย (เช่น ไปหน้าอ่านบทความ)

.

การเขียน button แบ่งได้เป็น 2 ประเภท:

.

ประเภทที่ 1. Conversion หรือปุ่มที่มีจุดประสงค์เพื่อเปลี่ยน user มาเป็น customer:

การเขียน: ใช้สูตร value + relevance

• Value คือ สื่อสารสิ่งที่ user จะได้รับเมื่อกดปุ่ม
• Relevance คือ สื่อสารว่าสิ่งที่จะได้รับมีความเกี่ยวข้องกับ user

ตัวอย่าง: ปุ่ม “Save more on App!” ของ Agoda ที่ชวนให้ user โหลดแอป โดยชี้ให้เห็นว่าถ้าโหลดแล้วจะช่วยประหยัดเงินได้

.

ประเภทที่ 2. Function หรือปุ่มที่เน้นการใช้งานมากกว่าสร้าง engagement จาก user:

การเขียน: สำหรับปุ่มที่ไม่ต้องการให้ user กดบ่อย ๆ และเน้นการใช้งานเป็นหลัก เราสามารถใช้คำกริยาที่สื่อถึง action ที่ user จะทำได้

ตัวอย่าง: คำว่า “Send” ในหน้า Gmail

Pattern #3: Error Message

Error message เป็น microcopy ที่ user จะเห็นเมื่อเกิดข้อผิดพลาดบางอย่าง ไม่ว่าจะเป็นจาก user หรือจากตัวเว็บเอง

.

จุดประสงค์หลักของ error message มีอยู่ 2 อย่าง คือ

1. ช่วยให้ user จัดการกับ error ที่เกิดขึ้น
2. ช่วยลดความรู้สึกที่ไม่ดีลง เพราะบางครั้ง error ทำให้ user รู้สึกตกใจหรืออารมณ์เสียได้

.

Error message มีอยู่ 2 ประเภท คือ

1. Error ที่ user แก้ด้วยตัวเองได้ เช่น กรอกข้อมูลผิด
2. Error ที่ user ไม่สามารถแก้เองได้ เช่น server ล่ม

.

ทั้งสองประเภทมีสูตรการเขียนเหมือนกัน คือ What + Why + How

• What: บอก user ว่า error ที่เกิดขึ้นคืออะไร เช่น “Sign-in error”
• Why: บอก user ว่า ทำไมถึงเกิด error นี้ขึ้น เช่น “You entered an incorrect password”
• How: เสนอแนะทางการแก้ไข error ให้กับ user เช่น “Try again”

.

แต่การใช้สูตรมีความแตกต่างกัน ตรงที่ …

.

ถ้าเป็น error ที่ user แก้ไขได้เอง ให้เขียน What, Why, How ให้ชัดเจนและมีความเจาะจง (specific) เพื่อให้ user สามารถแก้ไข error ที่เกิดขึ้นได้

เช่น error message ของ Slack ที่แจ้งเตือนเมื่อ user อัปโหลดรูปไม่ตรงกับเงื่อนไขที่กำหนด

จะเห็นได้ว่า microcopy บอก user อย่างละเอียดว่า จะต้องเลือกรูปที่จะอัปโหลดยังไง พร้อมปุ่มให้ทำ action ต่อ เพื่อให้การอัปโหลดสำเร็จ

.

ถ้าเป็น error ที่ user ไม่สามารถแก้ไขได้เอง สามารถเขียน What และ How แบบกว้าง ๆ (generic) ได้ (เช่น “Server error”) และไม่ต้องบอก Why ก็ได้ เพราะ user ไม่ต้องแก้ไข error นี้ด้วยตัวเอง

เช่น error message ของ Instagram

จะเห็นว่า microcopy นี้ ไม่ได้บอกอะไรมากนัก (เช่น บอกให้รอ แต่ไม่ได้บอกว่า รอนานขนาดไหน)

.

เพื่อให้เข้าใจง่าย เราสามารถสรุปการใช้สูตร error message ได้ตามตาราง

Error	What	Why	How
User แก้ได้เอง	Specific	Require	Specific
User แก้ไขเองไม่ได้	Generic	Optional	Generic

.

Pro tips:

เพราะ error message เป็น microcopy จะเจอกับ user ในช่วงเวลาที่อาจจะไม่ดีนัก เราจึงควรเขียน error message ให้มีความเป็นคนมากที่สุด เพื่อให้ user รู้สึกสบายใจมากขึ้น

เราเพิ่มความเป็นมนุษย์ลงไปใน error message โดยหลีกเลี่ยง …

1. ประโยคคำสั่ง เช่น “ต้องกรอกข้อมูลนี้” vs “โปรดกรอกข้อมูลนี้”
2. ศัพท์เทคนิค เช่น “Authentication error” vs “Wrong password”
3. คำที่สื่อถึงความผิดพลาด เช่น “เกิดข้อผิดพลาดในระบบ” vs “ระบบไม่สามารถตอบสนองได้ในขณะนี้ กรุณาลองใหม่อีกครั้ง”

Pattern #4: Confirmation Message

Confirmation message เป็น microcopy ที่เกิดขึ้นหลังจาก user ทำ action บางอย่างแล้ว และทำให้ user รู้ว่า action ที่ทำไปสำเร็จไปได้ด้วยดี

.

การเขียน confirmation message ทำได้ง่าย ๆ ด้วยสูตร object + V3 เช่น

“Song removed” หรือ “ย้ายเพลงออกจากเพลย์ลิสต์”

“Message sent” หรือ “ส่งข้อความสำเร็จ”

“File moved to trash” หรือ “ไฟล์ถูกย้ายไปถังขยะ”

.

ในบางกรณีที่เราต้องให้ข้อมูลเพิ่มเติมกับ user เช่น บอกว่า หลังจากทำ action นี้แล้ว จะเกิดอะไรขึ้นต่อ เราสามารถเขียนข้อความต่อท้ายได้ เช่น

• “ส่งข้อความสำเร็จ ทีมงานจะติดต่อกลับภายใน 7 วัน”
• “ไฟล์ถูกย้ายไปถังขยะ คุณสามารถกู้ไฟล์คืนได้ภายใน 30 วัน”
• “ย้ายเพลงออกจากเพลย์ลิสต์ คุณสามารถเพิ่มเพลงใหม่ตลอดเวลา”

Pattern #5: Text-Input Field

Text-input field เป็น microcopy ที่อยู่กับกล่องกรอกข้อมูล และมีหน้าที่ช่วยให้ user กรอกข้อมูลได้สะดวก ถูกต้อง และครบถ้วน

.

Text-input field ประกอบด้วย 4 ส่วน ได้แก่

.

ส่วนที่ 1. Title หรือ ชื่อข้อมูลที่ต้องกรอก:

• การเขียน: บอก user ว่าข้อมูลที่ต้องกรอกในช่องนี้คืออะไร
• ตัวอย่าง: “อีเมล” หรือ “เบอร์โทรศัพท์”

.

ส่วนที่ 2. Instruction หรือ คำชี้แจงในการกรอก:

• การเขียน: บอก user ว่าต้องกรอกอะไร
• ตัวอย่าง: “กรอกอีเมลที่ต้องการรับข่าวสาร” หรือ “กรอกเบอร์โทรศัพท์ที่ต้องการใช้ลงทะเบียนบัญชี”

.

ส่วนที่ 3. Hint หรือ ตัวช่วยในการกรอก:

• การเขียน: เขียนตัวอย่าง หรือรูปแบบการกรอก เพื่อให้ user รู้ว่าต้องกรอกข้อมูลที่ถูกต้องยังไง
• ตัวอย่าง: “example@domain.com” หรือ “09-xxxx-xxxx”

.

ส่วนที่ 4. Guidance หรือ เงื่อนไขในการกรอก:

• การเขียน: เขียนระบุเงื่อนไขการกรอกให้ชัดเจน
• ตัวอย่าง: “กรอกอีเมลส่วนตัวเท่านั้น” หรือ “กรอกเบอร์โทรศัพท์ 10 หลัก”

.

เราสามารถใช้องค์ประกอบทั้งสี่ส่วนในการสร้าง text-input field ที่ทำให้ user อยากกรอก form และ engage กับเว็บไซต์ของเราได้

Pattern #6: Empty State

Empty state หมายถึง microcopy ในหน้าเว็บที่ว่างเพราะยังไม่มีข้อมูล หรือโหลดข้อมูลไม่สำเร็จ

.

จุดประสงค์ของ empty state คือ เพื่อให้ user รู้ว่าในหน้านี้ควรจะมีข้อมูลอะไร

.

Empty state มี 4 ประเภท คือ

1. First use หรือ หน้าว่าง เพราะเป็นการใช้งานครั้งแรก
2. Clear หรือ หน้าว่างจากการลบข้อมูล
3. No results หรือ หน้าว่าง เพราะไม่พบข้อมูลค้นหา
4. 404 error หรือ หน้าว่าง เพราะหาหน้าที่ต้องการไม่เจอ

.

การเขียนของ first use, no results, 404 error มีองค์ประกอบเหมือนกัน คือ

1. Title แจ้งว่า หน้านี้ควรมีข้อมูลอะไร
2. Description แจ้งว่า ทำไมหน้าถึงว่างเปล่า
3. Call to action ชวนให้ user ทำ action บางอย่าง
4. Button เพื่อให้ user ทำ action ได้

.

ตัวอย่าง pattern นี้ ที่เห็นได้ทั่วไป คือ Google Search เวลาที่ไม่พบสิ่งที่เราต้องการค้นหา

Note: Google Search ไม่มี button เพราะ user สามารถใช้ search bar ด้านบนได้

.

ส่วน clear ให้เขียนแค่ …

1. Title
2. Description

เพราะ clear เป็นหน้าว่างที่เกิดจากความตั้งใจของ user เอง เช่น user ลบอีเมลทั้งหมดจาก inbox เราไม่จำเป็นต้องมี call to action กับ button เพื่อชวนให้ user หาอีเมลมาเติม inbox ให้เต็มอีกครั้ง

ตัวอย่างเช่น หน้า inbox ของ Outlook เมื่อเราเคลียร์อีเมลจนหมด:

Pattern #7: Waiting Time

Waiting time เป็น microcopy ที่แสดงระหว่างการเปลี่ยนหน้าหรือรอเว็บประมวลผลข้อมูล และเอื้อให้ user รู้ว่า ระบบกำลังทำงานอยู่

.

การเขียน: ใช้ V-ing เช่น

• “Submitting” หรือ “กำลังส่ง”
• “Removing …” หรือ “กำลังลบ …”

.

Pro tips

ในระหว่างรอ เราสามารถเพิ่มคุณค่าให้กับ waiting time ได้โดย …

• บอกว่า เว็บกำลังทำอะไรอยู่ เพื่อให้ user มีส่วนร่วมในการระหว่างรอ โดยการบอกว่า เช่น Gmail ที่เขียนว่า “กำลังโหลดข้อความของคุณ …” แทนการเขียนว่า “กำลังโหลด …” เพื่อให้ user รู้สึกว่า สิ่งที่รอเกี่ยวข้องกับตนเอง

• เราสามารถนำเสนอข่าวสารหรือข้อมูล เช่น fun fact, product ตัวใหม่, หรือการใช้งาน feature ต่าง ๆ ให้กับ user ได้ ตัวอย่างเช่น Duolingo ที่ให้ fun fact ระหว่างรอโหลดบทเรียน

Recap

Microcopy เป็นคำเล็ก ๆ ที่อยู่บนหน้าเว็บของเรา ซึ่งไม่เพียงแต่ช่วยให้ user ใช้งานได้ แต่ยังสร้าง engagement ให้กับ user ได้ด้วย

การจะสร้าง microcopy ที่ดี จะต้องมีความเข้าใจ 2 อย่าง คือ

1. หลักการ UX writing (4 ข้อ)
   1. Clear
   2. Concise
   3. Useful
   4. On Brand
2. Microcopy patterns (7 รูปแบบ)
   1. Title
   2. Button
   3. Error message
   4. Confirmation message
   5. Text-input field
   6. Empty state
   7. Waiting time

Tips ส่งท้าย

Tip #1 – Start microcopy early: การเขียน microcopy ควรเริ่มพร้อม ๆ กับตอนออกแบบเว็บไซต์ เพื่อที่เราจะได้จัดวาง element และคำให้เข้ากัน และหลีกเลี่ยงความไม่ลงตัว เช่น ปุ่มสั้นกว่าคำ หรือคำยาวกกว่ากล่อง

.

Tip #2 – Conversational writing: เวลาร่าง microcopy ให้ลองคิดว่า ถ้าเราคุยกับ user เราจะพูดว่ายังไง และ user จะตอบว่าอะไร แล้วนำการสนทนามาแปลงเป็น microcopy

เช่น …

เรา: สวัสดีครับ ยินดีต้อนรับ

user: สวัสดีค่ะ

เรา: วันนี้มีอะไรให้ช่วยบ้างครับ?

user: อยากรู้ว่า เคยทำ project อะไรมาบ้าง

เรา: อ่อ ลองมาดูทางนี้เลย ครับ project ของผมเป็นการออกแบบเว็บไซต์ เพื่อให้คนที่สนใจเรื่อง UX design เข้ามาอ่าน

user: แล้วประสบการณ์การทำงานละ

เรา: จะเป็นทางนี้เลยครับ ผมเคยทำงาน …

จาก role-play นี้ เราอาจแปลงบทสนทนาให้เป็นหน้าเว็บและ microcopy ในเว็บได้แบบนี้:

Note: ถ้าจะให้ดี การ role-play ควรใช้ persona ของเราและ user ที่เราอยากจะดึงดูดเข้ามาในเว็บของเรา เพื่อให้ microcopy ที่ได้สะท้อน brand ของเรา และดึงดูด user มากที่สุด

Further Reading

สำหรับคนที่สนใจอ่านเพิ่มเติมเกี่ยวกับ microcopy หรืออยากศึกษาในเชิงลึก สามารถอ่านหนังสือ 2 เล่มนี้ได้:

1. Microcopy: The Complete Guide โดย Kinneret Yifrah และ Jacqui Licht
2. Strategic Writing for UX: Drive Engagement, Conversion, and Retention with Every Word โดย Torrey Podmajersky