نمونه پیام خطا: بد، خوب و عالی، بازنویسی‌شده
هشت پیام خطا از یک کد خام تا متنی که مردم می‌توانند طبقش عمل کنند بالا رفته‌اند. هر پله توضیح داده شده، فرمول سه‌خطی پشت پیامهای عالی هم هست، و یک چک‌لیست برای بازبینی بعدی شما.
یک پیام خطای عالی سه چیز به مردم می‌گوید: چه اتفاقی افتاد، چرا افتاد، و بعدش چه کنند، همراه با دکمه‌ای که همان کار را انجام می‌دهد. بیشتر محصولات همان اولی را می‌گویند و خیلی‌هاشان هیچ‌وقت از یک کد جلوتر نمی‌روند. در ادامه هشت پیام خطا را از بد تا عالی بالا برده‌ایم، دلیل هر پله را گفته‌ایم و فرمولی داده‌ایم که برای پیام بعدی‌تان استفاده کنید.
از بد تا عالی چه چیزی عوض می‌شود
بد
عالی
پیام بد برای سرور نوشته شده. 403 یک کد وضعیت واقعی و دقیق است، اما کسی که آن را می‌خواند چیز به‌دردبخوری یاد نمی‌گیرد. پیام عالی برای آدم نوشته شده: اسم فایل را می‌آورد، می‌گوید خصوصی است، می‌گوید چه کسی می‌تواند بازش کند و قدم بعدی را به یک ضربه تبدیل میکند.
هر پله یک چیز اضافه میکند:
| پله | چه چیزی به مردم می‌دهد | چه چیزی را هنوز جا می‌اندازد |
|---|---|---|
| بد | یک کد یا کلمه مبهمی مثل «ناموفق» | چه شد، چرا، چه کنیم |
| خوب | چه شد، با کلمات ساده | چرا، و بعدش چه کنیم |
| عالی | چه شد، چرا، و قدم بعدی روی یک دکمه | چیزی که لازم باشد درباره‌اش تصمیم بگیرند نمی‌ماند |
۱. نبود دسترسی
بد
Error 403.
یک کد وضعیت. برای توسعه‌دهنده درست است، برای بقیه تهی.خوب
شما به این فایل دسترسی ندارید.
می‌گوید چه شد، با زبان خواننده. اما او را بلاتکلیف می‌گذارد.عالی
این فایل خصوصی است. از Sam دسترسی بگیرید و وقتی باز شد خبرتان می‌کنیم.
دلیل را می‌گوید (خصوصی است)، می‌گوید چه کسی می‌تواند درستش کند (Sam) و بعدش چه می‌شود. دکمه «درخواست دسترسی» است، پس درخواست دادن فقط یک ضربه است.
کد 403 یعنی کاربر وارد شده اما مجوز ندارد. این تفاوت برای متن مهم است: لازم نیست دوباره وارد شود، باید کسی فایل را با او به اشتراک بگذارد.
۲. کارت ردشده
بد
تراکنش ناموفق بود.
«ناموفق» بدون فاعل. کارت بود، فروشگاه بود، یا اینترنت؟خوب
کارت شما رد شد.
علتی را می‌گوید که مردم می‌توانند رویش اقدام کنند.عالی
کارت شما رد شد. بانک‌تان اجازه نداد. کارت دیگری امتحان کنید یا از بانک بخواهید تأییدش کند.
مشکل را به بانک نسبت می‌دهد، نه به کاربر، و دو راه خروج می‌دهد. دکمه «استفاده از کارت دیگر» است، یعنی راه سریع‌تر.
خطاهای پرداخت بیشترین پول و بیشترین خجالت را دارند. هیچ‌کس را مقصر نکنید و راه خروج را روی همان صفحه نگه دارید.
۳. فایلی که بیش از حد بزرگ است
بد
خطای آپلود.
می‌تواند هر چیزی باشد، پس مردم همان فایل را دوباره می‌فرستند و به همان دیوار می‌خورند.خوب
حجم این فایل زیاد است.
علت را می‌گوید، اما نه اینکه چقدر زیاد.عالی
حجم این ویدیو ۲٫۴ گیگابایت است. حد مجاز ۲ گیگابایت است. کمی کوتاهش کنید و دوباره امتحان کنید.
هر دو عدد را می‌گوید تا مردم ببینند فاصله کم است. دکمه «کوتاه کردن ویدیو» است که بدون خروج از برنامه مشکل را حل میکند.
وقتی پای یک محدودیت در میان است، محدودیت را بگویید. مردم نمی‌توانند عددی را درست کنند که هیچ‌وقت به آن‌ها گفته نشده.
۴. آفلاین شدن
بد
خطای شبکه.
انگار چیزی خراب شده و شاید کاری از دست رفته.خوب
شما آفلاین هستید.
ساده است، اما اولین نگرانی هر کسی این است: «تغییراتم از بین رفت؟»عالی
شما آفلاین هستید. تغییراتتان روی همین گوشی ذخیره شده و با برگشتن اینترنت همگام می‌شود.
قبل از اینکه نگرانی پرسیده شود جوابش را می‌دهد. دکمه «تلاش دوباره» است.
۵. خروج از حساب
بد
Error 401: Unauthorized.
«Unauthorized» شبیه اتهام است و دوباره یک کد است.خوب
نشست شما منقضی شد.
درست است، اما «نشست» کلمه توسعه‌دهنده‌هاست.عالی
از حساب خارج شدید. ۳۰ روز گذشته است. دوباره وارد شوید تا شما را به همین‌جا برگردانیم.
دلیل را توضیح می‌دهد و قول می‌دهد جای کاربر گم نشود. دکمه «ورود» است.
کد 401 نقطه مقابل 403 است: کاربر وارد نشده یا ورودش منقضی شده. فرستادنش به صفحه ورود همان راه‌حل است، و گفتن اینکه به همان جایی برمی‌گردد که بود، دلیل تردید را برمی‌دارد.
سه نمونه دیگر، تازه نوشته‌شده
همین قواعد برای موقعیت‌هایی که پنج نمونه بالا پوشش نمی‌دهند هم برقرار است. این سه‌تا نمونه‌های خود ما هستند.
بد
Error 500. مشکلی پیش آمد.
کد چیزی اضافه نمی‌کند و «مشکلی» اعتراف میکند که نمی‌دانیم چه شده.خوب
نتوانستیم تغییرات شما را ذخیره کنیم.
مسئولیت را می‌پذیرد و می‌گوید چه چیزی شکست خورد.عالی
نتوانستیم تغییرات شما را ذخیره کنیم. تقصیر از طرف ماست، نه شما. متنتان هنوز اینجاست، پس یک دقیقه دیگر دوباره امتحان کنید.
می‌گوید تقصیر با کیست و اینکه چیزی از بین نرفته. دکمه «ذخیره دوباره» است.
بد
Too many requests.
زبان ماشین برای آدمی که احتمالاً همین حالا هم کلافه است.خوب
تلاش‌ها بیش از حد بود. بعداً دوباره امتحان کنید.
روشن است، اما «بعداً» می‌تواند یک دقیقه باشد یا یک روز.عالی
تلاش‌ها بیش از حد بود. برای امنیت شما، ورود ۱۵ دقیقه متوقف شده است. می‌توانید همین حالا رمز عبورتان را بازنشانی کنید.
زمان انتظار، دلیل و یک مسیر سریع‌تر را می‌دهد. دکمه «بازنشانی رمز عبور» است.
بد
لینک نامعتبر.
یعنی انگار کاربر چیزی را اشتباه وارد کرده.خوب
این دعوت‌نامه منقضی شده است.
علت واقعی، بدون سرزنش.عالی
این دعوت‌نامه منقضی شده است. دعوت‌ها ۷ روز اعتبار دارند. از Maya بخواهید یکی تازه بفرستد.
می‌گوید چرا لینک‌ها منقضی می‌شوند و چه کسی می‌تواند درستش کند. دکمه «درخواست دعوت‌نامه جدید» است.
فرمول: چه شد، چرا، بعدش چه کنیم
هر پیام عالی بالا در همین سه خط جا می‌شود:
[What happened, in the reader's words.]
[Why, in one short sentence.]
[What to do next.] [Button: the next step as a verb]
| پیام | چه شد | چرا | بعدش چه کنیم |
|---|---|---|---|
| نبود دسترسی | این فایل خصوصی است | فقط افراد دعوت‌شده می‌توانند بازش کنند | درخواست دسترسی |
| کارت ردشده | کارت شما رد شد | بانک‌تان اجازه نداد | استفاده از کارت دیگر |
| حجم زیاد | حجم این ویدیو ۲٫۴ گیگابایت است | حد مجاز ۲ گیگابایت است | کوتاه کردن ویدیو |
| آفلاین | شما آفلاین هستید | تغییرات روی همین گوشی ذخیره شده | تلاش دوباره |
| خروج از حساب | از حساب خارج شدید | ۳۰ روز گذشته است | ورود |
خط «چرا» همان است که تیم‌ها اول از همه حذفش می‌کنند، و همان است که جلوی تیکت پشتیبانی بعدی را می‌گیرد.
چک‌لیست برای بازبینی بعدی
- بدون کد خام. 403 و 401 و 500 را در لاگها نگه دارید، نه در پیام.
- بدون سرزنش. «بانک‌تان اجازه نداد»، نه «کارت نامعتبر وارد کردید».
- عددها را بگویید. محدودیت حجم، زمان انتظار، تعداد روز.
- یک دکمه، با نام یک فعل. «کوتاه کردن ویدیو»، نه «باشه».
- بگویید چه چیزی حفظ شده. اگر چیزی از دست نرفته، بگویید.
- در ورود، وجود حساب را تأیید نکنید. «رمز عبور اشتباه است» به یک غریبه می‌گوید این حساب وجود دارد. به‌جایش بگویید «این ایمیل و رمز عبور با هم مطابقت ندارند».
- بعد رنگ را بررسی کنید. کلمات خطا را می‌رسانند؛ رنگ و آیکون کمکشان می‌کنند. مقاله ما درباره رنگ پیام خطا قرمزهای مناسب حالت روشن و تیره را دارد.
مقاله
رنگ پیام خطا: ۸ قرمز برای استفاده به‌جای #FF0000
همتای این مقاله: کلمات اینجاست، رنگ‌ها و آیکون‌ها و کد آنجا.
سوالات متداول
چطور یک پیام خطای خوب بنویسیم؟
با کلمات ساده بگویید چه اتفاقی افتاد، در یک جمله کوتاه بگویید چرا افتاد، و بگویید بعدش چه کنند. قدم بعدی را روی دکمه‌ای بگذارید که نامش یک فعل است، مثل «تلاش دوباره» یا «استفاده از کارت دیگر».
نمونه‌های پیام خطای بد چه هستند؟
کدهای خام و کلمات مبهم: «Error 403»، «Error 401: Unauthorized»، «تراکنش ناموفق بود»، «خطای آپلود» و «خطای شبکه». همه‌شان دقیق‌اند و هیچ‌کدام به مردم نمی‌گویند چه کنند.
آیا پیامهای خطا باید کد خطا نشان بدهند؟
نه بهعنوان خود پیام. کد به پشتیبانی و توسعهدهندهها کمک میکند، پس آن را در لاگها نگه دارید، یا اگر تیم پشتیبانی خواست، با متن ریز زیر پیام اصلی بگذارید.
تفاوت پیام خطای 401 و 403 چیست؟
کد 401 یعنی کاربر وارد نشده یا ورودش منقضی شده، پس پیام باید او را به ورود بفرستد. کد 403 یعنی وارد شده اما مجوز ندارد، پس پیام باید بگوید چه کسی می‌تواند به او دسترسی بدهد.
چرا خطای ورود نباید بگوید «رمز عبور اشتباه است»؟
چون وجود حساب را تأیید میکند و این به کسی که حسابها را حدس میزند کمک میکند. راهنمای امنیتی یک پیام کلی واحد را برای ایمیل اشتباه یا رمز اشتباه توصیه میکند.
منابع
- کدهای وضعیت HTTP: 403 Forbidden و 401 Unauthorized در MDN.
- Error-message guidelines، Nielsen Norman Group.
- Writing، Apple Human Interface Guidelines.
- Authentication and error messages، OWASP Cheat Sheet Series.
- ابتدا به‌صورت کاروسل در UX Brainy منتشر شد.
Want every error, empty and loading state written and designed as one system? Our team designs product UI with the words in it from the first draft.
Get Started
