چک لیست طراحی Splash Screen

اسپلش اسکرین (Start screen ،Startup screen یا Launch screen) بر اساس Material Design guidelines، اولین تجربه‌ی دیداری افراد با اپلیکیشن(یا وب‌سایت) است و در زمانی که سخت‌افزار برای راه‌اندازی تلاش می‌کند، چیزی برای دیدن و جلب توجه به مخاطب ارائه می‌دهد.

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

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

اما چرا از صفحه‌ی سفید استفاده نکنیم یا حتی اصلا طراحی نکنیم؟

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

همچنین در تحقیقی که بر روی Splash Screen فیس‌بوک انجام شده بود، مشخص شد که در تصویر سمت راست که از Indicator داخلی iOS برای نمایش انتظار کاربر استفاده شده است کاربران تاخیر ایجاد شده را از ضعف موبایل خود می‌دانند اما در تصویر سمت چپ که از Indicator غیر بومی iOS استفاده شده است کاربران دلیل تاخیر را متوجه اپلیکیشن می‌دانند.

وقتی این تغییر ساده چنین تفاوت شناختی محسوسی دارد بهتر است از آن به نفع اپلیکیشن خود استفاده کنیم تا اینکه ساده از آن بگذریم.

نکته‌ی انتهایی اینکه صفحه‌ی Splash Screen مثل صفحه‌ی 404 حیاط خلوت طراح‌ها محسوب می‌شود و بر خلاف سایر صفحات که چارچوب Design Systemها خلاقیت آنها را محدود می‌کند می‌توانند آزادانه‌تر عمل کنند.

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

کمتر از 3 ثانیه

اگر زمان وقفه کمتر از 3 ثانیه است یک تصویر لوگوی ثابت (یا متحرک) یا استفاده از Skeleton screens می‌تواند کاربردی باشد.

از لوگو و رنگ‌های اصلی اپلیکیشن استفاده کنید. شبیه بودن Splash Screen به صفحات اصلی این حس را به کاربر می‌دهد که بخشی از User-Flow است و نه یک صفحه‌ی اضافی وقت‌گیر.

همچنین این موضوع امکان ایجاد انیمیشن Transition بین صفحات را مانند مثال بالا فراهم می‌کند.

بین 3 تا 10 ثانیه

بین 3 تا 10 ثانیه، بهتر است از انیمیشن/تصویر جذاب همراه با Indicator استفاده کرد.

بیشتر از 10 ثانیه

اگر بیش‌تر از 10 ثانیه است حتما باید از Indicator (ترجیحاً درصدی) استفاده شود.

سایر نکات تکمیلی:

به ابعاد صفحه‌ی نمایش توجه کنید.

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

در این مورد بهتر از رویکرد Small Size 1st استفاده کنید؛ به این معنی که ابتدا برای کوچکترین صفحه‌ی نمایش طراحی کنید و برای صفحات گسترده‌تر در صورت لزوم اجزایی به آن‌ها بیافزایید.

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

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

چون قراردادن فایل ویدئو درون اپلیکیشن، باعث افزایش حجم اپلیکیشن می‌شود که رابطه‌ی معکوس با احتمال نصب اپلیکیشن دارد و اگر هم بخواهیم از اینترنت استفاده شود ممکن است به خصوص در اولین برخورد کاربر با اپلیکیشن، مدت زمان Splash Screen را افزایش دهد. برای این موضوع می‌توانید از Offline Caching استفاده کنید.

پیام خطای مناسب در صورت قطع اینترنت فراموش نشود.

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

در این حالت اگر پیغام خطای مناسب به کاربر (همراه با اقدام پیشنهادی) نمایش داده نشود و تنها در صفحه‌ی Splash Screen باقی بماند حس خراب بودن اپلیکیشن به کاربر منتقل می‌شود و اگر این اتفاق مرتبا تکرار شود احتمال حذف اپلیکیشن بسیار زیاد می‌شود.

هر چیزی غیر از اسپلش اسکرین در ابتدا را حذف کنید

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

در طراحی جذابیت بصری اغراق نکنید

فراموش نکنید هدف شما از طراحی اسپلش اسکرین کوتاه به نظر رسیدن مدت انتظار کاربر تا باز شدن کامل اپلیکیشن است نه چیز دیگری.

با طراحی‌های خلاقانه نظیر دودل‌های مناسبتی گوگل و انیمیشن‌های جذاب باعث باز و بسته شدن اپلیکیشن به دلیل دیدن اسپلش اسکرین نشوید.

نظر مخالف‌‌های طراحی اسپلش اسکرین را هم بخوانید.

اگر به این مقاله علاقه‌مند بودید، مقالات زیر را نیز پیشنهاد می‌کنم و فراموش نکنید که لایک کنید و کامنت بگذارید.

• چک لیست طراحی Search Box
• چک لیست طراحی Splash Screen - در حال مطالعه
• چک لیست طراحی فرم ثبت‌نام
• چک لیست طراحی Tab Bar / Bottom Navigation
• چک‌لیست طراحی User Onboarding اپلیکیشن
• چک لیست طراحی صفحه‌ی تنظیمات