پترن‌های UX

باتم‌شیت‌ها همه‌جا هستن: چرا این الگو اینقدر محبوب شده؟

فلونما5 دقیقه۱۶‏ مرداد‏ ۱۴۰۵
why-bottom-sheets-are-so-popular

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

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

اما چرا این‌قدر محبوب شده؟ آیا فقط یک ترند طراحی است یا واقعاً تجربه کاربری بهتری ایجاد می‌کند؟

در این مقاله بررسی می‌کنیم چرا بسیاری از اپلیکیشن‌های ایرانی به‌جای Modal یا صفحه‌های تمام‌صفحه، از Bottom Sheet استفاده می‌کنند و این انتخاب چه مزایا و چالش‌هایی دارد.

Bottom Sheet چیست؟

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

کاربر همچنان زمینه (Context) صفحه قبلی را می‌بیند و در صورت نیاز می‌تواند با یک حرکت، Bottom Sheet را ببندد و به همان وضعیت قبل برگردد.

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

Bottom Sheet بیشتر از اینکه یک جایگزین برای Modal باشد، راهی برای حفظ جریان تعامل کاربر است.

چرا استفاده از Bottom Sheet این‌قدر افزایش پیدا کرده است؟

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

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

در چنین شرایطی، دسترسی به بخش پایین صفحه بسیار ساده‌تر از قسمت‌های بالایی است.

Bottom Sheet دقیقاً از همین الگوی رفتاری استفاده می‌کند.

نشان — صفحه خانه
نشان — صفحه خانه

حفظ Context؛ کاربر هنوز می‌داند کجاست

یکی از نقاط قوت Bottom Sheet این است که صفحه اصلی را به‌طور کامل پنهان نمی‌کند.

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

این موضوع باعث می‌شود:

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

Bottom Sheet برای چه کارهایی مناسب است؟

این الگو تقریباً در تمام اپلیکیشن‌های ایرانی دیده می‌شود، اما معمولاً برای وظایف کوتاه و موقتی استفاده می‌شود.

  • انتخاب گزینه از یک لیست
  • فیلتر و مرتب‌سازی
  • انتخاب تاریخ یا زمان
  • اشتراک‌گذاری
  • نمایش عملیات بیشتر (More Actions)
  • تأیید یک اقدام
  • نمایش اطلاعات تکمیلی

آیا Bottom Sheet همیشه انتخاب درستی است؟

خیر.

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

اما Bottom Sheet محدودیت‌هایی هم دارد.

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

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

Bottom Sheet یا Modal؟

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

Bottom Sheet مناسب است برای:

  • تعاملات کوتاه
  • انتخاب گزینه
  • فیلترها
  • اقدامات سریع
  • حفظ زمینه صفحه

Modal مناسب است برای:

  • هشدارهای مهم
  • تأییدهای حساس
  • تصمیم‌های غیرقابل بازگشت
  • پیام‌های بحرانی
  • تعاملاتی که نیاز به تمرکز کامل دارند

بنابراین، مسئله انتخاب بین این دو نیست؛ بلکه انتخاب الگوی مناسب برای سناریوی مناسب است.

بلوبانک — تنظیمات
بلوبانک — تنظیمات
بلوبانک — تنظیمات
بلوبانک — تنظیمات

چرا تقریباً همه اپ‌های ایرانی از آن استفاده می‌کنند؟

اگر محصولات مختلف ایرانی را کنار هم قرار دهید، احتمالاً Bottom Sheet را در بخش‌های متعددی خواهید دید.

این موضوع فقط به دلیل پیروی از ترندهای طراحی نیست.

چند عامل باعث شده این الگو به استانداردی رایج تبدیل شود:

  • هماهنگی با راهنماهای طراحی اندروید و iOS
  • استفاده راحت‌تر با یک دست
  • حفظ Context صفحه
  • پیاده‌سازی ساده‌تر نسبت به برخی الگوهای دیگر
  • ایجاد تجربه‌ای آشنا برای کاربران

مهم‌تر از خود Bottom Sheet، کیفیت طراحی آن است

داشتن Bottom Sheet به‌تنهایی تجربه کاربری را بهتر نمی‌کند.

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

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

جمع‌بندی

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

اما دلیل محبوبیت آن فقط ظاهر مدرنش نیست.

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

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

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

فلونماBottom Sheetباتم شیتModalطراحی رابط کاربریتجربه کاربریالگوهای طراحیطراحی موبایلدسترس‌پذیریUI DesignUX DesignProduct Design

فلونما

تحلیل و مستندسازی الگوهای طراحی محصولات ایرانی

از تجربه سایر محصولات ایرانی الهام بگیرید

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

شروع جستجو