web design uiMay 1, 20269 min read

حالت‌های خالی خودِ محصول‌اند

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

By Boone
XLinkedIn
Empty States Are the Product

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

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

حالت خالی سطح فعال‌سازی است

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

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

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

هر حالت خالی چه می‌گوید

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

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

سند خالی Notion تمیزترین نمونه‌ی صنعت است. یک پرامپت ملایم، یک راهنمای منوی اسلش، فوکوس فوری صفحه‌کلید. نه تصویر، نه صفحه‌ی خوش‌آمد. خودِ تایپ کردن فعال‌سازی است و حالت خالی همان محصول است.

پنج الگویی که طراحان مدام اشتباه می‌گیرند

بیشتر تیم‌ها «حالت خالی» را یک مسئله‌ی طراحی می‌دانند. پنج‌تاست. هرکدام در لحظه‌ای متفاوت ظاهر می‌شود، نقش متفاوتی در نگهداری دارد و به دلیل متفاوتی شکست می‌خورد.

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

۱. بدون داده، اولین اجرا

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

حالت اولین بازشدن Cursor یک درس است. یک پنجره‌ی ویرایشگر، یک پرامپت ملایم، یک فرمان نمونه آماده‌ی صفحه‌کلید. نه تور، نه رژه‌ی تولتیپ، نه مودال «به Cursor خوش آمدید». کاربر همان لحظه وسط کار است.

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

۲. بدون نتیجه از فیلتر

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

Linear فیلتر فعال، یک توضیح تک‌خطی و اقدام روشن «پاک کردن فیلترها» را نشان می‌دهد. داشبورد پرداخت‌های Stripe هم وقتی یک بازه‌ی زمانی نتیجه‌ای ندارد همین کار را می‌کند. صفحه ناپدید نمی‌شود. توضیح می‌دهد، بعد پیشنهاد می‌دهد.

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

۳. بدون دسترسی

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

نسخه‌ی خوب به کاربر احترام می‌گذارد. توضیح می‌دهد چه کسی می‌تواند دسترسی بدهد، یک دکمه‌ی تک‌کلیکی «درخواست دسترسی» می‌دهد و می‌گوید بعدش چه می‌شود. Slack وقتی به‌عنوان غیرعضو وارد کانال خصوصی می‌شوید همین کار را می‌کند. حالت خالی دیوار را به درگاه تبدیل می‌کند.

۴. بدون اتصال

کاربر محصول شما را باز کرده و هنوز به چیزی وصل نشده. Stripe پیش از هر پرداخت. Vercel پیش از هر استقرار. یک فضای کاری تازه‌ی Slack پیش از واقعی شدن کانال‌ها. بیشترین خطر ترک در اپلیکیشن، چون کاربر به یک محصول خالی خیره شده و هنوز متعهد نشده آن را پر کند.

حالت «هنوز پرداختی نیست» در Stripe Atlas یک کلاس درس است. نه نمودار خالی با صورتک غمگین. نوع فعالیتی را که داشبورد نشان خواهد داد نمایش می‌دهد، شما را به اولین یکپارچه‌سازی هدایت می‌کند و مستقیم به کلید API لازم لینک می‌دهد.

فهرست خالی پروژه‌های Vercel نقطه‌ی مقابل خلأ است. دکمه‌ی استقرار، گزینه‌ی ایمپورت، یک قالب نمونه، همه روی همان صفحه. اولین استقرار رویداد فعال‌سازی است و حالت خالی باند پروازش.

۵. بدون خروجی هوش مصنوعی

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

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

هر حالت خالی به چه چیزی نیاز دارد

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

  1. زمینه. بگویید کاربر به چه نگاه می‌کند و چرا خالی است. «هنوز مسئله‌ای نیست» کافی نیست. «در این چرخه مسئله‌ای نیست. اولی را با C اضافه کنید.» صفحه‌ای است که کارش را انجام می‌دهد.
  2. اقدام. یک اقدام اصلی، یک کلید، یک دکمه. اگر سه جمله می‌نویسید که به کاربر بگویید چه کند، طراحی غلط است.
  3. صدا. صدای سیستم وقتی چیز دیگری برای گفتن ندارد باید با بقیه‌ی برند بخواند. لحن خشک خطا داخل محصولی صمیمی جادو را می‌شکند.
  4. سلسله‌مراتب. عنوان، توضیح تک‌خطی، اقدام اصلی، لینک ثانویه‌ی اختیاری. چهار عنصر که سلسله‌مراتب بصری واقعی کارشان را می‌کند. بیشتر از این شلوغی است.
  5. حرکت. یک نشانه‌ی ملایم که صفحه زنده است. نشانگر چشمک‌زن، ضربان ظریف CTA، یک پیکان کوچک متحرک. علامتی که می‌گوید محصول منتظر کاربر است.

الگوهای شکستی که حالت‌های خالی را می‌کشند

شش الگو بیشتر از هر چیز دیگری حالت‌های خالی را می‌کشند.

تصویرسازی‌های طفره‌رو. کارتونی با کلیپ‌بورد. یک تلسکوپ. فضانوردی معلق. این‌ها جای کاری را می‌گیرند که صفحه باید می‌کرد و می‌گویند محصول آن‌قدر جدی نیست که متن واقعی بنویسد.

حالت‌های بن‌بست. «هنوز چیزی اینجا نیست» بدون قدم بعدی. یک 404 بدون راه فرار. یک 403 بدون مسیر دسترسی. هر حالت خالی بدون اقدام بعدی یک نشتی در نگهداری است.

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

تله‌ی inbox zero. طراحی جشن «همه‌چیز تمام شد» پیش از جریان «اولین اقدام». Superhuman inbox zero را با ماه‌ها کار واقعی به دست می‌آورد. بیشتر محصولات جشن را بدون استحقاق کپی می‌کنند و کاربر از روز اول حس تحقیر می‌کند.

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

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

ممیزی حالت خالی

رندر وکسلی از پشته‌ی کارت‌های چک‌لیست عمودی کج‌شده به سمت دوربین، هر ردیف با یک چک‌باکس مرجانی و یک نوار متن سفید، که اجرای یک ممیزی را تداعی می‌کند
رندر وکسلی از پشته‌ی کارت‌های چک‌لیست عمودی کج‌شده به سمت دوربین، هر ردیف با یک چک‌باکس مرجانی و یک نوار متن سفید، که اجرای یک ممیزی را تداعی می‌کند

هر حالت خالی را از این هفت سؤال رد کنید. اگر نمی‌توانید به همه‌شان یک «بله»ی روشن بدهید، صفحه تمام نشده است.

  1. آیا صفحه به کاربر می‌گوید کجاست و چرا خالی است؟ یک برچسب، یک توضیح تک‌خطی، یک دلیل. اگر باید حدس بزند، صفحه پیش از لود شدن شکست خورده.
  2. آیا دقیقاً یک اقدام اصلی هست؟ نه دو دکمه‌ی رقیب. یک اقدام که سلسله‌مراتب و کنتراست آن را بدیهی کرده، مثل بخش هیرو صفحه‌ای که واقعاً هست.
  3. آیا صدا با بقیه‌ی محصول جور است؟ کنار یک صفحه‌ی پر بلند بخوانید. اگر لحن عوض می‌شود، حالت خالی برند دیگری به تن کرده.
  4. آیا قدم بعدی با یک کلید یا کلیک شدنی است؟ نه «برو تنظیمات، بعد وصل کن، بعد برگرد.» یک حرکت. هر چیز بلندتر کاری است که حالت خالی باید جذب می‌کرد.
  5. آیا صفحه زنده حس می‌شود، نه رهاشده؟ یک نشانگر، یک ضربان، یک پیش‌نویس، یک اشاره. صفحه‌ی سفید ثابت حتی وقتی درست کار می‌کند خراب به نظر می‌رسد.
  6. آیا صفحه مخصوص آن الگو است؟ هر الگو ریسک و متن متفاوتی دارد. کامپوننت عمومی تکراری بوی بد است، نه سیستم.
  7. اگر کاربر فقط همین صفحه را ببیند، آیا محصول را می‌فروشد؟ اگر جواب نه است، حالت خالی بار خودش را نمی‌کشد، و بیشتر کاربران تازه محصول را با همین صفحه قضاوت می‌کنند.

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

اصل را انتخاب کنید، بعد صفحه را منتشر کنید

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

طراحی را از داشبورد شروع نکنید. از صفحه‌ای شروع کنید که چیزی رویش نیست. داشبورد پاداش است. حالت خالی قرارداد است.

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

فرق حالت خالی با حالت صفر چیست؟

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

آیا هر حالت خالی باید تصویرسازی داشته باشد؟

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

متن حالت خالی را چطور بنویسیم؟

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

اول صفحه‌ی خالی را طراحی کنید

صفحه‌ای که چیزی رویش نیست همان است که همه‌چیز را تعیین می‌کند. داشبورد و یکپارچه‌سازی‌ها روی اولین برداشتی سوارند که شاید عمداً طراحی‌اش نکرده‌اید. هزینه‌ی درست کردن آن صفحه یک هفته‌ی اضافه است. هزینه‌ی غلط کردنش منحنی نگهداری‌ای است که هیچ‌کس نمی‌تواند توضیحش بدهد.

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

Want a product where the empty states do the selling instead of the apologizing? Brainy designs first-run flows and zero states as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading