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

ویژگی‌های بصری پیش‌توجهی (Preattentive Visual Properties) چیست؟

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

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

تعریف

ویژگی پیش‌توجهی، ویژگی‌ای است که در حافظهٔ حسی و بدون کنش آگاهانه پردازش می‌شود.

این پردازش زیر ۵۰۰ میلی‌ثانیه طول می‌کشد. یعنی چشم و مغز پیش از هر تصمیم آگاهانه‌ای کارشان را تمام کرده‌اند.

عدد کوچک‌تری هم در همین حوزه هست. پژوهشگران علوم اعصاب در MIT نشان دادند تشخیص یک تصویر می‌تواند در ۱۳ میلی‌ثانیه انجام شود.

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

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

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

جان توکی، ریاضی‌دان و آمارشناس، نکته‌ای دارد که پشت کل این بحث ایستاده است. ارزش اصلی یک تصویر آن‌جاست که چیزی را نشانتان بدهد که انتظارش را نداشتید.

رنگ

رنگ در این بحث با مقیاس HSL توضیح داده می‌شود: رنگ‌مایه، اشباع و روشنایی.

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

مدل‌های دیگری مثل RGB و CMYK هم در کار هستند. برای این بحث اما HSL راحت‌تر است، چون سه محورش به همان چیزی نزدیک‌اند که چشم تفکیک می‌کند.

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

فرم

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

• - ۱. هم‌خطی و انحنا: اینکه چند عنصر روی یک خط بنشینند، یا خطی که میانشان می‌گذرد صاف باشد یا خمیده.
• - ۲. طول، پهنا و عرض: اندازهٔ خود مارک در هر یک از راستاها.
• - ۳. مارک افزوده: نشانهٔ کوچکی که به یک عنصر اضافه می‌شود و بقیه ندارند.
• - ۴. شمارگی: تعداد چیزها، تا حدی که بدون شمردن فهمیده می‌شود.
• - ۵. شکل و اندازه: دایره در برابر مربع، و بزرگ در برابر کوچک.
• - ۶. گروه‌بندی فضایی و جهت: اینکه چه چیزی نزدیک چه چیزی است، و مارک به کدام سو رو دارد.

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

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

نکتهٔ مشترک همهٔ این صفت‌ها یکی است. تفاوت دیده می‌شود بدون آنکه فکری در کار باشد، چون کار در حافظهٔ حسی تمام شده است.

حرکت

حرکت دو زیرصفت دارد: چشمک و حرکت.

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

حرکتی که بیش از اندازه به کار برود، از هدایت به آزار تبدیل می‌شود. در تبلیغات آنلاین دقیقاً همین اتفاق افتاد، و رواج مسدودکنندهٔ تبلیغ یکی از پیامدهایش است.

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

پس حرکت را مثل بلندترین صدای اتاق حساب کنید. اگر همه‌جا باشد، دیگر هیچ‌جا نیست.

جای‌گیری فضایی

این خانواده سه شکل دارد و هیچ‌کدامشان به رنگ و فرم ربطی ندارند.

• - ۱. موقعیت دوبعدی: جای عنصر روی دو محور. برای دادهٔ کمی بهترین انتخاب است، چون تفاوت جای دو مارک بدون واسطه خوانده می‌شود.
• - ۲. عمق استریوسکوپی: عمقی که از تفاوت تصویر چشم راست و چپ ساخته می‌شود. با دو دوربین کنار هم می‌شود بازسازی‌اش کرد.
• - ۳. تقعر و تحدب: فرورفتگی و برجستگی، که با سایه ساخته می‌شود.

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

به همین دلیل مصورسازی اطلاعات بیش از همه روی همین یک بُعد سرمایه‌گذاری می‌کند.

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

نگاشت بصری: تصمیمی که باید آزموده شود

وقتی چهار بُعد در اختیار دارید، پرسش بعدی این است که هر صفت از داده را با کدام بُعد تحویل بدهید. نامش نگاشت بصری است.

به گفتهٔ ور، انتخاب میان این چهار ویژگی مهم‌ترین تصمیم در یک مصورسازی است.

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

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

وقتی دو بُعد را با هم به کار می‌برید

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

نکتهٔ اصلی در نام فهرست است. آن فهرست، فهرست بُعدهاست؛ فهرست ترکیب‌های مجاز نیست.

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

یک: بُعد افزونه. هدف با هر یک از دو بُعد به‌تنهایی هم پیدا می‌شود. ردیف بحرانی هم قرمز است و هم آیکون هشدار دارد.

