تخفیف ویژه

ایجاد حسی بهتر با گوشه های گرد دکمه ها

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۲۸ آذر ۱۳۹۷

ایجاد حسی بهتر با گوشه‌های گرد دکمه ها

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

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

متغیرهایی برای افزایش قابلیت کشف شدن دکمه ها

آیا گوشه‌های گرد قابل تشخیص است؟

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

گوشه‌های گرد بیشتر از گوشه‌های تیز قابل تشخیص هستند!

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

در چیدمان شبکه، گوشه‌های گرد از همه حالات بهتر دیده می‌شوند.

برای مثال، در داشبورد سایت TurboTax، قسمت بالایی که از کادر‌های لبه گرد استفاده شده است، بسیار جذاب‌تر از بخش وسطی است که از کادر‌های با لبه تیز استفاده شده است.

داشبورد توربوکس

آیا باید دکمه‌های کاملا گرد را استفاده کنیم؟

دکمه‌های کاملا گرد شده در رابط‌های کاربری که دارای فضای مناسبی هستند، بسیار عالی هستند. در اپلیکیشن موبایل و وب سایت Spotify، قرار دادن دکمه‌های سبز به طور کامل گرد شده، در هدایت توجه کاربران بر روی دکمه‌های تماس بسیار موفق بوده است.

دکمه‌های گرد در برنامه‌های Spotify

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

رابط تعاملی "پخش" در Spotify

هنگامی که دکمه‌ها به طور کامل گرد می‌شوند کار نمی‌کنند!

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

1. دکمه‌های کاملا گرد همانند برچسب‌ها (تگ ها) دیده می‌شوند.

هنگامی که کاربران با دقت به دکمه‌های کاملا گرد نگاه می‌کنند، گیج می‌شوند که آیا آن می‌تواند یک دکمه باشد یا تگ است! و این سوال برای آنها ایجاد می‌شود: "آیا می‌توانم بر روی یک دکمه یا یک برچسب کلیک کنم؟"

دکمه‌ها یا برچسب‌های گرد؟

2. دکمه‌های کاملا گرد در نمایش گزینه‌های تو در تو موفق نیستند.

یک دکمه کاملا گرد شده معمولا شامل آیکونی برای نشان دادن گزینه‌های تو در تو است. محدوده لمسی موثر برای ایجاد گزینه‌های تو در تو، در اندازه آیکون (16x16 یا 24x24 پیکسل) می‌باشد.

شاید کافی باشد؟ این یک منطقه کوچک است که باید روی آن کلیک کنید.

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

کمپانی اپل در طراحی رابط کاربری نرم افزار‌های خود، از دکمه‌های نیمه گرد به عنوان دکمه‌های عمل کننده (دکمه‌های فشار داده شونده) استفاده می‌کند و دکمه‌های کاملا گرد شده را به صورت خاص برای " راهنما " یا ارائه گزینه‌های متقابل منحصر به فرد ( دکمه‌های رادیویی ) به کار می‌گیرد.

تصویری از دستورالعمل رابط کاربری اپل

3. دکمه‌های کاملا گرد شده برای انباشته شدن نیستند.

هنگامی که ما دکمه‌های کاملا گرد را در جداول و کادر‌ها قرار می‌دهیم، آنها نامناسب دیده می‌شوند. بگذارید بگوییم اگر ما یک جدول داده ای داریم که دارای 10 ردیف است و در هر ردیف یک دکمه وجود دارد، ما با داشتن 10 دکمه کاملا گرد، این مفهوم را به کاربر می‌رسانیم، که همه آنها دکمه هایی عملیاتی هستند.

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

از دکمه‌های بدون دورخط برای طرح بندی انبوه استفاده کنید

زیبایی شناسی گوشه‌های گرد

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

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

نوار جستجوی جدید Chrome

دکمه‌های دیگر موجود در نوار ابزار با حالت دایره ای هماهنگ شده اند. اشکال گرد در سایر برنامه‌های به روز شده گوگل مانند تقویم، جیمیل و درایو، به آسانی قابل مشاهده هستند.

خلاصه

طراحی رابط کاربری دکمه ها، به شکل لبه گرد یا لبه تیز، نه صحیح است و نه غلط!

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

در اصل، کلیک نکردن باعث پیروز نشدن است!


منابع و مآخذ:

مقاله (از فرم‌های گرد در طراحی مواد استفاده کنید)

مقاله (ویژگی‌های گوشه‌های گرد)

مقاله (چرا گوشه‌های گرد در چشم‌ها آسان‌تر است)


اگر شما این پست را دوست دارید، آن را با دوستانتان به اشتراک بگذارید! تشکر برای خواندن!

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

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

نظرات کاربران

حمیدرضا اکبرنژاد

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

hojat

مقاله جالب و مفیدی بود.

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :