آموزش طراحی تجربه‌ی کاربری؛ قسمت دهم: طراحی دکمه‌ها

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

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

بااین‌حال، کاربران چگونه می‌فهمند یک عنصر UI، دکمه است؟ چگونه می‌توانید کلیک‌کردن کاربران روی دکمه‌ها را ساده‌تر کنید؟ در این مطلب، می‌خواهیم انواع دکمه‌های رایج را معرفی و بهترین راهکارهایی را بررسی کنیم که کاربران را مرتب و مؤثر در وب‌سایت نگه می‌دارند.

designing UX buttons

دکمه‌های متداول UX

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

دکمه‌های متنی

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

Text buttons

دکمه‌های نامرئی

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

Ghost buttons

دکمه‌های برجسته

دکمه‌های برجسته (Raised Buttons) که گاهی دکمه‌های «حاوی» نیز نامیده می‌شوند، معمولا دکمه‌های مستطیلی هستند که با بهره‌گیری از «سایه» از سطح اسکرین بالاتر به‌نظر می‌رسند. سایه‌ای که زیر دکمه طراحی می‌شود، به کاربر نشان می‌دهد می‌تواند دکمه را فشار دهد یا روی آن کلیک کند. دکمه‌های برجسته به صفحه‌ی مسطح ابعاد بیشتری می‌بخشند و اگر صفحه شلوغ یا وسیع باشد، عملکرد مدنظر را هایلایت می‌کنند.

نکته: زمانی‌که کاربر روی دکمه‌های برجسته کلیک می‌کند، رنگ دکمه تغییر می‌کند.

Raised buttons

دکمه‌های تاگل

دکمه‌های تاگل (Toggle Buttons) معمولا در دو زمینه به‌کار می‌روند:

  •  برای گروه‌بندی گزینه‌های مرتبط: در این حالت، فقط یک گزینه از دکمه‌های تاگل می‌تواند در آن‌ِ واحد انتخاب و فعال شود. به‌عبارتِ‌دیگر، انتخاب یک گزینه، گزینه‌های دیگر را غیرفعال می‌کند.  
  • برای نمایش یک عمل یا تنظیمات منتخب: در این حالت، دکمه‌ی تاگل نشان می‌دهد یک گزینه فعال یا غیرفعال است.

Toggle buttons

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

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

Toggle buttons

دکمه‌ی اقدام شناور

دکمه‌ی اقدام شناور (Floating Action Button)، اصلی‌ترین یا پرکاربردترین عمل روی یک صفحه را اجرا می‌کند. دکمه‌ی FAB درمقابل تمام محتوای صفحه‌نمایش قرار می‌گیرد و غالبا به‌شکل دایره طراحی می‌شود که آیکونی در مرکز آن است. هر FAB باید اقدامی سودمند، نظیر ایجاد یک آیتم جدید یا به‌اشتراک‌گذاری مؤلفه‌ای روی صفحه‌نمایش را اجرایی کند.

Floating action buttons

قواعد مهم طراحی دکمه‌های UX

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

اندازه

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

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

Size

رنگ

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

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

Color

به‌یاد داشته باشید دکمه عنصری نیست که فقط در یک حالت قرار بگیرد. رنگ و وضعیت دکمه باید برای سه حالت تنظیم شود: ۱. وقتی هنوز روی آن کلیک نشده است (وضعیت پیش‌فرض)؛ ۲. وقتی کاربر کلیک را روی دکمه نگه‌ داشته است؛ ۳. وقتی دکمه فعال‌ شده است. دکمه باید به‌گونه‌ای طراحی شود که کاربر سه حالت را به‌‌وضوح از یکدیگر تشخیص دهد.

شکل

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

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

consistency

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

مکان

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

میکروکپی

UX button microcopy

میکروکپی دکمه‌ی UX، معمولا فراخوان به عمل (CTA) است که به کاربران می‌گوید اگر روی دکمه‌ کلیک کنند، چه اقدامی انجام می‌شود. میکروکپی مؤثر CTA باید سریعا توجه کاربران را جلب و آن‌ها را مستقیما به‌سمت عمل هدایت کند.

