انواع دکمه های وب سایت

هدف از طراحی وب سایت و ایجاد یک پایگاه اینترنتی صرفا فروش محصول یا ارائه خدمات نیست، بلکه هدف اصلی ایجاد یک تعامل دو طرفه با مخاطب و مشتری می باشد، این تعامل است که باعث خرید مشتری و استفاده از خدمات یک سایت می شود.

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

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

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

دکمه ها در طراحی وب سایت

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

در تعریف کلی، دکمه یک المان تعاملی است که با دستور العملی که برای آن تعریف شده است، بازخورد تعاملی مورد انتظار را از سیستم دریافت می کند. در واقع دکمه در یک سایت وظیفه برقراری ارتباط مشتری با سایت را ایفا می کند. وقتی کاربر بر روی یک دکمه کلیک می کند در اصل یک دستور برای رسیدن به هدف خاص را به سیستم ارسال می کند.

به عنوان مثال کلیک کردن روی دکمه پخش ویدئو در یک سایت باعث ارسال دستور پلی آن ویدئو به سیستم و نمایش آن به مخاطب می شود. دکمه ها برای کاربرد های متنوعی در سایت طراحی می شوند اما اصلی ترین کار آنها تقلید تعامل با اشیا در دنیای واقعی است.

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

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

انواع دکمه در سایت

به یاد داشته باشید که عملکرد دکمه ها در سایت بر اساس ظاهری که دارند تعیین نمی شود بلکه با نحوه استفاده ای که دارند تعیین می گردد، البته بهتر است کاربران معنی دکمه ها با استایلی که دارند را درک کنند.

دکمه دعوت به اقدام CTA Button

CTA: Call To Action یا دعوت به عمل در سایت ها یکی از مهمترین عناصر بازاریابی اینترنتی هستند. دکمه CTA معمولا کاربران را برای خرید، ثبت نام در سایت، ثبت اطلاعات و هر هدف دیگری ترغیب می کند. در واقع اگر از کاربر و مخاطب خود خواسته ای دارید می توانید آن را به صورت دکمه دعوت به اقدام طراحی کنید.

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

دکمه متنی Text Button

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

دکمه کشویی Dropdown Button

از دکمه کشویی معمولا در همه وب سایت ها استفاده می شود، دکمه کشویی به این صورت است که با کلیک کاربر، جزئیات بیشتری را به وی نمایش می دهد و کاربر می تواند روی هر کدام از آن جزئیات نیز کلیک کند.

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

دکمه همبرگر Hamburger button

پیش تر در مورد منوی همبرگری و استفاده آن در نسخه موبایلی سایت، نکته های زیادی گفته شده است. Hamburger button نیز مانند منوی همبرگری است و می توان گفت تفاوتی با هم ندارند. ظاهر و شکل این دکمه از سه خط افقی شبیه به همبرگر تشکیل شده است که با کلیک روی آن یک لیست نمایش داده می شود. دکمه همبرگری یک عنصر تعاملی پر کاربرد در طرح ‌بندی وب و نسخه موبایلی سایت است.

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

دکمه پلاس Plus Button

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

دکمه اشتراک گذاری Share Button

یکی از معروف ترین دکمه ها که در اغلب وب سایت ها از آن استفاده می شود، دکمه اشتراک گذاری می باشد. از این نوع دکمه معمولا برای اشتراک گذاری محتوا در شبکه های اجتماعی و یا ارسال ایمیل استفاده می شود و کاربر با کلیک روی آن می تواند محتوای مورد نظر را مستقیما به نمایه خود اضافه نماید.

برای طراحی دکمه Share باید از آیکون شبکه اجتماعی مورد نظر مانند اینستاگرام، توییتر و … استفاده شود.

دکمه شفاف Ghost Button

نوع دیگری از دکمه، دکمه هایی هستند که ظاهری شفاف دارند و روی آنها یک متن نوشته شده است. به دور حاشیه این نوع دکمه شفاف که تو خالی است معمولا برای تمایز با سایر عناصر طراحی، یک خط نازک مشکی کشیده شده است. به بیانی ساده تر یک دکمه به شکل بیضی یا هر شکل دیگری که شفاف و تو خالی می باشد به همین دلیل به این نوع دکمه، Line button یا دکمه خط نیز گفته می شود.

از دکمه Ghost Button بیشتر برای طرح های مختلف دکمه CTA استفاده می شود. به عنوان مثال برای sign up کردن از چند آدرس (ایمیل، فیس بوک) از این دکمه استفاده می گردد.

دکمه حرکت شناور Floating Action Button

در طراحی Floating Action Button (FAB) دکمه ای است که حرکت اصلی در صفحه را نمایش می دهد. معمولا این دکمه از یک آیکون گرد ساخته شده که در بالاترین قسمت محتوای صفحه قرار می گیرد. از این دکمه معمولا برای اقدامات مهم و یا مورد علاقه کاربران در سایت استفاده می شود که به آنها امکان دسترسی فوری را می دهد.

انجام یک عمل اصلی در سایت و یا یک عمل معمولی مانند باز کردن ایمیل، بازکردن صفحه برای افزودن یک عکس و …، نشان دادن اقدامات اضافی و … را می توان با استفاده از این دکمه در سایت میسر نمود. دکمه‌ های اکشن شناور یک الگوی طراحی هوشمندانه هستند که توسط متریال دیزاین گوگل محبوب شده‌اند.

فاکتور های مهم در طراحی دکمه های وب سایت

حال که با انواع دکمه در سایت آشنا شدید، باید موارد مهمی را در طراحی انواع دکمه بدانید که این موارد عبارتند از:

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

اندازه مناسب دکمه در سایت

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

برای اندازه دکمه ها، ساختار ه و الگو های مختلفی معرفی شده است، این نکته را در نظر بگیرید که اندازه دکمه ها در نسخه موبایلی باید متناسب با اندازه صفحه نمایش باشد و همچنین در نسخه دسکتاپ سایت نیز این نکته باید رعایت شود.

رنگ انتخابی دکمه ها

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

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

شکل مناسب برای دکمه ها

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

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

جایگاه دکمه ها در صفحه

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

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

متن روی دکمه

برخی از دکمه ها ممکن است دارای متن برای راهنمایی بیشتر کاربران باشند، به عنوان مثال دکمه افزودن، کپی کردن و … که برای کمک بیشتر به کاربران طراحی می شوند. متن این نوع دکمه ها باید با فونتی خوانا و ترجیحا مشابه با فونت اصلی سایت در نظر گرفته شود.

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

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