7 قانون اساسی در طراحی دکمه ها (Button Design)

سید علی اندرزگو 73 بازدید

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


1 . دکمه ها را شبیه دکمه طراحی کنید

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


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

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

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

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

  • دکمه پر شده با مرزهای مربع
  • دکمه پر شده با گوشه های گرد
  • دکمه پر شده با سایه ها
  • دکمه شبح مانند (نامرئی)


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

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


2 . دکمه هایی را که کاربران انتظار پیدا کردن آنها را دارند قرار دهید


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

دکمه ها را در جایی قرار ندهید که کاربران مجبور شوند به بیانی آن را شکار کنند.

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


3 . دکمه ها را برای آنچه انجام می دهند برچسب گذاری کنید

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

مشخص نیست چه چیزی "OK" و "لغو" را در این گفتگو نشان می دهد. بیشتر کاربران از خود سؤال می کنند "وقتی من روی" لغو "کلیک کنم چه اتفاقی می افتد؟

هرگز یک کادر گفتگو و فرمی که فقط از دو دکمه "OK" و "لغو" تشکیل شده باشند را طراحی نکنید.

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

"حذف" روشن می کند که چه دکمه ای را برای کاربران انجام می دهد.


یک اقدام بسیار اشتباه "کارت غیرفعال کردن" در این رابط با رنگ قرمز رنگ شده است.


4 . در طراحی اندازه دکمه ها دقت کنید


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

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


سمت چپ: دکمه به اندازه مناسب. سمت راست: دکمه ها خیلی کوچک هستند.


مطالعه آزمایشگاه لمسی MIT نشان داد که میانگین برای لنت های انگشت بین 10-14 میلی متر و نوک انگشتان 8-10 میلی متر است. این باعث می شود 10 x 10 میلی متر حداقل هدف لمسی حداقل باشد.



5 . نظم را در طراحی نظر بگیرید

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

رابط کاربری گفتگو با کاربران شما است

به عنوان مثال، چگونه دکمه های "قبلی / بعدی" را در صفحه بندی سفارش دهید؟ منطقی است که یک دکمه که شما را به جلو سوق می دهد باید در سمت راست باشد و یک دکمه که شما را به سمت عقب سوق می دهد باید در سمت چپ باشد.


6 . بیش از حد از دکمه ها استفاده نکنید

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


7 . ارائه بازخورد بصری یا صوتی

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

چرا این اتفاق می افتد؟ ما به عنوان انسان انتظار داریم پس از تعامل با یک شیء، بازخوردی از آن شئ داشته باشیم. این بازخورد ممکن است بصری، صوتی یا لمسی باشد. هر چیزی که واقعیت ثبت کلیک را تصدیق می کند.
برای برخی از عملیات ها مانند دانلود بهتر است علاوه برثبت کلیک و ضربه کاربر، وضعیت فعلی روند دانلود نیز نشان داده شود.


نتیجه


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


امنیت وب سایت (Website security)

نظرات

برای ارسال نظر در سیستم ابتدا وارد شوید.

هنوز نظری برای این مطلب ثبت نشده است.