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

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

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

Using whitespace in web design

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

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

 

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

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

روش ساده برای درگیر کردن کاربران با سایت و جلوگیری از پرت شدن حواس آنها، سادگی (simplicity) می باشد که این سادگی با استفاده از فضای خالی (white space) در طراحی صفحات وب بوجود می آید.

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

فضای خالی (White Space) چیست؟

فضای خالی به فاصله بین المان های مختلف یک وب سایت گفته می شود که نشانه‌گذاری نشده اند (unmarked distance). وجود این فضا باعث ایجاد تمرکز بیشتر بازدیدکنندگان روی محتوای وب سایت خواهد شد و نیز احتمال پرت شدن حواس کاربران را نیز کاهش می دهد.

تعریف فضای خالی

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

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

برای درک اهمیت استفاده از فضای خالی (whitespace) در طراحی یک وب سایت، تصور کنید یک صفحه وب دارید که مانند دفترچه تلفن پر باشد از اطلاعات تماس مخاطبین. بعنوان مثال تصویر زیر نمونه ای از دفترچه تلفن می باشد!

طراحی دفترچه تلفنی:

 

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

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

تاثیر فضای خالی بر فرآیند خواندن مطالب سایت:

برای نشان دادن تاثیر استفاده از فضای خالی در طراحی وب و کمک آن به فرآیند خواندن و بخاطر سپردن محتوا توسط مغز انسان، به تصویر زیر از وب سایت Digital Ink دقت کنید:

طراحی متراکم در مقابل طراحی خلوت

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

دسته‌بندی محتوا توسط تکنیک فضای خالی:

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

طراحی بهینه کارت های وب سایت

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

کاربرپسند بودن طراحی فضای خالی:

استفاده از فضای خالی در طراحی یک وب سایت، اهمیت ویژه ای دارد. علاوه بر مسئله زیبایی شناسی قضیه، از لحاظ بهینه سازی سایت نیز اهمیت دارد. استفاده درست از فضای خالی در سایت، باعث می شود که صفحات وب سایت براحتی توسط کاربران قابل پیمایش باشند (کاربر پسند-user friendly) و نیز بیشتر قابل درک و خواندن خواهند بود. در نهایت احتمال اینکه کاربران، اکشن موردنظر ما را انجام دهند بیشتر خواهد بود (CTA: Call To Action).

افزایش آمار بازدید سایت:

آمار بازدید سایت

طبق تحقیقات انجام شده توسط وب سایت Human Factors ، استفاده از فضای خالی برای highlight کردن و یا تاکید بیشتر روی یک محتوا بطور متوسط حدود 20% آمار بازدید آن سایت را بالا خواهد بود. در این زمینه به تصویر زیر توجه کنید:

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

در تصویر سمت چپ، دکمه فراخوانی برای اقدام (CTA: Call To Action) جایی برای نفس کشیدن ندارد. این دکمه در بین دو بخش (section) شلوغ و مملو از متن محاصره شده است. المان های حواس پرت کننده زیادی در اطراف دکمه CTA وجود دارد که باعث می شوند کاربران از انجام عمل اصلی موردنظر طراح سایت (Action) باز بماند. در حالی که در تصویر سمت راست، دکمه CTA با فضای خالی مناسبی احاطه شده است. کاربران با مشاهده این دکمه، از اسکرول دست می کشند و به لینک CTA توجه خواهند کرد.

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

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

call to action

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

 

1- Shopify:

صفحه اصلی وب سایت فروشگاهی shopify یک هدف ساده دارد و آن هدایت کاربران به سمت صفحه ثبت نام (sign up) و استفاده از طرح رایگان موقتی (free trial) است.

Shopify

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

سایز فونت منوی اصلی (main navigation) نیز از تکست اطراف فرم ثبت نام کوچکتر درنظر گرفته شده است تا تمرکز کاربران را روی این فرم جلب کند.

2- Everlane:

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

Everlane

فروشگاه آنلاین Everlane برای نمایش دادن آخرین کالکشن پوشاک خود (GoWeave Blazer)، در صفحه اصلی خود از یک تصویر تمام صفحه ساده بهمراه یک دکمه “فراخوانی برای اقدام” یا “Call To Action” استفاده کرده است. با این طراحی، کاربران را ترغیب کرده تا بر روی این دکمه یعنی shop now کلیک کنند. تصویر فوق نمونه خوبی از استفاده بهینه از فضای خالی در وب سایت است.

3- Wistia:

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

