پیام موقت Toast

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

نمونه زنده

successSelect option

آناتومی

با هاور روی توست (یا آیتم‌های لیست زیر)، هر بخش نمایش داده می‌شود.

1

ذخیره شد 2

تغییرات شما با موفقیت اعمال شد. 5

3

4

1. 1Icon
2. 2Title
3. 3Action Button
4. 4Close Button
5. 5Message

1. آیکون (Icon): نمایش نوع اطلاع‌رسانی (موفقیت، خطا، هشدار) با یک نگاه.
2. عنوان (Title): خلاصه‌ی بسیار کوتاه از وضعیت پیش‌آمده.
3. دکمه اقدام (Action Button): دکمه‌ای از نوع Tertiary برای پاسخ سریع یا هدایت به صفحه‌ی جزئیات.
4. دکمه خروج (Close Button): برای بستن دستی پیام توسط کاربر قبل از ناپدید شدن خودکار.
5. متن پیام (Message): توضیحات تکمیلی کوتاه (حداکثر دو یا سه خط).

موارد کاربرد

چه زمانی استفاده کنیم؟

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

چه زمانی استفاده نکنیم؟

• اطلاعات حیاتی: اگر اطلاعات به شدت ضروری است و کاربر حتما باید آن را ببیند، از Modal استفاده کنید.
• خطاهای بحرانی: برای خطاهای سرور یا مشکلاتی که نیاز به عیب‌یابی دقیق دارند، Toast فضای کافی ندارد.
• نیاز به تعامل پیچیده: اگر کاربر باید تصمیمی بگیرد یا فرمی را پر کند، Toast ابزار مناسبی نیست.
• پیام‌های طولانی: برای متونی که خواندن آن‌ها بیش از چند ثانیه زمان می‌برد، استفاده نشود.

نوشتار

به دلیل فضای محدود و زمان نمایش کوتاه، متن Toast باید به شدت بهینه باشد:

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

راهنمای استفاده

بایدها

• مکان نمایش: Toastها به صورت یک بنر شناور، در پایین صفحه سمت چپ (بسته به زبان) ظاهر می‌شوند.
• زمان‌بندی: مدت زمان استاندارد نمایش معمولا ۵ تا ۱۰ ثانیه است و سپس به طور خودکار محو می‌شود.
• توالی: در صورت بروز چندین خطا یا پیام، Toastها باید به صورت پشته‌ای (Stack) روی هم قرار بگیرند.

نبایدها

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

صحیح	اشتباه

رفتار

• ظهور و سقوط: پیام باید با یک انیمیشن ملایم ظاهر شده و پس از اتمام زمان، محو شود.
• توقف زمان: اگر کاربر نشانگر موس را روی Toast نگه دارد (Hover)، شمارشگر ناپدید شدن باید متوقف شود تا کاربر فرصت خواندن متن را داشته باشد.
• دسترسی‌پذیری: برای کاربران دارای ناتوانی بصری، Toast باید دارای ویژگی‌های ARIA باشد تا توسط صفحه‌خوان‌ها به صورت Polite اعلام شود.