اصل مجاورت (Proximity) گشتالت در طراحی بصری چیست؟

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

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

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

عناصر نزدیک به یکدیگر مرتبط با مکان

مجاورت یکی از مهمترین اصول گروه بندی است و می تواند بر نشانه های بصری مانند شباهت رنگ یا شکل، غلبه کند. عمل قرار دادن عناصر مرتبط، طوری که نزدیک به هم باشند و جداسازی عناصر نامرتبط؛ تقریبا در همه جای جای طراحی رابط کاربری (UI) دیده می شود.

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

 

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

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

 

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

READ  راهنمای کامل سبک های طراحی گرافیک
ٌWellington city council
در تبلت، فضای صفحه نمایش برای حفظ این جداسازی کافی نیست، و بنابراین، برای اینکه جستجو به عنوان بخشی از نوار وضعیت اصلی به نظر نرسد، به بالا منتقل شد و با سایر موارد منوی ابزار گروه بندی شد.

 

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

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

 

تقسیم بندی؛ برای طراحی فرم نیز اعمال می شود: وقتی زمینه های مرتبط؛ با هم گروه بندی می شوند، اسکن فرم آسان تر و تکمیل آن کمتر دلهره آور به نظر می رسد. به عنوان مثال، یک فرم با 12 زمینه ممکن است برای پر کردن بسیار دشوار به نظر برسد، در حالی که یک فرم 3 تکه با 4 زمینه، در مقایسه ساده به نظر میرسد. (اصل مجاورت؛ به طرق مختلف در طراحی فرم اعمال می شود. به عنوان مثال، حداقل فاصله ی بین یک برچسب با تراز بالا و زمینه ی فرم مربوط به آن، آن رابطه را در مقایسه با یک میزان بزرگ تر قبل از جفت برچسب-زمینه ی بعدی آشکار می کند.)

اصل مجاورت (Proximity) گشتالت در طراحی بصری چیست؟
12 زمینه فرم در یک گروه بزرگ (سمت چپ) نسبت به همان تعداد فیلدهای تقسیم شده به سه گروه (سمت راست)، انتخاب دشوار تری به نظر می رسند. (مشخصا با فرض اینکه گروه ها؛ معنا دار هستند – برای مثال، اطلاعات حمل و نقل در یک گروه و اطلاعات صورتحساب در گروه دیگر.)

 

از سوی دیگر، گروه بندی عناصر نا مرتبط، ممکن است آن ها را از دید کاربران مخفی کند. به عنوان مثال، در وب‌سایت EDD کالیفرنیا، دکمه ی افزودن؛ برای فهرست کردن اطلاعات کارفرما که برای فرم نیاز است ، در میان دکمه ‌های نا مرتبط مدفون است تا به مرحله ی بعدی فرایند یعنی ذخیره به‌ عنوان پیش ‌نویس، و لغو برده شود. هنگام نگاه کردن به محیط صفحه، کاربران ممکن است فقط به یک مورد در یک گروه بندی مورد نظر نگاه کنند و از آن برای قضاوت در مورد موارد دیگر در آن گروه استفاده کنند. (در مقابل، دکمه های قبلی (Previous) و بعدی  (Next)به هم مرتبط هستند، بنابراین گروه بندی آن ها، قابلیت استفاده را افزایش می دهد.)

READ  فضا در طراحی گرافیک چیست؟
اصل مجاورت (Proximity) گشتالت در طراحی بصری چیست؟
پروتال CA.gov: دکمه ی افزودن در مجاورت نزدیک دکمه‌ های نا مرتبط، دور از ناحیه ی اصلی فرم قرار داشت که یافتن آن را دشوار می کرد.

 

از عناصر فاصله داری که غیر مرتبط بنظر می رسند, غفلت می شود

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

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

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

Proximity - برنامه موبایل Kayak
برنامه موبایل Kayak: لینک Skip در گوشه ی سمت چپ بالای صفحه؛ به دور از محتوای اصلی و برجسته ‌ترین فراخوان‌ ها نمایش داده شده است. این نحوه ی قرارگیری، نادیده گرفتن آن را آسان می کند و کاربران را فریب می دهد تا فکر کنند باید وارد سیستم شوند.

 

به طور مشابه، برنامه ی Hulu در AppleTV؛ دستورالعمل ‌هایی را برای نحوه ی تعامل با محتوای صفحه ی فعلی در گوشه ی سمت راست پایین صفحه، به دور از محتوای مربوطه ارائه می‌کند. علاوه بر این، متن؛ توسط عکس پس ‌زمینه ای که برای برنامه انتخاب ‌شده، کمی گُنگ بنظر می رسد. این عدم مجاورت باعث شد شوهرم فکر کند هیچ راهی برای دسترسی به صفحه ی جزئیات (جایی که قسمت‌های دیگر فصل فهرست شده بود) وجود ندارد – خوشبختانه، من آن جا بودم تا او را اصلاح کنم!

READ  موشن گرافیک چیست؟ Motion Graphic یا انیمیشن؟
اصل مجاورت - Hulu
Hulu در AppleTV: دستورالعمل های کلیک و نگه داشتن: جزئیات؛ در گوشه ی سمت راست پایین صفحه به دور از اطلاعات مربوط به قسمت بعدی، نمایش داده شده اند. به ویژه در یک تلویزیون با صفحه ی بزرگ، این نحوه ی قرارگیری باعث می شود که به سختی متوجه آن شوید.

 

اصل مجاورت ممکن است در طرح های واکنش گرا، تغییر کند

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

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

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

 

نتیجه گیری اصل مجاورت گشتالت در طراحی بصری

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

اسکرول به بالا