چهار نکته که در طراحی دکمه خرید باید به آن توجه کرد

اگر شما طراح، بازاریاب آنلاین و یا صاحب یک فروشگاه آنلاین هستید باید به طراحی دکمه خرید خود توجه زیادی داشته باشید


علی اقدم 12 دیدگاه اصول طراحی وب سایت , تبلیغات و بازاریابی Tuesday, 5th June , 2012 49493 بازدید

طراحی دکمه خرید

اگر شما طراح، بازاریاب آنلاین و یا صاحب یک فروشگاه آنلاین هستید و می خواهید در سایت خود فروش داشته باشید می بایست به طراحی دکمه خرید خود توجه زیادی داشته باشید. اگر به دنبال نتیجه خوبی هستید قرار دادن یک دکمه آبی کافی نیست!!

طراحی دکمه خرید

طراحی یک دکمه خوب به آن سختی ها هم که فکر می کنید نیست و اگر در طراحی و ایجاد آن به چهار نکته ای که در ادامه بررسی می کنیم توجه داشته باشید حتما می توانید بهترین نتیجه را از این دکمه داشته باشید.

در ابتدا باید توجه کرد که متن روی دکمه از اهمیت خیلی زیادی برخوردار است ولی در اینجا بر روی طراحی دکمه فوکوس می کنیم چون متن این دکمه نسبت به نوع سایت متفاوت است و در خیلی از موارد با یک خلاقیت کوچک در متن می توان تاثیر این دکمه ها را چندین برابر کرد. نحوه انتخاب و یا تولید مناسب ترین متن را در مطلب دیگری در آینده بررسی خواهیم کرد.

1 – طراحی کلی وب سایت

شما می بایست دکمه خود را تبدیل به یک گاو بنفش بکنید!! مفهوم گاو بنفش توسط آقای Seth Godin معروف شد. به صورت کلی دکمه شما باید قابلیت به یادآوری را داشته باشد. منظور از به یادآوری نوعی دکمه است که شما یا جایی دیگر آن را ندیده باشید و یا اینکه باد دیدن نمونه ای مشابه کاربر به یاد وب سایت شما بیفتد و همچنین در داخل سایت طوری باشد که بتوان موقعیت آن را سریع به یاد اورد. چیزی شبیه یک گاو صورتی در وسط یک مرتع!!!

بعضی از طراح ها در طراحی این قسمت توجه نمی کنند. آنها معمولا از رنگ ها و استایل کلی سایت برای طراحی این دکمه استفاده می کنند (مانند آنچه در تصویر قبلی مشخص است) اما به این نکته توجه نمی کنند که دکمه می بایست به صورت کاملا جداگانه طراحی شود و نه طوری که با سایر قسمت های سایت هماهنگی داشته باشد. برای نمونه به تصویر زیر دقت کنید که چطور یک گاو صورتی را به خوبی نشان می دهد.

طراحی دکمه خرید

تصویر بالا مربوط به صفحه دانلود فایرفاکس است. اگر در این تصویر یک چیز توجه شما را جلب کند دکمه سبز خواهد بود. این دکمه شبیه هیچ چیز دیگری در سایت نیست. این دکمه تنها چیز سبز در سایت است و تنها جایی است که لوگوی فایر فاکس را نشان می دهد و تقریبا بزرگترین المنت روی سایت است.

نمونه خوب دیگر را می توان دکمه خرید فروشگاه ورچین دانست.

طراحی دکمه خرید

ورچین را می توان یکی از فروشگاه های فارسی دانست که دارای طراحی قابل قبولی است. دکمه خرید این سایت از دیگر قسمت ها کاملا متمایز است و تنها رنگ سبز در صفحه یک محصول است و اندازه نسبتا بزرگی دارد که توجه کاربر را به خود جلب می کند. هر دو این دکمه ها نمونه بارز گاو بنفش بودند.

2 – ظاهر دکمه خرید

اگر می خواهید دکمه شما قابلیت یادآوری را داشته باشد از رنگی استفاده کنید که هیچ جای دیگری از سایت از آن استفاده نشده باشد همانند ورچین و فایرفاکس.

برای پیدا کردن رنگی که با رنگ های فعلی سایت به خوبی نمایش داده شود می توانید از ابزارهای همانند Color Schema Designer استفاده کنید. اگر رنگ سایت شما آبی است به یک رنگ آبی نیاز ندارید (دوباره به تصویر اول دقت کنید) بلکه شما به رنگی همانند صورتی و پرتغالی و… نیاز دارید. در تصویر زیر این اهمیت به خوبی نشان داده شده.

طراحی دکمه خرید

