فضای فعال و غیرفعال (Active & Passive)

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

۱. فضای passive یا غیر فعال

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

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

۲. فضای active یا فعال

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

در تصویر بالا یک سری عناصر مختلف وجود دارد: Tabهای منو، لینک شبکه‌های اجتماعی و حتی اطلاعات حقوقی. با این وجود برجسته ترین عضو به وضوح طرح گرافیکی “۱۰۰۰” است که در مرکز قرار گرفته است. طراحان در آزمایش‌های کروم (Chrome Experiments) فضای خالی اطراف عنصری را که می‌خواهند کاربران بیشترین ارتباط را با آن داشته باشند به حداکثر می رسانند که این کار با کوچک کردن و منتقل کردن دیگر عناصر به گوشه ها صورت می‌گیرد.
همچنین به حداقل رساندن فضای بین یک المان غیر مهم و آنچه باید خوب دیده شود روش خوبی برای “ پنهان کردن” آن است همان طور که اغلب برای قسمت قوانین و مقررات و اطلاعات کپی رایت مشاهده می‌کنیم. در تصویر زیر می‌بینیم که چطور خط “FiberSensing is an HBM Brand” بدون هیچگونه جلب توجه زیاد، نشان داده میشود.

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

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

مینیمالیسم (ساده گرایی)

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

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

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

۱. تعداد عناصر

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

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

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

۲. حس لوکس بودن

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

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

نتیجه گیری

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


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

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

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

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

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

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

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

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

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

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

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

 

پیوستن به بحث و گفتگو یک نظر

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