แนวทางปฏิบัติที่ดีที่สุดสำหรับ UX และ UI ของบัตรของขวัญ

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

สารบัญ

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

เงินสดบัตรของขวัญเกือบ 3 พันล้านดอลลาร์ไม่ได้ใช้ในปี 2562 เพียงลำพัง ในขณะเดียวกัน การใช้จ่ายบัตรของขวัญทั้งหมดในปี 2019 อยู่ที่ 98.6 พันล้านดอลลาร์ แหล่งที่มา

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

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

{{EBOOK}}

{{ENDEBOOK}}

หมายเหตุ: ภาพหน้าจอเดสก์ท็อปทั้งหมดสร้างขึ้นบน Mac, Chrome

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

ออกแบบเส้นทางในการซื้อบัตรของขวัญแยกต่างหาก

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

• ขั้นแรก ให้ค้นหาส่วนบัตรของขวัญในร้านค้าของคุณ
• การเลือกรูปแบบบัตรของขวัญและเทมเพลต (แนะนำ)
• การเลือกมูลค่าบัตร
• การตั้งค่าวิธีการจัดส่งและวันที่
• กรอกข้อมูลผู้รับและข้อความที่จะส่งไปพร้อมกับบัตร
• เช็คเอาท์.
  

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

โพสต์นี้เขียนขึ้นสำหรับบัตรของขวัญอิเล็กทรอนิกส์เป็นหลัก หากคุณเสนอบัตรกำนัลเฉพาะที่หน้าร้าน ต่อไปนี้คือรายการแนวทางปฏิบัติที่ดีที่สุดของ UX สำหรับบัตรจริง:

• ทำให้ดูสะดุดตา – การออกแบบอาจตัดสินใจได้ว่าลูกค้าจะสังเกตเห็นและพิจารณาซื้อหรือไม่
• ห่อ - ใส่การ์ดในซองจดหมายและจัดเตรียมพื้นที่สำหรับลูกค้าในการเขียนข้อความส่วนตัวหรือความปรารถนาดี
• ตั้งโชว์ - วางไว้ทุกที่และห้ามมองข้าม (เช่น โต๊ะแคชเชียร์)
• ทำให้เหมาะกับอุปกรณ์เคลื่อนที่ – รับรองการแลกใช้มือถือและอนุญาตให้ลูกค้าแลกบัตรของขวัญที่แสดงบนอุปกรณ์มือถือ ตัวอย่างเช่น โดยใช้รหัส QR หรือบาร์โค้ดที่สามารถสแกนและบันทึกไว้ในอุปกรณ์เคลื่อนที่
  

อย่างไรก็ตาม หากคุณเข้าสู่ยุคดิจิทัล ต่อไปนี้คือแนวทางปฏิบัติยอดนิยมบางส่วนเพื่อให้แน่ใจว่าเส้นทางของบัตรของขวัญได้รับการออกแบบอย่างเหมาะสมจากมุมมองของ UX และ UI

สร้างหน้า Landing Page แยกต่างหากซึ่งแสดงรายการตัวเลือกการให้ของขวัญทั้งหมด

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

ตัวอย่าง:

Zalando มีหน้า Landing Page เฉพาะสำหรับการโปรโมตบัตรของขวัญ จากมุมมองนี้ ผู้มีโอกาสเป็นผู้ซื้อสามารถเห็นตัวเลือกการปรับเปลี่ยนในแบบของคุณทั้งหมด และเลือกระหว่างการ์ดมาตรฐานและกล่องของขวัญ

Winc ซึ่งเป็นธุรกิจอีคอมเมิร์ซสำหรับไวน์ ได้รวมส่วนคำถามที่พบบ่อยไว้บนหน้า Landing Page ของบัตรของขวัญพร้อมสำเนาที่ชาญฉลาด

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

จัดเตรียมส่วนแยกต่างหากสำหรับลูกค้าเพื่อตรวจสอบสถานะบัตรของขวัญ

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

ตัวอย่าง:

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

Starbucks ให้ผู้ใช้ตรวจสอบยอดคงเหลือ โอนยอดคงเหลือ รายงานปัญหาใดๆ หรือโหลดการ์ดซ้ำในส่วนที่แยกต่างหากของหน้า

โปรโมตบัตรของขวัญในหลายพื้นที่

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

ตัวอย่าง:

Home Depot นอกจากแถบนำทางแล้ว ยังมีแถบด้านบนพร้อมบริการเพิ่มเติมอีกด้วย พวกเขาตัดสินใจใช้พื้นที่นี้เพื่อส่งเสริมบัตรกำนัล เป็นไปตามแนวทางปฏิบัติ UX ที่ดี เนื่องจากลูกค้าจะเห็นข้อเสนอนี้ที่ด้านบนสุดของหน้าตลอดเวลา

พวกเขายังได้รวมบัตรของขวัญไว้ที่ส่วนท้าย

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

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

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

ตัวอย่าง :

Winc ส่งอีเมลแยกต่างหากเพื่อเตือนสมาชิกเกี่ยวกับวันแม่และโปรโมตบัตรของขวัญ

Alloy Apparel เปิดตัวแคมเปญส่วนลดสำหรับบัตรของขวัญที่จับต้องได้ทั้งหมดเมื่อวันก่อนวันคริสต์มาส เพื่อให้ลูกค้ามีโอกาสซื้อบัตรในนาทีสุดท้าย

ออกแบบเส้นทางการซื้อบัตรของขวัญ

การเลือกประเภทของขวัญ

ตอนนี้เรารู้วิธีตรวจสอบให้แน่ใจว่าลูกค้าพบข้อเสนอของเราแล้ว เราสามารถออกแบบเส้นทางสู่การซื้อที่ดีที่สุด แน่นอน เส้นทางสู่การซื้อของคุณอาจแตกต่างจากที่ฉันจะกล่าวถึงด้านล่าง

ตัวอย่าง:

PrettyLittleThing เสนอประเภทและรูปแบบของขวัญเดียวเท่านั้น นี่คือเหตุผลที่เส้นทางของลูกค้าเริ่มต้นด้วยการเลือกเทมเพลตบัตรกำนัล

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

ตัวอย่าง :

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

Zalando ยังเสนอตัวเลือกการปรับแต่งเพิ่มเติม แต่เลือกใช้เลย์เอาต์แนวตั้งที่ลูกค้าต้องเลื่อนลงเพื่อดูตัวเลือกที่มีทั้งหมด เนื่องจาก Zalando นำเสนอการ์ดแต่ละใบเท่านั้น พวกเขาจึงไม่ต้องการเลย์เอาต์แบบเรียบ แต่จะใช้หน้าเพื่อเปลี่ยนโฟกัสไปที่เทมเพลตและตัวเลือกต่างๆ แทน มีตัวเลือกพิเศษ (กล่องของขวัญ) ที่ด้านล่างของหน้า ทำให้ชัดเจนว่าไม่ใช่ผลิตภัณฑ์หลัก

การเลือกรูปแบบบัตร

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

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

ตัวอย่าง:

Victoria's Secret เริ่มต้นเส้นทางของลูกค้าด้วยทางเลือกระหว่างวิธีการจัดส่ง UI ให้ความสำคัญกับทั้งสองตัวเลือกเท่ากัน อย่างไรก็ตาม ฉันอยากจะแนะนำ CTA ที่ต่างกันมากกว่า – “ส่งทางไปรษณีย์” และ “ส่งทางอีเมล” อาจสร้างความสับสนได้ โดยเฉพาะสำหรับผู้ที่ไม่ได้ใช้ภาษาอังกฤษเป็นภาษาหลัก

การเลือกวันที่จัดส่ง (ไม่บังคับ)

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

ตัวอย่าง:

PrettyLittleThing ทำให้ผู้ใช้จำเป็นต้องกำหนดวันที่และเวลาจัดส่งที่ต้องการ พวกเขาใช้รายการแบบเลื่อนลงอย่างง่าย ฉันขอแนะนำให้ใช้ตัวเลือกวันที่ในปฏิทินแทน ซึ่งจะทำให้ผู้ใช้มองเห็นวันที่ที่เลือกได้ดีขึ้น (เช่น วันในสัปดาห์)

การเลือกจำนวนบัตรของขวัญ

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

ตัวอย่าง:

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

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

