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

افوردنس (Affordance) چیست؟ راهنمای کامل قابلیت کنش در طراحی

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

یک دستگیرهٔ در، به دست شما می‌گوید بکشید؛ یک صفحهٔ فلزی صاف روی در، می‌گوید هُل بده؛ یک دکمهٔ برجسته، می‌گوید فشارم بده. هیچ‌کدام از این‌ها راهنما یا دفترچهٔ آموزش ندارند، اما همه‌مان می‌دانیم با آن‌ها چه‌کار کنیم. این «دعوت به کنش» که خودِ شیء بی‌هیچ توضیحی صادر می‌کند، همان چیزی است که در طراحی به آن افوردنس (Affordance) یا «قابلیت کنش» می‌گوییم — یکی از بنیادی‌ترین مفاهیمی که مرز میان طراحی روان و طراحی گیج‌کننده را رقم می‌زند.

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

افوردنس چیست؟

افوردنس یعنی امکانِ کنشی که در رابطهٔ میان کاربر و شیء وجود دارد. دقت کنید که افوردنس یک ویژگی درونیِ خودِ شیء نیست؛ چیزی است که در نسبتِ میان توانایی‌های کاربر و خصوصیات شیء متولد می‌شود. همین نکتهٔ ظریف، هستهٔ کل مفهوم است.

مثال کلاسیک، یک درِ معمولی است. دری با دستگیره، «باز شدن» را به یک بزرگسال افوردنس می‌دهد؛ اما همان در برای کودکی نوپا که دستش به دستگیره نمی‌رسد یا زور کافی ندارد، عملاً این امکان را افوردنس نمی‌کند. شیء عوض نشده؛ رابطهٔ میان کاربر و شیء فرق کرده است. پس هر بار که از افوردنس حرف می‌زنیم، باید بپرسیم: «برای چه کسی؟ در چه بستری؟»

برای ما طراح‌ها، پیام روشن است: کار ما ساختنِ افوردنس‌هایی است که با توانایی‌های جسمی و ادراکیِ کاربر، با هدف‌هایش و با تجربه‌های پیشینش هم‌خوان باشد. کاربر پیوسته امکاناتی را که در یک شیء می‌بیند به مدل ذهنی خودش از «کارکرد آن شیء» گره می‌زند؛ اگر این دو با هم جور دربیایند، تعامل بی‌دردسر پیش می‌رود.

از گیبسون تا نورمن؛ تولد یک مفهوم

واژهٔ «افوردنس» را نخستین‌بار روان‌شناس ادراک، James J. Gibson، در سال ۱۹۷۷ ساخت. تعریف گیبسون بر امکان‌های کنشِ واقعی تکیه داشت — تمام کارهایی که توانایی‌های جسمیِ موجود اجازه می‌دهد، فارغ از اینکه کاربر متوجه آن‌ها بشود یا نه. از این منظر، یک صندلی «نشستن» را افوردنس می‌کند، اما «ایستادنِ روی آن»، «پرتاب‌کردنش» و «سنگر‌گرفتن پشتش» را هم افوردنس می‌کند.

یک دهه بعد، Don Norman در کتاب اثرگذارش (۱۹۸۸) این مفهوم را برای دنیای طراحی بازتعریف کرد و روی جنبه‌ای تازه انگشت گذاشت: افوردنس‌های ادراک‌پذیر — یعنی کنش‌هایی که کاربر گمان می‌کند ممکن‌اند. برای نورمن، مهم نیست شیء چه امکاناتی «دارد»؛ مهم این است که کاربر چه امکاناتی را «می‌بیند». همین جابه‌جاییِ زاویهٔ دید، افوردنس را از یک مفهوم فلسفی به ابزار روزمرهٔ طراحی تبدیل کرد. (نورمن همان کسی است که در بحث تفکر طراحی هم نامش پرتکرار است.)

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

نشانگر و افوردنس؛ یک تفاوت سرنوشت‌ساز

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

• - افوردنس خودِ امکانِ کنش است (اینکه واقعاً می‌شود این کار را کرد).
• - نشانگر علامتی است که آن امکان را قابل‌مشاهده می‌کند (اینکه کاربر می‌فهمد می‌شود این کار را کرد).

این دو می‌توانند از هم جدا بیفتند و همین‌جاست که مشکل‌ها زاده می‌شوند. افوردنسی ممکن است وجود داشته باشد اما هیچ نشانگری نداشته باشد (پس نامرئی می‌ماند)، یا نشانگری وجود داشته باشد که به افوردنسی واقعی وصل نیست (پس گمراه‌کننده است). یک کلید برقِ برجسته روی دیوار، نمونهٔ خوبِ همراهی این دو است: برجستگی و شکلِ کلید، نشانگری است که فریاد می‌زند «فشارم بده»، و پشت آن هم افوردنسِ واقعیِ روشن/خاموش‌کردن چراغ نشسته است.

