مقالات تجربه کاربری - توهم در طراحی
توهم در طراحی
توهم در طراحی 
توهم در طراحی (Illusions in Design) چیست؟
💡 این متن «بازنویسی آزاد» است: ایدهها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثالهای تازه بازگو شدهاند و ترجمهٔ کلمهبهکلمه نیست. بخشهای افزودهٔ مترجم در جعبهٔ منبع مشخص شدهاند.
دکمهای که برجسته به نظر میرسد، برجسته نیست. یک سایه است روی یک صفحهٔ کاملاً تخت. و باز هم آن را فشار میدهید.
تعریف
توهم — چه نوری و چه بصری — پدیدهای ادراکی است که ذهن را وامیدارد چیزی را ببیند که آنجا نیست، یا چیزی را جور دیگری ببیند که هست.
و سازوکارش در شیوهٔ پردازش اطلاعات بصری در مغز است — و اغلب از راه قوانین گشتالت کار میکند.
و طراح از آن برای هدایت توجه · ساختن عمق و سلسلهمراتب · و بهتر کردن تجربه استفاده میکند.
و نکتهای که در تعریف گم میشود این است: هر رابط دیجیتالی از پایه یک توهم است. صفحه تخت است و ما در آن دکمه و کارت و لایه میبینیم.
یعنی پرسش هیچوقت «توهم بسازیم یا نه» نیست. پرسش این است که کدام توهم، و به چه قصدی.
مبنا: گشتالت
و اصل کار بر روانشناسی گشتالت استوار است، که تأکیدش بر این است: انسان محرکهای بصری را بهطور خودکار در الگوهای معنادار سازمان میدهد.
و همین به طراح اجازه میدهد «پیامهای قدرتمند را در یک نگاه به مخاطب برساند.»
و قوانینی که بیشتر به کار میآیند اینهاست:
- - بستار — کاربر شکلهای ناقص را خودش کامل میکند.
- - زمینه و شکل — تفکیک پیشزمینه از پسزمینه.
- - مجاورت — گروهبندی عناصر نزدیک به هم.
- - شباهت — سازماندادن آیتمهای بصریِ شبیه به هم.
- - و پیوستگی — دنبالکردن مسیرهای بصری.
و اگر بخواهم یک جمله از همهٔ اینها بیرون بکشم: مغز کمکاری نمیکند، حدس میزند. و طراحی خوب، حدسهای مغز را در جهت درست میگذارد.
و در اصول گشتالت مفصلتر نوشتم که هر کدام از این قوانین چطور کار میکنند.
شش کاربرد در طراحی
یک: سلسلهمراتب بصری. طراح با اندازه، رنگ، کنتراست و موقعیت توجه کاربر را به عنصرهای اولویتدار هدایت میکند و معماری اطلاعات روشنی میسازد.
دو: عمق و لایهبندی. سایه، گرادیان و همپوشانی عمق ادراکشده میسازند.
و رمزگانش هم جا افتاده است: دکمهٔ برجسته با سایه، تعاملپذیری را علامت میدهد. و عنصر فرورفته، میدان ورودی را.
سه: حرکت و انیمیشن. گذارهای متحرک و پیمایش پارالاکس، توهم حرکت میسازند.
و پدیدهٔ فای و اثر چرخ گاری توجه را هدایت میکنند و بازخورد میدهند — مثل چرخندهٔ بارگذاری که پیشرفت را القا میکند.
چهار: اثرهای نوری. توهمهایی مثل پونزو و مولر-لایر ادراک اندازه را دستکاری میکنند — با خطهای همگرا و نسبتهای تناسبی.
پنج: فضای منفی. فضای سفید حسابشده «توهم سادگی، ظرافت و وضوح» میسازد، بار شناختی را کم میکند و کیفیت برند را علامت میدهد — نمونهٔ همیشگیاش اپل است.
شش: رنگ و کنتراست. گرادیان رنگی بُعد اضافه میکند، و کنتراست حسابشده عنصر مهم را برجسته میکند.
و کنتراست همزمان هم اثر میگذارد: یک رنگ روی دو پسزمینهٔ متفاوت، دو رنگ به نظر میرسد.
فهرست توهمهای پرکاربرد
- - اصول گشتالت — شباهت، مجاورت، بستار و پیوستگی که گروهبندی ادراکی میسازند.
- - تناظر همریخت — نمادهای آشنا که فهم بیواسطه را ممکن میکنند.
- - توهم مولر-لایر — جهت خط، طول ادراکشده را عوض میکند.
- - مثلث کانیزا — فضای منفی، شیئی میسازد که وجود ندارد.
- - پارالاکس حرکتی — سرعت پیمایش متفاوت، عمق میسازد.
- - توهمهای رنگی — رنگ گرم جلو میآید و رنگ سرد عقب میرود.
- - و تصویرهای مبهم — طرحهای چندتفسیری که درگیری را بیشتر میکنند.
و در اسکیومورفیسم نوشتم که وقتی این رمزگانها بیش از حد واقعگرا شوند چه اتفاقی میافتد.
هفت ریسک
یک: بدفهمی. توهمها ذهنیاند، و تفاوت فرهنگی بهشدت بر ادراکشان اثر میگذارد. کاربر از پیشینهٔ دیگر ممکن است اثر بصری را کاملاً جور دیگری بفهمد.
دو: بار شناختی. توهم پیچیده، بار شناختی را بالا میبرد و فهم و تعامل با رابط را سخت میکند.
سه: سازگاری دستگاه. توهم ممکن است روی دستگاهها، سکوها و اندازههای صفحهٔ مختلف یکسان کار نکند.
چهار: دسترسپذیری. کاربر با معلولیت بینایی یا شناختی، توهم را مثل بقیه ادراک نمیکند. توهم متکی به رنگ، کاربر نابینای رنگ را کنار میگذارد.
پنج: توهم کاملبودن. تصویر یا ویدئوی قهرمانِ بزرگ، کاربر موبایل را دربارهٔ محتوای پایین صفحه گمراه میکند.
شش: توهم کنترل. گمراهکردن کاربر دربارهٔ میزان کنترل واقعیاش، اعتماد را نقض میکند.
هفت: توهم کمک دروغین. مراقب الگوهای تاریکی باشید که کاربر را فریب میدهند.
و اگر این هفتتا را کنار هم بگذارید، دو دستهٔ کاملاً متفاوت میبینید. سهتای اول خطای اجراییاند؛ سهتای آخر خطای اخلاقی.
و ریسک چهارم — دسترسپذیری — تنها موردی است که در هر دو دسته جا میگیرد: هم اشتباه فنی است و هم انتخابی دربارهٔ اینکه چه کسی کاربر شماست.
پنج قاعدهٔ اجرایی
اصول ادراک را بفهمید. تسلط بر روانشناسی گشتالت، سلسلهمراتب بصری، مجاورت، شباهت و بستار، پایهٔ کار است.
هدفمند استفاده کنید. توهم را با قصد روشن و همراستا با هدف رابط به کار ببرید — هیچوقت فقط برای اثر زیباییشناختی.
زیبایی را با کاربردپذیری متوازن کنید. مطمئن شوید توهم، کارکرد یا دسترسپذیری را قربانی نمیکند — کنتراست رنگ، خوانایی و طراحی فراگیر را در نظر بگیرید.
اثرها را ظریف نگه دارید. کاربر را با توهمهای زیاد یا حواسپرتکن غرق نکنید، و الگوهای جاافتادهای را که کاربر میشناسد حفظ کنید.
آزمون کنید و تکرار کنید. با آزمون کاربری اثربخشی را بسنجید، و بازخورد متنوع جمع کنید — چون ادراک تفاوت زیادی دارد.
و قاعدهٔ دوم از همه مهمتر است، چون تنها قاعدهای است که دربارهٔ نیت حرف میزند و نه دربارهٔ اجرا.
آزمون سهمرحلهای
این بخش افزودهٔ من است، چون «هدفمند استفاده کنید» توصیهٔ درستی است که بهتنهایی قابل اجرا نیست.
یک: اگر توهم را بردارید، رابط هنوز کار میکند؟ اگر پاسخ «نه» است، شما توهم نساختهاید — روی توهم تکیه کردهاید.
و آزمون عملیاش ساده است: صفحه را در حالت پرکنتراست، بدون انیمیشن و با صفحهخوان ببینید. آنچه باقی میماند، محصول واقعی شماست.
دو: توهم چه چیزی را نشان میدهد؟ سایهٔ زیر دکمه دروغ نمیگوید — میگوید «این چیز فشردنی است»، و هست.
و توهمی که چیزی را نشان میدهد که واقعیت ندارد، از همینجا به دستهٔ دوم میرود. سایهای زیر عنصر غیرفعال، دروغ است.
سه: کاربر با فهمیدن، احساس فریب میکند؟ این همان آزمونی است که در توهم کنترل هم آوردم.
و کاربردش اینجاست: کسی از فهمیدن اینکه دکمه واقعاً برجسته نیست ناراحت نمیشود. اما از فهمیدن اینکه شمارندهٔ «۳ نفر دیگر در حال دیدن» ساختگی است، چرا.
در واقعیت مجازی و افزوده
و واقعیت مجازی و واقعیت افزوده فعالانه از توهم برای غوطهوری استفاده میکنند.
و واقعیت مجازی توهم فضا و عمق میسازد — مثل شبیهسازهای پرواز. و واقعیت افزوده محتوای دیجیتال را روی محیط فیزیکی سوار میکند — مثل اپلیکیشن IKEA Place.
و تفاوت مهمی اینجا هست که ارزش گفتن دارد: در رابط دوبعدی، توهم ابزار ارتباط است. و در واقعیت مجازی، توهم خودِ رسانه است.
و همین یعنی خطای ادراکی آنجا هزینهٔ بدنی دارد، نه فقط شناختی — چیزی که در بیماری سایبری نوشتم.
پشتوانهٔ پژوهشی
و کارهای پراستناد این حوزه اینهاست:
مایکل باخ، «توهمهای بصری در اینترنت» (۲۰۱۴) — تحلیل تحول پانزدهسالهٔ توهمهای وببنیاد، روششناسی، و الگوهای رفتار کاربر.
پرنو ابطحی، «از توهمها تا تعاملهای فراواقعی در واقعیت مجازی» (۲۰۲۱) — دربارهٔ محدودیتهای ادراکی واقعیت مجازی و تعاملهای واقعیت آمیخته.
و ارجاع کلیدی دیگر الن لنگر است. او در ۱۹۷۵ در ژورنال شخصیت و روانشناسی اجتماعی، «توهم کنترل» را بهطور رسمی شناسایی کرد.
و نشان داد این سوگیری شناختی چطور باعث میشود آدم در موقعیتهایی که کنترل ندارد، فرض کنترل کند.
چارچوب اخلاقی
و جمعبندی اخلاقی منبع روشن است: طراح باید شفافیت و رضایت کاربر را در اولویت بگذارد و از دستکاری بپرهیزد.
و توهم باید به خودمختاری و اعتماد کاربر احترام بگذارد، تجربه را بدون قربانیکردن وضوح و انصاف بهتر کند، و هیچوقت کاربر را به تصمیمی که نمیخواسته نکشاند.
در بافت فارسی
یک: سلسلهمراتب بصری در راستبهچپ آینه میشود، اما نه کامل. مسیر نگاه از راستبالا شروع میشود، ولی عددها و نمودارها همچنان چپبهراست خوانده میشوند.
و نتیجهاش این است که الگوهای آمادهٔ چیدمان را نمیشود صرفاً قرینه کرد. جهت پیوستگی بصری در یک صفحهٔ فارسی، در بخشهای مختلف فرق میکند.
دو: فضای منفی در فارسی گرانتر است. خط فارسی متصل است و ارتفاع سطرش بیشتر، پس همان مقدار فضای سفید در فارسی خلوتتر به نظر نمیرسد.
و راهحلش افزودن فاصلهٔ سطر و فاصلهٔ میان بلوکهاست، نه کمکردن محتوا. توهم سادگی اینجا با تنفس ساخته میشود، نه با حذف.
سه: تفاوت فرهنگی در نمادها، ریسک اول را بزرگتر میکند. نماد بیواسطه در یک فرهنگ، در فرهنگ دیگر بیمعناست.
و قاعدهٔ عملیاش این است: هر جا نماد بهتنهایی معنا را حمل میکند، برچسب متنی هم بگذارید. این هم بدفهمی را کم میکند و هم دسترسپذیری را بالا میبرد.
چهار: انیمیشن اینجا هزینهٔ عملکردی دارد. روی دستگاههای قدیمیتر و شبکهٔ کندتر، پارالاکس و گذارهای سنگین کند میشوند.
و توهم حرکتی که با لکنت اجرا شود، از نبودش بدتر است — چون حرکت ناهموار، حس خرابی میدهد نه حس عمق.
جمعبندی
- - توهم بصری، پدیدهای ادراکی است که ذهن را وامیدارد چیزی را ببیند که نیست یا جور دیگری ببیند که هست
- - سازوکارش پردازش بصری مغز است، اغلب از راه قوانین گشتالت: بستار · زمینه و شکل · مجاورت · شباهت · پیوستگی
- - هر رابط دیجیتالی از پایه یک توهم است — پرسش «توهم بسازیم یا نه» نیست، «کدام توهم و به چه قصدی» است
- - شش کاربرد: سلسلهمراتب بصری · عمق و لایهبندی · حرکت و انیمیشن · اثرهای نوری · فضای منفی · رنگ و کنتراست
- - توهمهای پرکاربرد: گشتالت · تناظر همریخت · مولر-لایر · مثلث کانیزا · پارالاکس · توهم رنگی · تصویر مبهم
- - هفت ریسک: بدفهمی · بار شناختی · سازگاری دستگاه · دسترسپذیری · توهم کاملبودن · توهم کنترل · کمک دروغین
- - و سهتای اول خطای اجراییاند و سهتای آخر خطای اخلاقی · دسترسپذیری در هر دو دسته است
- - پنج قاعده: فهم اصول ادراک · استفادهٔ هدفمند · توازن زیبایی و کاربردپذیری · ظرافت · آزمون و تکرار
- - آزمون سهمرحلهای: بدون توهم هم کار میکند؟ · توهم چه چیزی را نشان میدهد؟ · کاربر با فهمیدن احساس فریب میکند؟
- - پژوهش: باخ ۲۰۱۴ «توهمهای بصری در اینترنت» · ابطحی ۲۰۲۱ دربارهٔ واقعیت مجازی · لنگر ۱۹۷۵ دربارهٔ توهم کنترل
- - و در فارسی: قرینهکردن ساده کافی نیست · فضای منفی گرانتر است · نماد را با برچسب همراه کنید · و انیمیشن با لکنت از نبودش بدتر است
منبع
این نوشته «بازنویسی آزاد» است از مطلب What are Illusions in Design? در وبسایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف توهم نوری و بصری بهعنوان پدیدهٔ ادراکی که ذهن را وامیدارد چیزی را ببیند که نیست یا جور دیگری ببیند، سازوکارش در پردازش بصری مغز و از راه قوانین گشتالت، کاربردهایش برای هدایت توجه و ساختن عمق و سلسلهمراتب، مبنای روانشناسی گشتالت و سازماندهی خودکار محرکهای بصری و نقلقول دربارهٔ رساندن پیام قدرتمند در یک نگاه، پنج قانون گشتالت یعنی بستار و زمینه و شکل و مجاورت و شباهت و پیوستگی، هر شش کاربرد یعنی سلسلهمراتب بصری با اندازه و رنگ و کنتراست و موقعیت، عمق و لایهبندی با سایه و گرادیان و همپوشانی و رمزگان دکمهٔ برجسته و عنصر فرورفته، حرکت و انیمیشن و پارالاکس و پدیدهٔ فای و اثر چرخ گاری و چرخندهٔ بارگذاری، اثرهای نوری پونزو و مولر-لایر، فضای منفی و نقلقول توهم سادگی و ظرافت و وضوح و نمونهٔ اپل، و رنگ و کنتراست و کنتراست همزمان؛ فهرست توهمهای پرکاربرد شامل اصول گشتالت و تناظر همریخت و مولر-لایر و مثلث کانیزا و پارالاکس حرکتی و توهمهای رنگی و تصویرهای مبهم؛ هر هفت ریسک یعنی بدفهمی و تفاوت فرهنگی، بار شناختی، سازگاری دستگاه، دسترسپذیری و کاربر نابینای رنگ، توهم کاملبودن و تصویر قهرمان بزرگ، توهم کنترل و نقض اعتماد، و توهم کمک دروغین و الگوهای تاریک؛ هر پنج قاعدهٔ اجرایی؛ بخش واقعیت مجازی و افزوده و شبیهساز پرواز و اپلیکیشن IKEA Place؛ پشتوانهٔ پژوهشی شامل باخ ۲۰۱۴ «توهمهای بصری در اینترنت» و ابطحی ۲۰۲۱ «از توهمها تا تعاملهای فراواقعی در واقعیت مجازی» و الن لنگر ۱۹۷۵ در ژورنال شخصیت و روانشناسی اجتماعی؛ و چارچوب اخلاقی شفافیت و رضایت و پرهیز از دستکاری و احترام به خودمختاری — از این منبع گرفته شده. متن فارسی، ساختار بخشها و همهٔ تحلیلها کاملاً مستقل نوشته شدهاند.
متن مطلب اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمهبهکلمه ارائه نشده و متن کامل انگلیسی (بههمراه همهٔ منابع مرتبط) در لینک زیر در دسترس است.
بخشهای افزودهٔ مترجم: صورتبندی آغازین با سایهٔ دکمه روی صفحهٔ تخت؛ گزارهٔ «هر رابط دیجیتالی از پایه یک توهم است» و بازتعریف پرسش به «کدام توهم و به چه قصدی»؛ جمعبندی گشتالت در «مغز کمکاری نمیکند، حدس میزند» و نتیجهاش برای طراحی؛ دستهبندی هفت ریسک به سه خطای اجرایی و سه خطای اخلاقی و قرار گرفتن دسترسپذیری در هر دو؛ تشخیص اینکه قاعدهٔ دوم تنها قاعدهای است که دربارهٔ نیت است نه اجرا؛ کل بخش «آزمون سهمرحلهای» شامل آزمون برداشتن توهم و روش عملی دیدن صفحه در حالت پرکنتراست و بیانیمیشن و با صفحهخوان، آزمون اینکه توهم چه چیزی را نشان میدهد و مثال سایهٔ زیر عنصر غیرفعال، و آزمون فریب با مثال شمارندهٔ ساختگی؛ تفکیک «در رابط دوبعدی توهم ابزار ارتباط است و در واقعیت مجازی خودِ رسانه» و نتیجهاش دربارهٔ هزینهٔ بدنی خطای ادراکی؛ و کل بخش بافت فارسی شامل ناکافیبودن قرینهکردن ساده در راستبهچپ بهدلیل چپبهراست ماندن عدد و نمودار، گرانتر بودن فضای منفی در خط متصل فارسی و راهحل افزودن فاصلهٔ سطر بهجای حذف محتوا، بزرگتر بودن ریسک بدفهمی نمادها و قاعدهٔ همراهکردن برچسب متنی، و هزینهٔ عملکردی انیمیشن و گزارهٔ حرکت ناهموار حس خرابی میدهد نه حس عمق
تصاویر: هیچ تصویری از مطلب اصلی بازتولید نشده است. هر سه نمودار این صفحه طراحی مستقل مترجم است.
مشاهدهٔ مطلب اصلی
مترجم: سپنتا پویا
طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمیگردانم.
دربارهٔ من