خطاهای اعتبارسنجی: چه هستند، چگونه بررسی کنیم که آیا باید حذف شوند، چگونه بر سئو تأثیر می گذارند. چرا به کد معتبر نیاز دارید و چگونه خطاهای اعتبار سنجی را رفع کنیم شرط خطا چیست

انسان ها تمایل به اشتباه دارند. باگ ها زمانی رخ می دهند که افراد با رابط های کاربری تعامل داشته باشند. گاهی اوقات این اتفاق می افتد زیرا کاربران اشتباه می کنند. گاهی اوقات خطاهایی در خود برنامه رخ می دهد. صرف نظر از علت، خطاها و مدیریت آنها تأثیر زیادی بر UX دارند. مدیریت نادرست خطا، همراه با پیام های خطای بی فایده، می تواند باعث واکنش منفی کاربر شود که متعاقباً باعث می شود کاربر از استفاده از برنامه شما امتناع کند.

در این مقاله، چگونگی بهینه‌سازی طراحی اپلیکیشن خود را برای جلوگیری از خطاهای کاربر و نحوه ایجاد پیام‌های خطا موثر در صورت بروز خطا بدون توجه به آنچه کاربر وارد می‌کند، بررسی خواهیم کرد. همچنین، به این خواهیم پرداخت که چگونه یک اشتباه خوب می تواند شکست را به تحسین تبدیل کند. Adobe یک اپلیکیشن طراحی و توسعه جدید به نام Experience Design (Adobe XD) معرفی کرده است که به شما امکان طراحی پروژه های تعاملی و حالت های خطا را می دهد. می توانید Adobe XD را به صورت رایگان دانلود و امتحان کنید.

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

صفحه نمایش با خطا

هر اشتباهی، صرف نظر از علت آن، به سدی برای کاربر در سفر UX تبدیل می‌شود. خوشبختانه، یک خطای خوب می تواند اثر ناخوشایند را کاهش دهد.

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

به عنوان مثال، اگر به افراد اجازه می دهید هتل ها را جستجو و رزرو کنند، چرا تاریخ های موجود را در گذشته رها کنید و اگر کاربر چنین تاریخی را انتخاب کرد، خطا ایجاد می کند؟

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

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

• زمان مناسب برای اطلاع رسانی در مورد خطاها (یا تکمیل موفقیت آمیز)
• محل صحیح پیام اعتبار سنجی
• رنگ صحیح پیام
• زبان پیام را پاک کنید

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

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

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

با این حال، باید از تأیید اعتبار هر ضربه زدن به کلید خودداری کنید زیرا در بیشتر موارد، قبل از اینکه کاربر تایپ پاسخ خود را به پایان برساند، نمی‌توانید داده‌ها را تأیید کنید. فرم هایی که در هنگام تایپ یک مقدار را تأیید می کنند، به محض شروع وارد کردن داده ها، کاربر را آزار می دهند.

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

میخائیل کونژویچ در مقاله خود " اعتبار سنجی رشته در اشکال - ایجاد تجربه! استراتژی‌های اعتبارسنجی مختلف را بررسی کرد و یک استراتژی ترکیبی پیشنهاد کرد: پاداش زودهنگام، مجازات دیرهنگام.

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

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

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

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

• پیام خطای بحرانی پیام هایی که در مورد یک خطای داخلی در کد برنامه صحبت می کنند یا حاوی متنی مانند: "خطای نوع 2 رخ داده است" مرموز و ترسناک هستند.

• خطای بن بست صرفاً به این دلیل که چنین پیام هایی هیچ اطلاعات مفیدی در اختیار کاربر قرار نمی دهند.

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

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

پست های خود را خوانا و مفید کنید - خطاها باید مؤدبانه، واضح و آموزنده باشند و شامل اطلاعاتی مانند:

• چه چیزی و چرا (احتمالا).
• کاربر برای رفع خطا چه کاری باید انجام دهد.

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