تقابل کلاسیکِ دیگر: خط‌کشیِ عابر پیاده در برابر نرده. خط‌های سفیدِ روی آسفالت یک نشانگراند — به شما می‌گویند «از اینجا رد شو» — اما جلوی عبور از جای دیگر را نمی‌گیرند. یک نردهٔ فیزیکی اما یک افوردنس (یا در واقع ضدِّ افوردنسِ عبور) است؛ چه آن را ببینید چه نبینید، از عبور جلوگیری می‌کند.

انواع افوردنس

William Gaver در سال ۱۹۹۱ دسته‌بندیِ کاربردی‌ای پیشنهاد کرد که هنوز هم راهگشاست. او افوردنس‌ها را به سه گروه تقسیم کرد:

• - افوردنسِ آشکار (Perceptible): ویژگی‌های دیداریِ شیء، کنشِ ممکن را روشن اعلام می‌کنند؛ مثل دستگیرهٔ درکه شکلش می‌گوید بگیر و بچرخان. این ایده‌آلِ طراحی است.
• - افوردنسِ پنهان (Hidden): امکان هست، اما سرنخِ روشنی ندارد و کاربر باید با تجربه یا آزمون‌وخطا کشفش کند؛ مثل منویی که فقط با نگه‌داشتن نشانگر روی یک آیتم باز می‌شود.
• - افوردنسِ کاذب (False): ظاهرِ شیء کنشی را وعده می‌دهد که در واقع وجود ندارد؛ مثل متنی که زیرش خط دارد اما لینک نیست، یا آن دکمه‌های عابر پیاده‌ای که در بسیاری از تقاطع‌ها فشار دادنشان هیچ اثری بر چراغ ندارد. افوردنسِ کاذب، انتظارِ کاربر را می‌سازد و بعد آن را می‌شکند — و همین، اعتماد را فرسوده می‌کند.

در طراحیِ رابط کاربری، چند نوع دیگر هم به این فهرست اضافه می‌شود که در عمل زیاد به کارشان می‌بریم:

• - افوردنسِ الگو (Pattern): تکیه بر قراردادهای جاافتاده؛ مثل آیکون همبرگری که همه می‌دانند یعنی «منو».
• - افوردنسِ منفی (Negative): سد‌کردنِ عمدیِ مسیر تا وقتی شرطی برآورده شود؛ مثل دکمهٔ ثبتِ خاکستری و غیرفعال که تا کامل‌شدن فرم، کلیک‌پذیر نمی‌شود.

چارچوب دیگری هم هست (از Rex Hartson، ۲۰۰۱) که افوردنس‌ها را از زاویهٔ نقششان دسته‌بندی می‌کند: فیزیکی (ظاهر می‌گوید چه‌کار کنی، مثل دکمهٔ برجستهٔ «افزودن به سبد»)، شناختی (به فهمیدن کمک می‌کند، مثل برچسبِ متنیِ کنار یک دکمه)، حسی (به حس‌کردن کمک می‌کند، مثل صدا یا لرزشِ تأیید) و کارکردی (به رسیدن به هدف کمک می‌کند، مثل ظاهر‌شدنِ کالا در سبد پس از کلیک). هرکدام لایه‌ای از تجربهٔ روان را می‌سازند.

اصطکاک شناختی و خطای کاربر

وقتی برداشتِ کاربر از «کارهای ممکن» با «امکاناتِ واقعیِ» شیء جور درنیاید، دو چیز رخ می‌دهد: کاربر خطا می‌کند، و چیزی به نام اصطکاک شناختی (Cognitive Friction) پدید می‌آید — همان تنشِ ذهنی‌ای که وقتی سیستم برخلاف انتظارمان واکنش نشان می‌دهد سراغمان می‌آید. درِ گیج‌کننده‌ای که نمی‌دانی باید هُلش بدهی یا بکشی («نورمن‌دُر»)، نمونهٔ روزمرهٔ همین اصطکاک است.

هدفِ طراحیِ خوبِ افوردنس، کاستنِ همین دو چیز است: کمینه‌کردنِ خطا و کمینه‌کردنِ اصطکاک شناختی. هر جا کاربر مکث کند و از خودش بپرسد «حالا این چطور کار می‌کند؟»، یعنی جایی افوردنس یا نشانگرش را کم گذاشته‌ایم.

چگونه بهترین افوردنس‌ها را طراحی کنیم؟

افوردنسِ خوب اتفاقی نیست؛ نتیجهٔ چند تصمیم آگاهانه است. شش اصل عملی که بیشترین اثر را دارند:

• - تحقیق کاربر انجام دهید: انتظارها و تجربه‌های پیشینِ کاربر در همان بستر مشخص را بشناسید؛ افوردنس همیشه نسبت‌به کاربر معنا دارد، پس بدون شناختِ او تیر در تاریکی است.
• - چیدمان را روشن و بی‌شلوغی نگه دارید: افوردنس‌ها را منطقی و مرتب بچینید تا میان انبوهی از عناصر گم نشوند.
• - از نشانگرها استفاده کنید: با برجستگی، سایه، رنگ و برچسبِ متنی، کاربر را به‌سمت افوردنس هدایت کنید. افوردنسِ نامرئی، افوردنس نیست.
• - به قراردادها پایبند باشید: از الگوهای آشنا پیروی کنید — واژهٔ «جستجو» داخل کادر جستجو، ذره‌بین برای همان، سبد خرید در گوشهٔ بالا. آشنایی، نیمی از فهم است.
• - قانون فیتس (Fitts’s Law) را به کار ببندید: عناصرِ مهم‌تر و پرکاربردتر را بزرگ‌تر و دست‌یافتنی‌تر کنید تا کاربر سریع‌تر و دقیق‌تر رویشان کنش کند.
• - از زبان‌های طراحیِ پخته کمک بگیرید: سیستم‌هایی مثل متریال دیزاین سرنخ‌های بصریِ غنی و طبیعی‌ای برای افوردنس فراهم می‌کنند؛ و در بسترهای تازه مثل واقعیت افزوده و مجازی، رفتار و فیزیکِ دنیای واقعی را بازتاب بدهید تا کاربر بی‌آموزش بفهمد.

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

افوردنس در رابط تخت: مشکلی که خودمان ساختیم

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

رابط‌های اولیه پر از نشانگرهای پرزحمت بودند: دکمه‌هایی با سایه و برجستگی که دقیقاً می‌گفتند «مرا فشار بده»، سطل زبالهٔ سه‌بعدی، دفترچهٔ یادداشت با بافت چرم. با آمدن طراحی تخت، بخش بزرگی از این نشانگرها حذف شد — و همراهشان، بخشی از فهم‌پذیری هم رفت. نتیجه‌اش وضعیتی است که همه تجربه‌اش کرده‌اند: نمی‌دانی این متن یک لینک است یا فقط یک متن رنگی؛ این کارت قابل کلیک است یا فقط یک کادر.

نکتهٔ مهم این است که این یک بحث سلیقه‌ای دربارهٔ زیبایی نیست. افوردنسِ «قابل کلیک بودن» در رابط دیجیتال هیچ پایهٔ فیزیکی ندارد؛ کاربر فقط از روی نشانه‌های بصری حدس می‌زند. اگر آن نشانه‌ها را حذف کنید، چیزی جایش را نمی‌گیرد. حداقل‌هایی که تقریباً همیشه باید بمانند:

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

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

افوردنس کاذب و هزینه‌اش

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

• - کارتی که کلیک‌پذیر به نظر می‌رسد ولی فقط دکمهٔ داخلش کار می‌کند. کاربر روی کل کارت می‌زند، هیچ اتفاقی نمی‌افتد، و نتیجه می‌گیرد صفحه خراب است. اگر کارت شکل کلیک‌پذیر دارد، کل کارت را کلیک‌پذیر کنید.
• - عنصر غیرفعالی که شبیه فعال است. دکمهٔ خاکستری‌ای که هم می‌تواند «غیرفعال» باشد و هم «سبک ثانویه». اگر کاربر نتواند این دو را از هم تشخیص دهد، هر بار باید امتحان کند.
• - تصویری که شبیه دکمهٔ پخش است ولی پخش نمی‌کند — یا بنری که شبیه فرم است ولی فقط یک عکس است.
• - متن رنگی‌ای که لینک نیست. اگر رنگ تأکید شما همان رنگ لینک است، بخشی از متن‌هایتان افوردنس کاذب دارند.

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

جمع‌بندی

• - افوردنس، امکانِ کنشی است که در رابطهٔ میان کاربر و شیء وجود دارد؛ نه ویژگیِ درونیِ خودِ شیء. همیشه بپرسید «برای چه کسی؟».
• - گیبسون افوردنس را امکانِ کنشِ واقعی می‌دید؛ نورمن آن را برای طراحی به امکانِ کنشِ ادراک‌پذیر بازتعریف کرد. افوردنسی که دیده نشود، انگار نیست.
• - نشانگر سرنخِ دیدنیِ افوردنس است؛ این دو می‌توانند از هم جدا بیفتند و افوردنسِ نامرئی یا نشانگرِ گمراه‌کننده بسازند.
• - انواع افوردنس: آشکار، پنهان، کاذب (گیور)؛ و در رابط کاربری: الگو و منفی. افوردنسِ کاذب اعتماد را می‌فرساید.
• - افوردنسِ خوب با تحقیق کاربر، چیدمان روشن، نشانگرها، قراردادها، قانون فیتس و زبان‌های طراحیِ پخته ساخته می‌شود و اصطکاک شناختی را کم می‌کند.
• - افوردنسِ «قابل کلیک بودن» در رابط دیجیتال پایهٔ فیزیکی ندارد؛ اگر نشانهٔ بصری را حذف کنید چیزی جایش را نمی‌گیرد.
• - لینک درون متن باید نشانه‌ای جز رنگ داشته باشد، و حالت فوکوس کیبورد بیشترین حذف‌شدن را دارد.
• - افوردنس کاذب گران‌تر از افوردنس گم‌شده است، چون اعتماد را از بین می‌برد — مثل کارتی که کلیک‌پذیر به نظر می‌رسد و نیست.
• - آزمون ساده: تصویر صفحه را نشان دهید و بپرسید «روی چه چیزهایی می‌شود کلیک کرد؟» — جواب، فهرست افوردنس‌های گم‌شده و کاذب شماست.