แนวทางการออกแบบเว็บไซต์ของผู้เผยแพร่โฆษณา

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

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

อะไรทำให้เว็บไซต์ผู้เผยแพร่แตกต่างกัน?

มีความแตกต่างที่สำคัญสองประการระหว่างเว็บไซต์ของผู้เผยแพร่โฆษณาและเว็บไซต์ทั่วไป

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

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

เมื่อทราบสิ่งนี้แล้วอาจเป็นที่ชัดเจนว่ารายได้จากเว็บไซต์ของผู้เผยแพร่โฆษณามาจากไซต์นั้นเอง อย่างไร? โฆษณา! ซึ่งเป็นวิธีที่ Google หรือ Facebook สร้างรายได้มากที่สุด

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

จากมุมมองของการออกแบบนี่คือลำดับความสำคัญหลักของเว็บไซต์สำนักพิมพ์และนิตยสาร

การออกแบบเว็บไซต์ที่มีเนื้อหามากมาย

มาดูสำนักพิมพ์ใหญ่ ๆ อย่าง Variety กันบ้าง:

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

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

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

นี่คือประเภทของเลย์เอาต์ที่คุณมักจะทำกับผู้เผยแพร่โฆษณารายใหญ่

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

มี "การจัดอันดับ" มากขึ้นเป็น 1, 2, 3 ในแท็บมาแรงทางด้านขวาป้ายสีแดงสดสำหรับข่าว "ด่วน" และอื่น ๆ แนวโน้มสำคัญอย่างหนึ่งในการออกแบบที่คล้ายคลึงกันคือการดึงดูดความสนใจของผู้ใช้ อย่างไรก็ตามความสนใจนั้นต้องได้รับการกำกับอย่างดีเนื่องจากคุณไม่ต้องการแยกระหว่างสองรายการที่สำคัญเท่า ๆ กัน

นี่คือตัวอย่างของแนวทางที่ไม่ถูกต้องซึ่งทุกอย่างพยายามอยู่ด้านบน:

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

ผู้เผยแพร่และโฆษณาดิจิทัล

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

ตัวอย่างนี้คือขนาดโฆษณา มี 300 × 250, 300 × 600, มี 728 × 90 และ 300 × 50

• บางคนอาจติดอยู่ด้านใดด้านหนึ่งของหน้าจอซึ่งคุณสามารถเลื่อนผ่านจุดต่างๆ
• บางคนอาจอยู่ในมุมเล็ก ๆ ของตัวเองบางคนอาจจะติดอยู่ด้านบนของหน้าเสมอ
• คนอื่น ๆ จะแสดงเป็นคู่ขนาด 300 × 250 สองคู่หรือ 720x90px หนึ่งคู่

คุณรู้เกี่ยวกับทั้งหมดนี้ได้อย่างไรและมีข้อกำหนดอะไรบ้าง?

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

สิ่งสำคัญบางประการที่ควรทราบ ได้แก่ :

• โฆษณาที่มีความสูงอาจโหลดได้ ซึ่งหมายความว่าเนื้อหาจะถูกผลักลงและการออกแบบให้พอดีกับวิดเจ็ตบางรายการในครึ่งหน้าบนจะล้มเหลว
• โฆษณาอาจต้องการพื้นหลังซึ่งอาจเป็นพื้นหลังสีเทาอ่อนรอบ ๆ โฆษณาโดยแตะที่มุมของหน้าจอ
• โฆษณามักจะต้องเว้นระยะห่างรอบ ๆ เพื่อหลีกเลี่ยงการสัมผัสโดยบังเอิญ 20-30 พิกเซลเป็นระยะห่างที่ดีระหว่างโฆษณา
• คุณต้องการเพิ่มป้ายกำกับ "โฆษณา" ก่อน / หลังโดยมีเป้าหมายเพื่อดึงดูดผู้ให้บริการโฆษณามากขึ้น
• ไม่ควรมีโฆษณามากเกินไป! จุดที่น่าสนใจสำหรับสิ่งนี้คือสิ่งที่ทีม AdOps จะทำงานเพื่อหาผู้เผยแพร่โฆษณาเฉพาะเพจที่เจาะจงและแม้แต่การเข้าชมที่เฉพาะเจาะจง (เช่น Facebook, Snapchat เป็นต้น)

ประสิทธิภาพของเว็บไซต์ผู้เผยแพร่โฆษณา

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

ที่มา

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

เคล็ดลับทั่วไปบางประการมีดังนี้

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

ที่มา

ลำดับความสำคัญของการออกแบบ

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

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

สรุป

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

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