11 เทคนิคการออกแบบเว็บที่ปรับปรุงการมีส่วนร่วมของผู้ใช้และการแปลง

เผยแพร่แล้ว: 2016-08-22

ผู้เชี่ยวชาญด้าน UX กำหนดวิธีการเพิ่มประสิทธิภาพ Conversion อย่างไร

ตามคำกล่าวของ Jeff Gothelf ผู้เขียนหนังสือ Lean UX การเพิ่มประสิทธิภาพ Conversion เป็นเรื่องเกี่ยวกับ “การหาส่วนผสมที่ลงตัวของข้อเสนอคุณค่า คำกระตุ้นการตัดสินใจ และจุดราคา เพื่อโน้มน้าวให้ลูกค้ามีส่วนร่วมกับผลิตภัณฑ์หรือบริการของคุณในระดับที่ลึกยิ่งขึ้น”

อย่างไรก็ตาม "ที่ปรึกษาด้านการเพิ่มประสิทธิภาพ Conversion" มักจะเป็นคนที่ธุรกิจทำสัญญาเพื่อประเมินเวิร์กโฟลว์เฉพาะ โดยทั่วไปแล้วจะมาจากพื้นฐานการวิเคราะห์เว็บและเสนอชุดการทดสอบเพื่อดำเนินการเพื่อปรับปรุงการแปลงของโฟลว์

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

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

1) สร้างความประทับใจแรกพบที่แข็งแกร่ง

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

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

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

Make a strong first impression

2) ใช้ภาพฮีโร่

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

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

Use a Hero Image

3) เอฟเฟกต์การเลื่อนพารัลแลกซ์

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

Parallax scrolling effects

4) ใช้สีเน้นเสียงและปุ่มคำกระตุ้นการตัดสินใจอย่างมีกลยุทธ์

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

Implement accent colors and call-to-action buttons strategically

5) วิดีโอแนะนำ/อธิบาย

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

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

Intro/explainer videos

6) เว็บไซต์ของคุณต้องได้รับการออกแบบให้มีความแข็งแกร่งเท่ากับหน้า Landing Page

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

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

landing page

7) การเพิ่มวิดเจ็ตและปุ่มโซเชียล

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

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

Dropbox ทำสิ่งที่แตกต่างออกไปเล็กน้อย ด้วยการติดตามบน Twitter แต่ละครั้ง เชื่อมต่อกับ facebook หรือ twitter Dropbox ให้พื้นที่แก่ผู้ใช้เพิ่มขึ้น 125MB:

Adding social widgets and buttons

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

8) เพิ่มแบบฟอร์มการสมัครสมาชิกในทุกหน้า

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

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

Add a subscription form on every page

9) ใช้พื้นที่สีขาวมากขึ้น

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

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

Use more white space

Use more white space

10) ดึงดูดผู้ชมด้วยเว็บไซต์ที่เหมาะกับอุปกรณ์พกพา

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

Engage audience with mobile friendly website

11) แผนที่ความร้อนแสดงการมีส่วนร่วม

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

การเรียนรู้เกี่ยวกับพฤติกรรมของผู้เยี่ยมชมมีความสำคัญต่อความสำเร็จของเว็บไซต์ของคุณ

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

Heat maps show engagement

บทสรุป

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

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

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