دکمه‌ها یکی از پراستفاده‌ترین اجزای رابط کاربری هستند؛ از آنجایی که طراحی دکمه یکی از ظریف‌ترین قسمت‌های طراحی رابط کاربری است؛ بنابراین شما به‌عنوان یک طراح، به فهرستی نیاز دارید که در زمان مواجهه با موارد غیرقابل پیش‌بینی در فرآیند طراحی، به آن مراجعه کنید.
در این مطلب، فهرستی از آنچه باید برای طراحی دکمه بدانید را آورده‌ایم؛ طوری که هم استانداردهای طراحی رعایت شود و هم تجربه کاربری خوبی خلق گردد.
دکمه باید دقیقا شبیه یک دکمه به‌نظر برسد
کاربران شما باید بدانند با چه عنصری مواجه شده‌اند. اگر دکمه‌ای که طراحی کرده‌اید، شبیه بقیه عناصر موجود در رابط کاربری باشد، توجه مخاطبان را جلب نمی‌کند. کاربران باید بدانند که با یک عنصر قابل‌‌کلیک کردن مواجه شده‌اند و شما هنگام طراحی، باید این اصل را لحاظ کنید. اگر کاربر نتواند «دکمه» را از سایر عناصر UI تشخیص دهد، چگونه می‌تواند با اپلیکیشن تعامل خوبی داشته باشد؟
اندازه مناسبی برای دکمه اپلیکیشن انتخاب کنید
نکته دیگری که باید هنگام طراحی دکمه در نظر بگیرید، اندازه آن است. فراموش نکنید که کاربران از اینکه نتوانند بر دکمه موردنظرشان کلیک کنند، متنفرند؛ دکمه باید طوری طراحی شود که در دسترس همه کاربران باشد. حدود ۷۰ درصد از جمعیتی که قرار است از اپلیکیشن شما استفاده کنند، افراد بزرگ‌سال هستند؛ بنابراین در طراحی دکمه باید کار را برای آن‌ها آسان کنید. اگر دکمه‌های متعددی را در کنار هم جای‌گذاری می‌کنید، فضای خالی کافی بین آن‌ها در نظر بگیرید تا تعداد کلیک‌های اشتباه را کاهش دهید. فضای خالی، به ایجاد تمایز بین عناصر صفحه کمک می‌کند و به طراحی شما مجال تنفس می‌دهد.
در طراحی دکمه ها، از کنتراست استفاده کنید
در طراحی دکمه از رنگ‌ها برای اشاره به قابل کلیک بودن یک دکمه استفاده کنید تا کاربران بتوانند عناصر را از هم تمیز دهند. وجود کنتراست بین دکمه فراخوان و سایر دکمه‌ها، نرخ تبدیل (Conversion Rate) را در اپلیکیشن شما افزایش می‌دهد.
اگر دکمه‌های «ورود» و «ثبت‌نام» را در یک صفحه قرار داده‌اید، برای بهبود تجربه کاربری می‌توانید از رنگ‌های کاملا متفاوت استفاده کنید. اگر درکسب‌وکار شما، تاکید بر استفاده از دکمه «ثبت‌نام» است، رنگ چشم‌گیرتری برای این دکمه انتخاب کنید؛ اما اگر اولویت شما این است که نیاز کاربران فعلی خود را برآورده سازید، رنگ چشم‌گیرتر را برای دکمه «ورود» به‌کار برید.
به یاد داشته باشید که برای طراحی مهم‌ترین دکمه فراخوان، باید کنتراست شدیدی بین آن دکمه و سایر عناصر رابط کاربری وجود داشته باشد؛ اما به‌طور هم‌زمان، توجه داشته باشد که در طراحی دکمه و سایر عناصر رابط کاربری، توازن و تناسب را رعایت کنید.
دکمه‌های اصلی باید طوری طراحی شوند که تا حد امکان، توجه کاربران را به خود جلب کنند؛ همچنین دکمه‌های فرعی باید طراحی خنثی‌تر باشند تا از کلیک‌های اشتباه جلوگیری شود. سعی نکنید که دکمه‌های اصلی نامحسوس باشند؛ اتفاقا آن‌ها را به‌طور کامل نشان دهید و در عوض، دکمه‌های فرعی را نامحسوس در نظر بگیرید.
قرار نیست کاربران، کارکرد دکمه‌ها را حدس بزنند
کاربران از اینکه مجبور شوند عملی که یک دکمه انجام می‌دهد را خودشان حدس بزنند خوششان نمی‌آید و این شمایید که باید کار را برای آن‌ها ساده کنیدبه کمک نوشته روی دکمه‌ها، به کاربر نشان دهید که دکمه مدنظر او، قرار است چه عملی انجام دهد و چه صفحه‌ای را برای او باز کند. کاربران هرگز نباید وارد یک گشت‌و‌گذار بی‌هدف و سرگیجه‌آور شوند، آن‌ها باید از همان ابتدا درباره مقصد نهایی خود مطلع شده باشند. نوشته روی دکمه‌ها باید واضح، موجز و مستقیم باشد. فضای زیادی ندارید تا خیلی دقیق و با جزئیات توضیح دهید، به‌علاوه احتیاجی هم به نوشتن یک متن طولانی روی برچسب نیست؛ فقط از یک «فعل» استفاده کنید. هنگام طراحی دکمه به این موضوع فک کنید که کاربر باید چه کار کند؟ اگر روی دکمه موردنظر شما کلیک کند، چه چیز عایدش می‌شود؟ به‌عنوان مثال، برچسب «ثبت‌نام» را در نظر بگیرید: این برچسب به‌طور واضح نشان می‌دهد که شما در حال ثبت‌نام هستید؛ بی‌آنکه متنی طولانی روی دکمه فراخوان نوشته شده باشد. اطلاع‌رسانی درباره آنچه یک اپلیکیشن انجام می‌دهد، قبل از مواجهه با دکمه ثبت‌نام انجام می‌شود اما اینکه اپلیکیشن چطور اجرا می‌شود، بعد از تعامل با دکمه محسوس می‌شود.
این قواعد کلی را درک کنید و هنگام طراحی دکمه به آن توجه کنید. در فرآیند نوشتن متن روی دکمه‌ها، معمولا باید از عنوان‌های غیرمتعارفی مانند «بیا دوست باشیم!» و «بزن بریم!» صرف‌نظر کنید. واضح بودن متن روی دکمه، به بهبود تجربه کاربری نیز کمک می‌کند.
دکمه را جایی قرار دهید که کاربر انتظارش را دارد
دکمه‌ها را در دسترس و در مسیر کاربر قرار دهید. اگر آن‌ها نتواند دکمه‌ها را در جایی که انتظارش را می‌کشند پیدا کنند، تعاملی بین شما و کاربرانتان ایجاد نخواهد شد. کاربر را مجبور به «شکار» دکمه مورد‌نظرش نکنید. کاربران، ناخودآگاه انتظار دارند دکمه‌ها را در‌جاهای خاصی بیابند. اگر این اتفاق نیفتد، احساس خوب تجربه کاربری از بین می‌رود. فکر می‌کنید چه اتفاقی خواهد افتاد اگر جای دکمه‌های «پرداخت» و «لغو سفارش» را در سبد‌های خرید اینترنتی‌تان عوض کنید؟ اگر از یک دکمه شناور در طراحی دکمه خود استفاده می‌کنید، مورد استفاده از آن را محدود کنید تا تبدیل به تنها عنصر عملیاتی صفحه شود. این کار، انتخاب‌های بیش از اندازه کاربران را محدود می‌کند؛ این محدودیت در تصمیم‌گیری، به آن‌ها کمک می‌کند تا در مسیر درست قرار بگیرند.
یک لحظه تأمل کنید و به یک دکمه فکر کنید: اولین فرمی که به ذهن شما خطور می‌کند کدام است؟ به‌احتمال زیاد، یک مستطیل است یا یک دایره؛ نه یک فرم عجیب و غریب. چشم ما به دکمه‌های مستطیلی شکل عادت کرده است و کاربران با این اشکال آشنا هستند؛ بنابراین، استفاده از این اشکال در طراحی دکمه اپلیکیشن، کار کاربران شما را ساده می‌کند.
البته نباید هنگام طراحی عناصر رابط کاربری، خلاقیت خود را سانسور کنید؛ شما قطعا می‌توانید ایده‌های منحصر‌به‌فردی را در طراحیتان بگنجانید اما اگر وارد آن مسیر شدید، ابتدا مطمئن شوید که کاربران شما، می‌توانند به‌راحتی این ایده‌ها را به‌عنوان دکمه یا آیتم عملیاتی تشخیص دهد؟ باید بین فرم و طراحی دکمه های اپلیکیشن، سازگاری ایجاد کنید تا کاربران با تعداد زیادی از عناصر نا‌آشنا بمباران نشود. به یاد داشته باشید که سازگاری، باعث «آشنایی» می‌شود. سازگاری در طراحی اپلیکیشن باعث بهبود تعامل کاربری می‌شود و به «آسان بودن استفاده» کمک شایانی می‌کند. اگر تصمیم به استفاده از یک طراحی عجیب از‌لحاظ فرمی برای دکمه دارید، یا در سراسر طراحیتان از آن استفاده کنید یا کلا با یک فرم عادی که همه کاربران می‌توانند به‌راحتی تشخیص دهند پیش بروید.
طراحی دکمه ها را با بازخورد کاربران، اعتبارسنجی کنید
از نسخه‌های آزمایشی برای درک بازخورد کاربران استفاده کنید. ابزارهای فراوانی وجود دارند که به شما این فرصت را می‌دهند تا قبل از انتشار رسمی اپلیکیشن، آن را در عرصه جهانی پلی‌استور، امتحان کنید و بازخورد بگیرید. این بازخورد‌ها می‌توانند تک‌تک نقص‌هایی که هرگز متوجه آن‌ها نشده‌اید را نمایان کنند و تمام چیز‌های دیگری که ممکن است به خاطر عجله داشتن فراموش کنید را به شما نشان دهند؛ پس نسخه آزمایشی را ثبت کنید، تست کنید، بازخورد بگیرید و چرخه طراحی را اصلاح کنید.
کلام آخر
طراحان محترم! شما فهرست موارد لازم برای طراحی دکمه را در اختیار دارید؛ مطالب گفته‌شده، ممکن است کمی فشرده به‌نظر برسند اما به شما کمک می‌کنند تا تجربه استفاده از رابط کاربری خود را بهبود ببخشید.
به‌طور خلاصه، دکمه‌های شما باید ظاهری شبیه به دکمه داشته باشد و کاربران بتوانند آن‌ها را از یکدیگر تشخیص دهند. موارد اصلی و فرعی باید از لحاظ بصری تا حد ممکن متمایز باشند و در عین‌حال، هدف اصلی، به‌صورت چشم‌گیرتری ظاهر شود. سازگاری باید در سراسر عناصر استفاده‌شده در طراحی شما حفظ شود و این سازگاری در مورد دکمه‌هایتان نیز به‌کار می‌رود. اگر سازگار کردن طراحی منحصر‌به‌فردی که به ذهنتان خطور کرده، با تمام فریم‌های از قبل طراحی‌شده‌تان سخت به نظر می‌رسد، آن را کنار بگذارید و از‌آنچه کاربرتان با آن آشناست استفاده کنید؛ فرآیند را برای کاربران قابل‌دسترسی کنید و روش‌هایی موجب گیج شدن کاربران می‌شود را از طراحی اپلیکیشن دور کنید. برچسب‌ها (نوشته روی دکمه‌ها) را به یاد داشته باشید؛ کاربران، ساده صحبت کردن را بیشتر دوست خواهند داشت.
در آخر، نسخه آزمایشی را فراموش نکنید و اپلیکیشن خود را قبل از انتشار تست کنید تا بتوانید یک تجربه کاربری خوب را تضمین کنید.
