منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۸ دقیقه

قانون شکل و زمینه (Law of Figure-Ground) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

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

تعریف

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

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

و کلمهٔ «خودکار» هستهٔ ماجراست. این تفکیک پیش از هر خواندنی اتفاق می‌افتد.

و به همین دلیل، هیچ متنی نمی‌تواند اشتباهِ شکل و زمینه را جبران کند — چون کاربر متن را بعد از آن تصمیم می‌خواند.

خاستگاه

و این مفهوم از روان‌شناسی گشتالت در دههٔ ۱۹۲۰ آلمان بیرون آمد، از کار ماکس ورتهایمر، کورت کوفکا و ولفگانگ کهلر.

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

دو سازوکار

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

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

و این دو سازوکار همیشه هم‌جهت نیستند، و اینجاست که مسئله شکل می‌گیرد.

یعنی یک عنصر کوچکِ پرکنتراست، با یک عنصر بزرگِ کم‌کنتراست رقابت می‌کند — و برندهٔ این رقابت را نمی‌شود از پیش تعیین کرد.

و همین است که دلیل بیشتر مسئله‌های سلسله‌مراتب بصری است: دو سیگنال متناقض، به‌جای یک سیگنال روشن.

سه نسبت شکل و زمینه

پایدار — شکل به‌روشنی غالب است و تفکیک متمایزی وجود دارد.

برگشت‌پذیر — شکل و زمینه وزن بصری تقریباً برابری دارند. مثل گلدان معروف روبین، که بیننده در آن یا یک گلدان سیاه می‌بیند یا دو چهرهٔ سفید.

مبهم — تمایز کمی وجود دارد، و عنصرها می‌توانند هم‌زمان شکل و زمینه باشند.

و برای رابط کاربری، فقط حالت اول قابل استفاده است.

و دو حالت دیگر جایشان در نشان و پوستر و هنر است — جایی که مکث و کشف بخشی از ارزش کار است.

و در رابطی که کاربر می‌خواهد کاری انجام دهد، هر مکثی هزینه است.

پنج راهبرد طراحی

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

و بند چهارم بیشترین بازده را دارد و کم‌ترین کار را می‌برد.

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

چهار نمونه

اپل موزیک — کاور آلبوم به‌عنوان شکل برجسته، روی پس‌زمینهٔ تک‌رنگ.

آمازون — دکمهٔ «افزودن به سبد» با دیده‌شدن بالا، در تقابل با فضای سفید.

ای‌بی — دکمهٔ جست‌وجوی آبی که روی پس‌زمینهٔ سفید برجسته می‌شود.

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

و سه نمونهٔ اول یک چیز مشترک دارند: پس‌زمینه‌شان تک‌رنگ است.

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

شش اشتباه رایج

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

و اشتباه دوم رایج‌ترین است و ریشهٔ ساده‌ای دارد: وقتی همه‌چیز مهم باشد، هیچ چیزی شکل نیست.

و در عمل، این اتفاق از تصمیم طراحی نمی‌آید — از نتوانستنِ نه‌گفتن به ذی‌نفعان می‌آید.

شش بهترین‌روش

• - از پالت رنگی محدود برای توجه متمرکز استفاده کنید.
• - سلسله‌مراتب اندازه بسازید، با عنصرهای پیش‌زمینهٔ بزرگ‌تر.
• - سطح کنتراست مناسب را حفظ کنید — با ابزارهایی مثل WebAIM.
• - فضای سفید کافی بگذارید تا حواس‌پرتی پیش نیاید.
• - تمایز روشن را تضمین کنید و از ابهام ناخواسته بپرهیزید.
• - و تفاوت‌های فرهنگی در تفسیر بصری را در نظر بگیرید.

و منبع دلیل اهمیت این اصل را در دو جمله می‌گوید: «انسان این کار را با اطلاعات بسیار کمی انجام می‌دهد» — چون «ذهن به‌طور خودکار می‌کوشد نظم و معنا پیدا کند.»

یک آزمون دو‌مرحله‌ای

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

مرحلهٔ اول: آزمون تاری. صفحه را تار کنید تا هیچ متنی خوانده نشود.

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

مرحلهٔ دوم: آزمون خاکستری. صفحه را کاملاً بی‌رنگ کنید.

و اگر سلسله‌مراتب از بین رفت، یعنی کل شکل و زمینهٔ شما روی رنگ سوار بود — و برای کاربر نابینای رنگ وجود ندارد.