شوخ طبعی عمر را طولانی می کند. کمی شوخ طبعی هرگز ضرری ندارد و به کاهش سردرگمی یک اشتباه کمک می کند. می توانید نمونه های زیادی از پیام های خنده دار را در Littlebigdetails پیدا کنید. اینها بعضی از علایق من است:

• Basecamp: هنگامی که اعتبار سنجی فرم با شکست مواجه می شود، کاراکتر سمت چپ یک عبارت شگفت زده ایجاد می کند.

• هنگام ایجاد یک حساب کاربری جدید جیمیل، یک پیغام خطای کمی گستاخانه نمایش داده می شود.

با این حال، مراقب طنز باشید زیرا ممکن است همیشه در پیام خطای شما مناسب نباشد. بستگی به شدت خطا دارد به عنوان مثال، طنز برای یک مشکل اعتبارسنجی ساده مانند "خطای 404" به خوبی کار می کند (صفحه یافت نشد). اما زمانی که کاربر مدت زمان مشخصی را صرف مشاهده صفحه‌ای می‌کند که روی آن نوشته شده «اوه!» - به نظر نامناسب است.

صفحات خطای خوب کمکی برای کاربران هستند و باید شش معیار زیر را داشته باشند:

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

صفحه فرم ورود اغلب مینیمالیستی به نظر می رسد و شامل یک قسمت نام کاربری و یک فیلد رمز عبور است. اما مینیمالیسم برابر با سادگی نیست. دلایل زیادی وجود دارد که چرا یک کاربر ممکن است در صفحه ورود به سیستم گیر کند. قانون اصلی صفحه ورود - کاربر را مجبور به حدس زدن نکنید.

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

• کاربر نام خود را در سایت فراموش کرده است. اگر خطای مشابهی پیدا کردید، باید پیوندی ارائه کنید که کاربر بتواند آن را برطرف کند. به کاربر بگویید از کجا می تواند آن را دریافت کند (به عنوان مثال: "ایمیل خود را بررسی کنید، ما برای شما ایمیل فرستادیم") یا پیوندی برای بازیابی نام در سایت ارائه دهید.

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

کارت اعتباری ممکن است به دلایل مختلفی رد شود: یک خطای قالب‌بندی داده‌ها (اشتباه تایپی یا داده‌های از دست رفته) یا ممکن است کارت رد شود زیرا منقضی شده یا به سرقت رفته است. گابریل تومسکو، در مقاله خود آناتومی شکل کارت اعتباری، استراتژی زیر را برای هر دو خطا پیشنهاد کرد:

برای اولین مشکل، باید اعتبار رشته استاندارد و نشانگر خطای بصری را دنبال کنید:

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

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

تجزیه و تحلیل خطاهای اعتبار سنجی سایت

بالاخره بین یک سری سفارشات بی پایان وقت آزاد داشتم و تصمیم گرفتم وبلاگم را راه اندازی کنم. بیایید سعی کنیم آن را از نظر اعتبار سنجی بهبود دهیم. در زیر در مقاله به شما خواهم گفت که اعتبار سایت، کد html و css چیست، چرا به آن نیاز است و چگونه با استفاده از یک مثال خاص، سایت را به استاندارد برسانید.

اعتبار سنجی سایت چیست؟

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

یک مثال خاص از تأیید اعتبار برای یک صفحه وب سایت

بیایید صفحه اول سایت من را بگیریم - کدگذاری و رمزگشایی Base64 در جاوا 8. بیایید آدرس صفحه را در اعتبارسنجی پر کنیم و به نتیجه نگاه کنیم:

هنگام بررسی این سند به عنوان HTML 4.01 Transitional خطاهایی پیدا شد! نتیجه: 105 خطا، 67 هشدار بله، تصویر زشت است: بیش از صد خطا و 67 هشدار - موتورهای جستجو چگونه وبلاگ من و بازدیدکنندگان را فهرست می کنند؟ اما بیایید ناراحت نشویم، بلکه یاد بگیریم که چگونه اعتبارسنجی، تصحیح خطاها را انجام دهیم. پس اولین هشدار:

