การออกแบบส่วนต่อประสานที่มุ่งเน้นเพื่อการมีส่วนร่วมของผู้ใช้ที่ดีขึ้น

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

พูดง่ายกว่าทำ แต่ถ้าคุณเรียนรู้พื้นฐานบางอย่างคุณจะไม่มีปัญหาในการสร้างก UI ที่เน้นเนื้อหาที่ยอดเยี่ยม สำหรับโครงการของคุณ.

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

จับความแปลกใหม่

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

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

ตัวอย่างหนึ่งที่พบบ่อยคือปุ่มคำกระตุ้นการตัดสินใจที่พบในหน้า Landing Page ส่วนใหญ่ คุณยังสามารถสร้างความแปลกใหม่ด้วย ภาพถ่ายพื้นหลังภาพประกอบหรือภาพหน้าจอแอป, เช่นบนหน้า Landing Page ของ Uber for Business.

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

อีกทางเลือกหนึ่งคือใช้ GiftRocket ไอคอนแสดงเป็นลิงก์ เพื่อเจาะลึกเข้าไปในเว็บไซต์.

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

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

พิมพ์ได้ Skimmable

การศึกษาพบว่าผู้ใช้ส่วนใหญ่ สแกนหน้าเว็บ แทนที่จะอ่านคำต่อคำ คุณอาจต้องการดึงดูดผู้คนให้อ่านเนื้อหาของคุณ แต่คุณทำได้มากเท่านั้น.

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

1. แบ่งเนื้อหา พร้อมคำบรรยายที่ชัดเจน
2. แยกย่อหน้า เพื่อทำให้มีขนาดเล็กลง
3. ใช้รายการสัญลักษณ์แสดงหัวข้อย่อย เพื่อแบ่งปันคะแนนของคุณให้เร็วขึ้น

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

ลองดูบล็อกของ Sprout ด่วนสำหรับตัวอย่างของสไตล์การเขียนนี้ เนื้อหาถูกเขียนโดย Neil Patel และเขามักจะเขียนเนื้อหาที่มีความยาวมาก แต่เขา แบ่งวรรค ออกเป็น 1-3 ประโยคละ.

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

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

รูปภาพที่สะดุดตา

กรณีศึกษาล่าสุดจาก Backlinko แสดงให้เห็นว่าหน้าต่างๆ มีอย่างน้อยหนึ่งภาพ โดยทั่วไป อันดับที่สูงขึ้น กว่าหน้าที่ไม่มีภาพ นี่เป็นสิ่งที่ยอดเยี่ยมจากมุมมองของ SEO.

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

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

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

TechCrunch ทำสิ่งนี้ด้วยภาพเด่น ๆ ในบทความของพวกเขาซึ่งคุณมักจะพบ ภาพเด่นเหนือรอยพับ.

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

องค์ประกอบของหน้าตัดกัน

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

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

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

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

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

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

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

หากคุณเลื่อนลงไปที่ด้านล่างของเนื้อหาคุณจะสังเกตเห็น กล่องลงทะเบียนแฟนซี - shmancy ออกแบบมาเฉพาะสำหรับแบบฟอร์มจดหมายข่าว มันโดดเด่นจากส่วนที่เหลือของหน้าด้วย สีพื้นหลังที่ไม่ซ้ำกันตัวอักษรที่สนุกสนานและไอคอน King Triton น่ารัก.

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

กระตุ้นให้เกิดการโต้ตอบกับผู้ใช้

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

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

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

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

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

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

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

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

• ผู้ใช้งานแทคติคเพื่อเพิ่มความผูกพัน (thinkapps.com)
• บทเรียนในการมีส่วนร่วมแบบค่อยเป็นค่อยไป (uxbooth.com)
• อย่าถือว่าผู้ใช้ใหม่ต้องการเรียนรู้วิธีใช้ผลิตภัณฑ์ของคุณ (uxdesign.cc)