คำแนะนำในการปรับปรุงประสบการณ์ผู้ใช้ (UX) ของไซต์ WordPress
เผยแพร่แล้ว: 2017-04-22การปรับเว็บไซต์ให้เหมาะสมเพื่อ ประสบการณ์การใช้งานที่ ดีขึ้นนั้นไม่ใช่เรื่องง่าย ส่วนใหญ่เป็นเพราะเครื่องมือที่จำเป็นและ/หรือความรู้ด้านการเขียนโปรแกรมไม่ได้มาเพื่อเงินเพียงเล็กน้อย แต่เมื่อเว็บไซต์ถูกสร้างขึ้นบนแพลตฟอร์มที่เป็นที่รู้จักและชื่นชอบในการใช้งานจริง UXO ( การเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้ ) จะไม่เจ็บปวดมากนัก
มีเครื่องมือมากมายบน WordPress ซึ่งส่วนใหญ่ใช้งานได้ฟรี ซึ่งช่วยให้คุณเข้าใจผู้ชมของคุณได้ดีขึ้น (การติดตามและการวิเคราะห์) ปรับปรุงประสิทธิภาพ (ปลั๊กอินการแคชและการเพิ่มประสิทธิภาพรูปภาพ) และการทดสอบและปรับปรุง (A/B ซอฟต์แวร์ทดสอบ เช่น Nelio, OptimizePress เป็นต้น) คู่มือนี้ไม่เกี่ยวกับพวกเขา
คู่มือนี้ให้รายละเอียดเกี่ยวกับการใช้งานเว็บไซต์ WordPress ที่มองข้ามได้ง่ายขึ้นและวิธีที่ดีที่สุดในการแก้ไขการกำกับดูแลเหล่านั้น เราจะเริ่มต้นด้วย:
ม้าหมุน
ทุกแผนกในทุกธุรกิจต้องการม้าหมุน/ตัวเลื่อน เพียงเพราะมันเป็น Golden Mean ที่สวยงาม ทุกคนวางผลิตภัณฑ์/แคมเปญ/ข้อความของตนไว้ในพื้นที่เดียวที่มองเห็นได้ชัดเจนที่สุดบนหน้า: ครึ่งหน้าบน
นี่คือเหตุผลที่ธีม WordPress ที่ต้องการมากที่สุดมีปลั๊กอินตัวเลื่อนอย่างน้อยหนึ่งตัว (โดยทั่วไปคือ Revolution Slider) มาดูข้อดีและข้อเสียของแนวทางดังกล่าวกัน:
ข้อดี:
- แสดงข้อความที่สำคัญที่สุดในจุดเดียว
- สามารถจัดลำดับความสำคัญของข้อความได้ (สำคัญที่สุดคือสไลด์แรก)
- ควรจะดึงดูดผู้เข้าชมทุกกลุ่ม ("บางอย่างสำหรับทุกคน")
จุดด้อย:
- โดยทั่วไป ผู้ใช้จะไม่รอให้สไลด์หมุน และจะข้ามภาพหมุนหลังจากเหลือบมองที่เฟรมที่มองเห็นได้ในปัจจุบัน
- บอทการค้นหารวบรวมข้อมูลเนื้อหาของสไลด์ได้ยาก ซึ่งเป็นข่าวร้ายสำหรับ SEO
มีวิธีแก้ไขข้อเสียและปรับปรุง UX แบบหมุน:
- รักษาจำนวนสไลด์/เฟรมได้ไม่เกิน 5
- ให้การควบคุมการนำทางแบบหมุนแก่ผู้ใช้
- อย่าส่งต่ออัตโนมัติ
บางครั้ง วิธีแก้ปัญหาที่ง่ายที่สุดคือดีที่สุด แทนที่จะใช้ปลั๊กอินตัวเลื่อนระดับพรีเมียม คุณสามารถใช้ปลั๊กอิน JavaScript (jQuery) น้ำหนักเบา เช่น Slick เพื่อสร้างภาพหมุนที่ใช้งานง่ายบน WordPress
การนำทางขั้นสูง
เมนูหลักในส่วนหัวรวมกับการนำทางรองในแถบด้านข้างเป็นวิธีที่เกือบเข้าใจผิดได้ เพื่อให้แน่ใจว่าการนำทางของคุณจะสมบูรณ์และใช้งานได้ แต่เมื่อพูดถึงเว็บไซต์ขนาดใหญ่ (โดยเฉพาะอีคอมเมิร์ซหรือบล็อกขนาดใหญ่ที่มีเนื้อหาจำนวนมาก) ที่มีหน้าหลายพันหน้า การนำทางรองเพียงอย่างเดียวไม่สามารถตัดทิ้งได้
นี่คือเหตุผลที่เราต้องการ Mega Menus แต่เหรียญนี้ก็มีสองด้านเช่นกัน
ข้อดี:
การมองเห็นที่สม่ำเสมอ: เนื้อหา/หน้าในระดับล่างจะรวมอยู่ในเมนูขนาดใหญ่
บันทึกขั้นตอนพิเศษ: ผู้ใช้สามารถเข้าถึงเนื้อหาที่ห่างไกล/ไม่ชัดเจนได้เร็วขึ้น
จุดด้อย:
- เป็นที่ทราบกันว่าทำให้เกิดปัญหากับประสิทธิภาพเมื่อมีการเพิ่มองค์ประกอบ UI เช่นกราฟิก/ไอคอน
- ไม่มีประสิทธิภาพมากหรือน้อยบนเว็บไซต์ที่มีลำดับชั้นเนื้อหาที่ไม่ดี
- การทำเมนูเมก้าตอบสนองได้อย่างสมบูรณ์แบบอาจเป็นเรื่องที่ท้าทาย
ก่อนที่คุณจะอภิปรายข้อดีและข้อเสีย (และไม่ว่าคุณต้องการเมนูเด่นบนเว็บไซต์ของคุณหรือไม่ก็ตาม) คุณต้องจัดหมวดหมู่เนื้อหาอย่างละเอียด อนุกรมวิธาน WordPress มีเหตุผล ใช้มัน.
เมื่อคุณมีลำดับชั้นของเนื้อหาที่ได้รับการฝึกฝนและจัดระเบียบอย่างเพียงพอแล้ว คุณสามารถใช้ปลั๊กอิน WordPress เช่น Max Mega Menu, uberMenu เป็นต้น เพื่อเพิ่มเมนูดรอปดาวน์ขนาดใหญ่ลงในเว็บไซต์ได้ ส่วนขยาย WooCommerce เช่น Ajax Layered Navigation เพิ่มอินเทอร์เฟซการกรองไปยังร้านค้า
ประสิทธิภาพ
ไม่ว่าคุณจะอยากจะเชื่ออะไร: คุณไม่ใช่คนพิเศษ
ผู้ใช้ไม่ต้องการรอเนื้อหา ดังนั้นอย่าปล่อยให้พวกเขารอเนื้อหา มิฉะนั้นพวกเขาจะไปหาเนื้อหาที่อื่น แม้แต่อันดับของคุณก็ยังประสบปัญหาเว็บไซต์ช้า นั่นคือผลรวมของความจำเป็นในการเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้
เพิ่มประสิทธิภาพเว็บไซต์ WordPress ของคุณเพื่อประสิทธิภาพด้วย:
CDN: ตัวเลือกที่ใช้ได้สำหรับเว็บไซต์ที่มีผู้ชมทั่วโลกและมีปริมาณการใช้งานปานกลางถึงสูง ปลั๊กอิน MaxCDN และ W3 Total Cache เป็นการจับคู่ที่ทำขึ้นในสวรรค์ที่โหลดอย่างรวดเร็ว
แคช: ตามที่กล่าวไว้ข้างต้น W3 Total Cache เป็นปลั๊กอินแคชเพียงตัวเดียวที่คุณต้องการ (แม้จะไม่มีการสนับสนุน CDN) ถามนักพัฒนาของคุณเกี่ยวกับโซลูชันฝั่งเซิร์ฟเวอร์ เช่น Redis และ Memcached
การเพิ่มประสิทธิภาพส่วนหน้า: ปลั๊กอินเช่น EWWW Image Optimizer บีบอัดรูปภาพ (โดยไม่ลดทอนคุณภาพ) ตรวจสอบให้แน่ใจด้วยว่ามี CSS และ JS แบบอินไลน์ในไฟล์ธีมของคุณน้อยที่สุด บีบอัดและย่อสไตล์ชีตและไฟล์ JavaScript ด้วย
ลดการพึ่งพาภายนอก ใช้สไปรต์ CSS และเลือกอย่างพิถีพิถันในขณะที่ดาวน์โหลดปลั๊กอิน (ยิ่งน้อยยิ่งดี) คุณยังสามารถติดต่อผู้ให้บริการเว็บโฮสติ้งและขอความช่วยเหลือได้ บางครั้ง โฮสต์เว็บของคุณอาจสร้างปัญหาที่เกี่ยวข้องกับประสิทธิภาพการทำงาน
โมดอลป๊อปอัป
อย่าทำตัวน่ารังเกียจในนามของการโต้ตอบและการแปลง
ใช่ ป๊อปอัปโมดอล (การตลาดหยุดชะงัก) เป็นเครื่องมือแปลงที่ยอดเยี่ยม มีปลั๊กอินนับพันตัว (ปลั๊กอินโซเชียลมีเดียส่วนใหญ่มีคุณสมบัตินี้ในขณะนี้) ที่ให้คุณติดข้อความถึงผู้ใช้ 'สุภาพ' เพื่อเตือนพวกเขาให้แชร์ / ติดตาม / ชอบเนื้อหาบนโซเชียลมีเดีย สมัครรับข้อมูลหรือลงทะเบียน รับส่วนลด et al.
มีหลายอย่างผิดปกติกับมัน… แต่เราจะทำอย่างนั้นในอีกสักครู่
ข้อดี:
- พิสูจน์แล้วว่าปรับปรุงอัตราการแปลง
จุดด้อย:
- รบกวน: ผู้เยี่ยมชมอยู่ที่นี่สำหรับเนื้อหาและป๊อปอัปกำลังขวางทาง
- ป๊อปอัปจะถือว่าเป็น White Noise (เช่นโฆษณาจำนวนมาก) เว้นแต่จะเข้ากับเส้นทางของผู้ใช้อย่างเหมาะสม
- ไม่ดีสำหรับการเข้าถึง
มีตัวอย่างของป๊อปอัปที่ใช้อย่างดีในบริบท BrainPickings.org เข้าใจผู้ชมและโปรโมตลิงก์ 'บริจาค' เฉพาะเมื่อผู้ใช้เข้าถึงไซต์ซ้ำๆ และเมื่อพวกเขาอ่านเนื้อหาเสร็จแล้ว ป๊อปอัป Reebok Crossfit มีช่วงเวลาที่ไม่ดี แต่มีส่วนลดเล็กน้อยสำหรับการสมัครรับข้อมูลในหน้าผลิตภัณฑ์
ที่มา: REEBOK
ความล่าช้าของเวลาและทริกเกอร์นั้นใช้ได้ แต่จำเป็นต้องเน้นที่ภาพที่ใหญ่ขึ้นและเชื่อมโยงป๊อปอัปในลักษณะที่จะเกี่ยวข้องกับผู้ใช้ที่ต้องการ
จนถึงตอนนี้ การแปลงที่เพิ่มขึ้นนั้นเกิดจากการใช้แรงทื่อธรรมดา แต่คุณภาพของการแปลงและโอกาสในการขายที่ตามมาจะเพิ่มขึ้นได้เมื่อคุณทำอย่างชาญฉลาด การขอให้ผู้เยี่ยมชมครั้งแรกสมัครรับข้อมูลเว็บไซต์จะไม่ได้รับโอกาสในการขายที่มีคุณภาพ 99/100 ครั้ง
ลองใช้ปลั๊กอิน WordPress อย่างชาญฉลาดสำหรับป๊อปอัป มีบางอย่าง (เช่น Popups โดย Supsystic) ที่ดี ทำงานกับผู้ที่แทนที่จะเน้นเฉพาะการโต้ตอบในหน้าเดียว
Endnote
เพื่อปรับปรุงประสบการณ์ของผู้ใช้ หวังว่าคุณจะแน่ใจว่าได้ทำตามคำแนะนำนี้และทดสอบทุกอย่าง (ใช้ Google Analytics หรือการทดสอบ Nelio A/B หรือเครื่องมืออื่นๆ: ขึ้นอยู่กับคุณ)
และสัญญาว่าตัวเองจะพัฒนาต่อไป
อ่านเพิ่มเติม ปลั๊กอิน WordPress | 5 การแก้ไขด่วนสำหรับไซต์ WordPress ของคุณ