قوانین طراحی دکمه در یوایکس ux
articles

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

طراحی دکمه

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

دکمه ها را واقعاً شبیه دکمه بسازید.

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

 

اما کاربران چطور باید متوجه شوند که یک عنصر، تعاملی هست یا نه؟

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

از طراحی های آشنا برای دکمه ها استفاده کنید

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

  • دکمه های پُر با گوشه های مربعی
  • دکمه های پر با گوشه های گرد شده
  • دکمه های پر سایه دار
  • دکمه بی رنگ (اصطلاحا شبحی)

 

 

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

 

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

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

 

دکمه ها را دقیقا با کاری که انجام می دهند برچسب بزنید.

دکمه هایی با برچسب های کلی یا نادرست می تواند یک منبع عظیم ناامیدی برای کاربران تان باشد. برچسب هایی را برای دکمه ها بنویسید که دقیقا شرحِ همان کاری باشد که انجام می دهند. به طور ایده آل، برچسب یک دکمه باید بطور واضح عملِ آن دکمه را توضیح دهد.

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

 

 

در این مثال، اصلا مشخص نیست که هر یک از گزینه های cancel و ok  دقیقا چه کاری انجام می دهند. با دیدن این پیام، بسیاری از کاربران از خود خواهند پرسید که اگر دکمه ی cancel را بزنم چه اتفاقی خواهد افتاد؟!

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

 

 

اندازه و سایز دکمه ها را به درستی انتخاب کنید.

اندازه ی دکمه باید اولویتِ این عنصر را در روی آن صفحه بازگو کند. دکمه های بزرگ یعنی اقدامات خیلی مهم تر!

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

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

برای کاربران موبایل، دکمه ها را فرندلی کنید. در بسیاری از اپلیکیشن های موبایل، دکمه ها خیلی کوچک اند. این معمولاً باعث اشتباه تایپ کردن کاربر می شود.

 

 

مطالعه ی MIT Touch lab دریافته است که میانگین برای پدهای انگشتی بین 10 تا 14 میلی متر و نوک انگشتان 8 تا 10 میلی متر می باشد. پس به نظر می رسد که یک دکمه ی لمسی 10 در 10 میلی متری گزینه ی خوبی باشد.

 

ترتیب را رعایت کنید.

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

تعامل کاربری یک مکالمه ست که با کاربرِ خود ایجاد کرده اید.

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

 

 

از بکار بردن دکمه های زیاد خودداری کنید.

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

 

فیدبک صوتی یا بصری روی تعامل فراهم کنید.

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

می پرسید چرا این اتفاق می افتد؟

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

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

 

 

 

نتیجه

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

دکمه ها در UX همیشه باید همسو با وضوحِ کامل و شفافیت همراه باشند.

 

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

لینک کوتاه https://thebestseois.com/?p=7

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

28 − = 21