5 نصائح لتصميم زر الشراء الفائز

إذا كنت مصممًا أو مسوقًا عبر الإنترنت ، أو كنت تمتلك موقعًا على شبكة الإنترنت حيث تحاول بيع شيء ما ، في مرحلة ما ، يتعين عليك تصميم "زر شراء" مناسب. وبعد ذلك ، سوف تجد بسرعة أن مجرد وضع أ “اشتري الآن” لا يكفي النص على مستطيل أزرق إذا كنت تأمل في الحصول على نتائج جيدة.

لحسن الحظ ، فإن تصميم "زر شراء" مناسب ليس بالأمر الصعب بمجرد معرفة بعض المعارف الأساسية. هنا يذهب.

بادئ ذي بدء ، فإن النص على الزر الخاص بك هو الشيء الأكثر أهمية, ولكن هناك بعض الميزات الأخرى التي تحتاج إلى معالجة. لماذا أقول أن النص هو الأكثر أهمية؟ تخيل هذا - ما الهدف من وجود زر مصمم بشكل جميل إذا كان النص الموجود عليه يقول “اذهب إلى الجحيم!”? القضية مغلقة. نسخة جيدة هي المكان الذي تتم فيه الأموال.

في مقال اليوم ، نناقش 5 سمات حاسمة من "زر شراء" السليم. لنلقي نظرة!

1. النمط العام

هذه هي النقطة رقم 1 في هذه القائمة ليس بدون سبب ، لأنها السمة الأكثر أهمية.

اتريد تحويل الزر الخاص بك إلى بقرة أرجوانية. هذا مفهوم شائع من قبل سيث جودن. باختصار ، تريد أن تكون رائعة ؛ بواسطة رائع أعني شيء لا يمكن تجاهله. شيء من هذا القبيل بقرة أرجوانية في وسط المراعي.

بعض المصممين ليست جيدة بشكل خاص في هذا. من المغري إنشاء زر يرتبط بشكل جميل بألوان وأسلوب موقع الويب الذي يتواجد فيه. في البداية يبدو أنها فكرة جيدة للغاية ، لكنها ليست كذلك.

المشكلة هي أن هذا الزر أبعد ما يكون عن الملاحظ. لا تريد أن يختلط الزر الخاص بك ؛ تريد أن تبرز. لذلك ، يجب أن يتم إنشاؤه كعنصر منفصل تمامًا يحدث فقط في موقع ما ، وليس كشيء يجب أن يتوافق مع هذا الموقع..

دعني أعطيك فقط مثالاً رائعًا على زر البقرة الأرجواني.

موزيلا فايرفوكس

هذا ما تبدو عليه صفحة تنزيل Firefox. أريدك أن تلاحظ شيئًا واحدًا. الزر الموجود على اليسار ، زر التنزيل ، لا يشبه أي شيء آخر في تلك الصفحة. إنه الشيء الأخضر الوحيد. إنه المكان الوحيد الذي يقدم شعار Firefox. انها واحدة من أكبر العناصر هناك. انها تقع فوق حظيرة.

كل هذه السمات تجعل هذا الزر مرئيًا للغاية. إنها بقرة أرجوانية. إذا كنت تقول أنك لا ترى ذلك فأنت تحاول فقط إقناع شخص ما.

شيء صغير: تهدف إلى وجود زر ملحوظ.

2. المظهر

دعنا نبدء ب اللون.

إذا كنت تريد أن تكون رائعًا ، استخدم لونًا لم يستخدم في أي مكان آخر على الصفحة. تماما مثل الرجال فايرفوكس يفعلون على موقعه على الانترنت. يمكنك استخدام أداة مثل Color Scheme Designer للعثور على لون يبدو جيدًا مع نظام الألوان الحالي لموقع الويب الخاص بك ولكنه لا يزال مختلفًا.

