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

این مقاله توسط "نیک بابیچ" سردبیر وب سایت مرجع UXPlanet نگاشته شده است که توسط سون لرن ترجمه و منتشر شده است.

1. دکمه‌ها را نگاه کنید!

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

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

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

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

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

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

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

از طرح‌های معمول‌تر برای طراحی دکمه‌ها استفاده کنید! در اینجا چند نمونه از دکمه هایی که برای اکثر کاربران آشنا هستند درج شده است:

 

• دکمه رنگ دار چهارگوش
• دکمه رنگ دار با گوشه‌های گرد
• دکمه رنگ دار با سایه
• دکمه دور خط دار

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

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

بیشتر بخوانید: نویسنده UX کیست؟ معرفی شغل UX Writing

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

دکمه‌ها باید در مکان هایی قرار بگیرند که کاربران به راحتی می‌توانند آن را پیدا کنند یا انتظار آن را داشته باشند. اگر کاربران نتوانند یک دکمه را پیدا کنند، نمی‌دانند که آن وجود دارد یا خیر!

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

کاربران خود را درگیر بازی یافتن دکمه‌ها نکنید!

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

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

دکمه هایی با برچسب‌های عمومی یا گمراه کننده می‌توانند منشاء ناامیدی کاربران باشد. برچسب‌های دکمه را به نحوی بنویسید که به وضوح وظیفه هر دکمه ای را توضیح دهد. در حالت ایده آل، برچسب دکمه باید واضح بودن عمل آن را توصیف کند.

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

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

هرگز یک جعبه محاوره ای یا فرم را که تنها از دو دکمه «OK» و «لغو» تشکیل شده بود طراحی نکنید.

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

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

4. دکمه‌های خود را با ابعاد مناسب ایجاد کنید!

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

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

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

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

5. به نظم بپردازید

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

وظیفه رابط کاربری، گفتگو با کاربران شما است!

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

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

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

7. بازخورد بصری یا صوتی در مورد تعامل ارائه کنید!

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

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

در برخی از عملیات مانند دانلود، ارزش نه تنها تأیید ورودی کاربر بوده بلکه وضعیت فعلی روند را نیز نشان می‌دهد.

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

متشکرم!