طراحی دکمه‌های دیجیتال

حتما می‌دونید دکمه‌ها یکی از مهمترین عناصر رابط کاربری هستند.اینم یک حقیقت واضحه که خوب یا بد طراحی شدن یک دکمه می‌تونه تاثیر مثبت یا منفی در تجربه‌ی کاربری ایجاد می‌کنه.دکمه‌ها در ابتدا برای ارتباط بین صفحات در فضای وب بوجود اومدن. بعدها با بوجود اومدن نسل جدید موبایل‌ها که سری لمسی بودن مهمتر شدن.وقتی تکنولوژی بیشتر رشد کرد و زندگی‌ مردم رو تحت تاثیر قرار داد، دکمه‌های دیجیتال ماهیت‌ مهمتری پیدا کردن.با بوجود اومدن و اهمیت مبحث تجربه کاربری دیگه وقتش شده بود که دکمه‌ها یه اصل جدایی ناپذیر در طراحی محصول دیجیتال بشن.
دکمه‌ها میتونن باعث بشن یک عمل با موفقیت انجام بشه یا نه و توی مقدار انجام یک عمل تاثیر مستقیم دارن.بخصوص توی صفحات فرود(Landing Page)، صفحات خرید نهایی(Check Out) یا پرداخت اهمیت خودشون رو بیشتر نشون میدن.

اما این دکمه‌های دیجیتال چطوری باید طراحی بشن؟ اصلا کاربر چطوری متوجه بشه این عنصر که توی صفحه هست یه دکمس، قابل پیدا شدن باشن(Findability)، چطوری طراحی بشه که برای کاربر فهم‌پذیر(Intelligibility) باشه، چطوری اونو طراحی کنیم که مفید باشه(Useful)، قابل استفاده باشه(Usable) و از همه مهمتر دسترس پذیر باشه(Accessible) حتی برای همه.

اینکه طراحی فراگیر(Inclusive design) یا طراحی جامع چیه رو میتونید سرچ کنید و راجبش بخونید اما این مطلب صرفا درمورد دکمه هاست و نمیخوام خیلی طولانی بشه.توی این مقاله اول انواع دکمه‌ها رو میگم بعد عوامل موثری که باید توی طراحی دکمه‌ها رعایت کنیم و ۱۰ نکته‌ی کلیدی که باعث میشه دکمه‌هارو خیلی خوب طراحی کنید.

انواع دکمه‌های دیجیتال

ما بصورت کلی ۵ مدل دکمه داریم: متنی(Text Button)، سوییچ یا تاگل(Toggle Buttons)، شناور(Float Action Button)، شبح(بوردر)(Ghost Buttons)، دکمه های فیل یا اصلی(Buttons)

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

۱. دکمه‌های متنی(Text Button)

معمولا دکمه‌هایی هستند مثل همین متن که یجاهاییش رو من لینک میکنم.اغلب این دکمه‌ها داخل خود متن یا در پایان یک متن طولانی استفاده میشن.

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

یه نکته‌ای، معمولا هشتگ‌ها از این دسته دکمه‌ها هستن.هشتگ‌های زیر یه ویدیوی‌ آپارات یا پست اینستاگرام

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

۲. سوییچ یا تاگل(Toggle Buttons)

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

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

۳. شناور(Float Action Button)

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

معمولا این دکمه‌ها همیشه با اختلاف سطح از سایر عناصر هستن(توی فرانت اند اصولا باید Z Index بیشتر داشته باشن)یعنی چی؟ یعنی بالاتر از همه لایه‌ها قرار میگیرن و درصورت اسکرول شدن معمولا سرِ جاشون فیکس هستن.

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

۳. شبح(بوردر)(Ghost Buttons)

شبح کلمه‌ی فارسیه خوبی نیست واسه این مدل دکمه.همون میگیم گست.

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

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

توجه۱:وقتی از یک دکمه‌ی گست کنار یه دکمه‌ی فیل استفاده میکنیم به حالت هاور اونها توجه داشته باشیم.مثلا هاور دکمه گست ما نشه دکمه‌ی فیلمون(پر شدمون!!!)

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

۵. دکمه‌های فیل یا اصلی(Buttons)

