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

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

در فروشگاه‌های اینترنتی، طراحی دکمه‌ها حتی می‌تواند به افزایش نرخ تبدیل (CTR) کمک کند. به هر حال، کاربر نمی‌تواند فرایند خرید را تا پایان طی کند یا فرم ثبت‌نام را تکمیل کند، مگر اینکه در طول مسیر روی دست‌کم یک دکمه کلیک کند.

دکمه‌ها در بخش‌های مختلف رابط کاربری سایت، اقداماتی را که کاربر می‌تواند انجام دهد به او نشان می‌دهند؛ از فرم‌ها گرفته تا نوار ابزارها و سایر بخش‌های تعاملی. وقتی کاربر می‌خواهد کاری مثل «ارسال فرم»، «ساخت حساب کاربری» یا «عضویت» را انجام دهد، معمولاً برای انجام آن روی یک دکمه کلیک می‌کند.

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

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

اصول پایه در طراحی دکمه سایت

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

دکمه‌ها کاربران را در مسیر انجام یک کار به سمت مرحله بعد هدایت می‌کنند؛ برای مثال، از یک مرحله به مرحله بعدی در فرایند خرید یا از تکمیل فرم به ساخت حساب کاربری. یک دکمه با طراحی مناسب، یک فراخوان به اقدام (CTA) واضح در اختیار کاربر قرار می‌دهد و او را به انجام یک کار مشخص دعوت می‌کند. در نتیجه، مسیر ادامه کار برای کاربر روشن‌تر و قابل‌پیش‌بینی‌تر خواهد بود.

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

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

در ادامه، با چند مورد از اصول و اجزای اساسی یک دکمه مؤثر آشنا می‌شویم و بررسی می‌کنیم که هرکدام چگونه می‌توانند به ایجاد تجربه‌ای ساده‌تر و روان‌تر برای کاربر کمک کنند.

اندازه دکمه

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

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

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

برای طراحی دکمه‌ها، بهتر است ناحیه قابل لمس آن‌ها حداقل حدود ۴۴ × ۴۴ پیکسل باشد. این اندازه کمک می‌کند کاربران بتوانند دکمه را راحت‌تر لمس کنند و هنگام تعامل با رابط کاربری، کمتر دچار خطا شوند.

رنگ دکمه

استایل دکمه‌ها، از جمله رنگ آن‌ها، می‌تواند تأثیر زیادی بر نرخ تبدیل داشته باشد؛ اما هنگام طراحی دکمه در رابط کاربری، هیچ رنگ «ایده‌آلی» وجود ندارد که بتوان گفت همیشه بهترین انتخاب است.

بهتر است رنگ را به‌عنوان یک نشانه بصری مهم در نظر بگیرید؛ نشانه‌ای که کمک می‌کند دکمه اصلی از سایر دکمه‌های موجود در صفحه متمایز شود و توجه کاربر را به خود جلب کند.

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

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

هدف و کاربرد دکمه

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

باید به‌روشنی به کاربر نشان دهید که پس از کلیک یا لمس یک دکمه چه اتفاقی خواهد افتاد. به این ترتیب، کاربرد دکمه از همان ابتدا برای کاربر مشخص است. برای مثال، دکمه «دانلود» در یک صفحه فرود باید کاربر را به دریافت یک فایل یا محتوای رایگان هدایت کند.

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

تعداد دکمه‌ها

ممکن است قرار دادن تعداد زیادی دکمه در رابط کاربری در نگاه اول ایده خوبی به نظر برسد، اما وقتی کاربران را با گزینه‌های بیش از حد مواجه می‌کنید، نتیجه می‌تواند کاملاً برعکس شود.

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

در طراحی دکمه سایت، هدف این نیست که همه گزینه‌های ممکن را هم‌زمان در برابر کاربر قرار دهید؛ بلکه باید با اولویت‌بندی درست، مسیر انجام کار را برای او ساده‌تر کنید.

وضعیت‌های مختلف دکمه

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

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

در ادامه، ۶ وضعیت رایج در طراحی دکمه سایت را بررسی می‌کنیم:

۱. حالت عادی (Normal)

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

۲. حالت فوکوس (Focus)

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

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

۳. حالت هاور (Hover)

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

۴. حالت فعال (Active)

حالت فعال زمانی نمایش داده می‌شود که کاربر روی یک دکمه کلیک یا آن را لمس می‌کند. این حالت نشان می‌دهد که تعامل کاربر با دکمه ثبت شده و ممکن است ظاهری شبیه به یک دکمه فشرده‌شده داشته باشد.

۵. حالت پیشرفت یا بارگذاری (Progress/Loading)

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

برای مثال، پس از کلیک روی دکمه «پرداخت» یا «ارسال فرم»، می‌توان دکمه را به حالت بارگذاری برد تا کاربر بداند درخواست او در حال پردازش است و نیازی به کلیک دوباره ندارد.

۶. حالت غیرفعال (Disabled)

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

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

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

راهنمای طراحی تجربه کاربری دکمه‌ها در فروشگاه‌های اینترنتی

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

۱. آیا دکمه اصلی، سفارش را نهایی می‌کند؟ 

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

این موضوع به‌خصوص در مرحله پرداخت اهمیت بیشتری پیدا می‌کند؛ یعنی زمانی که کاربر اطلاعات کارت بانکی یا سایر اطلاعات پرداخت خود را وارد کرده و نسبت به کلیک روی دکمه‌های اصلی با احتیاط بیشتری عمل می‌کند.

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

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

برای مثال، متن‌هایی مانند «ثبت سفارش و پرداخت» یا «ادامه به مرحله بررسی سفارش» بسیار واضح‌تر از عبارت‌های کلی و مبهمی مثل «ادامه» هستند.

۲. اعمال خودکار تغییرات در فرایند پرداخت

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

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

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

نکته: این توصیه درباره تغییراتی که کاربر در بخش حساب کاربری سایت انجام می‌دهد، صدق نمی‌کند. برای مثال، وقتی کاربر آدرس خود را ویرایش می‌کند، بهتر است از یک دکمه «اعمال تغییرات» یا «ذخیره» استفاده شود. در چنین شرایطی، کلیک روی دکمه به کاربر اطمینان می‌دهد که تغییراتش با موفقیت در سایت ثبت شده‌اند.

۳. دکمه جست‌وجو را کنار فیلد جست‌وجو قرار دهید 

کاربران در موبایل معمولاً به سه روش می‌توانند عبارت جست‌وجوی خود را ثبت کنند:

• لمس دکمه جست‌وجویی که سایت در رابط کاربری و در کنار فیلد جست‌وجو قرار داده است.
• استفاده از دکمه جست‌وجو یا تأیید در کیبورد لمسی گوشی که توسط سیستم‌عامل موبایل ارائه می‌شود.
• انتخاب یکی از کلمات یا عبارت‌های پیشنهادی در بخش تکمیل خودکار.

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

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

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

۴. استفاده از دکمه «اعمال» چسبان در فیلتر موبایل 

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

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

همچنین، راهی برای خروج از رابط فیلتر بدون اعمال تغییرات در نظر بگیرید؛ برای مثال، یک دکمه «انصراف» یا «بستن» که به کاربر اجازه دهد بدون ذخیره فیلترهای انتخاب‌شده از این بخش خارج شود.

بهبود تجربه کاربری را از طراحی دکمه‌ها شروع کنید

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

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

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

منبع: Baymard

سوالات متداول