یکی از ارورهای شایعی که هنگام کار کردن در فضای اینترنت با آن مواجه میشوید صفحه ارور 404 است که معمولا با متنی به شکل «صفحه مورد نظر یافت نشد» همراه میشود؛ این ارور زمانی اتفاق میافتد که وارد صفحهای بشوید که وجود ندارد.
پیامی که در این صفحه ارور 404 طراحی میشود باید به گونهای باشد که تاثیر منفی بر روی کاربر نگذارد؛ همچنین باید علاوه بر اینکه دلیل بوجود آمدن این ارور را ارائه میکند، کاربر را دوباره به راحتی به صفحه اصلی سایت بازگرداند.
معمولا اینگونه است که کاربران با دیدن صفحه ارور 404 در هنگام وبگردی، بسیار اعصابشان خرد میشود و احساس خوبی به آنها دست نمیدهد. خیلی از سایتهای پرطرفدار، صفحه ارور 404 خود را به گونهای طراحی کردهاند که احساس خوشآیندی به کاربر میدهد، با استفاده از اندکی شوخ طبعی دوباره او را به صفحه مناسب هدایت میکنند.
ما در این مطلب میخواهیم اهمیت این مسئله را به شما نشان دهیم و اکید کنیم که در هنگام طراحی سایتتان نباید از این صفحه غافل شوید؛ باید به اندازهی کافی برای طراحی مناسب آن وقت بگذارید زیرا برای کاربران بسیار اهمیت دارد. در ادامه به ۲۴ نمونه از صفحه ارور 404 میپردازیم که به شما نشان میدهند چگونه میتواند طراحی خوب و کاربر محوری از این صفحه انجام دهید.
۱. Adobe
صفحه ارور 404 در سایت Adobe در حال حاضر، تصویر ویژوال بزرگ و زیبایی است که در سمت راست قرار گرفته و پیام کوچکی را در مرکز خود حک کرده است. عبارت « صفحه ارور 404» در زیر نوار بالایی سایت قرار گرفته است؛ این باعث میشود که در نگاه اول به چشم نیاید و توجه کار به سمت تصویر و متن مرکزی جلب گردد. متن مرکزی یا همان توضیحات از یک اصطلاح عامیانه به همراه کمی مزاح استفاده میکنند که باعث احساس خوبی در کاربر میگردد؛ البته لازم نیست همه متوجه این اصطلاح و شوخی هم بشوند؛ به هر حال پیام به زبان ساده و روشن در بالای صفحه نوشته شده: «صفحه مورد نظر یافت نشد». در این سایتی دلیلی برای رخ دادن این ارور ارائه نشده است.
کاربر در مواجهه با این صفحه ۲ گزینه پیش روی خود دارد. یکی این که به صفحه اصلی سایت بازگردد و دیگری گزینه جستجو است که از طریق آن میتواند آیتمی را که به دنبال آن بوده در قسمتهای دیگر سایت جستجو کند.
تصویر بزرگی که با اصطلاح استفاده شده همخوانی دارد به درستی در جای خود قرار گرفته و حسابی جلب توجه میکند؛ همچنین مانند بسیاری از سایتهای دیگر گزینهی ورود به سایت و لینک به صفحات پر استفاده هم قرار گرفته است.

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

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

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

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

۶.DesignerNews
این سایت یکی از سادهترین نمونههای صفحه ارور 404 را دارد. تصویر آبی رنگی که عدد 404 با فونت بزرگ بر روی آن حک شده است؛ بدون هیچ توضیحات اضافه و قسمت متنی. در واقع آنها فرض کردهاند که کاربر در طی استفادهی زیاد از اینترنت میداند که ارور 404 چیست و نیازی به توضیحات بیشتر وجود ندارد. اما این به هیچ عنوان فرض درستی نیست و طراح نباید چنین علامت سوال بزرگی برای کاربران ایجاد کند. در انتهای پایین صفحه نیز لینکه به صفحهی اصلی قرار داده شده است.

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

۸.Ebay
صفحه ارور 404 این سایت معروف، یکی از نمونههای ساده است و شامل تمام گزینههای مرسومی که در دیگر سایتها دیدهاید میشود. پیام اصلی در مرکز صفحهای سفید و ساده قرار گرفته است. هیچ دلیل مشخصی برای بالا آمدن این صفحه ذکر نشده است. لینک به صفحهی اصلی در دسترس کاربر قرار دارد تا بتواند به راحتی از ابتدای سایت کار خود را شروع کند. همچنین لینک به صفحهای برای کمک گرفتن و راهنمایی کاربر در صفحه ارور 404 تعبیه شده است. همچنین در بالای صفحه امکان جستجوی درون سایت نیز وجود دارد.

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

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

در این مقاله، ۱۰ نمونه از طراحیهای صفحه خطای ۴۰۴ در دنیا را بررسی کردیم. در مقاله بعدی، ۱۴ مورد دیگر را نیز مورد بررسی قرار خواهیم داد؛ منتظر بخش دوم این مقاله باشید.