فضای سفید را بشناسید؛ تمرین و الگوی مفید برای شروع یادگیری

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

در طراحی UI برای وب‌سایت‌ها و برنامه‌های تلفن همراه، فضای خالی عامل مؤثری در بهبود کارایی رابط کاربری است.

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

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

فضای سفید چیست؟

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

فضای سفید مانند تیم پشت‌صحنه است که وظیفه آن‌ها این است که خود را کنار بکشند تا ستاره نمایش بیشتر بدرخشد.

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

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

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

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

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

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

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

در میان مزایای استفاده هوشمندانه از فضای منفی در طراحی، می‌توان به موارد زیر نیز اشاره کرد:

• فضای سفید می‌تواند درک مطلب را افزایش دهد؛
• عناصر مهم UI را برجسته و جداسازی می‌کند، مانند CTA ها؛
• می‌توانید یک طرح ساده‌تر و کاراتر برای کاربر ایجاد کنید؛
• استایل و ظرافت را به صفحه اضافه می‌کند.

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

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

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

اعمال قانون مجاورت در این مسئله، به معنای کم کردن فاصله میان برچسب و ورودی در هر گروه و قرار دادن فاصله‌ای بزرگ‌تر بین این گروه‌ها در فرم است.

• فضای منفی به ما کمک می‌کند تا داده‌ها را به‌سرعت و به‌آسانی پردازش کنیم.

تکه‌تکه کردن روشی است که ما با آن چیزها را به خاطر می‌سپاریم. تکه‌ها مجموعه‌ای از قطعات منفردی هستند که در کنار هم گروهی معنی‌دار تشکیل می‌دهند. با توجه به این‌که ظرفیت حافظه ما محدود است، می‌توانیم به‌راحتی از فضای سفید برای ایجاد گروه‌های معنی‌دار استفاده کنیم و به کاربر اجازه دهیم تا به‌راحتی آن‌ها را به خاطر بسپارد. تعداد مجموعه‌هایی که حافظه کوتاه‌مدت ما می‌تواند آن‌ها حفظ کند و روی آن پردازش انجام دهد، 2+-7 مجموعه است که این یعنی ما نباید بیش از 7 عنصر را در UI خود در یک زمان ارائه کنیم؛ بنابراین باید با استفاده از تکه‌هایی که بتوان به‌راحتی محتوای آن را درک کرد، داده‌های معنی‌داری به کاربر ارائه دهیم.

• از توجه و تمرکز برای تقویت تفاوت بصری استفاده کنید.

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

• فاصله خطوط و درک محتوای ما

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

با توجه به دستورالعمل‌های دسترسی وب (wcag 2.0)، فاصله بین خطوط متن باید حداقل 150٪ بزرگ‌تر از اندازه فونت باشد. این بدان معنی نیست که اجازه نداریم از فاصله‌ای کمتر یا بیشتر بین خطوط یک متن استفاده کنیم؛ به‌عنوان‌مثال، اغلب مرورگرها از فاصله 110٪ تا 120٪ استفاده می‌کنند، مجموعه اسکچ و ادوبی از 120٪، بوت استرپ از 142٪ و مدیوم از 157٪ فونت متن اصلی خود استفاده می‌کنند. فرمول دقیقی برای فضای منفی که ما باید در یک رابط کاربری مشخص اعمال کنیم، وجود ندارد، اما با تمرین و تجربه بهتر می‌شویم.

4 تمرین‌ موثر برای شروع استفاده از فضای سفید

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

هر طراحی برای فضای سفید مناسب نیست؛ اما استفاده از فضای سفید در طراحی شما می‌تواند بر روی موارد زیر اعمال شود:

• تایپوگرافی
• آیکونوگرافی
• تصویرسازی
• ترکیب (Composition)
• ستون‌های متن
• حاشیه‌ها (Margins)

ما باید از فضای سفید با توجه با محتوای هر وب‌سایت استفاده کنیم، به این معنی که قوانینی کلی و همیشگی برای اعمال روی هر وب‌سایتی وجود ندارد؛ اما در نظر گرفتن نکات زیر می‌تواند همیشه مفید باشد:

• نکته اول: کمتر از 15 نقطه جلب‌توجه در صفحه قرار دهید.

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

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

• نکته دوم: اولویت‌دهی به خوانایی محتوا

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

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

• نکته سوم: از خلأ خارج شوید

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

• نکته چهارم: مطمئن شوید که فضای خالی در راستای هدف باشد

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

7 نمونه الهام‌بخش طراحی فضای سفيد

سایت Squarespace از تعداد کمی عنصر UI در صفحه اصلی خود استفاده می‌کند اما به‌رغم این محدودیت‌ها، کاربر هر چیزی که برای درک همه کاری که Squarespace می‌کند لازم است را در اختیار دارد.

فیلد جستجو در نوبار اجازه می‌دهد تا کاربر هر چه می‌خواهد را پیدا کند. برخلاف روش رایج برای دکمه‌های دعوت به اقدام، دکمه تماس سیاه‌رنگ است و هیچ کارت اعتباری برای شروع کار شما مورد نیاز نیست. به همین سادگی!

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

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

مجله Pisacco Chronicle یک مجله آنلاین است که بر روی غذا، سینما و هنر تمرکز دارد.Pisacco از یک اسلایدر نوع Polaroid با عکسی رنگارنگ استفاده می‌کند.

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

یک مفهوم نسبتاً جدید می‌تواند مردم را به سمت خود جلب کند؛ با استفاده از طراحی فضای سفیدی، Seedlip USP خود را به‌روشنی و به‌طور خلاصه با یک خط نوشته ساده معرفی می‌کند. با این طراحی نوشته بیشتری نیاز نیست، البته عکسی زیبا در مرکز و جایی کاربر به پایین صفحه می‌رود قرار داده شده تا اطلاعات بیشتری در مورد این نوشیدنی غیرالکلی پیدا کند.

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

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

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

حرف آخر

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