اعظم ن. چرمهینی
اعظم ن. چرمهینی
خواندن ۱۲ دقیقه·۷ ماه پیش

مروری بر "بنر کوری" (Banner Blindness) و سیب زمینی داغ (Hot Potato)

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

معمولاً وقتی کاربران در حال جستجو در وب هستند هدفی دارند. مثلاً من می خواهم اطلاعاتی پیدا کنم، می خواهم چیزی بخرم، باید وضعیت چیزی را بررسی کنم. این چشم انداز تونل به این معنی است که کاربران بر روی تکمیل کار متمرکز هستند و بنابراین تمام اطلاعاتی را که فکر نمی کنند برای دستیابی به هدف مفید باشند فیلتر می کنند.

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

"بنر کوری" چیست؟

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

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

بنر کوری یک مکانیسم دفاعی است که به دلیل روش های سنتی بازاریابی در کاربران ایجاد شده است. یعنی از نظر تاریخی، بازاریابی B2B و B2C از ارتباطات یک طرفه استفاده می‌کرد: کسب‌وکاری که با مخاطب برای رسیدن به هدف کسب‌وکار صحبت می‌کرد و تا حد زیادی هدف خواننده را نادیده می‌گرفت.

در اینجا ویژگی هایی وجود دارد که یک محتوا را به عنوان یک تبلیغ نشان می دهد:

  • مکان مخصوص آگهی، مانند بالای صفحه یا نوار سمت راست صفحه(Location)
  • رفتارهای بصری تبلیغاتی مانند انیمیشن(Visual Treatment)
  • مجاورت با تبلیغات یا آلوده شدن به تبلیغات واقعی(Proximity to Ads: Ads Poison )

1. مکان

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


This gaze plot shows that on a Google search-engine results page (SERP), the user did not look at all the first “result”, the advertisement. (Each red dot represents an eye fixation from a single user; the lines connecting them represent fast eye movements, or saccades, during which the user can’t see anything.)
This gaze plot shows that on a Google search-engine results page (SERP), the user did not look at all the first “result”, the advertisement. (Each red dot represents an eye fixation from a single user; the lines connecting them represent fast eye movements, or saccades, during which the user can’t see anything.)



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

The heatmap aggregates the fixations of the 26 people who used this page on www.apartmenttherapy.com. The text was read a lot, but the ads in the top banner and right rail got little attention. (The color red represents the areas that got the most fixations; yellow stands for a moderate number of fixations; and blue for the fewest fixations. Areas with no overlay coloring received no fixations.)
The heatmap aggregates the fixations of the 26 people who used this page on www.apartmenttherapy.com. The text was read a lot, but the ads in the top banner and right rail got little attention. (The color red represents the areas that got the most fixations; yellow stands for a moderate number of fixations; and blue for the fewest fixations. Areas with no overlay coloring received no fixations.)



In this gaze plot from www.thekitchn.com, the participant didn’t look at ads in the top banner or right rail as he researched organizing his kitchen.
In this gaze plot from www.thekitchn.com, the participant didn’t look at ads in the top banner or right rail as he researched organizing his kitchen.


2. رفتارهای بصری

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

در دسکتاپ، نادیده گرفتن تبلیغات درون متنی نسبتاً آسان است زیرا بسیار متفاوت از عناصر اطراف صفحه هستند. به عنوان مثال، در مطالعه اخیر ما، 26 شرکت کننده که در تلاش بودند در مورد آموزش رقص میخائیل باریشنیکوف بیاموزند، تبلیغاتی را که در متن ظاهر می شد نادیده گرفتند. دلیل اصلی که آنها توانستند این کار را انجام دهند؟ تبلیغات، با متن و عکس موجود در سایت متفاوت به نظر می رسید. خصوصا، این تبلیغ به دلیل چندین ویژگی برجسته بود: شکل کوچک و مستطیلی در وسط متن، فرمت فانتزی، پس زمینه رنگی (آبی) در برابر صفحه سفید، متن تعبیه شده در تصویر..... هر یک از این رفتارهای بصری به کاربران هشدار می داد که این مستطیل یک تبلیغ است، بنابراین آنها می توانستند با اطمینان از آن چشم پوشی کنند(تصویر پایین).

