דף הבית » ממשק משתמש / UX » 5 טיפים לעיצוב זכייה קנה כפתור

    5 טיפים לעיצוב זכייה קנה כפתור

    אם אתה מעצב, או משווק באינטרנט, או שאתה פשוט במקרה להיות הבעלים של אתר אינטרנט שבו אתה מנסה למכור משהו, בשלב מסוים אתה הולך צריך לעצב ראוי "לקנות כפתור". ואז, תוכלו למצוא במהירות כי רק לשים “קנה עכשיו” טקסט על מלבן כחול הוא פשוט לא מספיק אם אתה מקווה עבור כל תוצאות טובות.

    למרבה המזל, עיצוב ראוי "לקנות כפתור" לא כל כך קשה ברגע שאתה מקבל להכיר קצת ידע בסיסי. הנה זה בא.

    קודם כל, טקסט על הכפתור שלך הוא הדבר החשוב ביותר, אבל יש כמה תכונות אחרות, כי יש לטפל. מדוע אני אומר שהטקסט הוא החשוב ביותר? תאר לעצמך את זה - מה הטעם שיש כפתור מעוצב להפליא אם הטקסט על זה אומר “לך לעזאזל!”? תיק סגור. עותק טוב הוא המקום שבו הכספים נעשים.

    במאמר של היום, אנו דנים 5 תכונות מכריעות של "לקנות כפתור" הנכון. בואו נסתכל!

    1. סגנון כללי

    זוהי הנקודה # 1 ברשימה זו לא בלי סיבה, שכן היא תכונה חשובה ביותר.

    אתה רוצה ל להפוך את הכפתור שלך לתוך פרה סגולה. זהו קונספט שמופץ על ידי סת 'גודין. בקיצור, אתה רוצה שזה יהיה מדהים; על ידי מדהים אני מתכוון משהו שלא ניתן להתעלם. משהו כמו פרה סגולה באמצע מרעה.

    מעצבים מסוימים אינם טובים במיוחד בזה. זה מפתה ליצור כפתור הקושר יפה עם הצבעים והסגנון של האתר הוא יושב על. בהתחלה זה נראה כמו רעיון טוב מאוד, אבל זה לא.

    הבעיה היא כי כפתור כזה הוא רחוק מלהיות מדהים. אתה לא רוצה את הכפתור שלך כדי לשלב; אתה רוצה שזה יתבלט. לכן, זה צריך להיות שנוצר כאלמנט נפרד לחלוטין, כי פשוט קורה לשבת על אתר כלשהו, ​​לא כמו משהו שצריך להיות חופף עם אתר זה.

    תן לי רק לתת לך דוגמה מצוינת של סגול כמו פרה כפתור.

    Mozilla Firefox

    זה איך דף ההורדה של Firefox נראה. אני רוצה שתבחין בדבר אחד. הלחצן בצד שמאל, לחצן ההורדה, אינו נראה כמו כל דבר אחר בדף זה. זה הדבר הירוק היחיד. זה המקום היחיד שמציג את הלוגו של פיירפוקס. זה אחד האלמנטים הכי גדולים שם. הוא ממוקם מעל לקפל.

    כל התכונות הללו להפוך את הכפתור הזה גלוי מאוד. זוהי פרה סגולה. אם אתה אומר שאתה לא רואה את זה אתה רק מנסה להרשים מישהו.

    בקצרה: לכוון עם כפתור מדהים.

    2. מראה

    בוא נתחיל עם הצבע.

    אם אתה רוצה להיות שימוש יוצא דופן צבע זה לא נעשה שימוש בשום מקום אחר בדף. בדיוק כמו ש- Firefox עושים באתר שלהם. אתה יכול להשתמש בכלי כמו צבע Scheme מעצב למצוא צבע זה נראה טוב עם ערכת הצבעים הנוכחית של האתר שלך, אבל הוא עדיין שונה מאוד.

    ו “שונה” היא מילת המפתח כאן. אם האתר שלך הוא כחול בעיקר, אתה לא רוצה כפתור לקנות כחול. אתה לא רוצה גוון של כחול. אתה לא רוצה שום דבר שנראה כל כחלחל. אתה רוצה ורוד, או כתום, וכו 'אני בטוח שאתה מבין את הנקודה.

    עוד טריק. כתום ידוע כצבע גלוי ביותר לאחר אדום. אבל, זה לא להעלות את כל הרגשות השליליים של אדום עושה (דברים כמו “תפסיק”, “תזהר!”, ו “סכנה”). ניתן למצוא את הלחצן הכתום הפופולרי ביותר באינטרנט amazon.com.

    הדבר הבא להתמקד הוא גודל הכפתור. ובכן, מה אני יכול לומר, זה צריך להיות גדול. ככל שהוא גדול יותר. (שוב, דוגמה ל- Firefox).

    “אני יכול לעשות את זה אפילו גדול יותר?” היא שאלה טובה לשאול במהלך שלב התכנון. לעשות את זה הרבה.

    זה צריך להיות פשוט או מבריק? כפתור לא יכול להיות מבריק מדי. תסתכל על כפתור Firefox שוב. זה נוצץ. יש עליו שועל כתום, אבל זה עדיין נראה כמו כפתור. וזה גבול שאתה לא יכול לחצות. אם הכפתור שלך לא נראה כמו אף אחד לא ילחץ עליו אי פעם.

    בגלל זה אין תשובה פשוטה אשר אחד טוב יותר - נוצץ או פשוט. אתה רק צריך לגלות בעצמך. תמיד לפצל הבדיקה. ליצור שני לחצנים, אחד מבריק ואחד פשוט. השתמש שניהם בו זמנית, ולראות איזה מהם מבצע טוב יותר. כלי אופטימיזציית האתרים של Google יעזור לך בכך.

    רק דוגמה מהירה של כפתור פשוט.

    ערכת נושא

    כפי שאתה יכול לראות את הלחצן אינו משתמש בכל השועלים כתום, אבל זה עדיין גלוי מאוד. כעניין של עובדה, ThemeFuse (פרימיום וורדפרס נושא החנות, שבו אני חלק) מספק משהו קטן שנקרא קודים. בין השאר, אלה shortcodes לעשות את זה ממש קל ליצור כפתורים להסתכל יפה.

    לדוגמה, עם שורה אחת בלבד של:

    [קישור כפתור = "domain.com"] לחץ כאן כדי לקנות את המוצר מדהים! [/ / button]

    אני מקבל תוצאה זו:

    3. גופן

    גופן Sans-serif הוא תקן עבור כל מיני לחצנים. זה בגלל גופני sans-serif הם קריא מאוד עבור כל שימוש באינטרנט. (בצד ההפוך, גופני serif טובים יותר עבור פרסומי דפוס).

    אתה רוצה את העותק על הכפתור שלך להיות קריא ככל האפשר, שכן היא חתיכת טקסט חשוב ביותר בדף. All-caps הם לא רעיון טוב. מקרה מעורב עובד הרבה יותר טוב. במקרה מעורב אני מתכוון האות הראשונה של כל מילה להיות אותיות רישיות. (למעט מילים כמו “ל”, “ה”, “ו”, וכו.)

    (מקור התמונה: Gomediazine)

    כמה גופנים בטוח אתה יכול להשתמש הם: Arial, Helvetica, פרנקלין גותי, Myriad, או כל גופן קלאסי אחר sans-serif, באמת.

    עכשיו מה לגבי הצבע. העותק צריך, כמובן, להיות בניגוד גבוה לצבע של הכפתור. אתה לא רוצה אפור על אפור. אתה רוצה שחור על גבי לבן, או כחול על כתום.

    שוב, הטקסט צריך להיות קריא מאוד.

    4. מיקום

    המיקום הטוב ביותר תלוי בעיצוב של האתר שלך, וזה כנראה לא מפתיע. אבל עדיין יש כמה כללים ששווים.

    למקם אותו המקום הבולט ביותר האפשרי. אל תנסה להיות יצירתי כאן. המיקום צריך להיות ברור ללקוח / למשתמש.

    בכל פעם שמישהו מבקר באתר הם מצפים לראות דברים מסוימים במקומות מסוימים. דברים כמו: לוגו בפינה השמאלית העליונה, סיכום עגלת קניות בפינה הימנית העליונה, סעיף זכויות היוצרים בכותרת התחתונה וכו 'העבודה שלך היא לנסות להבין מה המקום הכי ברור עבור כפתור לקנות ופשוט לשים את זה שם.

    כמובן, זה צריך להיות המקום הכי גלוי בו זמנית. זה אומר שני דברים:

    1. זה בהחלט יש להציב מעל הקפל, ו
    2. אל תפחדו מהמקום הלבן. שטח לבן הוא חבר של כל מעצב אינטרנט טוב. זכור, זה לא משנה כמה דברים אתה יכול למקם באתר אינטרנט, מה שחשוב הוא כמה דברים אתה יכול להסיר ממנו.

    תוכל למקם את אסטרטגיית המיקום שלך בסטרואידים על ידי שכפול הלחצן וגם הצבתו בתחתית הדף. בדרך זו, כאשר מישהו קורא את כל הדף הם עדיין יכולים לפעול בתחתית זה.

    5. מרכיבים נוספים

    זהו הדובדבן על העוגה. אלמנטים נוספים לשפר את הנראות של הכפתור שלך עוד יותר. דוגמאות לאלמנטים: חצים, עגלות קניות, משקפיים מגדילות, ועוד שלטים, או מרכיבים שונים של מיתוג.

    הדוגמה האהובה עלי - דוגמא לפיירפוקס - משתמשת באלמנט נוסף ממש מגניב - השועל הכתום (aka הלוגו שלהם).

    כלל אצבע הוא להשתמש באלמנטים נוספים להדגיש את מטרת הכפתור. לדוגמה, שני חיצים מצביעים על עבודה מצוינת עבור לחצן הורדה. סמל עגלת קניות עובד נהדר עם כפתור Add-to-cart (דוגמה אמזון לעיל). זכוכית מגדלת עובד נהדר עם כפתור החיפוש. וכן הלאה.

    תוכל גם להשתמש בכמה מרכיבי מיתוג. לדוגמה, דברים כמו: סמל RSS רגיל עם כפתור מנוי-להאכיל, סמל ציפור עם כפתור מעקב על לי בטוויטר, שועל כתום עם כפתור ההורדה- Firefox, הלוגו שלך עם לקנות- my- כפתור דברים.

    הנה כמה דוגמאות:

    קוק

    Commercialiq

    Mediatemple

    Unlocking.com

    Sofasurfer.eu

    העלה

    כוח "חינם"

    עוד טריק הוא השימוש של המילה החזקה ביותר בשפה האנגלית - בחינם. בכל פעם שמשהו מתפרסם כחופשי, אנשים מתחילים לפעול בצורה לא רציונאלית (ראו ספר נהדר דן אריאלי, "The Upside של אי רציונליות" כדי לגלות למה אני מתכוון.)

    דוגמאות נוספות:

    ספרי לימוד

    וופו

    Freeagent.com

    מה הלאה?

    אם אתה סוג של בקיאים Photoshop או תוכנות דומות אחרות אתה יכול פשוט קדימה ליצור כפתור נחמד עכשיו. דרך נוספת היא להיות בעל מזל של כל נושא וורדפרס על ידי ThemeFuse, כמו שהזכרתי קודם לכן בפוסט הזה.

    מה העצה שלך על עיצוב כפתור לקנות גדול? אשמח לעדכן את הפוסט הזה עם דעותיך.