خانه / طراحی تجربه کاربری (UX) / بهترین UX برای صفحه خطای ۴۰۴

بهترین UX برای صفحه خطای ۴۰۴

بهترین UX برای صفحه خطای ۴۰۴

نویسنده:

زمان مطالعه 6 دقیقه

انتشار:

به‌روزرسانی:

تعداد نظرات: 0

مطمئنا برای شما هم پیش آمده روی یک لینک کلیک کنید و با خطایی مواجه شوید که نشان می‌دهد صفحه مورد نظر شما پیدا نمی‌شود. این صفحه خطای ۴۰۴ نام دارد.

صفحه مورد نظر شما در دسترس نیست!

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

بیشتر بخوانید: اشتباهات رایج در طراحی تجربه کاربری

صفحه خطای ۴۰۴ چیست؟

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

صفحه خطای ۴۰۴ چیست؟

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

صفحه ۴۰۴ باید شامل چه مواردی باشد؟

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

صفحه ۴۰۴ باید شامل چه مواردی باشد؟

یک صفحه خطای ۴۰۴ که تجربه کاربری (UX) عالی دارد باید ویژگی‌های زیر را داشته باشد:

  • اطلاع‌رسانی خطای ۴۰۴
  • طراحی یک صفحه مطابق با برند
  • داشتن لینک‌هایی به بهترین صفحات سایت
  • دکمه Call to Action
  • ساده و مفید بودن

در ادامه هر کدام از این موارد را به اختصار بررسی می‌کنیم.

اطلاع‌رسانی خطای ۴۰۴

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

  • اوه! صفحه پیدا نشد.
  • خطای ۴۰۴! صفحه مورد نظر شما پیدا نمی‌شود.
  • متاسفیم، ما نمی‌توانیم صفحه مورد نظر شما را پیدا کنیم.
  • اینترنت شما خراب نشده، ما نمی‌توانیم این صفحه را پیدا کنیم.
  • ما این صفحه را از دست دادیم.
  • صفحه مورد نظر شما در دسترس نیست.

صفحه ۴۰۴ را مطابق با برند خود طراحی کنید

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

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

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

لینک‌هایی به بهترین صفحات در صفحه خطا قرار دهید

لینک‌ها می‌توانند به شما کمک کنند تا بازدیدکنندگان را در سایت خود نگه دارید و به آن‌ها در ادامه گشت و گذار کمک کنید.

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

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

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

دکمه Call to Action

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

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

ساده و مفید باشید

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

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

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

۷ مثال‌ از صفحه خطای ۴۰۴ با UX عالی

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

۱- میل‌چیمپ (Mailchimp)

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

Mailchimp

۲- لگو (Lego)

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

Lego

۳- IMDb

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

IMDb

برندسازی در صفحه ۴۰۴ وبسایت IMDB با ظرافت خاصی انجام شده است؛ زیرا برای کاربران آن‌ همه چیز به سینما مربوط است و به احتمال زیاد نقل قول‌ها را تشخیص می‌دهند. در واقع این صفحه خطا یک تجربه خنده‌دار و لذت‌بخش را ایجاد می‌کند که برای یک صفحه ۴۰۴ عالی است.

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

۴- استارباکس (Starbucks)

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

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

۵- اسپاتیفای (Spotify)

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

Spotify

پس‌زمینه صورتی زیبا همراه با تصویر گرامافون، یک حس نوستالژیک ایجاد می‌کند و در مورد نوشته‌های این صفحه هم عالی عمل کرده‌اند. آن‌ها در مورد همه چیز در این صفحه فکر کرده‌اند؛ از دکمه‌ها گرفته تا این که صفحه وینیل دارای برچسب «۴۰۴» است.

۶- مدیوم (Medium)

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

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

۷- آمازون (Amazon)

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

Amazon

سخن پایانی

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

منابع:

justinmind.com | w3-lab.com

با ما همراه شوید!

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

سوالات متداول

دیدگاه‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *