เพื่อการออกแบบ UX ที่ดีขึ้น: ฉันสามารถคลิกที่นี่ได้หรือไม่

การเปลี่ยนแปลงที่ละเอียดอ่อนสามารถเพิ่ม CTR ของคุณได้อย่างไร

ทุกคนต้องการคลิกมากขึ้น ก๊อกเพิ่มเติม ผู้ใช้จำนวนมากขึ้นพูดว่า 'ใช่ ฉันสนใจในสิ่งที่คุณมอบให้ฉัน' เราต้องการดูสองสามวิธีที่ทำให้ผู้ใช้ต้องการคลิกมากขึ้น นี่คือที่มาของ การออกแบบ UX !

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

แบบอักษร

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

รูปภาพผ่าน Vital Design

ยอดขายลดลงทันที 20%

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

โดยทั่วไปแล้ว ฟอนต์ sans serif ตัวหนาที่มีความเปรียบต่างสูงจะทำได้ดี

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

เงาตกกระทบ + เอฟเฟกต์ 3 มิติ

มันน่าทึ่งมากที่เงาตกกระทบและการทำบางสิ่งแบบ 3D สามารถทำให้ผู้คนคลิกมันได้ มันเป็นข้อเสียเปรียบที่สำคัญอย่างหนึ่งของการออกแบบแฟลต (ปัจจุบัน อีกอย่างคือในที่สุด มันก็จะบ้าๆ บอๆ) เมื่อสิ่งต่างๆ แบนราบจริงๆ พวกมันก็ดูดี แต่มันไม่ง่ายเลยที่จะรู้ว่าอะไรคลิกได้และอะไรไม่ได้ Jakob Nielsen พูดถึงเรื่องนี้เมื่อเขาประเมิน Windows 8 ในปี 2012

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

(เคล็ดลับสำหรับมืออาชีพ: สิ่งเหล่านี้เรียกว่าปุ่มสไตล์คีออสก์)

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

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

ความเคลื่อนไหว

ผู้คนจำนวนมากมีส่วนร่วมกับการสร้างบางสิ่งที่เป็น 3D ที่คลิกได้ แต่ฉันคิดว่ามันสำคัญพอที่จะรับประกันหมวดหมู่ด้วยตัวมันเอง อันดับแรกจากมุมมองของ UX และประการที่สองเนื่องจากความหมายของการออกแบบเรียบๆ

จากมุมมองของ UX

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

งานแรกในการสร้างบางสิ่งที่คลิกได้คือการบอกผู้ใช้ว่าสามารถคลิกได้

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

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

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

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

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

จากมุมมองแบนๆ

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

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

คอนทราสต์ + สี

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

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

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

แต่พวกเขาเปลี่ยนสองสิ่ง ดังนั้นจึงไม่เป็นวิทยาศาสตร์อย่างแน่นอน Hubspot ในปี 2011 เผยแพร่ผลการทดสอบ A/B บนปุ่มสีแดงและสีเขียว และพบว่าปุ่มสีแดงมีประสิทธิภาพดีกว่าปุ่มสีเขียว 21%

ดังนั้นสีและคอนทราสต์จึงมีบทบาทสำคัญในการทำให้ผู้ใช้คลิกสิ่งต่างๆ

สรุป

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

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

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