قدرت فضای خالی در طراحی رابط کاربری

نقش کلیدی فضای منفی و فاصله خطوط در یک طراحی خوب

زمانی که درباره طراحی رابط کاربری صحبت میکنیم، ساده ترین راه درک آن تشخیص کامپوننت های آن طراحی و چگونگی ظاهر آنهاست. بارها پیش آمده است که با اینکه رابط های کاربری شبیه هم هستند اما در نگاه اول به این درک میرسیم که یکی بهتر از دیگری است و دیگری انگار گمشده ای دارد.

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

فضای منفی، فضای دور ریخته شده نیست

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

"معنای واقعی فرم با متضادش واضحتر میشود. در نبود شب ما نمیتوانیم روز را بشناسیم. راه های رسیدن به کنتراست بسیار است: ساده ترین آنها بزرگ/کوچک، روشن/تاریک، افقی/عمودی، گوشه دار/گرد، نرم/زبر، بسته/باز و نزدیک و دور هستند، که همگی آنها احتمالات مختلفی برای طراحی موثر در اختیار ما قرار میدهند."____Jan Tschichold

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

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

فضای منفی به عنوان یک المان فعال در طراحی

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

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

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

چگونه فضای منفی را در طراحی خود اعمال کنیم

دو نوع فضای منفی وجود دارد. فضای منفی میکرو و فضای منفی ماکرو. فضای منفی ماکرو، فضای بین کامپوننت های بزرگتر در طرح و فضای منفی میکرو، فضای بین کامپوننت های کوچکتر و فضای درون آنهاست.

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

چرا فضای منفی انقدر مهم است؟

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

ما چگونه پدیده ها را دریافت و درک میکنیم؟

روش ادراک ما به گونه ای است که همه چیز را در نسبت با چیز های دیگر درک میکنیم. این به این معنی است که برای مثال دیدن Call to action اصلی رابط کاربری کاملا به فضای اطراف آن بستگی دارد.

همانطور که در توهم اندلسون نشان داده شده، خانه A و B با اینکه رنگ یکسانی دارند طوری دیده میشوند که انگار رنگشان متفاوت است. به دلیل روش کار ذهن انسان، ما در نتیجه وجود سایه و اشیاء مجاور رنگ آنها را متفاوت دریافت میکنیم. حتی با علم به اینکه رنگ این دو شئ یکسان است ما توانایی جدا و مقایسه کردن رنگ این دو شئ را نداریم و کماکان رنگ آن دو را متفاوت میبینیم.

چگونه از این دانش درباره ادراکمان در رابطه با فضای منفی استفاده کنیم؟

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

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

درک المان ها به این صورت که شبیه هم هستند این تمایل را ایجاد میکند که از لحاظ دیداری آنها را در یک گروه قرار دهیم.

در مثال زیر میبینیم مجاورت چگونه در گروه بندی عنوان و ورودی اعمال میشود:

در اینجا میبینیم در هر دو حالت به راحتی میتوانیم عنوان و ورودی را در یک گروه قرار دهیم زیرا نزدیک هم قرار گرفته اند.

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

اعمال اصل مجاورت در این مورد به معنی ایجاد فضای منفی میکرو کمتر بین هر گروه عنوان و ورودی، و فضای منفی ماکرو بیشتر بین آن گروه ها در فرم است.

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

فضای منفی چگونه به ما کمک میکند اطلاعات را سریع تر و آسان تر پردازش کنیم؟

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

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

علاوه بر این، تحقیقات نشان داده اند که ظرفیت حافظه کوتاه مدت ما محدود به 2±7 المان است. معمولا طراحان و کارفرمایان این عدد را به عنوان حداکثر ظرفیت حافظه افراد در نظر میگیرند و فکر میکنند در رابط کاربری نباید بیش از 7 المان همزمان به کاربر نمایش دهیم. برداشت اصلی از این پژوهش در واقع باید این باشد که حافظه کوتاه مدت ما ظرفیت محدودی دارد، بنابراین نیاز است تا با استفاده از قطعاتی که در درک آسان محتوا به کاربر کمک میکند، اطلاعات معنی دار را به کاربر نمایش دهیم.

استفاده از توجه و تمرکز برای تقویت سلسله مراتب دیداری

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

هر چه بیشتر اطراف یک المان فضای منفی اضافه کنیم، احتمال دیده شدن آن بالاتر میرود.

فاصله خطوط به عنوان فضای منفی

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

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

از کجا بفهمیم چه میزان فضای بین خطوط کافیست

بر اساس راهنمای دسترس پذیری وب (wcag 2.0) فضای بین خطوط متن باید حداقل 150 درصد بزرگتر از اندازه فونت باشد.

این به این معنی است که تقریبا هیچگاه نباید از فاصله خطوط پیشفرض تعریف شده برای پاراگراف ها و عناوین استفاده کنیم. برای مثال اکثر مرورگر ها به صورت پیشفرض از فاصله خطوط 110 درصد و 120 درصد، Sketch و Adobe Creative Suite از 120 درصد، Bootstrap از 142 درصد اندازه فونت تعریف شده و Medium از 157 درصد برای متون خود استفاده میکنند.

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

در این دو مثال فضای منفی متفاوتی اعمال شده است:

برای اینکه ببینیم طرح بندی بدون محتوا یا فضای مثبت معنی دار چطور به نظر میرسد. در عکس زیر به وضوح میبینیم که فضای منفی چگونه به درک بهتر دیداری رابط کاربری کمک میکند:

میبینیم که اضافه کردن فضای منفی میتواند در سطوح مختلف اعمال شود. اضافه کردن درون کامپوننت ها:

استفاده از فضای منفی میکرو برای تنظیم فاصله خطوط در پاراگراف:

در سمت چپ پاراگرافی با اندازه فونت 17 پیکسل با فاصله خطوط 1.58 (150%) را میبینیم و در سمت راست پاراگرافی با همان اندازه فونت و فاصله خطوط 1.23 (123%) را میبینیم.

اعمال فاصله خطوط سفارشی در اپلیکیشن های نیتیو اندروید و iOS

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

در اندروید امکان تعریف مستقیم فاصله خطوط در استایل متن کلی به وسیله LineSpacingMultiplier وجود دارد.

نکات مهم

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

منبع: The power of empty space in UI design

خوشحال میشم من رو در شبکه های اجتماعی دنبال کنید

توییتر

لینکداین

دریبل

فیسبوک

مقالات قبلی من در ویرگول:

نقشه همذات پنداری: اولین قدم در تفکر طراحی

مردم اسکرول نمیکنند (و دیگر افسانه ها درباره طول صفحه)