رنگ پرتغالی بعد از قرمز رنگی است که بیشترین توجه را به خود جلب می کند ولی این رنگ همانند قرمز عمل نمی کند یعنی احساس های همچون «از حرکت ایستادن» و «خطر» را در کاربر ایجاد نمی کند. معروف ترین دکمه خرید پرتغالی مربوط به آمازونست.

طراحی دکمه خرید

نکته دیگر مربوط به سایز دکمه است. این دکمه ها می بایست بزرگ باشند. به عنوان مثال دکمه خرید زیر را با دکمه خرید ورچین مقایسه کنید.

طراحی دکمه خرید

دکمه سایت ساده باشد یا زرق و برق دار؟

یک دکمه نباید خیلی زیاد زرق و برق داشته باشد. دکمه فایرفاکس دارای ذرق و برق است. یک لوگوی فایرفاکس روی آن است اما همچنان ماهیت اصلی دکمه بودن را در خود حفظ کرده.

برای این سوال جواب مشخصی وجود ندارد و بسته به نوع و طراحی سایت متفاوت است. اما توصیه من طراحی دو نوع طراحی برای این دکمه است. یکی به صورت ساده و دیگری به صورت ذرق و برق دار و تست آنها جهت مشاهده کارایی هر یک در سایت. برای تست آن هم می توانید از ابزارهای همچون Google Website Optimizer استفاده کرد.

3 – موقعیت دکمه خرید

موقعیت دکمه خرید برای انواع سایت ها متفاوت است. این نکته وجود دارد که شما نباید در این قسمت خلاقیت به خرج دهید!!!

همیشه برای کاربر تعاریفی از المان های مختلف سایت ها را برای خود دارد برای مثال لوگو، متن کپی رایت و… که شما نباید این تعاریف کاربر را در سایت خود از بین ببرید. برای دکمه خرید محصولات فیزیکی دکمه خرید می بایست در کنار تصویر محصول باشد و برای محصولات نرم افزاری و فایلی که دارای توضیحات هستند دکمه خرید در انتهای صفحه نتیجه بهتری می دهد. البته این نکات امکان دارد در سایت های مختلف نتیجه های متفاوتی داشته باشد ولی چیزی که تجربه نشان می دهد این است که معمولا جایی دکمه را باید آنقدر تغییر داده و نتیجه ها را مقایسه کنید تا بتوانید بهترین موقعیت را به دست آورید.

4 – استفاده از المان های مختلف

استفاده از المان های مختلف بر روی دکمه می تواند به دیده شدن آن کمک زیادی بکند. المان های همانند فلش ها، کارت و سبد خرید، ذره بین ها، و دیگر المان های برندی. بهترین مثال که می توان برای استفاده خوب از این المان ها  مثال زد باز هم همان دکمه دانلود فایرفاکس است که از لوگو خود به صورت خلاقانه استفاده کرده است.

در اینجا تعدادی از استفاده های درست از این المان ها را آورده ایم.

دکمه خرید دیجی کالا

طراحی دکمه خرید

دکمه دانلود psd.irTuts

طراحی دکمه خرید

دکمه Uploadify

طراحی دکمه خرید



نویسنده / مترجم : علی اقدم

علی اقدم، طراح و برنامه نویس وب ، موسس irTuts.com ، علاقه مند به آموزش، بازاریابی و کارآفرینی


12 دیدگاه برای این نوشته ثبت شده است


  1. مهدخت
    6 June 2012

    نکته مفیدی بود .




  2. میترا
    7 June 2012

    متشکرم.




  3. Sirwan Afifi
    8 June 2012

    عالی بود
    ممنون




  4. حامد
    2 August 2012

    فوق العاده لذت بردم از مطلب مفیدت.ممنون علی جان
    از ادمین زحمتکش وب تارگت هم تشکر میکنم.




  5. hesam
    26 August 2012

    عالی بود




  6. mozhdeh
    28 September 2012

    aali bood.kheili be man angizeh dad. kheili delsoozane bood, mamnoonam




  7. مری
    6 November 2012

    عااااااااااااالی بود ممنون




  8. شکوفه
    1 March 2013

    عالی بود.ممنون از سایت پربارتان



  9. وقتی انتخاب یک کلید خرید اینهمه جزئیات تخصصی دارد، بپذیریم که ایجاد وب سایت هم کاری است بسیار تخصصی و نیاز دارد به کار ان واگذار شود، بسیاری از سایتها فقط به دلیل عدم رعایت یک نکته کوچک با شکست مواجه می شوند
    فراموش نکنیم رشد هر سازمان در حد بزرگترین ضعف آن سازمان است




  10. علی حاجیلویی
    14 December 2013

    مطلب خیلی خوبی بود…
    سپاس از شما



  11. جالب بود




  12. سبحانی
    5 December 2019

    بسیار عالی و خوب ممنونم



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.