7 قانون اساسی برای طراحی دکمه ها در UX



visibility  
mode_comment   ۰

7 قانون اساسی برای طراحی دکمه ها در UX

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

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

7 قانون اساسی برای دکمه طراحی

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

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

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

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

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

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

تصور نکنید که چیزی در رابط کاربری شما برای کاربران، آشکار است!

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

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

از طرح های معمول تر برای طراحی دکمه ها استفاده کنید!

در اینجا چند نمونه از دکمه هایی که برای اکثر کاربران آشنا هستند درج شده است:

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

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

فضای خالی را فراموش نکنید!

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

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

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

استفاده از طرح بندی های سنتی و الگوهای استاندارد UI تا آنجا که ممکن است...

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

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

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

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

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

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

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

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

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

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

طراحی دکمه

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

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

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

دکمه های اولویت بندی

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

طراحی دکمه

دکمه های انگشتی برای کاربران تلفن همراه ایجاد کنید!

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

طراحی دکمه

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

طراحی دکمه

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

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

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

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

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

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

طراحی دکمه

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

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

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

طراحی دکمه

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

طراحی دکمه

نتیجه

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

متشکرم!

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.