Most users totally ignored the blue rectangular promotion that appears after the first text block on a page on bacnyc.org.
Most users totally ignored the blue rectangular promotion that appears after the first text block on a page on bacnyc.org.


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

3. نزدیکی به تبلیغات: تبلیغات، عناصر مجاور خودش را آلوده میکند

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

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

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

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

When the user saw the sponsored stories in the right rail of www.apartmenttherapy.com, she assumed everything in that section was advertisement, and didn’t look at it again.
When the user saw the sponsored stories in the right rail of www.apartmenttherapy.com, she assumed everything in that section was advertisement, and didn’t look at it again.


پدیده سیب زمینی داغ (Hot Potato)

همانطور که در مثال بالا مشاهده شد، تبلیغات می تواند باعث شود که کاربران از یک منطقه عبور کنند و دوباره به آن برنگردند. چنین تجربه ای ممکن است نه تنها رفتار آنها را در آن صفحه ی خاص تغییر دهد، بلکه می تواند بر رفتار عمومی وب(general web behavior) آنها نیز تأثیر بگذارد: آنها ممکن است به همان منطقه در صفحات دیگر یا حتی در سایت های دیگر هم نگاه نکنند. این نمونه‌ای از پدیده سیب‌زمینی داغ است که من و یاکوب نیلسن(Jakob Nielsen) در کتاب قابلیت استفاده در وب از طریق ردیابی چشم(Eyetracking Web Usability) تعریف کردیم. استعاره سیب زمینی داغ از یک بازی گرفته شده که در دوران دبستان انجام می دادم: در این بازی بچه ها به صورت دایره ای می نشستند و توپی را به سمت یکدیگر پرتاب می کردند، در حالی که معلم موسیقی می نواخت. معلم به یکباره موسیقی را متوقف می کرد، در این هنگام هر بچه ای که توپ را در دست داشت از بازی خارج می شد. بنابراین، هر کسی که توپ را به دست گرفت، می خواست در اسرع وقت از شر آن خلاص شود و سریع به نفر بعدی دهد.

تعریف: در وب، الگوی اسکن سیب زمینی داغ(hot-potato scanning pattern) زمانی اتفاق می‌افتد که کاربران به آیتمی که علاقه‌ای به آن ندارند، نگاه می‌کنند و سپس رو برمیگردانند و از آن صفحه عبور میکنند، و گاهی اوقات در صفحات دیگر همان وب‌سایت، و حتی در وب سایت های کاملا متفاوت نیز از آن خودداری می‌کنند.

رفتار سیب زمینی داغ یک مکانیسم دفاعی برای جلوگیری از اتلاف وقت و خیره بر روی عناصر نامربوط است. همچنین نمونه ای از سوگیری در دسترس بودن (availability bias) است: بر اساس یک یا چند تجربه، کاربران وب فرض می کنند که این نوع از محتوا همیشه در همان مکان در صفحات دیگر ظاهر می شود. اما، این فرض همیشه درست نیست. به عنوان مثال، اگرچه در روزهای اولیه وب، نوار کناری جای مناسبی برای تبلیغات بود، عملکرد آن بعداً تغییر کرد و لینک های مرتبط /محصولات مرتبط را نیز در بر گرفت. امروزه می توان از نوار کناری صفحات برای تقریباً هر چیزی استفاده کرد.

