Peggy Olson จะออกแบบอย่างไรสำหรับอินเทอร์แอคทีฟ

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

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

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบเชิงโต้ตอบที่สำคัญสามประการ

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

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

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

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

ดวงตาสแกนหน้าอย่างไร

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

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

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

หายนะการออกแบบที่แท้จริง

ลองมาดูหายนะการออกแบบที่แท้จริงที่เพื่อนร่วมงานคนหนึ่งของฉันที่ Act-On ช่วยสร้างให้ฉัน ฉันเสียใจที่ต้องแจ้งว่าตัวอย่างด้านล่างนี้ดึงมาจากเนื้อหาจริงที่ฉันพบทางออนไลน์ ฉันใช้บริษัทสมมติที่ชื่อว่า Actomatic เพื่อสาธิตข้อผิดพลาดที่พบบ่อยที่สุดที่ผู้คนมักทำ และวิธีการแก้ไข

ตัวอย่างที่ 1: อย่าให้ฉันเลื่อนเพื่อดู CTA

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

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

ฉันขอแนะนำให้มีปุ่มแชร์ที่ด้านบนและด้านล่างของเนื้อหา หรือปุ่มแชร์ที่ลอยอยู่ข้างๆ เนื้อหาเมื่อคุณเลื่อนดู

ฉันทำงานกับบริษัทที่มีชื่อเสียงมากแห่งหนึ่งพบว่า เมื่อพวกเขาเพิ่มปุ่มแชร์ที่ด้านบนของบทความและที่ด้านล่าง อัตราการแชร์ก็เพิ่มขึ้นมากกว่า 400%

ตัวอย่างที่ 2: โอ้ ตาของฉัน!

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

หากคุณมี CTA หลายรายการ ให้ระบุลำดับตรรกะขององค์ประกอบเหล่านั้นให้ชัดเจน สะกดด้วยข้อความเสริมที่เป็นตัวเลขหากคุณต้องการ ถ้าฉันมาที่เพจนี้ ฉันจะถามคำถามเหล่านี้:

เลย์เอาต์ดูไม่มีแผนและเลอะเทอะด้วยพื้นที่ว่างแบบสุ่มและฟอนต์แปลกๆ CTA อยู่ครึ่งหน้าล่างอย่างแน่นอน

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

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

ตกลง มาดูกันเลย:

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

1. โลโก้บริษัท
2. หัวข้อข่าว
3. ปุ่มแชร์และสมัครรับข้อมูล
4. ส่วนสำรวจที่ด้านล่าง

ให้เหตุผลแก่ฉันที่จะโต้ตอบ

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

หากคุณไม่ทราบคำตอบสำหรับคำถามนั้นแสดงว่าคุณยังไม่ได้ทำการบ้าน

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

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

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

ง่าย ๆ เข้าไว้

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

ฉันได้ทำงานร่วมกับลูกค้าที่สร้างเนื้อหาเชิงโต้ตอบที่ซับซ้อนมาก และลูกค้ารายอื่นๆ ที่ทำให้มันเรียบง่ายอย่างเหลือเชื่อ และความเรียบง่ายก็ได้รับชัยชนะเกือบทุกครั้ง นี่คือวิธีการทำให้ง่าย:

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

การบ้านของคุณ

เดี๋ยวก่อน คุณไม่เคยบอกว่าจะมีการบ้านในตอนท้ายของบทความนี้! ถ้าฉันบอกคุณว่าจะมีการบ้าน คุณจะอ่านมาถึงตรงนี้ไหม? เอ่อ ฮะ. ฉันต้องการให้คุณดูหนึ่งในหน้า Landing Page ของคุณด้วยสายตาวิจารณญาณ และถามตัวเองว่ามีที่ว่างสำหรับการปรับปรุงหรือไม่

• ดูหนึ่งในหน้า Landing Page ของคุณบนแล็ปท็อปและบนอุปกรณ์เคลื่อนที่ คุณต้องเลื่อนเพื่อไปที่ CTA หรือไม่ แสดงผลได้ดีบนอุปกรณ์พกพาหรือไม่?
• ขอให้เพื่อนที่ไม่รู้อะไรเกี่ยวกับบริษัทของคุณดูหนึ่งในหน้า Landing Page ของคุณ และขอให้พวกเขาแสดงความคิดเห็นอย่างตรงไปตรงมาขณะที่พวกเขากำลังดูหน้าดังกล่าว ขอให้พวกเขาบอกคุณว่าพวกเขาสังเกตเห็นอะไรเป็นอย่างแรก บริษัทของคุณทำอะไร และอะไรคือ CTA หลักในหน้านั้น
• ดูว่าองค์ประกอบสำคัญทั้งหมดอยู่ในรูปแบบ F หรือไม่
• ทดสอบหน้าเว็บของคุณในเบราว์เซอร์บนแพลตฟอร์มต่างๆ ให้ได้มากที่สุด Safari ไม่แสดงองค์ประกอบเช่น Chrome Firefox ไม่แสดงองค์ประกอบเช่น Internet Explorer (IE) และ IE เวอร์ชันต่างๆ สามารถแสดงเนื้อหาได้แตกต่างกันอย่างสิ้นเชิง

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

มันคุ้มค่ากับความพยายาม