سایت سهبعدی اگر درست ساخته شود، در همان چند ثانیه‌ی اول حس برند را منتقل می‌کند و در ذهن میماند؛ اگر بد ساخته شود، کند باز می‌شود، روی موبایل داغ می‌کند و در گوگل دیده نمیشود. در این مقاله توضیح می‌دهیم طراحی سایت سهبعدی (3D) کِی ارزش دارد، کِی ندارد و چطور می‌شود سایتی ساخت که هم چشم‌گیر باشد و هم سریع و سئوپسند. همین سایتی که در آن هستید نمونه‌ی همین رویکرد است.
سایت سهبعدی یعنی چه؟
در سایت سهبعدی بخشی از صفحه با فناوری WebGL و کتابخانه‌هایی مثل Three.js در خود مرورگر رندر می‌شود: فضایی که با اسکرول، حرکت ماوس یا لمس واکنش نشان می‌دهد، مدل سهبعدی محصول که می‌چرخد یا پس‌زمینه‌ای زنده که با موسیقی هماهنگ است. سهبعدی همیشه به معنای مدل‌های سنگین نیست؛ گاهی چند لایه‌ی عمق، کارت‌هایی که با حرکت دست می‌چرخند و دکمه‌هایی که واقعاً فشرده می‌شوند، همان حس را با هزینه‌ی بسیار کمتر می‌سازند.
کِی طراحی سهبعدی ارزش دارد؟
- برندی که می‌خواهد متفاوت دیده شود: شرکت‌های فناوری، استودیوهای خلاق و برندهایی که در بازار شلوغ باید به یاد بمانند.
- محصولی که شکلش مهم است: وقتی چرخاندن و دیدن محصول از زاویه‌های مختلف به تصمیم خرید کمک می‌کند.
- آموزش تعاملی: توضیح مفهومی که در دو بعد سخت فهمیده می‌شود؛ از ساختار یک دستگاه تا یک فرایند چندمرحله‌ای.
- لندینگ رویداد یا معرفی محصول تازه: صفحه‌ای که قرار است در زمان کوتاه توجه زیادی جلب کند.
کِی ارزش ندارد؟
اگر مخاطب اصلی شما با اینترنت ضعیف و گوشی‌های ساده سایت را باز می‌کند و فقط دنبال یک اطلاعات سریع است، مثل ساعت کاری یا فهرست قیمت، سهبعدی سنگین تجربه را بدتر می‌کند. در فروشگاه‌هایی با صدها محصول هم معمولاً سرعت و جست‌وجوی خوب مهم‌تر از جلوه‌ی بصری است. در این موارد بهتر است جلوه‌ها به چند نقطه‌ی محدود، مثل صفحه‌ی اصلی، محدود شوند.
چطور سایت سهبعدی سریع بماند؟
راز سرعت این است که سهبعدی هیچ‌وقت جلوی دیده شدن محتوا را نگیرد. متن و دکمه‌ها باید پیش از صحنهی سهبعدی آماده باشند و صحنه بعد از آن، بی‌صدا در پسزمینه بارگذاری شود. چند روشی که در سایت‌های خودمان به کار می‌بریم:
- شروع صحنه پس از اولین تعامل: صحنهی سهبعدی با اولین حرکت ماوس، لمس یا اسکرول بارگذاری می‌شود، نه هم‌زمان با بار اول صفحه.
- تشخیص توان دستگاه و اینترنت: روی موبایل‌های ساده و اینترنت کند، نسخه‌ی سبک‌تر صحنه اجرا می‌شود یا اصلاً اجرا نمیشود.
- حالت سبک قابل انتخاب: کاربر با یک دکمه می‌تواند سهبعدی را خاموش کند و انتخابش به خاطر سپرده می‌شود.
- توقف هنگام پنهان بودن: وقتی برگه‌ی مرورگر دیده نمیشود، رندر متوقف می‌شود تا باتری و پردازنده آزاد بماند.
- تصویرهای سبک: فرمت WebP، اندازه‌ی متناسب با نمایش و بارگذاری تنبل برای تصویرهای پایین صفحه.
سایت سهبعدی و سئو: محتوا باید HTML واقعی بماند
بزرگ‌ترین اشتباه در سایت‌های سهبعدی این است که متن را داخل صحنهی سهبعدی (canvas) می‌گذارند. گوگل محتوای داخل canvas را نمیخواند. در طراحی درست، صحنهی سهبعدی فقط پسزمینه و جلوه است و همه‌ی عنوانها، متنها، لینکها و داده‌های ساخت‌یافته در HTML معمولی صفحه قرار می‌گیرند. عنوان و توضیح هر صفحه، ساختار سرتیترها، لینک‌سازی داخلی و سرعت بارگذاری همان اهمیتی را دارند که در یک سایت ساده دارند. چک‌لیست کامل این موارد را در مقاله‌ی چک‌لیست طراحی سایت: سئو، سرعت و اینماد آورده‌ایم.
دسترس‌پذیری را فراموش نکنید
برخی کاربران با حرکت زیاد روی صفحه احساس ناخوشایندی پیدا می‌کنند. سایت سهبعدی خوب تنظیم «کاهش حرکت» سیستم‌عامل را رعایت می‌کند و در آن حالت انیمیشن‌ها را کم یا متوقف می‌کند. کنتراست متن روی پس‌زمینه‌ی متحرک، امکان کار با صفحه‌کلید و متن جایگزین برای تصویرها هم باید از اول دیده شوند.
چک‌لیست کوتاه پیش از سفارش سایت سهبعدی
- هدف سهبعدی چیست: حس برند، نمایش محصول یا توضیح یک مفهوم؟
- محتوای اصلی و دکمه‌ها بدون صحنهی سهبعدی هم کامل و قابل استفاده‌اند؟
- روی موبایل ساده و اینترنت ضعیف چه اتفاقی می‌افتد؟ حالت سبک دارد؟
- متنها در HTML واقعی‌اند و عنوان، توضیح و داده‌ی ساخت‌یافته‌ی هر صفحه نوشته شده است؟
- تنظیم کاهش حرکت و دسترس‌پذیری رعایت شده است؟
اگر به سایتی فکر می‌کنید که هم دیده شود و هم سریع و سئوپسند بماند، صفحه‌ی طراحی سایت حرفه‌ای و سهبعدی را ببینید یا در مشاوره‌ی رایگان نیازتان را با ما در میان بگذارید.