بهرحال، هنوز وقتی محتوا شبیه تبلیغات است و در نوار کناری سمت راست ظاهر می شود، کاربران تمایل دارند آن را نادیده بگیرند. در مثال زیر، کاربر به دنبال پیاده روی در کوه های آند بود. این اطلاعات در سراسر سایت، از جمله در نوار سمت راست ظاهر شده بود. او یک بار روی نوار سمت راست ثابت ماند، و از آنجایی که به نظر می رسید آیتم های آنجا تبلیغاتی بودند، دیگر هرگز به آنجا نگاه نکرد.

بیایید برای لحظه ای فقط بر روی قسمت محتوای صفحه تمرکز کنیم - ناحیه ای که هیرو (hero) را شامل نمی شود. 148 توقف (fixation) در صفحه وجود دارد که از این تعداد 132 مورد در منطقه محتوا هستند. از این 132 توقف، تنها یک مورد در نوار سمت راست قرار دارد که 0.8٪ از توجه کاربر در 25٪ از منطقه محتوا است. تفاوت بسیار زیاد بین این دو درصد تأثیر سمی پدیده سیب زمینی داغ را نشان می دهد.(تصویر پایین).

The gaze plot shows that the user looked once at the right rail of www.cascada.travel/en, then never looked at the right rail again.
The gaze plot shows that the user looked once at the right rail of www.cascada.travel/en, then never looked at the right rail again.


A zoomed in image of the right rail shows that it contains not only promotions, but also content elements related to what the user was researching.
A zoomed in image of the right rail shows that it contains not only promotions, but also content elements related to what the user was researching.


تبلیغات درون محتوایی در موبایل

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

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

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


چگونه از آلوده کردن محتوای خود با تبلیغات جلوگیری کنیم؟

ما برای اولین بار در سال 1997، از طریق تست قابلیت استفاده(usability testing)، "بنر کوری" را در بین کاربران وب مستند کردیم. سپس، در سال 2007 زمانی که یک مطالعه ردیابی چشم انجام دادیم، این یافته ها با جزئیات بیشتری تکرار شد. ما به‌تازگی یک مطالعه بزرگ جدید برای ردیابی چشم را تکمیل کردیم و متوجه شدیم که بنر کوری همچنان یک رفتار رایج است، و در طول 3 دهه ثبت شده است. این یک پدیده قوی و فراگیر است و مانند خود تبلیغات، احتمالاً به این زودی ها از بین نمی رود.

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

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

2. تست‌های قابلیت استفاده را اجرا کنید: تا مطمئن شوید که کاربران واقعاً محتوای مهمی را می‌بینند که در بنر بالایی یا نوار کناری سمت راست قرار گرفته است.

3. از ترکیب محتوا و تبلیغات در یک بخش بصری خودداری کنید: هنگام ساختاردهی یک صفحه وب، از قرار دادن عناصر کلیدی مانند دکمه فراخوانی به اقدام (CTA) اصلی یا شماره تلفن مورد نیاز برای رزرو، در نزدیکی آگهی خودداری کنید. نمونه ای از این دست که در الگوهای تاریک یوایکس “dark UX” استفاده می شود، وب سایت هایی هستند که هنگام دانلود فایلی، اغلب تبلیغات زیادی را در نزدیکی دکمه دانلود قرار میدهند یا تبلیغاتی قرار می دهند که دکمه های "دانلود" نیز درون خود دارند و کاربر را فریب می دهند تا روی دکمه اشتباه کلیک کند. و از این طریق درآمد تبلیغاتی برای وب سایت ایجاد می کند.

منابع:

https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/

https://mgearon.com/ux/banner-blindness/

https://medium.com/@sabbiromy2017/understanding-banner-blindness-enhancing-user-experience-in-digital-design-0b148e75f4c6


در نهایت، پیشنهاد میکنم این کیس استادی را که بر بنر کوری (banner blindness) تمرکز دارد مطالعه نمایید.

https://growth.design/case-studies/apple-sleep-notification



یوایکسمدل ذهنیطراحی تجربه کاربریطراحی رابط کاربریطراحی وب
محقق و طراح محصول (UI/UX Designer)
شاید از این پست‌ها خوشتان بیاید