و “مختلف” هي الكلمة الرئيسية هنا. إذا كان موقع الويب الخاص بك باللون الأزرق في الغالب ، فأنت لا تريد زر شراء أزرق. أنت لا تريد الظل الأزرق. أنت لا تريد أي شيء يبدو مزرقًا. أنت تريد اللون الوردي أو البرتقالي ، إلخ. أنا متأكد من حصولك على هذه النقطة.

خدعة واحدة أخرى. يُعرف اللون البرتقالي باللون الأكثر وضوحًا بعد اللون الأحمر مباشرةً. لكن هذا لا يثير جميع المشاعر السلبية التي تثيرها اللون الأحمر (مثل الأشياء “توقف”, “انتبه احذر خذ بالك!”, و “خطر”). يمكن العثور على الزر البرتقالي الأكثر شعبية على الإنترنت amazon.com.

الشيء التالي الذي يجب التركيز عليه هو حجم الزر. حسنًا ، ما يمكنني قوله ، يجب أن يكون كبيرًا. كلما كان ذلك أفضل. (مرة أخرى ، مثال Firefox.)

“هل يمكنني جعلها أكبر?” هو سؤال جيد لطرحه خلال مرحلة التصميم. افعلها كثيرا.

هل يجب أن تكون بسيطة أو براقة? لا يمكن أن يكون الزر مبهرجًا جدًا. انظر إلى زر Firefox مرة أخرى. انها براقة. يحتوي على ثعلب برتقالي عليه ، لكنه لا يزال يشبه الزر. وهذه حدود لا يمكنك عبورها. إذا كان الزر الخاص بك لا يبدو كأنه أحد ، فلن يقوم أحد بالنقر فوقه.

لهذا السبب لا توجد إجابة بسيطة لأي منها أفضل - براقة أو بسيطة. عليك فقط معرفة ذلك بنفسك. دائما اختبار الانقسام. إنشاء اثنين من الأزرار ، واحد براقة وواحد بسيط. استخدم كلاهما في نفس الوقت ، واعرف أيهما أفضل. سيساعدك Google Website Optimizer في ذلك.

مجرد مثال سريع على زر بسيط.

ThemeFuse

كما ترى ، لا يستخدم الزر أي ثعالب برتقالية ، لكنه لا يزال مرئيًا للغاية. في الواقع ، يوفر ThemeFuse (متجر WordPress المميز ، والذي أنا جزء منه) شيئًا ما يسمى الرموز القصيرة. من بين أشياء أخرى ، تجعل هذه الرموز المختصرة من السهل حقًا إنشاء أزرار لطيفة المظهر.

على سبيل المثال ، مع سطر واحد فقط من:

[button link = "domain.com"] انقر هنا لشراء منتجي الرائع! [/ button]

أحصل على هذه النتيجة:

3. الخط

بلا خط الرقيق هو المعيار لجميع أنواع الأزرار. ذلك لأن خطوط sans-serif قابلة للقراءة للغاية لكل استخدام عبر الإنترنت. (على الجانب الآخر ، الخطوط serif هي أفضل للمنشورات المطبوعة.)

تريد أن تكون النسخة الموجودة على الزر قابلة للقراءة قدر الإمكان ، لأنها أهم نص في الصفحة. جميع القبعات ليست فكرة جيدة. حالة مختلطة يعمل بشكل أفضل بكثير. أقصد بالحالة المختلطة أن الحرف الأول من كل كلمة هو حرف كبير. (باستثناء كلمات مثل “إلى عن على”, “ال”, “و”, إلخ.)

(مصدر الصورة: Gomediazine)

بعض الخطوط الآمنة التي يمكنك استخدامها هي: Arial أو Helvetica أو Franklin Gothic أو Myriad أو أي خطوط sans-serif الكلاسيكية الأخرى ، حقًا.

الآن ماذا عن اللون. يجب أن تكون النسخة ، بالطبع ، في تناقض كبير مع لون الزر. أنت لا تريد الرمادي على الرمادي. تريد الأسود على الأبيض ، أو الأزرق على البرتقالي.

مرة أخرى ، يجب أن يكون النص قابلاً للقراءة.

4. التنسيب

