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

تب‌ها (Tabs) در طراحی رابط چیست؟

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

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

این برچسب‌ها آن‌قدر آشنا هستند که کسی به آن‌ها فکر نمی‌کند. اما تب هم مثل هر الگوی دیگری جای درست و جای غلط دارد.

تب چیست؟

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

ایده از دنیای فیزیکی آمده است. پوشه‌های بایگانی زبانه دارند. دفترچه‌های تلفن قدیمی کناره‌ای حروف‌دار داشتند تا بدون ورق زدن مستقیم به یک بخش برسید. به همین دلیل به این الگو «دستهٔ کارت» (card stack) هم می‌گویند.

تب‌ها عمداً کلی‌اند و بالاترین سطح دسته‌بندی را نشان می‌دهند. کاربر اول یک دستهٔ کلی را انتخاب می‌کند و بعد داخل آن به جزئیات می‌رسد.

در فارسی هم «تب» رایج است و هم «زبانه». در این متن «تب» می‌نویسم، چون در گفت‌وگوی روزمرهٔ طراحان جاافتاده‌تر است.

دو نوع تب: ناوبری و ماژول

منبع دو نوع تب را از هم جدا می‌کند. به نظرم این تفکیک مفیدترین نکتهٔ کل بحث است.

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

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

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

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

محکم‌ترین دلیل برای تب این است که همه آن را می‌شناسند. کاربر تازه‌کار هم احتمالاً بارها با آن کار کرده است. شباهتش به پوشه‌های بایگانی هم با مدل ذهنی آدم‌ها از «بخش‌بندی» جور درمی‌آید. لازم نیست کسی یاد بگیرد که برچسب کلیک‌خور است.

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

دلیل سوم هزینهٔ کم جابه‌جایی است. تب‌ها کنار هم‌اند و رفتن از یکی به دیگری فقط یک کلیک است. منبع اینجا از مفهومی به اسم «بازده کلیک» (Return on Click Investment) یاد می‌کند. یعنی تلاشی که کاربر می‌کند، در برابر چیزی که به دست می‌آورد. هرچه کلیک کمتر و نتیجه کامل‌تر باشد، این بازده بهتر است. بازده بالا کاوش را هم تشویق می‌کند.

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

چطور تب خوب بسازیم

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

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

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

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

بقیهٔ قاعده‌ها کوتاه‌ترند:

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

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

• - تأخیر کوتاه: قاب را فوراً نبندید. حدود ۲۰۰ تا ۳۰۰ میلی‌ثانیه صبر کنید تا معلوم شود موس واقعاً رفته است.
• - قاب پهن‌تر: قاب را کمی پهن‌تر از محتوایش بسازید تا خطای حرکت دست جا داشته باشد.
• - نشانگر متفاوت: شکل نشانگر روی تب عوض شود تا کاربر بداند وارد ناحیهٔ فعال شده است.

به نظر من در بیشتر موارد ساده‌تر است که تب اصلاً با کلیک باز شود. روی گوشی که موسی در کار نیست.

کی تب نگذاریم

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

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

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

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

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

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

تب روی موبایل و برای همه

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

روی موبایل، تب دو شکل اصلی دارد:

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

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

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

• - تب در نشانی صفحه: اگر تب ماژول محتوای مهمی دارد، تب فعال را در نشانی صفحه نگه دارید. کسی که لینک بخش «مشخصات» را برای دوستش می‌فرستد، انتظار دارد دوستش همان بخش را ببیند، نه تب اول را.
• - صفحه‌کلید و صفحه‌خوان: تب ماژول باید برای کسی که موس ندارد هم کار کند. الگوی استاندارد WAI-ARIA سه نقش tablist، tab و tabpanel را تعریف می‌کند. جابه‌جایی بین تب‌ها با کلیدهای جهت انجام می‌شود. کلید Tab کاربر را از ردیف تب به داخل قاب می‌برد.

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

تب در بافت فارسی

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

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

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

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

عدد کنار برچسب را درست بنشانید. تب‌هایی مثل «دیدگاه‌ها (۱۲۴)» در فروشگاه‌های ایرانی رایج‌اند. عدد را فارسی بنویسید. مطمئن شوید پرانتز در متن راست‌به‌چپ جای درستش می‌نشیند. پرانتزی که برعکس نمایش داده شود، کل برچسب را شکسته نشان می‌دهد.

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

جمع‌بندی

تب یکی از قدیمی‌ترین و آشناترین الگوهای رابط است و دلیلش روشن است. محتوای زیاد را بی‌آنکه صفحه شلوغ شود در دسترس می‌گذارد. در هر لحظه هم به کاربر می‌گوید کجاست.

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