بازخورد UX در کشورهای خالی

1) کشورهای خالی چه هستند و چرا آنها مورد نیاز

یک حالت خالی یک صفحه/ویجت است که محتوای اصلی به طور موقت وجود ندارد: قبل از اولین اقدام، پس از تمیز کردن، با نتیجه صفر، با خطای دانلود، بدون حقوق/دسترسی.

• توضیح دهید که «چرا اینجا خالی است» ؛
• ارزش بخش را نشان می دهد ؛
• پیشنهاد گام بعدی روشن (و یا بیشتر را انتخاب کنید)
• کاهش اضطراب و جلوگیری از نظافت.

حالت خالی خوب = زمینه + سود + عمل.

2) نوع شناسی حالت خالی

1. first-time empty - کاربر هنوز چیزی را ایجاد/پیکربندی نکرده است.
2. Zero Search/Filter: نتیجه ای نمایش داده نشد.
3. Temporary void: داده ها بارگیری می شوند یا صف در حال اجرا است.
4. محدودیت/حق: عدم دسترسی، سطح تأیید ناکافی.
5. کاربر پاک شده: سطل بازیافت/تاریخچه پاک شده است.
6. مشکل فنی: خرابی شبکه/سرویس، بازپرداخت.

3) اصول طراحی

Contextuality: ما در مورد یک دلیل خاص برای خالی بودن صحبت می کنیم.
ارزش → عمل: اول چرا این بخش، پس چه باید بکنید.
یک CTA اصلی: در صورت لزوم - ثانویه (اطلاعات بیشتر/سوالات متداول).
اختصار و ویژگی: 1-2 جمله + دکمه روشن.
پشتیبانی بصری: نماد/تصویر از معنی پشتیبانی می کند، منحرف نمی شود.
اجتناب از بن بست: همیشه راهی وجود دارد.
ثبات تن: دوستانه و آرام ؛ بدون شوخی در مراحل بحرانی (پرداخت، امنیت).
A11y و محلی سازی: قابل خواندن توسط خواننده صفحه نمایش، به درستی تمایل، طول خطوط را در نظر می گیرد.

4) قاب حالت خالی (قالب)

عنوان (اختیاری، 1 خط) - ارزش ادعا یا دلیل.
متن (1-2 جمله) - «چرا خالی است» + «بعدی چیست».
CTA اصلی هدف اصلی است.
ACS/لینک ثانویه - راهنما/قوانین/مستندات.
بصری (اختیاری) - تصویر آسان 24-96 پیکسل، بیش از حد نیست.

5) الگوهای نوشته شده

5. 1 Onboarding/اول صفر

هدف: منجر به اولین اقدام موفقیت آمیز شود.
متن: «برای دیدن توصیه های شخصی، یک نمایه را پر کنید و منجر به انتخاب کنید».
CTA: Populate Profile/Leads را انتخاب کنید.
نکته: یک نشانگر میکرو نیرو/زمان اضافه کنید: «~ 1 دقیقه طول می کشد».

5. 2 جستجو/فیلتر = نتیجه صفر

هدف: کمک به تنظیم درخواست.

متن: «هیچ چیز در blackjack زنده یافت نشد «. «سعی کنید «بزور و با تهدید» و یا حذف «ارائه دهنده: X «فیلتر»

CTA: «تنظیم مجدد فیلترها» ثانویه: «دایرکتوری باز».

5. 3 پرداخت/کیف پول خالی است

هدف: برای تحریک روش علاوه بر/دوباره پر کردن برای اولین بار.
متن: «روش پرداخت خود را ذخیره کنید - دوباره پر کردن و برداشت سریعتر خواهد شد».
CTA: «اضافه کردن روش پرداخت» ثانویه: «قوانین و هزینه ها».

5. 4 تأیید/دسترسی

هدف: شفاف توضیح محدودیت و مسیر خروج.

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

CTA: «تأیید کنید» ثانویه: «چرا لازم است ؟»

5. 5 داده ها در حمل و نقل/موقت موقت

هدف: کاهش اضطراب انتظار.

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

CTA: «قابل درک» ثانویه: «چه اتفاقی می افتد بعد ؟»

5. 6 پس از تمیز کردن/حذف

هدف این است که عمل را تأیید کنید و مرحله بعدی را پیشنهاد دهید.

وی افزود: "تاریخ پاک شد. معاملات جدید پس از پر کردن بعدی ظاهر خواهد شد"

CTA: «بالا»

5. 7 خطا/بازپرداخت

هدف: یک مسیر روشن برای بهبود.

متن: "بارگیری داده ها شکست خورد. شبکه خود را بررسی کنید یا دوباره امتحان کنید

CTA: «تکرار» ثانویه: «وضعیت سیستم».

6) Microtexts: قالب های آماده

• بازی های انتخاب شده در اینجا ظاهر می شود زمانی که شما برای اولین بار اضافه کنید. [اضافه کردن به علاقه مندی ها]

• "چیزی برای "{query}" یافت نشد درخواست را اصلاح کنید یا فیلترها را بازنشانی کنید. [تنظیم مجدد فیلترها]"

• "شما هنوز هیچ روش ذخیره ای ندارید. یک کارت یا کیف پول برای سرعت بخشیدن به پرداخت خود اضافه کنید. [اضافه کردن روش]"

• این ویژگی بدون تایید سن در دسترس نیست. ~ 2 دقيقه طول ميکشه [تأیید سن] [چرا ؟]"

• ما در حال شمارش آمار 24 ساعت گذشته هستیم. این زمان معمولا تا 30 ثانیه است. وقتی کارت تموم شد یه پیام بهت میدیم"

• "سرویس در دسترس نیست. در حال تعمیر هستیم. لطفا بعدا امتحان کنید یا وضعیت را بررسی کنید. [تکرار] [وضعیت سیستم]"

