Dark Patterns: เปิดเผยด้าน Shady Side ของเว็บ

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

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

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

นี่คือสัตว์เลี้ยงของเรา

ส่วนต่อประสานผู้ใช้ที่ใช้งานง่าย

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

“ติดตั้งแอพของเรา!”

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

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

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

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

“คุณต้องการรับการแจ้งเตือนหรือไม่”

ในคำ: ไม่

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

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

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

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

การนำทางที่เล่นโวหาร

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

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

การผลักแบบเลื่อนที่ไม่จำเป็น

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

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

แอนิเมชั่นยังสามารถทำให้เกิดอาการเมารถและอาการเวียนศีรษะบ้านหมุนได้ ดังนั้นให้พิจารณาใช้การสืบค้นสื่อ CSS ที่ prefers-reduced-motion เพื่อปิดเอฟเฟกต์

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

บทความหลายหน้าที่ไม่จำเป็น

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

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

การตลาดแบบดัดแปลง

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

การต่อสู้การสมัครสมาชิก

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

โฆษณาปลอม

หลายๆ เว็บไซต์มีการใช้โฆษณามากเกินไป แต่ตัวอย่างที่แย่ที่สุด:

1. ดูเหมือนเมนูหรือตัวเลือก
2. ปลอมแปลงเป็นบทความข่าวหรือข้อมูลจากเว็บไซต์ต้นทาง หรือ
3. แสดงการควบคุม UI เช่น ปุ่ม "ดาวน์โหลด" ขนาดใหญ่บนหน้าเว็บเกี่ยวกับผลิตภัณฑ์ซอฟต์แวร์

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

การเพิ่มสินค้าลงในตะกร้าสินค้าอัตโนมัติ

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

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

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

ค่าใช้จ่ายในการช็อปปิ้งที่ซ่อนอยู่

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

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

สต็อกสินค้าประดิษฐ์และตัวจับเวลาความพร้อมใช้งาน

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

“ซื้อตอนนี้! 2 รายการในสต็อก 15 ถูกซื้อใน 3 นาทีที่ผ่านมาและ 597 คนกำลังดูหน้านี้”

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

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

เลือกไม่ใช้ Shaming

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

• “ไม่ ฉันไม่ต้องการการจัดส่งฟรีแบบไม่จำกัด”
• “ไม่—ฉันไม่สนใจชะตากรรมของสัตว์ขนปุยที่ใกล้สูญพันธุ์”
• “ไม่ ฉันอยากเห็นโลกเผาไหม้”

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

การยกเลิกคุกกี้ที่ซับซ้อน

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

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

• ลุยผ่านหน้า/แท็บของศัพท์แสงก่อนที่จะค้นหาตัวเลือก;
• คลิกช่องทำเครื่องหมายหลายสิบช่องแม้ว่าจะฝ่าฝืนกฎ GDPR และ
• รอสักครู่ในขณะที่พวกเขา "บันทึกการตั้งค่าของคุณ" (เพื่ออะไร?)

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

เทคโนโลยีแย่มาก

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

ทำลายฟังก์ชันการทำงานของเบราว์เซอร์

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

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

ปัญหาอื่นๆ ที่ควรหลีกเลี่ยง:

1. อย่าปิดการใช้งานเมนูคลิกขวาหรือแตะยาว
2. อย่าปิดใช้งานการคัดลอกหรือเพิ่มข้อความ "มีประโยชน์" เพิ่มเติม
3. อย่าทำลายบุ๊กมาร์กในแอป Single Page ของคุณโดยไม่สามารถอัปเดต URL

แต่ปัญหาที่เลวร้ายที่สุดคือรายการต่อไปของเรา

ปิดการใช้งานวางบนฟิลด์รหัสผ่าน

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

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

นอกจากนี้ นักพัฒนายังสามารถปิดใช้งานการจำกัดการวางด้วยการแก้ไข DevTool บางอย่างได้ คนอื่นอาจลำบากและมีแนวโน้มว่าจะใช้รหัสผ่านที่ไม่รัดกุม อย่าปิดการใช้งานการวาง - ทำงานน้อยลงสำหรับคุณและปรับปรุงความปลอดภัยของระบบ

ข้อ จำกัด รหัสผ่านโง่

