مقالات تجربه کاربری - قانون پیوندیافتگی یکدست
قانون پیوندیافتگی یکدست
قانون پیوندیافتگی یکدست 
قانون پیوندیافتگی یکدست (Law of Uniform Connectedness) چیست؟
💡 این متن «بازنویسی آزاد» است: ایدهها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثالهای تازه بازگو شدهاند و ترجمهٔ کلمهبهکلمه نیست. بخشهای افزودهٔ مترجم در جعبهٔ منبع مشخص شدهاند.
یک خط، دو چیز دور را به هم وصل میکند. و از این نظر، پیوندیافتگی قویترین قانون گروهبندی است — چون فاصله و شباهت را هر دو زیر پا میگذارد.
تعریف
قانون پیوندیافتگی یکدست، اصلی گشتالتی است که میگوید «آدمها عنصرهای بصریپیوندخورده — یا عنصرهایی با ویژگیهای مشترک — را متعلق به یک گروه یا واحد میبینند.»
و وقتی عنصرهای طرح ویژگی بصری مشترکی داشته باشند — رنگ، خط، یا قاب — کاربر آنها را مرتبطتر از عنصرهای بیپیوند ادراک میکند.
خاستگاه
و این اصل از مکتب گشتالت در دههٔ ۱۹۲۰ آلمان بیرون آمد، از کار ماکس ورتهایمر، کورت کوفکا و ولفگانگ کهلر.
و گزارهٔ مرکزیشان این بود: «تصویر بیشتر از مجموع اجزایش است، و آدمها گرایش دارند عنصرهای منفرد را در الگوهای معنادار گروه کنند.»
و رویکرد گشتالت پنج اصل اصلی ادراک بصری را شناسایی کرد: مجاورت · شباهت · پیوستگی · بستار · و پیوندیافتگی یکدست.
چطور کار میکند
و سازوکارش خودکار است: «وقتی عنصرها بصری پیوند بخورند یا وصل شوند، مغز انسان خودکار آنها را گروه میکند» — حتی وقتی عنصرها فیزیکی به هم نچسبیدهاند یا در فضا نزدیک نیستند.
و آن «حتی وقتی» چیزی است که این قانون را از بقیه جدا میکند.
و توضیحش این است: مجاورت به نزدیکی نیاز دارد و شباهت به همسانی. و پیوندیافتگی به هیچکدام.
و یک خط نازک میتواند دو عنصرِ دور و بیشباهت را یک گروه کند — و همین آن را از هر دو قویتر میکند.
و منبع این گروهبندی را «مهارتی ذاتاً ضروری برای انسان و ابزاری قدرتمند برای طراحی» میداند، که به سازماندادن اطلاعات بصری پیچیده در واحدهای معنادار کمک میکند.
چهار کارکرد در طراحی
یک: پیوند بصری و گروهبندی. طراح با گروهکردن عنصرهای مرتبط و جداکردن نامرتبطها، سلسلهمراتب بصری برپا میکند.
و نشانهٔ بصری یکدست — رنگ، سبک خط، شکل، الگو — انسجام را در تایپوگرافی و نشانهنگاری و سبک دکمه حفظ میکند.
و نمونهاش این است: اپلیکیشن پیامرسان با نشانهنگاری یکدست برای گونههای مختلف پیام، به کاربر کمک میکند محتوا را تشخیص دهد.
دو: مرز و محاصره. گذاشتن عنصرها درون قاب یا کادر، ادراک گروه را تقویت میکند.
و اپلیکیشن مدیریت کار کارهای مرتبط با یک پروژه را با کادرهای رنگی گروه میکند.
سه: کنتراست و تأکید بصری. ساختن کنتراست، عنصر مهم را برجسته و توجه را به فراخوان کنش جلب میکند.
و منوی ناوبری با رنگ متفاوت برای صفحهٔ فعال، به کاربر میگوید کجاست.
چهار: زیباییشناسی کلی. پیوندهای بصری هماهنگی و توازن میسازند، و درگیری را از راه چیزی که «اثر کاربردپذیریِ زیباییشناختی» نامیده میشود بالا میبرند.
و کارکرد دوم — قاب — قویترین ابزار این فهرست است، و پرهزینهترینش.
و دلیلش این است که قاب چیزی به صفحه اضافه میکند، در حالی که مجاورت و شباهت فقط چیزهای موجود را جابهجا یا همسان میکنند.
و به همین دلیل، قاب باید آخرین ابزار گروهبندی باشد، نه اولین. اول فاصله، بعد رنگ، بعد خط، و آخر کادر.
چهار نمونه
متریال دیزاین گوگل — پالت رنگ و تایپوگرافی و نشانهنگاری یکدست در سراسر محصولها، که رابطهای همبسته میسازد.
نتایج جستوجوی ایربیانبی — گروهکردن آگهیهای مشابه با نشانهٔ بصری یکدست (رنگ، تایپوگرافی، چیدمان) برای مرور و مقایسهٔ کارآمد.
صفحهٔ محصول آمازون — سازماندادن اقلامی از پیچ تا پوشاک با گروهبندی بصری روشن.
ناوبری NYC.gov — طرح زبانهای که در آن زبانهٔ انتخابشده به محتوا وصل به نظر میرسد، و بقیهٔ زبانهها بصری متمایز میمانند.
و نمونهٔ آخر خالصترین صورت این قانون است، چون پیوند در آن یک لبهٔ حذفشده است، نه یک خط اضافهشده.
و زبانهٔ فعال، با نداشتن مرز پایینی به محتوا وصل میشود — و این ارزانترین پیوند ممکن است.
ده بهترینروش
- - پژوهش کاربر انجام دهید — نیاز مخاطب را با پرسونا و جریان کاربر و نقشهٔ سفر بفهمید.
- - عنصرهای مرتبط را گروه کنید — با رنگ، خط، یا ظرف.
- - یکدستی را حفظ کنید — نشانهٔ بصری یکنواخت در سراسر طرح.
- - سلسلهمراتب بصری قوی بسازید — تأکید بر اطلاعات مهم از راه پیوند بصری.
- - ناوبری را بهتر کنید — عنصرهای ناوبری را بصری وصل کنید.
- - طراحی پاسخگو را حداکثر کنید — پیوندهای بصری در همهٔ دستگاهها روشن بمانند.
- - دسترسپذیری را یادتان باشد — کنتراست رنگ درست و متن جایگزین برای عنصرهای بصری.
- - با توسعهدهنده همکاری کنید — پیادهسازی یکدست در سکوهای مختلف.
- - از اصول دیگر هم استفاده کنید — مجاورت، فضای منفی، و بقیهٔ قوانین گشتالت.
- - و آزمون و تکرار کنید.
ریسکها و اشتباهها
و منبع دو ریسک اصلی نام میبرد.
تکیهٔ بیش از حد بر پیوند بصری بدون در نظر گرفتن اصول دیگر، طرح غرقکننده یا گیجکننده میسازد.
و نادیدهگرفتن عاملهای فرهنگی — چون پیوندهای بصری در فرهنگهای مختلف معنای متفاوتی دارند.
و اشتباههای رایجش هم اینهاست: شلوغکردن طرح با پیوندهای بصری زیاد · حفظنکردن یکدستی · نادیدهگرفتن اصول دیگر · تأکیدنکردن بر عنصر مهم · و نادیدهگرفتن انتظار کاربر و بافت فرهنگی.
و ریسک اول در عمل یک صورت مشخص دارد که ارزش نامبردن دارد: کادر تو در کادر.
و وقتی هر گروه قاب بگیرد و گروه بزرگتر هم قاب بگیرد، صفحه به مجموعهای از جعبهها تبدیل میشود که هیچکدام برجسته نیست.
و قاعدهٔ عملیاش این است: در هر صفحه حداکثر دو سطح قاب. سطح سوم را با فاصله بسازید، نه با خط.
چهار گونهٔ پیوند
این بخش افزودهٔ من است، چون منبع «پیوند بصری» را یک چیز میگیرد و در واقع چهار چیز متفاوت است — با چهار هزینهٔ متفاوت.
پیوند با خط. قویترین و صریحترین. و مناسب جایی که نسبت باید بیابهام باشد — مثل نمودار سازمانی یا فلوچارت.
پیوند با ظرف. قوی است اما مرز میسازد. و مناسب جایی که گروه باید کامل و بسته باشد — مثل کارت.
پیوند با پسزمینهٔ مشترک. ملایمتر و بیمرز. و بهترین گزینه برای گروهبندی نرم — یک نوار خاکستری پشت چند سطر.
پیوند با ویژگی مشترک. ضعیفترین، و همان چیزی که قانون شباهت توصیفش میکند.
و ترتیب انتخاب، از پایین به بالای این فهرست است: ضعیفترین پیوندی که کار میکند را انتخاب کنید.
و دلیلش این است که هر پیوند قویتر، امکان گروهبندی دیگری را میگیرد — و صفحهای که همهچیزش با خط وصل شده، هیچ سلسلهمراتبی ندارد.
در بافت فارسی
یک: قاب در فارسی گرانتر است. متن فارسی به فضای بیشتری نیاز دارد، و کادر آن فضا را کم میکند.
و نتیجهٔ عملیاش این است که پسزمینهٔ مشترک اغلب بهتر از کادر کار میکند — چون همان گروهبندی را میسازد بیآنکه فضا بگیرد.
دو: زبانهٔ فعال باید در راستبهچپ بازآزمون شود. نمونهٔ زبانه — پیوند از راه لبهٔ حذفشده — در قرینهسازی خودکار اغلب میشکند.
و همانطور که در قانون پیوستگی نوشتم، کتابخانههای آمادهٔ رابط این جزئیات را درست قرینه نمیکنند.
سه: خطِ پیوند در نمودار فارسی، جهت دارد. فلوچارت و نمودار سازمانی که از چپ به راست خوانده شوند، در فارسی معکوساند.
و راه عملیاش ساختن نمودار عمودی است، نه افقی — چون جهت عمودی در هر دو زبان یکی است.
چهار: کنتراست خطوط نازک اینجا بیشتر گم میشود. در نمایشگرهای متنوع بازار ایران، خط یکپیکسلیِ کمرنگ ممکن است کاملاً دیده نشود.
و اگر پیوندِ گروهبندی روی همان خط سوار باشد، گروهبندی برای بخشی از کاربران وجود ندارد. پس پیوند را با فاصله هم پشتیبانی کنید.
جمعبندی
- - قانون پیوندیافتگی یکدست: عنصرهای بصریپیوندخورده یا دارای ویژگی مشترک، یک گروه دیده میشوند
- - ورتهایمر · کوفکا · کهلر · دههٔ ۱۹۲۰ آلمان — یکی از پنج اصل اصلی ادراک بصری
- - و مغز این گروهبندی را حتی وقتی عنصرها به هم نچسبیدهاند یا نزدیک نیستند انجام میدهد
- - پس مجاورت به نزدیکی نیاز دارد و شباهت به همسانی — و پیوندیافتگی به هیچکدام
- - چهار کارکرد: پیوند و گروهبندی · مرز و محاصره · کنتراست و تأکید · زیباییشناسی کلی
- - و قاب قویترین ابزار است و پرهزینهترین، چون چیزی به صفحه اضافه میکند
- - پس ترتیب درست: اول فاصله، بعد رنگ، بعد خط، و آخر کادر
- - نمونهها: متریال دیزاین · ایربیانبی · آمازون · و زبانهٔ NYC.gov
- - و زبانه خالصترین صورت این قانون است: پیوند در آن یک لبهٔ حذفشده است، نه یک خط اضافهشده
- - دو ریسک: تکیهٔ بیش از حد بر پیوند بصری · و نادیدهگرفتن عاملهای فرهنگی
- - و صورت عملی ریسک اول، کادر تو در کادر است — در هر صفحه حداکثر دو سطح قاب
- - چهار گونهٔ پیوند: خط · ظرف · پسزمینهٔ مشترک · ویژگی مشترک — و ضعیفترینی که کار میکند را انتخاب کنید
- - و در فارسی: پسزمینهٔ مشترک بهتر از کادر است · زبانه را بازآزمون کنید · نمودار را عمودی بسازید · و پیوند را با فاصله هم پشتیبانی کنید
منبع
این نوشته «بازنویسی آزاد» است از مطلب What is the Law of Uniform Connectedness? در وبسایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف قانون پیوندیافتگی یکدست بهعنوان اصلی گشتالتی و نقلقولش دربارهٔ دیدن عنصرهای بصریپیوندخورده یا دارای ویژگی مشترک بهعنوان یک گروه یا واحد، و ادراک مرتبطتر بودنشان نسبت به عنصرهای بیپیوند وقتی رنگ یا خط یا قاب مشترکی داشته باشند؛ خاستگاه یعنی بیرونآمدن اصل از مکتب گشتالت در دههٔ ۱۹۲۰ آلمان از کار ماکس ورتهایمر و کورت کوفکا و ولفگانگ کهلر، نقلقول گزارهٔ مرکزیشان دربارهٔ بیشتر بودن تصویر از مجموع اجزا و گرایش به گروهکردن عنصرها در الگوهای معنادار، و فهرست پنج اصل اصلی ادراک بصری؛ سازوکار خودکار و نقلقولش دربارهٔ گروهکردن خودکار عنصرهای بصریپیوندخورده حتی وقتی به هم نچسبیدهاند یا نزدیک نیستند، و نقلقول دربارهٔ مهارت ذاتاً ضروری انسان و ابزار قدرتمند طراحی؛ چهار کارکرد یعنی پیوند بصری و گروهبندی با نمونهٔ نشانهنگاری پیامرسان، مرز و محاصره با نمونهٔ کادرهای رنگی اپلیکیشن مدیریت کار، کنتراست و تأکید بصری با نمونهٔ منوی ناوبری و رنگ صفحهٔ فعال، و زیباییشناسی کلی با اصطلاح اثر کاربردپذیریِ زیباییشناختی؛ چهار نمونه یعنی متریال دیزاین گوگل و نتایج جستوجوی ایربیانبی و صفحهٔ محصول آمازون و ناوبری NYC.gov با طرح زبانهای و وصلبودن زبانهٔ انتخابشده به محتوا؛ هر ده بهترینروش؛ دو ریسک یعنی تکیهٔ بیش از حد بر پیوند بصری و نادیدهگرفتن عاملهای فرهنگی؛ ملاحظات دسترسپذیری؛ و پنج اشتباه رایج — از این منبع گرفته شده. متن فارسی، ساختار بخشها و همهٔ تحلیلها کاملاً مستقل نوشته شدهاند.
متن مطلب اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمهبهکلمه ارائه نشده و متن کامل انگلیسی (بههمراه همهٔ منابع مرتبط) در لینک زیر در دسترس است.
بخشهای افزودهٔ مترجم: صورتبندی آغازین دربارهٔ وصلکردن دو چیز دور با یک خط؛ تحلیل عبارت «حتی وقتی» بهعنوان چیزی که این قانون را از بقیه جدا میکند، و صورتبندی «مجاورت به نزدیکی نیاز دارد و شباهت به همسانی، و پیوندیافتگی به هیچکدام»؛ تشخیص قاب بهعنوان قویترین و پرهزینهترین ابزار بهدلیل اضافهکردن چیزی به صفحه در برابر جابهجاکردن یا همسانکردن، و قاعدهٔ ترتیب فاصله و رنگ و خط و کادر؛ تحلیل نمونهٔ زبانه بهعنوان خالصترین صورت قانون چون پیوندش یک لبهٔ حذفشده است نه یک خط اضافهشده، و ارزانترینبودنش؛ تشخیص صورت عملی ریسک اول یعنی کادر تو در کادر و پیامدش برای برجستگی، و قاعدهٔ حداکثر دو سطح قاب با ساختن سطح سوم از فاصله؛ کل بخش «چهار گونهٔ پیوند» شامل تفکیک پیوند با خط و ظرف و پسزمینهٔ مشترک و ویژگی مشترک، کاربرد و هزینهٔ هر کدام، قاعدهٔ انتخاب ضعیفترین پیوندی که کار میکند، و دلیلش یعنی گرفتن امکان گروهبندی دیگر توسط پیوند قویتر؛ و کل بخش بافت فارسی شامل گرانتر بودن قاب بهدلیل نیاز متن فارسی به فضا و برتری پسزمینهٔ مشترک، لزوم بازآزمون زبانهٔ فعال در قرینهسازی و ناتوانی کتابخانههای آماده، جهتدار بودن خط پیوند در نمودار و پیشنهاد نمودار عمودی، و گمشدن کنتراست خطوط نازک در نمایشگرهای متنوع و لزوم پشتیبانی پیوند با فاصله
تصاویر: هیچ تصویری از مطلب اصلی بازتولید نشده است. هر سه نمودار این صفحه طراحی مستقل مترجم است.
مشاهدهٔ مطلب اصلی
مترجم: سپنتا پویا
طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمیگردانم.
دربارهٔ من