طراح، تحلیلگر، برنامهنویس بک اند و مدیر دیتابیس. علاقمند به فیلم و سریال، اهل پادکست و سفر، طرفدار زندگی و عاشق گفتگو :)
الزامات طراحی صفحات 404، بررسی بهترین روشها
صفحهی 404، صفحهای است که هیچ برنامهنویسی دوست ندارد که کاربران سایت با آن مواجه شوند و البته چه دوست داشته باشیم و چه دوست نداشته باشیم، کاربران ما با این صفحه مواجه خواهند شد.
تجربه کاربران در مواجه با صفحه 404 ناراحت کننده و ناخوشایند است. هیچکس دوست ندارد که به یک آدرس نامعتبر هدایت شود. هر چند به دلیل وجود لینکهای شکسته، اشتباه در تایپ، کپی ناقص آدرس و .. برخورد کاربران با این صفحه اجتناب ناپذیر است.
برای رسیدن به یک صفحهی 404 ایدهآل باید با آن به عنوان یک صفحهی ورود (Landing Page) برخورد کرد. البته تلاش حداکثری باید بر این باشد که کاربران کمتری با این صفحه برخورد کنند. همچنین اینگونه صفحات معمولا نرخ پرش بالایی دارند، باید تلاش شود که هر چقدر که امکان دارند نرخ پرش این صفحات کاهش پیدا کند.
صفحه 404 باید شامل چه موارد باشد؟
برای عدم گسست تجربهی کاربری در کل سایت، در صفحهی 404 حداقل موارد زیر باید رعایت شود:
- توضیح مناسب برای آنچه رخ داده است: کاربر باید در لحظهی اول و بدون هیچ تلاشی متوجه وجود خطا شود. استفاده از صفحه نمایش خطای پیشفرض برای کاربران و نمایش دادن عناوینی مانند Internal server error و File or directory not found آن هم به صورت انگلیسی باید جز جنایت علیه بشریت دستهبندی شود.
- یکپارچگی در ظاهر: نام پایگاه، لوگو و قالب اصلی سایت باید در این صفحه نیز نمایش داده شود.
- لینک دادن به صفحات اصلی پایگاه: حداقل بین 3 تا 4 لینک به محتوای اصلی سایت مانند خانه، لیست اصلی پایگاه و .. باید در این صفحه وجود داشته باشد. البته افراط بیش از حد در لینک دادن موجب سردرگمی کاربر میشود.
- فراخوانی برای اقدام (Call to action) : کاربران در مواجه با این صفحه نباید تصور کنند که کنترل جریان بازدید سایت را از دست دادهاند. وجود کادر جستجو همیشه در این صفحه قابل دفاع است.
- داشتن کمی خلاقیت: برای کاهش تجربهی ناخوشایند برخورد کاربر با صفحهی 404 وجود لحن کمتر رسمی و کمی هم شوخی فکر چندان بدی به نظر نمیرسد. هر چند زیادهروی در هر کاری ناپسند و موجب دور شدن این صفحه از کارکرد اصلی آن میشود.
- ساده نگه داشتن همه چیز: قرار نیست که کاربر در این صفحه برای مدت طولانی نگه داشته باشد. این صفحه باید محلی برای شروع مجدد گشت و گذار در پایگاه باشد. ساده و سبک نگه داشتن این صفحه یک رویکرد کاملا منطقی میباشد.
نگه داشتن کاربر در صفحه 404 یا تغییر مسیر کاربر به یک صفحهی دیگر؟
برای انتخاب کردن بین دو گزینهی نگه داشتن کاربر در صفحهی 404 یا تغییر مسیر کاربر (Redirect) به صفحهی دیگر به صورت خودکار در هنگام مواجه با صفحهی 404 دو رویکرد زیر را همیشه به خاطر بسپارید:
- اگر صفحهای داشتید که ورودی زیادی از گوگل دریافت میکرد و به هر دلیل تصمیم به حذف این صفحه با صفحهی مشابه دیگر گرفتید، در صورت بازدید کاربر از این صفحه میتوانید کاربر را به صورت مستقیم به صفحهی جدیدتر هدایت کنید.
- در مابقی موارد نگهداشتن کاربر در صفحهی خطا موجب شفافیت بیشتر برای کاربران میشود. فرستادن یک کاربر به یک صفحهی ناخواسته بدون اینکه اطلاع رسانی مناسبی در این باره صورت بگیرد، قطعا یک تجربه ناخوشایند برای کاربر خواهد بود.
در هنگام مواجه با صفحهی 404، تحت هر شرایطی کاربر را به صفحهی اصلی پایگاه هدایت نکنید. جز احساس ناخوشایند سردرگمی هیچ چیزی عاید کاربر نخواهد شد.
بهترین صفحات 404 موجود برای الهام گرفتن
مشاهده و بررسی سایتهایی که صفحهی 404 را به بهترین نحو ممکن پیادهسازی کردهاند، میتواند الهامبخش یک طراحی مناسب برای این صفحه شود.
توضیح مناسب علتهای مختلف رخ دادن خطا، کارهایی که کاربر میتواند انجام دهد و از همه مهمتر گزارش وجود خطا در وب سایت، این صفحه را به یک الگوی مناسب تبدیل میکند.
2- Medium
توضیح اتفاق رخ داده با بالاترین فونت ممکن، وجود کادر جستجو جهت دادن کنترل به کاربر و از همه جالب، همدردی با کاربر و نمایش سه مقاله مرتبط با گم شدن به کاربر، نبوغ کامل طراحان این صفحه را نمایش میدهد.
3-lego
کاربرتان به صفحهی ناخواستهی 404 هدایت شده است؟ تهدید را به فرصت تبدیل کنید و آن را به صفحهی فروشگاه خود هدایت کنید. این دقیقا کاری است که مدیران فروشگاه Lego در پایگاه خود انجام میدهند.
4- path.blue
از محتویات پایگاه خود به صورت خلاقانه استفاده کنید. نمایش یک نقشه از حضور مابقی کاربران، تعیین یک نقطه خارج از نقشه جهت نمایش موقعیت فعلی کاربر و توضیحات مناسب نشاندهی خلاقیت منحصر به فرد طراحان تجربهی کاربری این پایگاه میباشد.
مطلبی دیگر از این انتشارات
ترندهای تایپوگرافی در سال 2020
مطلبی دیگر از این انتشارات
مسیرهای رشد پیش روی دیزاینرها
مطلبی دیگر از این انتشارات
راهنمای طراحی تکست فیلد (Text fields)