تاثیر استفاده از فضای سفید یا فضای خالی در طراحی سایت

فضای خالی در همه‌جا دیده می‌شود و برای ایجاد مفهوم ضروری است! حتی در موسیقی فاصله بین دو نت به‌اندازه خود نت اهمیت دارد! در طراحی وب‌سایت هم وجود فضای خالی لازم است تا عناصر موجود در طراحی به‌صورت چشم‌گیری دیده شوند و هدف وب‌سایت محقق شود.

هنگامی‌که عبارت White Space یا فضای سفید را می‌شنوید، ذهن شما ممکن است که به یاد دو حاشیه ستون سفید خالی در اطراف متن محتوای صفحه بیفتد!

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

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

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

۱- فضای خالی جلب‌توجه می‌کند!

همچنان بر سر این موضوع که کدام استراتژی آنلاین بیشترین توجه را جلب می‌کند بحث می‌شود و اختلاف‌نظر زیادی وجود دارد؛ اما همه ما بر سر یک موضوع اتفاق‌نظر داریم. نبود چیزی نمی‌تواند توجهی هم جلب کند! برای همین است که استفاده از فضای خالی روش مؤثری به شمار می‌رود تا شما توجه بازدیدکننده را سریع‌تر به سمت عنصر اصلی و هدف وب‌سایت خود هدایت و جلب کنید!

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

مقاله مرتبط: فضای سفید در طراحی رابط کاربری

این کار را می‌توانید برای همه انواع صفحه‌ها مانند صفحه اصلی وب‌سایت، صفحه‌های فرود، قیف تبدیل، نمونه کارها (پورتفولیو) و غیره انجام دهید.

اصل کلیدی ساده است؛ فضای خالی اطراف عنصر اصلی صفحه توجه بیننده را روی آن عنصر متمرکز می‌کند؛ چرا‌ که عنصر انحرافی دیگری در اطراف آن وجود ندارد!

۲- فضای خالی نظم بصری به وجود می‌آورد!

چگونه می‌توانید تفاوت بین لوگوی یک وب‌سایت و تصویر صفحه اصلی آن را تشخیص دهید؟ دلیل واضحی که به ذهن می‌رسد فقط اندازه این عنصر است؛ اما دلیل غیرواضح و البته بسیار مهم از نقطه‌نظر طراحی اندازه فضای خالی اطراف عنصر است! عناصر مهم‌تر، فضای خالی بیشتری در اطراف خود دارند و همین دلیل است که باعث می‌شود آن‌ها بیشتر به چشم بیایند و توجه بیننده را جلب کنند.

در ادامه می‌توانید یک طراحی خوب را ببینید که سلسله ‌مراتب بصری را به نمایش می‌گذارد:

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

طراحی شما با اجرای این سلسله‌ مراتب اولویت‌های بصری و استفاده از فضای خالی یک حرکت روان بصری به نمایش خواهد گذاشت که ابهام را از بین می‌برد! در این صورت بیننده می‌داند که چه چیزی مهم است و بعد از این صفحه به کجا باید برود؟

صفحه‌های فرود معمولاً مثال خوبی برای این موضوع هستند. شما یک عنوان درشت دارید که فضای خالی بیشتری نسبت به متن بعد از خود دارد و آن متن هم به یک دکمه درشت «مشترک شوید» ختم می‌شود که بیشترین فضای خالی را در اطراف خود دارد. این‌یک مثال واقعی است که به‌صورت روزمره در گشت‌وگذار اینترنتی دیده می‌شود.

اجازه دهید به GTmetrix نگاهی داشته باشیم:

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

۳- فضای خالی، گروه‌ها را از هم جدا می‌کند.

اگر هنوز فکر می‌کنید که فضای خالی و فضای هدررفته مترادف هستند، اجازه دهید به شما ثابت کنیم که در واقع چگونه می‌توانید فضای موجود در صفحه را با استفاده کردن از آن بازتر کنید!

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

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

CoSchedule بخش امکانات خود را به صورت زیر طراحی کرده است:

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

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

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

۴- فضای خالی قابلیت خوانا بودن را افزایش می‌دهد!

فضای سفید یا فضای خالی ستون اصلی خوانا بودن متن شماست! اگر این متن فشرده بود و فاصله نداشت، شما نمی‌توانستید آن را بخوانید!

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

نمونه‌های فونت گوگل در عکس بالا دو نوع فونت BioRhyme Expanded  و Cooki را نمایش می‌دهند. اولین فونت فضای خالی زیادی استفاده می‌کند، درحالی‌که دومی به‌سختی خوانده می‌شود؛ زیرا کاراکترهای آن به‌اندازه کافی از هم فاصله ندارند.

حالا آن‌ها را با دو فونت متناسب‌تر مقایسه کنید:

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

نتیجه‌گیری

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

می‌خواهیم جمع‌بندی سریعی از مزایای استفاده از فضای خالی برای بهینه‌سازی طراحی داشته باشیم:

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

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

نظر شما چیست؟ آیا می‌توان با استفاده از فضای خالی طراحی وب‌سایت خود را بهبود دهید؟