قانون فضای تنفس ( Breathing Space ) در طراحی UI / UX

فضای تنفس
  • پیش گفتار این مقاله
  • ایمان کمالی در 1399/08/20

در این مقاله می پردازیم به قانون فضای تنفس در طراجی رابط و تجربه کاربری یا همان UI و UX

فضای تنفس
Array
(
    [0] => Ui UX
    [1] => آموزش UX
)

قانون تنفس یا فضای سفید
قانون تنفس یا فضای سفید

یکی از مسائل مهم در طراجی تجربه کاربری ( UX ) فضای تنفس یا همان Breathing Space است!

ابتدا می پردازیم به تعریف فضای تنفس در طراجی تجربه کاربری!

فضای تنفس یا همان breathing space چیست و چه معنایی دارد؟!

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

فضای سفید یا فضای خالی می تواند تاثیر بسیار زیادی در تجربه کاربری ( User Experience ) بگذارد!

در ادامه با ذکر مثال اهمیت این فضای سفید را بیشتر و بهتر درک می کنیم.

یک نکته مهم در مورد فضای سفید؛ در بحث فضای سفید صحبت از یک طرح زیبا نیست!

ممکن است این برداشت اشتباه صورت گیرد که وقتی از فضای خالی یا همان White space صحبت می کنیم هدف ما به انجام رساندن یک طرح UI زیباست!

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

موضوع کمی گنگ است بنابراین در ادامه مقاله با مثال می توانیم این موضوع را نشان دهیم.

با استفاده از فضای سفید ( White space ) می توانید المان ها را برجسته تر نشان دهید!

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

باید این نکته را بدانید که در یک صفحه وب ( و یا حداقل در هر بخش از صفحه ) کاربر تمایلی ندارد که بیشتر از دو المان ( element ) یا جز برجسته مشاهده کند!

فضای سفید به شما کمک می کند تا بتوانید المان های برجسته را بهتر نشان دهید.

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

به کمک فضای خالی ( White Space ) درک مطلب را برای کاربر ساده تر کنید!

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

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

برای مثال در بیت بنگ فضای خالی را می توانید در همه جا مشاهده کنید، حتی ردیف هایی که آخرین پست ها را نمایش می دهند شامل کارت هایی است که در آن عنوان کارت در یک فضای سفید ( White Space ) قرار گرفته است.

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

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

القای احساس رضایت در کاربران با استفاده از فضای خالی یا همان white space

فضای تنفس در دیجی کالا
فضای تنفس در دیجی کالا

اگر در طراحی تجربه کاربری، فضاهای سفید را در نظر نگیرید کاربران به راحتی دچار سردرگمی می شوند!

همین که کاربر مجبور باشد از لابلای جزئیات به دنبال چیزی بگردد احساس رضایت را در اون کم تر کرده اید.

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

جلب اعتماد مشتری با در نظر گرفتن فضای تنفس مناسب!

فضای تنفس
آمازون و استفاده از فصای سفید

جلب اعتماد مشتری نیز از مهم ترین عامل های جذب آن ها است!

یک مغازه که مرتب است و به راحتی به تمامی قسمت ها دسترسی مناسب وجود دارد برای مشتریان بسیار قابل اعتماد تر از فروشگاهی است که همه چیز در هم و یا چسبیده به هم است و دسترسی و دید مناسبی بر روی محصولات آن وجود ندارد!

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

چطور با استفاده از قانون فضای تنفس محصولات را ارزشمند جلوه دهیم؟!

در یک مثال به صورت عملی به شما نشان می دهیم که چگونه محصولات گران قیمت را در وب سایت نمایش دهید تا کاربران متوجه منحصر به فرد بودن محصول شما شوند!

برای این منظور مقاله ” طراحی تجربه کاربری ( UX ) محصولات با ارزش یا گران قیمت ” را حتما مطالعه کنید.

نتیجه گیری و چکیده این مقاله

در این مقاله با فضای خالی یا سفید ( white space ) آشنا شدیم و دانستیم استفاده از این فضای سفید می تواند در تجربه کاربری بسیار موثر باشد.

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

امیدوارم از این مقاله استفاده لازم را ببرید.

شاد و پبروز باشید.