https://www.aparat.com/v/UPkrZ

دکمه‌های فیل دکمه‌های اصلی هستند.این مدل دکمه معمولا مستطیلی شکلن و توی رنگشون از هویت برند کمک میگیرن.این دکمه‌ها حکم اکشن اصلی یک صفحه رو دارن.یعنی شما تماما باید سعی کنید که این دکمه توسط کاربر دیده بشه و بتونه به راحتی روش کلیک کنه یا اونو تاچ کنه. درمورد اینکه یک دکمه‌ی اصلی که CTA(call to action) چطوری باید طراحی بشه نکات زیادی هست.

اما دکمه‌ها باید چه خصوصیاتی داشته باشن که ایده آل باشن؟

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

اندازه دکمه

مهمترین مولفه توی طراحی دکمه‌ها اندازه اوناس.در وهله‌ی اول سعی کنید مطابق با استانداردها اینکارو انجام بدین.اندازه دکمه‌های متریال دیزاین گوگل(Google Material Design) و راهنما رابط کاربری اپل(Apple Human Interface Guidelines) برای شروع بد نیستن.

اندازه دکمه تو دو چیز خیلی تاثیر داره: یک اینکه قابل استفاده باشه(Usable) دو اینکه قابل پیدا شدن باشه(Findable) یعنی اندازه‌ی دکمه رو جوری قرار بدین که توی طراحی کاملا مشهود باشه.بخصوص توی دکمه‌هایی که قراره کاره اصلی اون صفحه رو انجام بدن.مثلا توی صفحه‌ی محصولا قطعا اندازه دکمه‌ی مقایسه یا لایک نباید با اندازه دکمه خرید برابر باشه .اصولا دکمه‌ی بزرگتر یعنی ارزش بیشتر.
به قابل کلیک یا قابل لمس بودن دکمه توجه کنید این همون یوزابل بودن دکمس. طبق یه آزمایش تو دانشگاه MIT حداقل سایز دکمه رو ۱۰ میلیمتر قرار دادن.اما تجربه شخصی من میگه دکمه زیره ۲۴ پیکسل کلا اشتباهه.الان سایز دکمه‌های اصلی رو معمولا با ارتفاع حدودا (۶-+)۵۰ قرار میدن.البته این عدد برای موبایل هستش و سایت میتونه بیشتر باشه.به اندازه انگشت، سایز‌های مختلف دستگاه‌ها، سورس طراحیتون و نوع طرحتون توجه داشته باشید.

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

نکته‌ی مهم: اندازه دکمه رابطه مستقیم با اندازه متن داخلش داره.

به این توجه کنید که متن روی دکمه باید خوانا باشه (Readability) سایزارو تست کنید.

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

بازم نکته: میتونید این اصل هم رعایت کنید که دیگه توی سایز دکمه هیچ مشکلی پیدا نکنید.من خودم خیلی اینو رعایت میکنم.

رنگ دکمه

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

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

رنگ رو جوری انتخاب کنید که کسانی که کور رنگی دارن هم متوجه این بشن که این دکمه‌ي اصلی هست.اینجا بحث طراحی فراگیر هم مطرح میشه که خارج از این بحث هست.(اگر بخواین میتونید راجب طراحی فراگیر(Inclusive design) سرچ کنید و مطالعه کنید)

نکته: رنگ دکمه‌های اصلی میتونه از هویت بصری اون شرکت، سایت، یا اپلیکیشن گرفته بشه.
نکته۲: رنگ‌های مختلف رو تست کنید اگر میتونید A/B تست انجام بدین و از اطرفیان راجب رنگ اون دکمه نظر بخواین.
نکته‌ی مهم: رنگ هاور(حالت فوکوس) یا انتخاب شده‌ی دکمه‌هایی که این قابلیت‌هارو دارن مشخص کنید برای انتخاب این رنگا از حالت منوکرومیک(Monochromic) استفاده کنید.اگه هم کلا تئوری رنگ‌های، براتون جذابه و میخواین بیشتر راجبش بدونید، میتونید این مطلب من راجب رنگ‌ها را بخونید.

شکل دکمه

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

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

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

مکان دکمه

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

