چک لیست طراحی Empty state

هرآنچه در طراحی صفحات Empty state لازم است، بدانید!

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

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

صفحه empty state چیست؟

در واقع empty state یا zero-data state ها پیام‌هایی هستند که، کاربران زمانی‌که محتوایی جهت نمایش در صفحه وجود نداشته باشد، مشاهده می‌کنند.

این صفحات روشی برای بهبود تجربه کاربری محصول شما هستند. طراحان UX فرصت‌های زیادی برای ایجاد یک تجربه‌ی جذاب و پرمعنی دارند اما متاسفانه بیشتر اوقات از اهمیت empty state غافل می‌شوند.
اینکه بدانیم این صفحات از اولویت بالایی در پروسه طراحی UX برخوردارند، موضوع مهمی است. زیرا با وجودی‌که به ندرت رخ می‌دهند اما وقتی نمایش داده ‌شوند، باید رضایت کاربر را جلب نمایند. برای این‌کار باید مطمئن شوید در طراحی خود تمام نیازهای کاربر را مشاهده می‌کنید. توجه به این جزئیات نه تنها باعث حرفه‌ای تر شما می‌شود، بلکه باعث باقی‌ماندن شما در بازار رقابت و همچنین نمایش هویت بصری سازمانی شما می‌شود. البته باید توجه کنید که مهم‌ترین موضوع، ایجاد حس خوب در کاربرانی است که با این صفحات تعامل دارند.

بررسی دقیق تر empty state

برای اینکه بدانید یک empty state ایده‌آل شامل چه مواردی می‌شود، اول باید با عملکرد دقیق اپلیکیشن یا سایت خود آشنا باشید.

گاهی empty state‌ها می‌توانند فرم‌های مختلفی به خود بگیرند و عملکردهای متفاوتی داشته‌باشند و اصولا برای علل متعددی طراحی می‌شوند.

در اینجا ۴ مدل معمول empty state که اصولا رخ می‌دهد را آورده‌ایم:

اولین استفاده کاربر

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

نمونه ای از طراحی empty state جهت راهنمایی کاربر جدید

پاک کردن اطلاعات یک صفحه

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

اطلاعات موجود در سطل زباله حذف شده است و این empty state نمایش داده می شود.

خطاها

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

بدون نتیجه و اطلاعات

زمانی‌که داده‌ای جهت نمایش وجود ندارد. مثلا جستجو بی‌نتیجه بوده و اطلاعاتی درباره‌ی آن موجود نیست.

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

پیدا نکردن مکان مورد نظر در اپلیکیشن اسنپ

خطا(Error)

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

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

مثال‌هایی از موقعیت‌های معمول empty state در برنامه‌ها

صفحه دراپ باکس(dropBox) وقتی هنوز فایل یا فولدری ایجاد نشده‌است.
نمایش نتیجه زمانی‌که تمام تسک‌های موجود در to-do list تکمیل شده‌است.
نمایش خطا در slack وقتی از دستوری که پشتیبانی نمی‌شود، استفاده کرده‌ایم.
وقتی برای اولین بار اکانتی در یک شبکه اجتماعی (مثلا faceBook) می‌سازیم و هنوز مخاطبی نداریم.
جستجو در جیمیل (Gmail) و عدم نمایش نتیجه

بهترین تمرین برای طراحی empty state

اگر از شما خواسته شده تا یک صفحه empty state طراحی کنید، یک سری تمرین برای رسیدن به هدفتان وجود دارد:

به کاربران خود بگویید چه کاری انجام دهند(Call to Action (CTA

همانطور که گفته شد، یک empty state خوب این فرصت را به ما می‌دهد که کاربر را برای تعامل با محصول تشویق کنیم. برای اینکار شما می‌توانید یک دکمه call to action در صفحه خود قرار دهید.
دکمه Call to Action منطقی‌ترین عملی که کاربر می‌تواند در صفحه انجام دهد را نشان می‌دهد یعنی هنگامی طراحی دکمه باید بدانید بهترین عمل برای کاربر چیست. این دکمه لازم است باشد تا کاربر بتواند به راحتی از empty state وارد فضای دارای اطلاعات شود.

دکمه ایجاد تیکت جدید در پشتیبانی علی بابا

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

عملکردهای مختلفی برای دکمه Call to Action وجود دارد:

- کلیک کردن روی دکمه برای انجام یک عمل جدید

- نوشتن فیدبک در یک بخش مخصوص

- استفاده از آن برای آموزش کاربر و نمایش یک ویژگی مخصوص

- فرستادن کاربر به صفحه help

برای مثال به یک نمونه از شبکه اجتماعی زیر توجه کنید:

دکمه call to action شبکه اجتماعی face book

یک لیست دوستان وجود دارد ولی درحال حاضر خالی است. یک call to action خوب از کاربر می‌خواهد که دوستان خود را پیدا کند و آنها را با برنامه پیوند می‌دهد.

به empty state خود شخصیت اضافه کنید:

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

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

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

در تصویر زیر google به خوبی از این کار برآمده است:

مطابق با قواعد گوگل متریال دیزاین تصاویر استفاده شده باید:

- دارای هارمونی مشخص و یکدستی باشند

- با برند شما سازگار باشند

همچنین تگ لاین شما نیز باید:

- پیغام مناسب و کمک کننده‌ای داشته باشد

- با برند سازگار باشد

- هدف صفحه را به خوبی برساند

هر پیغام در empty state از دو بخش تشکیل شده است:

ـ سربرگ یا headline که اطلاعات اصلی را می‌دهد

-‌ متن یا body که اطلاعاتی را اضافه می‌کند.

برای خوانایی بهتر، متن نباید از سایز عکس بزرگتر شود. همچنین باید کوتاه و دوستانه و گیرا باشد و برای جذب کردن بیشتر مخاطب از افعال در headline خود استفاده کنید.

از empty state برای آموزش و راهنمایی کاربر استفاده کنید.

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

درواقع empty stateها باید شامل اطلاعاتی باشند که با خیلی از اوقات استفاده از دکمه‌های call to action نقش مهمی را ایفا می‌کنند.

از محتواها‌ی آماده یا آغازکننده استفاده کنید:

به پیشنهاد متریال دیزاین بهتر است که صفحات خالی خود را با محتواهای آغازکننده پر کنید. این کار باعث می‌شود که کاربر سریع‌تر بتواند از محصول استفاده کند. به عنوان مثال برنامه‌ی ورد (word) از نمونه‌های آماده (template) جهت دسترسی راحت‌تر کاربر استفاده می‌کند.

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

در این برنامه با استفاده از کتاب‌های رایگانی که در دسترس قرار گرفته، می‌توان سایر بخش‌ها را نیز گردش کرد.

مثالهای از طراحی empty state

طراحی خوبی که برای این صفحه(اولین بار که کاربر وارد برنامه می شود) به کار برده شده است. دکمه call_to_action که در اینجا Get started است به شما کمک می کند تا بدانید برای شروع چه کاری باید انجام دهید.(dropBox)

یک مثال خوب برای طراحی empty state. زمانیکه جستجو نتیجه ای بر نمی گرداند.

مثال از طراحی هایی که UX مناسبی برای empty state ندارند:

اینجا یک طراحی empty state می بینید که فیدبک خوبی به کاربر می دهد اما این فرصت که به کاربر مسیری را نمایش دهد یا call_to_action داشته باشد را از دست داده است.

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

جمع بندی

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