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

فعال‌سازی پاسخ‌گو (Responsive Enabling) چیست؟

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

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

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

فعال‌سازی پاسخ‌گو چیست؟

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

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

الگو گام‌به‌گام چطور کار می‌کند

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

همه‌چیز در یک نما. همهٔ اجزای کار از ابتدا روی صفحه‌اند. کاربر می‌بیند کل مسیر چقدر است.

اول فقط گام اول. فقط کنترل‌های مرحلهٔ اول فعال‌اند. بقیه دیده می‌شوند ولی کم‌رنگ و غیرقابل کلیک‌اند.

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

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

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

کِی به کار می‌آید

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

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

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

پنهان، خاموش، یا همیشه روشن

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

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

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

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

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

گزینه‌های مرموزِ خاموش

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

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

من یک روش ساده‌تر از راهنما را هم پیشنهاد می‌کنم. کنار کنترل خاموش یک جملهٔ کوتاه بنویسید که بگوید برای روشن کردنش چه باید کرد، مثلاً «اول نقش خود را انتخاب کنید». کاربر نباید برای فهمیدن یک دکمهٔ خاکستری به راهنما برود.

دکمهٔ خاموش و دسترس‌پذیری

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

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

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

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

در بافت فارسی

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

یک: دلیل خاموش بودن را به فارسی کنار کنترل بنویسید. خیلی از فرم‌های فارسی دکمه‌ای خاکستری دارند که هیچ توضیحی کنارش نیست. یک جملهٔ کوتاه فارسی، مثل «اول نقش خود را انتخاب کنید»، این مشکل را حل می‌کند.

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

سه: کد ملی و شمارهٔ همراه، دروازهٔ رایج فرم‌های ایرانی‌اند. در بسیاری از فرم‌های ایرانی، اولین گام وارد کردن کد ملی یا شمارهٔ همراه است. بعد از تأیید این‌ها، بعضی اطلاعات، مثل نام، را می‌شود خودکار پر کرد. این بهترین جای فعال‌سازی پاسخ‌گوست. تا کد ملی تأیید نشده، فیلدهای بعدی خاموش بمانند، و بعد از تأیید، روشن و در صورت امکان پر شوند.

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

پنج: کد پیامکی را با روشن شدن خودکار همراه کنید. در ورود با کد یک‌بارمصرف، دکمهٔ تأیید معمولاً تا وارد شدن کامل کد خاموش است. اگر اپ بتواند کد را از پیامک بخواند، فیلد را خودش پر کند و دکمه را خودش روشن کند، یک گام از کار کاربر حذف شده است.

جمع‌بندی

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

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

اگر بخواهم یک پرسش بگذارم: در محصول شما، کاربر چند دکمهٔ خاکستری می‌بیند که کنارشان هیچ توضیحی نیست؟