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

مودال در UI به المان دارای محتوایی گفته می‌شود که بر روی صفحه ظاهر شده و صفحه‌ی اصلی را غیرفعال می‌کند و تا زمان بسته شدنشان اجازه‌ی انجام هیچ کاری در صفحه‌ی زیرین خود را نمی‌دهند. در برابر این دسته از المان‌ها، پنجره‌های مودلس (modeless) - نظیر المان چت با پشتیبانی یا درخواست دسترسی به نوتیفیکیشن و کوکی مرورگر - قرار می‌گیرند که اجازه می‌دهند کاربران در هنگام بازبودن آن پنجره، به دیگر اجزای صفحه نیز دسترسی داشته باشد. - ویکی‌پدیا

هر چند بر اساس ویکی‌پدیا متوجه این تفاوت Modal و Modeless شدیم اما معمولا در طراحی رابط کاربری آنها را یکی فرض کرده و با اصطلاحات دیگری نظیر Overlays ،Lightboxes و Dialogs نیز آنها را می‌شناسیم. حتی بعضی به آن Pop-up هم می‌گویند که اصطلاح درستی نیست اما استفاده می‌شود.

به صورت خلاصه پاپ‌آپ در یک Tab جدید باز می‌شود و معمولا هم مزاحم است.

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

دزدیدن توجه کاربر

زمانی که می‌خواهید در وظیفه‌ی فعلی کاربر وقفه‌ای ایجاد کنید تا توجه کاربر را به چیز مهمتری جلب کنید از مودال استفاده کنید.

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

بر اساس آناتومی مودال که در ادامه آماده است این نمی‌تواند مودال باشد چون عنوان ندارد، هشدار است و تمام صفحه را اشغال کرده است اما به نظر منِ نگارنده‌ی این مقاله، مودال است. در UI/UX هیچ قانون صددرصدی وجود ندارد. هر جایی به فراخور نیاز می‌تواند تغییر کند.

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

نیاز به ورودی کاربر

زمانی که نیاز به دریافت اطلاعات جزئی از کاربر دارید. مثل فرم ورود یا ثبت‌نام به شرطی که دارای فیلدهای زیادی نباشد.

در مقالات چک لیست طراحی فرم ثبت‌نام و چک‌لیست طراحی User Onboarding اپلیکیشن گفتم که اجبار کاربر به ثبت‌نام در ابتدای User-Flow اپلیکیشن و وب‌سایت اشتباه است و بهتر است زمانی که کاربر با ارزش افزوده‌ی ما آشنا شد و نیاز به خدمات بیشتر داشت ثبت‌نام و ورود را از کاربر بخواهیم.

نمایش اطلاعات بیشتر مرتبط

زمانی که لازم است بدون از دست رفتن تمرکز کاربر بر روی صفحه، اطلاعات بیشتری مثل نمایش عکس و فیلم نمایش دهید.

وب‌سایت 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 اپل را برای استفاده بخوانید.

نتیجه‌گیری

تقریباً هیچ قانون ۱۰۰ درصدی برای طراحی مودال نیست.

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

در نتیجه تا می‌توانید از آن استفاده نکنید.

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