دو: بُعد شرطی. هدف فقط با ترکیب دو بُعد تعریف می‌شود. «سفارش فوریِ پرداخت‌نشده» یعنی هم‌زمان رنگ فوریت و نشانهٔ پرداخت.

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

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

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

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

اگر پیدا کردنش سخت‌تر شد، سیگنال شما شرطی است، نه پیش‌توجهی. اگر همان‌قدر آسان ماند، بُعدتان درست انتخاب شده.

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

قاعدهٔ کوتاهش این می‌شود: یک سیگنال، یک بُعد. بُعد دوم را برای اطمینان اضافه کنید، نه برای تعریف.

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

«پیش‌توجهی» برای همه پیش‌توجهی نیست

این بخش هم افزودهٔ من است، چون فهرست ویژگی‌ها ضمنی فرض می‌کند سامانهٔ بینایی همهٔ کاربران یکسان است.

سه شرط این فرض را می‌شکنند.

یک: تفاوت‌های بینایی. سیگنالی که فقط با رنگ‌مایه ساخته شده باشد، برای کاربر کوررنگ یک مارک واحد است.

قرمز و سبزِ هم‌روشنایی برای او از هم جدا نمی‌شوند. پس رنگ برای این کاربر بُعد نیست، و سیگنال شما ناپدید شده است.

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

دو: آستانهٔ تفکیک. هر بُعد آستانه‌ای دارد که زیر آن هیچ اتفاقی نمی‌افتد.

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

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

حرکت هم شکنندگی خودش را دارد. اگر کاربر حالت کم‌حرکت را روشن کرده باشد، بُعد چهارم شما اصلاً وجود ندارد.

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

در بافت فارسی

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

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

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

دو: «مارک افزوده» در خط فارسی جای کمی دارد. نقطه و سرکش بخشی از خود حرف‌اند و در تشخیص حرف نقش دارند.

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

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

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

وقتی نیمی از ردیف‌ها با ۱۲۳ و نیم دیگر با 123 نوشته شده باشند، ستون شکل واحدی ندارد.

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

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

کاربری که حالت کم‌حرکت را روشن کرده، آن هشدار را نمی‌بیند. سه بُعد اول در دست شمایند و این یکی نیست.

پس هیچ سیگنال حیاتی را تنها به حرکت نسپارید. همان هشدار باید در حالت ساکن هم خودش را نشان بدهد.

جمع‌بندی

• - ویژگی پیش‌توجهی: ویژگی‌ای که در حافظهٔ حسی و بدون کنش آگاهانه پردازش می‌شود
• - زمانش زیر ۵۰۰ میلی‌ثانیه است، و تشخیص یک تصویر می‌تواند در ۱۳ میلی‌ثانیه انجام شود
• - چهار خانواده: رنگ · فرم · حرکت · جای‌گیری فضایی
• - رنگ: رنگ‌مایه و اشباع و روشنایی — که یک عنصر را از محیطش جدا می‌کنند
• - فرم: هم‌خطی · انحنا · طول و پهنا و عرض · مارک افزوده · شمارگی · شکل و اندازه · گروه‌بندی و جهت
• - حرکت: چشمک و حرکت — قوی‌ترین بُعد، و همان بُعدی که زودتر از همه آزاردهنده می‌شود
• - جای‌گیری: موقعیت دوبعدی برای دادهٔ کمی · عمق استریوسکوپی · تقعر و تحدب با سایه
• - نگاشت بصری: تصمیم دربارهٔ اینکه هر صفت از داده با کدام بُعد تحویل داده شود — و باید با کاربر آزموده شود
• - فهرست چهار ویژگی، فهرست بُعدهاست، نه فهرست ترکیب‌های مجاز
• - بُعد افزونه پیش‌توجهی می‌ماند؛ بُعد شرطی نمی‌ماند و زمان یافتنش با تعداد عناصر بالا می‌رود
• - آزمونش: تعداد عناصر را دو برابر کنید و ببینید پیدا کردن هدف سخت‌تر شد یا نه
• - قاعده: یک سیگنال، یک بُعد — بُعد دوم برای اطمینان، نه برای تعریف
• - سیگنال فقط-رنگی برای کاربر کوررنگ ناپدید می‌شود، و هر بُعد آستانهٔ تفکیک خودش را دارد
• - در فارسی: موقعیت آینه می‌شود · مارک ریز با نقطه و سرکش قاطی می‌شود · ستون عدد را یک‌دست کنید · و حرکت را تنها حامل هیچ هشداری نکنید