اصل مجاورت گشتالت در نیمه ی اول قرن بیستم توسط روانشناسان گشتالت کشف شد، که در تلاش برای کشف چگونگی درک مردم از جهان بصری بودند – به طور خاص، در مورد اینکه مردم چگونه تصمیم می گیرند که آیا عناصری خاص، بخشی از یک گروه هستند یا خیر. این اصول شامل مجاورت، شباهت و انسداد است – که همگی در طراحی بصری رابط های کاربری (UI) دیجیتال، حائز اهمیت هستند. بعدها، اصول گروه بندی بیشتری (مانند منطقه ی مشترک) به لیست اصلی گشتالت اضافه شد.
طراحی رابط کاربری به شدت به مجاورت و سایر اصول گروه بندی متکی است، زیرا تفسیر صحیح عناصر مرتبط برای تعامل موفقیت آمیز با رابط کاربری؛ بسیار مهم است.
تعریف: اصل مجاورت بیان می‌کند که آیتم های نزدیک به هم احتمالا به عنوان بخشی از یک گروه تلقی می‌شوند – که دارای عملکرد یا ویژگی های مشابه هستند.
عناصر نزدیک به یکدیگر مرتبط با مکان
مجاورت یکی از مهمترین اصول گروه بندی است و می تواند بر نشانه های بصری مانند شباهت رنگ یا شکل، غلبه کند. عمل قرار دادن عناصر مرتبط، طوری که نزدیک به هم باشند و جداسازی عناصر نامرتبط؛ تقریبا در همه جای جای طراحی رابط کاربری (UI) دیده می شود.
استفاده از مقادیر متفاوتی از فضای خالی؛ برای متحد کردن یا جدا سازی عناصر، کلید ارتباط گروه بندی های معنا دار است. به عنوان مثال، در قسمت هدر (header) وبسایت شورای شهر ولینگتون، عملکرد جستجو در همان خطی که نوار وضعیت اصلی سایت، در یک صفحه نمایش بزرگ مشاهده می شود، قرار دارد. با این حال، فضای خالی اضافی بین نوار وضعیت اصلی و جستجو نشان می دهد که به گروه هایی جداگانه تعلق دارند و از این رو دارای عملکرد های متمایز هستند. این فضای خالی، برای متمایز کردن عملکرد جستجو از سایر موارد منوی اصلی، بسیار دارای اهمیت است.
اما در نمایشگرهای کوچک تر، حفظ این فاصله ممکن نیست. برای جلوگیری از تلقی این مناطق به عنوان یک گروه واحد، عملکرد جستجو به بالا منتقل می شود و به طور کلی از نوار وضعیت اصلی دور می شود. (بله، سایر جنبه های این طراحی را می‌توان بیش تر بهبود بخشید، مانند گروه بندی برچسب جستجو و نماد مربوطه با استفاده از مجاورت یا منطقه ی مشترک.)
بکارگیری مجاورت برای ایجاد گروه های معنا دار، حتی در هنگام ارائه محتوای متن اصلی نیز منعکس می‌شود: جملات؛ در پاراگراف هایی که در بالا و پایین توسط فضای خالی از هم جدا شده اند، گروه بندی می شوند. علاوه بر این، فضای خالی اطراف سرفصل هایی که طرح خوبی دارند، نشانه ای از پاراگراف هایی است که با آنها مرتبط است – این متن از بخش مربوطه، معمولا نسبت به متن بخش قبل، نزدیک تر به هدر (header) قرار می‌گیرد.
تقسیم بندی؛ برای طراحی فرم نیز اعمال می شود: وقتی زمینه های مرتبط؛ با هم گروه بندی می شوند، اسکن فرم آسان تر و تکمیل آن کمتر دلهره آور به نظر می رسد. به عنوان مثال، یک فرم با 12 زمینه ممکن است برای پر کردن بسیار دشوار به نظر برسد، در حالی که یک فرم 3 تکه با 4 زمینه، در مقایسه ساده به نظر میرسد. (اصل مجاورت؛ به طرق مختلف در طراحی فرم اعمال می شود. به عنوان مثال، حداقل فاصله ی بین یک برچسب با تراز بالا و زمینه ی فرم مربوط به آن، آن رابطه را در مقایسه با یک میزان بزرگ تر قبل از جفت برچسب-زمینه ی بعدی آشکار می کند.)
از سوی دیگر، گروه بندی عناصر نا مرتبط، ممکن است آن ها را از دید کاربران مخفی کند. به عنوان مثال، در وبسایت EDD کالیفرنیا، دکمه ی افزودن؛ برای فهرست کردن اطلاعات کارفرما که برای فرم نیاز است ، در میان دکمه های نا مرتبط مدفون است تا به مرحله ی بعدی فرایند یعنی ذخیره به عنوان پیش نویس، و لغو برده شود. هنگام نگاه کردن به محیط صفحه، کاربران ممکن است فقط به یک مورد در یک گروه بندی مورد نظر نگاه کنند و از آن برای قضاوت در مورد موارد دیگر در آن گروه استفاده کنند. (در مقابل، دکمه های قبلی (Previous) و بعدی (Next)به هم مرتبط هستند، بنابراین گروه بندی آن ها، قابلیت استفاده را افزایش می دهد.)
از عناصر فاصله داری که غیر مرتبط بنظر می رسند, غفلت می شود
هنگامی که کاربران؛ یک لینک، دکمه یا بخشی از اطلاعات را به طور کامل از دست می دهند، حتی اگر دقیقا در مقابل آن ها باشد، اغلب مجاورت (یا بهتر بگوییم، فقدان آن) را متهم می کنیم.
چون عناصری که با فضای خالی از هم جدا شده اند زیاد با یکدیگر مرتبط نیستند، کاربرانی که انتظار دارند تمام اطلاعات مرتبط و عناصر تعاملی، نزدیک به هم قرار گیرند، می توانند به راحتی آیتم های دور را نادیده بگیرند. این رفتار گاهی اوقات به عنوان “دید تونلی” توصیف می شود: کاربران در حالیکه وظیفه ی خود را تکمیل میکنند و چیزهایی را از دست می دهند؛ به علت خارج بودن از منطقه ی کانونی، به طور انتخابی به مناطق خاصی از صفحه نمایش توجه می کنند.
به عنوان مثال، در مطالعات ما در مورد قابلیت استفاده از تلفن همراه، شرکت کنندگان؛ اغلب زمانی که برنامه ها از آن ها می خواهند قبل از دسترسی به محتوا، یک حساب کاربری ایجاد کنند، کلافه می شوند. با این حال، در بسیاری از این طرح ها، ایجاد حساب کاربری را می توان نادیده گرفت – یافتن این گزینه حقیقتا دشوار است، زیرا در گوشه ی بالای صفحه، دور از فراخوان های اصلی قرار گرفته است.
به طور مشابه، برنامه ی Hulu در AppleTV؛ دستورالعمل هایی را برای نحوه ی تعامل با محتوای صفحه ی فعلی در گوشه ی سمت راست پایین صفحه، به دور از محتوای مربوطه ارائه می‌کند. علاوه بر این، متن؛ توسط عکس پس زمینه ای که برای برنامه انتخاب شده، کمی گُنگ بنظر می رسد. این عدم مجاورت باعث شد شوهرم فکر کند هیچ راهی برای دسترسی به صفحه ی جزئیات (جایی که قسمت‌های دیگر فصل فهرست شده بود) وجود ندارد – خوشبختانه، من آن جا بودم تا او را اصلاح کنم!
اصل مجاورت ممکن است در طرح های واکنش گرا، تغییر کند
توجه به مجاورت عناصر به ویژه هنگام طراحی طرح بندی های واکنش گرا مهم است، زیرا این گروه بندی ها ممکن است پس از انطباق با اندازه های مختلف صفحه نمایش، تغییر کنند. کاهش تدریجی به دستگاه های کوچک تر می‌تواند فضای بین عناصر را به حداقل برساند یا می‌تواند با از بین بردن روابط بین گروه ها آن ها را از هم دورتر کند.
به عنوان مثال، در صفحه ی حمل و نقل برای رانندگی لندن روی صفحه نمایش، لینک های ارتباطی به اطلاعات مربوط به منطقه ای با کمترین آلایندگی و منطقه ی کم آلاینده در دو ستون مختلف در کنار هم ظاهر می شوند. ارائه ی این دو لینک در مجاورت یکدیگر به کاربران این امکان را می دهد که به راحتی آن ها را ببینند و با هم مقایسه کنند تا تصمیم بگیرند روی کدام یک کلیک کنند. با این حال، در صفحه نمایش های کوچک، این لینک ها دور از هم ظاهر می شوند، زیرا این دو ستون به جای کنار هم، روی هم قرار می گیرند. این نحوه ی قرارگیری ناخوشایند، می تواند باعث شود که کاربران تلفن همراه؛ هرگز منطقه ی آلاینده ی نوع دوم را کشف نکنند.
نتیجه گیری اصل مجاورت گشتالت در طراحی بصری
قرار دادن عناصر مرتبط در مجاورت یکدیگر و استفاده از فضای خالی برای ایجاد گروه های معنا دار، یک اصل اساسی در طراحی بصری است. کاربران بر روی کار متمرکز هستند و ممکن است صفحات را خیلی سریع اسکن کنند، بنابراین مشخص کردن این گروه بندی ها از نظر بصری، با کمک به کاربران برای یافتن و تمرکز بر عناصر رابط کاربری ای که بیش ترین ارتباط را با کار فعلی شان دارند؛ باعث افزایش میزان استفاده می شود.
