5 เคล็ดลับในการออกแบบปุ่มซื้อให้ชนะ

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

โชคดีที่การออกแบบปุ่ม "ซื้อที่เหมาะสม" นั้นไม่ใช่เรื่องยากเมื่อคุณได้รับความรู้พื้นฐาน นี่ไง.

ก่อนอื่น, ข้อความบนปุ่มของคุณเป็นสิ่งสำคัญที่สุด, แต่มีคุณสมบัติอื่น ๆ ที่ต้องแก้ไข ทำไมฉันถึงบอกว่าข้อความนี้สำคัญที่สุด? ลองจินตนาการถึงสิ่งนี้ - อะไรคือจุดของการมีปุ่มที่ออกแบบมาอย่างสวยงามหากตัวอักษรที่อยู่ในข้อความบอกว่า “ตกนรก!”? ปิดคดี. สำเนาที่ดีคือที่ที่ทำเงิน.

ในบทความวันนี้เราจะพูดคุยกัน 5 ลักษณะสำคัญ ของปุ่ม "ซื้อที่เหมาะสม" ลองมาดูกัน!

1. สไตล์โดยรวม

นี่คือจุด # 1 ในรายการนี้ไม่ได้โดยไม่มีเหตุผลเนื่องจากเป็นลักษณะที่สำคัญที่สุด.

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

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

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

ผมขอยกตัวอย่างปุ่มกระดุมสีม่วงให้คุณดู.

Mozilla Firefox

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

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

โดยสังเขป: มุ่งที่จะมีปุ่มที่น่าทึ่ง.

2. ลักษณะที่ปรากฏ

เริ่มกันเลย สี.

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

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

อีกหนึ่งเคล็ดลับ สีส้มเป็นสีที่มองเห็นได้ชัดเจนที่สุดหลังจากสีแดง แต่มันไม่ได้ยกระดับอารมณ์ด้านลบทั้งหมดที่สีแดงทำ “หยุด”, “ระวัง!”, และ “อันตราย”) ปุ่มสีส้มที่ได้รับความนิยมมากที่สุดบนอินเทอร์เน็ตสามารถพบได้ใน amazon.com.

สิ่งต่อไปที่จะมุ่งเน้นคือ ขนาดของปุ่ม. สิ่งที่ฉันพูดได้มันต้องมีขนาดใหญ่ ยิ่งใหญ่ก็ยิ่งดี (อีกครั้งตัวอย่างของ Firefox)

“ฉันจะทำให้มันใหญ่ขึ้นได้ไหม?” เป็นคำถามที่ดีที่จะถามในระหว่างขั้นตอนการออกแบบ สนใจมาก.

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

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

เป็นเพียงตัวอย่างง่ายๆของปุ่มง่าย ๆ.

ThemeFuse

อย่างที่คุณเห็นว่าปุ่มไม่ได้ใช้จิ้งจอกสีส้ม แต่ก็ยังมองเห็นได้ชัดเจน ตามความเป็นจริงแล้ว ThemeFuse (เป็นร้านค้าธีมพรีเมี่ยมของ WordPress ซึ่งฉันเป็นส่วนหนึ่งของ) ให้สิ่งเล็ก ๆ ที่เรียกว่ารหัสย่อ เหนือสิ่งอื่นใดรหัสย่อเหล่านั้นทำให้การสร้างปุ่มที่ดูดีเป็นเรื่องง่าย.

ตัวอย่างเช่นมีเพียงบรรทัดเดียว:

[button link = "domain.com"] คลิกที่นี่เพื่อซื้อผลิตภัณฑ์ที่ยอดเยี่ยมของฉัน! [/ ปุ่ม]

ฉันได้รับผลลัพธ์นี้:

3. แบบอักษร

แบบอักษร Sans-serif เป็นมาตรฐานสำหรับปุ่มทุกชนิด นั่นเป็นเพราะฟอนต์ sans-serif อ่านได้ง่ายมากสำหรับการใช้งานออนไลน์ทุกครั้ง (ในทางกลับกันฟอนต์ serif จะดีกว่าสำหรับสิ่งพิมพ์ที่พิมพ์)

