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

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

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

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

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

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

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

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

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

به چه دلیل به فضای خالی نیاز داریم؟

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

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

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

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

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

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

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

تاثیر فضای خالی در نمایش اطلاعات تماس سایت

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

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

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

به کار گیری فضای خالی واسه طراحی CTA در سایت

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

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

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

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

به کار گیری فضای خالی در طراحی سایت اپل

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

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

نظرات خود در مورد فوت وفن فضای خالی در طراحی سایت و تاثیر اون بر تجربه کاربری رو در بخش نظرات همین مقاله با ما در میان بذارین.