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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دکمه Uploadify