نمی توان حالت تجزیه را تعیین کرد! اعتباردهنده می تواند اسناد را به صورت XML (برای انواع سند مانند XHTML، SVG و غیره) یا SGML (برای HTML 4.01 و نسخه های قبلی) پردازش کند. برای این سند، اطلاعات موجود برای تعیین بدون ابهام حالت تجزیه کافی نبود، زیرا: نوع رسانه MIME (متن/html) را می توان برای انواع سند XML یا SGML استفاده کرد. را می توان در ابتدای سند یافت. هیچ فضای نام XML (به عنوان مثال) در ریشه سند یافت نشد. به عنوان پیش‌فرض، اعتبارسنجی به حالت SGML بازمی‌گردد. هشدار DOCTYPE پیدا نشد! بررسی با پیش‌فرض HTML 4.01 نوع سند انتقالی. هیچ اعلامیه DOCTYPE در این سند یافت یا شناسایی نشد. این به طور کلی به این معنی است که سند نوع سند خود را در بالا اعلام نمی کند. همچنین می تواند به این معنی باشد که اعلان DOCTYPE حاوی یک خطای املایی است یا از نحو صحیح استفاده نمی کند. سند با استفاده از یک تعریف پیش‌فرض نوع سند «بازگشت» بررسی شد که بسیار شبیه «HTML 4.01 Transitional» است. این همان است. و رفع آن ساده است: در همان ابتدای صفحه، برچسب را اضافه کنید:

کارهایی که انجام دادیم را بررسی می کنیم و می بینیم که تنها با این تگ 105 خطا و 3 اخطار را حذف کردیم! اکنون تنها 64 اخطار باقی مانده است. بیایید شروع کنیم به جدا کردن آنها یکی یکی.

هشدار: ویژگی type برای عنصر style مورد نیاز نیست و باید حذف شود. از خط 5، ستون 1؛ به خط 5، ستون 23 /x-icon">↩↩↩↩↩A این بدان معناست که عنصر style نیازی به ویژگی type ندارد - این اضافی است. ما دو نکته از این قبیل در صفحه داریم. یک هشدار مشابه برای جاوا اسکریپت:

هشدار: ویژگی type برای منابع جاوا اسکریپت غیر ضروری است. از خط 418، ستون 1؛ به خط 418، ستون 31 ↩↩$(doc ما 8 خطا داریم. این ویژگی ها را حذف می کنیم و تشویق می کنیم - 10 اخطار دیگر کمتر!

خطا: CSS: background: اولین آرگومان تابع گرادیان خطی باید به بالا باشد، نه بالا. در خط 39، ستون 61 0%,#E8E8E8 100%)؛↩ border-r خطای بعدی این است که اولین آرگومان خطی گرادیان باید به بالا باشد، نه بالا. بیا درستش کنیم خطای بعدی:

خطا: CSS: خطای تجزیه. از خط 65، ستون 13; به خط 65، ستون 16 حاشیه: 0 خودکار؛↩padd من css من در اینجا به اشتباه نظر داده است. فقط باید این خط را حذف کنید. یا نظر /* و */ را متفاوت بیان کنید. من این کار را به روش سابق انجام دادم.

خطا: CSS: @import بعد از هر عبارت معتبری غیر از @charset و @import مجاز نیست. در خط 88، ستون 74 0,600,700,300);↩@import url(// اکنون یک خطای وارد کردن داریم. ابتدای فایل و ناپدید خواهد شد.

خطا: مقدار بد _blanck برای ویژگی هدف در عنصر a: کلمه کلیدی رزرو شده خالی استفاده شده است. از خط 241، ستون 218; به خط 241، ستون 295 کوکی‌ها..php?id=98" target="_blanck" style="display: inline;">در اینجا بعد، مقدار مشخصه target را دوست نداریم، به ما گفته می‌شود که از "blank" استفاده کنیم. "بدون خط مقدم ما حذف می کنیم.

خطا: تگ پایان دیده شد، اما عناصر باز وجود داشت. از خط 379، ستون 2; به خط 379، ستون 6

↩ ↩↩