Tiffany & Co. ไม่ได้เสนอค่าบัตรที่กำหนดเอง แต่จะระบุค่าบัตรที่กำหนดไว้ล่วงหน้าแทน สิ่งที่น่าสังเกตคือมูลค่าบัตรเริ่มต้นคือ $500 แม้ว่าจะมีค่าที่ต่ำกว่าก็ตาม ด้วยวิธีนี้ Tiffany & Co. สามารถสั่งลูกค้าให้เน้นที่บัตรที่มีมูลค่าสูงกว่าและทำให้เป็นที่ต้องการมากขึ้นและถูกมองว่าเป็นราคามาตรฐาน

การให้ข้อมูลของผู้รับ

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

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

ตัวอย่าง :

Starbucks มี UI ที่เรียบง่ายสำหรับข้อมูลของผู้รับและผู้ส่ง

Amazon ให้ข้อความที่เขียนไว้ล่วงหน้าแก่ผู้ใช้เพื่อให้พวกเขาทราบว่าข้อความนั้นมีลักษณะอย่างไร

ปรับแต่งรหัสบัตรของขวัญ

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

การเลือกเทมเพลตบัตรกำนัล

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

ตัวอย่าง:

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

กำลังอัปโหลดรูปภาพเพื่อปรับแต่งการ์ด

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

ตัวอย่าง:

Zalando อนุญาตให้ผู้ใช้สร้างการออกแบบการ์ดของพวกเขา อย่างไรก็ตาม เพื่อให้แน่ใจว่าทุกอย่างถูกตัดสินโดยฝ่ายกฎหมาย Zalando กำหนดให้ผู้ใช้ปฏิบัติตามข้อกำหนดการใช้งาน

ขั้นตอนการชำระเงิน

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

ตัวอย่าง :

PrettyLittleThing เป็นตัวอย่างของ UX การชำระเงินด้วยบัตรของขวัญที่ไม่ดี หลังจากที่ผู้ใช้เพิ่มบัตรลงในตะกร้าแล้ว จะไม่มีวิธีง่ายๆ ในการอัปเดตรายละเอียดบัตร เช่น ข้อมูลของผู้รับหรือมูลค่าบัตรกำนัล วิธีเดียวคือนำการ์ดออกจากรถเข็นแล้วเริ่มกระบวนการทั้งหมดอีกครั้ง

Winc อนุญาตให้ผู้ใช้อัปเดตค่าการ์ดในขณะที่ยังอยู่ในมุมมองตะกร้า

ส่งการ์ดให้ผู้รับได้หลายช่องทาง

มีหลายตัวเลือกในการแบ่งปันการ์ดกับผู้รับ นี่คือบางส่วนของพวกเขา:

• ส่งทางข้อความอีเมล์
• ส่งไปยังผู้ซื้อในรูปแบบ PDF ที่สามารถพิมพ์ได้ซึ่งสามารถแชร์กับผู้รับได้
• จัดส่งบัตรทางไปรษณีย์ไปยังผู้ซื้อหรือผู้รับ
• ส่งผ่านโซเชียลมีเดีย เช่น Messenger, Whatsapp
  

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

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

มากับการออกแบบอีเมลที่มีประสิทธิภาพ

เมื่อพูดถึงเนื้อหาอีเมล จะต้องครอบคลุมหลายประเด็น:

• รวมมูลค่าของบัตร
• รวมลิงก์ไปยังข้อกำหนดและเงื่อนไขหรือข้อมูลเพิ่มเติมเกี่ยวกับข้อจำกัดในการแลกบัตร (ถ้ามี)
• รหัสบัตรของขวัญที่ง่ายต่อการคัดลอกไปยังคลิปบอร์ด ควรใช้เพียงคลิกเดียว
• CTA ที่นำผู้รับไปยังร้านค้าของคุณ
  

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

ตัวอย่าง:

Watsi องค์กรด้านการดูแลสุขภาพเพื่อการกุศลทำเครื่องหมายช่องทำเครื่องหมายทั้งหมดเมื่อพูดถึงการออกแบบอีเมลบัตรของขวัญที่เหมาะสม

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

แลกบัตรของขวัญ

ตามที่ Kim Salazar แนะนำ ประโยชน์ของคูปองและบัตรกำนัลเป็นสัดส่วนโดยตรงกับความสะดวกในการใช้งานในร้านค้าออนไลน์

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

{{ลูกค้า}}

{{ENDCUSTOMER}}

อนุญาตให้แลกบางส่วน

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

ตัวอย่าง:

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

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

ออกแบบช่องใส่บัตรของขวัญ

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

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

ตัวอย่าง:

Winc นำเสนอการออกแบบ UI ที่ตรงไปตรงมา และให้ผู้ใช้แลกบัตรกำนัลเมื่อเริ่มต้นการเดินทาง ซึ่งจำกัดความเครียดหรือความไม่สะดวกใดๆ ที่เกี่ยวข้องกับการไม่สามารถค้นหาช่องแลกรับได้อย่างมีประสิทธิภาพ

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

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

แนวปฏิบัติที่ดีอีกประการหนึ่งที่เกี่ยวข้องกับรหัสของขวัญคือการแยกแยะความแตกต่างระหว่างฟิลด์การชำระเงินและบัตรกำนัล เนื่องจากความใกล้ชิดและความคล้ายคลึงกันอาจทำให้เกิดความคับข้องใจต่อผู้ซื้อที่มีศักยภาพ

แนวทางปฏิบัติตรงกับแนวทางปฏิบัติที่ดีที่สุดสำหรับ UI คูปอง หากคุณต้องการเรียนรู้วิธีออกแบบช่องใส่บัตรกำนัล โปรดอ่าน

ตัวอย่าง:

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

สร้างความสำเร็จและข้อความแสดงข้อผิดพลาด

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

ด้วยเหตุผลเดียวกัน คุณควรแสดงข้อความแสดงข้อผิดพลาดที่เกี่ยวข้องซึ่งระบุประเภทของปัญหากับบัตรของขวัญ อย่าแสดงข้อความแสดงข้อผิดพลาดเดียวกันในทุกกรณี เนื่องจากจะไม่แจ้งให้ผู้ใช้ทราบว่ามีอะไรผิดพลาดและจะแก้ไขปัญหาได้อย่างไร นี่คือตัวอย่างบางส่วน:

• "รหัสบัตรของขวัญไม่ถูกต้อง โปรดลองอีกครั้ง"
• "รหัสบัตรของขวัญหมดอายุ"
• "คุณไม่ใช่ผู้ถือบัตรของขวัญ (หากคุณมอบบัตรกำนัลให้กับลูกค้าแต่ละราย)"
• "คำสั่งซื้อของคุณไม่ตรงตามเงื่อนไขของบัตรของขวัญ (หากคุณกำหนดขีดจำกัดการแลกบัตร)"
  

ตัวอย่าง:

SummerSalt จะแสดงข้อความแสดงข้อผิดพลาดหากรหัสที่ป้อนไม่ถูกต้องหรือไม่ตรงตามเงื่อนไขโปรโมชั่น พวกเขาสนับสนุนให้ลูกค้าตรวจสอบรหัสอีกครั้ง

ออกแบบการแจ้งเตือนการหมดอายุของบัตรของขวัญ

หากบัตรของคุณมีวันหมดอายุ คุณต้องวางแผนล่วงหน้าอีกเล็กน้อยและตั้งค่าการแจ้งเตือนอัตโนมัติเพื่อให้ผู้ใช้ใช้ยอดคงเหลือในบัตรก่อนที่จะหมดอายุ ในที่นี้ คุณควรปฏิบัติตามแนวทางปฏิบัติ UX ที่ดีที่สุดที่เชื่อมโยงกับการตลาดผ่านอีเมล ที่ทำให้ภาพดูสะดุดตา คัดลอกอย่างชาญฉลาด เพิ่ม CTA ที่ตัดกันอย่างสวยงาม และงดเว้นจากการใช้คำที่สามารถทำเครื่องหมายว่าเป็นสแปม (“ส่วนลด” ”ดีล” “ขาย”)

สรุป

ฉันหวังว่ารายการแนวทางปฏิบัติที่ดีที่สุดนี้จะช่วยให้คุณเริ่มออกแบบเว็บไซต์และมือถือสำหรับบัตรของขวัญหรือปรับปรุงการออกแบบ UI ปัจจุบันของคุณ หากคุณกำลังมองหาคำแนะนำทั่วไปเกี่ยวกับการสร้างแคมเปญบัตรของขวัญ อย่าลืมอ่านคู่มือนี้

{{CTA}}

พร้อมที่จะนำบัตรของขวัญของคุณไปอีกระดับแล้วหรือยัง?

เริ่ม

{{ENDCTA}}