طراحی دکمه

با بهره گیری از چه شیوه هایی می توان دکمه های بهتری طراحی کرد؟ - بخش دوم

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

استفاده از برچسب های مناسب و گویا برای دکمه ها

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

برچسب های واضح و متمایز

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

طراحی دکمه

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

طراحی دکمه

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

کاربر نباید به دنبال دکمه ها بگردد، از این رو لازم است دکمه ها را جایی بگذارید که به راحتی پیدا شده و یا جایی باشند که کاربر انتظار دارد مشاهده کند.

مکان و ترتیب

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

طراحی دکمه

در اپلیکیشن های مبتنی بر وب، جایگذاری عناصر باید به گونه ای باشد که بهترین نتیجه را برای کاربران حاصل کند که برای این کار، تست به کمک شما خواهد آمد.

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

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

اندازه و واکنش بصری دکمه ها برای تعامل بهتر و آسان تر به کاربر کمک می کند.

اندازه و پدینگ

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

طراحی دکمه

چنانچه ضربه زدن، متد ورودی اولیه برای اپلیکیشن یا وب سایت شماست، از مطالعات MIT Touch Lab در انتخاب مناسب ترین اندازه برای دکمه ها استفاده کنید. بر اساس یافته های این مطالعه، اندازه متوسط برای انگشت 10-14 میلمیتر و نوک انگشت 8-10 میلیمتر است، از این رو استفاده از اندازه 10*10 مناسب می باشد. در شرایطی که ماوس متد ورودی اولیه باشد، اندازه دکمه ها برای جا گرفتن در رابط های کاربری متراکم تر، کمی کاهش پیدا خواهد کرد.

طراحی دکمه

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

طراحی دکمه

در اختیار قرار دادن واکنش بصری

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

طراحی دکمه

طراحی دکمه

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

 

https://www.smashingmagazine.com برگرفته از

اینها را هم بخوانید