7) زبان بصری و تصاویر

از تصاویر تک رنگ/دو تن استفاده کنید تا از بحث با CTA جلوگیری کنید.
ابعاد و تورفتگی - مانند یک کارت محتوا (سازگاری بصری).
صحنه های خنده دار را در سناریوهای استرس زا (پرداخت/امنیت) نشان ندهید.

8) محلی سازی و در دسترس بودن

قرار دادن سهام برای طول خطوط (DE/TR طولانی تر).
ترجمه فرمت های عددی، ارز، تاریخ به صورت محلی.
برای خوانندگان صفحه نمایش: نقش = «وضعیت»، aria-live = «مودب/قاطعانه» برای پویایی.
معنی را فقط در تصویر قرار ندهید: با متن تکرار کنید.
قابلیت خواندن 320 پیکسل و کنتراست WCAG را بررسی کنید.

9) معیارها و آزمایشات

• CTR در CTA اصلی خالی ؛
• تبدیل به «اولین موفقیت» (رویداد فعال سازی) ؛
• زمان برای اولین اقدام
• فرکانس بازگشت به صفحه نمایش بدون پیشرفت ؛
• درصد نتایج جستجوی صفر
• درخواست پشتیبانی سناریو

• یک سرصفحه خاص در مقابل مشترک ؛
• فعل عمل CTA در مقابل خنثی ؛
• اضافه کردن یک تخمین زمانی
• حضور CTA ثانویه (FAQ) و ترتیب دکمه ها ؛
• تصویر در مقابل آیکون در مقابل بدون بصری.

10) ضد الگوهای

«اینجا خالی است» بدون توضیح یا گام.
شوخی در مراحل بحرانی (پرداخت، امنیت).

یادگیری بیشتر CTA بدون زمینه

حق رهن منفعل: "باید اضافه شود. "به طور فعال بنویسید: "اضافه کردن"..
پاراگراف های طولانی: 1-2 جمله حداکثر.
جای نگهدارنده به جای برچسب در فرم ها - A11y و درک را بدتر می کند.
محدودیت های پنهان («لحظه ای»، اگر چه تاخیر ممکن است).

11) چک لیست قبل از انتشار

[روشن است که چرا خالی است ؟]

• آیا ارزش به بخش در یک جمله وجود دارد ؟

آیا یک CTA اصلی و در صورت لزوم یک CTA ثانویه وجود دارد ؟

• آیا متن کوتاه (≤ 140 کاراکتر) و خاص است ؟
• برآورد زمان/تلاش اضافه شده در صورت لزوم ؟
• تن بازی اسکریپت (آرام/حمایت) ؟
• محلی سازی و A11y بررسی می شود (ویژگی های آریا، کنتراست) ؟
• تصویر CTA غالب نیست ؟

12) قبل/بعد از نمونه

کاتالوگ بازی ها (اول صفر)

قبل از: «هنوز هیچ چیز در اینجا وجود ندارد»

وی افزود: "نوار را بردارید. 3 ژانر مورد علاقه را انتخاب کنید - بیایید شروع به توصیه کنیم. [انتخاب ژانرها]"

جستجوی صفر

پیش از: «هیچ چیز یافت نشد»

پس از: "با "رولت محدود" هیچ نتیجه ای وجود ندارد. فیلتر «محدودیت بالا» را حذف کنید یا رولت را امتحان کنید. «[تنظیم مجدد فیلترها]»

پرداخت ها

قبل: «بدون روش های پرداخت»

پس از: "ذخیره کارت یا کیف پول خود را - دوباره پر کردن و خروج سریع تر خواهد شد. [اضافه کردن روش] [هزینه ها و شرایط]"

تأیید اعتبار

قبل از: «بدون دسترسی»

پس از: "این بخش پس از تایید هویت در دسترس است. ~ 2 دقیقه طول می کشد. [دریافت تایید] [چرا مهم است]"

13) تعبیه در یک سیستم طراحی

• 'عنوان' (رشته، اختیاری)
• «بدن» (متن کوتاه 1-2 جمله)
• 'primaryAction {label, onClick}'
• 'secondaryAction {label, href/onClick}'
• 'icon/illustration' (اختیاری)

متون را در فایل های i18n در کنار جزء ذخیره کنید، کلید ها و توضیحات را حفظ کنید، نقشه تن (تن و واژگان برای شرایط) را متصل کنید.

14) سازنده سریع (کپی و استفاده)

• عنوان: با اولین قدم شروع کنید
• متن: «وجود خواهد داشت توصیه در اینجا به محض این که شما منافع را انتخاب کنید».
• CTA: «انتخاب فرصت ها»
• دوم: «چگونه کار می کند ؟»

• متن: "هیچ چیز توسط "{query}" یافت نشد تنظیم مجدد فیلترها یا اصلاح پرس و جو"
• CTA: «تنظیم مجدد فیلترها»
• ثانویه: «کاتالوگ»

• متن: "ویژگی های موجود پس از تایید سن. این معمولا تا 2 دقیقه است"
• CTA: «سن را تأیید کنید»
• پرسش دوم: «چرا لازم است ؟»

• متن: "ما اطلاعات را برای روز جمع آوری می کنیم. این زمان معمولا تا 30 ثانیه است. ما به شما اجازه می دانم زمانی که آن را انجام می شود"
• CTA: «خوب»

ورق تقلب نهایی

زمینه + ارزش + عمل - در یک «پشته».
یک CTA اصلی بدون رقابت در وزن بصری.
کوتاه و خاص: 1-2 جمله.
همیشه راهی برای خروج از بن بست: بدون صفحه نمایش بن بست.
محلی سازی و A11y در سطح جزء هستند.