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

طراحی دکمه اپلیکیشن

۱. به اصول اولیه طراحی رابط کاربری اهمیت دهید.

وقتی صحبت از اصول اولیه طراحی رابط کاربری برای دکمه‌ها می‌شود، مهم‌ترین چیزی که باید روی آن تمرکز داشت، «هدف دکمه» است.

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

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

۱.۱. اندازه

وقتی لمس نمایشگر یا به اصطلاح «تپ کردن» روش اصلی ورودی برای اپلیکیشن شماست، اصول اولیه‌ی طراحی برای اندروید پیشنهاد می‌کند که هدف‌های لمسی مثل دکمه‌ها بهتر است حداقل ۴۸×۴۸ dp با‌فاصله‌ی حداقل ۸ dp یا بیشتر باشد. این مقدار برای مطمئن شدن از تراکم متعادل اطلاعات و قابل‌استفاده بودن است.

dp یا Density-independent Pixels واحدی مجازی برای اندازه‌گیری است که از چگالی پیکسل صفحه‌نمایش مستقل است.

۱.۲. شکل

در مورد شکل، بستگی دارد که به چه منظوری طراحی می‌کنید؛ برای مثال، در طراحی رابط کاربری برای اندروید، دکمه‌های ورودی چه به‌صورت تخت و چه به‌صورت برجسته، باید دارای ۳۶ dp ارتفاع، حداقل ۸۸ dp عرض و ۲ dp شعاع خمیدگی برای دکمه‌های تخت و ۲ dp ارتفاع پیش‌فرض برای دکمه‌های برجسته باشد.

۱.۳. فضای خالی اطراف دکمه

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

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

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

طراحی دکمه اپلیکیشن

رنگ در طراحی رابط کاربری باید به هدایت کاربران به‌سمت دکمه‌ها و پیش‌بینی فرآیند پشت هر دکمه، کمک کند.

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

طراحی دکمه اپلیکیشن

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

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

طراحی دکمه اپلیکیشن

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

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

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

طراحی دکمه اپلیکیشن

به مثال سایت Deliveroo توجه کنید:

کاربران از قبل با گوشی موبایلشان در این اپلیکیشن ثبت‌نام کرده‌اند؛ بنابراین احتمال این‌که وارد حساب کاربریشان بشوند، بیشتر از ثبت‌نام کردن است؛ پس دکمه‌ی ورود برجسته طراحی شده است و دکمه‌ی ثبت‌نام که اهمیت کمتری دارد نامرئی است.

طراحی دکمه اپلیکیشن

۴. طراحی دکمه اپلیکیشن ، کاربران را با بازخورد تصویری تشویق کنید.

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

۴.۱. برای هر عملی بهتر است عکس‌العملی وجود داشته باشد.

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

۴.۲. بازخورد باید واضح و روشن باشد.

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

۵. موقعیت قرارگیری؛ دکمه‌ها را جایی قرار دهید که کاربر بتواند آن‌ها را پیدا کند.

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

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

طراحی دکمه اپلیکیشن

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

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

نکته: دکمه‌های مخرب و دکمه‌های منفی را جایی قرار دهید که سخت‌تر پیدا شود.

طراحی دکمه اپلیکیشن
طراحی دکمه اپلیکیشن

۶. همراه با روندهای روز طراحی پیش روید.

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

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

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

دکمه‌ها را با یک پیام واضح، برچسب بزنید.

۷. مطمئن شوید که دکمه‌ها آنچه را که می‌توانسته‌اید با یک برچسب بگویید، انجام می‌دهد.

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

سها ذاکری

سها ذاکری

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

پاسخ دهید