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

قطعه‌های جابه‌جاشدنی (Movable Pieces) چیست؟

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

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

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

قطعه‌های جابه‌جاشدنی چیست؟

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

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

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

مسئله: یک صفحه، چند کار

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

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

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

چرا کاربر باید چیدمان را خودش بسازد

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

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

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

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

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

پیاده‌سازی: نشانه‌ها و راه‌های برگشت

منبع چند توصیهٔ مشخص دارد. خلاصه‌شان این است که آزادی بدون نشانه به کار نمی‌آید.

• - ۱. نشانهٔ تغییر اندازه: وقتی نشانگر به لبهٔ پنل می‌رسد، شکلش به پیکان دوسویه تغییر کند تا کاربر بفهمد این لبه کشیدنی است.
• - ۲. دستگیره برای جابه‌جایی: جایی روی پنل باشد که بشود آن را گرفت و برد. بدون دستگیره، کاربر نمی‌داند کجای پنل را باید بکشد.
• - ۳. بزرگ کردن و بازگرداندن: دکمه‌ای برای تمام‌صفحه کردن یک پنل، که در حالت تمام‌صفحه به دکمهٔ بازگرداندن تبدیل شود.
• - ۴. مرزهای روشن: اگر نمی‌خواهید پنل‌ها روی هم بیفتند یا از حدی کوچک‌تر شوند، یک شبکه و حد کمینه تعیین کنید.
• - ۵. بازنشانی به پیش‌فرض: گزینه‌ای که با یک کلیک همه‌چیز را به چیدمان اولیه برگرداند.

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

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

هزینهٔ آزادی

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

چیدن وقت می‌گیرد. منبع خودش به این اشاره می‌کند و ابزار کوچکی به اسم Spectacle را مثال می‌زند که با میان‌بر پنجره‌ها را نصف یا ربع صفحه می‌کرد. از آن زمان سیستم‌عامل‌ها همین را در خودشان گذاشته‌اند. ویندوز ۷ در سال ۲۰۰۹ چسباندن پنجره به لبه‌ها را آورد و ویندوز ۱۱ چیدمان‌های آماده را. مک‌اواس هم در سال ۲۰۲۴ چیدن پنجره‌ها کنار هم را به خود سیستم اضافه کرد. درس این روند روشن است: بیشتر کاربران چیدمان آزاد نمی‌خواهند، چند چیدمان خوب و سریع می‌خواهند.

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

کشیدن برای همه ممکن نیست. کسی که لرزش دست دارد، با صفحه‌کلید کار می‌کند یا از ابزار کنترل صوتی استفاده می‌کند، نمی‌تواند یک لبهٔ چهارپیکسلی را دقیق بگیرد و بکشد. نسخهٔ ۲٫۲ رهنمودهای دسترس‌پذیری وب در سال ۲۰۲۳ معیاری به همین منظور اضافه کرد. هر کاری که با کشیدن انجام می‌شود، باید با یک اشارهٔ سادهٔ دیگر هم ممکن باشد. برای پنل‌ها یعنی دکمه یا منویی مثل «انتقال به راست» و «بزرگ‌تر». این بخشی از دسترس‌پذیری است، نه یک امکان اضافه. قانون فیتس هم همین را از زاویهٔ دیگری می‌گوید: هدف باریک، سخت گرفته می‌شود.

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

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

قطعه‌ها روی صفحه‌های کوچک

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

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

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

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

در بافت فارسی

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

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

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

سه: پیش‌فرض را روی صفحهٔ کوچک امتحان کنید. بسیاری از کاربران ایرانی هنوز با لپ‌تاپ‌هایی کار می‌کنند که نمایشگرشان ۱۳۶۶ در ۷۶۸ پیکسل است. چیدمانی که روی نمایشگر بزرگ تیم طراحی خوب است، روی این صفحه ممکن است کار اصلی را به یک نوار باریک تبدیل کند.

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

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

جمع‌بندی

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

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

اگر بخواهم یک پرسش بگذارم: آخرین باری که یک به‌روزرسانی جای پنلی را در ابزار روزانه‌تان عوض کرد، چند روز طول کشید تا دستتان دوباره راهش را پیدا کند؟