نحوه طراحی و ادغام دکمه ها در رابط کاربری نحوه طراحی و ادغام دکمه ها در رابط کاربری

نحوه طراحی و ادغام دکمه ها در رابط کاربری

طراحی سایت زمان مطالعه : ~ 13 دقیقه 10 آبان 1399

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

  • کاربران چگونه می فهمند عناصر یک دکمه اجرایی هستند؟
  • چه زمانی یا در چه زمینه ای باید سبک دکمه جذاب تری را انتخاب کنند؟

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

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

دکمه چیست؟

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

کاربران از کجا می دانند که با یک دکمه در تعامل هستند و چه پاسخی انتظار دارند؟

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

با توجه به قوانین طراحی، سه اصل کلیدی وجود دارد که طراحان باید هنگام قرار دادن دکمه ها در یک رابط کاربری به خاطر بسپارند:

  1. آن راقابل شناسایی کنید: دکمه ها باید نشان دهند که می توانند عملکرد خاصی را از مخاطب دریافت کنند.
  2. آن را قابلکشف کنید: یافتن دکمه ها در میان سایر اجزا و عناصر دیگر باید آسان باشد.
  3. دکمه روشن شود: دکمه باید در هنگام کلیک روشن شود.

انواع دکمه ها و زمان استفاده از آنها

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

فراخوانی برای اقدام

دکمه (Call To Action (CTA یکی از مهمترین موارد برای تسلط بر آنهاست زیرا معمولاً با اهداف کسب و کار ارتباط نزدیک دارند. CTA معمولاً کاربران را وادار می کند اقدامات مهمی مانند "ثبت نام" یا "افزودن به سبد خرید" را انجام دهند.

دکمه های اصلی

دکمه های اصلی با "CTA" اشتباه گرفته نشوند ، دکمه های اصلی یک شاخص بصری قوی هستند که به کاربر کمک می کند سفر خود را در سایت کامل کند. به عنوان مثال ، دکمه های اصلی را می توان در شرایطی که کاربر ممکن است بخواهد با دکمه "next" به مرحله بعدی برود یا در یک سایت فروشگاهی  "ادامه پرداخت" را ببیند، استفاده شود.

دکمه های ثانویه

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

دکمه های سوم

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

انتخاب برچسب دکمه

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

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

استفاده از رنگ برای برجسته شدن

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

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

قبل از ادامه کار، تفاوت بین دکمه ها و پیوندهای متنی را روشن می کنیم. دکمه ها برای اقدامات اولویت دار و پیوندهای متنی به طور معمول برای اقدامات ثانویه یا استفاده مبتنی بر ناوبری استفاده می شوند. هرگز نباید از پیوندها برای تغییر وضعیت برنامه استفاده شود.  این بدان معنی است که با کلیک بر روی پیوند ، نباید داده های صفحه اضافه ، تغییر یا حذف شوند.
اگر مطمئن نیستید که بهتر است از کدام یک استفاده کنید ، به همراه دستورالعمل اساسی، از خود بپرسید: "آیا این امر به طرز قابل توجهی بر پس زمینه وب سایت تأثیر می گذارد؟" به عنوان مثال یک پست جدید ایجاد کنید ، یک خرید را فعال کنید ، آنها را به یک پایگاه داده داخلی اضافه نمایید.
اگر پاسخ مثبت است ، برای شروع کار باید به جای پیوند متنی از یک دکمه استفاده کنید. پیوندهای متنی می توانند هنگام کمک به سایتهای خارجی یا حرکت به بخشهای دیگر برنامه ، معمولاً در متن، نقش مفیدی داشته باشند.

معرفی انواع دکمه ها

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

دکمه های شبح

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

دکمه ها را تغییر دهید

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

دکمه های عملکرد شناور

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

عناصر طراحی دکمه

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

طراحی دکمه گرد و مربع

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

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

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

چه موقع از نماد یا آیکون استفاده کنید

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

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

پر کردن فاصله دکمه ها

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

به عنوان یک قاعده کلی: فاصله مطلوب دکمه ها از 12 تا 48 پیکسل است . اما برای اینکه کمی دقیق تر باشیم ، مطالعه ای نشان داده است که 44٪ از افراد فاصله بین35/6 میلی متر یا 24 پیکسل را بین دکمه های مجاور ترجیح می دهند . برای اصول فاصله گذاری باید انواع دکمه ها را در نظر گرفت. به عنوان مثال دکمه های آیکون به فضای بسیار کمتری نیاز دارند و بنابراین از کاربردهای بالاتری برخوردار هستند ، در حالی که دکمه های برجسته می توانند ابعادی را به طرحهای مسطح اضافه کنند و باعث باز شدن فضاهای متراکم شوند.

حالت های دکمه و بازخورد

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

برخی از رایج ترین حالت های دکمه عبارتند از:

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

قرار دادن و اندازه گذاری

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

طراحی دکمه آسان است

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

صفحات مشابه

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