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

قانون مجاورت (Law of Proximity) چیست؟

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

فاصله، قوی‌ترین ابزار گروه‌بندی است. قوی‌تر از رنگ، قوی‌تر از خط دور، و ارزان‌تر از هر دو.

تعریف

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

و این ادراک صرف‌نظر از تفاوتشان در رنگ و شکل و اندازه اتفاق می‌افتد.

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

و آن «صرف‌نظر از» بار اصلی را می‌کشد. مجاورت، تفاوت‌های دیگر را زیر پا می‌گذارد.

خاستگاه

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

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

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

چطور کار می‌کند

و سازوکارش سرراست است: «هرچه دو یا چند شیء به هم نزدیک‌تر باشند، احتمال اینکه بیننده آن‌ها را یک گروه یا واحد ادراک کند بیشتر است.»

و این ادراک بر بقیهٔ ویژگی‌های بصری غالب می‌شود — و منبع صریح می‌گوید مجاورت می‌تواند حتی از رنگ هم در اهمیت بصری پیشی بگیرد.

و اشیایی که با هم ظاهر می‌شوند، گروه‌های متمایزی می‌سازند جدا از بقیه.

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

و آن این است: نمی‌شود با رنگ، گروه‌بندیِ ساخته‌شده با فاصله را خنثی کرد.

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

سه عنصر کلیدی

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

و این سه در یک نکته با هم شریک‌اند: هیچ‌کدام چیزی به صفحه اضافه نمی‌کنند.

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

دوازده توصیهٔ اجرایی

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

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

و معنایش این است: اگر باید توضیح دهید چرا این دو چیز یک گروه‌اند، گروه نیستند.

پنج نمونه

فروشگاه — ایربی‌ان‌بی با عنصرهای دقیقاً تراز، فاصله‌گذاری یکدست در چیدمان شبکه‌ای، و گروه‌کردن مؤلفه‌های مرتبط با جست‌وجو (فیلتر، نقشه، فهرست).

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

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

ناوبری — منوهای سایت آیتم‌های مرتبط را گروه می‌کنند تا کاربر گزینه‌ها را بی‌سردرگمی بشناسد.

فرم — میدان‌های مرتبط (نام و نام خانوادگی) گروه‌شده ظاهر می‌شوند و پیوندشان را نشان می‌دهند.

پنج فایده

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

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

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

و منبع یک پیامد پارادوکسی را هم نام می‌برد که ارزش برجسته‌کردن دارد.

و آن این است: خوشه‌کردن بیش از حد عنصرها می‌تواند دیده‌شدن را کم کند.

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

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

نسبت با فضای سفید

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

و فضای سفید پنج کار می‌کند:

• - جدایی و روشنیِ گروه‌بندی می‌سازد.
• - نسبت شکل و زمینه را برپا می‌کند.
• - تمرکز را هدایت می‌کند.
• - خوانایی را بهتر می‌کند.
• - و به توازن زیبایی‌شناختی کمک می‌کند.

و جانمایی راهبردی فضای سفید، اثربخشی مجاورت را تقویت می‌کند.

پشتوانهٔ پژوهشی

و این اصل از پژوهش‌های اثرگذاری می‌آید، از جمله مطالعهٔ بک در ۱۹۶۶ با عنوان «اثر جهت‌گیری و شباهت شکل بر گروه‌بندی ادراکی.»

و یافته‌اش این بود که جهت‌گیری خط، بیشترین اثر را بر گروه‌بندی ادراکی دارد — و شباهت شکل نقش ثانویه‌ای بازی می‌کند.

یک قاعدهٔ عددی

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

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

و اگر عنصرهای یک گروه ۸ پیکسل فاصله دارند، فاصلهٔ آن گروه با گروه بعدی باید حداقل ۱۶ باشد — و بهتر است ۲۴.

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

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

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

و آزمون عملی‌اش هم ساده است: همهٔ رنگ‌ها و خطوط را بردارید و ببینید گروه‌ها هنوز پیدا هستند یا نه.

در بافت فارسی

یک: فاصلهٔ سطر فارسی، مجاورت عمودی را ضعیف می‌کند. خط فارسی ارتفاع بیشتری می‌خواهد، پس دو سطرِ یک گروه از هم دورتر به نظر می‌رسند.

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

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

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

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

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

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

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

جمع‌بندی

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