اگر می‌خواهید Call-to-Action مؤثرتری داشته باشید، تعداد واژه‌ها را به‌حداقل برسانید. چند کلمه‌ی مناسب بسیار مؤثرتر از عبارت توصیفی طولانی است.

انتخاب نوع دکمه

انتخاب سبک دکمه به اولویت و اهمیت دکمه و تعداد کانتینرها یا ظروف دکمه در یک صفحه و طرح‌بندی صفحه بستگی دارد. همان‌طورکه در تصویر زیر می‌بینید، Google Material Design توصیه می‌کند در هر صفحه با چه نسبتی از دکمه‌های متنی یا مسطح و دکمه‌های برجسته و اقدام شناور استفاده کنید. پیش از انتخاب نوع دکمه، به عوامل زیر توجه کنید.
Button type selection suggested by Google Material Design

  • کارکرد: دکمه به‌اندازه‌ای مهم و فراگیر است که مدل اقدام شناور را برای آن انتخاب کنید؟
  • ابعاد: انتخاب نوع دکمه به این موضوع بستگی دارد که چندلایه z-Space روی صفحه‌ی خود دارید.
  • طرح‌بندی (Layout): همان‌طورکه گفتیم، در هر صفحه یا حتی کل رابط کاربری، از یک نوع دکمه استفاده کنید. فقط زمانی‌که دلیل بسیار متقاعدکننده‌ای دارید، از ترکیب چندین دکمه نیز می‌توانید استفاده کنید؛ مثلا برای تأکید بر عملکردی بسیار مهم.

Button States

حالات دکمه

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

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

حالت عادی: قانون ساده، اما بسیار مهمی که باید رعایت کنیم، این است که دکمه‌ها باید شبیه به دکمه به‌نظر برسند. به‌یاد داشته باشید آیکون‌هایی که هیچ شباهتی به دکمه ندارند، نه‌تنها خلاقیت UX شما را افزایش نمی‌دهند؛ بلکه احتمال سردرمی کاربران را بیشتر می‌کنند. حالت عادی به آیکون‌های ساده‌ای اشاره می‌کند که نهایتا نام آن‌ها در پایین دکمه نوشته‌ شده است.

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

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

حالت غیرفعال: برای غیرفعال نشان‌دادن دکمه، دو راه پیش رو دارید: ۱. مخفی‌کردن دکمه؛ ۲. نشان‌دادن آن در حالت Disabled.

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

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

designing UX buttons

جمع‌بندی

درپایان، فهرست نکاتی را ذکر می‌کنیم که باید در طراحی دکمه‌های UX به آن‌ها توجه شوند:

۱. با استفاده از نشانه‌های بصری مناسب (مانند اندازه، شکل، رنگ، سایه و نظیر آن) دکمه‌ها را به‌گونه‌ای طراحی کنید که کاربران آن‌ها را به‌عنوان «دکمه» تشخیص دهند.

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

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

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

۵. دکمه‌ها را جایی قرار دهید که کاربران انتظار دارند آن‌ها را بیابند. برای این منظور، تاحدممکن از طرح‌بندی سنّتی و استانداردهای رابط کاربری استفاده کنید.

۶. برچسب دکمه‌ها باید عملکرد آن‌ها را بیان کند. برچسب‌های عمومی مثل OK و Cancel نمی‌تواند اطلاعات کافی و موردنیاز کاربران را ارائه کند. کاربران باید با نگاه‌کردن به برچسب، کاملا متوجه شوند با کلیک‌کردن روی دکمه چه اتفاقی خواهد افتاد.

۷. اندازه‌ی دکمه‌ها را باتوجه‌به قانون مینیمم، ۱۰ در ۱۰ میلی‌متر تنظیم و آن‌ها را براساس اولویت و اهمیت کارکرد مرتب کنید و هرگز در یک صفحه، تعداد زیادی دکمه قرار ندهید.

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

 

از سراسر وب

  دیدگاه
کاراکتر باقی مانده

بیشتر بخوانید