Subject Line – วิธีการออกแบบอีเมล

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

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

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

ความสำคัญของการออกแบบอีเมลบนมือถือ

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

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

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

เน้นเนื้อหา

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

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

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

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

ตอกย้ำการสร้างแบรนด์

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

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

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

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

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

ดึงดูดความสนใจด้วยสี

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

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

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

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

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

การใช้รูปภาพอันน่าทึ่ง

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

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

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

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

ทดลองกับเลย์เอาต์แหวกแนว

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

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

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

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

การทำงานกับแบบอักษร

โปรแกรมรับส่งเมลยอดนิยมส่วนใหญ่รองรับฟอนต์ของเว็บ แต่น่าเสียดายที่ไม่ใช่ทั้งหมด—Gmail เป็นข้อยกเว้นที่โดดเด่นที่สุด (แม้ว่า Gmail จะรองรับ Roboto และ Google Sans โดยเป็นส่วนหนึ่งของอินเทอร์เฟซของ Gmail) อย่างไรก็ตาม นักออกแบบยังคงสามารถใช้แบบอักษรของเว็บได้ตราบเท่าที่พวกเขาทราบว่าไคลเอนต์อีเมลจำนวนมากจะใช้แบบอักษรสำรอง

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

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

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

สนุกกับแอนิเมชั่น

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

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

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

The Hustle ใช้ GIF แบบเคลื่อนไหวในอีเมลเพื่อแสดงจุดสำคัญของข้อความและเพิ่มความน่าสนใจให้กับการออกแบบอีเมลแบบมินิมอล

คำกระตุ้นการตัดสินใจ

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

นักออกแบบยินดีเป็นอย่างยิ่งที่จะให้ความสำคัญกับการออกแบบคำกระตุ้นการตัดสินใจ ตลอดจนทำการทดสอบ A/B กับพวกเขาเพื่อให้แน่ใจว่าได้รับการปรับให้เหมาะสมสำหรับประสิทธิภาพ

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

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

ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบอีเมล

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

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

นักออกแบบบริการทดสอบอีเมลหลายรายสามารถใช้เพื่อดูว่าอีเมลของพวกเขาจะมีลักษณะอย่างไรในแพลตฟอร์มอีเมลที่หลากหลาย Litmus เป็นหนึ่งในตัวเลือกที่ได้รับความนิยมมากที่สุด แต่ตัวเลือกอื่นๆ เช่น Mailgun, Email on Acid, Mailtrap และ Preview My Email ก็ควรค่าแก่การตรวจสอบเพื่อดูว่าตัวเลือกใดตรงตามความต้องการของแต่ละโครงการมากที่สุด

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• ประสบการณ์คือทุกสิ่ง – Ultimate UX Guide
• เทรนด์ทั้งหมดคุ้มค่าหรือไม่ ข้อผิดพลาด UX ที่พบบ่อยที่สุด 5 อันดับแรกที่นักออกแบบสร้างขึ้น
• UI กับ UX – สำรวจความแตกต่างหลัก [อินโฟกราฟิก]
• หลักการออกแบบ UX บนมือถือและแนวทางปฏิบัติที่ดีที่สุด
• คู่มือพื้นฐานในการใช้งานมือถือ