طراحی صفحات ۴۰۴: نکات کلیدی + برترین نمونه‌ها

هرکسی که در صفحات وب چرخی زده باشد، حداقل یک بار با خطای ۴۰۴ برخورد کرده است. محتوای این خطا یک چیزی در این مایه‌هاست که «ای بابا، پس چرا این صفحه‌ای که دنبالش میگشتی پیدا نشد!؟» این خطا یکی از خطاهای سرور HTTP است که در این مطلب مفصلاً در مورد آنها و علت بروزشان صحبت کردیم. اما در این مطلب میخواهیم علت به وجود آمدن خطای ۴۰۴، نکات اساسی در طراحی صفحات ۴۰۴ برای ایجاد تجربه کاربری (UX) موثر و در نهایت نمونه‌های موفق ایرانی و خارجی این صفحات را بررسی کنیم.

چرا خطای ۴۰۴ پیش می‌آید؟

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

بروز خطاهایی مثل خطای ۴۰۴، از جمله مسائلی است که تجربه کاربری (UX) بدی برای مخاطبین سایت رقم می‌زند. اما اگر صفحه ۴۰۴ را درست طراحی کنیم، نه تنها تاثیرات منفی ناشی از برخورد با این صفحه را تا حد ممکن جبران کرده‌ایم، که حتی می‌توانیم کاری کنیم که کاربر بعد از دیدن این خطا لبخند روی لبانش بنشیند و سایت ما را ترک نکند!

چه نکاتی در طراحی تجربه کاربری صفحات ۴۰۴ اهمیت دارد؟

برای طراحی بهتر صفحات ۴۰۴، کافیست چند سوال از خود بپرسیم:

• چه کسی باعث شده این اتفاق بیفتد؟
• دقیقاً چه اتفاقی افتاده و چرا؟
• چه زمانی این مشکل رفع خواهد شد؟
• چطور می‌توانم این مشکل را برطرف کنم؟
• آیا در این صفحه رد و نشانی از کسب و کار من وجود دارد؟
• آیا صفحه ۴۰۴ سایت من آنقدر هیجان انگیز است که بتواند کاربر را جذب کند؟

با جواب دادن به این سوالات، می‌توانیم چارچوب ایده‌آلی برای صفحات ۴۰۴ خودمان بسازیم.

نکته ۱: از دل کاربر در بیاورید

چه کسی باعث شده این اتفاق بیفتد؟ مقصرِ رخ دادن این خطا هر کسی که باشد، ما باید در انتخاب ضمیر مناسب برای جملاتمان دقت داشته باشیم. باید طوری با کاربر صحبت کنیم که از ما دلخور نشود؛ مثلا ایده خوبی است که از عباراتی مثل «اوه ببخشید» در ابتدای صفحه استفاده کنیم. به این نمونه‌ها دقت کنید:

• ما نتوانستیم این صفحه را برایتان پیدا کنیم :(
• صفحه‌ای که شما دنبالش می‌گشتید پیدا نشد.
• بنظر می‌رسد این صفحه وجود ندارد.

نکته ۲: علت مشکل را برای کاربر توضیح دهید

چه اتفاقی افتاده و چرا؟ شاید کاربری که به این صفحه هدایت شده، چندان تخصصی در امور کامپیوتری نداشته باشد. چنین کاربری قطعاً نخواهد فهمید که خطای ۴۰۴ چیست و به چه دلیلی رخ داده است. پس صرف نوشتن یک ۴۰۴ بزرگ در صفحه کفایت نمی‌کند؛ باید به زبان ساده به کاربر توضیح دهیم که چرا به این صفحه رسیده است. به مثال زیر نگاه کنید:

نکته ۳: دائمی بودن صفحات ۴۰۴ را فراموش نکنید

چه زمانی این مشکل رفع خواهد شد؟ صفحه ۴۰۴ با صفحه Maintenance یا به اصطلاح «در دست تعمیر»، فرق دارد. صفحه ۴۰۴ همیشه در سایت شما وجود خواهد داشت، اما صفحه «در دست تعمیر» موقتی است و پس از بر طرف کردن مشکل یا به روز رسانی از بین می‌رود. پس باید حواسمان باشد که محتوای هرکدام از این صفحه‌ها را متناسب با هدفی که دارند تنظیم کنیم. برای صفحاتی مثل آپدیت سرور، معمولاً باید به کاربر پاسخ بدهیم که سایت چه زمانی به حالت اولیه برخواهد گشت، و یا اینکه کاربر از چه طریقی می‌تواند پیگیر درست شدن سایت باشد. در این صفحه‌ها، بهترین راه ارجاع دادن کاربر به شبکه‌های اجتماعی است.

۴. کاربر را به صفحات دیگر هدایت کنید

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

قرار دادن لینک‌های مفید و مرتبط:

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

باکس جستجو:

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

گزارش دادن خطا:

به کاربران خود این امکان را بدهید تا خطای به وجود آمده را گزارش دهند. این‌ کار می‌تواند تجربه خوبی برای او رقم بزند و تاثیر مثبتی رویش بگذارد. مثلاً دکمه ای را طراحی کنید و در کنار آن بنویسید «این صفحه را گزارش دهید و به صفحه اصلی برگردید.» با این کار نه تنها کاربر را راضی نگه می‌دارید، که صفحات مشکل‌دار را هم بدون هیچ زحمتی شناسایی کرده و به لینک‌های معتبر ریدایرکت می‌کنید!

فرصت ساختن از خطاها:

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

برندسازی و شوخ طبعی:

مارکتینگ تنها چیزی نیست که با صفحه ۴۰۴ می‌شود بهبودش داد؛ خیلی از به یاد ماندنی‌ترین صفحات ۴۰۴ آنهایی هستند که شرکت با کمی خلاقیت و مزه‌پرانی، از آنها در جهت اهداف برندسازی خود استفاده کرده است. مثلا اگر گذرتان به صفحه ۴۰۴ فیسبوک بیفتد، با یک شصت زخمی مواجه خواهید شد! هم بامزه است، و هم لوگوی فیسبوک در آن به کار گرفته شده است.

نمونه‌های صفحه ۴۰۴ در سایت‌های ایرانی و خارجی

۱. آپارات

یکی از بهترین صفحات ۴۰۴ ایرانی از نظر رعایت اصول تجربه کاربری، متعلق به سایت آپارات است. استفاده از رابط گرافیکی بامزه و زیبا، لوگو در جهت برندسازی و استفاده از لینک به صفحه اصلی هم از وجوه برتر این صفحه هستند و به همراه هم تاثیر خوبی روی کاربر می‌گذارند.

۲. دیجی‌کالا

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

۳. علی‌بابا

با گذاشتن لیست محصولات در این صفحه، علی‌بابا به کاربری که راهش را گم کرده کمک می‌کند که سریع تر به هدف مورد نظرش دسترسی پیدا کند. همچنین از کلمه «متاسفانه» استفاده شده و امکان رفتن به صفحه اصلی از طریق لینک هم وجود دارد.

۴. اسنپ‌فود

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

۵. سایت Inriality

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

۶. ناسا

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

۷. آمازون

هر بار که وارد صفحه ۴۰۴ آمازون شوید، یکی از سگ‌های بامزه کارمندان این شرکت به استقبال شما خواهد آمد! حتی اگر کاربر در گذشته با این صفحه روبرو شده باشد، باز هم صفحه برایش تازگی خواهد داشت؛ چون سگی که می‌بیند با دفعه قبلی متفاوت است. خلاقیت به کار رفته در این صفحه و دوست‌داشتنی بودن المان آن کاربر را تحت تاثیر قرار می‌دهد و خاطره خوشی در ذهن او باقی می‌گذارد. در کنار همه این جذابیت‌ها، آن لینک «از سگ‌های بامزه آمازون دیدن کنید» به مطلبی باز می‌شود که از مزایای محیط کار آمازون برای سگ‌ها می‌گوید و یک جور مارکتینگ برای کارجویان هم هست.

در مطلب‌های قبلی کوئرامگ درباره UX بیشتر بخوانید:

• هفت پدیده مهم روانشناسی در طراحی تجربه کاربری

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