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

انتخاب‌گر دوقابی (Two-Panel Selectors) چیست؟

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

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

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

انتخاب‌گر دوقابی چیست؟

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

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

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

چرا جواب می‌دهد

منبع سه دلیل اصلی برای این الگو می‌آورد.

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

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

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

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

فهرست کجا بنشیند

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

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

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

چطور دوقابی خوب بسازیم

منبع چند قاعدهٔ اجرایی پیشنهاد می‌کند:

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

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

چند قاب، و موبایل

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

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

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

کی دوقابی نگذاریم

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

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

انتخاب‌گر دوقابی در بافت فارسی

این بخش هم افزودهٔ من است و از کار روی رابط‌های فارسی می‌آید.

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

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

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

تاریخ و زمان در فهرست. فهرست‌های دوقابی معمولاً زمان هر مورد را هم نشان می‌دهند. در فارسی، تاریخ نسبی مثل «دیروز» و «۳ ساعت پیش» و تاریخ شمسی برای موارد قدیمی‌تر، از تاریخ میلادی خواناتر است.

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

جمع‌بندی

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

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