تکنیک فضای خالی همیشه به معنی بک گراند سفید نیست بلکه میتواند با هر طرح و رنگی پیاده سازی شود. در عمل فضای خالی به معنی ایجاد فاصله مناسب میان المان های موجود در صفحه است.
تکنیک فضای خالی در طراحی سایت ، حکم سکوت بین دو نت در موسیقی را دارد. کسی به آن توجه نمیکند اما بدون آن موسیقی چیزی جز یک نویز گوشخراش نیست.
همچنین فضای خالی به کاربر کمک میکند مرزبندی محتوای صفحه را به سرعت تشخیص داده و محتوای مورد نظر خود را در آن پیدا کند.
در انگلیسی به آن white space میگویند چون معمولا تکنیک فضای خالی به رنگ سفید دیده میشود اما این بخش میتواند، یک رنگ خنثی مثل خاکستری داشته باشد، یا حتی یک تصویر پسزمینه محو باشد.
مزایا و اهمیت تکنیک فضای خالی و نقش آن در UI
طبق تحقیقات انجام شده نبود فضای خالی و فاصله میان المان های صفحات وب موجب تشویش ذهن و سردرگمی کاربر میشود. مغز انسان به طور ناخودآگاه حس منفی جذب کرده و نمیتواند به درستی محتوا را آنالیز میکند.
وجود فضای خالی به ویژه در طراحی سایت اهمیت و مزایایی بسیار زیادی دارد که در زیر به چند نمونه از آن اشاره خواهیم کرد
خوانایی بیشتر مطالب تکنیک فضای خالی بین پاراگراف ها و اطراف بلوکهای متن و تصاویر در واقع به افراد کمک میکند آنچه را که می خوانند درک کنند و به طور کلی به تجربه کاربری بهتر می افزایند.
همچنین برای افزایش خوانایی میتوان فاصله بین خطوط را هم افزایش داد. این کار باعث میشود متن درهم به نظر نرسد و دست شما در افزایش سایز فونت بازتر باشد.
برای نوشتن عنوان باید متن پاراگراف به عنوان نزدیک باشد و متن و عنوان تشکیل یک گروه متنی را بدهند. این گروههای متنی را از بخشهای دیگر با فاصله دور کنید. این کار باعث میشود کاربر راحتتر متن را درک کند.
تعامل بیشتر
بازدید کنندگان همیشه هنگام مرور سایت ها عجله دارند و داشتن فضای خالی سفید و خالی از حواس پرتی بازدید کننده کم میکند وتعامل را افزایش میدهد. برای مثال در بخش هایی از سایت که اطلاعات کاربردی مانند شماره تماس یا ایمیل در اختیار کاربر قرار داده میشود؛ بهتر است با استفاده از فضاهای خالی خوانایی و دسترسی به محتوا افزایش داده شود.
طبق تحقیقات انجام شده توسط وب سایت Human Factors ، استفاده از فضای خالی برای highlight کردن و یا تاکید بیشتر روی یک محتوا بطور متوسط حدود 20% آمار بازدید آن سایت را بالا خواهد بود.
اثر گذاری بیشتر با فضای خالی
فضای خالی برای اثر گذاری بر روی مخاطب در نگاه اول از اهمیت ویژه ای برخوردار است زیرا نشان دهنده ظرافت و زیرکی است. نبود چیزی نمیتواند توجهی هم جلب کند! برای همین است که استفاده از فضای خالی روش مؤثری به شمار میرود تا شما توجه بازدیدکننده را سریعتر به سمت عنصر اصلی و هدف وبسایت خود هدایت و جلب کنید!
تحقیقات اینترنتی نشان داده است که استفاده صحیح از فضای خالی در طراحی سایت و المان هایی مانند دکمه خرید و مشاوره میتواند میزان کلیک کاربران را تا ۲۰ درصد افزایش دهد.
نظم و تعادل
فضای کم فضای خالی منجر به سردرگمی ، بی نظمی و عدم اطمینان می شود – خصوصیاتی که نمی خواهید با سایت شما ویا طرح شما مرتبط باشد. از طرف دیگر ، فضای سفید میتواند کمبود محتوا را جبران کند.
عناصر مهمتر، فضای خالی بیشتری در اطراف خود دارند و همین دلیل است که باعث میشود آنها بیشتر به چشم بیایند و توجه بیننده را جلب کنند.
از فضای خالی برای مرزبندی صفحه استفاده کنید
در طراحی سایت معمولا از خط برای مرزبندی بخشهای مختلف صفحه استفاده میشود. در طرحهای جدیدتر خطوط دور بخشها کلا حذف شدهاند و به جای آن فاصلههاست که نشانه جدابودن یا ارتباط بین المانها است. این سبک طراحی بسیار زیبا و پرشور و با خلاقیت بسیار است. استفاده از فضای سفید مناسب راه را برای برقراری ارتباط روشن تر ایده ها و طرح های موثر هموار میکند.
برجسته نشان دادن CTA
از دیگر دلایل استفاده از فضای خالی در طراحی سایت می توان به افزایش CTA ) call to action ) اشاره کرد .فراخوانی به عمل یا CTA بخشی از محتوا است که میتواند به شکل تصویر ، متن ، دکمه یا یک محتوای کامل باشد و هدف آن این است که کاربر اقدام خاصی را انجام دهد . معمولا با بزرگ تر نشان دادن هر عنصر ، توجه بیشتری به آن جلب می شود . این جلب توجه را می توان با تکنیک فضای سفید نیز ایجاد کرد . آیتم هایی که بین فضای سفید قرار می گیرند تاثیر گذاری بیشتری دارند و بهتر می توانند نظر مخاطب را به سمت خود جلب کنند و در نهایت ، این توجه باعث افزایش CTA میشود.
معرفی طراحی وبسایت ها با تکنیک فضای خالی
در این بخش برخی از سایت های خارجی که به زیبایی تکنیک فضای خالی را استفاده کرده را معرفی میکنم با دیدن آنها می توانید دید بهتری نسبت به فضای خالی در طراحی سایت پیدا کنید.
Shopify
صفحه اصلی وب سایت فروشگاهی shopify یک هدف ساده دارد و آن هدایت کاربران به سمت صفحه ثبت نام (sign up) و استفاده از طرح رایگان موقتی (free trial) است.
تعداد فیلدهای ثبت نام نیز فقط یکی است و آن هم آدرس ایمیل است. بنابراین کاربر مجبور نیست چندین فیلد را پر کند و خسته کننده باشد. همچنین این فضای خالی باعث می شود که حواس کاربران پرت نشود و احتمال ثبت نام آنها نیز بیشتر شود.
Medium
وب سایت مدیوم (Medium) بصورت هوشمندانه ای از فضای خالی استفاده کرده است بطوریکه کاربران را به ادامه اسکرول صفحه تشویق می کند و طی این اسکرول، به کاربران تعداد لایک های هر پست، تعداد کامنت های آنها و پست های مرتبط با آن را نمایش می دهد.
Everlane
فروشگاه آنلاین Everlane برای نمایش دادن آخرین کالکشن پوشاک خود (GoWeave Blazer)، در صفحه اصلی خود از یک تصویر تمام صفحه ساده بهمراه یک دکمه “فراخوانی برای اقدام” یا “Call To Action” استفاده کرده است.
Wistia
وب سایت Wistia که یک پلتفرم به اشتراکگذاری ویدئو می باشد، صفحه اصلی خود را با یک جمله کوتاه و دو دکمه CTA شروع کرده است. این بخش از سایت بصورت تمام صفحه طراحی شده است که کاربر در نگاه اول بتواند دو CTA را براحتی مشاهده کند.
نتیجه گیری
فضای سفید به معنای واقعی کلمه یک فضای خالی نیست ، بلکه یک ابزار طراحی قدرتمند است. کاربرد فضای سفید هم هنر است و هم علم. حفظ سطح مطلوب فضای سفید در ترکیب طراحی و ایجاد تعادل تنها با تجربه و تمرین حاصل می شود. فضای سفید زیبا و دلپذیر نیست. موثر و با ارزش است .
رسالت آژانس دیجیتال مارکتینک آپکاد ارتقا سطح طراحی وب سایت است .امیدواریم که این مطلب توانسته باشد سطح طراحی سایت در اصفهان را بالا ببرد و دید افراد نسبت به طراحی سایت را عوض کنید اگر سوال یا انتقادی دارید بسیار خوشحال میشویم با تیم آپکاد در میان بگذارید .
