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

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

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

در این مقاله در مورد تاثیر فضای خالی در طراحی سایت صحبت خواهیم کرد

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

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

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

فضای خالی فقط به معنای بکگراند سفید در صفحه نمی باشد بلکه میتواند هر طرح و رنگی باشد. تعریف دقیق ما از فضای خالی این می باشد که می بایست: 1- بین خطوط فاصله مناسب وجود داشته باشد. 2- بین متن و المانها فاصله مناسب وجود داشته باشد 3- اطلاعات تماس با ما مخصوصا شماره های تماس باید به صورت فاصله دار باشد و از تو در تو نوشتن شماره های تماس خود داری شود. و به طور کلی مرز بندی بین محتوا رعایت شده باشد.

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

اینکه اصلاچرا به فضای خالی در طراحی سایت نیاز داریم؟ با توضیحات بالا پاسخش پیچیده نیست :

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

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

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

rb4LuCnx2S

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

تلاش نماییم صفحه سایت را طوری طراحی نماییم که خیلی سریع به اطلاعات تماس باما, کاربر دسترسی پیدا نماید

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

t7kkZgrLQi

نمایش درست و نادرست اطلاعات تماس با ما

سعی نماییم المانهای مهم از جمله لینک و دکمه های کلیک شونده را با فاصله از سایر متنها قرار دهیم

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

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

yxqi9DhfGd

استفاده و عدم استفاده از فضای خالی بین متن و المان اصلی

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

سوال : با توجه به اینکه نکته که با افزایش فضای خالی بین المانها , طبیعتا ارتفاع و اسکرول صفحه افزایش پیدا میکند این افزایش ارتفاع و اسکرول صفحه ایراد محسوب نمیشود؟

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

نمونه های زیادی از وب سایت ها در فضای مجازی وجود دارد که از فضاهای خالی به خوبی استفاده نموده اند یک نمونه موفق آن سایت apple.com می باشد به تصویر زیر نگاه کنید:

esSmly598h