يعتمد أفضل موضع على تصميم موقع الويب الخاص بك ، وهو أمر غير مفاجئ على الأرجح. ولكن لا تزال هناك بعض القواعد تستحق الالتزام.

ضعه في المكان الأكثر وضوحا ممكن. لا تحاول أن تكون مبدعا هنا. يجب أن يكون الموضع واضحًا للعميل / المستخدم.

في كل مرة يزور فيها أحدهم موقع الويب يتوقع أن يرى أشياء معينة في أماكن معينة. أشياء مثل: الشعار في الركن العلوي الأيسر ، وملخص عربة التسوق في الركن الأيمن العلوي ، وشرط حقوق النشر في تذييل الصفحة ، وما إلى ذلك. مهمتك هي محاولة معرفة ما هو المكان الأكثر وضوحًا لزر الشراء ووضعه هناك فقط.

بالطبع ، يجب أن يكون المكان الأكثر وضوحًا في نفس الوقت. هذا يعني شيئين:

1. هذا إطلاقا يجب أن توضع فوق الطية, و
2. لا تخافوا من مسافة بيضاء. Whitespace هو صديق لكل مصمم ويب جيد. تذكر أنه لا يهم كمية الأشياء التي يمكنك وضعها على موقع ويب ، ما يهم هو مقدار الأشياء التي يمكنك إزالتها منها.

يمكنك وضع إستراتيجية وضعك على المنشطات عن طريق تكرار الزر ووضعه أيضًا في أسفل الصفحة. بهذه الطريقة ، عندما يقرأ شخص ما الصفحة بأكملها ، لا يزال بإمكانه اتخاذ إجراء في أسفلها.

5. عناصر اضافية

هذا هو الجليد على الكعكة. تعمل العناصر الإضافية على تحسين رؤية الزر الخاص بك إلى أبعد من ذلك. أمثلة للعناصر: السهام ، عربات التسوق ، النظارات المكبرة ، علامات زائد ، أو عناصر العلامة التجارية المختلفة.

المثال المفضل لدي - مثال Firefox - يستخدم عنصرًا رائعًا جدًا - الثعلب البرتقالي (ويعرف أيضًا باسم شعاره).

من قواعد التجربة هو استخدام عناصر إضافية التأكيد على الغرض من الزر. على سبيل المثال ، يعمل سهمان يشيران إلى أسفل بشكل رائع على زر التنزيل. تعمل أيقونة عربة التسوق بشكل رائع باستخدام زر الإضافة إلى العربة (مثال الأمازون أعلاه). عدسة مكبرة تعمل بشكل رائع مع زر البحث. وما إلى ذلك وهلم جرا.

يمكنك أيضًا استخدام بعض عناصر العلامات التجارية. على سبيل المثال ، أشياء مثل: رمز RSS القياسي مع زر اشتراك لتغذية ، وأيقونة طائر مع زر متابع للتغريد ، وثعلب برتقالي مع زر تنزيل فايرفوكس ، وشعارك الخاص مع شراء - my- زر الاشياء.

وهنا بعض الأمثلة:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

قوة "الحرة"

خدعة أخرى هي استخدام أقوى كلمة في اللغة الإنجليزية - مجانًا. كلما تم الإعلان عن شيء ما مجانًا ، يبدأ الناس في التصرف بطريقة غير عقلانية (راجع كتابًا رائعًا) دان اريلي, "صعود اللاعقلانية" لمعرفة ما أقصده.)

مزيد من الأمثلة:

Freshbooks

موثقة wufoo

Freeagent.com

ماذا بعد?

إذا كنت بارعًا في برنامج Photoshop أو برامج أخرى مماثلة ، فيمكنك المضي قدمًا وإنشاء زر لطيف الآن. هناك طريقة أخرى هي أن تصبح مالكًا محظوظًا لأي سمة من سمات WordPress بواسطة ThemeFuse ، كما ذكرت سابقًا في هذا المنشور.

ما هي نصيحتك في تصميم زر شراء رائع? أحب تحديث هذا المنشور بآرائك.