• Telegram
  • Google Plus
  • Linked In

انواع error (خطا) در طراحی متریال

انواع error (خطا) در طراحی متریال

تاریخ درج: خلاصه

طراحی سایت، متریال دیزاین، انواع error در متریال دیزاین

انواع error (خطا) در طراحی متریال

خطا (error)

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

انواع خطا

- خطاهای ورودی کاربر
- خطاهای برنامه ای
- خطاهای ناسازگاری

الگوهای مشخص برای errorها

- فرم ها
- خطاهای استفاده کلی
- خطاهای همگام سازی (sync error)
- قابلیت اتصال
- مجوز (permission)
جهت یافتن خطا :
• سعی کنید به درستی متوجه شوید که چه اتفاقی افتاده
• مشخص کنید که کاربر چگونه میتواند آن را برطرف نماید.
• ورودی های وارد شده توسط کاربر را تا حد ممکن نگه دارید.

خطاهای ورودی کاربر

به کاربران کمک کنید تا خطاهای ورودی را به محض پیدا کردنشان رفع کنند. در صورت وجود خطا در فرم از تأیید شدن آن جلوگیری نمایید و یا اگر بعد از تأیید فرم خطا مشخص شد به طور واضح در مورد خطا و نحوه برطرف کردن آن توضیح دهید.

فیلد ورودی متنی

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

مشخصات :

بین فیلد متنی و متن خطا که در پایین آن قرار دارد به میزان 16dp فاصله عمودی قرار دهید.


فیلد ورودی متنی


فیلد ورودی متنی با متن خطا



تأیید فرم

رنگ

متن خطا باید نشان دهنده پالت رنگ برنامه شما باشد. پیشنهاد میشود که برای خطاها از رنگ های متضاد و مشخص مانند قرمز یا نارنجی استفاده نمایید.
متن خطا باید خوانا بوده و کنتراست مشخصی با رنگ پس زمینه داشته باشد.
سایت هایی مانند webaim.org ابزارهایی برای چک کردن کنتراست رنگ ها ارائه میکنند.
فونت هایی برای پس زمینه های روشن
• خطا : Roboto Regular 12sp
• متن کمکی : #000000 با 38% شفافیت


فیلد متنی در حالت نرمال، نرمال به همراه متن خطا، نرمال له همراه متن کمکی و نرمال له همراه متن کمکی به عنوان خطا
فونت هایی برای پس زمینه های تیره
• خطا : Roboto Regular 12sp
• متن کمکی : #FFFFFF با 50% شفافیت


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

متن کمکی و متن خطا



مثال با متن کمکی


مثال با متن خطا


مثال با متن کمکی


مثال با متن خطا


فیلد متنی نرمال با متن کمکی و نرمال با متن کمکی و متن خطا


متن ورودی و متن خطا
ارتفاع قطعه : 64dp
padding بالای فیلد متنی : 16dp
padding پایین فیلد متنی : 8dp
padding بالا و پایین متن خطا : 4dp



خطا با متن برچسب شناور


برچسب متنی شناور با متن ورودی


برچسب متنی شناور با متن خطا


برچسب متنی شناور در حالت نرمال با متن کمکی و نرمال با متن خطا


مشخصات برچسب متنی شناور
ارتفاع قطعه : 80dp
padding بالای متن برچسب : 8dp
padding بالا و پایین متن ورودی : 8dp
padding بالا و پایین متن خطا : 4dp

ورودی فیلد متنی- کاراکترهای بیشتر/کمتر یا شمارش کلمه

شمارشگر کاراکتر میتواند قبل، بعد یا در زمان تعامل کاربر با یک فیلد نمایش داده شود. بهتر است شمارشگر کاراکتر را تا قبل از رسیدن کاربر به حداکثر تعداد کاراکتر مجاز، نمایش ندهید.
• فونت شمارشگر Roboto Regular 12sp میباشد.
• فیلدهای شمارشگر padding پایینی به اندازه 16dp دارند.

برچسب متنی یک خطی با شمارشگر کاراکتر


برچسب متنی یک خطی با شمارشگر کاراکتر و متن ورودی کاربر


برچسب متنی یک خطی با شمارشگر کاراکتر و متن خطا

فیلد متنی چند خطی با شمارشگر کاراکتر


برچسب متنی چند خطی با شمارشگر کاراکتر و متن ورودی کاربر


برچسب متنی چند خطی با شمارشگر کاراکتر و متن خطا


برچسب متنی یک خطی و چند خطی با متن ورودی کاربر و متن خطا


