Empty State را جدی بگیرید: ۸ نمونه از اپهای ایرانی
وقتی درباره طراحی رابط کاربری صحبت میکنیم، معمولاً ذهنمان به سمت صفحه اصلی، فرمهای ثبتنام یا فرآیند پرداخت میرود. اما یکی از بخشهایی که اغلب نادیده گرفته میشود، Empty State است.
Empty State همان لحظهای است که کاربر با «هیچ چیز» روبهرو میشود؛ سبد خرید خالی، لیست علاقهمندیهای بدون آیتم، تاریخچه سفارشات خالی یا نتایج جستجویی که چیزی پیدا نکردهاند.
شاید این صفحات ساده به نظر برسند، اما میتوانند نقش مهمی در تجربه کاربر داشته باشند. یک Empty State خوب میتواند کاربر را راهنمایی کند، اضطراب او را کاهش دهد و حتی او را به انجام اولین اقدام تشویق کند.
در این مقاله، به سراغ چند نمونه از اپلیکیشنهای ایرانی میرویم و بررسی میکنیم که هرکدام چگونه این موقعیت را مدیریت کردهاند.
Empty State چیست؟
Empty State به صفحه یا بخشی از رابط کاربری گفته میشود که در آن هنوز دادهای برای نمایش وجود ندارد یا نتیجهای پیدا نشده است.
این وضعیت معمولاً در سناریوهای زیر اتفاق میافتد:
- اولین ورود کاربر به یک بخش
- سبد خرید خالی
- لیست علاقهمندیهای خالی
- نبود نتایج جستجو
- نبود اعلان یا پیام
- تاریخچه سفارشات یا تراکنشهای خالی
- حذف همه آیتمها توسط کاربر
برخلاف تصور رایج، Empty State یک وضعیت استثنایی نیست؛ بلکه یکی از رایجترین لحظاتی است که کاربران با آن روبهرو میشوند.
چرا طراحی Empty State اهمیت دارد؟
وقتی کاربر صفحهای خالی میبیند، معمولاً یکی از این سؤالها در ذهنش شکل میگیرد:
- آیا مشکلی پیش آمده؟
- چرا چیزی نمایش داده نمیشود؟
- باید چه کاری انجام دهم؟
- آیا این صفحه درست کار میکند؟
اگر طراحی نتواند به این سؤالها پاسخ دهد، احتمال ترک صفحه یا حتی خروج از اپلیکیشن افزایش پیدا میکند.
یک Empty State خوب فقط «خالی بودن» را نمایش نمیدهد؛ بلکه به کاربر میگوید چرا صفحه خالی است و قدم بعدی چیست.
یک Empty State خوب چه ویژگیهایی دارد؟
صفحات خالی موفق معمولاً چند ویژگی مشترک دارند.
- توضیح کوتاه و واضح
- لحن دوستانه
- دعوت به انجام یک اقدام (CTA)
- استفاده از تصویر یا آیکون مناسب
- جلوگیری از ایجاد حس خطا یا سردرگمی
البته همه Empty Stateها به تصویر یا تصویرسازی نیاز ندارند. گاهی یک متن کوتاه و یک دکمه مناسب، تجربه بهتری ایجاد میکند.
۱. دیجیکالا؛ سبد خرید خالی
یکی از اولین Empty Stateهایی که بسیاری از کاربران با آن مواجه میشوند، سبد خرید خالی است.
دیجیکالا با استفاده از یک پیام ساده و دعوت کاربر به ادامه خرید، تلاش میکند بنبست ایجاد نکند و مسیر بعدی را بهوضوح نشان دهد.
۲. علیبابا؛ لیست مسافران هنوز خالی است
در این صفحه از علیبابا، کاربر هنوز هیچ مسافری ثبت نکرده است. بهجای نمایش یک صفحه خالی، محصول با یک تصویر ساده، یک عنوان واضح و توضیحی کوتاه، دلیل خالی بودن صفحه را بیان میکند.
نکته مثبت این طراحی، وجود یک CTA کاملاً مرتبط است. دکمه «افزودن مسافر» دقیقاً همان اقدامی را پیشنهاد میدهد که کاربر باید انجام دهد. حتی لینک «افزودن مسافر جدید» در بالای صفحه نیز همین مسیر را تقویت میکند و باعث میشود کاربر بدون سردرگمی اولین قدم را بردارد.
۳. اکالا؛ وقتی نتیجهای برای جستجوی شما وجود ندارد
Empty State اکالا مربوط به حالتی است که جستجوی کاربر هیچ نتیجهای پیدا نمیکند.
پیام «کالایی یافت نشد» کاملاً مستقیم است و کاربر فوراً متوجه وضعیت میشود. استفاده از تصویر سبد خرید نیز به درک سریعتر مفهوم کمک میکند.
با این حال، این صفحه میتوانست مفیدتر باشد. پیشنهاد جستجوی مشابه، نمایش دستهبندیهای مرتبط یا محصولات محبوب میتوانست کاربر را از بنبست خارج کند و احتمال ادامه جستجو را افزایش دهد.
۴. تپسی؛ تفاوت میان Empty State و Error State
در نگاه اول این صفحه شبیه یک Empty State است، اما در واقع ترکیبی از Empty State و Error State محسوب میشود.
کاربر مقصدی را جستجو کرده اما نتیجهای پیدا نشده است. نکته مثبت این طراحی، توضیح علت مشکل است؛ از کاربر خواسته شده املای عبارت را بررسی کند یا از اتصال اینترنت مطمئن شود.
این نوع پیام باعث میشود کاربر تصور نکند که اپلیکیشن دچار اختلال شده است و بداند برای رفع مشکل چه کاری باید انجام دهد.
۵. فیدیبو؛ دعوت به اولین تعامل
صفحه «نقدها و امتیازها» در فیدیبو فقط اعلام نمیکند که هنوز نظری ثبت نشده است.
در عوض، از کاربر دعوت میکند اولین نفری باشد که نظر خود را ثبت میکند. همچنین دکمه «لیست کتابهای در انتظار» مسیر مشخصی برای ادامه تعامل ارائه میدهد.
این نمونه نشان میدهد که Empty State میتواند به فرصتی برای افزایش مشارکت کاربران تبدیل شود، نه صرفاً نمایش نبود اطلاعات.
۶. آپارات؛ سادگی، وقتی توضیح اضافه لازم نیست
گاهی بهترین Empty State، سادهترین آن است.
در صفحه اعلانهای آپارات، تنها یک آیکون زنگ و جمله «هنوز اعلانی دریافت نکردهاید» نمایش داده میشود.
از آنجا که کاربر بهخوبی میداند اعلانها پس از فعالیت در اپلیکیشن ایجاد میشوند، توضیح اضافی یا دکمه CTA ضرورت چندانی ندارد. این نمونه نشان میدهد که همیشه لازم نیست هر Empty State با تصویرسازی پیچیده یا متن طولانی همراه باشد.
همه Empty Stateها یک هدف ندارند
این شش نمونه نشان میدهند که Empty State فقط یک الگوی ثابت نیست.
بعضی از آنها مانند علیبابا، کاربر را به انجام اولین اقدام دعوت میکنند. برخی مانند فیدیبو، مشارکت را افزایش میدهند. برخی دیگر مانند اکالا و تپسی، دلیل نبود نتیجه را توضیح میدهند و آپارات نیز فقط وضعیت فعلی را با کمترین پیچیدگی اطلاعرسانی میکند.
یک Empty State موفق لزوماً شلوغ یا پر از تصویر نیست. مهم این است که کاربر بفهمد چرا این صفحه خالی است و اگر لازم باشد، قدم بعدی را بهسادگی پیدا کند.
اشتباهات رایج در طراحی Empty State
همه صفحات خالی تجربه خوبی ایجاد نمیکنند.
برخی از اشتباهات رایج عبارتاند از:
- نمایش صفحه کاملاً سفید
- استفاده از پیامهای مبهم
- نبود دکمه یا مسیر ادامه
- نمایش پیامهای خطا بهجای Empty State
- استفاده از متنهای بیش از حد طولانی
- طراحیای که با سایر بخشهای محصول هماهنگ نیست
جمعبندی
Empty State شاید در نگاه اول صفحهای باشد که «چیزی برای نمایش ندارد»، اما در واقع یکی از مهمترین فرصتها برای هدایت کاربر است.
یک Empty State خوب میتواند توضیح دهد چرا صفحه خالی است، چه اتفاقی قرار است بیفتد و کاربر برای ادامه چه کاری باید انجام دهد.
اگر در حال طراحی یک محصول دیجیتال هستید، صفحات خالی را به اندازه صفحات اصلی جدی بگیرید؛ زیرا گاهی همین لحظات کوتاه، تفاوت بین یک تجربه گیجکننده و یک تجربه روان را رقم میزنند.
از تجربه سایر محصولات ایرانی الهام بگیرید
صدها اسکرینشات از اپلیکیشنهای ایرانی را بررسی و الگوهای طراحی را مقایسه کنید.
شروع جستجو