‏رابط‌های سیال به یه لنگر ثابت نیاز دارن

Karl Koch تو این مقاله یه کانسپت رابط سیال (fluid interface، یعنی رابطی که اندازهٔ کانتینرش با محتوا تغییر می‌کنه و انتقال بین مراحل یکپارچه به نظر میاد) رو بررسی می‌کنه. نویسنده می‌گه ایده‌ش خیلی خوبه، ولی یه مشکل داره: وقتی اندازهٔ محتوا عوض می‌شه، دکمه‌ها هم باهاش جابه‌جا می‌شن. اگه کاربر چند مرحله پشت سر هم بره، هر بار باید دکمهٔ بعدی رو دوباره پیدا کنه.

تو نمونه‌ای که بررسی کرده، یه سوال شش گزینه داره و زیرش دکمه‌های Back و Skip و Next هست. سوال بعدی فقط یه جمله می‌خواد و پنل کوتاه‌تر می‌شه، پس footer و دکمهٔ Next میان بالا. هر layout به تنهایی منطقیه، ولی کنار هم یه کار اضافه به کاربر می‌دن. اگه کاربر سریع کار کنه، ممکنه روی جای قبلی دکمه بزنه و به فضای خالی یا یه کنترل دیگه بخوره. نویسنده یادآوری می‌کنه که آدم‌ها خیلی وقتا دیالوگ‌ها رو با دقت نمی‌خونن و از روی عادت کلیک می‌کنن.

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

نویسنده اول Search Assist رو با دکمه‌هایی ساخت که به پایین کانتینر جواب چسبیده بودن. با جواب‌های کوتاه مشکلی حس نمی‌شد، ولی با جواب‌های بلند و روی موبایل مدام دنبال دکمه‌ها می‌گشت و به گفتهٔ خودش UX افتضاحی شده بود. حالا دکمه‌ها به نقطهٔ شروع چسبیدن: دکمهٔ More زیر خلاصهٔ اولیه‌ست، بعد از باز شدن جواب حالت‌های Stop و Resume همون‌جا می‌شینن و بقیهٔ جواب زیرشون رشد می‌کنه.

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

نکات کلیدی:

• تو رابط سیال، اگه دکمه‌ها با محتوا جابه‌جا بشن کاربر باید هر مرحله دوباره پیداشون کنه
• راه‌حل: یه بخش ثابت (مثل footer) انتخاب کن و بذار محتوا از اون دور بشه
• جای دکمهٔ اصلی داخل footer هم باید ثابت بمونه
• انیمیشن نرم جابه‌جایی دکمه مشکل رو کامل حل نمی‌کنه
• تو Search Assist دکمه‌های More و Stop و Resume به نقطهٔ شروع چسبیدن
• طرح رو با محتوای کوتاه، بلند و متن بزرگ تست کن، نه فقط با دموی دست‌چین