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

قانون سرنوشت مشترک (Law of Common Fate) چیست؟

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

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

تعریف

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

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

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

و آن «یا القاشده» مهم است، چون حرکت واقعی لازم نیست.

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

خاستگاه

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

و واژهٔ آلمانی «گشتالت» به معنای شکل یا فرم است.

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

و اصول خویشاوندش شباهت · مجاورت · بستار · زمینه و شکل · و پرگنانتس است.

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

و این اصل بر تمایل خودکار ادراک بصری انسان به یافتن الگو کار می‌کند.

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

و منبع دلیلش را این‌طور می‌گوید: «مغز آدم‌ها به‌طور خودکار دنبال الگو می‌گردد.»

و شرطش هم صریح است: عنصرها به حرکت تحت‌اللفظی نیاز ندارند — هم‌راستایی جهتی یا حرکت القاشده کافی است.

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

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

شش کاربرد

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

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

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

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

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

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

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

و آنچه اتفاق می‌افتد این است: حرکت هم‌زمان چند نقطه، به کاربر می‌گوید یک چیزِ واحد در حال کار کردن است.

و به همین دلیل، چرخندهٔ نامنظم یا لکنت‌دار، حس خرابی می‌دهد — چون سرنوشت مشترک شکسته شده.

هفت توصیهٔ اجرایی

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

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

و دو کارتی که با دو منحنی و دو مدت زمان مختلف حرکت می‌کنند، به کاربر می‌گویند به دو دستهٔ متفاوت تعلق دارند.

پنج ریسک

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

و ریسک سوم را باید جدی‌تر از آنچه به نظر می‌رسد گرفت.

و دلیلش این است که بسیاری از کاربران انیمیشن را خودشان خاموش می‌کنند — تنظیم «کاهش حرکت» در همهٔ سامانه‌های عامل امروزی هست.

و برای آن کاربران، هر گروه‌بندی‌ای که فقط از حرکت می‌آمد، ناپدید می‌شود.

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

روش‌های آزمون

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

هم‌افزایی با اصول دیگر

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

با مجاورت — ترکیبشان توجه را به سمت نقطه‌های کانونی هدایت می‌کند.

با بستار — حرکت القاشده، فرم‌های کامل را القا می‌کند.

با زمینه و شکل — حرکت هم‌راستا باعث می‌شود بعضی عنصرها به‌عنوان پیش‌زمینه برجسته شوند.

منابع حرفه‌ای

و نویسندگانی که به این اصل پرداخته‌اند: ارین مالون با «راهنمای اصول گشتالت برای طراحان تجربه» (۲۰۲۳).

و جف جانسون با «طراحی با ذهن در ذهن» (ویراست سوم، ۲۰۲۰).

و کارش این است که راهنمای رابط را بر پایه‌های روان‌شناسی شناختی استوار می‌کند، با تکیه بر بیش از یک قرن پژوهش ادراک.

کِی از آن استفاده کنید

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

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

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

و به همین دلیل، ورودِ پله‌ای عنصرهای یک گروه، گروه‌بندی را ضعیف می‌کند — حتی وقتی زیباتر به نظر می‌رسد.

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

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

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

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

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

در بافت فارسی

یک: جهت حرکت اینجا معنای دیگری دارد. در رابط راست‌به‌چپ، حرکت به سمت چپ یعنی «جلو» — و همان حرکت در طرح لاتین یعنی «عقب».

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

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

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

و به همین دلیل، انیمیشن کوتاه‌تر و ساده‌تر اینجا مؤثرتر است از انیمیشن نرم و طولانی — چون احتمال اجرای درستش بیشتر است.

سه: «کاهش حرکت» اینجا بیشتر روشن است. کاربرانی که با دستگاه قدیمی‌تر کار می‌کنند، انیمیشن را برای سرعت خاموش می‌کنند.

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

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

و نکته این است که چرخنده‌ای که می‌ایستد یا کند می‌شود، پیام «خراب شد» می‌دهد — حتی وقتی سامانه سالم است و فقط شبکه کند است.

جمع‌بندی

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