طراحی رابط حالت خالی: وقتی محتوا وجود ندارد، گام بعدی را روشن کنید
چارچوبی کاربردی برای طراحی حالت‌های استفاده نخست، بدون نتیجه، داده پاک‌شده و خطا، با متن راهگشا، اقدام‌های روشن و جلوه‌های بصری متناسب با زمینه.
پنل خالی مبهم است. ممکن است فرد نداند اپلیکیشن هنوز بارگذاری می‌شود، جست‌وجویش نتیجه نداده یا باید چیزی اضافه کند. حالت خالی مفید می‌گوید چه رخ می‌دهد و کمک می‌کند فرد گام بعدی را انتخاب کند.
با شناسایی علت نبود محتوا شروع کنید. استفاده نخست، بی‌نتیجه بودن جست‌وجو، پاک شدن عمدی داده‌ها و خطای سیستم به پیام‌ها و اقدام‌های متفاوت نیاز دارند. نمونه‌های اینجا تمرین‌های فرضی طراحی‌اند، نه مطالعه موردی محصول یا ادعایی درباره عملکرد.
نکته‌های کلیدی
- پیش از انتخاب متن، تصویر یا اقدام، دلیل نبود محتوا را دسته‌بندی کنید.
- بازخورد بارگذاری و شکست را از نتیجه خالی تأییدشده جدا نگه دارید.
- عنوانی مشخص، در صورت نیاز توضیحی کوتاه و گام بعدی مرتبط بنویسید.
- وضعیت را در بسترش بررسی کنید؛ از جمله دسترس‌پذیری، چیدمان باریک و مسیرهای بازیابی.
۱. علت خالی بودن فضا را تشخیص دهید
حالت خالی را گزارشی درباره محصول بدانید، نه فرصتی صرفاً برای تزیین. بپرسید درست پیش از نمایش صفحه چه رخ داده، سیستم چه می‌داند و آیا فرد می‌تواند وضعیت را تغییر دهد. NN/g حالت‌های خالی را فرصتی برای بیان وضعیت، پشتیبانی از یادگیری و فراهم کردن مسیر ورود به کارهای اصلی می‌داند. استفاده از این فرصت‌ها ابتدا به تشخیص درست وضعیت بستگی دارد.
به‌ویژه وقتی درخواست هنوز در حال اجراست، «هیچ موردی نیست» نشان ندهید. تا معلوم شدن نتیجه، نشانگر بارگذاری یا اسکلت صفحه را نگه دارید. اگر درخواست شکست خورد، خطا و راه بازیابی را توضیح دهید. اگر با صفر مورد موفق شد، بگویید محتوای منطبق وجود ندارد. این تمایز نمی‌گذارد افراد تأخیر موقت یا مشکل سیستم را نتیجه واقعی تصور کنند.
| وضعیت | معنی آن | پاسخ مفید |
|---|---|---|
| استفاده نخست | قابلیت آماده است، اما فرد هنوز چیزی اضافه یا ایجاد نکرده است. | توضیح دهید چه چیزی اینجا قرار می‌گیرد و راه مستقیمی برای ساختن، افزودن یا کاوش ارائه کنید. |
| بدون نتیجه | جست‌وجو، فیلتر یا بازه تاریخ با موفقیت پایان یافته اما مورد منطبق ندارد. | بی‌نتیجه بودن معیارها را تأیید کنید؛ تغییر مرتبطی پیشنهاد دهید یا امکان پاک کردن فیلتر را فراهم کنید. |
| داده پاک‌شده | فرد مواردی را که معمولاً اینجا دیده می‌شوند تکمیل یا حذف کرده است. | تکمیل کار یا نتیجه خالی را بدون القای وجود مشکل تأیید کنید؛ اگر مفید است کار دیگری پیشنهاد دهید. |
| خطا | سیستم نتوانسته محتوای موردانتظار را دریافت یا نمایش دهد. | به زبان ساده بگویید چه چیزی شکست خورده و اقدامی برای بازیابی، مانند تلاش دوباره، ارائه کنید. |
| بارگذاری | سیستم هنوز مشخص نکرده محتوایی وجود دارد یا نه. | پیشرفت یا وضعیت بارگذاری را نشان دهید؛ نتیجه خالی را زودتر از موعد اعلام نکنید. |
۲. متنی بنویسید که با علت سازگار باشد
از عنوان برای نامیدن وضعیت و از متن پشتیبان برای توضیح معنی یا راه ادامه استفاده کنید. عنوان را آسان‌خوان نگه دارید. تنها وقتی جمله‌ای اضافه کنید که به پرسشی واقعی پاسخ می‌دهد. راهنمای نگارش Apple گام‌های بعدی روشن در صفحه‌های خالی، برچسب‌های اقدام‌محور و پیام‌های خطای مستقیمی را توصیه می‌کند که راه رفع مشکل را توضیح می‌دهند. از شوخی‌هایی که معنی را مبهم می‌کنند، عنوان‌های کلی مانند «اینجا چیزی نیست» و متنی که فرد را سرزنش می‌کند دوری کنید.
برای مثال، صفحه فرضی موارد ذخیره‌شده در استفاده نخست می‌تواند بگوید «راهنماهای ذخیره‌شده شما اینجا نمایش داده می‌شوند» و سپس «راهنمایی را ذخیره کنید تا بعداً به آن برگردید»، همراه با دکمه «مرور راهنماها». فهرست کارهای تکمیل‌شده می‌تواند بگوید «همه کارها انجام شد» و «نمایش کارهای تکمیل‌شده» را ارائه کند. این نمونه‌ها واقعیت‌های متفاوتی را توصیف می‌کنند: یکی راه پر کردن یک قابلیت را می‌آموزد و دیگری نتیجه موفق را تأیید می‌کند.
برای جست‌وجوی موفق بدون مورد منطبق، پیام فرضی می‌تواند بگوید «هیچ پروژه‌ای با «orchid» منطبق نیست» و پیشنهاد کند «واژه گسترده‌تری امتحان کنید یا فیلترها را پاک کنید». عبارت جست‌وجو را حفظ کنید و تغییر فیلتر را در صورت امکان برگشت‌پذیر سازید. برای خطای شبکه، بنویسید «پروژه‌ها بارگذاری نشدند» و گزینه «تلاش دوباره» بدهید. وقتی سیستم نتوانسته بررسی کند، ادعا نکنید پروژه‌ای وجود ندارد.
- شیء یا معیار مرتبط را نام ببرید تا پیام بیرون از زمینه نیز معنی داشته باشد.
- روی دکمه از فعل استفاده کنید، مانند «ساخت پروژه»، «پاک کردن فیلترها» یا «تلاش دوباره».
- دستورها را کنار محتوای مربوط بگذارید و در کنار رنگ یا تصویر از متن هم استفاده کنید.
- از «وای»، سرزنش و کدهای فنی دوری کنید، مگر اینکه افراد برای حل مشکل به آن‌ها نیاز داشته باشند.
۳. گام بعدی را مفید کنید، نه اجباری
وقتی فرد می‌تواند به‌طور معقول وضعیت را تغییر دهد یا کارش را ادامه دهد، اقدامی ارائه کنید. استفاده نخست اغلب از اقدام ساختن یا افزودن سود می‌برد؛ بی‌نتیجه بودن ممکن است با برداشتن یک محدودیت حل شود؛ خطا می‌تواند گزینه تلاش دوباره داشته باشد. صندوق ورودی پاک‌شده یا تمرین ورزشی تمام‌شده ممکن است اصلاً به اقدامی نیاز نداشته باشد. فقط برای تعاملی نشان دادن پنل، در هر وضعیت دکمه نگذارید.
بازیابی را متناسب نگه دارید. خطا در تازه‌سازی معمولاً توضیح درون‌صفحه‌ای و تلاش دوباره می‌خواهد، نه هشدار مسدودکننده. Apple توصیه می‌کند بازخورد با اهمیت اطلاعات تناسب داشته باشد و هشدارها به وضعیت‌های بحرانی و قابل‌اقدام محدود شوند. در جست‌وجو، کار فرد را حفظ کنید و به‌جای تغییر بی‌سروصدای عبارت، اصلاحات معقول پیشنهاد دهید. Material Design نیز محتوای آغازین، آموزش کوتاه یا بهترین نتیجه‌های با برچسب روشن را به‌عنوان جایگزین پیشنهاد می‌کند، وقتی واقعاً کمک می‌کنند.
تصویر را فقط وقتی به کار ببرید که زمینه، گرما یا شناخت اضافه می‌کند. نباید با پیام رقابت کند یا باعث شود فرد تصویر تزیینی را تعاملی بپندارد. برای نتیجه فیلتر در فضای کوچک، نمادی ساده شاید کافی باشد؛ فضای کار در استفاده نخست می‌تواند از نمونه کوچکی از محتوایی که قرار است نگه دارد سود ببرد. اگر محتوای آغازین می‌گذارید، شناسایی و حذف آن را آسان کنید.
- یک اقدام اصلی انتخاب کنید که مستقیماً به علت وضعیت پاسخ می‌دهد.
- فقط وقتی مسیر کمک فرعی اضافه کنید که به پرسش محتمل بعدی پاسخ می‌دهد.
- وقتی نتیجه خالی خبر خوبی است، پیام تکمیل آرامی نشان دهید.
- مطمئن شوید اقدام برای کاربران صفحه‌کلید و صفحه‌خوان هم فهم‌پذیر است.
۴. کل وضعیت را بررسی کنید، نه فقط تصویر را
وضعیت را در ظرف واقعی‌اش بررسی کنید: نمای تمام‌صفحه استفاده نخست، نوار کناری کوچک و جدول فیلترشده به فضا و سلسله‌مراتب متفاوتی نیاز دارند. پیام را نزدیک ناحیه‌ای بگذارید که توصیف می‌کند. مطمئن شوید با بزرگ شدن یا شکستن متن خوانا می‌ماند و اقدام اصلی بدون اتکا به تشخیص رنگ پیدا می‌شود. گذارها را هم بیازمایید: از بارگذاری به خالی، از بارگذاری به خطا، از تلاش دوباره به موفقیت و از تغییر فیلتر به نتیجه‌ها.
بازبینی کاربردی کتابخانه از یک محرک و بازیابی موردانتظار آغاز می‌شود. برای هر الگو، وضعیت، عنوان، توضیح اختیاری، اقدام اصلی، مسیر فرعی و اتفاق پس از انتخاب را ثبت کنید. تصاویر را از نظر ساختار مفید و سلسله‌مراتب بصری مقایسه کنید، سپس رفتار محصول را در بسترش بررسی کنید؛ تصویر ثابت نمی‌گوید خطا بازیافتنی است یا نتیجه واقعاً خالی است. برای نمونه‌های بصری، کتابخانه رابط کاربری ScreenKits را مرور و برای یافتن الگوهای نزدیک همه دسته‌ها را کاوش کنید.
- آیا فرد می‌تواند بفهمد محتوا غایب است، هنوز بارگذاری می‌شود یا به‌علت خطا در دسترس نیست؟
- آیا پیام عبارت جست‌وجو، فیلترها، حساب یا کار تکمیل‌شده فعلی را بازتاب می‌دهد؟
- آیا اقدام، ورودی مفید را حفظ می‌کند و به نتیجه‌ای قابل‌مشاهده می‌رسد؟
- آیا وضعیت در اندازه کوچک، با متن بومی طولانی‌تر و فناوری کمکی کار می‌کند؟
- آیا فرد می‌تواند از خطا بهبود یابد یا راهی برای تغییر جست‌وجوی ناموفق پیدا کند؟
پرسش‌های رایج
آیا حالت خالی همیشه باید دعوت به اقدام داشته باشد؟
خیر. وقتی اقدام به افزودن محتوا، اصلاح جست‌وجو یا بازیابی از مشکل کمک می‌کند، آن را بگذارید. کار تکمیل‌شده یا نمایی که به‌طور طبیعی خالی است شاید فقط تأییدی کوتاه بخواهد.
آیا صفحه بدون نتیجه، حالت خطاست؟
معمولاً نه. اگر جست‌وجو یا فیلتر با موفقیت پایان یافته، نبود مورد منطبق را گزارش کنید و اصلاحی مفید ارائه دهید. زبان خطا را برای شکست سیستم نگه دارید که مانع تعیین یا نمایش نتیجه شده است.
هنگام بارگذاری نتیجه‌ها چه چیزی باید نشان داده شود؟
تا پایان درخواست، وضعیت بارگذاری یا بازخورد پیشرفت نشان دهید. نتیجه خالی را تنها پس از تأیید سیستم نشان دهید که پاسخ موفق هیچ مورد منطبقی ندارد.
