احتمالا قبلاً آنجا بوده اید. چگونه بین نمایش مدال به کاربران یکی را انتخاب کنیم و چه زمانی آنها را به یک صفحه جداگانه و جدید هدایت کنیم؟ و آیا اصلا مهم است؟ در واقع، این کار را انجام می دهد. این تصمیم بر جریان کاربران، زمینه آنها، توانایی آنها برای جستجوی جزئیات و همراه با آن فرکانس خطا و تکمیل کار تأثیر می گذارد. هر دو گزینه می توانند مخرب و خسته کننده باشند - در زمان نامناسب و در مکان اشتباه. پس بهتره درستش کنیم Well, let’s see how to do just that. Modals در مقابل Dialogs در مقابل Overlays در مقابل Lightboxes در حالی که ما اغلب در مورد یک مؤلفه رابط کاربری مدال صحبت می کنیم، اغلب تفاوت های ظریف و پیچیده بین انواع مختلف مدال ها را نادیده می گیریم. در واقع، هر مدال یکسان نیست. مدالها، دیالوگها، پوششها و لایتباکسها - همگی شبیه به هم هستند، اما در واقع کاملاً متفاوت هستند:
Dialog یک اصطلاح عمومی برای "مکالمه" (سیستم کاربر ↔). Overlay پانل محتوای کوچکی که در بالای صفحه نمایش داده می شود. ModalUser باید با همپوشانی + پسزمینه غیرفعال شود. NonmodalUser باید با همپوشانی + پسزمینه فعال باشد. پسزمینه لایتباکس تیرهشده برای تمرکز توجه روی مودال.
همانطور که Anna Kaley تاکید میکند، بیشتر همپوشانیها در زمان نامناسبی ظاهر میشوند، کاربران را در طول کارهای حیاتی قطع میکنند، از زبان ضعیف استفاده میکنند و جریان کاربران را از بین میبرند. آنها ذاتاً منقطع هستند و معمولاً با سطح بالایی از شدت بدون نیاز شدید به آن هستند.
مطمئناً اگر عواقب عملکرد آنها تأثیر زیادی داشته باشد، باید سرعت کاربران را کاهش داده و قطع کرد، اما برای اکثر سناریوها، غیرمدالها بسیار ظریفتر و گزینهای دوستانهتر برای جلب توجه کاربر هستند. اگر هر چیزی، من همیشه آن را به عنوان پیش فرض پیشنهاد می کنم. مدال ← برای تکالیف مستقل ما بهعنوان طراح، اغلب مدالها را بیربط و آزاردهنده رد میکنیم - و اغلب هم هستند! - با این حال آنها ارزش خود را نیز دارند. آنها می توانند برای هشدار دادن به کاربران در مورد اشتباهات احتمالی یا کمک به جلوگیری از از دست دادن داده ها بسیار مفید باشند. آنها همچنین می توانند به انجام اقدامات مرتبط کمک کنند یا جزئیات را بدون وقفه در وضعیت فعلی صفحه بررسی کنند. اما بزرگترین مزیت مدال ها این است که به کاربران کمک می کنند تا زمینه صفحه فعلی را حفظ کنند. این فقط به UI نیست، بلکه به معنای ورودی ویرایش شده، موقعیت اسکرول، وضعیت آکاردئون ها، انتخاب فیلترها، مرتب سازی و غیره است.
گاهی اوقات، کاربران نیاز دارند که یک انتخاب را به سرعت تأیید کنند (به عنوان مثال، فیلترهایی که در بالا نشان داده شده است) و سپس بلافاصله از آنجا ادامه دهند. البته ذخیره خودکار میتواند همین کار را انجام دهد، اما همیشه مورد نیاز یا مطلوب نیست. و مسدود کردن UI اغلب ایده خوبی نیست. با این حال، مدال ها برای هیچ وظیفه ای استفاده نمی شوند. به طور معمول، ما از آنها برای کارهای تکی و مستقل استفاده می کنیم که در آن کاربران باید وارد شوند، یک کار را انجام دهند و سپس به جایی که بودند بازگردند. Unsurprisingly, they do work well for high-priority, short interactions (e.g., alerts, destructive actions, quick confirmations). وقتی مدال کمک می کند: 🚫 مدال ها اغلب مخرب، تهاجمی و گیج کننده هستند.🚫 مقایسه و کپی پیست را دشوار می کنند.✅ با این حال مدال ها به کاربران اجازه می دهند که زمینه های متعددی را حفظ کنند.✅ مفید برای جلوگیری از خطاهای برگشت ناپذیر و از دست دادن داده ها.✅ مفید است اگر ارسال کاربران به صفحه جدید مخل باشد. ✅ فقط در صورتی یک مدال را نشان دهید که کاربران برای اختلال ارزش قائل شوند.✅ به طور پیشفرض، گفتگوهای غیرمسدود ("nonmodals") را ترجیح دهید.✅ به کاربران اجازه دهید تا دیالوگ را کوچک کنند، پنهان کنند یا بعدا بازیابی کنند.✅ از یک مدال برای کاهش سرعت کاربران استفاده کنید، مثلاً ورودی پیچیده را تأیید کنید.✅ با "بستن"، کلید ESC، یا خارج از کادر کلیک کنید. صفحات → برای گردش کار پیچیده و چند مرحله ای جادوگران یا پیمایش زبانهها در مدالها، حتی در محصولات پیچیده سازمانی، خیلی خوب کار نمیکنند - در آنجا، پنلهای جانبی یا کشوها معمولاً بهتر کار میکنند. مشکلات زمانی شروع میشوند که کاربران نیاز به مقایسه یا ارجاع به نقاط داده دارند - اما مدالها این رفتار را مسدود میکنند، بنابراین به جای آن، همان صفحه را در چندین برگه دوباره باز میکنند.
For more complex flows and multi-step processes, standalone pages work best. صفحات همچنین زمانی که توجه کامل کاربر را می طلبند بهتر کار می کنند و مراجعه به صفحه قبلی چندان مفید نیست. و کشوها برای کارهای فرعی کار می کنند که برای یک مودال ساده خیلی پیچیده هستند، اما نیازی به پیمایش کامل صفحه ندارند. چه زمانی از مدال اجتناب کنیم: 🚫 از مدال برای پیام های خطا اجتناب کنید.🚫 از مدال ها برای اعلان های ویژگی خودداری کنید.🚫 از مدال ها برای تجربه سوار شدن بپرهیزید.🚫 از مدال ها برای کارهای پیچیده و طولانی چند مرحله ای اجتناب کنید.🚫 از چندین حالت تو در تو خودداری کنید و به جای آن از حالت های قبلی/بعدی استفاده کنید.🚫 از حالت های غیر ضروری به طور مطلق اجتناب کنید. از هر دو دوری کنیدبرای کارهای تکراری در بسیاری از محصولات پیچیده و سنگین، کاربران متوجه می شوند که کارهای مشابه را به طور مکرر، بارها و بارها انجام می دهند. در آنجا، هم مدالها و هم پیمایشهای صفحه جدید باعث ایجاد اصطکاک میشوند، زیرا جریان را قطع میکنند یا کاربران را مجبور میکنند تا دادههای گمشده را بین تمام برگهها یا نماهای مختلف جمعآوری کنند. اغلب اوقات، کاربران با یک تجربه شکسته مواجه میشوند، مملو از تاییدیههای بیپایان، هشدارهای اغراقآمیز، دستورالعملهای پرمخاطب، یا فقط از دست دادن نقاط مرجع. همانطور که Saulius Stebulis اشاره کرد، در این سناریوها، بخشهای قابل ارتقا یا ویرایش در محل اغلب بهتر کار میکنند - آنها وظیفه را به صفحه فعلی متصل نگه میدارند. در عمل، در بسیاری از سناریوها، کاربران وظایف خود را به صورت مجزا انجام نمی دهند. آنها باید دادهها را جستجو کنند، مقادیر کپی-پیست، ورودیها را در مکانهای مختلف اصلاح کنند، یا فقط سوابق مشابه را در حین انجام وظایف خود بررسی کنند. پوششها و کشوها برای حفظ دسترسی به دادههای پسزمینه در طول کار مفیدتر هستند. در نتیجه، زمینه همیشه در جای خود باقی می ماند، برای مرجع یا کپی پیست در دسترس است. حالتها و پیمایش صفحه را برای لحظاتی ذخیره کنید که وقفه واقعاً به ارزش افزوده میشود - به ویژه برای جلوگیری از اشتباهات مهم. Modals vs. Pages: A Decision Tree مدتی پیش، رایان نوفلد راهنمای بسیار مفیدی را برای کمک به طراحان برای انتخاب بین مدال و صفحات گردآوری کرد. همراه با یک چیت شیت PNG و یک الگوی Google Doc با سوالات تفکیک شده در 7 بخش است. این طولانی، بسیار کامل، اما بسیار آسان برای پیگیری است:
It might look daunting, but it's a quite simple 4-step process:
زمینه صفحه. ابتدا بررسی می کنیم که آیا کاربران نیاز به حفظ زمینه صفحه زیرین دارند یا خیر. پیچیدگی کار و مدت زمان. کارهای سادهتر، متمرکز و بدون حواسپرتی میتوانند از جریانهای معین، اما طولانی و پیچیدهتر به یک صفحه استفاده کنند. ارجاع به صفحه اصلی. سپس، بررسی میکنیم که آیا کاربران اغلب نیاز دارند به دادههای موجود در پسزمینه رجوع کنند یا اینکه کار یک تأیید یا انتخاب ساده است. انتخاب روکش مناسب. در نهایت، اگر روکش واقعاً گزینه خوبی باشد، ما را راهنمایی میکند که بین مدال یا غیرمدال (متمایل به غیرمدال) یکی را انتخاب کنیم.
بسته بندی در صورت امکان، از مسدود کردن کل رابط کاربری خودداری کنید. یک گفتگوی شناور داشته باشید که تا حدی رابط کاربری را پوشش می دهد، اما امکان پیمایش، اسکرول و کپی پیست را فراهم می کند. یا محتویات مدال را به صورت کشوی کناری نشان دهید. یا به جای آن از آکاردئون عمودی استفاده کنید. یا اگر نیاز به نمایش جزئیات زیادی دارید، کاربران را به صفحه جداگانه ای بیاورید. اما اگر میخواهید کارایی و سرعت کاربران را افزایش دهید، به هر قیمتی از مدال اجتناب کنید. از آنها برای کاهش سرعت کاربران، برای جمع کردن توجه آنها و جلوگیری از اشتباهات استفاده کنید. همانطور که ترز فسندن اشاره کرد، هیچ کس دوست ندارد حرفش قطع شود، اما اگر مجبورید، مطمئن شوید که ارزش هزینه کردن را دارد. با "الگوهای طراحی رابط هوشمند" آشنا شوید میتوانید یک بخش کامل درباره مدلها و جایگزینها را در الگوهای طراحی رابط هوشمند، دوره 15 ساعته ویدیویی ما با 100 مثال عملی از پروژههای واقعی، با یک آموزش زنده UX در اواخر امسال بیابید. همه چیز، از فهرستهای کشویی تا جداول پیچیده سازمانی - با 5 بخش جدید هر سال. پرش به یک پیش نمایش رایگان. از کد BIRDIE برای صرفه جویی 15 درصدی استفاده کنید. با الگوهای طراحی رابط هوشمند، دوره ویدیویی ما در زمینه طراحی رابط و UX آشنا شوید.
ویدیو + آموزش تجربه کاربری فقط ویدیو ویدیو + آموزش تجربه کاربری $495.00 699.00 دلار
آموزش ویدیویی + UX25 درس ویدیویی (15 ساعت) + آموزش UX زنده. 100 روز ضمانت بازگشت پول. فقط ویدیو 300.00 دلار 395.00 دلار
دوره ویدیویی 40 درس ویدیویی (15 ساعت) را دریافت کنید. سالانه بهروزرسانی میشود. همچنین بهعنوان بسته UX با ۲ دوره ویدیویی در دسترس است.
منابع مفید
انواع مختلف پنجره های بازشو، توسط آنا کالی بهترین روشها برای طراحی مدالهای رابط کاربری، توسط Uxcel ما از مدالهای لعنتی بیش از حد استفاده میکنیم: دستورالعملهای UX، نوشته آدریان ایگر دیالوگهای معین و غیر وجهی، اثر ترز فسندن طراحی رابط کاربری مدرن Enterprise: Modal Dialogs، توسط جیمز جیکوبز مدال ها در سیستم های طراحی