اصل دسترسی پذیری(Accessibility) یکی از مهمترین‌ اصول طراحی تجربه کاربری است که توی محل قرار گرفتن دکمه باید بهش توجه کنیم. توی دسترسی پذیری میتونید رابط کاربری سامسونگ که تحت عنوان One-UI وجود داره رو بررسی کنید بنظر میاد سامسونگ توی رعایت این اصل خیلی خوب عمل کرده.(امیدوارم بزودی بتونم کامل درمورد One-UI سامسونگ بنویسم)

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

قابلیت پیدا شدن(Findability) رو درنظر داشته باشین.یعنی دکمه رو در محلی قرار بدین که کاربر با یک نگا بتونه دکمه رو ببینه و اونو درک کنه.منظور از درک اینه که بدونه کار اون دکمه چیه.

مدل ذهنی(Mental model) کاربر رو در نظر داشته باشیم.معمولا کاربرا چه عادت‌هایی دارن؟ در مواجه با یه دکمه چیکار میکنن؟ چطور یک دکمه رو تشخیص میدن یا اصلا کجا بدنبال دکمه میگردن؟
از فضای سفید(White Space) نهایت استفاده رو بکنیم.بزاریم طرح نفس بکشه و کاربر بتونه راحت دکمه رو ببینه و اونو پیدا کنه.

از اصول گشتالت(Gestalt) و نسبت طلایی(Golden Ration) کمک بگیریم.

میکروکپی(Microcopy) و متن روی دکمه

متن روی دکمه‌ها یکی از مهمترین عوامل تاچ یا کلیک شدنشون هست.اصولا میکروکپی متن‌های کوتاه و با ارزش رو میگن که توسط نویسنده تجربه کاربری(UX Writer) نوشته میشه.بد نیست طراحان رابط و تجربه کاربری دراین مورد بدونن و بتونن متن‌های اثربخشی رو روی دکمه بنویسن.خوده اینکه این متن‌ها اثر بخش باشن یه بحث گستردس تحت عنوان Efficient Writing که خارج از بحث مطلب هست.میتونید رابط نویسندگی اثر بحش و مبحث میکروکپی سرچ کنید و مطالعه کنید.

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

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

مثال۱: متن دکمه "مشاهده و خرید" یا "بررسی و خرید" میتونه این رو به کاربر منتقل کنه که زدن این دکمه منجر به خرید نهایی نمیشه.

مثال۲: روی یک دکمه نوشته "تخفیف" و روی دیگر "تخفیف برای شما"، مورد دوم مقدار تبدیل یا کانورژن ریتی (Convertion Rate) بیشتری داره. حس شخصی سازی فقط با کلمه‌ی "برای شما" منتقل میشه.

ده نکته‌ی تکمیلی بسیار مهم

۱. از میکرو اینتراکشن(Microinteraction) هنگام تاچ یا کلیک شدن یه دکمه استفاده کنید.

۲. دکمه‌هارو بصورت کامپوننت(Component) یا سیمبل استفاده کنید.چرا؟چون اگه قرار شد یه روزی تغییرشون بدین خیلی راحتتر تو کل طرحتون تغییر کنه.

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

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

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

۶. از برندینگ و سبک طراحی اون سازمان، شرکت یا محصول حتما کمک بگیرید.

۷. توی‌ همه‌ی مراحل طراحی دکمه کاربر(پرسونا) هم مد نظر قرار بدید(البته علاوه بر خدا که ناظر بر کارهامون هست:D). یعنی اینکه طراحی یک دکمه برای یه پرسونا جوان و مقدار آشنایی اون با تکنولوژی خیلی متفاوت هست با طراحی یک دکمه برای یک فرد میانسال که شاید یمقدار دورتر باشه از فضای دیجیتال.

۸. کنتراست کنتراست کنتراست، سعی کنید این اصل رو توی دکمه‌ها حتما رعایت کنید.

۹. زیبایی در سادگیست. سعی کنید مینیمال طراحی کنید.

۱۰. بسیار طرح ببینید، از نمونه‌های موفق الگو بگیرید و از تست کردن نترسید.

۱۰+۱. به دکمه نگیم دگمه!!!

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