“รหัสผ่านของคุณต้องมีความยาวระหว่าง 8 ถึง 12 อักขระ และต้องมีตัวพิมพ์ใหญ่ ตัวเลข และสัญลักษณ์อย่างน้อยหนึ่งตัว แต่โปรดอย่าใช้ ` ' ” / \ หรือ ;”

ไม่มีเหตุผลที่ดีในการใช้การจำกัดรหัสผ่านที่เข้มงวด ถามตัวเอง:

1. ระบบจัดเก็บรหัสผ่านเป็นข้อความธรรมดาในฐานข้อมูลมากกว่าการแฮชหรือไม่
2. ผู้เชี่ยวชาญด้านความปลอดภัยแนะนำให้หยุดไม่ให้ผู้คนใช้รหัสผ่านง่ายๆ เช่น รหัสผ่าน qwerty หรือ 123456 หรือไม่ นี่เป็นเรื่องจริง แต่ยังป้องกันไม่ให้ผู้คนใช้รหัสผ่านที่ซับซ้อนมากขึ้นและจัดเตรียมเทมเพลตที่สะดวกสำหรับการถอดรหัสแบบเดรัจฉาน

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

เนื้อหาบนมือถือ Jump

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

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

เมตริก Cumulative Layout Shift (CLS) ของ Google จะวัดการข้ามเนื้อหาและลงโทษไซต์ตามนั้น นี่เป็นปัญหาที่ซับซ้อน แต่ขณะนี้มีวิธีแก้ปัญหาทางเทคนิคหลายประการ:

• เพิ่มแอตทริบิวต์ width และ height ให้กับองค์ประกอบ img และ iframe ของ HTML หรือใช้คุณสมบัติ aspect-ratio ของ CSS เพื่อจองพื้นที่บนหน้า ก่อน ที่เนื้อหาจะโหลด
• กำหนดขนาดสำหรับองค์ประกอบคอนเทนเนอร์ที่ล้อมรอบเนื้อหาที่โหลดช้ากว่า เช่น โฆษณา รูปภาพ และวิดเจ็ตโซเชียลมีเดีย
• ขอรูปภาพขนาดใหญ่โดยเร็วที่สุดและพิจารณาใช้ลิงก์โหลดล่วงหน้าในส่วน head HTML ของคุณ
• ปรับการใช้แบบอักษรของเว็บให้เหมาะสมและใช้ทางเลือกที่มีขนาดใกล้เคียงกันเพื่อลดการเลื่อนเค้าโครง
• หลีกเลี่ยงการแทรกองค์ประกอบที่ด้านบนของหน้า เว้นแต่จะเป็นการอัปเดต DOM ที่ทริกเกอร์หลังจากการกระทำของผู้ใช้ เช่น การคลิก
• ใช้การควบคุม CSS เพื่อเพิ่มประสิทธิภาพการเรนเดอร์บล็อกเนื้อหา อาจเป็นไปได้ที่จะกำหนดองค์ประกอบที่จะไม่ส่งผลต่อขนาดหรือตำแหน่งของผู้อื่น

เมื่อการลงชื่อเข้าใช้โซเชียลห่วย

เทคโนโลยีต่างๆ เช่น OAuth ช่วยให้ผู้ใช้สามารถลงทะเบียนบนเว็บไซต์ได้อย่างรวดเร็วโดยใช้บัญชีอื่น เช่น Google, Facebook, Twitter, LinkedIn หรือ Github ใช้งานได้จริง เป็นตัวเลือกที่ใช้งานได้จริงซึ่งมีขั้นตอนการลงทะเบียนที่ลื่นไหล ประหยัดเวลา และนำไปสู่ ​​Conversion ที่สูงขึ้น

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

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

ประสิทธิภาพของเว็บแย่

ตาม HTTP Archive หน้าเว็บโดยเฉลี่ยใช้เวลาในการโหลดเจ็ดวินาทีบนอุปกรณ์เดสก์ท็อปและ 20 วินาทีบนมือถือ การดูหน้าเว็บเดียวสร้างคำขอ HTTP 70 รายการ ดาวน์โหลดข้อมูลมากกว่า 2MB และปล่อย CO² 1.3g สู่บรรยากาศ (ดูเครื่องคำนวณคาร์บอนของเว็บไซต์) นี่เป็นค่าเฉลี่ย — หลายๆ ไซต์แย่กว่านั้น

ไม่มีใครมุ่งมั่นที่จะสร้างเว็บไซต์ที่ช้า แต่การเพิ่มคุณสมบัติมักจะเหนือกว่าการปรับปรุงประสิทธิภาพ เนื่องจากคุณสามารถสร้าง Quake clone ที่สามารถเล่นได้ในขนาด 13Kb คุณต้องตั้งคำถามว่าทำไมวาฟเฟิลการตลาดสองย่อหน้าในหน้า "เกี่ยวกับเรา" จึงต้องมีการดาวน์โหลดที่ใหญ่กว่า 154 เท่า!

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

วิดเจ็ตโซเชียลมีเดียส่อเสียด

วิดเจ็ตโซเชียลมีเดีย เช่น ปุ่ม "ถูกใจ" ดูไร้เดียงสา แต่:

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

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

• อีเมล: mailto:?subject=[title]&body=[url]
• เฟสบุ๊ค: https://www.facebook.com/sharer.php?u=[url]
• ทวิตเตอร์: https://twitter.com/share?url=[url]&text=[title]
• LinkedIn: https://www.linkedin.com/shareArticle?url=[url]&title=[title]
• เรดดิท: https://reddit.com/submit?url=[url]&title=[title]

โดยที่ [url] คือ URL ของหน้าปัจจุบัน และ [title] เป็นส่วนหัวหลัก ลิงก์ <a> มาตรฐานใช้งานได้ดี แต่คุณสามารถปรับปรุงให้เปิดหน้าในหน้าต่างป๊อปอัปได้หากต้องการให้ทำงานเหมือนกันกับปุ่มมาตรฐาน

CAPTCHAs

CAPTCHA ย่อมาจาก Completely Automated Public Turing เพื่อแยกแยะระหว่างคอมพิวเตอร์และมนุษย์ ช่วยป้องกันไม่ให้บอทหรือเครื่องอื่นๆ เข้าถึงระบบเว็บ คุณมักจะถูกขอให้ป้อนข้อความที่แสดงในรูปที่อ่านไม่ออกหรือคลิกสี่เหลี่ยมที่มีจักรยาน (จักรยานที่ติดบนรถนับด้วยไหม? แล้วรถสามล้อคันนั้นล่ะ มีจักรยานอยู่หลังกำแพงนั้นไหม!?)

CAPTCHA มีปัญหาพื้นฐานสามประการ:

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

CAPTCHAs เกินความสามารถในเว็บไซต์ส่วนใหญ่ คุณอาจพิจารณาตัวเลือกอื่นแทน CAPTCHA ที่ทำให้คนใช้แรงงานน้อยลง:

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

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

สรุป

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

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

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

มีความคิดอื่นเกี่ยวกับรูปแบบความมืดที่คุณเคยพบบ้างไหม? กรุณาแบ่งปันในส่วนความคิดเห็นด้านล่าง!