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

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

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

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

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

نمایش موضوعات مطرح شده در صفحه

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

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

دسترسی سریع به اطلاعات تماس سایت

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

دکمه های راهنما یا پیام های تبلیغاتی

یک تحقیق اینترنتی نشان داده است که استفاده صحیح از فضای خالی در طراحی سایت و المان هایی مانند دکمه خرید و مشاوره میتواند میزان کلیک کاربران را تا ۲۰ درصد افزایش دهد. به همین دلیل هر زمان قرار است یک پیام مشخص را به کاربر القا کنیم یا با استفاده از یک دکمه او را به بخش مورد نظر خود راهنمایی کنیم از فضای خالی استفاده میکنیم.

تصویر زیر نحوه استفاده از فضای خالی هنگام طراحی Call to Action را نمایش میدهد. با همین تغییر کوچک تاثیر این پیام بر مخاطب افزایش خواهد یافت. همچنین در صفحه نمایش کوچکتر مانند موبایل و تبلت این فضای خالی به کاربر کمک میکند که هنگام حرکت در صفحه به اشتباه دکمه یا المان دیگری را کلیک نکرده و مستقیما به بخش مورد نظر خود دسترسی داشته باشد.

به طور استاندارد در طراحی وب سایت برای موبایل فاصله میان دو دکمه باید حداقل ۱.۵ برابر عرض انگشت اشاره باشد.

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

نمونه طراحی سایت با استفاده از فضای خالی

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