چک لیست طراحی Modals

مودال در UI به المان دارای محتوایی گفته می‌شود که بر روی صفحه ظاهر شده و صفحه‌ی اصلی را غیرفعال می‌کند و تا زمان بسته شدنشان اجازه‌ی انجام هیچ کاری در صفحه‌ی زیرین خود را نمی‌دهند. در برابر این دسته از المان‌ها، پنجره‌های مودلس (modeless) - نظیر المان چت با پشتیبانی یا درخواست دسترسی به نوتیفیکیشن و کوکی مرورگر - قرار می‌گیرند که اجازه می‌دهند کاربران در هنگام بازبودن آن پنجره، به دیگر اجزای صفحه نیز دسترسی داشته باشد. - ویکی‌پدیانت‌برگهر چند بر اساس ویکی‌پدیا متوجه این تفاوت Modal و Modeless شدیم اما معمولا در طراحی رابط کاربری آنها را یکی فرض کرده و با اصطلاحات دیگری نظیر Overlays ،Lightboxes و Dialogs نیز آنها را می‌شناسیم. حتی بعضی به آن Pop-up هم می‌گویند که اصطلاح درستی نیست اما استفاده می‌شود.مقایسه‌ی پاپ‌آپ و مودالبه صورت خلاصه پاپ‌آپ در یک Tab جدید باز می‌شود و معمولا هم مزاحم است.حال که کمی با مودال آشنا شدیم بهتر است نگاهی به موارد استفاده آن بیندازیم.دزدیدن توجه کاربرزمانی که می‌خواهید در وظیفه‌ی فعلی کاربر وقفه‌ای ایجاد کنید تا توجه کاربر را به چیز مهمتری جلب کنید از مودال استفاده کنید.ویرگولبه عنوان مثال وب‌سایت ویرگول برای پاک کردن پیش‌نویس مقاله، این خطا را نمایش می‌دهد که به نحوی در فعالیت کاربر برای انجام عمل حذف با یک هشدار مهم وقفه ایجاد می‌کند که اعلام کند این عمل قابل بازیابی نیست.بر اساس آناتومی مودال که در ادامه آماده است این نمی‌تواند مودال باشد چون عنوان ندارد، هشدار است و تمام صفحه را اشغال کرده است اما به نظر منِ نگارنده‌ی این مقاله، مودال است. در UI/UX هیچ قانون صددرصدی وجود ندارد. هر جایی به فراخور نیاز می‌تواند تغییر کند.همچنین بر اساس این مقاله‌ بهتر است به جای نمایش این پیغام، آن را قابل بازیابی کرد و این هشدار را حذف کرد. چون کاربران بر اساس عادت و بدون خواندن متن هشدار بر روی دکمه‌ی متفاوت سمت راست گرایش دارند و آن را بدون فکر کردن می‌زنند.نیاز به ورودی کاربرزمانی که نیاز به دریافت اطلاعات جزئی از کاربر دارید. مثل فرم ورود یا ثبت‌نام به شرطی که دارای فیلدهای زیادی نباشد.اسنپ‌فوددر مقالات چک لیست طراحی فرم ثبت‌نام و چک‌لیست طراحی User Onboarding اپلیکیشن گفتم که اجبار کاربر به ثبت‌نام در ابتدای User-Flow اپلیکیشن و وب‌سایت اشتباه است و بهتر است زمانی که کاربر با ارزش افزوده‌ی ما آشنا شد و نیاز به خدمات بیشتر داشت ثبت‌نام و ورود را از کاربر بخواهیم.نمایش اطلاعات بیشتر مرتبطزمانی که لازم است بدون از دست رفتن تمرکز کاربر بر روی صفحه، اطلاعات بیشتری مثل نمایش عکس و فیلم نمایش دهید. مودال سایت miroوب‌سایت miro یکی از ابزار عالی برای mind mapping و مستندسازی اطلاعات است. از آن غافل نشوید.نمایش اطلاعات بیشتر غیر مرتبطزمانی که اطلاعات غیر مرتبطی به صفحه‌ی فعلی مثل نوتیفیکیشن، اطلاع‌رسانی استفاده از کوکی‌ها، وضعیت اشتراک کاربر، اطلاع از تخفیف‌ها و ... را می‌خواهیم به کاربر منتقل کنیم. در این مواقع معمولا صفحه‌ی اصلی غیرفعال نمی‌شود.آموزشدر مقاله‌ی 9 اثر روانشناسی تاثیرگذار بر طراحی Walkthrough گفتم که در شروع کار با اپلیکیشن، کاربر را مجبور به مشاهده‌ی آموزش کار با اپلیکیشن نکنید. در حقیقت شما در این حالت با باز کردن مودال‌های مختلف در هدف اصلی کاربر وقفه‌ی طولانی مدت ایجاد می‌کنید و معمولا کاربران این آموزش‌ها را نمی‌خوانند.به ترتیب پیاده، هم‌راز بانک تجارت، Adobe XDآموزش باید به درخواست کاربر و به صورت modeless یا مانند تصویر سمت راست (اپلیکیشن پیاده) در داخل اپلیکیشن تعبیه شده باشد.نکته بسیار مهمبر اساس توضیح وبسایت ui-patterns برای نمایش پیغام خطا، موفقیت و هشدار نباید از مودال استفاده کرد -که البته این مورد بسیار نقض شده است-. این پیغام‌ها را باید در صفحه نمایش داد.به ترتیب جیبیت، گوگل پادکست و پینترستمثلا در تصویر بالا، اپلیکیشن جیبیت می‌توانست به جای مودال از Form errors استفاده کند و فوکوس را هم بروی فیلد شماره موبایل حفظ کند که هزینه‌‎ی تعامل کمتری به کاربر وارد شود. (و بهتر است دلیل خطا واضح‌تر مشخص شود)همینطور که قبلا هم گفتم در طراحی تجربه کاربری هیچ قانون ۱۰۰درصدی وجود ندارد. هر چه طراحی شما به Mental Model و عادات رفتاری افراد نزدیک‌تر باشد بهتر است اما به فراخور موضوع می‌توان متفاوت عمل کرد.آناتومی پنجره مودالمودال معمولا از این اجزا ساخته شده است.آناتومی مودالراه دررواز آنجه که مودال در توجه کاربر وقفه ایجاد می‌کند بهتر است شامل راه‌های زیادی برای بستن باشد.دکمه‌ی خروج، لغو و ...کلید ESC در کیبوردکلیک کردن خارج از مودالو مانند تصویر بالا دکمه X برای بستناز لیست بالا هر چه تعداد بیشتری می‌توانید استفاده کنید.عنوان توصیفیاز یک عنوان مناسب با کارکرد مودال استفاده کنید.همینطور که در بالاتر دیدید ویرگول اینکار را نکرده بود و در نسخه‌ی جدید تویتر هم عنوان برداشته شده است.دکمهتمامی مواردی که برای دکمه‌ها در این مقاله و این مقاله گفته شده است برای اینجا هم صادق است.خودپرداز بانک سامانفقط همانطور که در مقاله‌ی چه پترن‌هایی در زبان فارسی قرینه می‌شوند؟ توضیح دادم در زبان فارسی هم مانند اپلیکیشن‌های انگلیسی زبان پیشنهاد من این است که دکمه‌ی مثبت را در سمت راست و دکمه‌ی منفی را در سمت چپ قرار دهید.ابعادبهتر است مودال کمتر از نصف صفحه را اشغال کند و بیشتر در قسمت بالایی صفحه قرار گیرد که در موبایل اگر لازم بود کیبورد باز شود زیر کیبورد نرود و فوکوس را هم بر روی اولین فیلد قرار دهید.اگر یک متن طولانی مثل صفحه‌ی قوانین و مقررات وجود دارد که نیاز به اسکرول دارد آن را در صفحه‌ی جدید باز کنید نه به صورت مودال.بازشدن به درخواستدر تصویر اول (نت‌برگ) مودال بدون درخواست کاربر به صورت اتوماتیک باز می‌شود. بدیهی است که این موضوع بر روی تجربه‌ی کاربری تاثیر منفی می‌گذارد. اما بیزینس این را می‌خواهد و مجبوریم که پیاده‌سازی کنیم.اینجاست که به گفته‌ی علی بابایی می‌رسیم که ما Business Centered Design طراحی می‌کنیم. خودتون رو با User-Centered Design گول نزنید. طراحی کاربر محور وسیله‌ی رسیدن به اهداف تجاری است و هر جایی که این اهداف در تضاد با اهداف تجربه کاربری قرار بگیرند اولویت همیشه با Business است.مناسب موبایل نیستبیش از ۷۰٪ محتوای وب‌گردی ایرانیان با موبایل است. نمایش مودال در موبایل به خصوص اگر نیاز به کیبورد هم باشد بسیار سخت می‌شود در نتیجه بهتر است در موبایل از مودال استفاده نکنید.نسخه‌ی اپلیکیشن و وب‌سایت دیواربه عنوان مثال در نسخه‌ی وب‌سایت دیوار شاهد مودال هستیم اما در نسخه‌ی موبایل با صفحه‌ی جدید روبرو هستیم.به عنوان یک گزینه متفاوت می‌توان از backdrop هم استفاده کرد.اما اگر همچنان مایل به استفاده هستید قوانین متریال و HIG اپل را برای استفاده بخوانید.نتیجه‌گیریتقریباً هیچ قانون ۱۰۰ درصدی برای طراحی مودال نیست.در بیشتر موارد، نیازی به مجبور کردن کاربران به اقدام خاص نیست و مودال بیشتر کاربر را اذیت می‌کند تا کمک‌رسان باشد. همچنین استفاده از آن در موبایل، نمایش خطا و هشدار نیز ایده‌آل نیست.در نتیجه تا می‌توانید از آن استفاده نکنید.اگر به این مقاله علاقه‌مند بودید، مقالات زیر را نیز پیشنهاد می‌کنم و فراموش نکنید که لایک کنید و کامنت بگذارید.چک لیست طراحی Search Boxچک لیست طراحی Splash Screenچک لیست طراحی فرم ثبت‌نامچک لیست طراحی Tab Bar / Bottom Navigationچک‌لیست طراحی User Onboarding اپلیکیشنچک لیست طراحی صفحه‌ی تنظیماتچک لیست طراحی Modals - در حال مطالعهچک لیست طراحی Date Pickerچک لیست طراحی Avatarچک لیست طراحی تجربه‌ی کاربری موبایلبر اساس برداشت شخصی از این منابع:Best Practices for Modals / Overlays / Dialog WindowsWhy Modal Windows Have Killed Popup WindowsNever Use a Warning When you Mean Undo