قوانین UX به زبان ساده - قانون Von Restorff Effect

قوانین UX به زبان ساده - قانون Von Restorff Effect

سلام دوستان عزیز سکان آکادمی. امیدواریم خوب و سلامت و پر قدرت در مسیر پیشرفت باشید. امروز  با شما هستم با هشتمین قانون UX، با نام (اثر فون رستورف) Von Restorff Effect. مطمئنا تا به امروز، ما، هم به عنوان کاربر و هم به عنوان طراح تجربه ی کاربری، خیلی با این اثر سروکار داشتیم. اما با یک مثال ببینیم منظور از Von Restorff Effect چیه؟

فرض کنیم که داریم یه لیست خرید رو می خونیم، لیست به شرح زیره:

  • میوه
  • پنیر
  • گوشت
  • قارچ
  • گوشی آیفون 12
  • ماهی

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

اثر فون رستورف دقیقا این رو میگه:

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

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

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

تصویر1: اثر فون رستورف - Von Restorff Effect
تصویر1: اثر فون رستورف - Von Restorff Effect

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

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

پیدایش قانون Von Restorff

هدویگ فون رستورف)   (Hedwig Von Restorff با مطالعاتش  در سال 1933 نشون داد كه چطور چشم و مغز ما دائماً دنبال چیزهاییه كه هنجار رو بهم می زنن، یعنی ما دائما منتظریم كه توجه ما توسط چیزهای غیرعادی جلب بشه. این اصل به عنوان اثر انزوا، برجستگی یا تمایز هم شناخته می شه چون در واقع ارائه عنصریه که با همه ی موارد دیگه مغایرت داشته باشه. البته رستورف اولین کسی نبود که روی این موضوع کار می کرد، یافته های اولیه ی او بعدها با تحقیقاتی مثل شلی تیلور (Shelley Taylor) و سوزان فیسکه (Susan Fiske) توی سال 1978 تأیید شد.

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

تصویر2: اثر فون رستورف - Von Restorff Effect
تصویر2: اثر فون رستورف - Von Restorff Effect

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

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

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

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

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

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

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

یه نمونه از توجه انتخابی (Selective Attention) که توی رابط های دیجیتال معموله، رفتار کاربره که به عنوان کوری بنر (Banner Blindness) شناخته می شه.

کوری بنر ، نابینایی بر اساس تمایل افراد به نادیده گرفتن عناصریه که تصور می کنن تبلیغاته، این یک پدیده ی قویه که در طول سه دهه به ثبت رسیده و حتما من و شما هم انجامش دادیم!

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

تصویر 3: Banner Blindness-بنر کوری
تصویر 3: Banner Blindness-بنر کوری

شون کمک می کنه تا به هدف هاشون برسن، به ویژه، الگوهای طراحی مثل ناوبری (Navigation)، نوارهای جستجو (search bars)، عنوان ها (Headlines)، پیوندها (Links) و دکمه ها (Buttons). همونطور که قانون Jakob حکم می کنه، کاربرا به طور غریزی به دنبال این موارد، توی مکان های مشترک هستن، حتی اگه عناصرِ محتوای درست، از  دور شبیه تبلیغات باشن یا در مجاورتشون قرار بگیرن، ممکنه نادیده گرفته بشن. بنابراین، خوبه که بدونید چه زمان تمایز بصری محتوای ناخواسته، منجر به اشتباه بودن اون با تبلیغ می شه.

بیاید چندتایی مثال رو باهم بررسی کنیم:

مثال هایی از اثر  von Restorff

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

برای اثبات، به مثال تصویر 4 توجه کنید، دو نسخه از حالت تأیید رو نشون میده: یکی با دکمه هایی که از نظر بصری از همدیگه متمایز نیست و دیگری با تأکید بر مهم ترین دکمه. عدم وجود کنتراست بصری در رابط کاربری سمت چپ، به راحتی می تونه منجر به انتخاب تصادفی و یک اقدام اشتباه توسط کاربر بشه. با تأکید بصری روی اقدام تخریبی، نسخه ی سمت راست نه تنها کاربرانی که می خوان حساب های خودشون رو حذف کنن کمک می کنه، بلکه به کاربرایی که قصد حذف حساب هاشون رو ندارن هم کمک میکنه تا از انتخاب تصادفی این گزینه خودداری کنن. برای ایمنی بیشتر ، یک نماد هشدار دهنده هم در عنوان صفحه سمت راست وجود داره که به شما در جلب توجه و انتقال اهمیت محتوای داخل modal کمک می کنه.

تصویر4: نمونه ای از نحوه استفاده از تضاد برای جلب توجه به اقدامات مهم و کمک به کاربران برای جلوگیری از انتخاب تصادفی گزینه اشتباه
تصویر4: نمونه ای از نحوه استفاده از تضاد برای جلب توجه به اقدامات مهم و کمک به کاربران برای جلوگیری از انتخاب تصادفی گزینه اشتباه

بیایید مثال دکمه رو یه قدم به جلو ببریم و به رابطی نگاه کنیم که فراتر از استفاده ی ساده از رنگ برای ایجاد کنتراسته. دکمه عملکرد شناور (FAB) که عملکرد اصلی و رایج ترین کارها رو روی صفحه انجام می ده، الگوی طراحی ارائه شده توسط Google Design Material (تصویر 5)، هست. Google با ارائه ی راهنمایی هایی در مورد طراحی این عنصر، قرارگیری اون رو روی صفحه نمایش و عملکردهایی که باید انجام بده، سازگاریش رو در بین محصولات و خدمات مختلف تضمین می کنه. در نتیجه، این یه الگوی آشنا شده هست که مردم تشخیصش می دن و بنابراین به راهنمایی تجربه شون کمک می کنه (بنابراین، این هم در عمل نمونه ای از قانون Jakob هست).

تصویر 5:نمونه هایی از دکمه عملکرد شناور از Material Design (منابع: Gmail و تقویم Google ، 2019)
تصویر 5:نمونه هایی از دکمه عملکرد شناور از Material Design (منابع: Gmail و تقویم Google ، 2019)

نمونه رایج دیگه از اثر von Restorff رو می تونیم توی جدول های قیمت گذاری ببینیم. طرح اشتراك در بیشتر سرویس هایی كه ما استفاده می كنیم در دسترسه و اغلب شركت ها روی یك گزینه نسبت به سایر گزینه ها بیش تر  تأكید می كنن. برای دستیابی به این تاکید، طراحا اغلب گزینه هایی رو که می خوان تبدیل به اقدام بشه رو با اضافه کردن نشونه های تصویری متمایز می کنن. برای عنوان مثال، Dropbox روانتخاب کنین، که روی گزینه "پیشرفته" (تصویر6) با استفاده از رنگ (رنگ تاکیدی (Accent color) روی دکمه ی "امتحان رایگان" اعمال می شه) تأکید می کنه، شکل (کارت به خاطر عنصر "بهترین مقدار" در بالا کمی بزرگتر به نظر می رسه) و موقعیت (قرار دادن کارت در مرکز نمایشگر).

تصویر 6: نمونه ای از اثر von Restorff در جدول قیمت گذاری
تصویر 6: نمونه ای از اثر von Restorff در جدول قیمت گذاری

اثر von Restorff رو میشه توی عناصر طراحی که قصد جلب توجه ما رو دارن هم مشاهده کرد. برای مثال اعلان ها رو در نظر بگیرید (تصویر 7)، که به منظور اطلاع رسانی به کاربرا هست و در صورت نیاز باید اقدامی از سوی کاربرا انجام بگیره. این عناصر  رو میشه تقریباً توی هر برنامه یا سرویس دید و برای بهتر یا بدتر کردن توجه ما طراحی شده است.

تصویر 7: استفاده از اثر  von Restorff برای جلب توجه به اعلان ها
تصویر 7: استفاده از اثر  von Restorff برای جلب توجه به اعلان ها

ما می تونیم افکار پشت اثر  von Restorff رو گسترش بدیم و اون رو برای طراحی فراتر از عناصر منفرد هم به کار ببریم. برای عنوان مثال، وب سایت های خبری رو در نظر بگیرید که معمولاً روی محتوای متمایز و برجسته تأکید می کنن تا بتونن اون رو در برابر عناوین، تصاویر و تبلیغات دیگه متمایز کنن (تصویر8) الگویی سازگار که در این وب سایت ها مشاهده می کنیم، استفاده از مقیاس، برای ایجاد تضاد بین محتوای برجسته و محتوای همجواره. توجه خواننده به اطلاعاتیه که از ستون های کناری محتوا خارج می شه. همونطور که این مثال ها نشون می ده، تضاد بصری از خیلی جهات ایجاد میشه.

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

تصویر 8: وب سایت های خبری اغلب برای تأکید بر عناوین برجسته از مقیاس استفاده می کنند
تصویر 8: وب سایت های خبری اغلب برای تأکید بر عناوین برجسته از مقیاس استفاده می کنند

(منابع [در جهت عقربه های ساعت از بالا سمت چپ]: بلومبرگ ، ProPublica ، نیویورک تایمز و بوستون گلوب ، 2019)

بعضی موارد مهم وجود دارن که باید زمان استفاده از اثر  von Restorff در طراحی مورد توجه قرار بدیم. اولین مورد اینه که هر چند وقت یک بار باید تضاد (Contrast) ایجاد بشه، این اثر باید با قصد استفاده بشه و درضمن بیش از حد هم استفاده نشه. تنها چیزی که بدتر از عدم تضاده، استفاده ی بیش از حد از اونه که نه تنها می تونه باعث کاهش قدرت عناصر ی که قصد داشتین اون رو متمایز کنین بشه، بلکه از نظر بصری کاربر  رو تحت فشار قرار میده. عاقلانه ست که زمان تأکید روی عناصر بصری از محدودیت استفاده کنید تا از رقابت اون ها با همدیگه مطمئن بشید.

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

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

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

اثر von Restorff یک رهنمود قدرتمند برای نحوه ی استفاده از تضاد برای جلب توجه مردم به مرتبط ترین مطالب هست. این اثر می تونه به تصمیمات طراحی ما در زمان تمایل به تأکید بر اقدامات یا اطلاعات حیاتی یا مهم کمک کنه و به ما اطمینان بده که کاربرای محصولات و خدمات ما می تونن به سرعت اون چیزی رو که برای رسیدن به اهدافشون نیاز دارن تشخیص بدن. تضاد اگه با محدودیت استفاده نشه، می تونه مشکل ساز بشه. زمانی که طراحا عناصر رو از نظر بصری متمایز می کنن، تأثیر اون جلب توجه کاربره. اگه عناصر زیادی از لحاظ بصری با همدیگه تضاد داشته باشن، قدرتشون کم میشه و بین عناصر دیگه برجسته نمی شن. علاوه بر این، ما باید بدونیم که چطور ویژگی های بینایی که برای ایجاد تضاد استفاده می کنیم، توسط افرادی که کمبود بینایی دارن درک می شه و اینکه چطور ممکنه روی افرادی که حساسیت حرکت دارن، تأثیر بذاره.   

تصویر 9: اثر فون رستورف-Von Restorff Effect
تصویر 9: اثر فون رستورف-Von Restorff Effect

در آخر به این نکته های کلیدی اثر von Restorff دقت کنیم:

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

امیدوارم این مقاله براتون مفید واقع بشه. نظراتتون رو باهام از طریق بخش نظرات به اشتراک بگذارید.

برقرار باشید.

منبع

 

نظرات

پیشنهادات بیشتر سکان بلاگ برای شما

اگر login نکردی برامون ایمیلت رو بنویس: