شما اینجا هستید: خانه » آموزش طراحی » ۷ قانون طلایی برای طراحی دکمه های پلتفرم

۷ قانون طلایی برای طراحی دکمه های پلتفرم

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

۱-دکمه ها باید کاملا به شکل دکمه طراحی شوند

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

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

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

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

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

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

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

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

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

 فضاهای خالی را در نظر بگیرید

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

۲- دکمه های در موقعیت هایی قرار دهید که کاربران انتظار آن را دارند

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

۳-دکمه ها را با توجه به عملکردی که دارند برچسب گذاری کنید

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

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

 ۴-در طراحی دکمه ها سایز استاندارد در نظر بگیرید

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

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

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

 

سایز استاندارد طراحی

 

برای کاربرانی که با گوشی از پلتفرم استفاده میکنند سایز متناسب با انگشتان کاربران در نظر بگیرید

در بسیاری از برنامه های موبایل، دکمه ها بسیار کوچک هستند. این اغلب منجر به وضعیتی میشود که کاربران از آن غفلت کنند.مطالعات MIT Touch Lab نشان میدهد که میانگین اندازه برای پد انگشتان بین ۱۰-۱۴ میلی متر و نوک انگشتان ۸ تا ۱۰ میلی متر است.و این باعث می شود ۱۰mm x 10mm حداقل اندازه هدف لمسی خوب باشد.

 

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

۵-از به کار گیری تعداد دکمه زیاد خودداری کنید

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

 

دکمه های تعاملی

 

۶- بازخورد بصری یا صوتی در مورد تعامل کاربر به هر دکمه ارائه کنید

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.