คุณต้องการให้สำเนาบนปุ่มของคุณอ่านได้มากที่สุดเนื่องจากเป็นข้อความที่สำคัญที่สุดในหน้า ตัวพิมพ์ใหญ่ทั้งหมดไม่ใช่ความคิดที่ดี กรณีผสมทำงานได้ดีขึ้นมาก โดยตัวพิมพ์ใหญ่ฉันหมายถึงตัวอักษรตัวแรกของทุกคำที่เป็นตัวพิมพ์ใหญ่ (ยกเว้นคำที่ชอบ “สำหรับ”, “”, “และ”, ฯลฯ )

(แหล่งรูปภาพ: Gomediazine)

แบบอักษรที่ปลอดภัยที่คุณสามารถใช้ได้คือ: Arial, Helvetica, Franklin Gothic, Myriad หรือแบบอักษรคลาสสิกอื่น ๆ ของ sans-serif จริงๆ.

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

อีกครั้งข้อความจะต้องสามารถอ่านได้สูง.

4. ตำแหน่ง

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

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

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

แน่นอนว่ามันจะต้องเป็นสถานที่ที่มองเห็นได้มากที่สุดในเวลาเดียวกัน นี่หมายถึงสองสิ่ง:

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

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

5. องค์ประกอบเสริม

นี่คือไอซิ่งบนเค้ก องค์ประกอบพิเศษช่วยปรับปรุงการมองเห็นปุ่มของคุณได้ดียิ่งขึ้น ตัวอย่างขององค์ประกอบ: ลูกศร, ตะกร้าสินค้า, แว่นตาขยาย, เครื่องหมายบวก, หรือองค์ประกอบการสร้างแบรนด์ต่างๆ.

ตัวอย่างที่ฉันชอบ - ตัวอย่าง Firefox - ใช้องค์ประกอบพิเศษที่ยอดเยี่ยมจริงๆ - สุนัขจิ้งจอกสีส้ม (หรือโลโก้ของพวกเขา).

กฎง่ายๆคือการใช้องค์ประกอบพิเศษที่ เน้นวัตถุประสงค์ของปุ่ม. ตัวอย่างเช่นลูกศรสองลูกที่ชี้ลงทำได้ดีมากสำหรับปุ่มดาวน์โหลด ไอคอนรถเข็นใช้งานได้ดีด้วยปุ่มสั่งซื้อ (ตัวอย่าง amazon ด้านบน) แว่นขยายใช้งานได้ดีด้วยปุ่มค้นหา และอื่น ๆ.

คุณยังสามารถใช้องค์ประกอบการสร้างแบรนด์ได้อีกด้วย ตัวอย่างเช่น: ไอคอน RSS มาตรฐานพร้อมปุ่มสมัครรับฟีดไอคอนนกพร้อมปุ่มติดตามบนตัวฉัน, สุนัขจิ้งจอกสีส้มพร้อมปุ่มดาวน์โหลด Firefox, โลโก้ของคุณเองพร้อม buy-my- ปุ่ม stuff.

นี่คือตัวอย่างบางส่วน:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

พลังของ "ฟรี"

อีกหนึ่งเคล็ดลับคือการใช้คำที่ทรงพลังที่สุดในภาษาอังกฤษ - ฟรี เมื่อใดก็ตามที่มีการโฆษณาสิ่งที่ฟรีผู้คนเริ่มที่จะทำสิ่งที่ไม่มีเหตุผลที่คาดเดาได้ (ลองอ่านหนังสือยอดเยี่ยมโดย แดนอรีลี่ย์, "The Upside of Irrationality" เพื่อค้นหาว่าฉันหมายถึงอะไร)

ตัวอย่างเพิ่มเติม:

Freshbooks

Wufoo

Freeagent.com

อะไรต่อไป?

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

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