ورودی فیلد متنی
ارتفاع کل ناحیه ورودی : 88dp
padding بالای برچسب متنی یک خطی : 16dp
padding بالا و پایین متن ورودی در فیلد یک خطی : 8dp
padding بالای شمارشگر : 8dp



مقادیر ناسازگار

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

خطاهای موجود پس از تأیید فرم

فرم را scroll کنید تا خطاهای هر فیلد را ببینید.


فرم


خطاهای موجود پس از تأیید فرم


فرم تکمیل نشده

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

خطاهای چندگانه قبل از تأیید فرم

هر خطا را به صورت جداگانه در زمانی که کاربر در حال پر کردن فرم است مشخص نمایید.


فرم


فرم تکمیل نشده

خطای لیست ( یک خطی )


خطای لیست، یک خطی

خطای برنامه ای

خطاهای برنامه ای مستقل از ورودی کاربر اتفاق می افتند.

خطای برنامه ای کلی

زمانی که خطا رخ میدهد، برنامه باید علامت های در حال لود شدن (loading) را تا زمان ظاهر شدن پیام خطا، نمایش دهد.
ویژگی هایی که در دسترس نیستند ممکن است به عنوان غیرفعال در رابط کاربری نمایش داده شوند. برای مثال، یک دکمه در حالت غیرفعال میتواند همراه با متن توضیحی "غیرفعال" یا متن های توضیحی دیگر نمایش داده شود.
در صورت امکان، عملیاتی در اختیار کاربر قرار دهید که به واسطه آن بتواند خطا را بیابد.


دیالوگ هشدار: فیدبک برنامه درباره خطایی که باعث متوقف شدن عملیات نرمال برنامه میشود.


اسنک بار در پایین صفحه که فیدبک برنامه درباره یک خطای جانبی را نمایش میدهد.
اسنک بارها موقت هستند از آن ها برای پیام های خطای مهم و دائمی استفاده نکنید.

خطای همگام سازی در زمان لود

زمانی که عملیات همگام سازی به مشکل خورده یا محتوا لود نمیشود، کاربر باید بتواند با هر میزان از بخش های دیگر برنامه که امکان دارد تعامل داشته باشد.


عکس یا محتوایی که لود نشده است.


خطای متعلق به کانتینر/اجزاء همراه با عملیات

اتصال

زمانی که اتصال با مشکل مواجه میشود، کاربر باید بتواند با هر میزان از بخش های دیگر برنامه که امکان دارد تعامل داشته باشد.
در صورت امکان، لینکی قرار دهید که کاربر از طریق آن عملیات خود را انجام دهد. تنها لینک هایی را ارائه دهید که میتوانید کاملاً پشتیبانی نمایید. برای مثال، در مواردی که میدانید عملیات باز هم دچار مشکل شده و متوقف خواهد شد دیگر گزینه "Try again" قرار ندهید.


اسنک بار در پایین صفحه با عملیات retry


صفحه نمایشی که تنها در حالت آنلاین فعال است.

خطای عدم تکمیل

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

ناسازگاری کلی

دلیل خطا و مبدأ خطا را مشخص نمایید.
برای مثال، عکس برداری از صفحه (screenshot) و ویژگی های خاص در حالت محدود شده در دسترس نخواهند بود.

اسنک بار به همراه گزینه تنظیمات


آفلاین بودن بر حسب انتخاب

زمانی که کاربر آفلاین است ولی میخواهد عملیاتی انجام دهد که نیاز به آنلاین شدن دارد، یک علامت دائمی و نه چندان بزرگ و مشخص نمایش دهید.
مثال :
• نمایش علامت هواپیما در بالای گوشی در حالت Airplane mode
• نمایش پیام عدم دانلود موزیک در زمان آفلاین بودن



اسنک بار در پایین صفحه


علامت هواپیما در بالای صفحه در حالت Airplane mode

درخواست اجازه

چنانچه برنامه شما نیاز به اجازه کاربر قبل از ادامه یک عملیات میباشد، درخواست اجازه را در جریان برنامه قرار دهید و مانند یک خطا آن را نمایش ندهید.
اگر درخواست اجازه قبل از اولین اجرای برنامه باید باشد، آن ها را در اولین اجرای برنامه خود قرار دهید.
مثال :
• درخواست اجازه یک برنامه تغییر کرده است.
• خریدهای داخل برنامه ای غیرفعال شده اند.


دیالوگ

تاکنون نظری ارسال نشده است،شما اولین نفر باشید

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In