و ترتیب این دو مهم است. آزمون تاری، وزن را می‌سنجد. و آزمون خاکستری، وابستگی به رنگ را.

و طرحی که هر دو را پاس کند، شکل و زمینه‌اش را از ساختار گرفته، نه از تزئین.

شکل و زمینه در حالت‌ها

و یک کاربرد این اصل هست که منبع به آن نمی‌رسد: تغییر شکل و زمینه، ساده‌ترین راه نشان‌دادن تغییر وضعیت است.

و در عمل، بیشتر حالت‌های رابط با همین کار می‌کنند.

غیرفعال یعنی عنصر به زمینه عقب رانده شده — کم‌کنتراست، بی‌وزن.

فعال یعنی عنصر به شکل آمده — پرکنتراست، با سایه یا خط دور.

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

و همین آخری ظریف‌ترین است، چون دو راه دارد و فقط یکی‌شان درست است.

و راه اشتباه برجسته‌کردن عنصر انتخاب‌شده است. و راه درست عقب‌راندن بقیه.

و تفاوتشان در نتیجه است: اگر آیتم انتخاب‌شده را پررنگ‌تر کنید، در فهرست بلند هر آیتم رقیب می‌شود.

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

در بافت فارسی

یک: متن فارسی وزن بصری بیشتری دارد. خط متصل و نقطه‌های فراوان، لکهٔ خاکستریِ پرتری روی صفحه می‌سازند.

و نتیجهٔ عملی‌اش این است که همان بلوک متنی در فارسی راحت‌تر «شکل» می‌شود — و ممکن است با عنصری که واقعاً باید شکل باشد رقابت کند.

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

دو: فضای سفید در فارسی گران‌تر است. همان مقدار فضا، در فارسی خلوت‌تر به نظر نمی‌رسد.

و همان‌طور که در توهم در طراحی نوشتم، توهم سادگی اینجا با تنفس ساخته می‌شود، نه با حذف — و همین برای زمینه هم صادق است.

سه: پس‌زمینهٔ تصویری اینجا رایج‌تر است، و پرهزینه‌تر. در طراحی محلی، تصویر پس‌زمینه و بافت زیاد به کار می‌رود.

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

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

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

جمع‌بندی

• - قانون شکل و زمینه: انسان به‌طور خودکار تصویر را به پیش‌زمینه (شکل) و پس‌زمینه (زمینه) تفکیک می‌کند
• - و این تفکیک پیش از هر خواندنی اتفاق می‌افتد — پس هیچ متنی نمی‌تواند اشتباهش را جبران کند
• - ورتهایمر · کوفکا · کهلر · دههٔ ۱۹۲۰ آلمان
• - دو سازوکار: تفاضل اندازه · و کنتراست — و این دو همیشه هم‌جهت نیستند
• - و عنصر کوچکِ پرکنتراست با عنصر بزرگِ کم‌کنتراست رقابت می‌کند: دو سیگنال متناقض به‌جای یک سیگنال روشن
• - سه نسبت: پایدار · برگشت‌پذیر (گلدان روبین) · مبهم — و برای رابط، فقط اولی قابل استفاده است
• - پنج راهبرد: کنتراست · توازن · سلسله‌مراتب · فضای سفید · سایه و خط دور
• - و فضای سفید بیشترین بازده را دارد، چون زمینه‌ای بی‌اطلاعات هیچ‌وقت با شکل رقابت نمی‌کند
• - نمونه‌ها: اپل موزیک · آمازون · ای‌بی · شاخص سلامت اقیانوس — و سه‌تای اول پس‌زمینهٔ تک‌رنگ دارند
• - شش اشتباه — و پرکردن طرح رایج‌ترین است: وقتی همه‌چیز مهم باشد، هیچ چیزی شکل نیست
• - آزمون دو‌مرحله‌ای: تاری وزن را می‌سنجد، و خاکستری وابستگی به رنگ را
• - در حالت‌ها: غیرفعال یعنی عقب‌رانده به زمینه، و انتخاب‌شده یعنی بقیه زمینه شده‌اند — نه اینکه خودش پررنگ‌تر شده
• - و در فارسی: متن وزن بصری بیشتری دارد · فضای سفید گران‌تر است · متن روی تصویر زودتر ناخوانا می‌شود · و کنتراست را یک درجه بالاتر ببرید