فضای خالی در طراحی تعاملی : به کارگیری قدرت پنهان «هیچ‌چیز»! (بخش اول)

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

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

ایجاد فضای خالی

می‌دانیم که فضای منفی ابتدا یکی از اجزاء زیبایی شناسی بوده است.

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

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

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

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

لوکس بودن : فضای خالی زیاد، صفحه شما را پر از ظرافت و کمال خواهد کرد.

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

ماکرو و میکرو

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

۱. فضای خالی در ابعاد بزرگ (macro white space)

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

  • ترکیب عمومی
  • جدا سازی عناصر مختلف
  • ستون های متنی
  • حاشیه ها
  • پدینگ
  • فضای بین عکس‌ها و تصاویر گرافیکی

فضای خالی ماکرو یا در ابعاد بزرگ به شدت روی جریان بصری کاربر تأثیر می‌گذارد. این تاثیر یا با ملایمت توجه مخاطب را جلب می‌کند و یا به زور این کار را انجام می‌دهد. در اینجا یک قانون وجود دارد و آن این است که فواصل بیشتر با شدت بیشتری توجه را جلب می کنند. در واقع ما می‌خواهیم تعادل را بر هم بزنیم اما فضای خالی بیش از حد اصول ژستالت (Gestalt Principles) را نقض می‌کند و رابطه‌ی بین اشیاء را هم ضعیف می‌کند.
بیایید نگاهی به سایت Tomasz Wysocki به عنوان نمونه ای از استفاده مناسب از فضای خالی در تعامل با کاربر داشته باشیم.

اولین چیزی که بیشتر کاربران به آن نگاه می کنند تیترصفحه است. “Digital Art & Experiments” در یک فونت معمولی . در رابطه با اندازه متن ، فضای خالی اطراف تیتر توجه کاربران را از هر دو طرف جلب می کند. همچنین منو های بالا و پایین هم توجه را به خود جلب می‌کنند. اگرچه نه به همان اندازه زیرا فقط در یک طرفشان فضای خالی دارند. به طور کلی ، فضای خالی وظیفه‌ی خود را برای جلب کردن توجه کاربر انجام می دهد. با کشیدن نشانگر موس روی صفحه ناگهان تجربه‌ای جذاب خلق می‌شود. تصویر زیر نقاشی‌ای که روی بوم ظاهر می‌شود را نشان می‌دهد.

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

۲. فضای خالی در ابعاد کوچک و ریز یا میکرو (micro white space)

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

  • حروف
  • خطوط متن
  • پاراگراف ها
  • آیتم‌های یک لیست
  • دکمه‌ها و آیکون‌ها

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


قسمت های دیگر این کتاب:

قسمت اول: سخنی کوتاه در طراحی تعاملی : اهمیت متن ! (بخش اول) را بخوانید.

قسمت دوم: سخنی کوتاه در طراحی تعاملی : اهمیت متن ! (بخش دوم) را بخوانید.

قسمت سوم: فضای خالی در طراحی تعاملی : به کارگیری قدرت پنهان «هیچ‌چیز»! را بخوانید. 

قسمت چهارم: فضای فعال و غیرفعال (Active & Passive) را بخوانید.

قسمت پنجم: جذابیت در طراحی تعاملی: ایجاد عشق در نگاه اول! را بخوانید.

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

قسمت هفتم: عنصر سری : ریزتعامل‌ها را بخوانید.

قسمت هشتم: ۵ راز روانشناختی برای طراحی تعاملی پایدار را بخوانید.

قسمت نهم: لذت در طراحی تعاملی (موشکافی چند مثال مهم) (بخش اول) را بخوانید.

قسمت دهم: لذت در طراحی تعاملی (موشکافی چند مثال مهم)(بخش دوم) را بخوانید.

 

نظرتان را بگویید