مودال یا باتم‌شیت: در اپ موبایل کدام را کجا به کار ببریم
مودال راه را می‌بندد، باتم‌شیت اجازه میدهد مردم بگردند. تنها سوالی که بین این دو تصمیم می‌گیرد، بازسازی هر دو الگو، یک جدول تصمیم برای ده حالت رایج و قواعد پلتفرم‌ها پشت آن.
مودال و باتم‌شیت هر دو روی صفحه می‌لغزند، برای همین تیم‌ها فکر می‌کنند یک چیزند با دو شکل مختلف. نیستند. یکی کاربر را متوقف میکند تا جواب بدهد، دیگری اجازه میدهد چیزی انتخاب کند و ادامه بدهد. اینجا تنها سوالی را می‌بینید که بین این دو تصمیم می‌گیرد، هر دو الگو را از نو می‌سازیم و یک جدول تصمیم برای حالت‌هایی داریم که در هر اپی پیش میآید.
تنها سوال: آیا همین حالا باید جواب داده شود؟
اگر کاربر بدون انتخاب نمی‌تواند ادامه بدهد، مودال است. اگر می‌تواند نادیده‌اش بگیرد و صفحه همچنان معنی دارد، شیت است.
همین یک سوال بیشتر موارد را پیش از هر بحثی درباره‌ی ظاهر حل میکند. تفاوت‌های دیگر را هم توضیح میدهد: مودال وسط می‌نشیند و همه چیز را تیره میکند چون تا جواب داده نشود هیچ چیز دیگری مهم نیست، و شیت از پایین بالا میآید و صفحه را در دید نگه می‌دارد چون هنوز خود صفحه اصل ماجراست.
مودال: پیش از ادامه تصمیم بگیر
مودال، که در اندروید دیالوگ و در iOS اِلرت نامیده میشود، عمداً وقفه ایجاد میکند. جایی درست است که:
- کاربر باید پیش از ادامه تصمیم بگیرد. اپ نمی‌تواند جواب را حدس بزند.
- کار برگشت‌پذیر نیست. حذف پروژه‌ای که ۲۴ فایل را برای همه پاک میکند، یک مکث لازم دارد.
- حداکثر دو گزینه هست. لغو و خود اقدام، با نام فعل: «حذف»، نه «باشه».
جایی که شکست می‌خورد: هر چیز اختیاری. مودالی که امتیاز می‌خواهد، قابلیت جدید اعلام میکند یا منو نشان میدهد، کاربر را از کاری که آمده بود انجام بدهد باز می‌دارد و او یاد می‌گیرد بدون خواندن هر چیزی که بسته‌اش میکند را بزند.
باتم‌شیت: بگرد، بعد انتخاب کن
باتشیت گزینه‌هایی را در خود دارد که به چیزِ روی صفحه تعلق دارند. جایی درست است که:
- گزینهها به همین صفحه تعلق دارند. اشتراکگذاری، تکثیر، انتقال یا بایگانی همین پروژه.
- کاربر با کشیدن می‌تواند کنارش بزند. جواب لازم نیست.
- بیشتر از دو گزینه هست. شیت جای یک فهرست دارد و فهرست در دسترس انگشت شست است.
جایی که شکست می‌خورد: هر چیزی که نباید رد شود. شیت با یک کشیدن اتفاقی بسته میشود، پس تأییدِ کاری مخرب که فقط در یک شیت باشد، هم راحت گم میشود و هم راحت اشتباهی فعال میشود.
دکمه‌های زیاد، شیتِ مبدل‌پوش است
غلط: مودال
درست: شیت
صفحهی سمت چپ رایج‌ترین اشتباه است. شش دکمهی زیر هم در یک جعبه‌ی وسط صفحه از کاربر می‌خواهد داخل یک وقفه یک منو بخواند. هیچ‌کدام از گزینهها فوری نیست، پس لازم نیست چیزی صفحه را مسدود کند. همین گزینهها در یک شیت مثل یک فهرست خوانده می‌شوند، در دسترس شست می‌مانند و با یک کشیدن بسته می‌شوند.
قاعده‌ی Material Design کوتاه است: یک دیالوگ حداکثر دو اقدام داشته باشد. وقتی به سومی نیاز داری، منو داری و منو جایش در شیت است.
هر دو با هم: از شیت حذف کن، با مودال تأیید کن
اول، شیت
بعد، مودال
این دو الگو رقیب هم نیستند. یک گزینه‌ی مخرب می‌تواند کنار بقیه‌ی اقدام‌ها در شیت باشد، قرمز و آخر از همه. لمس آن مودال را باز میکند، چون فقط حالا تصمیمی هست که برگشت ندارد. در شیت بگرد، در لحظه‌ای که مهم است مسدود کن.
مودال یا شیت: جدول تصمیم
| موقعیت | انتخاب | چرا |
|---|---|---|
| حذف پروژه برای همه | مودال | برگشت‌ناپذیر، دو گزینه |
| دور انداختن تغییرات ذخیره‌نشده | مودال | کاربر باید پیش از خروج تصمیم بگیرد |
| خروج از حساب در دستگاه مشترک | مودال | یک بله یا نه که وضعیت را تغییر میدهد |
| اشتراکگذاری، تکثیر، انتقال، بایگانی | شیت | گزینه‌هایی برای آیتم روی صفحه |
| مرتبسازی یا فیلتر یک فهرست | شیت | کاربر می‌خواهد تغییر فهرست را پشت آن ببیند |
| انتخاب کارت ذخیره‌شده هنگام پرداخت | شیت | بیش از دو گزینه، بخشی از صفحه |
| افزودن عکس از دوربین یا گالری | شیت | انتخاب منبع، خروج آسان |
| جزئیات یک مکان روی نقشه | شیت | نقشه همچنان اصل است |
| پذیرش شرایط جدید پیش از ادامه | مودال | اپ بدون جواب نمی‌تواند ادامه بدهد |
| اعلام یک قابلیت جدید | هیچ‌کدام | کسی لازم نیست تصمیم بگیرد. از بنر درون‌صفحه استفاده کن |
چه کسانی خوب انجامش می‌دهند
همین امروز می‌توانید روی گوشی‌تان بررسی کنید:
- Apple Maps و Google Maps نتایج جست‌وجو و جزئیات مکان را در یک شیت روی نقشه نگه می‌دارند، پس جایتان را هرگز گم نمی‌کنید.
- شیت اشتراکگذاری iOS همه‌ی اپ‌ها و اقدام‌ها را برای چیزی که نگاه می‌کنید فهرست میکند و با یک کشیدن بسته میشود.
- منوی «بیشتر» در پست‌های Instagram به شکل یک باتشیت از گزینههای همان پست باز میشود.
راهنمای Apple همین مرز را از طرف دیگر می‌کشد: اِلرت‌ها برای اطلاعات حیاتی‌اند که کاربر فوراً لازم دارد، از جمله هشدار اینکه یک اقدام ممکن است داده را از بین ببرد، در حالی که شیت‌ها و اکشن‌شیت‌ها گزینههای مرتبط با کاری را در بر دارند که کاربر انجام میدهد.
سوالات متداول
کی به جای مودال از باتشیت استفاده کنم؟
وقتی گزینهها به صفحهی فعلی تعلق دارند، بیشتر از دو تا هستند و کسی مجبور نیست برای ادامه انتخاب کند. اشتراکگذاری، مرتبسازی، فیلتر و انتخاب از یک فهرست کار شیت است.
کی از دیالوگ مودال استفاده کنم؟
وقتی کاربر باید پیش از ادامه تصمیم بگیرد، معمولاً چون کار برگشت‌ناپذیر است. آن را به دو اقدام محدود کن: لغو و خود اقدام با نام فعل.
یک مودال چند دکمه باید داشته باشد؟
حداکثر دو تا. Material Design میگوید یک دیالوگ باید حداکثر دو اقدام داشته باشد. اگر بیشتر لازم داری، گزینهها یک منو هستند و جایشان در شیت است.
آیا باتشیت یک مودال است؟
باتشیتِ مودال صفحه را تیره میکند و باید بسته شود تا کاربر دوباره بتواند از صفحه استفاده کند، اما با یک کشیدن بسته میشود و چیزی نمیپرسد. دیالوگ سوال میپرسد و منتظر جواب میماند.
در iOS تفاوت اِلرت و اکشنشیت چیست؟
اِلرت با اطلاعات حیاتی و چند دکمهی محدود وقفه ایجاد میکند. اکشنشیت از پایین بالا میآید و گزینههای مرتبط با کاری را نشان میدهد که کاربر تازه شروع کرده، مثل گزینههای یک عکس.
منابع
- Dialogs و Bottom sheets، Material Design 3.
- Alerts، Sheets و Action sheets، راهنمای Apple Human Interface.
- ابتدا به شکل کاروسل در UX Brainy منتشر شد.
Want your app's dialogs, sheets and every other pattern chosen and designed as one system? Our team designs app UI from the first flow to the finished components.
Get Started