Wistia

 وب سایت Wistia که یک پلتفرم به اشتراک‌گذاری ویدئو می باشد، صفحه اصلی خود را با یک جمله کوتاه و دو دکمه CTA شروع کرده است. این بخش از سایت بصورت تمام صفحه طراحی شده است که کاربر در نگاه اول بتواند دو CTA را براحتی مشاهده کند.

4- WeLikeSmall:

آژانس دیجیتال WeLikeSmall ثابت کرده است که فضای خالی حتما نباید خسته‌کننده، خالی و یا حتی استاتیک باشد. صفحه اصلی آنها یک نمای تمام صفحه از آخرین پروژه های ویدئویی انجام شده را به نمایش گذاشته است تا به محض ورود کاربران به این سایت، توجه آنها را جلب کند.

به منظور تمرکز بر روی ویدئو، متن روی ویدئو کوتاه و مینیمال (minimal) درنظر گرفته شده است. در یگ گوشه لوگوی شرکت و در گوشه دیگر منوی همبرگری (Hamburger menu) واقع شده است. شعار شرکت یعنی “Belief in the making” درست در مرکز ویدیو قرار گرفته است و در زیر آن، یک لینک Call to action ساده با متن “Play 2016 reel” آمده است که به صفحه پروژه های انجام شده سال 2016 این شرکت لینک می باشد.

5- Simpla:

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

Simpla

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

6- موزه هنر هاروارد (Harvard Art Mueseum):

موزه هنر هاروارد به ارائه و نمایش تصاویر قدیمی معروف می باشد اما صفحه اصلی سایت این موزه مسلما مدرن می باشد. فضای خالی استفاده شده در این صفحه وب، بخوبی توانسته است تصاویر ویژه را به معرض نمایش کاربران قرار دهد. و این اطمینان را می دهد که حواس کاربران در این صفحه به المان های دیگر پرت نمی شود. طراحی صفحه اصلی سایت Harvard art museum همانند موزه واقعی هاروارد می باشد.

Harvard Art Mueseum

استایل این تصاویر بصورت masonry می باشد. استایل masonry باعث می شود که کاربران به اسکرول صفحه ادامه دهند و همچنین این اطمینان را می دهد که تصاویر بصورت منظم نمایش داده می شوند و هیچیک از آنها فاصله کمتر یا بیشتر با بقیه ندارد. با اسکرول به سمت پایین صفحه، منوی اصلی (MAIN NAVIGATION) نیز محو می شود تا صفحه خلوت تر باشد.

7- BurnKit:

وقتی در حال طراحی یک قالب مینیمال با استفاده از تکنیک فضای خالی (whitespace) برای وب سایت هستید، تصمیم برای انتخاب المان و محتوای مهم برای نمایش در صفحه اصلی سایت سخت می شود. به این دلیل که فضای زیادی نداریم که تمام محتوای موردنظر را در آن قرار دهیم. وب سایت BurnKit به ما نشان می دهد که چگونه می توان انواع مختلف اطلاعات را در یک طراحی مینیمال نمایش دهیم، بدون اینکه این اطلاعات با هم قاطی شوند و باعث سردرگمی کاربران شود.

BurnKit

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

8- Medium:

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

Medium

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

9- Ahrefs:

وب سایت aHrefs نمونه دیگری از تکنیک فضای خالی می باشد که رنگ بک گراند این سایت سفید نمی باشد (آبی تیره است) اما بخوبی از این تکنیک بهره برده است و دکمه Call to Action را با رنگ پس زمینه نارنجی مشخص کرده است که می تواند براحتی توجه و تمرکز کاربران را به سمت خودش جلب کند.

Ahrefs

با سایز فونت بزرگ و استایل ضخیم (bold) تیتر سفیدرنگی نمایش داده شده است که در زیر آن، متن دو خطی با رنگ کمرنگتر و font-size کوچکتر بعنوان زیر تیتر مشاهده می شود. این متون وسط چین می باشند که بلافاصله پس از آنها دکمه ای نارنجی رنگ با عنوان “Start your free trial” آمده است.

امیدواریم به اهمیت استفاده از فضای خالی در طراحی قالب یک وب سایت پی برده باشید !

شما دوستان عزیز می توانید سوالات یا پیشنهادهای خود را به آدرس ایمیل [email protected] و یا فرم تماس با ما ارسال نمائید.

منبع: https://blog.hubspot.com

5/5 ( 1 نظر )

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین کتاب‌های الکترونیکی

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

کتاب آموزش گوگل آنالیتیکس

دانلود رایگان کتاب الکترونیکی

آموزش تصویری گوگل آنالیتیکس

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"