วิธีการใช้องค์ประกอบของการออกแบบเพื่อเพิ่มการแปลง

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

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

ผู้บริโภคเกือบครึ่งหนึ่ง (46.1%) รู้สึกว่าการออกแบบเป็นวิธีที่ดีที่สุดในการตัดสินใจว่าบริษัทหรือแบรนด์มีความน่าเชื่อถือหรือไม่ นอกเหนือจากนั้น ผู้คนก็จะละทิ้งไซต์ของคุณถ้ามันน่าเกลียด – ทั้งหมด 38% ของผู้เข้าชมทั้งหมด , พูดตรงๆ.

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

1. สี

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

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

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการใช้จิตวิทยาสีเพื่อเพิ่มอัตราการแปลงได้ในบทความโดยละเอียดนี้ โดย นีล พาเทล ฉันชอบวงล้ออารมณ์นี้โดย Conversioner เพื่ออธิบายตัวกระตุ้นอารมณ์ต่างๆ ของสี:

2. ขนาด

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

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

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

3. อวกาศ

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

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

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

หากคุณใช้ WordPress ให้มองหาธีมที่มีตัวสร้างเพจ เครื่องมือสร้างหน้าช่วยให้คุณควบคุมการปรับขนาดและระยะห่างขององค์ประกอบในหน้า Landing Page ของคุณได้มากขึ้น หนึ่งในรายการโปรดของฉันคือธีม Salient .

4. ไลน์

พูดอย่างเคร่งครัดเส้นคือเครื่องหมายระหว่างจุดตรงข้ามสองจุด ดังที่คุณทราบแล้ว เส้นมีหลายประเภทและมีหลายขนาดและรูปร่าง คุณมีเส้นตรง เส้นหยัก เส้นโค้ง เส้นหนา เส้นบาง ฯลฯ

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

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

5. รูปร่าง

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

รูปร่างสามารถแบ่งออกเป็นสามประเภทที่จำเป็น: เรขาคณิต ธรรมชาติและนามธรรม

• เรขาคณิต: สามเหลี่ยม สี่เหลี่ยม สี่เหลี่ยม วงกลม ฯลฯ
• ธรรมชาติ: ใบไม้ สัตว์ ต้นไม้ คน สิ่งของ ฯลฯ
• นามธรรม: ไอคอน สไตไลซ์ การแสดงกราฟิก สัญลักษณ์ โครงร่าง ฯลฯ

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

6. พื้นผิว

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

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

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

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

7. ความคุ้มค่า

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

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

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

ในตัวอย่างด้านล่าง จากการออกแบบแนวคิดโดย Denis Absullin บน Dribbble คุณจะเห็นแสงเรืองแสงรอบๆ ปุ่ม CTA เพื่อเพิ่มสินค้าลงในรถเข็น

นำองค์ประกอบของการออกแบบมาทำงานให้กับคุณ

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