موشن گرافیک برای سایت وقتی جواب می‌دهد که یک سوال مشخص کاربر را سریع‌تر از متن حل کند و صفحه را کند نکند. قاعده ما ساده است: ویدیوی توضیحی ۳۰ تا ۹۰ ثانیه‌ای با صدا فقط وقتی پخش شود که کاربر روی دکمه پخش بزند. اگر بالای صفحه کمی حرکت می‌خواهید، یک لوپ کوتاه بی‌صدا بین ۵ تا ۱۰ ثانیه، همراه یک تصویر پوستر، کافی است. در ادامه می‌گوییم ویدیو کجا کمک می‌کند، کجا ضرر می‌زند و چه چک‌لیست فنی ساده‌ای جلوی افت سرعت، سئو و نرخ تبدیل را می‌گیرد.
ویدیو کجا کمک می‌کند و کجا دردسر می‌شود
در موشن گرافیک برای سایت، جای ویدیو مهم‌تر از خود ویدیو است. یک ویدیوی خوب در جای نادرست، هم صفحه را کند می‌کند و هم حواس کاربر را از دکمه اصلی می‌برد. ما معمولا پیش از ساخت، همین جدول را با کارفرما مرور می‌کنیم:
| جای ویدیو | قالب مناسب | کی کمک می‌کند | کی ضرر می‌زند |
|---|---|---|---|
| بالای صفحه اصلی (هیرو) | لوپ بی‌صدای ۵ تا ۱۰ ثانیه‌ای یا پوستر با دکمه پخش | وقتی محصول با یک حرکت کوتاه فهمیده می‌شود | وقتی فایل سنگین است، صدا دارد یا تیتر و دکمه را می‌پوشاند |
| پایین‌تر از اولین نمای صفحه | ویدیوی توضیحی ۶۰ تا ۹۰ ثانیه‌ای با پخش روی کلیک | وقتی کاربر تیتر را خوانده و حالا می‌پرسد «چطور کار می‌کند» | وقتی تنها جای پیام اصلی صفحه است و متنی کنارش نیست |
| صفحه محصول یا خدمت | ویدیوی کوتاه ۳۰ تا ۶۰ ثانیه‌ای کنار تصاویر | برای نشان دادن کارکرد، نصب یا تفاوت مدل‌ها | وقتی جای تصاویر اصلی را می‌گیرد و بار صفحه را دو برابر می‌کند |
| آنبوردینگ و راهنمای داخل پنل | کلیپ‌های ۱۰ تا ۲۰ ثانیه‌ای برای هر قدم | وقتی یک کار چندمرحله‌ای را کوتاه نشان می‌دهد | وقتی کاربر را مجبور به تماشا می‌کند و دکمه رد کردن ندارد |
اشتباهی که زیاد می‌بینیم ساده است: یک ویدیوی توضیحی کامل، با صدا و پخش خودکار، بالای صفحه اصلی گذاشته می‌شود. نتیجه معمولا صفحه‌ای کند است. کاربر موبایل پیش از دیدن تیتر صفحه را می‌بندد. در این موارد ما بالای صفحه را به یک لوپ کوتاه یا تصویر ثابت برمی‌گردانیم و ویدیوی اصلی را یک بخش پایین‌تر می‌بریم.
هر کاربرد چقدر باید طول بکشد
برای ویدیو در صفحه اصلی و لندینگ، دو قالب جدا داریم. نباید با هم قاطی شوند:
- لوپ هیرو، ۵ تا ۱۰ ثانیه: بی‌صدا و بدون متن مهم. شروع و پایان مشخص هم ندارد. کارش فقط حس دادن و نشان دادن یک لحظه از محصول است. اگر کاربر آن را نبیند، چیزی از دست نمی‌دهد.
- ویدیوی توضیحی، ۳۰ تا ۹۰ ثانیه: با صدا یا زیرنویس و یک پیام روشن. برای بیشتر لندینگ‌ها ۶۰ ثانیه نقطه خوبی است. کمتر پیش می‌آید که به بیش از ۹۰ ثانیه نیاز داشته باشید.
یک قاعده سرانگشتی که در استودیو به کار می‌بریم: گوینده فارسی حدود ۲ تا ۲٫۵ کلمه در ثانیه می‌خواند. پس متن یک ویدیوی ۶۰ ثانیه‌ای حدود ۱۳۰ تا ۱۵۰ کلمه می‌شود. اگر متن شما ۲۵۰ کلمه است، یا باید کوتاه شود یا ویدیو از حوصله کاربر لندینگ بیرون می‌زند.
یک نمونه ساختار برای ویدیوی ۶۰ ثانیه‌ای لندینگ:
- ثانیه ۰ تا ۵: مشکل کاربر در یک جمله.
- ثانیه ۵ تا ۲۰: چرا راه‌های فعلی جواب نمی‌دهد.
- ثانیه ۲۰ تا ۴۵: راه‌حل شما در سه قدم ساده.
- ثانیه ۴۵ تا ۵۵: یک دلیل برای اعتماد، مثل نحوه کار یا ضمانت.
- ثانیه ۵۵ تا ۶۰: یک دعوت به اقدام که با دکمه همان صفحه یکی باشد.
اگر هنوز پیام و مخاطب ویدیو برایتان روشن نیست، اول یک بریف موشن گرافیک بنویسید. همین بریف تعیین می‌کند ویدیو در کدام بخش سایت بنشیند.
چک‌لیست فنی موشن گرافیک برای سایت
این فهرست را سر هر تحویل مرور می‌کنیم. بیشتر مشکلات سرعت و تجربه کاربری از جا افتادن یکی از همین موارد است:
- تصویر پوستر: هر ویدیو یک تصویر ثابت و فشرده دارد که پیش از خود ویدیو دیده می‌شود. این تصویر را با فرمت‌های جدید و در حد چند ده کیلوبایت نگه می‌داریم.
- بارگذاری تنبل یا پخش روی کلیک: ویدیوی توضیحی تا وقتی کاربر دکمه پخش را نزده، دانلود نمی‌شود. ویدیوهای پایین صفحه هم فقط وقتی به نمای کاربر نزدیک می‌شوند بار می‌شوند.
- قانون پخش خودکار: مرورگرها فقط ویدیوی بی‌صدا را خودکار پخش می‌کنند. برای لوپ هیرو، ویدیو را بی‌صدا، تکرارشونده و قابل پخش داخل صفحه در موبایل تنظیم می‌کنیم. اگر کاربر روی دستگاهش گزینه «کاهش حرکت» را روشن کرده باشد، به‌جای لوپ همان پوستر را نشانش می‌دهیم.
- دکمه توقف: هر حرکتی که بیش از چند ثانیه ادامه دارد باید قابل متوقف کردن باشد. این هم به دسترس‌پذیری کمک می‌کند و هم به کاربری که حواسش پرت می‌شود.
- زیرنویس: بخش بزرگی از کاربران ویدیو را بدون صدا می‌بینند. ویدیوی توضیحی باید فایل زیرنویس جدا داشته باشد، نه متنی که روی تصویر چسبانده شده، تا هم خوانا بماند و هم بشود ترجمه‌اش کرد.
- اندازه فایل: هدف سرانگشتی ما برای لوپ هیرو زیر حدود ۱ تا ۱٫۵ مگابایت است و برای ویدیوی توضیحی ۶۰ ثانیه‌ای، نسخه موبایل با کیفیت ۷۲۰ پیکسل زیر حدود ۵ تا ۸ مگابایت. نسخه دسکتاپ می‌تواند بزرگ‌تر باشد، چون فقط روی کلیک بار می‌شود.
- فرمت‌ها: یک نسخه MP4 با کدک H.264 در پروفایل سازگار که همه مرورگرها پخشش می‌کنند، به‌علاوه نسخه‌های WebM یا AV1 برای مرورگرهای جدیدتر. مرورگر خودش سبک‌ترین نسخه قابل پخش را انتخاب می‌کند.
- رزرو نسبت تصویر: کادر ویدیو از اول با نسبت مشخص، مثلا ۱۶ به ۹ یا ۹ به ۱۶، روی صفحه جا می‌گیرد. این‌طوری با رسیدن ویدیو، محتوای زیر آن جابه‌جا نمی‌شود.
- لوپ بی‌صدا یعنی بدون ترک صدا: از فایل لوپ هیرو ترک صوتی را کاملا حذف می‌کنیم. هم حجم کم می‌شود و هم جلوی رفتارهای عجیب بعضی مرورگرها گرفته می‌شود.
ویدیو چطور روی LCP و CLS اثر می‌گذارد
شاخص‌های Core Web Vitals نشان می‌دهند صفحه از نگاه کاربر چقدر سریع و پایدار است. ویدیو روی دو شاخص بیشترین اثر را دارد:
- LCP (زمان نمایش بزرگ‌ترین محتوا): اگر ویدیو بزرگ‌ترین بخش اولین نمای صفحه باشد، معمولا تصویر پوستر آن ملاک سنجش است. پس پوستر باید سبک باشد و با اولویت بار شود. فایل ویدیو هم نباید جلوی نمایش تیتر و دکمه را بگیرد.
- CLS (جابه‌جایی ناگهانی صفحه): وقتی کادر ویدیو از قبل رزرو نشده باشد، با رسیدن ویدیو همه چیز زیر آن پایین می‌پرد. رزرو نسبت تصویر این مشکل را کامل حل می‌کند.
یک نکته کمتر دیده‌شده هم هست. پخش‌کننده‌های آماده‌ای که از سرویس‌های ویدیویی بیرونی در صفحه جاسازی می‌شوند، معمولا حجم زیادی اسکریپت با خود می‌آورند و واکنش صفحه به کلیک را کند می‌کنند. راه‌حل ما یک «نمای جایگزین» است: تا پیش از کلیک فقط پوستر و دکمه پخش دیده می‌شود و پخش‌کننده اصلی بعد از کلیک بار می‌شود. اگر همین حالا صفحه شما کند است، اول افزایش سرعت سایت را انجام دهید، بعد سراغ ویدیو بروید.
سئوی ویدیو برای ویدیوهایی که روی سایت خودتان است
یک ویدیوی پس‌زمینه در هیرو قرار نیست در نتایج ویدیویی جست‌وجو پیدا شود و اشکالی هم ندارد. اما اگر می‌خواهید ویدیوی توضیحی شما خودش در جست‌وجو دیده شود، این پایه‌ها لازم است:
- صفحه تماشای اختصاصی: موتورهای جست‌وجو ویدیو را بیشتر وقتی در نتایج ویدیویی نشان می‌دهند که محتوای اصلی صفحه باشد. پس کنار لندینگ، یک صفحه جدا هم بسازید که نقش اصلی را ویدیو داشته باشد.
- عنوان و توضیح: عنوانی که دقیقا بگوید ویدیو چه چیزی را نشان می‌دهد، و چند جمله توضیح که با محتوای ویدیو یکی باشد.
- تصویر بندانگشتی: یک تصویر واضح و ثابت از مهم‌ترین لحظه ویدیو، نه یک فریم تار از وسط حرکت.
- متن کامل گفتار: متن ویس‌اور را زیر ویدیو بگذارید. هم به کاربرانی که صدا ندارند کمک می‌کند و هم محتوای قابل خواندن برای موتورهای جست‌وجو فراهم می‌شود.
- داده ساختاریافته VideoObject: برچسبی در کد صفحه که نام، توضیح، تصویر بندانگشتی، تاریخ انتشار، مدت و آدرس فایل ویدیو را به موتور جست‌وجو معرفی می‌کند.
- نقشه سایت ویدیو: یک فهرست جدا یا بخشی از نقشه سایت که صفحه‌های دارای ویدیو و مشخصات هر ویدیو را اعلام می‌کند تا سریع‌تر و درست‌تر شناسایی شوند.
این موارد را معمولا هم‌زمان با طراحی سایت در قالب صفحه‌ها پیش‌بینی می‌کنیم تا برای هر ویدیوی تازه فقط اطلاعات آن وارد شود.
جایگزین سبک: انیمیشن برداری برای آیکون و رابط کاربری
در موشن گرافیک برای سایت، همه حرکت‌ها لازم نیست ویدیو باشند. برای آیکون‌ها، حالت‌های دکمه، نمودارهای ساده و قدم‌های یک فرایند، انیمیشن برداری انتخاب سبک‌تری است. این انیمیشن‌ها از شکل‌های ریاضی ساخته می‌شوند، در هر اندازه‌ای تیز می‌مانند و معمولا چند کیلوبایت تا چند ده کیلوبایت وزن دارند.
دو راه رایج داریم. اول، انیمیشن مستقیم روی گرافیک برداری صفحه که برای حرکت‌های ساده کافی است. دوم، فایل‌هایی با فرمت Lottie که انیمیشن طراحی‌شده در نرم‌افزار انیمیشن را به شکل داده برداری به سایت می‌آورند و برای حرکت‌های پیچیده‌تر خوبند. قاعده تصمیم ما ساده است: اگر حرکت شامل تصویر واقعی، بافت‌های پیچیده یا بیش از چند ثانیه روایت است، ویدیو بهتر است. اگر شکل‌ها ساده و تخت باشند، انیمیشن برداری سبک‌تر و تمیزتر در می‌آید.
در خدمات موشن گرافیک سیمرس، هر دو قالب را از یک طراحی واحد می‌سازیم تا ویدیوی لندینگ و آیکون‌های متحرک سایت یک زبان بصری داشته باشند. اگر هنوز بین این دو مردد هستید، مطلب تفاوت موشن گرافیک و انیمیشن کمک می‌کند راحت‌تر انتخاب کنید.
چه کاری نمی‌کنیم
- ویدیوی دارای صدا را در سایت خودکار پخش نمی‌کنیم. صدا همیشه با انتخاب کاربر شروع می‌شود.
- یک فایل سنگین تنها تحویل نمی‌دهیم. خروجی وب ما مجموعه‌ای است شامل نسخه MP4 و WebM، نسخه موبایل، پوستر و فایل زیرنویس.
- پیام اصلی صفحه را فقط داخل ویدیو نمی‌گذاریم. تیتر و متن کنار ویدیو باید بدون تماشای آن هم کامل باشند.
- وعده رتبه گرفتن فقط با اضافه کردن ویدیو نمی‌دهیم. ویدیو کنار محتوا و سرعت خوب اثر دارد، نه به‌جای آن‌ها.
اگر می‌خواهید مسیر کامل از فیلم‌نامه تا تحویل نسخه‌های وب را ببینید، مراحل ساخت موشن گرافیک را مرور کنید.
پرسش‌های متداول
آیا ویدیو، صفحه اصلی سایت را کند می‌کند؟
اگر درست پیاده شود، نه. با پوستر سبک، پخش روی کلیک برای ویدیوی توضیحی، لوپ کم‌حجم برای هیرو و رزرو نسبت تصویر، اثر ویدیو روی سرعت و شاخص‌های LCP و CLS خیلی کم می‌ماند. مشکل وقتی پیش می‌آید که یک فایل بزرگ با صدا، خودکار و بدون پوستر بار شود.
ویدیو را روی سایت خودمان بگذاریم یا از یک سرویس ویدیویی جاسازی کنیم؟
برای لوپ کوتاه هیرو، میزبانی روی سایت خودتان بهتر است، چون کنترل کامل حجم و رفتار پخش را دارید. برای ویدیوی توضیحی بلندتر هر دو راه جواب می‌دهد، به شرطی که پخش‌کننده جاسازی‌شده فقط بعد از کلیک بار شود. اگر دیده شدن ویدیو در جست‌وجو برایتان مهم است، صفحه تماشای اختصاصی را روی سایت خودتان بسازید.
ویدیوی صفحه اصلی خودکار پخش شود یا نه؟
فقط اگر بی‌صدا و کوتاه باشد. مرورگرها هم فقط پخش خودکار بی‌صدا را اجازه می‌دهند. ویدیوی توضیحی با گفتار باید با کلیک کاربر شروع شود و دکمه توقف داشته باشد.
برای ویدیو در لندینگ چه طولی بهتر است؟
برای بیشتر لندینگ‌ها حدود ۶۰ ثانیه خوب است، یعنی متنی در حد ۱۳۰ تا ۱۵۰ کلمه فارسی. اگر محصول ساده است ۳۰ ثانیه کافی است و کمتر پیش می‌آید که به بیش از ۹۰ ثانیه نیاز باشد.
دیدگاه‌ها و پرسش‌ها
هنوز دیدگاهی ثبت نشده است. اگر سؤالی دارید، خوشحال می‌شویم بپرسید.
نوشتن دیدگاه