پنج تاثیر فضای سفید بر تجربه کاربر

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

تعریف فضای سفید در طراحی وب سایت ها

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

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

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

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

• کسانی که از وب سایت شما دیدن می کنند، چه کسانی هستند؟
• چرا به وب سایت آمده اند؟
• چه کاری در سایت شما انجام می دهند؟

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

(اول) هدایت کردن بازدیدکننده در وب سایت، (دوم) کمک به او در پیدا کردن چیزی که می خواهد، و (سوم) بر قرار تعامل با او استفاده کنید.

طراحی تمیز با فضای سفید زیاد، به شما اجازه می دهد، تا بر محتوایی تمرکز کنید که بیشترین اهمیت را داشته و ذهن شما منحرف نمی شود.

می خواهم دو مثال از دو صفحه بزنم.

یکی فروشگاه اینترنتی جدید بامیلو و دیگری یک فروشگاه اینترنتی Bree. هر دو از یک صفحه شبیه به هم . فروش یک کیف زنانه بسیار نزدیک به هم .(البته تقریبا چون معادل ایرانی پیدا نکردم)

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

حالا بامیلو رو ببینید :

فضا سفید است ولی آیا چنین تاثیری دارد؟

فونت ها در بدترین حالت ممکن انتخاب شده اند. آیا نیاز های شما را تامین می کنند؟

آیا به غیر از قیمت برای مشتری اینترنتی که هیچ دانشی از کالا ندارد توضیح داده شده است؟

آیا توضیحات کامل است؟ من به عنوان یک کاربر حرفه ای به هیچ وجه خرید نمی کردم . چه برسد به کاربران محتاط ایرانی!

انشالله در آینده در قسمت های آموزشی دقیق تر در این باره بیشتر اشاره می کنیم.

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

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

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

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

فضای سفید، باعث می شود، چشم بازدیدکنندگان استراحت کند.

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

فضای سفید، باعث حذف فشردگی، انحراف ذهنی و تصمیمات اضافی در طراحی می شود.

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

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

فضای سفید، ظاهر و حسی مدرن دارد

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

فضای سفید، باعث احساسی شدن طراحی می شود

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

فضای سفید، می تواند نشان دهنده احساس باشد و احساساتی خاص را ایجاد کند.

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