بهترین روش ها برای طراحی مودال در رابط کاربری

مودال‌ها که به عنوان کادرهای گفتگو هم شناخته می‌شن، هنگام به اشتراک گذاشتن اطلاعات با کاربرا حیاتی هستن. اونا به شما اجازه می‌دن به کاربرا یادآوری کنین، گزینه‌های بیشتری ارائه بدین و اطلاعات اضافی رو بدون شلوغ کردن محتوای اصلی فراهم کنین.

کلید یه مودال موفق سه چیزه — باید هدف و محتوای واضحی داشته باشه که به راحتی قابل درک باشه، در حالی که به راحتی هم قابل بستن باشه. مطمئن بشین که طراحی مودال شما این موارد رو پوشش می‌ده تا یه تجربه کاربری بدون دردسر رو تضمین کنین.

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

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

از مودال‌ها برای موارد زیر استفاده کنین:

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

مودال‌های آغاز شده توسط سیستم رو محدود کنین

بسته به محرک، مودال‌ها رو می‌شه به ۲ نوع تقسیم کرد: آغاز شده توسط کاربر و آغاز شده توسط سیستم.

مودال‌های آغاز شده توسط کاربر بعد از یه اقدام از سوی کاربرا (مثلاً ضربه زدن یا کلیک روی یه دکمه) روی صفحه ظاهر می‌شن. کاربرا می‌دونن که این مودال‌ها در نتیجه اقدامات خودشون قابل مشاهده می‌شن. مودال‌های آغاز شده توسط سیستم بعد از یه محرک سیستم، مثل یه فرم اشتراک زمان‌بندی شده یا یادآوری برای به‌روزرسانی، ظاهر می‌شن. اونا وظایف کاربرا رو مختل می‌کنن و ممکنه کاربرا ندونن چرا ظاهر شدن. از این نوع مودال مگر در موارد کاملاً ضروری و فوری — برای مثال، اطلاع دادن به کاربرا از اینکه سیستمشون در شرف راه‌اندازی مجدده — خودداری کنین.

هدف رو تو عنوان قرار بدین

عنوان مودال رو واضح و سرراست کنین، چون زمینه رو برای کاری که کاربرا انتظار دارن بعداً انجام بدن، فراهم می‌کنه. از اونجایی که کاربرا اغلب متن بدنه رو مرور یا رد می‌کنن، عنوان باید خود توضیحی باشه.

علاوه بر این، مطمئن بشین که دکمه‌های فراخوان (CTA) شما با پیام عنوان همخوانی دارن. اگه عنوان شما به صورت یه سوال باشه، برچسب‌های دکمه رو به عنوان پاسخ‌های احتمالی به اون سوال شکل بدین. این سازگاری بین عنوان و CTAها به کاربرا کمک می‌کنه به سرعت گزینه‌های خودشون رو درک کنن و منجر به یه تجربه روان‌تر و شهودی‌تر می‌شه.

اطلاعات مفید رو تو بدنه پیام ارائه بدین

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

اساساً، عنوان شما باید توجه رو جلب کنه و فوریت رو منتقل کنه، در حالی که متن بدنه بینش‌های تکمیلی رو بدون تکیه بر خوندن کامل اون توسط کاربرا ارائه می‌ده.

از برچسب‌های دکمه صریح استفاده کنین

هنگام طراحی مودال‌ها، برچسب دکمه اصلی رو با عنوان هماهنگ کنین تا اقدام رو برای کاربرا روشن کنین. برچسب‌های صریحی رو انتخاب کنین که نتیجه کلیک روی دکمه رو مشخص می‌کنن و هرگونه ابهام رو از بین می‌برن. برای مثال، اگه مودال می‌پرسه، «پیش‌نویس حذف بشه؟»، فراتر از گزینه‌های عمومی مثل «بله» یا «لغو» برین. اون رو با برچسب‌هایی مثل «بله، حذف شود» و «خیر، لغو» کاملاً واضح کنین. این تغییر کوچک، اقدام رو تقویت می‌کنه و درک اینکه بعداً چه اتفاقی می‌افته رو برای کاربرا آسون‌تر می‌کنه.

توجه کاربر رو با یه پوشش تیره هدایت کنین

یه پوشش تیره به مودال اضافه کنین تا اون رو برجسته کنه. مزایای متعددی برای اضافه کردن پوشش‌های تیره به مودال‌ها وجود داره:

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

گزینه‌های قابل مشاهده برای بستن مودال فراهم کنین

مودال‌ها صرف نظر از اینکه چقدر نیت خوبی داشته باشن، می‌تونن برای کاربرا طاقت‌فرسا باشن. بنابراین، مطمئن بشین که به کاربرا این فرصت رو می‌دین که اونا رو تا حد امکان آسون و شهودی ببندن. کنترل‌های متعددی رو برای بستن مودال به شکل زیر فراهم کنین:

• یه دکمه لغو
• یه دکمه بستن
• یه کنترل قابل دسترسی با صفحه کلید: کلید Escape تو دسکتاپ و دکمه Back تو موبایل

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

تو طراحی مودال‌ها، این امکان رو در نظر بگیرین که کاربرا بتونن با کلیک کردن بیرون از پنجره، اون رو ببندن، اما فقط زمانی که زمینه اجازه می‌ده — یعنی هیچ اطلاعات حیاتی از بین نره. این ویژگی با ارائه یه راه شهودی برای خروج، تجربه کاربر رو بهبود می‌بخشه، مخصوصاً اگه دکمه بستن بلافاصله واضح نباشه.

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

از فوکوس صفحه کلید تو دسکتاپ استفاده کنین

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

از چند مودال خودداری کنین

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

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

از استفاده از بیش از دو دکمه عمل خودداری کنین

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

از تصاویر بصری برای نشون دادن اهمیت مودال‌های هشدار استفاده کنین

مودال‌های هشدار رو برای اقدامات حیاتی بسیار قابل مشاهده کنین تا بر اهمیت اونا تأکید بشه. در غیر این صورت، ممکنه کاربرا متوجه نشن که هشدار چقدر مهمه و به طور خودکار اون رو رد کنن.

رنگ قرمز اغلب تو رابط کاربری برای جلب توجه کاربرا و انتقال اهمیت و فوریت استفاده می‌شه. به دلیل نحوه عملکرد چشم‌های ما — حدود ۶۴ درصد از مخروط‌های چشم ما به طول موج نور قرمز حساس هستن — بلافاصله برای ما برجسته می‌شه. بنابراین، از قرمز برای انتقال اهمیت هشدارهای حیاتی یا فوری استفاده کنین. یه راه دیگه برای تقویت اهمیت پیام، اضافه کردن آیکون‌هایی مثل علامت X دایره‌ای، علامت تعجب یا ایموجی ناراحت هست.

از مودال‌های موفقیت به صورت محدود استفاده کنین

یه پیام موفقیت مثل یه تشویق روی شونه است که می‌گه: «آفرین! همه کارها رو درست انجام می‌دی.» اما لزوماً نباید به شکل یه مودال باشه. گزینه بهتر اینجا اینه که حالت‌های موفقیت رو به صورت درون خطی یا تو یه صفحه جدید نمایش بدین.

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